nathan
/
aSkelly
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate CSS code to SCSS

Browse Source
develop
Nathan Steel 9 months ago
parent 07a102bcf7
commit a0dc973723
35 changed files with 776 additions and 722 deletions
Show Stats Download Patch File Download Diff File

208
css/grid.css
Unescape Escape View File

@ -1,208 +0,0 @@
/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
/* https://stackoverflow.com/a/45059944 */
/* Flex grid, done similarly to a float: left. So content needs to be within the grid */
/* -ms-grid-columns: 1fr (20px 1fr)[3]; */
/* grid-template-columns: 1fr repeat(3, 20px 1fr); */
/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */
html{
font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */
}
:root {
--sm: 0;
--md: 0;
--lg: 0;
}
:root {
--active-brightness: 0.85;
--border-radius: 8px;
--box-shadow: 0px 2px 8px;
--color-accent: #dae9f6;
--color-bg: #fff;
--color-bg-secondary: #e9e9e9;
--color-link: #118bee;
--color-secondary: #508ce2;
--color-secondary-accent: #dee9fa;
--color-shadow: #f4f4f4;
--color-table: #118bee;
--color-text: #000;
--color-text-secondary: #999;
--color-scrollbar: #cacae8;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--hover-brightness: 1.2;
--justify-important: center;
--justify-normal: left;
--line-height: 1.5;
--width-card: 285px;
--width-card-medium: 460px;
--width-card-wide: 800px;
--width-content: 1080px;
}
@media (prefers-color-scheme: dark) {
:root[color-mode="user"] {
--color-accent: #0097fc;
--color-bg: #333;
--color-bg-secondary: #555;
--color-link: #0097fc;
--color-secondary: #e20de9;
--color-secondary-accent: #e20de9;
--color-shadow: #bbbbbb20;
--color-table: #0097fc;
--color-text: #f7f7f7;
--color-text-secondary: #aaa;
}
}
.container{
margin: 0 auto;
max-width: var(--width-content);
padding: 1.4rem 1rem;
/* overflow: auto; */
}
.container--no-topgap{
padding-top: 0;
}
.container--no-botgap{
padding-bottom: 0;
}
.container--no-gap{
/* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */
padding-bottom: 0;
padding-top: 0;
}
.row {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row;
row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */
}
.row+.row{
margin-top: 1.4rem;
}
/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
/* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */
/* .col>*{ */
.col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption,
.col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main,
.col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{
width: 100%;
}
/* inline elements */
.col img{
max-width: 100%;
height: auto;
margin-right: auto;
margin-left: auto;
}
/* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */
/* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */
.row [class^="col"]{
padding-right: 0.625rem; /* ~20px gap = 20/16(html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */
padding-left: 0.625rem; /* In place of gap, so it can be full width rows */
/* display: flex; */
/* flex-wrap: wrap; */
min-height: 0.125rem;
}
.row--scroll{
flex-wrap: nowrap;
overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
justify-content: left;
/* Scrollbar stuff */
scrollbar-color: #444 transparent;
scrollbar-width: thin;
padding-bottom: .5rem;
}
.row--scroll [class^="col"]{
}
.col{
flex: 0 0 auto;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
flex: 0 0 100%;
}
/* (100/12) * x = the flex % */
.col-sm-1 { flex: 0 0 8.33%; }
.col-sm-2 { flex: 0 0 16.66%; }
.col-sm-3 { flex: 0 0 25%; }
.col-sm-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
.col-sm-4 { flex: 0 0 33.33%; }
.col-sm-5 { flex: 0 0 41.66%; }
.col-sm-6 { flex: 0 0 50%; }
.col-sm-7 { flex: 0 0 58.33%; }
.col-sm-8 { flex: 0 0 66.66%; }
.col-sm-9 { flex: 0 0 75%; }
.col-sm-10 { flex: 0 0 83.33%; }
.col-sm-11 { flex: 0 0 91.66%; }
.col-sm-12 { flex: 0 0 100%; }
.hidden-sm {
display: none;
}
@media only screen and (min-width: 33.75rem) { /* ~540px */
}
@media only screen and (min-width: 45rem) { /* ~720px */
.col-1 { flex: 0 0 8.33%; }
.col-2 { flex: 0 0 16.66%; }
.col-3 { flex: 0 0 25%; }
.col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
.col-4 { flex: 0 0 33.33%; }
.col-5 { flex: 0 0 41.66%; }
.col-6 { flex: 0 0 50%; }
.col-7 { flex: 0 0 58.33%; }
.col-8 { flex: 0 0 66.66%; }
.col-9 { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.33%; }
.col-11 { flex: 0 0 91.66%; }
.col-12 { flex: 0 0 100%; }
.hidden-sm { display: block; }
}
@media only screen and (min-width: 60em) { /* ~960px */
}
/* Try to avoid !important, have each rule set to keep track of */
.no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{
padding: 0; /* In-case elements want to be full-width, touching, etc */
}
.row--align-center{ align-items: center;}
.col--align-center{ align-self: center; align-self: anchor-center}
/* Sort into col/sm areas with media queries */
.col-grow, .col-grow-sm
,.col-fill, .col-fill-sm{
flex-grow: 1;
}

