parker/pkrm.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Widen space for icons

Browse Source
This commit is contained in:
Parker M. 2024-12-22 04:10:39 -06:00
parent 3ef2cef8ee
commit e291ebcb51
Signed by: parker
GPG Key ID: 505ED36FC12B5D5E
2 changed files with 34 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/static/css/index.css
View File

@ -68,24 +68,35 @@ nav a:hover {
/* Container styles */ /* Container styles */
.container { .container {
position: absolute; display: flex;
top: 50%; flex-direction: column;
left: 50%; justify-content: center;
transform: translate(-50%, -50%); align-items: center;
font-size: 1.75rem; height: 80vh;
margin: 0;
text-align: center; text-align: center;
font-size: 1.75rem;
}
.text {
width: 500px; width: 500px;
} }
.container h1 { .text h1 {
margin-bottom: 0; margin-bottom: 0;
} }
.container p { .text p {
margin: 2rem 0 3rem 0; margin: 2rem 0 3rem 0;
} }
/* Icon styles */
.icons { .icons {
width: 100%;
}
.icon {
margin: 0 1rem; margin: 0 1rem;
height: 50px; height: 50px;
width: 50px; width: 50px;
@ -94,12 +105,12 @@ nav a:hover {
/* Icons media query for mobile */ /* Icons media query for mobile */
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.icons { .icon {
margin: 0 0.5rem; margin: 0 0.5rem;
} }
} }
.icons:hover { .icon:hover {
cursor: pointer; cursor: pointer;
opacity: 0.6; opacity: 0.6;
transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out;
@ -108,16 +119,16 @@ nav a:hover {
/* Continer media query for mobile */ /* Continer media query for mobile */
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.container { .text {
font-size: 1.5rem; font-size: 1.5rem;
width: 300px; width: 300px;
} }
.container p { .text p {
margin: 1rem 0 2rem 0; margin: 1rem 0 2rem 0;
} }
.icons { .icon {
height: 40px; height: 40px;
width: 40px; width: 40px;
} }

14
app/templates/index.html
View File

@ -29,14 +29,18 @@
</nav> </nav>
<div class="container"> <div class="container">
<div class="text">
<h1>Hello, I'm Parker</h1> <h1>Hello, I'm Parker</h1>
<p>A student with a strong passion for technology and privacy.</p> <p>A student with a strong passion for technology and privacy.</p>
</div>
<a href="mailto:contact@pkrm.dev" target="_blank"><img class="icons" src="{{ url_for('static', filename='mail.png') }}" alt="Mail Logo"></a> <div class="icons">
<a href="https://github.com/packetparker" target="_blank"><img class="icons" src="{{ url_for('static', filename='github.png') }}" alt="GitHub Logo"></a> <a href="mailto:contact@pkrm.dev" target="_blank"><img class="icon" src="{{ url_for('static', filename='mail.png') }}" alt="Mail Logo"></a>
<a href="https://www.linkedin.com/in/parker-m/" target="_blank"><img class="icons" src="{{ url_for('static', filename='linkedin.png') }}" alt="LinkedIn Logo"></a> <a href="https://github.com/packetparker" target="_blank"><img class="icon" src="{{ url_for('static', filename='github.png') }}" alt="GitHub Logo"></a>
<a href="xmpp:contact@pkrm.dev" target="_blank"><img class="icons" src="{{ url_for('static', filename='xmpp.png') }}" alt="XMPP Logo"></a> <a href="https://www.linkedin.com/in/parker-m/" target="_blank"><img class="icon" src="{{ url_for('static', filename='linkedin.png') }}" alt="LinkedIn Logo"></a>
<a href="/pgp" target="_blank"><img class="icons" src="{{ url_for('static', filename='gnupg.png') }}" alt="GnuPG Logo"></a> <a href="xmpp:contact@pkrm.dev" target="_blank"><img class="icon" src="{{ url_for('static', filename='xmpp.png') }}" alt="XMPP Logo"></a>
<a href="/pgp" target="_blank"><img class="icon" src="{{ url_for('static', filename='gnupg.png') }}" alt="GnuPG Logo"></a>
</div>
</div> </div>
<footer>PGP Fingerprint: FD5C 7FFF 860B 6E97 7049 E27E 505E D36F C12B 5D5E</footer> <footer>PGP Fingerprint: FD5C 7FFF 860B 6E97 7049 E27E 505E D36F C12B 5D5E</footer>