mirror of
https://github.com/michivonah/website-v2.git
synced 2025-12-22 20:46:29 +01:00
Update style.css
This commit is contained in:
parent
9955fe81ef
commit
f1f9c2e117
1 changed files with 90 additions and 20 deletions
110
style.css
110
style.css
|
|
@ -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);}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue