(scss) refactorize
This commit is contained in:
parent
4eb572d061
commit
ac89981501
GPG key ID:
D40098E5B60B2197
2 changed files with 157 additions and 182 deletions
|
|
@ -7,50 +7,44 @@
|
||||||
--hill: rgb(50, 235, 150);
|
--hill: rgb(50, 235, 150);
|
||||||
--hillshade: rgb(40, 160, 100);
|
--hillshade: rgb(40, 160, 100);
|
||||||
--image-decorative-blend: initial;
|
--image-decorative-blend: initial;
|
||||||
}
|
@media (prefers-color-scheme: dark) {
|
||||||
|
--background: rgb(0, 45, 60);
|
||||||
@media (prefers-color-scheme: dark) {
|
--background-header: rgb(0, 70, 100);
|
||||||
:root {
|
--background-nav: rgb(0, 62.5, 80);
|
||||||
--background: rgb(0, 45, 60);
|
--text: rgb(255, 255, 255);
|
||||||
--background-header: rgb(0, 70, 100);
|
--sphere: rgb(105, 210, 255);
|
||||||
--background-nav: rgb(0, 62.5, 80);
|
--hill: rgb(0, 95, 135);
|
||||||
--text: rgb(255, 255, 255);
|
--hillshade: rgb(0, 45, 60);
|
||||||
--sphere: rgb(105, 210, 255);
|
--image-decorative-blend: luminosity;
|
||||||
--hill: rgb(0, 95, 135);
|
|
||||||
--hillshade: rgb(0, 45, 60);
|
|
||||||
--image-decorative-blend: luminosity;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
scrollbar-color: var(--sphere) var(--background-header);
|
scrollbar-color: var(--sphere) var(--background-header);
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
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 {
|
header {
|
||||||
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 {
|
|
||||||
background-blend-mode: var(--image-decorative-blend);
|
background-blend-mode: var(--image-decorative-blend);
|
||||||
background-color: var(--background-header);
|
background-color: var(--background-header);
|
||||||
background-image: url(home-header-optimized.svg);
|
background-image: url(home-header-optimized.svg);
|
||||||
|
|
@ -63,62 +57,56 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
header h1 {
|
#main-nav {
|
||||||
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 {
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: var(--background-nav);
|
background: var(--background-nav);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
@ -126,108 +114,95 @@
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 0px 20px -30px 20px;
|
margin: 0px auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -30px;
|
top: -30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.width-1200 {
|
.width-1200 {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main section {
|
main {
|
||||||
display: grid;
|
section {
|
||||||
grid-template-columns: repeat(3, 1fr);
|
display: grid;
|
||||||
grid-gap: 20px;
|
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 {
|
footer {
|
||||||
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 {
|
|
||||||
margin-top: 20px !important;
|
margin-top: 20px !important;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*footer p, footer a {
|
/*footer p, footer a {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: rgb(80, 150, 190);
|
color: rgb(80, 150, 190);
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
@media (max-width: 1000px) {
|
||||||
header hill {
|
header hill {
|
||||||
transform: rotate(45deg) translate(40%, 70%);
|
transform: rotate(45deg) translate(40%, 70%);
|
||||||
}
|
}
|
||||||
header hillshade {
|
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 {
|
header #sphere {
|
||||||
left: unset;
|
left: unset;
|
||||||
right: 30vw;
|
right: 30vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<nav class="width-1200">
|
<nav id="main-nav" class="width-1200">
|
||||||
<a href="#dienste">Dienste</a>
|
<a href="#dienste">Dienste</a>
|
||||||
</nav>
|
</nav>
|
||||||
Loading…
Reference in a new issue