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 {
@media screen and (--bp-margin) {
@mixin px 0;
@supports (anchor-name: --test) {
@media screen and (--bp-margin) {
@mixin px 0;
position: relative;
position: relative;
display: flex;
gap: var(--spacing-generous);
display: flex;
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 {
flex: 1 1 auto;
min-width: 40ch;
max-width: 75ch;
& .content {
flex: 1 1 auto;
min-width: 40ch;
max-width: 75ch;
}
}
}
}

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

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