lightli/rf-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

removed (almost) all scss variables and replaced with css variables :)

Browse Source
This commit is contained in:
Benjamin Jones 2020-08-17 23:05:18 +02:00
parent 5ec3833ecc
commit 5dec298b8c
17 changed files with 139 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
_sass/includes/footer.scss
View File

@ -1,26 +1,26 @@
footer.page-footer { footer.page-footer {
padding-top: $size-16; padding-top: var(--size-16);
padding-bottom: $size-32; padding-bottom: var(--size-32);
a.social-link { a.social-link {
padding: $size-16; padding: var(--size-16);
background-color: $white; background-color: var(--colour-white);
fill: $black; fill: var(--colour-black-graphite);
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
margin-right: $size-16; margin-right: var(--size-16);
svg { svg {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
&:hover { &:hover {
// box-shadow: 5px 5px 0 rgba($white, 0.5), 10px 10px 0 rgba($white, 0.4), 15px 15px 0 rgba($white, 0.3); // box-shadow: 5px 5px 0 rgba(var(--colour-white), 0.5), 10px 10px 0 rgba(var(--colour-white), 0.4), 15px 15px 0 rgba(var(--colour-white), 0.3);
background-color: $black; background-color: var(--colour-black-graphite);
svg { svg {
fill: $bg; fill: var(--colour-bg);
} }
} }
} }
@ -36,7 +36,7 @@ footer.page-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
max-width: $size-512 + $size-128; max-width: var(--size-512) + var(--size-128);
} }
} }
} }

29
_sass/includes/header.scss
View File

