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

Compare commits

base: nathan:b0b4dda4a1d9aae1ce5cbf2c007ac6e10822288c
Branches Tags
nathan:feature/WIP
nathan:develop
nathan:main
..
compare: nathan:a0dc973723a1297fa69120e93e61b0ae4b205af2
Branches Tags
nathan:feature/WIP
nathan:develop
nathan:main

No commits in common. 'b0b4dda4a1d9aae1ce5cbf2c007ac6e10822288c' and 'a0dc973723a1297fa69120e93e61b0ae4b205af2' have entirely different histories.
b0b4dda4a1 ... a0dc973723

23 changed files with 64 additions and 378 deletions
Show Stats

2
.gitignore vendored
Unescape Escape View File

@ -1,2 +0,0 @@
css/

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

@ -6,10 +6,6 @@ a{
display: inline-block;
font-weight: bold;
text-decoration: underline;
@include color-scheme(dark) {
color: $color-link--dark;
}
}
a:hover {

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

@ -17,9 +17,4 @@ body {
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-bg--dark;
color: $color-text--dark;
}
}

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

@ -80,13 +80,9 @@ html{
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-scrollbar transparent;
scrollbar-color: #444 transparent;
scrollbar-width: thin;
padding-bottom: .5rem;
@include color-scheme(dark) {
scrollbar-color: $color-scrollbar--dark transparent;
}
}
.row--scroll [class^="col"]{
@ -96,58 +92,48 @@ html{
flex: 0 0 auto;
}
// 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{
.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
.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, example. Should be set independantly */
.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%; }
// Now the actual xs styling
.col-xs-1 { flex: 0 0 8.33% }
.col-xs-2 { flex: 0 0 16.66% }
.col-xs-3 { flex: 0 0 25% }
.col-xs-4 { flex: 0 0 33.33% }
.col-xs-5 { flex: 0 0 41.66% }
.col-xs-6 { flex: 0 0 50% }
.col-xs-7 { flex: 0 0 58.33% }
.col-xs-8 { flex: 0 0 66.66% }
.col-xs-9 { flex: 0 0 75% }
.col-xs-10 { flex: 0 0 83.33% }
.col-xs-11 { flex: 0 0 91.66% }
.col-xs-12 { flex: 0 0 100% }
.hidden-xs { display: none }
/* (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;
}
@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
@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, example. Should be set independantly */
.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%; }
@ -157,116 +143,19 @@ html{
.col-10 { flex: 0 0 83.33%; }
.col-11 { flex: 0 0 91.66%; }
.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-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 }
// 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
.col-md-1, .col-1 { flex: 0 0 8.33% }
.col-md-2, .col-2 { flex: 0 0 16.66% }
.col-md-3, .col-3 { flex: 0 0 25% }
.col-md-4, .col-4 { flex: 0 0 33.33% }
.col-md-5, .col-5 { flex: 0 0 41.66% }
.col-md-6, .col-6 { flex: 0 0 50% }
.col-md-7, .col-7 { flex: 0 0 58.33% }
.col-md-8, .col-8 { flex: 0 0 66.66% }
.col-md-9, .col-9 { flex: 0 0 75% }
.col-md-10, .col-10 { flex: 0 0 83.33% }
.col-md-11, .col-11 { flex: 0 0 91.66% }
.col-md-12, .col-12 { flex: 0 0 100% }
.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 % */
.col-lg-1 { flex: 0 0 8.33% }
.col-lg-2 { flex: 0 0 16.66% }
.col-lg-3 { flex: 0 0 25% }
.col-lg-4 { flex: 0 0 33.33% }
.col-lg-5 { flex: 0 0 41.66% }
.col-lg-6 { flex: 0 0 50% }
.col-lg-7 { flex: 0 0 58.33% }
.col-lg-8 { flex: 0 0 66.66% }
.col-lg-9 { flex: 0 0 75% }
.col-lg-10 { flex: 0 0 83.33% }
.col-lg-11 { flex: 0 0 91.66% }
.col-lg-12 { flex: 0 0 100% }
.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 }
.hidden-sm { display: block; }
}
@include media($media-xl) {
/* (100/12) * x = the flex % */
.col-xl-1 { flex: 0 0 8.33% }
.col-xl-2 { flex: 0 0 16.66% }
.col-xl-3 { flex: 0 0 25% }
.col-xl-4 { flex: 0 0 33.33% }
.col-xl-5 { flex: 0 0 41.66% }
.col-xl-6 { flex: 0 0 50% }
.col-xl-7 { flex: 0 0 58.33% }
.col-xl-8 { flex: 0 0 66.66% }
.col-xl-9 { flex: 0 0 75% }
.col-xl-10 { flex: 0 0 83.33% }
.col-xl-11 { flex: 0 0 91.66% }
.col-xl-12 { flex: 0 0 100% }
.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 }
@media only screen and (min-width: 60em) { /* ~960px */
}
// 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 */

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

