SCSS Rewrite (pt 1)
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)
This commit is contained in:
parent
1a046b926a
commit
590d7aa9ab
GPG Key ID:
7A3F8997BFE894E0
|
|
@ -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>
|
||||||
<div class="links">
|
<footer class="links">
|
||||||
<a class="links__sub" title="about" href="about">
|
<a title="about" href="about">
|
||||||
📄
|
📄
|
||||||
</a>
|
</a>
|
||||||
<a class="links__sub" id="moonlink" title="cool stuff" href="cool-stuff">
|
<a id="moonlink" title="cool stuff" href="cool-stuff">
|
||||||
🌜
|
🌜
|
||||||
</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">
|
||||||
💻
|
💻
|
||||||
</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">
|
||||||
📠
|
📠
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</footer>
|
||||||
</div>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
@import 'global'
|
|
||||||
@import 'anim'
|
|
||||||
|
|
@ -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
|
|
||||||
|
|
@ -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
|
|
||||||
|
|
@ -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
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
// ok yikes I'll do my best
|
|
||||||
|
|
||||||
// Disable actual check for desktop testing
|
|
||||||
@mixin mobile()
|
|
||||||
@media (pointer: coarse)
|
|
||||||
@content
|
|
||||||
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue