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

1
_sass/includes/header.scss
View File

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

2
_sass/includes/scrollbar.scss
View File

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

3
_sass/layout.scss
View File

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

2
_sass/layouts/404.scss
View File

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

2
_sass/layouts/event.scss
View File

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

2
_sass/layouts/post.scss
View File

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

2
_sass/layouts/program.scss
View File

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

8
_sass/typography.scss
View File

@ -15,7 +15,7 @@ button,
small,
.separator {
font-family: var(--font-body);
color: var(--colour-text);
color: var(--colour-text, var(--colour-graphite));
margin-bottom: var(--size-16);
}
@ -69,7 +69,7 @@ p,
}
a {
// color: var(--colour-black-graphite);
// color: var(--colour-graphite);
font-weight: bold;
&:hover,
@ -88,7 +88,7 @@ a {
height: var(--size-8);
width: var(--size-8);
border-radius: 100%;
background-color: var(--colour-black-graphite);
background-color: var(--colour-graphite);
// mix-blend-mode: exclusion;
&.background-blue {
@ -122,5 +122,5 @@ a {
::selection {
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 {
// Colours
--colour-black-graphite: #1d2022;
--colour-graphite: #1d2022;
--colour-white: #fff;
--colour-grey-light: #ececec;
@ -11,8 +11,8 @@
--colour-highlight: var(--colour-turquoise, #0ac2c9);
--colour-highlight-darker: #06a1a7;
-colour-bg: var(--colour-grey-light);
-colour-text: var(--colour-black-graphite);
--colour-bg: #ececec;
--colour-text: var(--colour-black-graphite);
// margin
--size-base: 4px;