Update style.css

This commit is contained in:
Michi 2022-06-27 18:47:03 +02:00 committed by GitHub
parent f07efb23fc
commit 45f4a070f9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -19,6 +19,7 @@ body{
--borderRadius: 12px; --borderRadius: 12px;
--font: "open sans", sans-serif; --font: "open sans", sans-serif;
--transition: all 300ms linear; --transition: all 300ms linear;
--buttonRadius: 4px;
} }
#content{ #content{
@ -27,7 +28,7 @@ body{
.inner-width{ .inner-width{
width: 100%; width: 100%;
max-width: 1250px; max-width: clamp(1100px, 90%, 1250px);
margin: auto; margin: auto;
} }
@ -145,6 +146,20 @@ body{
align-items: center; align-items: center;
} }
#home h1{
font-weight: 600;
background: linear-gradient(90deg, rgba(150,237,32,1) 0%, rgba(0,212,255,1) 75%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: var(--transition);
}
#home h1:hover{
background: linear-gradient(90deg, rgba(150,237,32,1) 0%, rgba(0,212,255,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#home img{ #home img{
width: 100%; width: 100%;
height: auto; height: auto;
@ -157,16 +172,19 @@ body{
width: 100%; width: 100%;
height: auto; height: auto;
min-height: 40px; min-height: 40px;
margin: var(--margin); margin: var(--margin) 0;
padding: var(--padding);
background: var(--theme2); background: var(--theme2);
color: #fff; color: #fff;
border: 2px solid #fff; border: 2px solid transparent;
border-radius: var(--borderRadius); border-radius: var(--buttonRadius);
font-size: 1rem; font-size: 1rem;
transition: all 200ms linear;
} }
#home button:hover{ #home button:hover{
background: var(--theme1); background: var(--theme2);
border: 2px solid #fff;
} }
/* About Section */ /* About Section */
@ -269,13 +287,15 @@ body{
margin: var(--margin); margin: var(--margin);
background: var(--theme2); background: var(--theme2);
color: #fff; color: #fff;
border: 2px solid #fff; border: 2px solid transparent;
border-radius: var(--borderRadius); border-radius: var(--buttonRadius);
font-size: 1rem; font-size: 1rem;
transition: all 200ms linear;
} }
.socialTab button:hover{ .socialTab button:hover{
background: var(--theme1); background: var(--theme2);
border: 2px solid #fff;
} }
#insta1Container{ #insta1Container{
@ -429,19 +449,21 @@ body{
} }
.project button{ .project button{
width: 80%; width: 90%;
height: auto; height: auto;
margin: var(--padding); margin: 5%;
padding: 10px; padding: 10px;
font-size: 1rem; font-size: 1rem;
background: var(--theme2); background: var(--theme2);
color: #fff; color: #fff;
border: 2px solid #fff; border: 2px solid transparent;
border-radius: var(--borderRadius); border-radius: var(--buttonRadius);
transition: all 200ms linear;
} }
.project button:hover{ .project button:hover{
background: var(--theme1); background: var(--theme2);
border: 2px solid #fff;
} }
/* FAQ Section */ /* FAQ Section */