Update style.css

This commit is contained in:
Michi 2022-05-10 18:56:19 +02:00 committed by GitHub
parent 9955fe81ef
commit f1f9c2e117
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

110
style.css
View file

@ -8,10 +8,13 @@ body{
text-align: left;
font-family: "open sans", sans-serif;
scroll-behavior: smooth;
--maincolor: #3498db;
--secondcolor: #2980b9;
--theme1: #3498db;
--theme2: #2980b9;
--background: #181818;
--color: #fff;
--margin: 15px;
--padding: 15px;
--borderRadius: 12px;
}
#content{
@ -24,20 +27,10 @@ body{
margin: auto;
}
#home{
margin: 0;
width: 100%;
height: 100vh;
background-image: url("assets/bg_grey.svg");
background-size: cover;
background-repeat: repeat-x;
background-position: center;
}
#navbar{
width: 100%;
height: 56px;
background: var(--maincolor);
background: var(--theme1);
color: #fff;
position: fixed;
top: 0;
@ -56,6 +49,11 @@ body{
#navbar-links{
float: right;
padding: 15px;
}
#navbar-links a{
margin: 0 5px;
}
#toggleNav{
@ -65,43 +63,111 @@ body{
}
#home{
margin: 0;
width: 100%;
height: 100vh;
background-image: url("assets/bg_grey.svg");
background-size: cover;
background-repeat: repeat-x;
background-position: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: baseline;
align-items: center;
}
#home img{
width: 80%;
width: 100%;
height: auto;
background-image: url("blob1.svg");
background-position: right;
background-repeat: no-repeat;
}
#home button{
width: 100%;
height: auto;
min-height: 40px;
margin: var(--margin);
background: var(--theme2);
color: #fff;
border: 2px solid #fff;
border-radius: var(--borderRadius);
font-size: 1rem;
}
#home button:hover{
background: var(--theme1);
}
#footer{
margin: 0;
padding: 0;
color: #fff;
width: auto;
height: auto;
font-size: 1.1rem;
}
#imprint, #copyright{
display: none;
#footerExpanded{
display: none; /* FLEX */
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
background: var(--theme1);
padding-bottom: 30px;
}
#footerContent{
width: calc(100% - 30px);
height: auto;
min-height: 60px;
background: var(--maincolor);
background: var(--theme1);
margin: 0;
margin-top: -21px;
padding: 15px;
}
#scroll-top{
width: 40px;
height: 40px;
background: var(--theme1);
border-radius: 12px;
margin: 15px;
bottom: 0;
right: 0;
position: fixed;
justify-content: center;
display: flex;
font-size: 28px;
color: #fff;
transition: .1s linear;
}
#scroll-top i{
margin-top: 0px;
transition: .1s linear;
stroke-width: 3px;
}
#scroll-top i:hover{
margin-top: -5px;
}
.sectionTitle{
color: var(--color);
font-size: 2rem;
}
.sectionTitle::before{
content: "#";
color: var(--theme2);
margin: 0 10px 0 0;
user-select: auto;
}
a{
color: inherit;
text-decoration: none;
@ -123,5 +189,9 @@ body{
outline: none;
}
::selection {background: var(--maincolor); color: #ffffff; border-radius: 12px;}
::-moz-selection {background: var(--maincolor); color: #ffffff; border-radius: 12px;}
var{
font-style: normal;
}
::selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}
::-moz-selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}