Mastodon/MARL-Mastodon-Archive-Reader-Lite
1
0
Fork 0
mirror of https://github.com/s427/MARL.git synced 2025-01-31 03:24:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

sass refactor (nested rules order)

Browse Source
This commit is contained in:
Vincent CLAVIEN 2025-01-10 18:40:21 +01:00
parent 963ac65997
commit a4f38f4f40
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
dev/src/css/_tags.scss
View File

@ -48,14 +48,15 @@ $display-wide: 340px;
cursor: pointer;
.count {
color: var(--accent-dark);
font-size: 0.85em;
font-weight: bold;
@container (width >= #{$display-wide}) {
display: inline-block;
min-width: 5ch;
text-align: right;
}
color: var(--accent-dark);
font-size: 0.85em;
font-weight: bold;
}
.name {
flex-grow: 1;

19
dev/src/css/_toot.scss
View File

@ -3,6 +3,8 @@
$meta-visible: 100ch;
.toot {
background: var(--bg1);
@container (width >= #{$meta-visible}) {
display: grid;
grid-template-areas:
@ -14,8 +16,6 @@ $meta-visible: 100ch;
grid-template-rows: min-content min-content 1fr min-content;
}
background: var(--bg1);
&:last-child {
border-bottom: none;
}
@ -80,8 +80,8 @@ $meta-visible: 100ch;
top: 0;
bottom: 0;
z-index: 1;
background: transparent url("../svg/light/type-boost.svg") no-repeat
calc(100% - 1rem) calc(100% - 0.5rem) / auto 50% scroll;
background: transparent url("../svg/light/type-boost.svg") no-repeat calc(100% - 1rem) calc(100% - 0.5rem) / auto
50% scroll;
}
a {
@ -218,8 +218,7 @@ $meta-visible: 100ch;
width: 1.5rem;
height: 1.5rem;
border-radius: 10rem;
background: #c00 url("../svg/light/no-alt-text.svg") no-repeat 50% 50% /
contain scroll;
background: #c00 url("../svg/light/no-alt-text.svg") no-repeat 50% 50% / contain scroll;
}
}
}
@ -262,15 +261,17 @@ $meta-visible: 100ch;
}
.toot-meta {
@container (width < #{$meta-visible}) {
display: none;
}
grid-area: meta;
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
padding-left: 0;
@container (width < #{$meta-visible}) {
display: none;
}
dl {
margin: 0;
display: grid;