dave-dmg/blog_bricked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added fallback for Firefox for Sidenotes

Browse Source
This commit is contained in:
Dave
2025-10-02 18:59:28 +02:00
parent 2e30b1d6ed
commit e4b72005f2
2 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Article/Content/MarkdocRenderer/MarkdocRenderer.module.css
View File

@@ -7,22 +7,24 @@
} }
.hasMargin { .hasMargin {
@media screen and (--bp-margin) { @supports (anchor-name: --test) {
@mixin px 0; @media screen and (--bp-margin) {
@mixin px 0;
position: relative; position: relative;
display: flex; display: flex;
gap: var(--spacing-generous); gap: var(--spacing-generous);
max-width: none; max-width: none;
font-size: clamp(1rem, 2.5vw, 1.25rem); font-size: clamp(1rem, 2.5vw, 1.25rem);
& .content { & .content {
flex: 1 1 auto; flex: 1 1 auto;
min-width: 40ch; min-width: 40ch;
max-width: 75ch; max-width: 75ch;
}
} }
} }
} }

24
src/components/Content/Sidenote/Container/Container.module.css
View File

@@ -4,9 +4,11 @@
} }
.wrapper { .wrapper {
@media screen and (--bp-margin) { @supports (anchor-name: --test) {
position: absolute; @media screen and (--bp-margin) {
top: anchor(top); position: absolute;
top: anchor(top);
}
} }
} }
@@ -18,14 +20,16 @@
padding-left: var(--size-12); padding-left: var(--size-12);
font-family: var(--font-mono); font-family: var(--font-mono);
@media screen and (--bp-margin) { @supports (anchor-name: --test) {
min-width: var(--size-64); @media screen and (--bp-margin) {
margin-top: 0; min-width: var(--size-64);
padding: var(--spacing-cozy) var(--spacing-cozy) var(--spacing-cozy) var(--size-12) ; margin-top: 0;
border: var(--size-1) solid var(--color-surface-inverse); padding: var(--spacing-cozy) var(--spacing-cozy) var(--spacing-cozy) var(--size-12) ;
border: var(--size-1) solid var(--color-surface-inverse);
background: var(--color-surface-elevated-1); background: var(--color-surface-elevated-1);
box-shadow: 2px 2px 0 var(--color-palette-woodsmoke), 4px 4px 0 var(--color-palette-charcoal-gray); box-shadow: 2px 2px 0 var(--color-palette-woodsmoke), 4px 4px 0 var(--color-palette-charcoal-gray);
}
} }
} }