1
css/grid/main.css.map
Unescape Escape View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"main.css"}

1
css/main.css
View File

File diff suppressed because one or more lines are too long

503
css/mvp.css
Unescape Escape View File

@ -1,503 +0,0 @@
/* Based on MVP.css v1.15 - https://github.com/andybrewer/mvp */
/* Altered to BEM, with other changes, and my own flex-box grid system */
*{
box-sizing: border-box;
}
html{scroll-behavior: smooth}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior: auto}
}
/* Footer fixed to bottom */
html,body{height: 100%}
body{display: flex;flex-direction: column;}
main, .main{ flex: 1 0 auto }
/* Layout */
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-family);
line-height: var(--line-height);
margin: 0;
overflow-x: hidden;
padding: 0;
}
/* Alerts */
.alert{
background: var(--color-secondary-accent);
border-left: 4px solid var(--color-secondary);
border-right: 4px solid var(--color-secondary);
padding: .1rem .8rem;
margin-bottom:.5rem;
}
.alert--error{
background: #f05870;
border-color: #e90d30;
}
.alert--warning{
background: #e8e85b;
border-color: #ddde11;
}
.alert--success{
background: #60c572;
border-color: #18ab34;
}
/* /Alerts */
hr{
background-color: var(--color-bg-secondary);
border: none;
height: 1px;
width: 100%;
max-width: var(--width-content);
margin: .5rem auto;
}
section img,
article img {
max-width: 100%;
}
section pre {
overflow: auto;
}
/* Cards is a row */
/* Best to do this with grid, but there's less browser support... */
.card{
/* As not using grid atm, no solution to keep cards the same size when flex-wrapped */
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow) var(--color-shadow);
padding: 1.25rem;
/* flex: 0 0 var(--width-card); */
background: #FFF;
display: block !important; /* Unset row/col default */
}
.card:hover {
box-shadow: var(--box-shadow) var(--color-bg-secondary);
}
.row--cards{
align-items: stretch; /* For cards to be "same height", requires the height 100% on card */
}
.row--cards .card{
height: 100%; /* To make multiple cards next to each other 'same' height */
}
/* Nav */
.nav a{
text-decoration: none;
}
.nav a{
color: #CCC;
}
/* Lists */
ol li,
ul li {
padding: 0.2rem 0;
}
.no-bullet-point{
list-style: none;
}
/* Inline lists */
.inline-list {
list-style: none;
padding: 0;
margin-left: -0.5rem; /* To offset the start of li margin. Little jank */
}
.inline-list li {
display: inline-block;
margin: 0 0.5rem;
position: relative;
text-align: left;
}
.inline-list>li{ /* Only affects first level li */
padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
}
/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
/* Nav/inline-list Dropdown */
.inline-list li:hover ul {
display: block;
}
/* ?? maybe change */
.inline-list li ul {
background: var(--color-bg);
border: 1px solid var(--color-bg-secondary);
border-top: 10px solid transparent;
border-radius: var(--border-radius);
display: none;
height: auto;
padding: .5rem 1rem;
position: absolute;
top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */
white-space: nowrap;
width: auto;
z-index: 1;
/* Centre */
/* left: 50%;
transform: translate(-50%, 0); */
/* Left */
left: 0;
/* Right */
/* transform: translate(-50%, 0); */
}
.inline-list li ul::before {
/* fill gap above to make mousing over them easier */
/* background-color: green; */
content: "";
position: absolute;
left: 0;
right: 0;
top: -0.5rem;
height: 0.5rem;
}
.inline-list li ul li,
.inline-list li ul li a {
display: block;
}
/* Typography */
p {
padding: 0;
width: 100%;
}
p+p, h1+p{ /* Para after para should space out */
margin-top: .75rem;
}
mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
padding: 0.1rem;
background: #ff8c00;
}
small {
color: var(--color-text-secondary);
}
code,samp {
font-family: monospace;
background-color: var(--color-accent);
border-radius: var(--border-radius);
color: var(--color-text);
display: inline-block;
margin: 0 0.1rem;
padding: 0 0.5rem;
}
pre {
margin: .5rem 0;
padding: 0.5rem 2rem;
display: block;
font-size: .9rem;
line-height: 1.3rem;
background-color: var(--color-accent);
border-radius: var(--border-radius);
color: var(--color-text);
overflow-x: auto;
white-space: pre-wrap;
border: 1px solid #c1cfda;
}
details {
margin: .7rem 0;
}
details summary {
margin-bottom: .8rem;
font-weight: bold;
cursor: pointer;
}
/* Links */
a{
color: var(--color-link);
display: inline-block;
font-weight: bold;
text-decoration: underline;
}
a:hover {
filter: brightness(var(--hover-brightness));
}
a:active {
filter: brightness(var(--active-brightness));
}
/* Buttons/Inputs */
.button,
button,
input[type="submit"]
{
background: #FEFEFE;
border: 2px solid var(--color-link);
border-radius: var(--border-radius);
display: inline-block;
font-size: .9rem;
font-weight: bold;
line-height: var(--line-height);
margin-top: 0.5rem;
padding: .6rem 1.2rem;
text-decoration: none;
}
.button + .button,
button + button{
margin-left: 6px;
}
.button--small,
button.button--small,
input[type="submit"].button--small{
padding: .2rem 1.6rem;
}
.button,
button,
input[type="submit"]
{
font-family: var(--font-family);
}
.button:hover,
button:hover,
input[type="submit"]:hover
{
cursor: pointer;
filter: brightness(var(--hover-brightness));
}
.button:active,
button:active,
input[type="submit"]:active
{
filter: brightness(var(--active-brightness));
}
.button--blue,
button.button--blue,
input[type="submit"].button--blue
{
background-color: var(--color-link);
color: var(--color-bg);
}
/* Images */
figure {
margin: 0;
padding: 0;
}
figure img {
max-width: 100%;
}
figure figcaption {
color: var(--color-text-secondary);
}
/* Forms */
button:disabled,
input:disabled {
background: var(--color-bg-secondary);
border-color: var(--color-bg-secondary);
color: var(--color-text-secondary);
cursor: not-allowed;
}
button[disabled]:hover,
input[type="submit"][disabled]:hover {
filter: none;
}
form {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow) var(--color-shadow);
display: block;
max-width: var(--width-card-wide);
min-width: var(--width-card);
padding: 1.5rem;
text-align: var(--justify-normal);
margin: 0 auto;
}
form header {
margin: 1.5rem 0;
padding: 1.5rem 0;
}
input,
label,
select,
textarea {
display: block;
font-size: inherit;
max-width: var(--width-card-wide);
}
input[type="checkbox"],
input[type="radio"] {
display: inline-block;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
display: inline-block;
font-weight: normal;
position: relative;
top: 1px;
}
input[type="range"] {
padding: 0.4rem 0;
}
input,
select,
textarea {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
margin-bottom: 1rem;
padding: 0.4rem 0.8rem;
}
input[type="text"],
input[type="password"]
textarea {
width: calc(100% - 1.6rem);
}
input[readonly],
textarea[readonly] {
background-color: var(--color-bg-secondary);
}
label {
font-weight: bold;
margin-bottom: 0.2rem;
}
/* Popups */
.modal{
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow) var(--color-shadow);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
z-index: 999;
}
/* Tables */
.table-container{
overflow-x: auto;
}
table {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
border-spacing: 0;
max-width: 100%;
white-space: nowrap;
text-align: left;
border-collapse: collapse;
overflow-wrap: normal;
}
table td,
table th,
table tr {
padding: 0.4rem 0.8rem;
text-align: var(--justify-important);
}
table thead tr {
background-color: var(--color-table);
/* border-radius: var(--border-radius); */
color: var(--color-bg);
margin: 0;
padding: 0;
}
table thead tr {
border-top-left-radius: var(--border-radius);
}
tbody tr:nth-child(even) {
background-color: var(--color-accent);
}
tbody tr:nth-child(odd) {
background-color: #FFF;
}
/* Quotes */
blockquote {
display: block;
font-size: x-large;
line-height: var(--line-height);
margin: 1rem auto;
max-width: var(--width-card-medium);
padding: 1.5rem 1rem;
text-align: var(--justify-important);
}
blockquote footer{
color: var(--color-text-secondary);
display: block;
font-size: small;
line-height: var(--line-height);
padding: 1.5rem 0;
}
/* Misc helpers */
.tar{ text-align: right; }
.no-padd{ padding: 0; }
/* Tags */
.tag{
background-color: var(--color-secondary);
border-radius: var(--border-radius);
color: var(--color-bg);
font-size: xx-small;
font-weight: bold;
padding: 0.2rem 1rem;
position: relative;
top:-2px;
display: inline-block;
vertical-align: middle;
}
.banner{
background: #eee;
}
.hide{
display: none;
}

