diff --git a/src/about.html b/src/about.html index 3cb0dca..9753ef2 100644 --- a/src/about.html +++ b/src/about.html @@ -6,9 +6,8 @@ -
-
-
+
+

@@ -16,8 +15,8 @@

isn't that the page title?

-I'm not super keen on saying that much about myself on the internet. -Anyway, here's some information about myself, posted on the aforementioned internet. +I'm not super keen on saying that much about myself on the internet. +Anyway, here's some information about myself, posted on the aforementioned internet.

I'm studying mathematics (with a focus on computation) at Penn State, and will hopefully be graduating in 2023. @@ -45,7 +44,7 @@ linux distros don't matter

  • 🦐
    • -
    diff --git a/src/cool-stuff/index.html b/src/cool-stuff/index.html index 0b6d7e6..c5f80d9 100644 --- a/src/cool-stuff/index.html +++ b/src/cool-stuff/index.html @@ -8,7 +8,7 @@
    -
    +

    Cool Stuff @@ -34,7 +34,7 @@ If a page uses/requires JavaScript, its link will be marked with (☕).
  • Recipes

    • -
    diff --git a/src/index.html b/src/index.html index a30fa34..caf78a4 100644 --- a/src/index.html +++ b/src/index.html @@ -17,35 +17,32 @@ - -
    -
    -
    -
    -
    -

    Emilia

    -

    mathematics enjoyer

    -

    pgp: + +

    +
    +
    +

    Emilia.

    +

    mathematics enjoyer

    +

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

    -

    bottom text

    -
    -
    - -
    - + +

    +

    bottom text (new and improved)

    + + +
    diff --git a/src/scss/about.scss b/src/scss/about.scss index b463463..2372092 100644 --- a/src/scss/about.scss +++ b/src/scss/about.scss @@ -1 +1 @@ -@import "ilia1"; +@import "waltuh/waltuh"; diff --git a/src/scss/ilia1.scss b/src/scss/ilia1.scss deleted file mode 100644 index 5e6d783..0000000 --- a/src/scss/ilia1.scss +++ /dev/null @@ -1,247 +0,0 @@ -/* ---------------- */ -/* ILIA1 STYLE FILE */ -/* ---------------- */ -/* - * Formalizing the - * until now very - * disorganized look - * and feel of ILIA - */ - -@use "sass:color"; -@import "reset"; - -$color-white: hsl(48, 73%, 84%); -$color-light: hsl(348, 73%, 84%); -$color-dark: hsl(195, 47%, 7%); - -/* --------------- */ -/* Utility Classes */ -/* --------------- */ - -.flex { - display: flex; - gap: 2rem; -} - -.column { - @extend .flex; - justify-content: center; - align-items: center; - flex-direction: column; - align-content: center; -} - -.row { - @extend .flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-content: baseline; - max-width: 100%; -} - -.container { - padding-inline: clamp(0.5rem, 4rem, 5rem); - margin-inline: auto; - max-width: 80rem; -} - -@mixin grid-center($top-offset:1, $bottom-offset:1, $left-offset:1, $right-offset:1) { - display: grid; - grid-template-rows: $top-offset*1fr 1fr $bottom-offset*1fr; - grid-template-columns: $left-offset*1fr 1fr $right-offset*1fr; - grid-template-areas: - ". . ." - ". main ." - ". . ."; - - div { - place-self: center; - grid-area: main; - } - footer { - @extend .row; - flex-wrap: nowrap; - - margin-bottom: 2vh; - position: static; - grid-row: 3 / span 1; - grid-column: 2 / span 1; - place-self: end center; - - } -} - -.grid-center { - @include grid-center; -} - -.grid-center--offset { - @include grid-center($top-offset: 0.7); -} - -.grid-center--offset-wide { - @include grid-center($top-offset: 0.7, $left-offset: 0.5, $right-offset: 0.5); -} - -.fixed { - position: fixed; -} - -.scroll { - position: scroll; -} - -/* ---------- */ -/* Tag Styles */ -/* ---------- */ - -body { - overflow: hidden; - background-color: black; - - @extend .column; -} - -main { - width: 90%; - height: 100vh; - - background-color: $color-dark; - - * { - z-index: 100; - } -} - -/* Text */ - -h1 { - margin: 5px 5px; - - font-family: serif; - font-size: $fs-700; - text-align: center; - - color: $color-light; -} - -h2 { - font-family: serif; - font-size: $fs-600; - text-align: center; - - color: $color-white; -} - -h3 { - font-family: sans-serif; - font-size: $fs-500; - - color: $color-white; -} - -p { - margin: 5px 0px; - - font-family: sans-serif; - font-size: $fs-300; - text-align: left; - - color: $color-white; -} - -/* Lists, Modifiers */ - -ol { - margin: 0; - list-style-type: decimal; -} - -ul { - list-style-type: none; - li { - &:before { - content: "- "; - } - } -} - -li { - @extend p -} - -a { - position: relative; - z-index: 999; - - text-decoration: none; - - &:link { - color: $color-white; - } - &:visited { - color: color.adjust($color-white, $lightness: -20%); - } -} - -/* Semantic */ - -footer { - position: fixed; - bottom: 0px; -} - -/* ------------- */ -/* ILIA Specific */ -/* ------------- */ - -#overlay { - width: 100%; - height: 100vh; - position: fixed; - - opacity: 0.03; - z-index: 1; - background-image: url('../img/noise.gif'); - background-size: 25%; -} - -#pgp_a { - display: none; -} - -/* Animations */ -// GRADIENTS (you might need them!) -$rainbow-gradient: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red, violet); - -// ANIMATIONS (love to see them) -@keyframes gradient-bg { - from { - background-position: 0%; - } - to { - background-position: 100%; - } -} - -@mixin rainbow-text() { - animation: gradient-bg 4s linear infinite; -} - -// MARKS -mark.rainbow { - background-image: $rainbow-gradient; - background-size: 1000% 1000%; - color: transparent; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - @include rainbow-text(); -} - -// ALIASES -mark.internet { - @extend .rainbow; - font-weight: bold; -} diff --git a/src/scss/index.scss b/src/scss/index.scss index eb72e3d..e878d9e 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,13 +1,16 @@ -@import "ilia1"; +@use "waltuh/waltuh"; +@use "waltuh/variables" as *; + +#pgp_a { + position: fixed; + display: none; + + font-size: $fs-200; + margin-top: 0.4rem; +} footer { - a { - display: table-cell; - height: 6vh; - width: 15%; - margin: 3%; - - font-size: 6vh; - text-align: center; - } + width: 100%; + font-size: $fs-800; + justify-content: center !important; } diff --git a/src/scss/reset.scss b/src/scss/reset.scss deleted file mode 100644 index e307eb1..0000000 --- a/src/scss/reset.scss +++ /dev/null @@ -1,59 +0,0 @@ -/* Font Sizes */ - -$fs-900: calc(125rem / 16); -$fs-800: calc(75rem / 16); -$fs-700: calc(56rem / 16); -$fs-600: calc(32rem / 16); -$fs-500: calc(28rem / 16); -$fs-400: calc(24rem / 16); -$fs-300: calc(18rem / 16); -$fs-200: calc(16rem / 16); - -*, -*::before, -*::after { - box-sizing: border-box; -} - -body, h1, h2, h3, h4, h5, h6, p { - margin: 0; -} - -h1, h2, h3 { - line-height: 1.1; -} - -body { - font-family: sans-serif; - font-size: $fs-400; - color: hsl(0, 0%, 0%); - background-color: hsl(0, 0%, 100%); - line-height: 1.5; - min-height: 100vh; -} - -img, picture { - max-width: 100%; - display: block; -} - -input, button, textarea, select { - font: inherit; -} - -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behaviour: auto !important; - } -} - -@mixin mobile() { - @media (pointer: coarse) { - @content; - } - } diff --git a/src/scss/waltuh/_variables.scss b/src/scss/waltuh/_variables.scss new file mode 100644 index 0000000..9f68e42 --- /dev/null +++ b/src/scss/waltuh/_variables.scss @@ -0,0 +1,33 @@ +@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%); +$-ff-serif: "Inconsolata", monospace; +$-ff-sans: "Jost", sans-serif; +$-fs-900: math.div(100rem, 16); + +@forward "base" with ( + $color-white: $-color-white, + $color-dark: $-color-dark, + $color-light: $-color-light, + $ff-serif: $-ff-serif, + $ff-sans: $-ff-sans, + $fs-900: $-fs-900 +); + +@font-face { + font-family: "Inconsolata"; + src: url("fonts/Inconsolata.ttf"); + + font-display: swap; + font-variation-settings: "wdth" 85; +} + +@font-face { + font-family: "Jost"; + src: url("fonts/Jost.ttf"); + + font-display: swap; +} diff --git a/src/scss/waltuh/base.scss b/src/scss/waltuh/base.scss new file mode 100644 index 0000000..4c9b0c4 --- /dev/null +++ b/src/scss/waltuh/base.scss @@ -0,0 +1,214 @@ +// +// +// Do Not Change This File! +// +// +@use "sass:math"; +/* ----------------- */ +/* Custom Properties */ +/* ----------------- */ +/* + This values are to be overridden + after being injected into + the global scope. +*/ + + /* 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 */ + + /* font */ + + /* Sizes divided by 16 so values given in px */ +$fs-900: math.div(125rem, 16) !default; +$fs-800: math.div(75rem, 16) !default; +$fs-700: math.div(56rem, 16) !default; +$fs-600: math.div(32rem, 16) !default; +$fs-500: math.div(28rem, 16) !default; +$fs-400: math.div(24rem, 16) !default; +$fs-300: math.div(18rem, 16) !default; +$fs-200: math.div(16rem, 16) !default; + +$ff-serif: serif !default; +$ff-sans-cond: sans-serif !default; +$ff-sans: sans-serif !default; + +/* --------------- */ +/* Utility Classes */ +/* --------------- */ + +/* Layouts */ + +.container { + padding-inline: clamp(0.5rem, 4rem, 5rem); + margin-inline: auto; + max-width: 80rem; +} + +.flex { + display: flex; + gap: 2rem; +} + +.column { + justify-content: center; + align-items: center; + flex-direction: column; + align-content: center; +} + +.row { + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-content: baseline; + max-width: 100%; +} + +.two-columns { + display: grid; + /* Will shrink to one column, never exceed two! + * The `max` in `minmax` asks that the columns + * be no smaller */ + grid-template-columns: repeat(auto-fit, minmax(max(30rem, 40%), 1fr)); + column-gap: 1rem; + justify-content: space-evenly; +} + +.lock-bottom { + position: fixed; + bottom: 0%; +} + +/* Other */ + +.hr::after { /* Add fake hr after header */ + content: ''; + + position: absolute; + display: block; + clear: both; + width: 100%; + height: 0.15rem; + + background-color: black; +} + +/* Color Classes */ + +.bg-dark { background-color: $color-dark; } +.bg-light { background-color: $color-light; } +.bg-white { background-color: $color-white; } + +.text-dark { color: $color-dark; } +.text-light { color: $color-light; } +.text-white { color: $color-white; } + +/* Font Classes */ + +.fs-900 { font-size: $fs-900; } +.fs-800 { font-size: $fs-800; } +.fs-700 { font-size: $fs-700; } +.fs-600 { font-size: $fs-600; } +.fs-500 { font-size: $fs-500; } +.fs-400 { font-size: $fs-400; } +.fs-300 { font-size: $fs-300; } +.fs-200 { font-size: $fs-200; } + +.ff-serif { font-family: $ff-serif; } +.ff-sans-cond { font-family: $ff-sans-cond; } +.ff-sans { font-family: $ff-sans; } + +.uppercase { text-transform: uppercase; } +.lowercase { text-transform: lowercase; } + +/* Semantic Tags and Their Classes */ + +header { + margin-bottom: 3vh; +} + +section:not(:last-of-type) { + margin-bottom: 3vh; +} + +footer { + margin-top: 3vh; +} + +/* ----- */ +/* Reset */ +/* ----- */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body, h1, h2, h3, h4, h5, h6, p { + margin: 0; +} + +h1, h2, h3, h4, h5, h6, p { + font-weight: 400; +} + +h1, h2, h3 { + line-height: 1.1; +} + +body { + font-family: $ff-sans; + font-size: $fs-400; + color: $color-dark; + background-color: $color-white; + line-height: 1.5; + min-height: 100vh; +} + +main { + margin-left: 1vw; + margin-top: 1vh; + * { + z-index: 2; + } +} + +footer { + z-index: 2; +} + +img, picture { + max-width: 100%; + display: block; +} + +input, button, textarea, select { + font: inherit; +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behaviour: auto !important; + } +} + +/* -------------------- */ +/* Non-Reusable Classes */ +/* -------------------- */ +/* meant for these pages + * only, not to be used + * in practice */ + +.colors--block { + padding: 3rem 1rem 1rem; + border: 1px solid black; +} diff --git a/src/scss/waltuh/components/_header.scss b/src/scss/waltuh/components/_header.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scss/waltuh/components/_index.scss b/src/scss/waltuh/components/_index.scss new file mode 100644 index 0000000..c2faa97 --- /dev/null +++ b/src/scss/waltuh/components/_index.scss @@ -0,0 +1,3 @@ +@forward "header"; +@forward "overlay"; +@forward "marks"; diff --git a/src/scss/waltuh/components/_marks.scss b/src/scss/waltuh/components/_marks.scss new file mode 100644 index 0000000..ced9a7c --- /dev/null +++ b/src/scss/waltuh/components/_marks.scss @@ -0,0 +1,39 @@ +@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; + +} diff --git a/src/scss/waltuh/components/_overlay.scss b/src/scss/waltuh/components/_overlay.scss new file mode 100644 index 0000000..95e1589 --- /dev/null +++ b/src/scss/waltuh/components/_overlay.scss @@ -0,0 +1,18 @@ +@keyframes overlay-breathe { + from {opacity: 0.04;} + to {opacity: 0.10;} +} +#overlay { + width: 100%; + height: 100vh; + top: 0; + left: 0; + position: fixed; + + opacity: 0.10; + z-index: 1; + background-image: url('https://ilia.moe/img/noise.gif'); + background-size: 20vmin; + + animation: overlay-breathe 3s ease-in infinite alternate; +} diff --git a/src/scss/waltuh/layouts/_grid.scss b/src/scss/waltuh/layouts/_grid.scss new file mode 100644 index 0000000..2a853a5 --- /dev/null +++ b/src/scss/waltuh/layouts/_grid.scss @@ -0,0 +1,74 @@ +@use "sass:list"; +@use "../variables" as *; + +%grid { + display: grid; +} + +@mixin grid-3x3-offset($top: 1fr, $bottom: 1fr, $left: 1fr, $right: 1fr) { + //@debug "mixin top: #{$top}"; + @extend %grid; + grid-template-rows: $top 1fr $bottom; + grid-template-columns: $left 1fr $right; + grid-template-areas: + "nw n ne" + "w center e" + "sw s se"; +} + +/* Classes */ +%offset-grid { + margin: 0; + height: 100%; + width: 100%; + + div { + justify-self: center; + grid-area: center; + + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-items: center; + + h1, h2, h3 { + display: inline-block; + //width: min-content; // Looks terrible in practice + } + } +} + +// Grid Offset Hell +$offset-amt: 0.33fr; +@each $dir in [top, bottom, left, right] { + $dir_adj: ""; + @if $dir { + $dir_adj: "--#{$dir}"; + } + + @each $size, $size_val in (null: 1fr, wide: 0.4fr, narrow: 1.2fr) { + $size_adj: ""; + @if $size { + $size_adj: "--#{$size}"; + } + .offset-grid#{$dir_adj}#{$size_adj} { + $-l: [1fr, 1fr, 1fr, 1fr]; + @if $dir == top { + $-l: [$offset-amt, 1fr, $size_val, $size_val]; + } @else if $dir == bottom { + $-l: [1fr, $offset-amt, $size_val, $size_val]; + } @else if $dir == left { + $-l: [$size_val, $size_val, $offset-amt, 1fr]; + } @else if $dir == right { + $-l: [$size_val, $size_val, 1fr, $offset-amt]; + } + //@debug "list: #{$-l}"; + //@debug list.nth($-l, 1); + @include grid-3x3-offset($top: list.nth($-l,1), $bottom: list.nth($-l,2), + $left: list.nth($-l,3), $right: list.nth($-l,4)); + + @extend %offset-grid; + } + } +} diff --git a/src/scss/waltuh/layouts/_index.scss b/src/scss/waltuh/layouts/_index.scss new file mode 100644 index 0000000..c24967b --- /dev/null +++ b/src/scss/waltuh/layouts/_index.scss @@ -0,0 +1,2 @@ +@forward "grid"; +@forward "modifiers"; diff --git a/src/scss/waltuh/layouts/_modifiers.scss b/src/scss/waltuh/layouts/_modifiers.scss new file mode 100644 index 0000000..a984431 --- /dev/null +++ b/src/scss/waltuh/layouts/_modifiers.scss @@ -0,0 +1,20 @@ +.fullsize { + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + + height: 100vh !important; + width: 100vw !important; +} + +$gap-sizes: ("small": 1vmin, "mid": 3vmin, "large": 5vmin); + +@each $size, $dist in $gap-sizes { + @each $dir in [top, bottom, left, right] { + .gap-#{$size}-#{$dir} { + margin-#{$dir}: $dist; + } + } +} diff --git a/src/scss/waltuh/waltuh.scss b/src/scss/waltuh/waltuh.scss new file mode 100644 index 0000000..0e4fec9 --- /dev/null +++ b/src/scss/waltuh/waltuh.scss @@ -0,0 +1,17 @@ +/* ------ */ +/* */ +/* Waltuh */ +/* */ +/* ------ */ + +// Global Variables +@use "variables" as *; +@use "components"; +@use "layouts"; + +.fs-900 { font-size: $fs-900; font-weight: 400;} +.fs-800 { font-size: $fs-800; font-weight: 300;} +.fs-700 { font-size: $fs-700; font-weight: 250;} +.fs-600 { font-size: $fs-600; font-weight: 300;} +.fs-500 { font-size: $fs-500; font-weight: 200;} +.fs-400 { font-size: $fs-400; font-weight: 200;}