mirror of
https://github.com/michivonah/website-v2.git
synced 2025-12-22 20:46:29 +01:00
588 lines
11 KiB
CSS
588 lines
11 KiB
CSS
html{scroll-behavior: smooth;}
|
|
|
|
body{
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--color);
|
|
background: var(--background);
|
|
text-align: left;
|
|
font-family: "open sans", sans-serif;
|
|
scroll-behavior: smooth;
|
|
--theme1: #3498db;
|
|
--theme2: #2980b9;
|
|
--background: #181818;
|
|
--color: #fff;
|
|
--margin: 15px;
|
|
--padding: 15px;
|
|
--borderRadius: 12px;
|
|
--font: "open sans", sans-serif;
|
|
}
|
|
|
|
#content{
|
|
margin: 0;
|
|
}
|
|
|
|
.inner-width{
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
margin: auto;
|
|
}
|
|
|
|
/* Navbar */
|
|
#navbar{
|
|
width: 100%;
|
|
height: 56px;
|
|
background: transparent;
|
|
color: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
transition: all 300ms linear;
|
|
user-select: none;
|
|
}
|
|
|
|
#navbar img{
|
|
width: auto;
|
|
height: 36px;
|
|
margin: 10px 15px 15px 15px;
|
|
float: left;
|
|
}
|
|
|
|
#navbar-links{
|
|
float: right;
|
|
padding: 15px;
|
|
}
|
|
|
|
#navbar-links a{
|
|
margin: 0 5px;
|
|
}
|
|
|
|
#toggleNav{
|
|
text-align: right;
|
|
color: #fff;
|
|
margin: 10px 15px;
|
|
display: none;
|
|
float: right;
|
|
font-size: 26px;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
#toggleNav:hover{
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
#closeNavbarPlaceholder{
|
|
display: none;
|
|
}
|
|
|
|
/* 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;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
#home img{
|
|
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);
|
|
}
|
|
|
|
/* About Section */
|
|
#aboutContent{
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-around;
|
|
align-content: space-around;
|
|
}
|
|
|
|
#aboutText, #aboutImg{
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
#aboutImg img{
|
|
width: 80%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Socialmedia Section */
|
|
#socialmedia{
|
|
margin: auto;
|
|
}
|
|
|
|
#socialSelection input[type=radio]{
|
|
display: none;
|
|
}
|
|
|
|
#socialSelection label{
|
|
font-size: 1.1rem;
|
|
border: none;
|
|
border-bottom: 2px solid var(--theme1);
|
|
user-select: none;
|
|
transition: all 250ms linear;
|
|
padding: 5px;
|
|
margin: 10px 0;
|
|
margin-left: -5px;
|
|
}
|
|
|
|
#socialSelection label:hover, .smRadioInput:checked + .smRadioLabel{
|
|
background: var(--theme1);
|
|
transition: all 200ms linear;
|
|
border-top-right-radius: var(--borderRadius);
|
|
border-top-left-radius: var(--borderRadius);
|
|
}
|
|
|
|
.socialTab{
|
|
display: none;
|
|
background: var(--theme1);
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 200px;
|
|
margin: 0 0 0 -5px;
|
|
padding: var(--padding);
|
|
border-bottom-right-radius: var(--borderRadius);
|
|
border-bottom-left-radius: var(--borderRadius);
|
|
}
|
|
|
|
.socialTab img{
|
|
max-width: 80%;
|
|
}
|
|
|
|
#insta2Container{
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-around;
|
|
align-content: stretch;
|
|
align-items: stretch;
|
|
}
|
|
|
|
#insta2Container img{
|
|
width: 50%;
|
|
border-radius: var(--borderRadius);
|
|
transition: all 300ms linear;
|
|
}
|
|
|
|
#insta2ImgContainer{
|
|
width: 80%;
|
|
height: auto;
|
|
margin: 10px 10%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-around;
|
|
align-content: center;
|
|
align-items: baseline;
|
|
}
|
|
|
|
#insta2ImgContainer img{
|
|
width: 30%;
|
|
height: auto;
|
|
flex-shrink: 1;
|
|
border-radius: var(--borderRadius);
|
|
transition: all 300ms linear;
|
|
}
|
|
|
|
#insta2ImgContainer img:hover, #socialInstagram2 img:hover{
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Project Section */
|
|
#projects{
|
|
margin: auto;
|
|
}
|
|
|
|
#projectContainer{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.project{
|
|
width: 80%;
|
|
max-width: 450px;
|
|
height: auto;
|
|
background: var(--theme1);
|
|
border-radius: var(--borderRadius);
|
|
margin: var(--margin) var(--margin) 40px var(--margin);
|
|
padding: 0 var(--padding) var(--padding) 0;
|
|
}
|
|
|
|
#projectRow2{
|
|
padding-top: 100px;
|
|
}
|
|
|
|
.project img{
|
|
width: 30%;
|
|
height: auto;
|
|
border-top-left-radius: var(--borderRadius);
|
|
}
|
|
|
|
.project h3{
|
|
width: calc(70% - (2 * var(--margin)));
|
|
height: auto;
|
|
float: right;
|
|
margin: var(--margin);
|
|
}
|
|
|
|
.project p{
|
|
margin: var(--padding);
|
|
}
|
|
|
|
.project button{
|
|
width: 80%;
|
|
height: auto;
|
|
margin: var(--padding);
|
|
padding: 10px;
|
|
font-size: 1rem;
|
|
background: var(--theme2);
|
|
color: #fff;
|
|
border: 2px solid #fff;
|
|
border-radius: var(--borderRadius);
|
|
}
|
|
|
|
.project button:hover{
|
|
background: var(--theme1);
|
|
}
|
|
|
|
/* Contact Section */
|
|
#contact input{
|
|
width: calc(100% - 20px);
|
|
height: auto;
|
|
font-size: 1em;
|
|
font-family: var(--font);
|
|
outline: none;
|
|
background: var(--theme1);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
margin: 10px 0;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
#contactNames{
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-content: stretch;
|
|
}
|
|
|
|
#contactNames input{
|
|
width: calc(95% - 20px);
|
|
}
|
|
|
|
#contactNames input:nth-child(1){
|
|
margin: 10px 10px 10px 0;
|
|
}
|
|
|
|
#contactNames input:nth-child(2){
|
|
margin: 10px 0 10px 10px;
|
|
}
|
|
|
|
#contact textarea{
|
|
width: calc(100% - 20px);
|
|
height: auto;
|
|
min-height: 200px;
|
|
font-size: 1em;
|
|
font-family: var(--font);
|
|
outline: none;
|
|
background: var(--theme1);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
margin: 10px 0;
|
|
padding: 5px 10px;
|
|
resize: vertical;
|
|
}
|
|
|
|
#termsLabel p{
|
|
max-width: calc(90% - 45px);
|
|
user-select: none;
|
|
text-align: justify;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
#contact input[type="checkbox"]{
|
|
height: 0;
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
#contact input[type="checkbox"]+label::before{
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 4px;
|
|
border: 2px solid var(--theme1);
|
|
background: var(--background);
|
|
display: block;
|
|
content: "";
|
|
margin: 10px 0;
|
|
float: left;
|
|
}
|
|
|
|
#contact input[type="checkbox"]:checked+label::before{
|
|
box-shadow: inset 0px var(--background);
|
|
background: var(--theme1);
|
|
}
|
|
|
|
#contact button{
|
|
width: calc(100% - 20px);
|
|
height: auto;
|
|
font-size: 1em;
|
|
font-family: var(--font);
|
|
outline: none;
|
|
background: var(--theme1);
|
|
color: #fff;
|
|
border: 2px solid transparent;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
#contact button:hover{
|
|
background: var(--theme2);
|
|
border: 2px dotted;
|
|
}
|
|
|
|
/* Footer & imprint */
|
|
#footer{
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #fff;
|
|
width: auto;
|
|
height: auto;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
#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(--theme1);
|
|
margin: 0;
|
|
margin-top: -21px;
|
|
padding: 15px;
|
|
}
|
|
|
|
/* Scroll to the top button */
|
|
#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;
|
|
}
|
|
|
|
/* Section defaults */
|
|
.sectionTitle{
|
|
color: var(--color);
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.sectionTitle::before{
|
|
content: "#";
|
|
color: var(--theme2);
|
|
margin: 0 10px 0 0;
|
|
user-select: none;
|
|
}
|
|
|
|
@media screen and (max-width:640px){
|
|
.sectionTitle::before{
|
|
margin: 0 10px 0 10px;
|
|
}
|
|
}
|
|
|
|
/* General stylings */
|
|
a{
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover{
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
i{
|
|
text-decoration: none !important;
|
|
outline: none;
|
|
font-style: normal;
|
|
}
|
|
|
|
i:hover{
|
|
text-decoration: none !important;
|
|
outline: none;
|
|
}
|
|
|
|
var{
|
|
font-style: normal;
|
|
}
|
|
|
|
input, textarea{
|
|
outline: none;
|
|
}
|
|
|
|
input::placeholder, textarea::placeholder{
|
|
color: inherit;
|
|
}
|
|
|
|
@media screen and (max-width:640px){
|
|
/* Navbar */
|
|
#navbar-links{
|
|
display: none;
|
|
width: 80%;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
background: var(--theme1);
|
|
color: #fff;
|
|
font-size: 2rem;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-content: stretch;
|
|
align-items: baseline;
|
|
}
|
|
|
|
#navbar-links a{
|
|
margin: 0;
|
|
text-decoration: none;
|
|
padding: 5px;
|
|
transition: all 250ms linear;
|
|
}
|
|
|
|
#navbar-links a:hover{
|
|
text-decoration: none;
|
|
background: var(--theme2);
|
|
border-radius: 12px;
|
|
transition: all 250ms linear;
|
|
}
|
|
|
|
#closeNavbarPlaceholder{
|
|
display: none;
|
|
width: 20%;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
padding: calc(10% - 2rem);
|
|
background: var(--theme2);
|
|
font-size: 2rem;
|
|
}
|
|
|
|
#toggleNav{
|
|
display: block;
|
|
}
|
|
|
|
/* About Section*/
|
|
#aboutContent{
|
|
flex-wrap: wrap;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
/* Socialmedia Section */
|
|
#socialSelection label{
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.socialTab{
|
|
width: calc(90% - (2 * var(--padding)));
|
|
margin: 5%;
|
|
}
|
|
|
|
/* Projects Section */
|
|
#projectRow2{
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* Contact Section */
|
|
#contact input, #contact textarea, #contactNames input, #contactNames input:nth-child(1){
|
|
margin: 10px;
|
|
width: calc(95% - 20px);
|
|
}
|
|
|
|
#contactNames{
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#contact input[type="checkbox"]+label::before{
|
|
margin: 10px;
|
|
}
|
|
|
|
#contact button{
|
|
margin: 20px 10px;
|
|
}
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}
|
|
::-moz-selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}
|