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 {
padding-top: $size-16;
padding-bottom: $size-32;
padding-top: var(--size-16);
padding-bottom: var(--size-32);
a.social-link {
padding: $size-16;
background-color: $white;
fill: $black;
padding: var(--size-16);
background-color: var(--colour-white);
fill: var(--colour-black-graphite);
display: inline-flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
margin-right: $size-16;
margin-right: var(--size-16);
svg {
transition: all 0.2s ease-in-out;
}
&:hover {
// box-shadow: 5px 5px 0 rgba($white, 0.5), 10px 10px 0 rgba($white, 0.4), 15px 15px 0 rgba($white, 0.3);
background-color: $black;
// 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: var(--colour-black-graphite);
svg {
fill: $bg;
fill: var(--colour-bg);
}
}
}
@ -36,7 +36,7 @@ footer.page-footer {
display: flex;
justify-content: space-between;
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,
.lang,
.sub-nav-link {
color: $text;
color: var(--colour-text);
background-color: white;
padding: $size-8;
padding: var(--size-8);
transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
z-index: 1;
text-decoration: underline;
}
.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);
}
@ -47,8 +48,8 @@ header.page-header {
nav {
position: absolute;
top: $size-32;
right: $size-32;
top: var(--size-32);
right: var(--size-32);
display: flex;
@include touch {
@ -56,9 +57,13 @@ header.page-header {
top: 0;
left: 0;
right: initial;
margin-top: $size-16;
margin-top: var(--size-16);
justify-content: flex-end;
}
.nofocus:focus {
outline: none;
}
}
.lang,
@ -72,13 +77,13 @@ header.page-header {
}
h1.logo {
font-family: $font-logo;
margin: $size-128 0;
// background-color: $bg;
font-family: var(--font-logo);
margin: var(--size-128) 0;
// background-color: var(--colour-bg);
display: inline-block;
@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 {
h1 {
color: $white;
color: var(--colour-white);
}
}
}
@ -106,7 +111,7 @@ header.page-header {
}
.rf-logo {
margin: $size-64 0 $size-64 $size-32;
margin: var(--size-64) 0 var(--size-64) var(--size-32);
@include touch {
max-width: 90%;

2
_sass/includes/scrollbar.scss
View File

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

10
_sass/layout.scss
View File

@ -1,8 +1,8 @@
body {
background-color: $bg;
background-color: var(--colour-bg);
background-image: url('../img/bg/bg-2.png'), url('../img/bg/bg-el-light.png');
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-y: repeat;
background-attachment: fixed;
@ -16,7 +16,7 @@ body {
}
@include darkMode {
background-color: $black;
background-color: var(--colour-black-graphite);
// &::after {
// content: '';
// background-image: ;
@ -46,7 +46,7 @@ body {
.content {
flex: 1 0 auto;
max-width: $size-512 + $size-128;
max-width: calc(var(--size-512) + var(--size-128));
}
footer.page-footer {
@ -59,5 +59,5 @@ footer.page-footer {
.textbox-sm {
@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,
a,
strong {
color: $black;
color: var(--colour-black-graphite);
@include darkMode {
background-color: $white;
padding: $size-base;
background-color: var(--colour-white);
padding: var(--size-base);
}
}

14
_sass/layouts/default.scss
View File

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

4
_sass/layouts/event.scss
View File

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

2
_sass/layouts/participant.scss
View File

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

16
_sass/layouts/post.scss
View File

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

14
_sass/layouts/program.scss
View File

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

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

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

2
_sass/pages/home.scss
View File

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

2
_sass/pages/rf2020.scss
View File

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

48
_sass/typography.scss
View File

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

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

@ -39,51 +39,51 @@
}
.margin-4-bottom {
margin-bottom: $size-base !important;
margin-bottom: var(--size-base) !important;
}
.margin-8-bottom {
margin-bottom: $size-8 !important;
margin-bottom: var(--size-8) !important;
}
.margin-16-bottom {
margin-bottom: $size-16 !important;
margin-bottom: var(--size-16) !important;
}
.margin-16-bottom-m {
@include touch {
margin-bottom: $size-16 !important;
margin-bottom: var(--size-16) !important;
}
}
.margin-24-bottom {
margin-bottom: $size-24 !important;
margin-bottom: var(--size-24) !important;
}
.margin-32-bottom {
margin-bottom: $size-32 !important;
margin-bottom: var(--size-32) !important;
}
.margin-64-bottom {
margin-bottom: $size-64 !important;
margin-bottom: var(--size-64) !important;
}
.margin-128-bottom {
margin-bottom: $size-128 !important;
margin-bottom: var(--size-128) !important;
}
.margin-16-left {
margin-left: $size-16 !important;
margin-left: var(--size-16) !important;
}
.margin-16-left-m {
@include touch {
margin-left: $size-16 !important;
margin-left: var(--size-16) !important;
}
}
.margin-16-left-d {
@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 {
background-color: $white;
padding: $size-16 $size-32;
background-color: var(--colour-white);
padding: var(--size-16) var(--size-32);
}
.text-right {
@ -45,5 +45,5 @@
}
.colour-highlight {
color: $highlight !important;
color: var(--colour-highlight) !important;
}

59
_sass/variables.scss
View File

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