kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-06-08 13:42:07 +02:00
Code Issues Projects Releases Wiki Activity

Add light mode

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-07-25 13:47:03 +00:00 • committed by GitHub
parent c0db0f2611
commit d9b538312a
9 changed files with 754 additions and 685 deletions
Download patch file Download diff file Expand all files Collapse all files

204
src/templates/project.module.scss
View file

@ -1,99 +1,105 @@
@import "../variables";
.projectHeader {
> div {
padding-bottom: 0 !important;
}
.headerBackground {
position: absolute;
left: 0;
width: 100%;
height: 400px;
background-position: center;
background-size: cover;
}
header {
position: absolute;
left: 0;
width: 100%;
height: 400px;
background: linear-gradient(
to bottom,
rgba($background, 0.95),
rgba($background, 0.25) 20%,
rgba($background, 0.35) 80%,
rgba($background, 1) 100%
);
.headerInner {
max-width: $layoutWidth;
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
text-shadow: 0 0 10px black, 0 0 20px black;
padding: 10px 20px;
* {
margin: 0;
color: white;
font-size: 1.25em;
}
h1 {
font-size: 2.2em;
margin-top: auto;
}
}
}
.headerPlaceholder {
width: 100%;
height: 400px;
}
}
.projectAbout,
.projectLinks {
&:nth-of-type(2) {
> div,
> article {
padding-top: 20px;
}
}
}
.projectAbout {
background: #060606;
color: white;
}
.projectLinks {
.linkList {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
a {
display: inline-block;
border: thin solid rgb(200, 200, 200);
border-radius: 5px;
padding: 10px 15px;
margin: 5px;
color: $textColor;
text-decoration-skip: none;
text-decoration: underline dotted currentColor;
i.fab,
i.fas,
i.fa,
i.far,
i.fal {
display: inline;
}
}
}
@import "../variables";
.projectHeader {
> div {
padding-bottom: 0 !important;
}
.headerBackground {
position: absolute;
left: 0;
width: 100%;
height: 400px;
background-position: center;
background-size: cover;
}
header {
position: absolute;
left: 0;
width: 100%;
height: 400px;
background: linear-gradient(
to bottom,
rgba($background, 0.95),
rgba($background, 0.25) 20%,
rgba($background, 0.35) 80%,
rgba($background, 1) 100%
);
.headerInner {
max-width: $layoutWidth;
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
text-shadow: 0 0 10px black, 0 0 20px black;
padding: 10px 20px;
* {
margin: 0;
color: white;
font-size: 1.25em;
}
h1 {
font-size: 2.2em;
margin-top: auto;
}
}
}
.headerPlaceholder {
width: 100%;
height: 400px;
}
}
.projectAbout,
.projectLinks {
&:nth-of-type(2) {
> div,
> article {
padding-top: 20px;
}
}
}
.projectAbout {
background: #060606;
color: white;
transition: background-color .25s, color .25s;
@media(prefers-color-scheme: light) {
background: $lightBackground;
color: $lightTextColor;
}
}
.projectLinks {
.linkList {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
a {
display: inline-block;
border: thin solid rgb(200, 200, 200);
border-radius: 5px;
padding: 10px 15px;
margin: 5px;
color: inherit;
text-decoration-skip: none;
text-decoration: underline dotted currentColor;
i.fab,
i.fas,
i.fa,
i.far,
i.fal {
display: inline;
}
}
}