From 8dd01bb4b0d2f2a5f6d069afca00cedf867c107c Mon Sep 17 00:00:00 2001 From: Emilia Date: Thu, 7 Jul 2022 14:05:34 -0400 Subject: [PATCH] No changes, only style rewrites --- src/cool-stuff/index.html | 4 ++-- src/index.html | 4 ++-- src/sass/base.sass | 27 ++++++++++++++++++++++ src/sass/classes.sass | 47 +++++++++++++++++++++++++++++++++++++++ src/sass/global.sass | 37 ++---------------------------- 5 files changed, 80 insertions(+), 39 deletions(-) create mode 100644 src/sass/base.sass create mode 100644 src/sass/classes.sass diff --git a/src/cool-stuff/index.html b/src/cool-stuff/index.html index 278f4c5..3649563 100644 --- a/src/cool-stuff/index.html +++ b/src/cool-stuff/index.html @@ -5,10 +5,10 @@ - +
-
+

diff --git a/src/index.html b/src/index.html index c4d8bc2..4b0e233 100644 --- a/src/index.html +++ b/src/index.html @@ -17,10 +17,10 @@ - +
-
+

Emilia

diff --git a/src/sass/base.sass b/src/sass/base.sass new file mode 100644 index 0000000..f6d658c --- /dev/null +++ b/src/sass/base.sass @@ -0,0 +1,27 @@ +*, +*::before, +*::after + box-sizing: border-box + +body, h1, h2, h3, h4, h5, h6, p + margin: 0 + +body + 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 diff --git a/src/sass/classes.sass b/src/sass/classes.sass new file mode 100644 index 0000000..f1139dc --- /dev/null +++ b/src/sass/classes.sass @@ -0,0 +1,47 @@ +@import 'responsive' + +.overlay + width: 100% + height: 100vh + + position: fixed + + //opacity: 0.03 + opacity: 0.2 + z-index: 1 !important + background-image: url('../img/noise.gif') + background-size: 25% + + @include mobile() + background-size: 200% + +.contentholder + justify-content: flex-start + overflow: scroll + div + width: 30rem + margin: 1% 0 + + @include mobile + width: 20rem + + .contentholder__topfiller + height: 5% + background-color: transparent + +/* New */ + +.flex + display: flex + gap: 2rem + +.center + justify-content: center + align-items: center + flex-direction: column + align-content: center + +.container + padding-inline: 2em + margin-inline: auto + max-width: 90rem diff --git a/src/sass/global.sass b/src/sass/global.sass index b2fc8c7..6273e88 100644 --- a/src/sass/global.sass +++ b/src/sass/global.sass @@ -1,3 +1,5 @@ +@import 'base' +@import 'classes' @import 'responsive' @import 'anim' @@ -8,18 +10,11 @@ $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 @@ -31,22 +26,7 @@ body @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 @@ -55,19 +35,6 @@ body @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