(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);
|
||||
--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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<nav class="width-1200">
|
||||
<nav id="main-nav" class="width-1200">
|
||||
<a href="#dienste">Dienste</a>
|
||||
</nav>
|
||||
Loading…
Reference in a new issue