Add all current work
Nathan Steel
9 months ago
parent
7edade7bac
commit
07a102bcf7
@ -0,0 +1,208 @@
|
|||||||
|
/* 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;
|
||||||
|
}
|
||||||
@ -0,0 +1,503 @@
|
|||||||
|
/* 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;
|
||||||
|
}
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set shorter line heights on headings and interactive elements */
|
||||||
|
h1, h2, h3, h4, h5, h6,
|
||||||
|
button, input, label {
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Balance text wrapping on headings */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
// 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(); });
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
// 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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue