Merge pull request #4 from em-ilia/sass-cleanup-1

Sass cleanup 1, see PR for details
This commit is contained in:
Emilia Allison 2022-09-29 23:40:55 -04:00 committed by GitHub
commit c3f7678f25
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 344 additions and 253 deletions

View File

@ -6,11 +6,11 @@
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
</head> </head>
<body> <body>
<div class="overlay"> <div id="overlay">
</div> </div>
<div class="outerdiv contentholder"> <main class="grid-center--offset-wide">
<div class="contentholder__topfiller"></div> <div>
<div class="content"> <div>
<h1> <h1>
About About
</h1> </h1>
@ -23,7 +23,7 @@ Anyway, here's some information about myself, posted on the aforementioned <mark
I'm studying mathematics (with a focus on computation) at Penn State, and will hopefully be graduating in 2023. I'm studying mathematics (with a focus on computation) at Penn State, and will hopefully be graduating in 2023.
</p> </p>
</div> </div>
<div class="content"> <div>
<h1>Opinions</h1> <h1>Opinions</h1>
<h2>A 100% exhaustive list, of course</h2> <h2>A 100% exhaustive list, of course</h2>
<li> <li>
@ -45,5 +45,9 @@ linux distros don't matter
<li>&#129424</li> <li>&#129424</li>
</div> </div>
</div> </div>
<footer>
<p><a href="../">Return</a></p>
</footer>
</main>
</body> </body>
</html> </html>

View File

@ -6,11 +6,10 @@
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
</head> </head>
<body> <body>
<div class="overlay"> <div id="overlay">
</div> </div>
<main class="outerdiv contentholder"> <main class="grid-center--offset-wide">
<div class="contentholder__topfiller"></div> <div>
<div class="content">
<h1> <h1>
Cool Stuff Cool Stuff
</h1> </h1>

View File

@ -18,33 +18,34 @@
<meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:card" content="summary_large_image" />
</head> </head>
<body> <body>
<div class="overlay"> <div id="overlay">
</div> </div>
<div class="outerdiv"> <main class="grid-center--offset">
<div class="name"> <div>
<h1 class="name__header">Emilia</h1> <div>
<!--<p class="name__subcontent">she/her</p>--> <h1>Emilia</h1>
<p class="name__subcontent">mathematics enjoyer</p> <p>mathematics enjoyer</p>
<p class="name__subcontent" id="pgp_p">pgp: <p id="pgp_p">pgp:
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a"> <a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a" class="fixed">
8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455 8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455
</a></p> </a></p>
<p class="name__subcontent generated">bottom text</p> <p>bottom text</p>
</div> </div>
<div class="links"> </div>
<a class="links__sub" title="about" href="about"> <footer class="links">
<a title="about" href="about">
&#128196 &#128196
</a> </a>
<a class="links__sub" id="moonlink" title="cool stuff" href="cool-stuff"> <a id="moonlink" title="cool stuff" href="cool-stuff">
&#127772 &#127772
</a> </a>
<a class="links__sub" title="git provider" href="https://github.com/em-ilia"> <a title="git provider" href="https://github.com/em-ilia">
&#128187 &#128187
</a> </a>
<a class="links__sub" title="i love email" href="mailto:em@ilia.moe"> <a title="i love email" href="mailto:em@ilia.moe">
&#128224 &#128224
</a> </a>
</div> </footer>
</div> </main>
</body> </body>
</html> </html>

View File

@ -1,2 +0,0 @@
@import 'global'
@import 'anim'

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -1,6 +0,0 @@
// ok yikes I'll do my best
// Disable actual check for desktop testing
@mixin mobile()
@media (pointer: coarse)
@content

1
src/scss/about.scss Normal file
View File

@ -0,0 +1 @@
@import "ilia1";

239
src/scss/ilia1.scss Normal file
View File

@ -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;
}

13
src/scss/index.scss Normal file
View File

@ -0,0 +1,13 @@
@import "ilia1";
footer {
a {
display: table-cell;
height: 6vh;
width: 15%;
margin: 3%;
font-size: 6vh;
text-align: center;
}
}

59
src/scss/reset.scss Normal file
View File

@ -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;
}
}