(scss) refactorize

This commit is contained in:
Vri 🌈 2023-01-07 14:06:55 +01:00
parent 4eb572d061
commit ac89981501
Signed by: vrifox
GPG key ID: D40098E5B60B2197
2 changed files with 157 additions and 182 deletions

View file

@ -7,50 +7,44 @@
--hill: rgb(50, 235, 150);
--hillshade: rgb(40, 160, 100);
--image-decorative-blend: initial;
}
@media (prefers-color-scheme: dark) {
:root {
--background: rgb(0, 45, 60);
--background-header: rgb(0, 70, 100);
--background-nav: rgb(0, 62.5, 80);
--text: rgb(255, 255, 255);
--sphere: rgb(105, 210, 255);
--hill: rgb(0, 95, 135);
--hillshade: rgb(0, 45, 60);
--image-decorative-blend: luminosity;
@media (prefers-color-scheme: dark) {
--background: rgb(0, 45, 60);
--background-header: rgb(0, 70, 100);
--background-nav: rgb(0, 62.5, 80);
--text: rgb(255, 255, 255);
--sphere: rgb(105, 210, 255);
--hill: rgb(0, 95, 135);
--hillshade: rgb(0, 45, 60);
--image-decorative-blend: luminosity;
}
}
* {
}
* {
box-sizing: border-box;
scrollbar-color: var(--sphere) var(--background-header);
}
}
html {
html {
scroll-behavior: smooth;
}
body {
background-color: var(--background);
color: var(--text);
font-family: 'Lucida Console', 'Courier New', monospace;
hyphens: auto;
line-height: 1.8;
margin: 0;
}
a {
color: var(--text);
text-underline-offset: 3px;
transition: text-decoration-color .15s ease;
&:hover {
text-decoration-color: var(--sphere);
}
}
}
a {
color: var(--text);
text-underline-offset: 3px;
transition: text-decoration-color .15s ease;
}
a:hover {
text-decoration-color: var(--sphere);
}
body {
background-color: var(--background);
color: var(--text);
font-family: 'Lucida Console', 'Courier New', monospace;
hyphens: auto;
line-height: 1.8;
margin: 0;
}
header {
header {
background-blend-mode: var(--image-decorative-blend);
background-color: var(--background-header);
background-image: url(home-header-optimized.svg);
@ -63,62 +57,56 @@
overflow: hidden;
position: relative;
text-align: center;
}
header h1 {
font-size: 3.6em;
line-height: .9em;
margin: 0;
z-index: 10;
}
header p {
margin: 0;
z-index: 10;
}
header #sphere {
background: var(--sphere);
border-radius: 100%;
display: none;
height: 10vh;
left: 30vw;
position: absolute;
top: 3vh;
width: 10vh;
}
header #hill {
background: var(--hill);
border-radius: 40px;
bottom: 0;
display: none;
height: 40vh;
left: 50vw;
position: absolute;
transform: rotate(45deg) translate(50%, 50%);
width: 40vh;
}
header #hillshade {
background: var(--hillshade);
border-radius: 80px;
bottom: -5vh;
display: none;
height: 40vh;
left: 30vw;
position: absolute;
transform: rotate(45deg) translate(50%, 50%);
width: 40vh;
}
#header-background {
height: 100%;
position: absolute;
align-self: center;
}
body > nav {
h1 {
font-size: 3.6em;
line-height: .9em;
margin: 0;
z-index: 10;
}
p {
margin: 0;
z-index: 10;
}
#sphere {
background: var(--sphere);
border-radius: 100%;
display: none;
height: 10vh;
left: 30vw;
position: absolute;
top: 3vh;
width: 10vh;
}
#hill {
background: var(--hill);
border-radius: 40px;
bottom: 0;
display: none;
height: 40vh;
left: 50vw;
position: absolute;
transform: rotate(45deg) translate(50%, 50%);
width: 40vh;
}
#hillshade {
background: var(--hillshade);
border-radius: 80px;
bottom: -5vh;
display: none;
height: 40vh;
left: 30vw;
position: absolute;
transform: rotate(45deg) translate(50%, 50%);
width: 40vh;
}
#header-background {
height: 100%;
position: absolute;
align-self: center;
}
}
#main-nav {
align-items: center;
background: var(--background-nav);
border-radius: 10px;
@ -126,108 +114,95 @@
gap: 20px;
height: 60px;
justify-content: center;
margin: 0px 20px -30px 20px;
margin: 0px auto;
position: relative;
top: -30px;
}
}
.width-1200 {
.width-1200 {
margin: 0 auto;
max-width: 1200px;
}
}
main section {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
main {
section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-gap: 20px;
}
article {
background: var(--background-header);
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.1) 10px 10px 0px 0px;
display: flex;
flex-direction: column;
padding: 40px;
transition: box-shadow .3s ease, transform .3s ease;
&:hover {
box-shadow: rgba(0, 0, 0, 0.1) 10px 15px 0px 0px;
transform: translate(0, -5px);
}
a {
background: var(--background);
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 0px 0px;
color: var(--text);
display: inline-block;
font-weight: bold;
padding: 10px 14px;
text-decoration: none;
transition: box-shadow .15s ease, transform .15s ease;
&:hover {
box-shadow: rgba(0, 0, 0, 0.1) 2.5px 2.5px 0px 0px;
transform: translate(2.5px, 2.5px);
}
&:active {
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 0px;
transform: translate(5px, 5px);
}
}
h2 {
font-size: 1.8em;
line-height: normal;
margin: 0;
}
p {
margin: 20px 0;
}
nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
hyphens: none;
margin-top: auto;
}
}
}
main article {
background: var(--background-header);
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.1) 10px 10px 0px 0px;
display: flex;
flex-direction: column;
padding: 40px;
transition: box-shadow .3s ease, transform .3s ease;
}
main article:hover {
box-shadow: rgba(0, 0, 0, 0.1) 10px 15px 0px 0px;
transform: translate(0, -5px);
}
main article a {
background: var(--background);
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 0px 0px;
color: var(--text);
display: inline-block;
font-weight: bold;
padding: 10px 14px;
text-decoration: none;
transition: box-shadow .15s ease, transform .15s ease;
}
main article a:hover {
box-shadow: rgba(0, 0, 0, 0.1) 2.5px 2.5px 0px 0px;
transform: translate(2.5px, 2.5px);
}
main article a:active {
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 0px;
transform: translate(5px, 5px);
}
main article h2 {
font-size: 1.8em;
line-height: normal;
margin: 0;
}
main article p {
margin: 20px 0;
}
main article nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
hyphens: none;
margin-top: auto;
}
footer {
footer {
margin-top: 20px !important;
text-align: center;
}
}
/*footer p, footer a {
text-align: center;
color: rgb(80, 150, 190);
}*/
/*footer p, footer a {
text-align: center;
color: rgb(80, 150, 190);
}*/
@media (max-width: 1000px) {
@media (max-width: 1000px) {
header hill {
transform: rotate(45deg) translate(40%, 70%);
transform: rotate(45deg) translate(40%, 70%);
}
header hillshade {
transform: rotate(45deg) translate(20%, 80%);
transform: rotate(45deg) translate(20%, 80%);
}
section#dienste {
grid-template-columns: repeat(2, 1fr);
}
}
}
@media (max-width: 600px) {
section#dienste {
grid-template-columns: repeat(1, 1fr);
}
}
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
header #sphere {
left: unset;
right: 30vw;
left: unset;
right: 30vw;
}
}
}

View file

@ -1,3 +1,3 @@
<nav class="width-1200">
<nav id="main-nav" class="width-1200">
<a href="#dienste">Dienste</a>
</nav>