CSS Purgatory: base template

No layout section
This commit is contained in:
Emilia Allison 2022-07-07 17:20:00 -04:00
parent 513a507896
commit 7772782946
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
2 changed files with 258 additions and 0 deletions

View File

@ -0,0 +1,159 @@
/* ----------------- */
/* Custom Properties */
/* ----------------- */
/* ----- */
/* 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: var(--ff-sans);
font-size: var(--fs-400);
color: hsl( var(--color-dark) );
background-color: hsl ( var(--color-white) );
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;
}
}
/* ----------------- */
/* Custom Properties */
/* ----------------- */
/* Many of the prop-
* erties here are
* where the substa-
* ntive changes
* will be made */
:root {
/* colors */
--color-dark: 0 0% 0% ; /* Black */
--color-light: 0 0% 50% ; /* Gray */
--color-white: 0 0% 100% ;/* White */
/* font */
/* Sizes divided by 16 so values given in px */
--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);
--ff-serif: serif;
--ff-sans-cond: sans-serif;
--ff-sans: sans-serif;
}
/* --------------- */
/* Utility Classes */
/* --------------- */
.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%;
}
.container {
padding-inline: 2em;
margin-inline: auto;
max-width: 80rem;
}
/* Color Classes */
.bg-dark { background-color: hsl( var(--color-dark) ); }
.bg-light { background-color: hsl( var(--color-light) ); }
.bg-white { background-color: hsl( var(--color-white) ); }
.text-dark { color: hsl( var(--color-dark) ); }
.text-light { color: hsl( var(--color-light) ); }
.text-white { color: hsl( var(--color-white) ); }
/* Font Classes */
.fs-900 { font-size: var(--fs-900); }
.fs-800 { font-size: var(--fs-800); }
.fs-700 { font-size: var(--fs-700); }
.fs-600 { font-size: var(--fs-600); }
.fs-500 { font-size: var(--fs-500); }
.fs-400 { font-size: var(--fs-400); }
.fs-300 { font-size: var(--fs-300); }
.fs-200 { font-size: var(--fs-200); }
.ff-serif { font-family: var(--ff-serif); }
.ff-sans-cond { font-family: var(--ff-sans-cond); }
.ff-sans { font-family: var(--ff-sans); }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
/* -------------------- */
/* Non-Reusable Classes */
/* -------------------- */
/* meant for these pages
* only, not to be used
* in practice */
.colors--block {
padding: 3rem 1rem 1rem;
border: 1px solid black;
}

View File

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Purgatory - Base</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header id="title">
<h1>Base</h1>
</header>
<hr>
<article class="">
<section id="description">
<h2>Description</h2>
<p><em>Base</em> is not a style, it is a template for other styles to be copied from</p>
</section>
<hr>
<section id="colors">
<h2>Colors</h2>
<div class="container flex">
<div>
<div class="colors--block bg-dark text-white">#Color hex code</div>
<p> HSL: Color hsl
</div>
<div>
<div class="colors--block bg-light text-white">#Color hex code</div>
<p> HSL: Color hsl
</div>
<div>
<div class="colors--block bg-white text-dark">#Color hex code</div>
<p> HSL: Color hsl
</div>
</div>
</section>
<hr>
<section id="typography">
<h2>Typography</h2>
<div class="flex row">
<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">font information</p>
</div>
<div>
<p class="ff-sans fs-500">Heading 5</p>
<p class="ff-sans-cond fs-200 text-light">font information</p>
</div>
<div>
<p class="ff-sans fs-400">Heading 6</p>
<p class="ff-sans-cond fs-200 text-light">font information</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>
</article>
<hr>
<footer>
<a href="../">Return to Purgatory</a>
</footer>
</body>
</html>