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

Change all colours to variables (gross colours atm)

Browse Source
develop
Nathan Steel 9 months ago
parent ffe88022a0
commit b0b4dda4a1
18 changed files with 174 additions and 18 deletions
Show Stats Download Patch File Download Diff File

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

@ -6,6 +6,10 @@ 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,4 +17,9 @@ 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;
}
}

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

@ -80,9 +80,13 @@ 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: #444 transparent;
scrollbar-color: $color-scrollbar transparent;
scrollbar-width: thin;
padding-bottom: .5rem;
@include color-scheme(dark) {
scrollbar-color: $color-scrollbar--dark transparent;
}
}
.row--scroll [class^="col"]{

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

@ -12,6 +12,10 @@ 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,11 +10,18 @@ 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: #ff8c00;
background: $color-highlight;
@include color-scheme(dark) {
background: $color-highlight--dark;
}
}
small {
color: $color-text-secondary;
@include color-scheme(dark) {
color: $color-text-secondary--dark;
}
}
hr{
@ -24,4 +31,7 @@ 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,4 +1,5 @@
@use '../utilities/main_utilities' as *;
@use "sass:color";
// Alerts
.alert{
@ -7,16 +8,33 @@
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: #f05870;
border-color: #e90d30;
background: desaturate($alert-color--error, 40);
border-color: $alert-color--error;
@include color-scheme(dark) {
color: $color-secondary-accent;
}
}
.alert--warning{
background: #e8e85b;
border-color: #ddde11;
background: desaturate($alert-color--warning, 40);
border-color: $alert-color--warning;
@include color-scheme(dark) {
color: $color-secondary-accent;
}
}
.alert--success{
background: #60c572;
border-color: #18ab34;
background: desaturate($alert-color--success, 40);
border-color: $alert-color--success;
@include color-scheme(dark) {
color: $color-secondary-accent;
}
}

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

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

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

@ -5,8 +5,9 @@
button,
input[type="submit"]
{
background: #FEFEFE;
border: 2px solid $color-link;
color: $color-bg;
background: $color-link;
border: 2px solid $color-accent;
border-radius: $border-radius;
display: inline-block;
font-size: .9rem;
@ -15,6 +16,11 @@ 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,
@ -56,6 +62,10 @@ input[type="submit"].button--blue
{
background-color: $color-link;
color: $color-bg;
@include color-scheme(dark) {
border-color: $color-link--dark;
}
}
.button--disabled,
@ -65,6 +75,12 @@ 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,12 +9,22 @@
box-shadow: $box-shadow $color-shadow;
padding: 1.25rem;
/* flex: 0 0 $width-card; */
background: #FFF;
background: $color-card;
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,6 +8,11 @@ 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;
@ -22,7 +27,13 @@ pre {
overflow-x: auto;
white-space: pre-wrap;
border: 1px solid #c1cfda;
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 {

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

@ -10,6 +10,11 @@ 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 {
@ -54,6 +59,10 @@ 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"],
@ -65,4 +74,8 @@ 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,6 +56,11 @@ 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,4 +11,9 @@
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,4 +17,8 @@ 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,6 +14,10 @@ table {
text-align: left;
border-collapse: collapse;
overflow-wrap: normal;
@include color-scheme(dark) {
border-color: $color-bg-secondary--dark;
}
}
table td,
@ -29,6 +33,11 @@ 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 {
@ -37,7 +46,15 @@ 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: #FFF;
background-color: $color-bg;
@include color-scheme(dark) {
background-color: $color-bg--dark;
}
}

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

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

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

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

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

@ -21,9 +21,9 @@ $color-bg-secondary--dark: #555;
$color-link: #118bee;
$color-link--dark: #0097fc;
$color-secondary: #508ce2;
$color-secondary--dark: #e20de9;
$color-secondary--dark: #2c68bd;
$color-secondary-accent: #dee9fa;
$color-secondary-accent--dark: #e20de9;
$color-secondary-accent--dark: #496282;
$color-shadow: #f4f4f4;
$color-shadow--dark: #bbbbbb20;
$color-table: #118bee;
@ -34,7 +34,24 @@ $color-text-secondary: #999;
$color-text-secondary--dark: #aaa;
$color-scrollbar: #cacae8;
$color-scrollbar--dark: #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