theme3 initial
This commit is contained in:
parent
90a4565e2e
commit
98d34c5476
GPG Key ID:
7A3F8997BFE894E0
|
|
@ -0,0 +1,14 @@
|
||||||
|
watch_scss:
|
||||||
|
sass -w scss/:css/
|
||||||
|
|
||||||
|
scss:
|
||||||
|
sass scss/:css/
|
||||||
|
|
||||||
|
server:
|
||||||
|
python3 -m http.server
|
||||||
|
|
||||||
|
dev:
|
||||||
|
make -j 2 watch_scss server
|
||||||
|
|
||||||
|
clean:
|
||||||
|
rm css/*
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,288 @@
|
||||||
|
/* ----------------- */
|
||||||
|
/* Custom Properties */
|
||||||
|
/* ----------------- */
|
||||||
|
/* Many of the prop-
|
||||||
|
* erties here are
|
||||||
|
* where the substa-
|
||||||
|
* ntive changes
|
||||||
|
* will be made */
|
||||||
|
/* colors */
|
||||||
|
/* White */
|
||||||
|
/* Black */
|
||||||
|
/* Gray */
|
||||||
|
/* font */
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
/* Sizes divided by 16 so values given in px */
|
||||||
|
/* ----- */
|
||||||
|
/* 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: "Jost", sans-serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #543663;
|
||||||
|
background-color: hsl(280deg, 30%, 80%);
|
||||||
|
line-height: 1.5;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-left: 1vw;
|
||||||
|
margin-top: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* --------------- */
|
||||||
|
/* Utility Classes */
|
||||||
|
/* --------------- */
|
||||||
|
/* Layouts */
|
||||||
|
.container {
|
||||||
|
padding-inline: 4rem;
|
||||||
|
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: absolute;
|
||||||
|
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: #543663;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-light {
|
||||||
|
background-color: hsl(190deg, 80%, 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white {
|
||||||
|
background-color: hsl(280deg, 30%, 80%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-dark {
|
||||||
|
color: #543663;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-light {
|
||||||
|
color: hsl(190deg, 80%, 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-white {
|
||||||
|
color: hsl(280deg, 30%, 80%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font Classes */
|
||||||
|
.fs-900 {
|
||||||
|
font-size: 6.25rem;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs-800 {
|
||||||
|
font-size: 4.6875rem;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs-700 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 250;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs-600 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs-500 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs-400 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs-300 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fs-200 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ff-serif {
|
||||||
|
font-family: "Inconsolata", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ff-sans-cond {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ff-sans {
|
||||||
|
font-family: "Jost", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- */
|
||||||
|
/* Non-Reusable Classes */
|
||||||
|
/* -------------------- */
|
||||||
|
/* meant for these pages
|
||||||
|
* only, not to be used
|
||||||
|
* in practice */
|
||||||
|
.colors--block {
|
||||||
|
padding: 3rem 1rem 1rem;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes theme3-gradient-anim {
|
||||||
|
from {
|
||||||
|
background-position: 6em 0em;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
background-position: 4.8541019662em 3.5267115138em;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
background-position: 1.8541019662em 5.7063390978em;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
background-position: -1.8541019662em 5.7063390978em;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
background-position: -4.8541019662em 3.5267115138em;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: -6em 0em;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
background-position: -4.8541019662em -3.5267115138em;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
background-position: -1.8541019662em -5.7063390978em;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
background-position: 1.8541019662em -5.7063390978em;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
background-position: 4.8541019662em -3.5267115138em;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-position: 6em 0em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.theme3-gradient {
|
||||||
|
font-weight: 600;
|
||||||
|
color: transparent;
|
||||||
|
background: repeating-radial-gradient(#543663, #aa00ff, #dd99ff 80%, white);
|
||||||
|
background-size: 30vmin 30vmin;
|
||||||
|
background-clip: text;
|
||||||
|
animation: theme3-gradient-anim 12s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=theme3.css.map */
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sourceRoot":"","sources":["../scss/theme3.scss"],"names":[],"mappings":"AAEA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAME;AAE6B;AAC6B;AAC5B;AAE9B;AAEF;EACE;EACA;EAEA;EACA;;AAEF;EACE;EACA;EAEA;;AAGA;AAcF;AACA;AACA;AAEA;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,aAzBQ;EA0BR,WAhCO;EAiCP,OA1DY;EA2DZ,kBA5DY;EA6DZ;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;AAKJ;AACA;AACA;AAEA;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;AACA;AAAA;AAAA;EAGA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EAEA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;AAEA;EAAY,kBAzJE;;;AA0Jd;EAAY,kBAzJE;;;AA0Jd;EAAY,kBA5JE;;;AA8Jd;EAAc,OA7JA;;;AA8Jd;EAAc,OA7JA;;;AA8Jd;EAAc,OAhKA;;;AAkKd;AAEA;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;EA+IqB;;;AAC9B;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAiJT;EAAY,aA/ID;;;AAgJX;EAAgB,aA/ID;;;AAgJf;EAAW,aA/ID;;;AAiJV;EAAa;;;AACb;EAAa;;;AAEb;AAEA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;AACA;AACA;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;EAGE;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;EACE;EAEA;EAGA;EACA;EACA;EAEA","file":"theme3.css"}
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en"><head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>CSS Purgatory - Theme3</title>
|
||||||
|
<link rel="stylesheet" href="css/theme3.css">
|
||||||
|
<!-- Base v1.1 -->
|
||||||
|
</head>
|
||||||
|
<body class="vsc-initialized">
|
||||||
|
<main>
|
||||||
|
<header id="title" class="hr">
|
||||||
|
<h1>Theme3</h1>
|
||||||
|
</header>
|
||||||
|
<article class="">
|
||||||
|
<section id="description" class="hr">
|
||||||
|
<h2>Description</h2>
|
||||||
|
<div class="container">
|
||||||
|
<p><em>Theme3</em> is nameless for now. It's collaborative too!</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="colors" class="hr">
|
||||||
|
<h2>Colors</h2>
|
||||||
|
<div class="container flex">
|
||||||
|
<div>
|
||||||
|
<div class="colors--block bg-dark text-white">#Color hex code</div>
|
||||||
|
<p> HSL: Color hsl
|
||||||
|
</p></div>
|
||||||
|
<div>
|
||||||
|
<div class="colors--block bg-light text-white">#Color hex code</div>
|
||||||
|
<p> HSL: Color hsl
|
||||||
|
</p></div>
|
||||||
|
<div>
|
||||||
|
<div class="colors--block bg-white text-dark">#Color hex code</div>
|
||||||
|
<p> HSL: Color hsl
|
||||||
|
</p></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="typography" class="hr">
|
||||||
|
<h2>Typography</h2>
|
||||||
|
<div class="container two-columns">
|
||||||
|
<div>
|
||||||
|
<p class="ff-serif fs-900">Heading 1</p>
|
||||||
|
<p class="ff-sans-cond fs-200 text-light">font information</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="ff-serif fs-800">Heading 2</p>
|
||||||
|
<p class="ff-sans-cond fs-200 text-light">font information</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="ff-serif fs-700">Heading 3</p>
|
||||||
|
<p class="ff-sans-cond fs-200 text-light">font information</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="ff-sans fs-600">Heading 4</p>
|
||||||
|
<p class="ff-sans-cond fs-200 text-light">unused size</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="ff-sans fs-500">Heading 5</p>
|
||||||
|
<p class="ff-sans-cond fs-200 text-light">unused size</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="ff-sans fs-400">Heading 6</p>
|
||||||
|
<p class="ff-sans-cond fs-200 text-light">unused size</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="ff-sans fs-300">Text</p>
|
||||||
|
<p class="ff-sans-cond fs-200 text-light">font information</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="ff-sans-cond fs-200">Subtext</p>
|
||||||
|
<p class="ff-sans-cond fs-200 text-light">font information</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="samples" class="hr">
|
||||||
|
<h2>Sample Pages</h2>
|
||||||
|
<ul class="container two-columns">
|
||||||
|
<li><a href="http://0.0.0.0:8000/samplepage">First Sample Page</a></li>
|
||||||
|
<li><a href="http://0.0.0.0:8000/landingpage">Second Sample Page</a></li>
|
||||||
|
<li><a>Third Sample Page</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<a href="../">Return to Purgatory</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en"><head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Theme3 - Landing Page</title>
|
||||||
|
<link rel="stylesheet" href="css/theme3.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<!-- Base v1.1 -->
|
||||||
|
</head>
|
||||||
|
<body class="vsc-initialized">
|
||||||
|
<main>
|
||||||
|
<header>
|
||||||
|
<div class="container flex column">
|
||||||
|
<h1 class="text-dark ff-serif fs-800">this is <mark class="theme3-gradient">Theme3</mark>.</h1>
|
||||||
|
<p>One might want a flashy landing page</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</main>
|
||||||
|
<footer class="lock-bottom">
|
||||||
|
<a href="./">Return to Theme3</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en"><head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Theme3 - Sample Page</title>
|
||||||
|
<link rel="stylesheet" href="css/theme3.css">
|
||||||
|
<!-- Base v1.1 -->
|
||||||
|
</head>
|
||||||
|
<body class="vsc-initialized">
|
||||||
|
<main>
|
||||||
|
<header id="title">
|
||||||
|
<h1>
|
||||||
|
Theme3 - Sample Page
|
||||||
|
</h1>
|
||||||
|
<div class="container">
|
||||||
|
<p>Where one might put a page showcasing the features of a theme</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<section id="fakecontent" class="container">
|
||||||
|
<h2>Fake content 1</h2>
|
||||||
|
<p>Some content might go here on a real page.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
|
||||||
|
sagittis congue turpis et laoreet. Integer finibus velit purus, id
|
||||||
|
semper augue pulvinar eu. In sed diam bibendum, faucibus neque eget,
|
||||||
|
malesuada nisi. Maecenas nulla ante, sagittis sed mollis malesuada,
|
||||||
|
imperdiet et turpis. Curabitur eget vehicula justo. Etiam nec magna sed
|
||||||
|
dui lacinia molestie quis vitae velit. Donec eu erat metus. Duis congue,
|
||||||
|
risus vel gravida elementum, risus velit vestibulum felis, rhoncus
|
||||||
|
varius purus turpis ut sapien. Etiam non libero ex. Interdum et
|
||||||
|
malesuada fames ac ante ipsum primis in faucibus. Etiam facilisis, orci
|
||||||
|
at aliquet congue, massa felis semper nisl, consectetur commodo eros
|
||||||
|
odio vel nibh.</p>
|
||||||
|
</section>
|
||||||
|
<section id="fakecontent2" class="container">
|
||||||
|
<h2>Fake content 2</h2>
|
||||||
|
<p>Some other content might go here, but it would be separated from the first bit of content.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu
|
||||||
|
enim, dictum eu tincidunt quis, ultrices in tortor. Vivamus pharetra
|
||||||
|
elementum mauris sit amet elementum. Sed diam tortor, consequat nec ex
|
||||||
|
et, mattis tincidunt nunc. Fusce id sem justo. Phasellus ac blandit
|
||||||
|
libero. Donec eu orci ac libero blandit sollicitudin sit amet eu nunc.
|
||||||
|
Aenean finibus fermentum ligula id fringilla. Maecenas sit amet tortor
|
||||||
|
metus. </p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<footer>
|
||||||
|
<a href="./">Return to Theme3</a>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
|
|
@ -0,0 +1,269 @@
|
||||||
|
@use "sass:color";
|
||||||
|
@use "sass:math";
|
||||||
|
/* ----------------- */
|
||||||
|
/* Custom Properties */
|
||||||
|
/* ----------------- */
|
||||||
|
/* Many of the prop-
|
||||||
|
* erties here are
|
||||||
|
* where the substa-
|
||||||
|
* ntive changes
|
||||||
|
* will be made */
|
||||||
|
|
||||||
|
/* colors */
|
||||||
|
|
||||||
|
$color-white: hsl(280 30% 80%);/* White */
|
||||||
|
$color-dark: color.adjust($color-white, $lightness: -50%); /* Black */
|
||||||
|
$color-light: hsl(190 80% 30%); /* Gray */
|
||||||
|
|
||||||
|
/* font */
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sizes divided by 16 so values given in px */
|
||||||
|
$fs-900: calc(100rem / 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);
|
||||||
|
|
||||||
|
$ff-serif: "Inconsolata", monospace;
|
||||||
|
$ff-sans-cond: sans-serif;
|
||||||
|
$ff-sans: "Jost", sans-serif;
|
||||||
|
|
||||||
|
/* ----- */
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --------------- */
|
||||||
|
/* 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: absolute;
|
||||||
|
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; 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;}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- */
|
||||||
|
/* Non-Reusable Classes */
|
||||||
|
/* -------------------- */
|
||||||
|
/* meant for these pages
|
||||||
|
* only, not to be used
|
||||||
|
* in practice */
|
||||||
|
|
||||||
|
.colors--block {
|
||||||
|
padding: 3rem 1rem 1rem;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes theme3-gradient-anim {
|
||||||
|
$r: 6em;
|
||||||
|
$pd: math.div(2*math.$pi,10);
|
||||||
|
from {
|
||||||
|
background-position: 6em 0em;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
background-position: $r*math.cos(1*$pd) $r*math.sin(1*$pd);
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
background-position: $r*math.cos(2*$pd) $r*math.sin(2*$pd);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
background-position: $r*math.cos(3*$pd) $r*math.sin(3*$pd);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
background-position: $r*math.cos(4*$pd) $r*math.sin(4*$pd);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: $r*math.cos(5*$pd) $r*math.sin(5*$pd);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
background-position: $r*math.cos(6*$pd) $r*math.sin(6*$pd);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
background-position: $r*math.cos(7*$pd) $r*math.sin(7*$pd);
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
background-position: $r*math.cos(8*$pd) $r*math.sin(8*$pd);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
background-position: $r*math.cos(9*$pd) $r*math.sin(9*$pd);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-position: 6em 0em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme3-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: theme3-gradient-anim 12s linear infinite;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue