ethanglide/portfolio-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce font size

Browse Source 
It was way too big for mobile pages
This commit is contained in:
ethanglide 2023-11-28 18:39:45 -05:00
parent efc741293e
commit 616521806d
1 changed files with 27 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
style.css
View File

@ -13,11 +13,12 @@ main {
p, h1, h2, h3, h4, h5, h6, li { p, h1, h2, h3, h4, h5, h6, li {
color: #fff; color: #fff;
font-family: 'Roboto Slab', sans-serif; font-family: 'Roboto Slab', sans-serif;
font-weight: 100;
margin: 0; margin: 0;
} }
p, li { p, li {
font-size: 1.5rem; font-size: 1rem;
} }
a { a {
@ -42,42 +43,42 @@ div.header {
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
border-bottom: 0.25rem solid #fff; border-bottom: 0.15rem solid #fff;
} }
div.profile-name { div.profile-name {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
height: 5rem; height: 3rem;
} }
div.profile-name img { div.profile-name img {
width: 5rem; width: 3rem;
height: 5rem; height: 3rem;
} }
div.profile-name h1 { div.profile-name h1 {
font-size: 3rem; font-size: 1.5rem;
padding: 0%; padding: 0%;
} }
div.social-media { div.social-media {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1.5rem; gap: 1rem;
} }
div.social-media a img { div.social-media a img {
width: 3rem; width: 2rem;
height: 3rem; height: 2rem;
transition: box-shadow 0.2s ease-out 0s; transition: box-shadow 0.2s ease-out 0s;
} }
div.social-media a img[src="./Pictures/gmail.png"] { div.social-media a img[src="./Pictures/gmail.png"] {
width: 3.7rem; width: 2.5rem;
height: 3rem; height: 2rem;
border-radius: 0.4rem; border-radius: 0.1rem;
transition: box-shadow 0.2s ease-out 0s; transition: box-shadow 0.2s ease-out 0s;
} }
@ -107,8 +108,8 @@ div.content > div {
div.section { div.section {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
gap: 2rem; gap: 1rem;
padding: 1rem; padding: 0.7rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: #18181800 0.15rem solid; border: #18181800 0.15rem solid;
transition: all 0.25s ease-out 0s; transition: all 0.25s ease-out 0s;
@ -120,12 +121,12 @@ div.section:hover {
} }
div.section h2 { div.section h2 {
font-size: 2rem; font-size: 1.5rem;
margin: 0%; margin: 0%;
} }
div.languages-images { div.languages-images {
width: 15%; width: min(10rem, 15%);
} }
div.languages-images div { div.languages-images div {
@ -162,7 +163,7 @@ li li {
div.advertience-wrapper { div.advertience-wrapper {
width: 20%; width: 20%;
padding: 1rem; padding: 1rem;
min-width: 7rem; max-width: 7rem;
} }
div.advertience-wrapper > div { div.advertience-wrapper > div {
@ -186,7 +187,7 @@ div.advertience-wrapper > div > img {
div.jump-wrapper { div.jump-wrapper {
width: 20%; width: 20%;
min-width: 10rem; max-width: 10rem;
} }
div.jump-wrapper > div { div.jump-wrapper > div {
@ -208,7 +209,7 @@ div.jump-wrapper > div > img {
div.cosmotica-wrapper { div.cosmotica-wrapper {
width: 50%; width: 50%;
min-width: 20rem; max-width: 20rem;
} }
div.cosmotica-wrapper > div { div.cosmotica-wrapper > div {
@ -269,7 +270,7 @@ div.experience-header {
} }
.large-list li { .large-list li {
font-size: 2rem; font-size: 1.5rem;
} }
@media only screen and (max-device-width: 700px) { @media only screen and (max-device-width: 700px) {
@ -284,16 +285,16 @@ div.experience-header {
} }
div.profile-name h1 { div.profile-name h1 {
font-size: 1.5rem; font-size: 1rem;
} }
div.social-media { div.social-media {
gap: 1rem; gap: 0.8rem;
} }
div.social-media a img { div.social-media a img {
width: 2rem; width: 1.5rem;
height: 2rem; height: 1.5rem;
} }
div.social-media a img[src="./Pictures/gmail.png"] { div.social-media a img[src="./Pictures/gmail.png"] {
@ -311,7 +312,7 @@ div.experience-header {
} }
div.languages-images div { div.languages-images div {
grid-template-columns: repeat(3, 33%); grid-template-columns: repeat(3, min(33%));
} }
div.cosmotica-wrapper { div.cosmotica-wrapper {
@ -320,6 +321,6 @@ div.experience-header {
} }
.large-list li { .large-list li {
font-size: 1.5rem; font-size: 1rem;
} }
} }