diff options
Diffstat (limited to '')
| -rw-r--r-- | css/default.scss | 58 |
1 files changed, 47 insertions, 11 deletions
diff --git a/css/default.scss b/css/default.scss index dfb0a8f..a6854a3 100644 --- a/css/default.scss +++ b/css/default.scss @@ -1,5 +1,35 @@ @import "https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100..900&display=swap"; +@mixin for-phone-only { + @media (max-width: 599px) { + @content; + } +} + +@mixin for-tablet-portrait-up { + @media (min-width: 600px) { + @content; + } +} + +@mixin for-tablet-landscape-up { + @media (min-width: 900px) { + @content; + } +} + +@mixin for-desktop-up { + @media (min-width: 1200px) { + @content; + } +} + +@mixin for-big-desktop-up { + @media (min-width: 1800px) { + @content; + } +} + $background-color: oklch(22.49% 0.008 297.21); $foreground-color: oklch(98.51% 0 0); $primary-color: oklch(82.67% 0.096 307.5); @@ -24,34 +54,41 @@ body { background-color: black; background-image: url("/images/noise.png"), - linear-gradient(135deg, + linear-gradient( + 135deg, oklch(from $primary-color l c h / $opacity), - oklch(from $secondary-color l c h / $opacity) 100%); + oklch(from $secondary-color l c h / $opacity) 100% + ); + background-attachment: fixed; color: white; color: $foreground-color; - padding: 4rem 0 0 0; + padding: 4rem 1rem 1rem 1rem; margin: 0; - width: 100vw; - height: 100vh; + + @include for-phone-only { + padding: 0.25rem; + flex-direction: row; + } } content { display: flex; + width: 100%; max-width: 60rem; flex-direction: row-reverse; - &>* { + & > * { background-color: $background-color; outline: 0.1rem solid $background-color; outline-offset: 0.1rem; } - &>nav { + & > nav { padding: 1.25rem 0.75rem; } - &>article { - width: 100vw; + & > article { + flex: auto; padding: 1.25rem; height: fit-content; } @@ -122,7 +159,6 @@ a { @mixin std-style { display: block; margin: 0; - padding-bottom: 0.2rem; } p { @@ -164,4 +200,4 @@ h1 { opacity: 0.75; } } -}
\ No newline at end of file +} |