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

more sass variables -> css variables work

Browse Source
This commit is contained in:
Benjamin Jones 2020-08-20 12:06:44 +02:00
parent d058d1fae3
commit 47b07209f2
10 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_sass/includes/footer.scss
View File

@ -5,7 +5,7 @@ footer.page-footer {
a.social-link { a.social-link {
padding: var(--size-16); padding: var(--size-16);
background-color: var(--colour-white); background-color: var(--colour-white);
fill: var(--colour-black-graphite); fill: var(--colour-graphite);
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -18,7 +18,7 @@ footer.page-footer {
&:hover { &:hover {
// 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); // 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); background-color: var(--colour-graphite);
svg { svg {
fill: var(--colour-bg); fill: var(--colour-bg);
} }

1
_sass/includes/header.scss
View File

@ -80,6 +80,7 @@ header.page-header {
font-family: var(--font-logo); font-family: var(--font-logo);
margin: var(--size-128) 0; margin: var(--size-128) 0;
// background-color: var(--colour-bg); // background-color: var(--colour-bg);
color: var(--colour-text, var(--colour-graphite));
display: inline-block; display: inline-block;
@include touch { @include touch {

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: var(--colour-black-graphite); // background-color: var(--colour-graphite);
// background-blend-mode: difference; // background-blend-mode: difference;
// background-size: cover; // background-size: cover;
// border-radius: 50px; // border-radius: 50px;

3
_sass/layout.scss
View File

@ -1,5 +1,6 @@
body { body {
background-color: var(--colour-bg); background-color: var(--colour-bg);
// background-color: var(--colour-graphite);
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: var(--size-base) var(--size-8), var(--size-8) var(--size-12); background-position: var(--size-base) var(--size-8), var(--size-8) var(--size-12);
@ -16,7 +17,7 @@ body {
} }
@include darkMode { @include darkMode {
background-color: var(--colour-black-graphite); background-color: var(--colour-graphite);
// &::after { // &::after {
// content: ''; // content: '';
// background-image: ; // background-image: ;

2
_sass/layouts/404.scss
View File

@ -10,7 +10,7 @@
p, p,
a, a,
strong { strong {
color: var(--colour-black-graphite); color: var(--colour-graphite);
@include darkMode { @include darkMode {
background-color: var(--colour-white); background-color: var(--colour-white);

2
_sass/layouts/event.scss
View File

@ -26,7 +26,7 @@
} }
.details { .details {
small { small {
color: rgba(var(--colour-black-graphite), 0.6); color: rgba(var(--colour-graphite), 0.6);
} }
p, p,

2
_sass/layouts/post.scss
View File

@ -44,7 +44,7 @@
} }
a { a {
color: var(--colour-black-graphite); color: var(--colour-graphite);
text-decoration: none; text-decoration: none;
&:hover, &:hover,

2
_sass/layouts/program.scss
View File

@ -46,7 +46,7 @@
} }
a { a {
color: var(--colour-black-graphite); color: var(--colour-graphite);
text-decoration: none; text-decoration: none;
&:hover, &:hover,

8
_sass/typography.scss
View File

@ -15,7 +15,7 @@ button,
small, small,
.separator { .separator {
font-family: var(--font-body); font-family: var(--font-body);
color: var(--colour-text); color: var(--colour-text, var(--colour-graphite));
margin-bottom: var(--size-16); margin-bottom: var(--size-16);
} }
@ -69,7 +69,7 @@ p,
} }
a { a {
// color: var(--colour-black-graphite); // color: var(--colour-graphite);
font-weight: bold; font-weight: bold;
&:hover, &:hover,
@ -88,7 +88,7 @@ a {
height: var(--size-8); height: var(--size-8);
width: var(--size-8); width: var(--size-8);
border-radius: 100%; border-radius: 100%;
background-color: var(--colour-black-graphite); background-color: var(--colour-graphite);
// mix-blend-mode: exclusion; // mix-blend-mode: exclusion;
&.background-blue { &.background-blue {
@ -122,5 +122,5 @@ a {
::selection { ::selection {
background-color: var(--colour-highlight); background-color: var(--colour-highlight);
color: var(--colour-black-graphite); color: var(--colour-graphite);
} }

6
_sass/variables.scss
View File

@ -1,6 +1,6 @@
:root { :root {
// Colours // Colours
--colour-black-graphite: #1d2022; --colour-graphite: #1d2022;
--colour-white: #fff; --colour-white: #fff;
--colour-grey-light: #ececec; --colour-grey-light: #ececec;
@ -11,8 +11,8 @@
--colour-highlight: var(--colour-turquoise, #0ac2c9); --colour-highlight: var(--colour-turquoise, #0ac2c9);
--colour-highlight-darker: #06a1a7; --colour-highlight-darker: #06a1a7;
-colour-bg: var(--colour-grey-light); --colour-bg: #ececec;
-colour-text: var(--colour-black-graphite); --colour-text: var(--colour-black-graphite);
// margin // margin
--size-base: 4px; --size-base: 4px;