Merge branch 'feature-base-v1.1'
Base now "@use" importable
This commit is contained in:
commit
2f03f9d830
GPG Key ID:
7A3F8997BFE894E0
|
|
@ -0,0 +1 @@
|
||||||
|
css/
|
||||||
|
|
@ -1,227 +0,0 @@
|
||||||
/* ----------------- */
|
|
||||||
/* Custom Properties */
|
|
||||||
/* ----------------- */
|
|
||||||
/* Many of the prop-
|
|
||||||
* erties here are
|
|
||||||
* where the substa-
|
|
||||||
* ntive changes
|
|
||||||
* will be made */
|
|
||||||
/* colors */
|
|
||||||
/* Black */
|
|
||||||
/* Gray */
|
|
||||||
/* White */
|
|
||||||
/* font */
|
|
||||||
/* 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: sans-serif;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: hsl(0deg, 0%, 0%);
|
|
||||||
background-color: hsl(0deg, 0%, 100%);
|
|
||||||
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: hsl(0deg, 0%, 0%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-light {
|
|
||||||
background-color: hsl(0deg, 0%, 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-white {
|
|
||||||
background-color: hsl(0deg, 0%, 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-dark {
|
|
||||||
color: hsl(0deg, 0%, 0%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-light {
|
|
||||||
color: hsl(0deg, 0%, 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-white {
|
|
||||||
color: hsl(0deg, 0%, 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Font Classes */
|
|
||||||
.fs-900 {
|
|
||||||
font-size: 7.8125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fs-800 {
|
|
||||||
font-size: 4.6875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fs-700 {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fs-600 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fs-500 {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fs-400 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fs-300 {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fs-200 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ff-serif {
|
|
||||||
font-family: serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ff-sans-cond {
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ff-sans {
|
|
||||||
font-family: 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*# sourceMappingURL=base.css.map */
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"sourceRoot":"","sources":["../scss/base.scss"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAME;AAE0B;AACC;AACA;AAE3B;AAEA;AAcF;AACA;AACA;AAEA;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,aAzBQ;EA0BR,WAhCO;EAiCP,OA7CY;EA8CZ,kBA5CY;EA6CZ;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,kBA5IE;;;AA6Id;EAAY,kBA5IE;;;AA6Id;EAAY,kBA5IE;;;AA8Id;EAAc,OAhJA;;;AAiJd;EAAc,OAhJA;;;AAiJd;EAAc,OAhJA;;;AAkJd;AAEA;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;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","file":"base.css"}
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
|
@use "sass:math";
|
||||||
|
@mixin reset {
|
||||||
/* ----------------- */
|
/* ----------------- */
|
||||||
/* Custom Properties */
|
/* Custom Properties */
|
||||||
/* ----------------- */
|
/* ----------------- */
|
||||||
/* Many of the prop-
|
/*
|
||||||
* erties here are
|
This values are to be overridden
|
||||||
* where the substa-
|
after being injected into
|
||||||
* ntive changes
|
the global scope.
|
||||||
* will be made */
|
*/
|
||||||
|
|
||||||
/* colors */
|
/* colors */
|
||||||
|
|
||||||
|
|
@ -16,76 +18,19 @@ $color-white: hsl(0 0% 100%);/* White */
|
||||||
/* font */
|
/* font */
|
||||||
|
|
||||||
/* Sizes divided by 16 so values given in px */
|
/* Sizes divided by 16 so values given in px */
|
||||||
$fs-900: calc(125rem / 16);
|
$fs-900: math.div(125rem, 16);
|
||||||
$fs-800: calc(75rem / 16);
|
$fs-800: math.div(75rem, 16);
|
||||||
$fs-700: calc(56rem / 16);
|
$fs-700: math.div(56rem, 16);
|
||||||
$fs-600: calc(32rem / 16);
|
$fs-600: math.div(32rem, 16);
|
||||||
$fs-500: calc(28rem / 16);
|
$fs-500: math.div(28rem, 16);
|
||||||
$fs-400: calc(24rem / 16);
|
$fs-400: math.div(24rem, 16);
|
||||||
$fs-300: calc(18rem / 16);
|
$fs-300: math.div(18rem, 16);
|
||||||
$fs-200: calc(16rem / 16);
|
$fs-200: math.div(16rem, 16);
|
||||||
|
|
||||||
$ff-serif: serif;
|
$ff-serif: serif;
|
||||||
$ff-sans-cond: sans-serif;
|
$ff-sans-cond: sans-serif;
|
||||||
$ff-sans: sans-serif;
|
$ff-sans: 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 */
|
/* Utility Classes */
|
||||||
/* --------------- */
|
/* --------------- */
|
||||||
|
|
@ -189,6 +134,65 @@ footer {
|
||||||
margin-top: 3vh;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include reset;
|
||||||
|
|
||||||
/* -------------------- */
|
/* -------------------- */
|
||||||
/* Non-Reusable Classes */
|
/* Non-Reusable Classes */
|
||||||
/* -------------------- */
|
/* -------------------- */
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue