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

Fix mobile

Browse Source
This commit is contained in:
Parker M. 2024-12-24 03:02:28 -06:00
parent 889d599d05
commit 60e6977e36
Signed by: parker
GPG Key ID: 505ED36FC12B5D5E
2 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
css/index.css
View File

@ -20,22 +20,19 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center;
min-height: 200vh; min-height: 200vh;
} }
nav { nav {
width: 100vw;
font-weight: 600; font-weight: 600;
position: absolute; position: absolute;
top: 0; top: 30px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 1rem; font-size: 1rem;
text-align: center; text-align: center;
margin-top: 2rem;
width: 90vw;
} }
nav a { nav a {
@ -51,13 +48,31 @@ nav a:hover {
transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out;
} }
/* Nav media query for mobile */
@media only screen and (max-width: 600px) {
nav a {
display: none;
text-align: right;
}
nav #toggle {
display: block;
}
}
#toggle { #toggle {
/* Move to the top right of the screen */ /* Move to the top right of the screen */
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 100px;
margin: 1rem; cursor: pointer;
font-size: 1.5rem; }
/* Toggle media query for mobile */
@media only screen and (max-width: 600px) {
#toggle {
right: 50px;
}
} }
#moon, #sun { #moon, #sun {
@ -73,15 +88,7 @@ nav a:hover {
opacity: 0; opacity: 0;
} }
/* Toggle media query for mobile */ /* Header styles */
@media only screen and (max-width: 600px) {
#toggle {
display: none;
}
}
/* Container styles */
header { header {
position: absolute; position: absolute;
top: 45%; top: 45%;
@ -103,12 +110,12 @@ header h2 {
/* Header media query for mobile */ /* Header media query for mobile */
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
header h1 { header h1 {
font-size: 1.5rem; font-size: 33px;
width: 300px; width: 300px;
} }
header h2 { header h2 {
margin: 1rem 0 2rem 0; font-size: 23px;
width: 300px; width: 300px;
} }
} }
@ -118,7 +125,7 @@ header a {
} }
svg { svg {
margin: 0 1rem; margin: 0 15px;
height: 50px; height: 50px;
width: 50px; width: 50px;
} }
@ -128,7 +135,7 @@ svg {
svg { svg {
height: 40px; height: 40px;
width: 40px; width: 40px;
margin: 0 0.5rem; margin: 0 5px;
} }
} }
@ -140,7 +147,7 @@ svg:hover {
#down-arrow { #down-arrow {
position: absolute; position: absolute;
bottom: 2%; bottom: 30px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 2rem; font-size: 2rem;

3
index.html
View File

@ -20,8 +20,7 @@
</head> </head>
<body> <body>
<nav> <nav>
<a href="/parker.asc" target="_blank">PGP Fingerprint: FD5C 7FFF 860B 6E97 7049 E27E 505E D36F C12B 5D5E</a> <a href="/parker.asc" target="_blank">PGP Fingerprint: FD5C 7FFF 860B 6E97 7049 E27E 505E D36F C12B 5D5E<br><br></a>
<br><br>
<a href="http://o2o2o2yfrueii33hxjja3foegbkjckxg2fy4vr4y4pqvnk2oxqknvjqd.onion" target="_blank">Tor ( Mirror )</a> <a href="http://o2o2o2yfrueii33hxjja3foegbkjckxg2fy4vr4y4pqvnk2oxqknvjqd.onion" target="_blank">Tor ( Mirror )</a>
<a id="toggle"> <a id="toggle">