Compare commits
No commits in common. 'feature/WIP' and 'main' have entirely different histories.
feature/WI
...
main
@ -1,2 +0,0 @@
|
|||||||
css/
|
|
||||||
|
|
||||||
@ -1 +0,0 @@
|
|||||||
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"main.css"}
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,51 +0,0 @@
|
|||||||
// clip-area = Where the clip will occur (when clicked)
|
|
||||||
// clip-tooltip = The tooltip, may pre post? clip-tooltip-pre clip-tooltip-post
|
|
||||||
// clip-copy = What (element) content will be copied to clipboard
|
|
||||||
|
|
||||||
|
|
||||||
function copyToClipboard(elementId) {
|
|
||||||
|
|
||||||
/* Get the text field */
|
|
||||||
var copyText = document.getElementById(elementId);
|
|
||||||
|
|
||||||
/* Select the text field */
|
|
||||||
copyText = copyText.textContent;
|
|
||||||
|
|
||||||
/* Copy the text inside the text field */
|
|
||||||
navigator.clipboard.writeText(copyText);
|
|
||||||
|
|
||||||
var tooltip = document.getElementsByClassName('tooltiptext');
|
|
||||||
for (var i = 0; i < tooltip.length; i++) {
|
|
||||||
tooltip[i].innerHTML = "Copied";
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetCopy() {
|
|
||||||
|
|
||||||
var tooltip = document.getElementsByClassName('tooltiptext');
|
|
||||||
for (var i = 0; i < tooltip.length; i++) {
|
|
||||||
tooltip[i].innerHTML = "Copy to clipboard";
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event Listeners
|
|
||||||
|
|
||||||
//const clipboard = querySelector('.tooltiptext');
|
|
||||||
const minecraft = document.getElementById('minecraft-clip');
|
|
||||||
minecraft.addEventListener('click', function (event) { copyToClipboard('minecraft-server'); });
|
|
||||||
|
|
||||||
const terraria = document.getElementById('terraria-clip');
|
|
||||||
terraria.addEventListener('click', function (event) { copyToClipboard('terraria-server'); });
|
|
||||||
|
|
||||||
const factorio = document.getElementById('factorio-clip');
|
|
||||||
factorio.addEventListener('click', function (event) { copyToClipboard('factorio-server'); });
|
|
||||||
|
|
||||||
var tooltipped = document.getElementsByClassName('tooltipped');
|
|
||||||
for (var i = 0; i < tooltipped.length; i++) {
|
|
||||||
//tooltipped[i].addEventListener('click', function (event) { copyToClipboard(); });
|
|
||||||
// this clipboard
|
|
||||||
tooltipped[i].addEventListener('mouseout', function (event) { resetCopy(); });
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
// data-tabs-group = The group
|
|
||||||
// data-tabs-id = The item number (id) of the tab within the group
|
|
||||||
// data-tabs-tab = If the element is a tab object (to be toggled)
|
|
||||||
// data-tabs-button = An element that will toggle the tabs of its group/id
|
|
||||||
|
|
||||||
// Make each 'tab' have a click event.
|
|
||||||
let tabButtons = document.querySelectorAll('[data-tabs-button]');
|
|
||||||
// document.querySelectorAll('[data-foo="1"]');
|
|
||||||
// let tabs = document.getElementsByClassName('tab');
|
|
||||||
for (let i = 0; i < tabButtons.length; i++) {
|
|
||||||
tabButtons[i].addEventListener('click', function (event) {
|
|
||||||
|
|
||||||
let tabGroup = this.dataset.tabsGroup;
|
|
||||||
let tabId = this.dataset.tabsId;
|
|
||||||
let tabToShow = document.querySelector('[data-tabs-tab][data-tabs-group="'+tabGroup+'"][data-tabs-id="'+tabId+'"]');
|
|
||||||
|
|
||||||
hideTabs(this.dataset.tabsId, this.dataset.tabsGroup); /* Hide all other tabs in the group */
|
|
||||||
tabToShow.classList.remove("hide"); /* Show the tab that's been selected */
|
|
||||||
otherTabTasks(tabToShow, tabGroup, tabId); /* Do anything else that's needed, as to keep the main loop clean(ish) */
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// When id=0 it's the default, so tab=1, OR tabs-active
|
|
||||||
// group=0 also default to ALL the tabgroups, not just one specified
|
|
||||||
function hideTabs(id=0, group=0){
|
|
||||||
// Hide all tabs but those I don't wanna
|
|
||||||
let query = '[data-tabs-tab][data-tabs-id]';
|
|
||||||
if(group == 0){
|
|
||||||
// Tabs that aren't default
|
|
||||||
query +=':not([data-tabs-default])';
|
|
||||||
}else{
|
|
||||||
// Tabs in group (filtered in loop via their id)
|
|
||||||
query +='[data-tabs-group="'+group+'"]';
|
|
||||||
}
|
|
||||||
let tabs = document.querySelectorAll(query);
|
|
||||||
for (let i = 0; i < tabs.length; i++) {
|
|
||||||
if(id == 0){
|
|
||||||
tabs[i].classList.add("hide");
|
|
||||||
}
|
|
||||||
if(id != 0 && tabs[i].dataset.tabsId != id){
|
|
||||||
tabs[i].classList.add("hide");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// On page load, display:none all the tabs that shouldn't be shown
|
|
||||||
// Done in JS, so if it's disabled, etc. users will see all the data (despite how ugly)
|
|
||||||
hideTabs();
|
|
||||||
|
|
||||||
function otherTabTasks(tabToShow, tabGroup, tabId){
|
|
||||||
// This should be streamlined I reckon
|
|
||||||
if(tabGroup == 'servers'){
|
|
||||||
|
|
||||||
document.getElementById('servers').classList.remove('servers-bg--mc', 'servers-bg--factorio');
|
|
||||||
|
|
||||||
if(tabId == 'minecraft'){
|
|
||||||
document.getElementById('servers').classList.add('servers-bg--mc');
|
|
||||||
}
|
|
||||||
else if(tabId == 'factorio'){
|
|
||||||
document.getElementById('servers').classList.add('servers-bg--factorio');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Uh oh, loop each 'button' in the ul and have only the current one be 'selected'
|
|
||||||
// Will need to unjank this, but it works on the design in HTML. Will likely want to do some changes
|
|
||||||
let query = '.button[data-tabs-button][data-tabs-group="'+tabGroup+'"]';
|
|
||||||
let buttons = document.querySelectorAll(query);
|
|
||||||
for (let i = 0; i < buttons.length; i++) {
|
|
||||||
if(buttons[i].dataset.tabsId == tabId){
|
|
||||||
buttons[i].classList.add("button--blue");
|
|
||||||
}else{
|
|
||||||
buttons[i].classList.remove("button--blue");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
/* Links */
|
|
||||||
a{
|
|
||||||
color: $color-link;
|
|
||||||
display: inline-block;
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-link--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
filter: brightness($hover-brightness);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active {
|
|
||||||
filter: brightness($active-brightness);
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
@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 }
|
|
||||||
|
|
||||||
|
|
||||||
html{
|
|
||||||
font-size: $font-size; /* rem based on this (root element), em is based on the parent element of wherever the change is */
|
|
||||||
// @include media($media-xl){ font-size: 1vw; } /* (Potential) for better responsive scaling on larger monitors. Trying out */
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: $color-background;
|
|
||||||
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... */
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background: $color-background--dark;
|
|
||||||
color: $color-text--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// On very small screens allow the text to completetly distort itself to fit on the page
|
|
||||||
*{
|
|
||||||
overflow-wrap: anywhere;
|
|
||||||
@include media($media-xs){
|
|
||||||
overflow-wrap: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,224 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
@use "sass:math";
|
|
||||||
|
|
||||||
/* 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) */
|
|
||||||
|
|
||||||
|
|
||||||
// Add the content to whichever col-xx-xx
|
|
||||||
@mixin col-width($width: 100%) {
|
|
||||||
flex: 0 0 $width* 1%; // *1% just to make it a % value, #{$width}% wasn't working
|
|
||||||
max-width: $width * 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add all the cols 1..12 of -xs -md -xl, etc. to stylesheet/media without needing to copy/paste or mass modify
|
|
||||||
// Just convienient
|
|
||||||
@mixin add-cols($modifier: ''){ // $modifier: '-md', etc.
|
|
||||||
$max-cols: 12;
|
|
||||||
$col-width: math.div(100,$max-cols); // 100/12 = 8.33% Then multiply this by the current col count 1..12
|
|
||||||
|
|
||||||
@for $i from 1 through 12 {
|
|
||||||
$width: $col-width * $i;
|
|
||||||
.col#{$modifier}-#{$i} {
|
|
||||||
@include col-width($width);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.container{
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 100%;
|
|
||||||
max-width: $width-content;
|
|
||||||
padding: rems(22px) rems(16px);
|
|
||||||
position: relative; // Default static doesn't like inverse margins atop other block elements
|
|
||||||
/* 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;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-direction: row;
|
|
||||||
row-gap: rems(19px); /* In-case of flex-wrap content, space it out. Padding left+right */
|
|
||||||
|
|
||||||
// margin-right: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
|
|
||||||
// margin-left: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
|
|
||||||
margin-right: #{$grid-gap--numeric * -.5}rem;
|
|
||||||
margin-left: #{$grid-gap--numeric * -.5}rem;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.row+.row{
|
|
||||||
margin-top: rems(22px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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, .col iframe{
|
|
||||||
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: $grid-gap; /* ~20px gap = 20/16(OLD html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */
|
|
||||||
// padding-left: $grid-gap; /* In place of gap, so it can be full width rows */
|
|
||||||
padding-right: #{$grid-gap--numeric * .5}rem;
|
|
||||||
padding-left: #{$grid-gap--numeric * .5}rem;
|
|
||||||
|
|
||||||
/* display: flex; */
|
|
||||||
/* flex-wrap: wrap; */
|
|
||||||
min-height: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.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: $color-text transparent;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
padding-bottom: rems(8px);
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
scrollbar-color: $color-text--dark transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.row--scroll [class^="col"]{}
|
|
||||||
|
|
||||||
.col{ flex: 0 1 auto; } // Just allow shrink, no grow
|
|
||||||
|
|
||||||
// Default cols to 100% width when below $media-xs (base 360px)
|
|
||||||
.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%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media($media-xs) {
|
|
||||||
|
|
||||||
// Once a breakpoint has been hit, cols will behave regularly,
|
|
||||||
// but will be overwritten/cascaded by their xs,md,lg, etc. counterparts
|
|
||||||
// This is duplicated at md, as the 'default' col will be medium, needed here in-case people just
|
|
||||||
// use .col-4, etc. as an end-all be-all
|
|
||||||
@include add-cols('');
|
|
||||||
.col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
|
|
||||||
// Now the actual xs styling
|
|
||||||
@include add-cols('-xs');
|
|
||||||
|
|
||||||
.hidden-xs { display: none }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media($media-sm) {
|
|
||||||
|
|
||||||
// THINK .col-3 will need to be re-cascaded each time, otherwise the sm/md will overwrite for ever
|
|
||||||
// if it's recascaded here for instance, any .col-xs that have .col- will be replaced by the (default) col size
|
|
||||||
@include add-cols('');
|
|
||||||
|
|
||||||
/* (100/12) * x = the flex % */
|
|
||||||
@include add-cols('-sm');
|
|
||||||
|
|
||||||
.hidden-sm { display: none }
|
|
||||||
|
|
||||||
// Any overwrites for previous sizes (as using min-width by preference)
|
|
||||||
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
||||||
// IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too?
|
|
||||||
// but then I guess I'd need a 'show-md' etc, which has the same problem...
|
|
||||||
.hidden-xs { display: unset }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media($media-md){
|
|
||||||
|
|
||||||
/* (100/12) * x = the flex % */
|
|
||||||
// Medium AND .col-4 over-ridden for the 2nd time, as medium is to be the default 'col' size
|
|
||||||
@include add-cols('');
|
|
||||||
@include add-cols('-md');
|
|
||||||
|
|
||||||
.hidden-md { display: none }
|
|
||||||
|
|
||||||
// Any overwrites for previous sizes (as using min-width by preference)
|
|
||||||
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
||||||
.hidden-xs, .hidden-sm { display: unset }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media($media-lg) {
|
|
||||||
|
|
||||||
// Col DOESN'T Need to be redone here as it's medium default. If a lg/xl are set, that SHOULD overwrite
|
|
||||||
// each time. So should be good. Reckon I need mixins/functions to replicate this grid though, as it's a
|
|
||||||
// little uhhhh, jank and repetative atm
|
|
||||||
/* (100/12) * x = the flex % */
|
|
||||||
@include add-cols('-lg');
|
|
||||||
|
|
||||||
.hidden-lg { display: none }
|
|
||||||
|
|
||||||
// Any overwrites for previous sizes (as using min-width by preference)
|
|
||||||
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
||||||
.hidden-xs, .hidden-sm, .hidden-md { display: unset }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media($media-xl) {
|
|
||||||
|
|
||||||
/* (100/12) * x = the flex % */
|
|
||||||
@include add-cols('-xl');
|
|
||||||
|
|
||||||
.hidden-xl { display: none }
|
|
||||||
|
|
||||||
// Any overwrites for previous sizes (as using min-width by preference)
|
|
||||||
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
||||||
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: unset }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// These things may want to have an indivual xs,md,lg, etc. as well, but for now, leaving...
|
|
||||||
|
|
||||||
/* 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;}
|
|
||||||
.row--justify-center{ justify-content: 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,28 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
/* Images */
|
|
||||||
figure {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure figcaption {
|
|
||||||
color: $color-text;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-text--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
section img,
|
|
||||||
article img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image--center{
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
@use 'thanks';
|
|
||||||
|
|
||||||
@use 'reset';
|
|
||||||
@use 'base';
|
|
||||||
@use 'grid';
|
|
||||||
|
|
||||||
@use 'typography';
|
|
||||||
@use 'anchor';
|
|
||||||
@use 'image';
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
/* Box sizing rules */
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Prevent font size inflation */
|
|
||||||
html{
|
|
||||||
-moz-text-size-adjust: none;
|
|
||||||
-webkit-text-size-adjust: none;
|
|
||||||
text-size-adjust: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove default margin in favour of better control in authored CSS */
|
|
||||||
body, h1, h2, h3, h4, p,
|
|
||||||
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{
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Set core body defaults */
|
|
||||||
body{
|
|
||||||
min-height: 100vh;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* A elements that don't have a class get default styles */
|
|
||||||
a:not([class]){
|
|
||||||
text-decoration-skip-ink: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make images easier to work with */
|
|
||||||
img,
|
|
||||||
picture{
|
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inherit fonts for inputs and buttons */
|
|
||||||
input, button,
|
|
||||||
textarea, select{
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make sure textareas without a rows attribute are not tiny */
|
|
||||||
textarea:not([rows]){
|
|
||||||
min-height: 10em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Anything that has been anchored to should have extra scroll margin */
|
|
||||||
:target{
|
|
||||||
scroll-margin-block: 5ex;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul, ol{
|
|
||||||
padding: 0;
|
|
||||||
list-style-position: inside;
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
// With CSS inspired or taken from:
|
|
||||||
// https://github.com/andybrewer/mvp
|
|
||||||
// https://piccalil.li/blog/a-more-modern-css-reset/
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
p {
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
p+p, h1+p{ /* Para after para should space out */
|
|
||||||
margin-top: rems(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Set shorter line heights on headings and interactive elements */
|
|
||||||
h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5 h6,.h6,
|
|
||||||
button, input, label{
|
|
||||||
line-height: 1.35;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Balance text wrapping on headings */
|
|
||||||
h1, h2, h3, h4, h5, h6{
|
|
||||||
text-wrap: balance;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, .h1{
|
|
||||||
font-size: rems(30px);
|
|
||||||
margin-bottom: rems(18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
|
|
||||||
padding: rems(2px);
|
|
||||||
background: $color-highlight;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background: $color-highlight--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
color: $color-text;
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-text--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
hr{
|
|
||||||
background-color: $color-background--dark; // Dark by default so it is shown
|
|
||||||
border: none;
|
|
||||||
height: 1px; // Doesn't need to be rem's y'kno
|
|
||||||
width: 100%;
|
|
||||||
max-width: $width-content;
|
|
||||||
margin: rems(24px) auto;
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-background;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
details {
|
|
||||||
margin: .7rem 0;
|
|
||||||
}
|
|
||||||
details summary {
|
|
||||||
margin-bottom: .8rem;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
@use "sass:color";
|
|
||||||
|
|
||||||
// Alerts
|
|
||||||
.alert{
|
|
||||||
background: color.adjust($color-tertiary, $saturation: -25%);
|
|
||||||
border-left: 4px solid $color-tertiary;
|
|
||||||
border-right: 4px solid $color-tertiary;
|
|
||||||
padding: .1rem .8rem;
|
|
||||||
margin-bottom:.5rem;
|
|
||||||
color: $color-background;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-tertiary--dark;
|
|
||||||
border-color: $color-secondary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.alert--error{
|
|
||||||
background: color.adjust($color-fail, $saturation: -25%);
|
|
||||||
border-color: $color-fail;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-tertiary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.alert--warning{
|
|
||||||
background: color.adjust($color-warning, $saturation: -25%);
|
|
||||||
border-color: $color-warning;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-tertiary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.alert--success{
|
|
||||||
background: color.adjust($color-success, $saturation: -25%);
|
|
||||||
border-color: $color-success;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-tertiary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
.banner{
|
|
||||||
width: 100%;
|
|
||||||
background: $color-primary;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background: $color-primary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
/* Buttons/Inputs */
|
|
||||||
.button,
|
|
||||||
button,
|
|
||||||
input[type="submit"]
|
|
||||||
{
|
|
||||||
color: $color-background;
|
|
||||||
background: $color-link;
|
|
||||||
border: 2px solid $color-accent;
|
|
||||||
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;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-link--dark;
|
|
||||||
border-color: $color-accent--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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-background;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
border-color: $color-link--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--disabled,
|
|
||||||
button:disabled,
|
|
||||||
input:disabled {
|
|
||||||
background: $color-text-secondary;
|
|
||||||
border-color: $color-text-secondary;
|
|
||||||
color: $color-tertiary;
|
|
||||||
cursor: not-allowed;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-text-secondary--dark;
|
|
||||||
border-color: $color-text-secondary--dark;
|
|
||||||
color: $color-tertiary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.button--disabled:hover,
|
|
||||||
button[disabled]:hover,
|
|
||||||
input[type="submit"][disabled]:hover {
|
|
||||||
filter: none;
|
|
||||||
}
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
@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: rems(1px) solid $color-tertiary;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
// box-shadow: $box-shadow $color-tertiary;
|
|
||||||
// padding: rems(24px);
|
|
||||||
background: $color-background;
|
|
||||||
|
|
||||||
// display: block !important; /* Unset row/col default */
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
border-color: $color-tertiary--dark;
|
|
||||||
// box-shadow: $box-shadow $color-tertiary--dark;
|
|
||||||
background: $color-background--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.card:hover {
|
|
||||||
box-shadow: $box-shadow $color-primary;
|
|
||||||
border-color: $color-primary;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
border-color: $color-primary--dark;
|
|
||||||
box-shadow: $box-shadow $color-primary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.card__header, .card__body, .card__footer{
|
|
||||||
padding: rems(24px);
|
|
||||||
}
|
|
||||||
.card__header{
|
|
||||||
background-color: $color-secondary;
|
|
||||||
}
|
|
||||||
.card__image{}
|
|
||||||
.card__image--top{}
|
|
||||||
.card__title{
|
|
||||||
font-size: rems(26px);
|
|
||||||
}
|
|
||||||
.card__body{
|
|
||||||
height: 100%; // Fill up the space of a card that's stretched
|
|
||||||
}
|
|
||||||
.card__text{}
|
|
||||||
* + .card__text{
|
|
||||||
margin-top: rems(10px);
|
|
||||||
}
|
|
||||||
.card__footer{
|
|
||||||
margin-top: auto; // Be at bottom of flexed card
|
|
||||||
background-color: $color-primary;
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
@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;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-accent--dark;
|
|
||||||
color: $color-text--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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 $color-text;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-accent--dark;
|
|
||||||
color: $color-text--dark;
|
|
||||||
border-color: $color-text--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
section pre {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
@ -1,192 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
form {
|
|
||||||
display: block;
|
|
||||||
text-align: $justify-normal;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
border-color: $color-text-secondary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
form header {
|
|
||||||
margin: 1.5rem 0;
|
|
||||||
padding: 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
label,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
display: block;
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
color: $color-text-secondary;
|
|
||||||
margin-bottom: rems(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
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-text-secondary;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
padding: rems(6px) rems(13px); //0.4rem 0.8rem;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
border-color: $color-text-secondary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"],
|
|
||||||
input[type="password"],
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
background-color: $color-background;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[readonly],
|
|
||||||
textarea[readonly] {
|
|
||||||
background-color: $color-text-secondary;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-text-secondary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// This is weird, needs work
|
|
||||||
input[type="color"]{
|
|
||||||
padding: rems(4.5px) rems(13px);
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
select{
|
|
||||||
-webkit-appearance: menulist-button;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
input::placeholder
|
|
||||||
, select option[value=""], select:invalid
|
|
||||||
,textarea::placeholder
|
|
||||||
{
|
|
||||||
color: $color-text-secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Fancy inputs
|
|
||||||
.input-group{
|
|
||||||
@include flex();
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
// They're the same atm, but use prepend for start, and append for end as I may change them to be different
|
|
||||||
.input-group__prepend, .input-group__append{
|
|
||||||
@include flex();
|
|
||||||
flex: 1 0 auto; // To make the full content be shown
|
|
||||||
|
|
||||||
// To allow for dropdowns, etc. as pre/append content
|
|
||||||
.input-group__content{
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group__content{
|
|
||||||
@include flex();
|
|
||||||
align-items: center;
|
|
||||||
padding: rems(8px);
|
|
||||||
text-align: center;
|
|
||||||
background: $color-primary;
|
|
||||||
color: $color-background;
|
|
||||||
}
|
|
||||||
.input-group__prepend .input-group__content{
|
|
||||||
border-top-left-radius: $border-radius;
|
|
||||||
border-bottom-left-radius: $border-radius;
|
|
||||||
}
|
|
||||||
.input-group__append .input-group__content{
|
|
||||||
border-top-right-radius: $border-radius;
|
|
||||||
border-bottom-right-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove the border left/right on inputs related to ap/prepends
|
|
||||||
.input-group__prepend + .input-group__input{
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// input directly before a pre/append
|
|
||||||
.input-group__input:has(+.input-group__append){
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// WIP
|
|
||||||
// Checkbox/Radio
|
|
||||||
// custom-radio, custom-checkbox
|
|
||||||
$inputSize: remsNumeric(18);
|
|
||||||
$checkboxIcon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
|
|
||||||
.custom-checkbox:hover{
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.custom-checkbox label{
|
|
||||||
padding-left: $inputSize*1.5rem;
|
|
||||||
}
|
|
||||||
.custom-checkbox input{
|
|
||||||
// display: none;
|
|
||||||
}
|
|
||||||
.custom-checkbox label::after{
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: .25rem;
|
|
||||||
left: 0;
|
|
||||||
display: block;
|
|
||||||
width: #{$inputSize}rem;
|
|
||||||
height: #{$inputSize}rem;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: 50% 50%;
|
|
||||||
}
|
|
||||||
.custom-checkbox input:checked~label::after{
|
|
||||||
background-image: $checkboxIcon;
|
|
||||||
background-color: blue;
|
|
||||||
}
|
|
||||||
.custom-checkbox label::before{
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: .25rem;
|
|
||||||
left: 0;
|
|
||||||
display: block;
|
|
||||||
width: #{$inputSize}rem;
|
|
||||||
height: #{$inputSize}rem;
|
|
||||||
pointer-events: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
background-color: #dee2e6;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Then kinda same for custom-radio
|
|
||||||
// input:checked~label::before{
|
|
||||||
// background-color: green;
|
|
||||||
// }
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
.hero{
|
|
||||||
padding: rems(48px) 0;
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
@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 */
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
@use 'button';
|
|
||||||
@use 'card';
|
|
||||||
@use 'form';
|
|
||||||
@use 'alert';
|
|
||||||
@use 'list';
|
|
||||||
@use 'modal';
|
|
||||||
@use 'quote';
|
|
||||||
@use 'table';
|
|
||||||
@use 'tag';
|
|
||||||
@use 'code';
|
|
||||||
@use 'banner';
|
|
||||||
@use 'accordion';
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
/* Popups */
|
|
||||||
.modal{
|
|
||||||
border: 1px solid $color-text-secondary;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
box-shadow: $box-shadow $color-text;
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 50%;
|
|
||||||
z-index: 999;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
border-color: $color-text-secondary--dark;
|
|
||||||
box-shadow: $color-text--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
/* Quotes */
|
|
||||||
blockquote {
|
|
||||||
display: block;
|
|
||||||
font-size: x-large;
|
|
||||||
line-height: $line-height;
|
|
||||||
margin: 1rem auto;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1.5rem 1rem;
|
|
||||||
text-align: $justify-important;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote footer{
|
|
||||||
color: $color-tertiary;
|
|
||||||
display: block;
|
|
||||||
font-size: small;
|
|
||||||
line-height: $line-height;
|
|
||||||
padding: 1.5rem 0;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-tertiary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
/* Tables */
|
|
||||||
.table-container{
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
border: 1px solid $color-text-secondary;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
border-spacing: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
text-align: left;
|
|
||||||
border-collapse: collapse;
|
|
||||||
overflow-wrap: normal;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
border-color: $color-text-secondary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table td,
|
|
||||||
table th,
|
|
||||||
table tr {
|
|
||||||
padding: 0.4rem 0.8rem;
|
|
||||||
text-align: $justify-important;
|
|
||||||
}
|
|
||||||
|
|
||||||
table thead tr {
|
|
||||||
background-color: $color-secondary;
|
|
||||||
/* border-radius: $border-radius; */
|
|
||||||
color: $color-background;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-secondary--dark;
|
|
||||||
color: $color-background--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table thead tr {
|
|
||||||
border-top-left-radius: $border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:nth-child(even) {
|
|
||||||
background-color: $color-accent;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-text-secondary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tbody tr:nth-child(odd) {
|
|
||||||
background-color: $color-background;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-background--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
/* Tags */
|
|
||||||
.tag{
|
|
||||||
background-color: $color-secondary;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
color: $color-background;
|
|
||||||
font-size: xx-small;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 0.2rem 1rem;
|
|
||||||
position: relative;
|
|
||||||
top:-2px;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-secondary--dark;
|
|
||||||
color: $color-background--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag--border{
|
|
||||||
color: $color-text;
|
|
||||||
background-color: $color-background;
|
|
||||||
border: rems(1px) solid $color-secondary--dark;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-text--dark;
|
|
||||||
background-color: $color-background--dark;
|
|
||||||
border-color: $color-secondary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
/* Misc helpers */
|
|
||||||
.tar{ text-align: right; }
|
|
||||||
.tac{ text-align: center; }
|
|
||||||
.tal{ text-align: left; }
|
|
||||||
|
|
||||||
.no-padd{ padding: 0; }
|
|
||||||
|
|
||||||
.hide{ display: none; }
|
|
||||||
|
|
||||||
.mobile{ display: block; }
|
|
||||||
.desktop{ display: none; }
|
|
||||||
@include media($media-md){
|
|
||||||
.mobile{ display: none; }
|
|
||||||
.desktop{ display: block; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.nowrap{
|
|
||||||
-ms-flex-wrap: nowrap;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
.footer{
|
|
||||||
background-color: $color-primary;
|
|
||||||
color: $color-text;
|
|
||||||
border-top: 1px solid $color-text;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-primary--dark;
|
|
||||||
color: $color-text--dark;
|
|
||||||
border-color: $color-text--dark
|
|
||||||
}
|
|
||||||
|
|
||||||
a{
|
|
||||||
color: $color-background;
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-background--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-footer{
|
|
||||||
background-color: $color-tertiary;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-tertiary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sub-footer .container{
|
|
||||||
padding-top: rems(3px);
|
|
||||||
padding-bottom: rems(3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.website-by{
|
|
||||||
font-size: rems(12px);
|
|
||||||
font-family: monospace;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 rems(2px);
|
|
||||||
padding: 0 rems(9px);
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
.site-title{
|
|
||||||
color: $color-secondary;
|
|
||||||
background: -webkit-linear-gradient(45deg, $color-primary, $color-text);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background: -webkit-linear-gradient(45deg, $color-primary--dark, $color-text--dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.site-title--header{
|
|
||||||
// height: 80px; /* To fake what it would look like with an image */
|
|
||||||
font-size: rems(30px);
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header{
|
|
||||||
background-color: $color-primary;
|
|
||||||
padding: rems(10px) 0;
|
|
||||||
|
|
||||||
@include color-scheme(dark) { color: $color-primary--dark; }
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
@use 'header';
|
|
||||||
@use 'footer';
|
|
||||||
@use 'nav';
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
$nav-spacer: rems(20px);
|
|
||||||
|
|
||||||
/* Nav */
|
|
||||||
.nav{
|
|
||||||
// background-color: $color-background;
|
|
||||||
// @include color-scheme(dark) { color: $color-background--dark; }
|
|
||||||
}
|
|
||||||
.nav a{
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.nav a{
|
|
||||||
color: $color-background;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
color: $color-background--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-list{
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin-left: -#{rems(10px)}; /* To offset the start of li margin. Little jank */
|
|
||||||
}
|
|
||||||
|
|
||||||
// .nav-list li,
|
|
||||||
.nav-list__item{
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: rems(10px);
|
|
||||||
position: relative;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
// .nav-list>li,
|
|
||||||
.nav-list>.nav-list__item{ /* 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 */
|
|
||||||
|
|
||||||
}
|
|
||||||
.nav-list>.nav-list__item>a{ /* Only affects first level li */
|
|
||||||
padding: rems(10px) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
|
|
||||||
// .nav-list li:hover ul,
|
|
||||||
.nav-list__item:hover .nav-list__item__dropdown{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-list__item__dropdown{
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
border-top: rems(10px) solid transparent; // To have it padded further down (if wanted)
|
|
||||||
z-index: $z-above;
|
|
||||||
|
|
||||||
/* Centre */
|
|
||||||
// left: 50%;
|
|
||||||
// transform: translate(-50%, 0);
|
|
||||||
/* Left */
|
|
||||||
left: 0;
|
|
||||||
/* Right */
|
|
||||||
// transform: translate(-50%, 0);
|
|
||||||
}
|
|
||||||
// .nav-list li ul,
|
|
||||||
.nav-list__item__dropdown__content{
|
|
||||||
background: $color-background;
|
|
||||||
border-top: 2px solid $color-primary;
|
|
||||||
// border-radius: $border-radius;
|
|
||||||
// display: none;
|
|
||||||
height: auto;
|
|
||||||
padding: .5rem 1rem;
|
|
||||||
|
|
||||||
// position: absolute;
|
|
||||||
white-space: nowrap;
|
|
||||||
width: auto;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background-color: $color-background--dark;
|
|
||||||
border-color: $color-secondary--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// .nav-list li ul li, .nav-list li ul li a,
|
|
||||||
.nav-list__item__dropdown__item, .nav-list__item__dropdown__item a{
|
|
||||||
display: block;
|
|
||||||
color: $color-text;
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
// 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';
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
// Page specific stuff
|
|
||||||
@use 'error/error';
|
|
||||||
@use 'testing';
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
@use '../utilities/main_utilities' as *;
|
|
||||||
// CSS Styling for test page, before standardising and making mixins/modules/components for the bits
|
|
||||||
|
|
||||||
.image-over-block{}
|
|
||||||
.image-over-block__block{
|
|
||||||
// remsFromPercent as design uses 1300px container, I'm using 1080 atm
|
|
||||||
padding: #{remsFromPercent(8.4)}rem #{remsFromPercent(10.7)}rem !important; // .important to prio over row [class^=col] for now
|
|
||||||
background-color: lightblue;
|
|
||||||
}
|
|
||||||
.image-over-block__image{
|
|
||||||
position: absolute;
|
|
||||||
bottom:50%;
|
|
||||||
transform: translate(0, 50%);
|
|
||||||
right:0;
|
|
||||||
|
|
||||||
@include media($media-lg){
|
|
||||||
bottom:-20%;
|
|
||||||
transform: translate(0, -20%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag--social{
|
|
||||||
border-radius: 999px; padding: 3px 6px; font-size: 16px; height: 24px; width: 24px;
|
|
||||||
top: 0; overflow: hidden; text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sf-header{
|
|
||||||
border-bottom: 1px solid green; padding-top: 18px;padding-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.slide__dots{
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.slide-dot, .swiper-pagination-bullet{
|
|
||||||
display: inline-block; width: 16px; height: 16px;
|
|
||||||
border:1px solid transparent; border-radius: 999px; position: relative;
|
|
||||||
}
|
|
||||||
.slide-dot__inner, .swiper-pagination-bullet{
|
|
||||||
width: 8px; height: 8px; background-color: grey; border-radius: 999px;
|
|
||||||
position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
.slide-dot--active, .swiper-pagination-bullet-active{
|
|
||||||
border-color: black;
|
|
||||||
}
|
|
||||||
.slide-dot--active .slide-dot__inner, .swiper-pagination-bullet-active .slide-dot__inner{
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Gallery
|
|
||||||
.gallery-fancy{
|
|
||||||
height: 300px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.gallery-fancy--show{
|
|
||||||
height: auto;
|
|
||||||
overflow: unset;
|
|
||||||
}
|
|
||||||
.gallery-fancy:before{
|
|
||||||
content:"";
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 10%;
|
|
||||||
background: linear-gradient(360deg, #f8f9fa, transparent);
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
.gallery-fancy--show:before{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.gallery-fancy .col img{
|
|
||||||
margin-top: 8px;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Team
|
|
||||||
.team-block{
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
.team-block__image{
|
|
||||||
margin-bottom: 20px; border-radius: 15px; width: 100%;
|
|
||||||
}
|
|
||||||
.team-block__name{
|
|
||||||
margin-bottom: 8px; font-size: 26px; line-height: 28px; color: #242322;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.team-block__role{
|
|
||||||
font-size: 18px; font-weight: bold; line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(min-width: 768px){
|
|
||||||
.team-block{
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
.team-block__image{
|
|
||||||
margin-bottom: 24px; border-radius: 15px;
|
|
||||||
}
|
|
||||||
.team-block__name{
|
|
||||||
margin-bottom: 10px; font-size: 30px; line-height: 32px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Use above another container where elements are supposed to be off the page on higher screen width
|
|
||||||
.container-overflow{
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-overflow .container{
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
@use '../../utilities/main_utilities' as *;
|
|
||||||
|
|
||||||
.body--error{
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
height: 100% !important;
|
|
||||||
background: $color-background;
|
|
||||||
color: $color-text;
|
|
||||||
|
|
||||||
@include color-scheme(dark) {
|
|
||||||
background: $color-background--dark;
|
|
||||||
color: $color-text--dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-title{
|
|
||||||
font-size: 40px;
|
|
||||||
@include media($media-sm) { font-size: 80px; }
|
|
||||||
}
|
|
||||||
.error-text{
|
|
||||||
margin-top: 20px;
|
|
||||||
@include media($media-sm) { margin-top: 40px; }
|
|
||||||
}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
@forward 'variables';
|
|
||||||
@forward 'mixins';
|
|
||||||
@forward 'functions';
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
@mixin reset {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// @include color-scheme() {}
|
|
||||||
@mixin color-scheme($value: dark) {
|
|
||||||
@if $color-schemes {
|
|
||||||
@media (prefers-color-scheme: $value) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// @include media($media-lg) {}
|
|
||||||
@mixin media($value: $media-md) {
|
|
||||||
@media (min-width: $value) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add mixins for flex, etc. Anything that needs -webkit-, etc...
|
|
||||||
@mixin flex(){
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -moz-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
@use "sass:math";
|
|
||||||
|
|
||||||
// Variables
|
|
||||||
$color-schemes: false; // true/false, to enable/disable light/dark colour themes. All default styling is for 'light'
|
|
||||||
|
|
||||||
// Basis of sizes
|
|
||||||
$font-size--numeric: 18;
|
|
||||||
$font-size: 18px; //#{$font-size--numeric}px;
|
|
||||||
$container: 1080;
|
|
||||||
|
|
||||||
// Try to use rems for everything, including %s (besides for cols, and widths within rows)
|
|
||||||
// Rems function, circular @uses errors, so here for time being unless I make an intermediary file
|
|
||||||
@function rems($targetSize){
|
|
||||||
$remSize: math.div($targetSize,$font-size);
|
|
||||||
@return #{$remSize}rem; // e.g. 16/20px = 0.8rems
|
|
||||||
}
|
|
||||||
// Additional calc in numerics as SASS maths is jank with px,rems, etc...
|
|
||||||
@function remsNumeric($targetSize){
|
|
||||||
$remSize: math.div($targetSize, $font-size--numeric);
|
|
||||||
@return $remSize;
|
|
||||||
}
|
|
||||||
@function remsFromPercent($targetPercentage){
|
|
||||||
$pixels: math.div($targetPercentage, 100)*$container;
|
|
||||||
@return remsNumeric($pixels); // Then rem the pixel %
|
|
||||||
}
|
|
||||||
|
|
||||||
@function vws($targetSize){ // Maybe use, leaving for now
|
|
||||||
// 100vw = 100% size of view. Calculations BASED on 1920
|
|
||||||
$single: 1920/100; // 1vw = 19.2(px), use the largest of rems/vws
|
|
||||||
// 8/18 = 0.44. May not be needed, could just max(0.44rem, 0.44vw) and that may work?
|
|
||||||
}
|
|
||||||
|
|
||||||
// Specific sizes for media query, prolly not going to use rems here
|
|
||||||
$media-xs: 360px;
|
|
||||||
$media-sm: 540px;
|
|
||||||
$media-md: 768px;
|
|
||||||
$media-lg: 1000px;
|
|
||||||
$media-xl: 1200px;
|
|
||||||
|
|
||||||
// Other variables, any sizes should be rems (use rems function, basic targetSize/fontSize)
|
|
||||||
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
||||||
|
|
||||||
$active-brightness: .85;
|
|
||||||
$hover-brightness: 1.2;
|
|
||||||
|
|
||||||
$border-radius: rems(8px);
|
|
||||||
$box-shadow: 0 rems(1px) rems(6px);
|
|
||||||
|
|
||||||
$justify-important: center;
|
|
||||||
$justify-normal: left;
|
|
||||||
$line-height: 1.5;
|
|
||||||
$width-content: #{remsNumeric($container)}rem;
|
|
||||||
$grid-gap--numeric: remsNumeric(15); // The gap between grid columns (15px = 7.5px either side)
|
|
||||||
|
|
||||||
|
|
||||||
// Colours
|
|
||||||
$color-primary: #118bee; $color-primary-dark: #0c5fa2;
|
|
||||||
$color-secondary: #a7e09a; $color-secondary--dark: #429b32;
|
|
||||||
$color-tertiary: #294fb7; $color-tertiary--dark: #114a70;
|
|
||||||
$color-background: #f8f9fa; $color-background--dark: #333;
|
|
||||||
$color-text: #1e1e1e; $color-text--dark: #f7f7f7;
|
|
||||||
$color-text-secondary: #868686; $color-text-secondary--dark: #555;
|
|
||||||
$color-link: #118bee; $color-link--dark: #007acb;
|
|
||||||
$color-success: #18ab34;
|
|
||||||
$color-fail: #e90d30;
|
|
||||||
$color-warning: #ddde11;
|
|
||||||
$color-highlight: #ff8c00; $color-highlight--dark: #a3600d;
|
|
||||||
|
|
||||||
$color-accent: $color-text--dark; $color-accent--dark: $color-text;
|
|
||||||
|
|
||||||
// Z-indexes
|
|
||||||
$z-behind: 0;
|
|
||||||
$z-normal: 1;
|
|
||||||
$z-above: 10;
|
|
||||||
$z-top: 100;
|
|
||||||
Loading…
Reference in New Issue