17
scss/base/_anchor.scss
Unescape Escape View File

@ -0,0 +1,17 @@
@use '../utilities/main_utilities' as *;
/* Links */
a{
color: $color-link;
display: inline-block;
font-weight: bold;
text-decoration: underline;
}
a:hover {
filter: brightness($hover-brightness);
}
a:active {
filter: brightness($active-brightness);
}

20
scss/base/_base.scss
Unescape Escape View File

@ -0,0 +1,20 @@
@use '../utilities/main_utilities' as *;
html{scroll-behavior: smooth}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior: auto}
}
/* Footer fixed to bottom */
html,body{height: 100%}
body{display: flex;flex-direction: column;}
main, .main{ flex: 1 0 auto }
body {
background: $color-bg;
color: $color-text;
font-family: $font-family;
line-height: $line-height;
overflow-x: hidden;
@include reset; /* Margin 0, padding 0. Testing new @use/@forward as globals aren't allowed... */
}

166
scss/base/_grid.scss
Unescape Escape View File

@ -0,0 +1,166 @@
@use '../utilities/main_utilities' as *;
/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
/* https://stackoverflow.com/a/45059944 */
/* Flex grid, done similarly to a float: left. So content needs to be within the grid */
/* -ms-grid-columns: 1fr (20px 1fr)[3]; */
/* grid-template-columns: 1fr repeat(3, 20px 1fr); */
/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */
html{
font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */
}
.container{
margin: 0 auto;
max-width: $width-content;
padding: 1.4rem 1rem;
/* overflow: auto; */
}
.container--no-topgap{
padding-top: 0;
}
.container--no-botgap{
padding-bottom: 0;
}
.container--no-gap{
/* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */
padding-bottom: 0;
padding-top: 0;
}
.row {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row;
row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */
}
.row+.row{
margin-top: 1.4rem;
}
/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
/* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */
/* .col>*{ */
.col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption,
.col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main,
.col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{
width: 100%;
}
/* inline elements */
.col img{
max-width: 100%;
height: auto;
margin-right: auto;
margin-left: auto;
}
/* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */
/* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */
.row [class^="col"]{
padding-right: 0.625rem; /* ~20px gap = 20/16(html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */
padding-left: 0.625rem; /* In place of gap, so it can be full width rows */
/* display: flex; */
/* flex-wrap: wrap; */
min-height: 0.125rem;
}
.row--scroll{
flex-wrap: nowrap;
overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
justify-content: left;
/* Scrollbar stuff */
scrollbar-color: #444 transparent;
scrollbar-width: thin;
padding-bottom: .5rem;
}
.row--scroll [class^="col"]{
}
.col{
flex: 0 0 auto;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
flex: 0 0 100%;
}
/* (100/12) * x = the flex % */
.col-sm-1 { flex: 0 0 8.33%; }
.col-sm-2 { flex: 0 0 16.66%; }
.col-sm-3 { flex: 0 0 25%; }
.col-sm-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
.col-sm-4 { flex: 0 0 33.33%; }
.col-sm-5 { flex: 0 0 41.66%; }
.col-sm-6 { flex: 0 0 50%; }
.col-sm-7 { flex: 0 0 58.33%; }
.col-sm-8 { flex: 0 0 66.66%; }
.col-sm-9 { flex: 0 0 75%; }
.col-sm-10 { flex: 0 0 83.33%; }
.col-sm-11 { flex: 0 0 91.66%; }
.col-sm-12 { flex: 0 0 100%; }
.hidden-sm {
display: none;
}
@media only screen and (min-width: 33.75rem) { /* ~540px */
}
@media only screen and (min-width: 45rem) { /* ~720px */
.col-1 { flex: 0 0 8.33%; }
.col-2 { flex: 0 0 16.66%; }
.col-3 { flex: 0 0 25%; }
.col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
.col-4 { flex: 0 0 33.33%; }
.col-5 { flex: 0 0 41.66%; }
.col-6 { flex: 0 0 50%; }
.col-7 { flex: 0 0 58.33%; }
.col-8 { flex: 0 0 66.66%; }
.col-9 { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.33%; }
.col-11 { flex: 0 0 91.66%; }
.col-12 { flex: 0 0 100%; }
.hidden-sm { display: block; }
}
@media only screen and (min-width: 60em) { /* ~960px */
}
/* Try to avoid !important, have each rule set to keep track of */
.no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{
padding: 0; /* In-case elements want to be full-width, touching, etc */
}
.row--align-center{ align-items: center;}
.col--align-center{ align-self: center; align-self: anchor-center}
/* Sort into col/sm areas with media queries */
.col-grow, .col-grow-sm
,.col-fill, .col-fill-sm{
flex-grow: 1;
}

