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-14 19:05:08 +02:00 • committed by GitHub
parent 79c47efd58
commit 09fa5bf0d6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

54
style.css
View file

@ -27,6 +27,7 @@ body{
margin: auto; margin: auto;
} }
/* Navbar */
#navbar{ #navbar{
width: 100%; width: 100%;
height: 56px; height: 56px;
@ -74,6 +75,7 @@ body{
display: none; display: none;
} }
/* Home */
#home{ #home{
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -113,6 +115,7 @@ body{
background: var(--theme1); background: var(--theme1);
} }
/* About Section */
#aboutContent{ #aboutContent{
width: 100%; width: 100%;
display: flex; display: flex;
@ -130,6 +133,7 @@ body{
width: 80%; width: 80%;
} }
/* Socialmedia Section */
#socialmedia{ #socialmedia{
margin: auto; margin: auto;
} }
@ -151,9 +155,28 @@ body{
#socialSelection label:hover, .smRadioInput:checked + .smRadioLabel{ #socialSelection label:hover, .smRadioInput:checked + .smRadioLabel{
background: var(--theme1); background: var(--theme1);
transition: all 250ms linear; 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%;
}
/* Project Section */
#projects{ #projects{
margin: auto; margin: auto;
} }
@ -164,7 +187,7 @@ body{
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: flex-start;
} }
.project{ .project{
@ -173,12 +196,12 @@ body{
height: auto; height: auto;
background: var(--theme1); background: var(--theme1);
border-radius: var(--borderRadius); border-radius: var(--borderRadius);
margin: var(--margin); margin: var(--margin) var(--margin) 40px var(--margin);
padding: 0 var(--padding) var(--padding) 0; padding: 0 var(--padding) var(--padding) 0;
} }
.project:nth-child(2n){ #projectRow2{
margin-top: 100px; padding-top: 100px;
} }
.project img{ .project img{
@ -214,6 +237,7 @@ body{
background: var(--theme1); background: var(--theme1);
} }
/* Footer & imprint */
#footer{ #footer{
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -243,6 +267,7 @@ body{
padding: 15px; padding: 15px;
} }
/* Scroll to the top button */
#scroll-top{ #scroll-top{
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -269,6 +294,7 @@ body{
margin-top: -5px; margin-top: -5px;
} }
/* Section defaults */
.sectionTitle{ .sectionTitle{
color: var(--color); color: var(--color);
font-size: 2rem; font-size: 2rem;
@ -281,6 +307,7 @@ body{
user-select: auto; user-select: auto;
} }
/* General stylings */
a{ a{
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@ -311,6 +338,7 @@ body{
} }
@media screen and (max-width:640px){ @media screen and (max-width:640px){
/* Navbar */
#navbar-links{ #navbar-links{
display: none; display: none;
width: 80%; width: 80%;
@ -359,10 +387,22 @@ body{
display: block; display: block;
} }
.project:nth-child(2n){ /* Socialmedia Section */
margin-top: auto; #socialSelection label{
font-size: 0.9rem;
}
.socialTab{
width: calc(90% - (2 * var(--padding)));
margin: 5%;
}
/* Projects Section */
#projectRow2{
padding-top: 0;
} }
} }
/* Selection */
::selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);} ::selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}
::-moz-selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);} ::-moz-selection {background: var(--theme1); color: #ffffff; border-radius: var(--borderRadius);}