muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 12:26:40 +07:00
Code Packages Activity Actions

improve cell text appearance

Browse source
This commit is contained in:
Fedor Katurov 2025-02-07 02:42:45 +07:00
parent b257e9b5d9
commit 24c66ccfdb
5 changed files with 61 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss
View file

@ -3,8 +3,20 @@
.text {
@include blur;
padding: $gap / 2 $gap $gap $gap;
line-height: 1.3em;
display: flex;
flex-direction: column;
min-height: 0;
}
.description {
mask-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 1) 50%,
rgba(0, 0, 0, 0) 95%
);
flex: 1;
overflow: hidden;
}
.heading {

2
src/containers/flow/FlowGrid/components/FlowCell/index.tsx
View file

@ -145,7 +145,7 @@ const FlowCell: FC<Props> = ({
/>
)}
{!!title && (
{!!title && !withText && (
<CellShade
color={color}
className={styles.shade}

43
src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss
View file

@ -1,5 +1,7 @@
@import 'src/styles/variables';
$compact_size: 200px;
.cell {
@include inner_shadow;
@ -9,6 +11,7 @@
width: 100%;
height: 100%;
background: $content_bg;
container: cell / inline-size;
}
.thumb {
@ -37,18 +40,13 @@
overflow: hidden;
border-radius: $radius;
box-sizing: border-box;
inset: 50% 0 0 0;
padding: $gap $gap * 1.5 0 $gap * 1.5;
font: $font_14_medium;
line-height: 1.25em;
inset: 50% 0 0 0;
&.bright {
color: var(--content_bg_lightest);
}
@include tablet {
font: $font_12_medium;
left: 5px;
bottom: 5px;
@container (max-width: $compact_size) {
padding: $gap / 2 $gap 0 $gap;
}
& :global(.grey) {
@ -56,6 +54,17 @@
opacity: 0.5;
}
@container (max-width: #{$compact_size}) {
padding: $gap / 2 $gap 0 $gap;
}
.horizontal &,
.quadro & {
@container (max-width: #{$compact_size * 2}) {
padding: $gap / 2 $gap 0 $gap;
}
}
.horizontal & {
inset: 0 calc(50% + $gap / 2) 0 0;
border-radius: $radius 0 0 $radius;
@ -70,6 +79,10 @@
inset: calc(50% + $gap / 2) calc(50% + $gap / 2) 0 0;
border-radius: 0 $radius 0 $radius;
}
.title {
margin-bottom: 0.1em;
}
}
.title_wrapper {
@ -87,9 +100,17 @@
text-transform: uppercase;
word-break: break-word;
color: inherit;
margin-bottom: -0.125em;
@include tablet {
font: $font_16_semibold;
@container (max-width: #{$compact_size}) {
font: $font_cell_title_compact;
}
.horizontal &,
.quadro & {
@container (max-width: #{$compact_size * 2}) {
font: $font_cell_title_compact;
}
}
}

6
src/containers/flow/FlowGrid/styles.module.scss
View file

@ -1,11 +1,5 @@
@import 'src/styles/variables';
@mixin mobile {
@media (max-width: $cell * 2) {
@content;
}
}
.cell {
&.horizontal,
&.quadro {

20
src/styles/_fonts.scss
View file

@ -1,4 +1,3 @@
$bold: 700;
$semibold: 600;
$regular: 400;
@ -6,10 +5,20 @@ $medium: 500;
$light: 300;
$extra_light: 200;
$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
$font:
Montserrat,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
'Noto Sans',
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji';
$font_48_semibold: $semibold 48px $font;
$font_48_bold: $bold 48px $font;
@ -39,5 +48,6 @@ $font_8_regular: $regular 8px $font;
$font_8_semibold: $semibold 8px $font;
$font_cell_title: $font_24_semibold;
$font_cell_title_compact: $font_18_semibold;
$font_hero_title: $bold 40px $font;
$font_boris: $bold 72px $font;