@ -12,10 +12,6 @@ figure img {
figure figcaption {
color: $color-text-secondary;
@include color-scheme(dark) {
color: $color-text-secondary--dark;
}
}
section img,

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

@ -10,18 +10,11 @@ p+p, h1+p{ /* Para after para should space out */
mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
padding: 0.1rem;
background: $color-highlight;
@include color-scheme(dark) {
background: $color-highlight--dark;
}
background: #ff8c00;
}
small {
color: $color-text-secondary;
@include color-scheme(dark) {
color: $color-text-secondary--dark;
}
}
hr{
@ -31,7 +24,4 @@ hr{
width: 100%;
max-width: $width-content;
margin: .5rem auto;
@include color-scheme(dark) {
color: $color-bg-secondary--dark;
}
}

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

@ -1,5 +1,4 @@
@use '../utilities/main_utilities' as *;
@use "sass:color";
// Alerts
.alert{
@ -8,33 +7,16 @@
border-right: 4px solid $color-secondary;
padding: .1rem .8rem;
margin-bottom:.5rem;
@include color-scheme(dark) {
color: $color-secondary-accent--dark;
border-color: $color-secondary--dark;
}
}
.alert--error{
background: desaturate($alert-color--error, 40);
border-color: $alert-color--error;
@include color-scheme(dark) {
color: $color-secondary-accent;
}
background: #f05870;
border-color: #e90d30;
}
.alert--warning{
background: desaturate($alert-color--warning, 40);
border-color: $alert-color--warning;
@include color-scheme(dark) {
color: $color-secondary-accent;
}
background: #e8e85b;
border-color: #ddde11;
}
.alert--success{
background: desaturate($alert-color--success, 40);
border-color: $alert-color--success;
@include color-scheme(dark) {
color: $color-secondary-accent;
}
background: #60c572;
border-color: #18ab34;
}

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

@ -2,9 +2,5 @@
.banner{
width: 100%;
background: $color-banner;
@include color-scheme(dark) {
background: $color-banner--dark;
}
background: #eee;
}

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

@ -5,9 +5,8 @@
button,
input[type="submit"]
{
color: $color-bg;
background: $color-link;
border: 2px solid $color-accent;
background: #FEFEFE;
border: 2px solid $color-link;
border-radius: $border-radius;
display: inline-block;
font-size: .9rem;
@ -16,11 +15,6 @@ input[type="submit"]
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,
@ -62,10 +56,6 @@ input[type="submit"].button--blue
{
background-color: $color-link;
color: $color-bg;
@include color-scheme(dark) {
border-color: $color-link--dark;
}
}
.button--disabled,
@ -75,12 +65,6 @@ input:disabled {
border-color: $color-bg-secondary;
color: $color-text-secondary;
cursor: not-allowed;
@include color-scheme(dark) {
background-color: $color-bg-secondary--dark;
border-color: $color-bg-secondary--dark;
color: $color-text-secondary--dark;
}
}
.button--disabled:hover,
button[disabled]:hover,

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

@ -9,22 +9,12 @@
box-shadow: $box-shadow $color-shadow;
padding: 1.25rem;
/* flex: 0 0 $width-card; */
background: $color-card;
background: #FFF;
display: block !important; /* Unset row/col default */
@include color-scheme(dark) {
border-color: $color-bg-secondary--dark;
box-shadow: $box-shadow $color-shadow--dark;
background: $color-card--dark;
}
}
.card:hover {
box-shadow: $box-shadow $color-bg-secondary;
@include color-scheme(dark) {
box-shadow: $box-shadow $color-bg-secondary--dark;
}
}
.row--cards{

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

@ -8,11 +8,6 @@ code,samp {
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;
@ -27,13 +22,7 @@ pre {
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;
}
border: 1px solid #c1cfda;
}
section pre {

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

@ -10,11 +10,6 @@ form {
padding: 1.5rem;
text-align: $justify-normal;
margin: 0 auto;
@include color-scheme(dark) {
border-color: $color-bg-secondary--dark;
box-shadow: $color-shadow--dark;
}
}
form header {
@ -59,10 +54,6 @@ textarea {
border-radius: $border-radius;
margin-bottom: 1rem;
padding: 0.4rem 0.8rem;
@include color-scheme(dark) {
border-color: $color-bg-secondary--dark;
}
}
input[type="text"],
@ -74,8 +65,4 @@ textarea {
input[readonly],
textarea[readonly] {
background-color: $color-bg-secondary;
@include color-scheme(dark) {
background-color: $color-bg-secondary--dark;
}
}

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

@ -56,11 +56,6 @@ ul li {
left: 0;
/* Right */
/* transform: translate(-50%, 0); */
@include color-scheme(dark) {
background-color: $color-bg--dark;
border-color: $color-bg-secondary--dark;
}
}
.inline-list li ul::before {

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

@ -11,9 +11,4 @@
transform: translate(-50%, -50%);
width: 50%;
z-index: 999;
@include color-scheme(dark) {
border-color: $color-bg-secondary--dark;
box-shadow: $color-shadow--dark;
}
}

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

@ -17,8 +17,4 @@ blockquote footer{
font-size: small;
line-height: $line-height;
padding: 1.5rem 0;
@include color-scheme(dark) {
color: $color-text-secondary--dark;
}
}

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

@ -14,10 +14,6 @@ table {
text-align: left;
border-collapse: collapse;
overflow-wrap: normal;
@include color-scheme(dark) {
border-color: $color-bg-secondary--dark;
}
}
table td,
@ -33,11 +29,6 @@ table thead tr {
color: $color-bg;
margin: 0;
padding: 0;
@include color-scheme(dark) {
background-color: $color-table--dark;
color: $color-bg--dark;
}
}
table thead tr {
@ -46,15 +37,7 @@ table thead tr {
tbody tr:nth-child(even) {
background-color: $color-accent;
@include color-scheme(dark) {
background-color: $color-bg-secondary--dark;
}
}
tbody tr:nth-child(odd) {
background-color: $color-bg;
@include color-scheme(dark) {
background-color: $color-bg--dark;
}
background-color: #FFF;
}

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

@ -12,9 +12,4 @@
top:-2px;
display: inline-block;
vertical-align: middle;
@include color-scheme(dark) {
background-color: $color-secondary--dark;
color: $color-bg--dark;
}
}

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

@ -2,8 +2,6 @@
/* Misc helpers */
.tar{ text-align: right; }
.tac{ text-align: center; }
.tal{ text-align: left; }
.no-padd{ padding: 0; }

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

@ -5,9 +5,5 @@
text-decoration: none;
}
.nav a{
color: $color-nav;
@include color-scheme(dark) {
color: $color-nav--dark;
}
color: #CCC;
}

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

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

25
scss/page/error/_error.scss
Unescape Escape View File

@ -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-bg;
color: $color-text;
@include color-scheme(dark) {
background: $color-bg--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; }
}

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

@ -1,22 +1,4 @@
@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;
}
}

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

@ -1,11 +1,9 @@
// Variables
$color-schemes: false; // true/false, to enable/disable light/dark colour themes. All default styling is for 'light'
$media-xs: 360px;
$media-sm: 540px;
$media-md: 768px;
$media-lg: 900px;
$media-xl: 1200px;
$media-xs: 0;
$media-sm: 0;
$media-md: 0;
$media-lg: 0;
$media-xl: 0;
$active-brightness: .85;
$hover-brightness: 1.2;
@ -21,9 +19,9 @@ $color-bg-secondary--dark: #555;
$color-link: #118bee;
$color-link--dark: #0097fc;
$color-secondary: #508ce2;
$color-secondary--dark: #2c68bd;
$color-secondary--dark: #e20de9;
$color-secondary-accent: #dee9fa;
$color-secondary-accent--dark: #496282;
$color-secondary-accent--dark: #e20de9;
$color-shadow: #f4f4f4;
$color-shadow--dark: #bbbbbb20;
$color-table: #118bee;
@ -34,24 +32,6 @@ $color-text-secondary: #999;
$color-text-secondary--dark: #aaa;
$color-scrollbar: #cacae8;
$color-scrollbar--dark: #EEE;
$color-card: #FFF;
$color-card--dark: #232323;
$color-banner: #EEE;
$color-banner--dark: #444;
$color-highlight: #ff8c00;
$color-highlight--dark: #a3600d;
$color-nav: #CCC;
$color-nav--dark: #CCC;
// $alert-color:
$alert-color--error: #e90d30;
$alert-color--warning: #ddde11;
$alert-color--success: #18ab34;
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$justify-important: center;

Write Preview
Loading…
Cancel
Save