From 590d7aa9ab6b36b05f9b4b44bc9c127501365ffe Mon Sep 17 00:00:00 2001 From: Emilia Date: Thu, 29 Sep 2022 23:18:06 -0400 Subject: [PATCH 1/7] SCSS Rewrite (pt 1) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It was messy and gross! Now it's SCSS, cleaner, and looks more like what the styles in purgatory are supposed to look like. How nice! I removed a lot of the useless classes that were in the original style—no rules were declared for them anyway. index.html is fully good to go! (minus mobile compatibility) --- src/index.html | 37 ++++---- src/sass/about.sass | 2 - src/sass/anim.sass | 26 ------ src/sass/global.sass | 140 ----------------------------- src/sass/index.sass | 51 ----------- src/sass/responsive.sass | 6 -- src/scss/ilia1.scss | 190 +++++++++++++++++++++++++++++++++++++++ src/scss/index.scss | 22 +++++ src/scss/reset.scss | 53 +++++++++++ 9 files changed, 284 insertions(+), 243 deletions(-) delete mode 100644 src/sass/about.sass delete mode 100644 src/sass/anim.sass delete mode 100644 src/sass/global.sass delete mode 100644 src/sass/index.sass delete mode 100644 src/sass/responsive.sass create mode 100644 src/scss/ilia1.scss create mode 100644 src/scss/index.scss create mode 100644 src/scss/reset.scss diff --git a/src/index.html b/src/index.html index c4d8bc2..a30fa34 100644 --- a/src/index.html +++ b/src/index.html @@ -18,33 +18,34 @@ -
+
-
-
-

Emilia

- -

mathematics enjoyer

-

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

-

bottom text

+
+
+
+

Emilia

+

mathematics enjoyer

+

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

+

bottom text

+
-
- +
-
+ + diff --git a/src/sass/about.sass b/src/sass/about.sass deleted file mode 100644 index 969e2f3..0000000 --- a/src/sass/about.sass +++ /dev/null @@ -1,2 +0,0 @@ -@import 'global' -@import 'anim' diff --git a/src/sass/anim.sass b/src/sass/anim.sass deleted file mode 100644 index 4c69706..0000000 --- a/src/sass/anim.sass +++ /dev/null @@ -1,26 +0,0 @@ -// 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/sass/global.sass b/src/sass/global.sass deleted file mode 100644 index 9aeef08..0000000 --- a/src/sass/global.sass +++ /dev/null @@ -1,140 +0,0 @@ -@import 'responsive' -@import 'anim' - -$primary-color: #f4b7c3 -$secondary-color: #f4e8b7 -$tertiary-color: #b7c3f4 -$outer-bg: #091519 -//$outer-bg: #f2e1ba // nice sand color, light theme maybe? -$inner-bg: #112932 - -@mixin div-center() - display: flex - justify-content: center - align-items: center - flex-direction: column - align-content: center - -* - border-color: $tertiary-color - -body - @include div-center() - width: 100% - height: 100% - padding: 0 0 0 0 - margin: 0 0 0 0 - overflow: hidden - background-color: black - - --is-mobile: 0 - @include mobile() - --is-mobile: 1 - -.overlay - width: 100% - height: 100vh - - position: fixed - - opacity: 0.03 - z-index: 1 - background-image: url('../img/noise.gif') - background-size: 25% - - @include mobile() - background-size: 200% - -.outerdiv - @include div-center() - width: 90% - height: 100vh - background-color: $outer-bg - flex-direction: column - - @include mobile() - width: 100% - -.contentholder - justify-content: flex-start - overflow: scroll - div - width: 30rem - margin: 1% 0 - - @include mobile - width: 20rem - - .contentholder__topfiller - height: 5% - background-color: transparent - -.content - z-index: 100 - -.returnLink * - margin: 3% 0 - font-size: large - - -h1 - color: $primary-color - font-family: serif - font-size: xxx-large - margin: 5px 5px - text-align: center - -h2 - color: $secondary-color - font-family: serif - font-size: large - text-align: center - -h3 - color: $secondary-color - font-size: large - -p - color: $secondary-color - font-family: sans-serif - font-size: large - text-align: left - margin: 5px 0px - -ol - margin: 0px 0px - 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: $secondary-color - &:visited - color: $secondary-color - -header - margin: 1% 0 1% 0 - - border-style: solid - border-width: 0px 0px 2px 0px - - h2 - margin: 0 - margin-top: -8px - -article - margin: 3% 0 - - border-style: solid - border-width: 0px 0px 2px 0px diff --git a/src/sass/index.sass b/src/sass/index.sass deleted file mode 100644 index b0988ab..0000000 --- a/src/sass/index.sass +++ /dev/null @@ -1,51 +0,0 @@ -@import 'global' -@import 'anim' - -.name - margin-top: -10vh - - z-index: 100 - -.name__subcontent - text-align: left - - @include mobile - text-align: center - - a - font-size: small - display: none - position: absolute - margin-left: 5px - margin-top: 5px - - @include mobile - position: relative - - -.links - //background-color: rgba(255,0,0,.2) - width: 40% - height: 10% - position: absolute - bottom: 0 - - z-index: 99 - display: flex - justify-content: center - align-items: center - - @include mobile - width: 80% - - .links__sub - height: 6vh - width: 15% - margin: 3% - - display: table-cell - text-align: center - vertical-align: middle - - font-size: 6vh - text-decoration: none diff --git a/src/sass/responsive.sass b/src/sass/responsive.sass deleted file mode 100644 index 6dac3e1..0000000 --- a/src/sass/responsive.sass +++ /dev/null @@ -1,6 +0,0 @@ -// ok yikes I'll do my best - -// Disable actual check for desktop testing -@mixin mobile() - @media (pointer: coarse) - @content diff --git a/src/scss/ilia1.scss b/src/scss/ilia1.scss new file mode 100644 index 0000000..0b9c46a --- /dev/null +++ b/src/scss/ilia1.scss @@ -0,0 +1,190 @@ +/* ---------------- */ +/* 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; + } +} + +.grid-center { + @include grid-center; +} + +.grid-center--offset { + @include grid-center($top-offset: 0.7); +} + +.fixed { + position: fixed; +} + +/* ---------- */ +/* 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%; +} diff --git a/src/scss/index.scss b/src/scss/index.scss new file mode 100644 index 0000000..07c7d4f --- /dev/null +++ b/src/scss/index.scss @@ -0,0 +1,22 @@ +@import 'ilia1'; + +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; + + a { + display: table-cell; + height: 6vh; + width: 15%; + margin: 3%; + + font-size: 6vh; + text-align: center; + } +} diff --git a/src/scss/reset.scss b/src/scss/reset.scss new file mode 100644 index 0000000..d656592 --- /dev/null +++ b/src/scss/reset.scss @@ -0,0 +1,53 @@ +/* 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; + } +} From 6abb6a618770ebc2ba054237bf81121d17f2e423 Mon Sep 17 00:00:00 2001 From: Emilia Date: Thu, 29 Sep 2022 23:25:55 -0400 Subject: [PATCH 2/7] Restore about.html --- src/about.html | 9 +++++---- src/scss/about.scss | 1 + src/scss/ilia1.scss | 34 ++++++++++++++++++++++++++++++++++ src/scss/index.scss | 2 +- 4 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 src/scss/about.scss diff --git a/src/about.html b/src/about.html index 240be40..506257a 100644 --- a/src/about.html +++ b/src/about.html @@ -6,10 +6,10 @@ -
+
-
-
+
+

