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" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="overlay">
|
||||
<div id="overlay">
|
||||
</div>
|
||||
<div class="outerdiv">
|
||||
<div class="name">
|
||||
<h1 class="name__header">Emilia</h1>
|
||||
<!--<p class="name__subcontent">she/her</p>-->
|
||||
<p class="name__subcontent">mathematics enjoyer</p>
|
||||
<p class="name__subcontent" id="pgp_p">pgp:
|
||||
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a">
|
||||
<main class="grid-center--offset">
|
||||
<div>
|
||||
<div>
|
||||
<h1>Emilia</h1>
|
||||
<p>mathematics enjoyer</p>
|
||||
<p id="pgp_p">pgp:
|
||||
<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
|
||||
</a></p>
|
||||
<p class="name__subcontent generated">bottom text</p>
|
||||
<p>bottom text</p>
|
||||
</div>
|
||||
<div class="links">
|
||||
<a class="links__sub" title="about" href="about">
|
||||
</div>
|
||||
<footer class="links">
|
||||
<a title="about" href="about">
|
||||
📄
|
||||
</a>
|
||||
<a class="links__sub" id="moonlink" title="cool stuff" href="cool-stuff">
|
||||
<a id="moonlink" title="cool stuff" href="cool-stuff">
|
||||
🌜
|
||||
</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 class="links__sub" title="i love email" href="mailto:em@ilia.moe">
|
||||
<a title="i love email" href="mailto:em@ilia.moe">
|
||||
📠
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</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