GitHub
commit
7b3793ea7d
|
|
@ -1,5 +1,5 @@
|
||||||
clean:
|
clean:
|
||||||
rm css/*
|
rm -rf css/*
|
||||||
|
|
||||||
css:
|
css:
|
||||||
sass scss:css
|
sass scss:css
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,8 @@
|
||||||
<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 id="overlay">
|
<div id="overlay"></div>
|
||||||
</div>
|
<main class="offset-grid--top--wide fullsize">
|
||||||
<main class="grid-center--offset-wide">
|
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<h1>
|
<h1>
|
||||||
|
|
@ -16,8 +15,8 @@
|
||||||
</h1>
|
</h1>
|
||||||
<h2>isn't that the page title?</h2>
|
<h2>isn't that the page title?</h2>
|
||||||
<p>
|
<p>
|
||||||
I'm not super keen on saying that much about myself on the <mark class="internet">internet</mark>.
|
I'm not super keen on saying that much about myself on the <span class="waltuh-gradient">internet</span>.
|
||||||
Anyway, here's some information about myself, posted on the aforementioned <mark class="internet">internet</mark>.
|
Anyway, here's some information about myself, posted on the aforementioned <span class="waltuh-gradient">internet</span>.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
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.
|
||||||
|
|
@ -26,6 +25,7 @@ I'm studying mathematics (with a focus on computation) at Penn State, and will h
|
||||||
<div>
|
<div>
|
||||||
<h1>Opinions</h1>
|
<h1>Opinions</h1>
|
||||||
<h2>A 100% exhaustive list, of course</h2>
|
<h2>A 100% exhaustive list, of course</h2>
|
||||||
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
the modern internet is bloated
|
the modern internet is bloated
|
||||||
<ol>
|
<ol>
|
||||||
|
|
@ -43,9 +43,10 @@ linux distros don't matter
|
||||||
<li>the military industrial complex</li>
|
<li>the military industrial complex</li>
|
||||||
<li>my taste in music is objectively just ok</li>
|
<li>my taste in music is objectively just ok</li>
|
||||||
<li>🦐</li>
|
<li>🦐</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer class="lock-bottom">
|
||||||
<p><a href="../">Return</a></p>
|
<p><a href="../">Return</a></p>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Purgatory - Emilia Allison</title>
|
<title>CSS Purgatory - Emilia Allison</title>
|
||||||
<link rel="stylesheet" href="pink/index.css">
|
<link rel="stylesheet" href="../../css/about.css">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<style>
|
<style>
|
||||||
/* For classes not supplied by base.css
|
/* For classes not supplied by base.css
|
||||||
|
|
@ -14,11 +14,9 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="overlay">
|
<div class="overlay"></div>
|
||||||
</div>
|
<main class="offset-grid--top--wide fullsize">
|
||||||
<div class="outerdiv contentholder">
|
<div>
|
||||||
<div class="contentholder__topfiller"></div>
|
|
||||||
<div class="content flex column">
|
|
||||||
<h1>
|
<h1>
|
||||||
CSS Purgatory
|
CSS Purgatory
|
||||||
</h1>
|
</h1>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="overlay">
|
<div id="overlay">
|
||||||
</div>
|
</div>
|
||||||
<main class="grid-center--offset-wide">
|
<main class="offset-grid--top--wide">
|
||||||
<div>
|
<div>
|
||||||
<h1>
|
<h1>
|
||||||
Cool Stuff
|
Cool Stuff
|
||||||
|
|
@ -34,7 +34,7 @@ If a page uses/requires JavaScript, its link will be marked with (☕).
|
||||||
<li><a href="recipes">Recipes</a></li>
|
<li><a href="recipes">Recipes</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer class="lock-bottom">
|
||||||
<p><a href="../">Return</a></p>
|
<p><a href="../">Return</a></p>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -17,22 +17,20 @@
|
||||||
<!-- Twitter -->
|
<!-- Twitter -->
|
||||||
<meta property="twitter:card" content="summary_large_image" />
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="vsc-initialized">
|
||||||
<div id="overlay">
|
<div id="overlay"></div>
|
||||||
</div>
|
<main class="offset-grid--top fullsize">
|
||||||
<main class="grid-center--offset">
|
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<h1 class="text-dark ff-serif fs-800 gap-large-bottom">Emilia.</h1>
|
||||||
<h1>Emilia</h1>
|
|
||||||
<p>mathematics enjoyer</p>
|
<p>mathematics enjoyer</p>
|
||||||
<p 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" class="fixed">
|
<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>bottom text</p>
|
</p>
|
||||||
|
<p>bottom text (new and improved)</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<footer class="lock-bottom flex row">
|
||||||
<footer class="links">
|
|
||||||
<a title="about" href="about">
|
<a title="about" href="about">
|
||||||
📄
|
📄
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -47,5 +45,4 @@
|
||||||
</a>
|
</a>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1 +1,5 @@
|
||||||
@import "ilia1";
|
@import "waltuh/waltuh";
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 3vh;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,247 +0,0 @@
|
||||||
/* ---------------- */
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll {
|
|
||||||
position: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------- */
|
|
||||||
/* 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%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pgp_a {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +1,16 @@
|
||||||
@import "ilia1";
|
@use "waltuh/waltuh";
|
||||||
|
@use "waltuh/variables" as *;
|
||||||
|
|
||||||
|
#pgp_a {
|
||||||
|
position: fixed;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
font-size: $fs-200;
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
a {
|
width: 100%;
|
||||||
display: table-cell;
|
font-size: $fs-800;
|
||||||
height: 6vh;
|
justify-content: center !important;
|
||||||
width: 15%;
|
|
||||||
margin: 3%;
|
|
||||||
|
|
||||||
font-size: 6vh;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
@use "sass:color";
|
||||||
|
@use "sass:math";
|
||||||
|
|
||||||
|
$-color-white: hsl(280 30% 80%);
|
||||||
|
$-color-dark: color.adjust($-color-white, $lightness: -50%);
|
||||||
|
$-color-light: hsl(190 80% 30%);
|
||||||
|
$-ff-serif: "Inconsolata", monospace;
|
||||||
|
$-ff-sans: "Jost", sans-serif;
|
||||||
|
$-fs-900: math.div(100rem, 16);
|
||||||
|
|
||||||
|
@forward "base" with (
|
||||||
|
$color-white: $-color-white,
|
||||||
|
$color-dark: $-color-dark,
|
||||||
|
$color-light: $-color-light,
|
||||||
|
$ff-serif: $-ff-serif,
|
||||||
|
$ff-sans: $-ff-sans,
|
||||||
|
$fs-900: $-fs-900
|
||||||
|
);
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Inconsolata";
|
||||||
|
src: url("/fonts/Inconsolata.ttf");
|
||||||
|
|
||||||
|
font-display: swap;
|
||||||
|
font-variation-settings: "wdth" 85;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Jost";
|
||||||
|
src: url("/fonts/Jost.ttf");
|
||||||
|
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,214 @@
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// Do Not Change This File!
|
||||||
|
//
|
||||||
|
//
|
||||||
|
@use "sass:math";
|
||||||
|
/* ----------------- */
|
||||||
|
/* Custom Properties */
|
||||||
|
/* ----------------- */
|
||||||
|
/*
|
||||||
|
This values are to be overridden
|
||||||
|
after being injected into
|
||||||
|
the global scope.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* colors */
|
||||||
|
|
||||||
|
$color-dark: hsl(0 0% 0%) !default; /* Black */
|
||||||
|
$color-light: hsl(0 0% 50%) !default; /* Gray */
|
||||||
|
$color-white: hsl(0 0% 100%) !default;/* White */
|
||||||
|
|
||||||
|
/* font */
|
||||||
|
|
||||||
|
/* Sizes divided by 16 so values given in px */
|
||||||
|
$fs-900: math.div(125rem, 16) !default;
|
||||||
|
$fs-800: math.div(75rem, 16) !default;
|
||||||
|
$fs-700: math.div(56rem, 16) !default;
|
||||||
|
$fs-600: math.div(32rem, 16) !default;
|
||||||
|
$fs-500: math.div(28rem, 16) !default;
|
||||||
|
$fs-400: math.div(24rem, 16) !default;
|
||||||
|
$fs-300: math.div(18rem, 16) !default;
|
||||||
|
$fs-200: math.div(16rem, 16) !default;
|
||||||
|
|
||||||
|
$ff-serif: serif !default;
|
||||||
|
$ff-sans-cond: sans-serif !default;
|
||||||
|
$ff-sans: sans-serif !default;
|
||||||
|
|
||||||
|
/* --------------- */
|
||||||
|
/* Utility Classes */
|
||||||
|
/* --------------- */
|
||||||
|
|
||||||
|
/* Layouts */
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding-inline: clamp(0.5rem, 4rem, 5rem);
|
||||||
|
margin-inline: auto;
|
||||||
|
max-width: 80rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-content: baseline;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.two-columns {
|
||||||
|
display: grid;
|
||||||
|
/* Will shrink to one column, never exceed two!
|
||||||
|
* The `max` in `minmax` asks that the columns
|
||||||
|
* be no smaller */
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(max(30rem, 40%), 1fr));
|
||||||
|
column-gap: 1rem;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-bottom {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Other */
|
||||||
|
|
||||||
|
.hr::after { /* Add fake hr after header */
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
width: 100%;
|
||||||
|
height: 0.15rem;
|
||||||
|
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color Classes */
|
||||||
|
|
||||||
|
.bg-dark { background-color: $color-dark; }
|
||||||
|
.bg-light { background-color: $color-light; }
|
||||||
|
.bg-white { background-color: $color-white; }
|
||||||
|
|
||||||
|
.text-dark { color: $color-dark; }
|
||||||
|
.text-light { color: $color-light; }
|
||||||
|
.text-white { color: $color-white; }
|
||||||
|
|
||||||
|
/* Font Classes */
|
||||||
|
|
||||||
|
.fs-900 { font-size: $fs-900; }
|
||||||
|
.fs-800 { font-size: $fs-800; }
|
||||||
|
.fs-700 { font-size: $fs-700; }
|
||||||
|
.fs-600 { font-size: $fs-600; }
|
||||||
|
.fs-500 { font-size: $fs-500; }
|
||||||
|
.fs-400 { font-size: $fs-400; }
|
||||||
|
.fs-300 { font-size: $fs-300; }
|
||||||
|
.fs-200 { font-size: $fs-200; }
|
||||||
|
|
||||||
|
.ff-serif { font-family: $ff-serif; }
|
||||||
|
.ff-sans-cond { font-family: $ff-sans-cond; }
|
||||||
|
.ff-sans { font-family: $ff-sans; }
|
||||||
|
|
||||||
|
.uppercase { text-transform: uppercase; }
|
||||||
|
.lowercase { text-transform: lowercase; }
|
||||||
|
|
||||||
|
/* Semantic Tags and Their Classes */
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin-bottom: 3vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
section:not(:last-of-type) {
|
||||||
|
margin-bottom: 3vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 3vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----- */
|
||||||
|
/* Reset */
|
||||||
|
/* ----- */
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body, h1, h2, h3, h4, h5, h6, p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6, p {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3 {
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: $ff-sans;
|
||||||
|
font-size: $fs-400;
|
||||||
|
color: $color-dark;
|
||||||
|
background-color: $color-white;
|
||||||
|
line-height: 1.5;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-left: 1vw;
|
||||||
|
margin-top: 1vh;
|
||||||
|
* {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- */
|
||||||
|
/* Non-Reusable Classes */
|
||||||
|
/* -------------------- */
|
||||||
|
/* meant for these pages
|
||||||
|
* only, not to be used
|
||||||
|
* in practice */
|
||||||
|
|
||||||
|
.colors--block {
|
||||||
|
padding: 3rem 1rem 1rem;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
@forward "header";
|
||||||
|
@forward "overlay";
|
||||||
|
@forward "marks";
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
@use "sass:math";
|
||||||
|
@use "sass:color";
|
||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes waltuh-gradient-anim {
|
||||||
|
$r: 6em;
|
||||||
|
$pd: math.div(2*math.$pi,10);
|
||||||
|
from {
|
||||||
|
background-position: 6em 0em;
|
||||||
|
}
|
||||||
|
@for $i from 1 through 9 {
|
||||||
|
#{$i*10}% {
|
||||||
|
background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-position: 6em 0em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes wipeIn {
|
||||||
|
from { clip-path: inset(0 100% 0 0); }
|
||||||
|
to { clip-path: inset(0 0 0 0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
span.waltuh-gradient {
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
color: transparent;
|
||||||
|
$grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%);
|
||||||
|
$grad2: color.adjust($grad1, $lightness: +30%);
|
||||||
|
background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white);
|
||||||
|
background-size: 30vmin 30vmin;
|
||||||
|
background-clip: text;
|
||||||
|
|
||||||
|
animation: waltuh-gradient-anim 12s linear infinite,
|
||||||
|
wipeIn 0.25s ease-in;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
@keyframes overlay-breathe {
|
||||||
|
from {opacity: 0.04;}
|
||||||
|
to {opacity: 0.10;}
|
||||||
|
}
|
||||||
|
#overlay {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
|
opacity: 0.10;
|
||||||
|
z-index: 1;
|
||||||
|
background-image: url('https://ilia.moe/img/noise.gif');
|
||||||
|
background-size: 20vmin;
|
||||||
|
|
||||||
|
animation: overlay-breathe 3s ease-in infinite alternate;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
@use "sass:list";
|
||||||
|
@use "../variables" as *;
|
||||||
|
|
||||||
|
%grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin grid-3x3-offset($top: 1fr, $bottom: 1fr, $left: 1fr, $right: 1fr) {
|
||||||
|
//@debug "mixin top: #{$top}";
|
||||||
|
@extend %grid;
|
||||||
|
grid-template-rows: $top 1fr $bottom;
|
||||||
|
grid-template-columns: $left 1fr $right;
|
||||||
|
grid-template-areas:
|
||||||
|
"nw n ne"
|
||||||
|
"w center e"
|
||||||
|
"sw s se";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Classes */
|
||||||
|
%offset-grid {
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
div {
|
||||||
|
justify-self: center;
|
||||||
|
grid-area: center;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
h1, h2, h3 {
|
||||||
|
display: inline-block;
|
||||||
|
//width: min-content; // Looks terrible in practice
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grid Offset Hell
|
||||||
|
$offset-amt: 0.33fr;
|
||||||
|
@each $dir in [top, bottom, left, right] {
|
||||||
|
$dir_adj: "";
|
||||||
|
@if $dir {
|
||||||
|
$dir_adj: "--#{$dir}";
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $size, $size_val in (null: 1fr, wide: 0.4fr, narrow: 1.2fr) {
|
||||||
|
$size_adj: "";
|
||||||
|
@if $size {
|
||||||
|
$size_adj: "--#{$size}";
|
||||||
|
}
|
||||||
|
.offset-grid#{$dir_adj}#{$size_adj} {
|
||||||
|
$-l: [1fr, 1fr, 1fr, 1fr];
|
||||||
|
@if $dir == top {
|
||||||
|
$-l: [$offset-amt, 1fr, $size_val, $size_val];
|
||||||
|
} @else if $dir == bottom {
|
||||||
|
$-l: [1fr, $offset-amt, $size_val, $size_val];
|
||||||
|
} @else if $dir == left {
|
||||||
|
$-l: [$size_val, $size_val, $offset-amt, 1fr];
|
||||||
|
} @else if $dir == right {
|
||||||
|
$-l: [$size_val, $size_val, 1fr, $offset-amt];
|
||||||
|
}
|
||||||
|
//@debug "list: #{$-l}";
|
||||||
|
//@debug list.nth($-l, 1);
|
||||||
|
@include grid-3x3-offset($top: list.nth($-l,1), $bottom: list.nth($-l,2),
|
||||||
|
$left: list.nth($-l,3), $right: list.nth($-l,4));
|
||||||
|
|
||||||
|
@extend %offset-grid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
@forward "grid";
|
||||||
|
@forward "modifiers";
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
.fullsize {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
height: 100vh !important;
|
||||||
|
width: 100vw !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
$gap-sizes: ("small": 1vmin, "mid": 3vmin, "large": 5vmin);
|
||||||
|
|
||||||
|
@each $size, $dist in $gap-sizes {
|
||||||
|
@each $dir in [top, bottom, left, right] {
|
||||||
|
.gap-#{$size}-#{$dir} {
|
||||||
|
margin-#{$dir}: $dist;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
/* ------ */
|
||||||
|
/* */
|
||||||
|
/* Waltuh */
|
||||||
|
/* */
|
||||||
|
/* ------ */
|
||||||
|
|
||||||
|
// Global Variables
|
||||||
|
@use "variables" as *;
|
||||||
|
@use "components";
|
||||||
|
@use "layouts";
|
||||||
|
|
||||||
|
.fs-900 { font-size: $fs-900; font-weight: 400;}
|
||||||
|
.fs-800 { font-size: $fs-800; font-weight: 300;}
|
||||||
|
.fs-700 { font-size: $fs-700; font-weight: 250;}
|
||||||
|
.fs-600 { font-size: $fs-600; font-weight: 300;}
|
||||||
|
.fs-500 { font-size: $fs-500; font-weight: 200;}
|
||||||
|
.fs-400 { font-size: $fs-400; font-weight: 200;}
|
||||||
Loading…
Reference in New Issue