About @@ -44,6 +44,7 @@ linux distros don't matter
  • my taste in music is objectively just ok
  • 🦐

    • -
    +
    + diff --git a/src/scss/about.scss b/src/scss/about.scss new file mode 100644 index 0000000..b463463 --- /dev/null +++ b/src/scss/about.scss @@ -0,0 +1 @@ +@import "ilia1"; diff --git a/src/scss/ilia1.scss b/src/scss/ilia1.scss index 0b9c46a..d5a038e 100644 --- a/src/scss/ilia1.scss +++ b/src/scss/ilia1.scss @@ -188,3 +188,37 @@ footer { background-image: url('../img/noise.gif'); background-size: 25%; } + +/* 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 07c7d4f..436df11 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,4 +1,4 @@ -@import 'ilia1'; +@import "ilia1"; footer { @extend .row; From 04ddc307728df29eb69fb9a29da2d98e51aceb8d Mon Sep 17 00:00:00 2001 From: Emilia Date: Thu, 29 Sep 2022 23:29:00 -0400 Subject: [PATCH 3/7] Fix cool-stuff Made the footer solution less awful --- src/cool-stuff/index.html | 7 +++---- src/scss/ilia1.scss | 26 +++++++++++++++++++++----- src/scss/index.scss | 20 -------------------- 3 files changed, 24 insertions(+), 29 deletions(-) diff --git a/src/cool-stuff/index.html b/src/cool-stuff/index.html index 778752d..cc36398 100644 --- a/src/cool-stuff/index.html +++ b/src/cool-stuff/index.html @@ -6,11 +6,10 @@ -
    +
    -
    -
    -
    +
    +

    Cool Stuff

    diff --git a/src/scss/ilia1.scss b/src/scss/ilia1.scss index d5a038e..cf6addf 100644 --- a/src/scss/ilia1.scss +++ b/src/scss/ilia1.scss @@ -60,6 +60,27 @@ $color-dark: hsl(195, 47%, 7%); 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; + + a { + display: table-cell; + height: 6vh; + width: 15%; + margin: 3%; + + font-size: 6vh; + text-align: center; + } + } } .grid-center { @@ -169,11 +190,6 @@ a { /* Semantic */ -footer { - position: fixed; - bottom: 0px; -} - /* ------------- */ /* ILIA Specific */ /* ------------- */ diff --git a/src/scss/index.scss b/src/scss/index.scss index 436df11..5b5ef07 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,22 +1,2 @@ @import "ilia1"; -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; - - a { - display: table-cell; - height: 6vh; - width: 15%; - margin: 3%; - - font-size: 6vh; - text-align: center; - } -} From 32c169e95723c35287931c2aa00707bc1221a868 Mon Sep 17 00:00:00 2001 From: Emilia Date: Thu, 29 Sep 2022 23:30:38 -0400 Subject: [PATCH 4/7] Make footer solution universal --- src/scss/ilia1.scss | 15 +++++---------- src/scss/index.scss | 11 +++++++++++ 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/scss/ilia1.scss b/src/scss/ilia1.scss index cf6addf..cc83963 100644 --- a/src/scss/ilia1.scss +++ b/src/scss/ilia1.scss @@ -60,7 +60,6 @@ $color-dark: hsl(195, 47%, 7%); place-self: center; grid-area: main; } - footer { @extend .row; flex-wrap: nowrap; @@ -71,15 +70,6 @@ $color-dark: hsl(195, 47%, 7%); grid-column: 2 / span 1; place-self: end center; - a { - display: table-cell; - height: 6vh; - width: 15%; - margin: 3%; - - font-size: 6vh; - text-align: center; - } } } @@ -190,6 +180,11 @@ a { /* Semantic */ +footer { + position: fixed; + bottom: 0px; +} + /* ------------- */ /* ILIA Specific */ /* ------------- */ diff --git a/src/scss/index.scss b/src/scss/index.scss index 5b5ef07..eb72e3d 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,2 +1,13 @@ @import "ilia1"; +footer { + a { + display: table-cell; + height: 6vh; + width: 15%; + margin: 3%; + + font-size: 6vh; + text-align: center; + } +} From f13aa49e61fac7a7cb1611539e5d96503cdf7fe7 Mon Sep 17 00:00:00 2001 From: Emilia Date: Thu, 29 Sep 2022 23:33:57 -0400 Subject: [PATCH 5/7] Grid center wide to match old style --- src/about.html | 2 +- src/cool-stuff/index.html | 2 +- src/scss/ilia1.scss | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/about.html b/src/about.html index 506257a..77bed86 100644 --- a/src/about.html +++ b/src/about.html @@ -8,7 +8,7 @@
    -
    +

    diff --git a/src/cool-stuff/index.html b/src/cool-stuff/index.html index cc36398..9322610 100644 --- a/src/cool-stuff/index.html +++ b/src/cool-stuff/index.html @@ -8,7 +8,7 @@
    -
    +

    Cool Stuff diff --git a/src/scss/ilia1.scss b/src/scss/ilia1.scss index cc83963..610498b 100644 --- a/src/scss/ilia1.scss +++ b/src/scss/ilia1.scss @@ -81,6 +81,10 @@ $color-dark: hsl(195, 47%, 7%); @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; } From 85c2aadc393d0aa93a2fba3b6208904ee0a8824c Mon Sep 17 00:00:00 2001 From: Emilia Date: Thu, 29 Sep 2022 23:35:05 -0400 Subject: [PATCH 6/7] About finally has a return link Also got rid of some unused classes --- src/about.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/about.html b/src/about.html index 77bed86..3cb0dca 100644 --- a/src/about.html +++ b/src/about.html @@ -10,7 +10,7 @@

    -
    +

    About

    @@ -23,7 +23,7 @@ Anyway, here's some information about myself, posted on the aforementioned
    -
    +

    Opinions

    A 100% exhaustive list, of course

  • @@ -45,6 +45,9 @@ linux distros don't matter
  • 🦐
    • +
    From f64d1d557d97a590d90a17d0ea93034acb2ca744 Mon Sep 17 00:00:00 2001 From: Emilia Date: Thu, 29 Sep 2022 23:38:30 -0400 Subject: [PATCH 7/7] Include a mobile detection mixin in reset --- src/scss/reset.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/scss/reset.scss b/src/scss/reset.scss index d656592..e307eb1 100644 --- a/src/scss/reset.scss +++ b/src/scss/reset.scss @@ -51,3 +51,9 @@ input, button, textarea, select { scroll-behaviour: auto !important; } } + +@mixin mobile() { + @media (pointer: coarse) { + @content; + } + }