@ -2,16 +2,17 @@ header.page-header {
.nav-link, .nav-link,
.lang, .lang,
.sub-nav-link { .sub-nav-link {
color: $text; color: var(--colour-text);
background-color: white; background-color: white;
padding: $size-8; padding: var(--size-8);
transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1); transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
z-index: 1; z-index: 1;
text-decoration: underline; text-decoration: underline;
} }
.lang:hover { .lang:hover {
box-shadow: 5px 5px 0 rgba($white, 0.5), 10px 10px 0 rgba($white, 0.4), 15px 15px 0 rgba($white, 0.3); box-shadow: 5px 5px 0 rgba(var(--colour-white), 0.5), 10px 10px 0 rgba(var(--colour-white), 0.4),
15px 15px 0 rgba(var(--colour-white), 0.3);
transition: box-shadow 0.2s cubic-bezier(0.075, 0.82, 0.165, 1); transition: box-shadow 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
} }
@ -47,8 +48,8 @@ header.page-header {
nav { nav {
position: absolute; position: absolute;
top: $size-32; top: var(--size-32);
right: $size-32; right: var(--size-32);
display: flex; display: flex;
@include touch { @include touch {
@ -56,9 +57,13 @@ header.page-header {
top: 0; top: 0;
left: 0; left: 0;
right: initial; right: initial;
margin-top: $size-16; margin-top: var(--size-16);
justify-content: flex-end; justify-content: flex-end;
} }
.nofocus:focus {
outline: none;
}
} }
.lang, .lang,
@ -72,13 +77,13 @@ header.page-header {
} }
h1.logo { h1.logo {
font-family: $font-logo; font-family: var(--font-logo);
margin: $size-128 0; margin: var(--size-128) 0;
// background-color: $bg; // background-color: var(--colour-bg);
display: inline-block; display: inline-block;
@include touch { @include touch {
margin: $size-128 0 $size-64 0; margin: var(--size-128) 0 var(--size-64) 0;
} }
} }
} }
@ -95,7 +100,7 @@ header.page-header {
@include darkMode { @include darkMode {
h1 { h1 {
color: $white; color: var(--colour-white);
} }
} }
} }
@ -106,7 +111,7 @@ header.page-header {
} }
.rf-logo { .rf-logo {
margin: $size-64 0 $size-64 $size-32; margin: var(--size-64) 0 var(--size-64) var(--size-32);
@include touch { @include touch {
max-width: 90%; max-width: 90%;

2
_sass/includes/scrollbar.scss
View File

@ -10,7 +10,7 @@
/* Handle */ /* Handle */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
// background: transparent; // background: transparent;
// background-color: $black; // background-color: var(--colour-black-graphite);
// background-blend-mode: difference; // background-blend-mode: difference;
// background-size: cover; // background-size: cover;
// border-radius: 50px; // border-radius: 50px;

10
_sass/layout.scss
View File

@ -1,8 +1,8 @@
body { body {
background-color: $bg; background-color: var(--colour-bg);
background-image: url('../img/bg/bg-2.png'), url('../img/bg/bg-el-light.png'); background-image: url('../img/bg/bg-2.png'), url('../img/bg/bg-el-light.png');
transition: background-color 0.5s ease-in-out; transition: background-color 0.5s ease-in-out;
background-position: $size-base $size-8, $size-8 $size-12; background-position: var(--size-base) var(--size-8), var(--size-8) var(--size-12);
background-repeat-x: no-repeat; background-repeat-x: no-repeat;
background-repeat-y: repeat; background-repeat-y: repeat;
background-attachment: fixed; background-attachment: fixed;
@ -16,7 +16,7 @@ body {
} }
@include darkMode { @include darkMode {
background-color: $black; background-color: var(--colour-black-graphite);
// &::after { // &::after {
// content: ''; // content: '';
// background-image: ; // background-image: ;
@ -46,7 +46,7 @@ body {
.content { .content {
flex: 1 0 auto; flex: 1 0 auto;
max-width: $size-512 + $size-128; max-width: calc(var(--size-512) + var(--size-128));
} }
footer.page-footer { footer.page-footer {
@ -59,5 +59,5 @@ footer.page-footer {
.textbox-sm { .textbox-sm {
@include textbox; @include textbox;
padding: $size-8 $size-16; padding: var(--size-8) var(--size-16);
} }

6
_sass/layouts/404.scss
View File

@ -10,11 +10,11 @@
p, p,
a, a,
strong { strong {
color: $black; color: var(--colour-black-graphite);
@include darkMode { @include darkMode {
background-color: $white; background-color: var(--colour-white);
padding: $size-base; padding: var(--size-base);
} }
} }

14
_sass/layouts/default.scss
View File

@ -1,6 +1,6 @@
.intro { .intro {
display: block; display: block;
margin-bottom: $size-64; margin-bottom: var(--size-64);
p { p {
@include textbox; @include textbox;
margin: 0; margin: 0;
@ -8,7 +8,7 @@
} }
h2 { h2 {
margin-top: $size-32; margin-top: var(--size-32);
@include touch { @include touch {
margin-top: 0; margin-top: 0;
@ -17,14 +17,14 @@ h2 {
.page-content { .page-content {
@include touch { @include touch {
@include margin-horizontal($size-32); @include margin-horizontal(var(--size-32));
} }
} }
.side-title { .side-title {
position: fixed; position: fixed;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
color: $text; color: var(--colour-text);
margin: 0; margin: 0;
width: 100vh; width: 100vh;
bottom: 0; bottom: 0;
@ -56,14 +56,14 @@ h2 {
} }
a { a {
color: $text; color: var(--colour-text);
} }
@include darkMode { @include darkMode {
color: $white; color: var(--colour-white);
a { a {
color: $white; color: var(--colour-white);
} }
} }
} }

4
_sass/layouts/event.scss
View File

@ -13,7 +13,7 @@
small { small {
display: inline; display: inline;
vertical-align: super; vertical-align: super;
font-size: $size-14; font-size: var(--size-14);
white-space: nowrap; white-space: nowrap;
} }
} }
@ -26,7 +26,7 @@
} }
.details { .details {
small { small {
color: rgba($black, 0.6); color: rgba(var(--colour-black-graphite), 0.6);
} }
p, p,

2
_sass/layouts/participant.scss
View File

@ -18,7 +18,7 @@
} }
img.participant-profile { img.participant-profile {
transform: translateY($size-24); transform: translateY(var(--size-24));
width: 100%; width: 100%;
max-width: initial; max-width: initial;
} }

16
_sass/layouts/post.scss
View File

@ -1,17 +1,17 @@
.post-list { .post-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-bottom: $size-128; margin-bottom: var(--size-128);
h2 { h2 {
margin-bottom: $size-32; margin-bottom: var(--size-32);
} }
.post-item { .post-item {
margin-bottom: $size-64; margin-bottom: var(--size-64);
.post-header { .post-header {
margin-bottom: $size-16; margin-bottom: var(--size-16);
} }
.post-content { .post-content {
p { p {
@ -22,18 +22,18 @@
} }
.news-post { .news-post {
margin-bottom: $size-64; margin-bottom: var(--size-64);
} }
.post-item { .post-item {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin-bottom: $size-16; margin-bottom: var(--size-16);
.post-header { .post-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: $size-32; margin-bottom: var(--size-32);
h2, h2,
h3, h3,
label { label {
@ -44,7 +44,7 @@
} }
a { a {
color: $black; color: var(--colour-black-graphite);
text-decoration: none; text-decoration: none;
&:hover, &:hover,

14
_sass/layouts/program.scss
View File

@ -1,11 +1,11 @@
.prog-list { .prog-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-bottom: $size-64; margin-bottom: var(--size-64);
li { li {
.text-lg { .text-lg {
font-size: $size-16; font-size: var(--size-16);
} }
@include touch { @include touch {
@ -14,7 +14,7 @@
} }
h2 { h2 {
margin-bottom: $size-32; margin-bottom: var(--size-32);
} }
.prog-item--format { .prog-item--format {
@ -24,18 +24,18 @@
} }
// .news-post { // .news-post {
// margin-bottom: $size-64; // margin-bottom: var(--size-64);
// } // }
.prog-item { .prog-item {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin-bottom: $size-16; margin-bottom: var(--size-16);
.prog-header { .prog-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: $size-32; margin-bottom: var(--size-32);
h2, h2,
h3, h3,
label { label {
@ -46,7 +46,7 @@
} }
a { a {
color: $black; color: var(--colour-black-graphite);
text-decoration: none; text-decoration: none;
&:hover, &:hover,

16
_sass/layouts/text-page.scss
View File

@ -8,29 +8,29 @@
@include textbox; @include textbox;
&:last-of-type:not(ul) { &:last-of-type:not(ul) {
margin-bottom: $size-32; margin-bottom: var(--size-32);
} }
@include touch { @include touch {
padding: $size-16; padding: var(--size-16);
} }
} }
h2, h2,
h3 { h3 {
display: inline-block; display: inline-block;
margin-top: $size-64; margin-top: var(--size-64);
margin-bottom: $size-32; margin-bottom: var(--size-32);
} }
ul { ul {
font-size: $size-14; font-size: var(--size-14);
padding-top: 0; padding-top: 0;
li { li {
list-style: inside; list-style: inside;
@include padding-horizontal($size-12); @include padding-horizontal(var(--size-12));
line-height: $size-24; line-height: var(--size-24);
&:last-of-type { &:last-of-type {
margin-bottom: 0; margin-bottom: 0;
@ -40,7 +40,7 @@
sup a { sup a {
text-decoration: none; text-decoration: none;
// color: $turquoise; // color: var(--colour-turquoise);
} }
.link-to-submit { .link-to-submit {

2
_sass/pages/home.scss
View File

@ -1,6 +1,6 @@
#page-index { #page-index {
h2 { h2 {
margin-bottom: $size-32; margin-bottom: var(--size-32);
} }
h2, h2,

2
_sass/pages/rf2020.scss
View File

@ -5,7 +5,7 @@
-webkit-appearance: none; -webkit-appearance: none;
border: none; border: none;
box-shadow: none; box-shadow: none;
font-size: $size-16; font-size: var(--size-16);
cursor: pointer; cursor: pointer;
} }
} }

48
_sass/typography.scss
View File

@ -14,18 +14,18 @@ label,
button, button,
small, small,
.separator { .separator {
font-family: $font; font-family: var(--font-body);
color: $text; color: var(--colour-text);
margin-bottom: $size-16; margin-bottom: var(--size-16);
} }
strong { strong {
font-family: $font; font-family: var(--font-body);
font-weight: 700; font-weight: 700;
} }
em { em {
font-family: $font; font-family: var(--font-body);
font-style: italic; font-style: italic;
} }
@ -42,34 +42,34 @@ h1,
h2, h2,
h3, h3,
h4 { h4 {
font-family: $font-title; font-family: var(--font-title);
// font-style: italic; // font-style: italic;
} }
h1, h1,
.h1 { .h1 {
font-size: $size-64; font-size: var(--size-64);
} }
h2, h2,
.h2 { .h2 {
font-size: $size-32; font-size: var(--size-32);
} }
h3, h3,
.h3 { .h3 {
font-size: $size-24; font-size: var(--size-24);
} }
p, p,
.text-p { .text-p {
font-size: $size-14; font-size: var(--size-14);
font-family: $font; font-family: var(--font-body);
line-height: $size-32; line-height: var(--size-32);
} }
a { a {
// color: $black; // color: var(--colour-black-graphite);
font-weight: bold; font-weight: bold;
&:hover, &:hover,
@ -79,32 +79,32 @@ a {
} }
.separator { .separator {
max-width: $size-512 + $size-128; max-width: var(--size-512) + var(--size-128);
display: flex; display: flex;
justify-content: center; justify-content: center;
@include margin-vertical($size-16); @include margin-vertical(var(--size-16));
.dot { .dot {
height: $size-8; height: var(--size-8);
width: $size-8; width: var(--size-8);
border-radius: 100%; border-radius: 100%;
background-color: $black; background-color: var(--colour-black-graphite);
// mix-blend-mode: exclusion; // mix-blend-mode: exclusion;
&.background-blue { &.background-blue {
background-color: $highlight-darker; background-color: var(--colour-highlight-darker);
} }
&.background-white { &.background-white {
background-color: $white; background-color: var(--colour-white);
} }
} }
} }
a { a {
color: $turquoise; color: var(--colour-turquoise);
&:visited { &:visited {
color: $highlight-darker; color: var(--colour-highlight-darker);
} }
&.with-url-arrow { &.with-url-arrow {
@ -121,6 +121,6 @@ a {
} }
::selection { ::selection {
background-color: $highlight; background-color: var(--colour-highlight);
color: $black; color: var(--colour-black-graphite);
} }

22
_sass/utils/layout-utils.scss
View File

@ -39,51 +39,51 @@
} }
.margin-4-bottom { .margin-4-bottom {
margin-bottom: $size-base !important; margin-bottom: var(--size-base) !important;
} }
.margin-8-bottom { .margin-8-bottom {
margin-bottom: $size-8 !important; margin-bottom: var(--size-8) !important;
} }
.margin-16-bottom { .margin-16-bottom {
margin-bottom: $size-16 !important; margin-bottom: var(--size-16) !important;
} }
.margin-16-bottom-m { .margin-16-bottom-m {
@include touch { @include touch {
margin-bottom: $size-16 !important; margin-bottom: var(--size-16) !important;
} }
} }
.margin-24-bottom { .margin-24-bottom {
margin-bottom: $size-24 !important; margin-bottom: var(--size-24) !important;
} }
.margin-32-bottom { .margin-32-bottom {
margin-bottom: $size-32 !important; margin-bottom: var(--size-32) !important;
} }
.margin-64-bottom { .margin-64-bottom {
margin-bottom: $size-64 !important; margin-bottom: var(--size-64) !important;
} }
.margin-128-bottom { .margin-128-bottom {
margin-bottom: $size-128 !important; margin-bottom: var(--size-128) !important;
} }
.margin-16-left { .margin-16-left {
margin-left: $size-16 !important; margin-left: var(--size-16) !important;
} }
.margin-16-left-m { .margin-16-left-m {
@include touch { @include touch {
margin-left: $size-16 !important; margin-left: var(--size-16) !important;
} }
} }
.margin-16-left-d { .margin-16-left-d {
@include desktop { @include desktop {
margin-left: $size-16 !important; margin-left: var(--size-16) !important;
} }
} }

6
_sass/utils/typo-utils.scss
View File

@ -14,8 +14,8 @@
} }
@mixin textbox { @mixin textbox {
background-color: $white; background-color: var(--colour-white);
padding: $size-16 $size-32; padding: var(--size-16) var(--size-32);
} }
.text-right { .text-right {
@ -45,5 +45,5 @@
} }
.colour-highlight { .colour-highlight {
color: $highlight !important; color: var(--colour-highlight) !important;
} }

55
_sass/variables.scss
View File

@ -1,37 +1,38 @@
:root {
// Colours // Colours
--colour-black-graphite: #1d2022;
--colour-white: #fff;
$black: #1d2022; --colour-grey-light: #ececec;
$white: #fff; --colour-turquoise: #0ac2c9;
$grey-light: #ececec; --colour-duckegg: #b3bbca;
$turquoise: #0ac2c9;
$duckegg: #b3bbca;
$true-blue: #037fe4;
$highlight: $turquoise;
$highlight-darker: #06a1a7;
$bg: $grey-light; --colour-true-blue: #037fe4;
$text: $black; --colour-highlight: var(--colour-turquoise, #0ac2c9);
--colour-highlight-darker: #06a1a7;
-colour-bg: var(--colour-grey-light);
-colour-text: var(--colour-black-graphite);
// margin // margin
--size-base: 4px;
$size-base: 4px; --size-8: 8px;
$size-8: 8px; --size-12: 12px;
$size-12: 12px; --size-14: 14px;
$size-14: 14px; --size-16: 16px;
$size-16: 16px; --size-24: 24px;
$size-24: 24px; --size-32: 32px;
$size-32: 32px; --size-64: 64px;
$size-64: 64px; --size-128: 128px;
$size-128: 128px; --size-256: 256px;
$size-256: 256px; --size-512: 512px;
$size-512: 512px; --size-1028: 1028px;
$size-1028: 1028px;
// Typography // Typography
--font-title: 'SpaceMono', 'Courier New', Courier, monospace;
$font-title: 'SpaceMono', 'Courier New', Courier, monospace; --font-logo: 'GlyphWorld Mountain', 'SpaceMono', 'Courier New', Courier, monospace;
$font-logo: 'GlyphWorld Mountain', 'SpaceMono', 'Courier New', Courier, monospace; --font-body: 'SpaceMono', 'Courier New', Courier, monospace;
$font: 'SpaceMono', 'Courier New', Courier, monospace; }
// Responsive breakpoints // Responsive breakpoints