diff --git a/assets/guyandpc.svg b/assets/guyandpc.svg new file mode 100644 index 0000000..464ec4d --- /dev/null +++ b/assets/guyandpc.svg @@ -0,0 +1,211 @@ + + \ No newline at end of file diff --git a/index.css b/index.css index 6d3d8b0..89e06f7 100644 --- a/index.css +++ b/index.css @@ -397,7 +397,7 @@ ul { .presentation { background: #121214 no-repeat; - background-image: url(assets/astronaut.svg); + background-image: url(assets/guyandpc.svg); background-size: 50% 90vh; background-position: 115% -15px; min-height: 100vh; @@ -1298,6 +1298,11 @@ ul { padding: 20px 10px; } } +@media screen and (max-width: 600px) { + .footer { + padding: 35px 0; + } +} @media screen and (max-width: 300px) { .footer { padding: 20px 0; @@ -1333,11 +1338,20 @@ ul { } } .footer .footer__credits { - text-align: right; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; } .footer .footer__credits h2 { color: #a8a8b3; - margin-bottom: 30px; + margin-bottom: 5px; font-size: 1.3rem; } @media screen and (max-width: 800px) { @@ -1349,6 +1363,9 @@ ul { @media screen and (max-width: 800px) { .footer .footer__credits { margin-top: 30px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } } .footer .footer__credits a { @@ -1356,19 +1373,19 @@ ul { display: block; font-size: 1.1rem; border-bottom: 1px solid transparent; + border-color: #734bd1; padding: 10px 0 2px 0; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; } @media screen and (max-width: 800px) { .footer .footer__credits a { - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; margin: auto; font-size: 1rem; } } .footer .footer__credits a:hover { - border-color: #734bd1; color: #e1e1e6; } .footer .footer__contactme { @@ -1408,7 +1425,7 @@ ul { .footer .footer__contactme h2 { width: 100%; color: #a8a8b3; - margin-bottom: 30px; + margin-bottom: 5px; font-size: 1.3rem; } @media screen and (max-width: 800px) { @@ -1419,14 +1436,14 @@ ul { } .footer .footer__contactme a { margin: 4px 0; - padding-bottom: 3px; + padding-bottom: 5px; color: #a8a8b3; -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; -webkit-transition: all 0.3s; transition: all 0.3s; - border-bottom: 2px solid transparent; + border-bottom: 1px solid transparent; display: -webkit-box; display: -ms-flexbox; display: flex; @@ -1440,10 +1457,10 @@ ul { justify-content: space-around; gap: 1rem; font-size: 1.2rem; + border-color: #734bd1; } .footer .footer__contactme a:hover { color: #e1e1e6; - border-color: #734bd1; } .footer .footer__contactme a:hover .footer__circle { border-color: #734bd1; @@ -1453,6 +1470,13 @@ ul { font-size: 1rem; } } +@media screen and (max-width: 450px) { + .footer .footer__contactme a { + -ms-flex-item-align: auto; + -ms-grid-row-align: auto; + align-self: auto; + } +} .footer .footer__contactme img { width: 15px; -o-object-fit: cover; diff --git a/index.html b/index.html index 604104d..1ea7b9c 100644 --- a/index.html +++ b/index.html @@ -498,6 +498,9 @@