diff --git a/src/index.html b/src/index.html index d945138..4127958 100644 --- a/src/index.html +++ b/src/index.html @@ -1,50 +1,59 @@ - - Emilia Allison - - - - - - - - - - - - - - - + + + Emilia Allison + + + + + + + + + + + + + + + +
-
-
-

- Emilia. -

-

mathematics enjoyer

-

pgp: - - 8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455 - -

-

bottom text (now with extra spice™)

-
- -
+
+
+
+

+ Emilia +

+
+

mathematics enjoyer

+

pgp: + + 8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455 + +

+

bottom text (now with extra spice™)

+
+
+
+ +
+ diff --git a/src/scss/about.scss b/src/scss/about.scss index d91b915..fa22235 100644 --- a/src/scss/about.scss +++ b/src/scss/about.scss @@ -1,4 +1,4 @@ -@import "waltuh/waltuh"; +@use "new-style/new-style"; h1 { margin-top: 3vh; diff --git a/src/scss/index.scss b/src/scss/index.scss index 0623a95..b1681bb 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,5 +1,5 @@ -@use "waltuh/waltuh"; -@use "waltuh/variables" as *; +@use "new-style/new-style"; +@use "new-style/variables" as *; #pgp_a { position: fixed; @@ -9,8 +9,22 @@ margin-top: 0.6rem; } +.main_grid { + height: 16em; + display: inline-grid; + grid-template-columns: [title] 1fr [subtext-col] 6fr; + grid-template-rows: [blank1] 1fr [subtext-row] 1fr [blank2] 1fr; + grid-template-areas: "t ." "t d" "t ."; + + &>h1 { + grid-area: t; + } + &>div { + grid-area: d; + } +} + footer { - width: 100%; font-size: clamp(2rem, $fs-800, 15vw); justify-content: center !important; } diff --git a/src/scss/waltuh/_variables.scss b/src/scss/new-style/_variables.scss similarity index 72% rename from src/scss/waltuh/_variables.scss rename to src/scss/new-style/_variables.scss index 1028ca3..18860d5 100644 --- a/src/scss/waltuh/_variables.scss +++ b/src/scss/new-style/_variables.scss @@ -1,17 +1,17 @@ @use "sass:color"; @use "sass:math"; -$-color-white: hsl(280 30% 80%); -$-color-dark: color.adjust($-color-white, $lightness: -50%); -$-color-light: hsl(190 80% 30%); +$-color-bg: hsl(180 1% 10%); +$-color-dark: color.adjust($-color-bg, $lightness: +80%); +$-color-fg: hsl(344 65% 20%); $-ff-serif: "Inconsolata", monospace; $-ff-sans: "Jost", sans-serif; $-fs-900: math.div(100rem, 16); @forward "base" with ( - $color-white: $-color-white, + $color-bg: $-color-bg, $color-dark: $-color-dark, - $color-light: $-color-light, + $color-fg: $-color-fg, $ff-serif: $-ff-serif, $ff-sans: $-ff-sans, $fs-900: $-fs-900 diff --git a/src/scss/waltuh/base.scss b/src/scss/new-style/base.scss similarity index 87% rename from src/scss/waltuh/base.scss rename to src/scss/new-style/base.scss index 4c9b0c4..a538d24 100644 --- a/src/scss/waltuh/base.scss +++ b/src/scss/new-style/base.scss @@ -16,8 +16,8 @@ /* colors */ $color-dark: hsl(0 0% 0%) !default; /* Black */ -$color-light: hsl(0 0% 50%) !default; /* Gray */ -$color-white: hsl(0 0% 100%) !default;/* White */ +$color-fg: hsl(0 0% 50%) !default; /* Gray */ +$color-bg: hsl(0 0% 100%) !default;/* White */ /* font */ @@ -82,6 +82,22 @@ $ff-sans: sans-serif !default; bottom: 0%; } +.lock-right { + position: fixed; + right: 0%; +} + +.lock-top { + position: fixed; + top: 0%; +} + +.sideways-text { + writing-mode: vertical-rl; + text-orientation: upright; + letter-spacing: -1.0rem; +} + /* Other */ .hr::after { /* Add fake hr after header */ @@ -99,12 +115,12 @@ $ff-sans: sans-serif !default; /* Color Classes */ .bg-dark { background-color: $color-dark; } -.bg-light { background-color: $color-light; } -.bg-white { background-color: $color-white; } +.bg-light { background-color: $color-fg; } +.bg-white { background-color: $color-bg; } .text-dark { color: $color-dark; } -.text-light { color: $color-light; } -.text-white { color: $color-white; } +.text-light { color: $color-fg; } +.text-white { color: $color-bg; } /* Font Classes */ @@ -135,7 +151,8 @@ section:not(:last-of-type) { } footer { - margin-top: 3vh; + height: 100%; + margin-right: 3vw; } /* ----- */ @@ -164,7 +181,7 @@ body { font-family: $ff-sans; font-size: $fs-400; color: $color-dark; - background-color: $color-white; + background-color: $color-bg; line-height: 1.5; min-height: 100vh; } diff --git a/src/scss/waltuh/components/_book_entry.scss b/src/scss/new-style/components/_book_entry.scss similarity index 100% rename from src/scss/waltuh/components/_book_entry.scss rename to src/scss/new-style/components/_book_entry.scss diff --git a/src/scss/waltuh/components/_index.scss b/src/scss/new-style/components/_index.scss similarity index 76% rename from src/scss/waltuh/components/_index.scss rename to src/scss/new-style/components/_index.scss index dd4e203..7a5feb0 100644 --- a/src/scss/waltuh/components/_index.scss +++ b/src/scss/new-style/components/_index.scss @@ -1,4 +1,3 @@ -@forward "header"; @forward "overlay"; @forward "marks"; @forward "book_entry"; diff --git a/src/scss/new-style/components/_marks.scss b/src/scss/new-style/components/_marks.scss new file mode 100644 index 0000000..83552fa --- /dev/null +++ b/src/scss/new-style/components/_marks.scss @@ -0,0 +1,84 @@ +@use "sass:math"; +@use "sass:color"; +@use "../variables" as *; + + +@keyframes wipeIn { + from { clip-path: inset(0 100% 0 0); } + to { clip-path: inset(0 0 0 0); } +} + +span.new-style-gradient { + font-weight: 600; + + color: transparent; + $grad1: color.adjust($color-fg, $saturation: +80%, $lightness: +10%); + $grad2: color.adjust($grad1, $lightness: -10%); + background: linear-gradient($grad1, $grad2); + background-size: 30vmin 30vmin; + background-clip: text; + + animation: wipeIn 0.25s ease-in; + +} + +span.new-style-gradient-underline { + position: relative; + + &::after { + @extend span, .new-style-gradient; + background-clip: unset; + border-radius: 2rem; + + content: ""; + position: absolute; + bottom: -0.1rem; + left: 5%; + height: 0.6rem; + width: 90%; + } +} + +%new-style-gradient-sideline { + position: relative; + + &::after { + @extend span, .new-style-gradient; + background-clip: unset; + border-radius: 2rem; + + content: ""; + position: absolute; + bottom: 0%; + height: 95%; + width: 0.6rem; + } +} + +span.new-style-gradient-sideline--right { + @extend %new-style-gradient-sideline; + &::after { + right: 0.6rem; + } +} + +span.new-style-gradient-sideline--left { + @extend %new-style-gradient-sideline; + &::after { + left: 0.6rem; + } +} + +span.spoiler { + background: black; + color: transparent; + user-select: none; + + transition: background 100ms ease, + color 100ms ease; + + &:hover, &:active, &:focus { + background: inherit; + color: inherit; + } +} diff --git a/src/scss/waltuh/components/_overlay.scss b/src/scss/new-style/components/_overlay.scss similarity index 100% rename from src/scss/waltuh/components/_overlay.scss rename to src/scss/new-style/components/_overlay.scss diff --git a/src/scss/waltuh/layouts/_grid.scss b/src/scss/new-style/layouts/_grid.scss similarity index 99% rename from src/scss/waltuh/layouts/_grid.scss rename to src/scss/new-style/layouts/_grid.scss index a620444..5c26afe 100644 --- a/src/scss/waltuh/layouts/_grid.scss +++ b/src/scss/new-style/layouts/_grid.scss @@ -22,7 +22,7 @@ height: 100vh; width: 100%; - div { + &>div { justify-self: center; grid-area: center; diff --git a/src/scss/waltuh/layouts/_index.scss b/src/scss/new-style/layouts/_index.scss similarity index 100% rename from src/scss/waltuh/layouts/_index.scss rename to src/scss/new-style/layouts/_index.scss diff --git a/src/scss/waltuh/layouts/_modifiers.scss b/src/scss/new-style/layouts/_modifiers.scss similarity index 100% rename from src/scss/waltuh/layouts/_modifiers.scss rename to src/scss/new-style/layouts/_modifiers.scss diff --git a/src/scss/waltuh/waltuh.scss b/src/scss/new-style/new-style.scss similarity index 100% rename from src/scss/waltuh/waltuh.scss rename to src/scss/new-style/new-style.scss diff --git a/src/scss/waltuh/components/_header.scss b/src/scss/waltuh/components/_header.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/scss/waltuh/components/_marks.scss b/src/scss/waltuh/components/_marks.scss deleted file mode 100644 index 076a211..0000000 --- a/src/scss/waltuh/components/_marks.scss +++ /dev/null @@ -1,70 +0,0 @@ -@use "sass:math"; -@use "sass:color"; -@use "../variables" as *; - - -@keyframes waltuh-gradient-anim { - $r: 6em; - $pd: math.div(2*math.$pi,10); - from { - background-position: 6em 0em; - } - @for $i from 1 through 9 { - #{$i*10}% { - background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd); - } - } - to { - background-position: 6em 0em; - } -} -@keyframes wipeIn { - from { clip-path: inset(0 100% 0 0); } - to { clip-path: inset(0 0 0 0); } -} - -span.waltuh-gradient { - font-weight: 600; - - color: transparent; - $grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%); - $grad2: color.adjust($grad1, $lightness: +30%); - background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white); - background-size: 30vmin 30vmin; - background-clip: text; - - animation: waltuh-gradient-anim 12s linear infinite, - wipeIn 0.25s ease-in; - -} - -span.waltuh-gradient-underline { - position: relative; - - &::after { - @extend span, .waltuh-gradient; - background-clip: unset; - border-radius: 2rem; - - content: ""; - position: absolute; - bottom: 0.2rem; - left: 10%; - height: 0.4rem; - width: 80%; - } -} - -span.spoiler { - background: black; - color: transparent; - user-select: none; - - transition: background 100ms ease, - color 100ms ease; - - &:hover, &:active, &:focus { - background: inherit; - color: inherit; - } -}