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

18
app/templates/index.html
View File

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