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-07-02 22:06:56 +02:00 • committed by GitHub
parent a287d4b867
commit 37b03d03ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 75 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

87
style.css
View file

@ -201,9 +201,9 @@ body{
min-height: 40px; min-height: 40px;
margin: var(--margin) 0; margin: var(--margin) 0;
padding: var(--padding); padding: var(--padding);
background: var(--theme2); background: transparent;
color: #fff; color: #fff;
border: 2px solid transparent; border: 2px solid #fff;
border-radius: var(--buttonRadius); border-radius: var(--buttonRadius);
font-size: 1rem; font-size: 1rem;
transition: all 200ms linear; transition: all 200ms linear;
@ -211,7 +211,7 @@ body{
#home button:hover{ #home button:hover{
background: var(--theme2); background: var(--theme2);
border: 2px solid #fff; border: 2px solid var(--theme2);
} }
/* About Section */ /* About Section */
@ -364,17 +364,41 @@ body{
} }
#insta2Container div:nth-child(1){ #insta2Container div:nth-child(1){
margin: auto auto auto 10%; padding: 0 10%;
} }
#insta2Container img{ #insta2Container img{
width: 70%; width: 100%;
margin: auto 20%;
border-radius: var(--borderRadius); border-radius: var(--borderRadius);
transition: all 300ms linear; transition: all 300ms linear;
user-select: none; user-select: none;
} }
.insta2FirstImg{
position: relative;
}
.insta2FirstImg::after{
content: "";
position: absolute;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
align-items: center;
top: 0;
left: calc(10% - 9px);
width: calc(70% - 18px);
height: calc(100% - 4px);
border-radius: var(--borderRadius);
color: #fff;
background: rgba(0, 0, 0, 0);
transition: all 300ms linear;
font-family: var(--font);
font-size: 1.2rem;
font-weight: 700;
}
#insta2ImgContainer{ #insta2ImgContainer{
width: 100%; width: 100%;
height: auto; height: auto;
@ -388,19 +412,58 @@ body{
align-items: baseline; align-items: baseline;
} }
#insta2ImgContainer img{ .insta2ImgDiv img{
width: 30%; width: 100%;
max-width: 100%;
height: auto; height: auto;
margin: var(--margin) auto;
border-radius: var(--borderRadius); border-radius: var(--borderRadius);
transition: all 300ms linear; transition: all 300ms linear;
user-select: none; user-select: none;
margin: 0;
} }
#insta2ImgContainer img:hover, #socialInstagram2 img:hover{ .insta2ImgDiv{
position: relative;
width: 30%;
height: auto;
margin: var(--margin) auto;
padding: 0;
}
.insta2ImgDiv::after{
content: ""; /* Location Icon: \f1da */
position: absolute;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 5px);
border-radius: var(--borderRadius);
color: #fff;
background: rgba(0, 0, 0, 0);
transition: all 300ms linear;
/*font-family: akar-icons;*/
font-family: var(--font);
font-size: 1.2rem;
font-weight: 700;
}
.insta2ImgDiv:hover > .insta2Img{
border-radius: 50%; border-radius: 50%;
} }
.insta2ImgDiv:hover::after, .insta2FirstImg:hover::after{
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
content: attr(data-location);
display: flex;
transition: all 300ms linear;
}
#githubContainer{ #githubContainer{
width: 100%; width: 100%;
height: auto; height: auto;
@ -938,12 +1001,12 @@ body{
flex-wrap: wrap; flex-wrap: wrap;
} }
#insta2Container img{ #insta2Container img, .insta2ImgDiv{
width: 100%; width: 100%;
margin: var(--margin) 10%; margin: var(--margin) 10%;
} }
#insta1Container div, #insta2ImgContainer img, #githubContainer div{ #insta1Container div, .insta2ImgDiv, #githubContainer div{
width: 100%; width: 100%;
} }