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-28 16:16:15 +02:00 • committed by GitHub
parent 902d2e1173
commit c29c370bff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 145 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

150
style.css
View file

@ -8,6 +8,7 @@ body{
text-align: left;
font-family: "open sans", sans-serif;
scroll-behavior: smooth;
overflow-x: hidden;
--theme1: #3498db;
--theme2: #2980b9;
--background: #181818;
@ -28,6 +29,56 @@ body{
margin: auto;
}
/* Loading screen & effects*/
#loadingScreen{
display: flex;
background: var(--theme1);
width: 100%;
height: 100vh;
position: fixed;
z-index: 1001;
justify-content: center;
align-items: center;
text-align: center;
}
#loader{
width: 60px;
height: 60px;
background: none;
border: 8px solid #fff;
border-radius: 50%;
border-top-color: transparent;
border-style: dotted;
animation: loading 1000ms infinite;
}
@keyframes loading{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.loadEffect{
background: #eee;
background-image: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 33%, rgba(238,238,238,1) 62%, rgba(221,221,221,1) 100%);;
background-size: 400%;
animation: loadEffect 1500ms infinite;
color: transparent;
}
@keyframes loadEffect{
from{
background-position: 100%;
}
to{
background-position: 0;
}
}
/* Navbar */
#navbar{
width: 100%;
@ -181,30 +232,76 @@ body{
max-width: 80%;
}
.socialTab button{
width: 80%;
height: auto;
min-height: 40px;
margin: var(--margin);
background: var(--theme2);
color: #fff;
border: 2px solid #fff;
border-radius: var(--borderRadius);
font-size: 1rem;
}
.socialTab button:hover{
background: var(--theme1);
}
#insta1Container{
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow: 1;
justify-content: space-around;
align-content: center;
align-items: center;
}
#insta1Container div{
width: 50%;
}
#insta2Container{
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-grow: 1;
justify-content: space-around;
align-content: stretch;
align-items: stretch;
}
#insta2Container div{
width: 100%;
align-self: center;
}
#insta2Container div:nth-child(1){
margin: auto auto auto 10%;
}
#insta2Container img{
width: 50%;
width: 70%;
margin: auto 20%;
border-radius: var(--borderRadius);
transition: all 300ms linear;
user-select: none;
}
#insta2ImgContainer{
width: 80%;
width: 100%;
height: auto;
margin: 10px 10%;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-wrap: wrap;
flex-grow: 1;
justify-content: space-around;
align-content: center;
align-items: baseline;
@ -213,15 +310,45 @@ body{
#insta2ImgContainer img{
width: 30%;
height: auto;
flex-shrink: 1;
margin: var(--margin) auto;
border-radius: var(--borderRadius);
transition: all 300ms linear;
user-select: none;
}
#insta2ImgContainer img:hover, #socialInstagram2 img:hover{
border-radius: 50%;
}
#githubContainer{
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow: 1;
justify-content: space-around;
align-content: center;
align-items: center;
}
#githubContainer div{
width: 50%;
align-self: center;
align-content: center;
}
#githubContainer div:nth-child(2){
text-align: center;
}
#githubContainer img{
width: 100%;
height: auto;
user-select: none;
}
/* Project Section */
#projects{
margin: auto;
@ -559,6 +686,19 @@ body{
margin: 5%;
}
#insta2Container{
flex-wrap: wrap;
}
#insta2Container img{
width: 100%;
margin: var(--margin) 10%;
}
#insta1Container div, #insta2ImgContainer img, #githubContainer div{
width: 100%;
}
/* Projects Section */
#projectRow2{
padding-top: 0;