Convert print and mobile styles to pure css.

This commit is contained in:
Fredrik Jonsson 2025-09-17 09:52:08 +02:00
commit 8e9c7209dc
2 changed files with 7 additions and 12 deletions

139
assets/sass/mobilemenu.css Normal file
View file

@ -0,0 +1,139 @@
/* The mobile navigation stylesheet for this theme. */
.mobile-nav {
position: absolute;
right: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
font-family: var(--ff-headings);
z-index: 20;
pointer-events: none;
&[data-navopen] {
position: fixed;
}
.language-icon {
fill: var(--color-text-bg);
}
&__cover {
position: absolute;
width: 100vw;
height: 100vh;
background-color: var(--color-mobile-menu-cover);
opacity: 0;
[data-navopen] & {
opacity: 1;
pointer-events: auto;
}
}
&__toggle {
display: flex;
align-items: center;
position: absolute;
top: var(--gutters);
right: var(--gutters);
padding: 0 .3rem;
border-color: var(--color-button-text-hover);
z-index: 22;
pointer-events: auto;
&:hover,
&:focus-visible,
&:active {
svg {
fill: var(--color-button-text-hover);
}
}
}
&__hamburger {
fill: var(--color-button-text);
width: 1.6rem;
margin-inline-start: .1rem;
.button--outline & {
fill: var(--color-button);
}
rect {
transform-origin: center;
}
[data-navopen] & {
rect {
y: 45px;
&:nth-of-type(1) {
transform: rotate(45deg);
}
&:nth-of-type(2) {
opacity: 0;
}
&:nth-of-type(3) {
transform: rotate(-45deg);
}
}
}
}
&__sheet {
visibility: hidden;
background-color: var(--color-mobile-menu);
width: 90vw;
height: 100vh;
padding: 2.25rem;
transform: translateX(100vw);
z-index: 21;
[data-navopen] & {
visibility: visible;
pointer-events: auto;
box-shadow: -10px 0 10px -10px var(--color-nearblack);
transform: translateX(10vw);
}
}
&__region {
&:not(:empty) {
margin-block-end: .5rem;
}
}
&__navbar {
display: flex;
flex-direction: column;
padding-inline-start: 0;
margin-block: 0;
li {
list-style: none;
}
a {
display: inline-block;
padding-block: .5rem;
}
}
&__cover,
&__toggle,
&__hamburger > rect,
&__sheet {
/* Add some transitions unless user prefer less motion. */
@media (prefers-reduced-motion: no-preference) {
transition: all 130ms ease-in;
[data-navopen] & {
transition: all 330ms ease-out;
}
}
}
}

41
assets/sass/print.css Normal file
View file

@ -0,0 +1,41 @@
/* The print stylesheet for this theme. */
.pager,
.mobile-nav,
aside,
nav,
footer {
display: none;
}
@media print {
html {
font-size: var(--print-font-size);
}
html,
body,
.page {
background-color: white;
border-color: black;
box-shadow: none;
color: black;
}
.main {
width: 100%;
}
/* Underline all links. */
:link,
:visited {
text-decoration: underline;
}
/* Add visible title after abbreviations. */
abbr[title] {
&::after {
content: ' (' attr(title) ')';
}
}
}