20
scss/base/_image.scss
Unescape Escape View File

@ -0,0 +1,20 @@
@use '../utilities/main_utilities' as *;
/* Images */
figure {
margin: 0;
padding: 0;
}
figure img {
max-width: 100%;
}
figure figcaption {
color: $color-text-secondary;
}
section img,
article img {
max-width: 100%;
}

9
scss/base/_main_base.scss
Unescape Escape View File

@ -0,0 +1,9 @@
@use 'thanks';
@use 'reset';
@use 'base';
@use 'grid';
@use 'typography';
@use 'anchor';
@use 'image';

24
css/reset.css → scss/base/_reset.scss
Unescape Escape View File

@ -1,3 +1,5 @@
@use '../utilities/main_utilities' as *;
/* Box sizing rules */
*,
*::before,
@ -6,7 +8,7 @@
}
/* Prevent font size inflation */
html {
html{
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
@ -14,59 +16,59 @@ html {
/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
figure, blockquote, dl, dd{
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
ol{
margin:0;
}
/* Set core body defaults */
body {
body{
min-height: 100vh;
line-height: 1.5;
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, h5, h6,
button, input, label {
button, input, label{
line-height: 1.35;
}
/* Balance text wrapping on headings */
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6{
text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
a:not([class]){
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
picture{
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
textarea, select{
font-family: inherit;
font-size: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
textarea:not([rows]){
min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
:target{
scroll-margin-block: 5ex;
}

3
scss/base/_thanks.scss
Unescape Escape View File

@ -0,0 +1,3 @@
// With CSS inspired or taken from:
// https://github.com/andybrewer/mvp
// https://piccalil.li/blog/a-more-modern-css-reset/

27
scss/base/_typography.scss
Unescape Escape View File

@ -0,0 +1,27 @@
@use '../utilities/main_utilities' as *;
p {
padding: 0;
width: 100%;
}
p+p, h1+p{ /* Para after para should space out */
margin-top: .75rem;
}
mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
padding: 0.1rem;
background: #ff8c00;
}
small {
color: $color-text-secondary;
}
hr{
background-color: $color-bg-secondary;
border: none;
height: 1px;
width: 100%;
max-width: $width-content;
margin: .5rem auto;
}

10
scss/component/_accordion.scss
Unescape Escape View File

@ -0,0 +1,10 @@
@use '../utilities/main_utilities' as *;
details {
margin: .7rem 0;
}
details summary {
margin-bottom: .8rem;
font-weight: bold;
cursor: pointer;
}

22
scss/component/_alert.scss
Unescape Escape View File

@ -0,0 +1,22 @@
@use '../utilities/main_utilities' as *;
// Alerts
.alert{
background: $color-secondary-accent;
border-left: 4px solid $color-secondary;
border-right: 4px solid $color-secondary;
padding: .1rem .8rem;
margin-bottom:.5rem;
}
.alert--error{
background: #f05870;
border-color: #e90d30;
}
.alert--warning{
background: #e8e85b;
border-color: #ddde11;
}
.alert--success{
background: #60c572;
border-color: #18ab34;
}

6
scss/component/_banner.scss
Unescape Escape View File

@ -0,0 +1,6 @@
@use '../utilities/main_utilities' as *;
.banner{
width: 100%;
background: #eee;
}

73
scss/component/_button.scss
Unescape Escape View File

@ -0,0 +1,73 @@
@use '../utilities/main_utilities' as *;
/* Buttons/Inputs */
.button,
button,
input[type="submit"]
{
background: #FEFEFE;
border: 2px solid $color-link;
border-radius: $border-radius;
display: inline-block;
font-size: .9rem;
font-weight: bold;
line-height: $line-height;
margin-top: 0.5rem;
padding: .6rem 1.2rem;
text-decoration: none;
}
.button + .button,
button + button{
margin-left: 6px;
}
.button--small,
button.button--small,
input[type="submit"].button--small{
padding: .2rem 1.6rem;
}
.button,
button,
input[type="submit"]
{
font-family: $font-family;
}
.button:hover,
button:hover,
input[type="submit"]:hover
{
cursor: pointer;
filter: brightness($hover-brightness);
}
.button:active,
button:active,
input[type="submit"]:active
{
filter: brightness($active-brightness);
}
.button--blue,
button.button--blue,
input[type="submit"].button--blue
{
background-color: $color-link;
color: $color-bg;
}
.button--disabled,
button:disabled,
input:disabled {
background: $color-bg-secondary;
border-color: $color-bg-secondary;
color: $color-text-secondary;
cursor: not-allowed;
}
.button--disabled:hover,
button[disabled]:hover,
input[type="submit"][disabled]:hover {
filter: none;
}

25
scss/component/_card.scss
Unescape Escape View File

@ -0,0 +1,25 @@
@use '../utilities/main_utilities' as *;
/* Cards is a row */
/* Best to do this with grid, but there's less browser support... */
.card{
/* As not using grid atm, no solution to keep cards the same size when flex-wrapped */
border: 1px solid $color-bg-secondary;
border-radius: $border-radius;
box-shadow: $box-shadow $color-shadow;
padding: 1.25rem;
/* flex: 0 0 $width-card; */
background: #FFF;
display: block !important; /* Unset row/col default */
}
.card:hover {
box-shadow: $box-shadow $color-bg-secondary;
}
.row--cards{
align-items: stretch; /* For cards to be "same height", requires the height 100% on card */
}
.row--cards .card{
height: 100%; /* To make multiple cards next to each other 'same' height */
}

30
scss/component/_code.scss
Unescape Escape View File

@ -0,0 +1,30 @@
@use '../utilities/main_utilities' as *;
code,samp {
font-family: monospace;
background-color: $color-accent;
border-radius: $border-radius;
color: $color-text;
display: inline-block;
margin: 0 0.1rem;
padding: 0 0.5rem;
}
pre {
margin: .5rem 0;
padding: 0.5rem 2rem;
display: block;
font-size: .9rem;
line-height: 1.3rem;
background-color: $color-accent;
border-radius: $border-radius;
color: $color-text;
overflow-x: auto;
white-space: pre-wrap;
border: 1px solid #c1cfda;
}
section pre {
overflow: auto;
}

68
scss/component/_form.scss
Unescape Escape View File

@ -0,0 +1,68 @@
@use '../utilities/main_utilities' as *;
form {
border: 1px solid $color-bg-secondary;
border-radius: $border-radius;
box-shadow: $box-shadow $color-shadow;
display: block;
max-width: $width-card-wide;
min-width: $width-card;
padding: 1.5rem;
text-align: $justify-normal;
margin: 0 auto;
}
form header {
margin: 1.5rem 0;
padding: 1.5rem 0;
}
input,
label,
select,
textarea {
display: block;
font-size: inherit;
max-width: $width-card-wide;
}
label {
font-weight: bold;
margin-bottom: 0.2rem;
}
input[type="checkbox"],
input[type="radio"] {
display: inline-block;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
display: inline-block;
font-weight: normal;
position: relative;
top: 1px;
}
input[type="range"] {
padding: 0.4rem 0;
}
input,
select,
textarea {
border: 1px solid $color-bg-secondary;
border-radius: $border-radius;
margin-bottom: 1rem;
padding: 0.4rem 0.8rem;
}
input[type="text"],
input[type="password"]
textarea {
width: calc(100% - 1.6rem);
}
input[readonly],
textarea[readonly] {
background-color: $color-bg-secondary;
}

75
scss/component/_list.scss
Unescape Escape View File

@ -0,0 +1,75 @@
@use '../utilities/main_utilities' as *;
/* Lists */
ol li,
ul li {
padding: 0.2rem 0;
}
.no-bullet-point{
list-style: none;
}
/* Inline lists */
.inline-list {
list-style: none;
padding: 0;
margin-left: -0.5rem; /* To offset the start of li margin. Little jank */
}
.inline-list li {
display: inline-block;
margin: 0 0.5rem;
position: relative;
text-align: left;
}
.inline-list>li{ /* Only affects first level li */
padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
}
/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
/* Nav/inline-list Dropdown */
.inline-list li:hover ul {
display: block;
}
/* ?? maybe change */
.inline-list li ul {
background: $color-bg;
border: 1px solid $color-bg-secondary;
border-top: 10px solid transparent;
border-radius: $border-radius;
display: none;
height: auto;
padding: .5rem 1rem;
position: absolute;
top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */
white-space: nowrap;
width: auto;
z-index: 1;
/* Centre */
/* left: 50%;
transform: translate(-50%, 0); */
/* Left */
left: 0;
/* Right */
/* transform: translate(-50%, 0); */
}
.inline-list li ul::before {
/* fill gap above to make mousing over them easier */
/* background-color: green; */
content: "";
position: absolute;
left: 0;
right: 0;
top: -0.5rem;
height: 0.5rem;
}
.inline-list li ul li,
.inline-list li ul li a {
display: block;
}

12
scss/component/_main_component.scss
Unescape Escape View File

@ -0,0 +1,12 @@
@use 'button';
@use 'card';
@use 'form';
@use 'alert';
@use 'list';
@use 'modal';
@use 'quote';
@use 'table';
@use 'tag';
@use 'code';
@use 'banner';
@use 'accordion';

14
scss/component/_modal.scss
Unescape Escape View File

@ -0,0 +1,14 @@
@use '../utilities/main_utilities' as *;
/* Popups */
.modal{
border: 1px solid $color-bg-secondary;
border-radius: $border-radius;
box-shadow: $box-shadow $color-shadow;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
z-index: 999;
}

20
scss/component/_quote.scss
Unescape Escape View File

@ -0,0 +1,20 @@
@use '../utilities/main_utilities' as *;
/* Quotes */
blockquote {
display: block;
font-size: x-large;
line-height: $line-height;
margin: 1rem auto;
max-width: $width-card-medium;
padding: 1.5rem 1rem;
text-align: $justify-important;
}
blockquote footer{
color: $color-text-secondary;
display: block;
font-size: small;
line-height: $line-height;
padding: 1.5rem 0;
}

43
scss/component/_table.scss
Unescape Escape View File

@ -0,0 +1,43 @@
@use '../utilities/main_utilities' as *;
/* Tables */
.table-container{
overflow-x: auto;
}
table {
border: 1px solid $color-bg-secondary;
border-radius: $border-radius;
border-spacing: 0;
max-width: 100%;
white-space: nowrap;
text-align: left;
border-collapse: collapse;
overflow-wrap: normal;
}
table td,
table th,
table tr {
padding: 0.4rem 0.8rem;
text-align: $justify-important;
}
table thead tr {
background-color: $color-table;
/* border-radius: $border-radius; */
color: $color-bg;
margin: 0;
padding: 0;
}
table thead tr {
border-top-left-radius: $border-radius;
}
tbody tr:nth-child(even) {
background-color: $color-accent;
}
tbody tr:nth-child(odd) {
background-color: #FFF;
}

15
scss/component/_tag.scss
Unescape Escape View File

@ -0,0 +1,15 @@
@use '../utilities/main_utilities' as *;
/* Tags */
.tag{
background-color: $color-secondary;
border-radius: $border-radius;
color: $color-bg;
font-size: xx-small;
font-weight: bold;
padding: 0.2rem 1rem;
position: relative;
top:-2px;
display: inline-block;
vertical-align: middle;
}

8
scss/helpers/_main_helpers.scss
Unescape Escape View File

@ -0,0 +1,8 @@
@use '../utilities/main_utilities' as *;
/* Misc helpers */
.tar{ text-align: right; }
.no-padd{ padding: 0; }
.hide{ display: none; }

2
scss/layout/_footer.scss
Unescape Escape View File

@ -0,0 +1,2 @@
@use '../utilities/main_utilities' as *;

2
scss/layout/_header.scss
Unescape Escape View File

@ -0,0 +1,2 @@
@use '../utilities/main_utilities' as *;

3
scss/layout/_main_layout.scss
Unescape Escape View File

@ -0,0 +1,3 @@
@use 'header';
@use 'footer';
@use 'nav';

9
scss/layout/_nav.scss
Unescape Escape View File

@ -0,0 +1,9 @@
@use '../utilities/main_utilities' as *;
/* Nav */
.nav a{
text-decoration: none;
}
.nav a{
color: #CCC;
}

10
scss/main.scss
Unescape Escape View File

@ -0,0 +1,10 @@
// Variables first 'cause you never know where you'll need 'em
// @use 'utilities/main_utilities';
// Get the reset it
@use 'base/main_base';
@use 'component/main_component';
@use 'layout/main_layout';
@use 'page/main_page';
@use 'helpers/main_helpers';

3
scss/page/_main_page.scss
Unescape Escape View File

@ -0,0 +1,3 @@
@use '../utilities/main_utilities' as *;
// Page specific stuff

2
scss/utilities/_main_utilities.scss
Unescape Escape View File

@ -0,0 +1,2 @@
@forward 'variables';
@forward 'mixins';

4
scss/utilities/_mixins.scss
Unescape Escape View File

@ -0,0 +1,4 @@
@mixin reset {
margin: 0;
padding: 0;
}

43
scss/utilities/_variables.scss
Unescape Escape View File

@ -0,0 +1,43 @@
// Variables
$media-xs: 0;
$media-sm: 0;
$media-md: 0;
$media-lg: 0;
$media-xl: 0;
$active-brightness: .85;
$hover-brightness: 1.2;
$border-radius: 8px;
$box-shadow: 0 2px 8px;
$color-accent: #dae9f6;
$color-accent--dark: #0097fc;
$color-bg: #fff;
$color-bg--dark: #333;
$color-bg-secondary: #e9e9e9;
$color-bg-secondary--dark: #555;
$color-link: #118bee;
$color-link--dark: #0097fc;
$color-secondary: #508ce2;
$color-secondary--dark: #e20de9;
$color-secondary-accent: #dee9fa;
$color-secondary-accent--dark: #e20de9;
$color-shadow: #f4f4f4;
$color-shadow--dark: #bbbbbb20;
$color-table: #118bee;
$color-table--dark: #0097fc;
$color-text: #000;
$color-text--dark: #f7f7f7;
$color-text-secondary: #999;
$color-text-secondary--dark: #aaa;
$color-scrollbar: #cacae8;
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$justify-important: center;
$justify-normal: left;
$line-height: 1.5;
$width-card: 285px;
$width-card-medium: 460px;
$width-card-wide: 800px;
$width-content: 1080px;
Write Preview
Loading…
Cancel
Save