michi.vonah/website-v2
1
0
Fork 0
mirror of https://github.com/michivonah/website-v2.git synced 2025-12-22 20:46:29 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update style.css

Browse source
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
1 changed files with 90 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

110
style.css
View file

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