diff --git a/src/about.html b/src/about.html index 240be40..3cb0dca 100644 --- a/src/about.html +++ b/src/about.html @@ -6,11 +6,11 @@ -
+
-
-
-
+
+
+

About

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

Opinions

A 100% exhaustive list, of course

  • @@ -44,6 +44,10 @@ linux distros don't matter
  • my taste in music is objectively just ok
  • 🦐
    • -
    +
    + +
    diff --git a/src/cool-stuff/index.html b/src/cool-stuff/index.html index 778752d..9322610 100644 --- a/src/cool-stuff/index.html +++ b/src/cool-stuff/index.html @@ -6,11 +6,10 @@ -
    +
    -
    -
    -
    +
    +

    Cool Stuff

    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/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 new file mode 100644 index 0000000..610498b --- /dev/null +++ b/src/scss/ilia1.scss @@ -0,0 +1,239 @@ +/* ---------------- */ +/* 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; +} + +/* ---------- */ +/* 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%; +} + +/* 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 new file mode 100644 index 0000000..eb72e3d --- /dev/null +++ b/src/scss/index.scss @@ -0,0 +1,13 @@ +@import "ilia1"; + +footer { + 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..e307eb1 --- /dev/null +++ b/src/scss/reset.scss @@ -0,0 +1,59 @@ +/* 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; + } + }