Move CSS to individual files

This commit is contained in:
Parker M. 2024-02-19 02:34:51 -06:00
parent 1bf1b0bbfe
commit 844a5c3ead
No known key found for this signature in database
GPG Key ID: 95CD2E0C7E329F2A
9 changed files with 553 additions and 565 deletions

109
app/static/css/about.css Normal file
View File

@ -0,0 +1,109 @@
/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
background-color: #242528;
color: #9F9FAA;
}
/* Navbar styles */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #212223;
color: #9F9FAA;
}
nav a {
text-decoration: none;
color: #9F9FAA;
font-size: 1.5rem;
margin: 0 1rem;
}
nav a:hover {
color: #fff;
}
.navbar-left {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 15%;
}
.navbar-right {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 15%;
}
/* Navbar media query for mobile */
@media only screen and (max-width: 600px) {
nav a {
margin: 0;
font-size: 1rem;
}
.navbar-left {
margin: 0 1rem;
}
.navbar-right {
margin: 0 1rem;
}
.navbar-right a {
margin-left: 1rem;
}
}
/* Container styles */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.75rem;
text-align: center;
width: 600px;
}
/* Continer media query for mobile */
@media only screen and (max-width: 600px) {
.container {
font-size: 1.25rem;
width: 300px;
}
.container p {
margin: 1rem 0 2rem 0;
}
}
/* Footer styles */
footer {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
width: 90vw;
}
/* Footer media query for mobile */
@media only screen and (max-width: 600px) {
footer {
bottom: -2rem;
}
}

186
app/static/css/contact.css Normal file
View File

@ -0,0 +1,186 @@
/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
body {
margin: 0;
padding: 0;
background-color: #242528;
color: #9F9FAA;
}
/* Navbar styles */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #212223;
color: #9F9FAA;
}
nav a {
text-decoration: none;
color: #9F9FAA;
font-size: 1.5rem;
margin: 0 1rem;
}
nav a:hover {
color: #fff;
}
.navbar-left {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 15%;
}
.navbar-right {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 15%;
}
/* Navbar media query for mobile */
@media only screen and (max-width: 600px) {
nav a {
margin: 0;
font-size: 1rem;
}
.navbar-left {
margin: 0 1rem;
}
.navbar-right {
margin: 0 1rem;
}
.navbar-right a {
margin-left: 1rem;
}
}
/* Container styles */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.75rem;
text-align: center;
border: 1px solid #9F9FAA;
border-radius: 5px;
padding: 2rem;
height: 450px;
width: 550px;
}
.container h1 {
margin: 0 0 1rem 0;
}
/* Continer media query for mobile */
@media only screen and (max-width: 600px) {
.container {
font-size: 1.25rem;
width: 250px;
}
.container h1 {
margin: 0 0 2rem 0;
}
}
/* Form styles */
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input {
margin: 0.75rem 0;
padding: 0.5rem 1rem;
border: 1px solid #9F9FAA;
border-radius: 5px;
background-color: #242528;
color: #9F9FAA;
font-size: 1.25rem;
width: 500px;
}
input[type="submit"] {
width: calc(500px + 2rem);
cursor: pointer;
}
textarea {
margin: 0.75rem 0;
padding: 0.5rem 1rem;
border: 1px solid #9F9FAA;
border-radius: 5px;
background-color: #242528;
color: #9F9FAA;
font-size: 1.25rem;
height: 100px;
width: 500px;
resize: none;
}
/* Form media query for mobile */
@media only screen and (max-width: 600px) {
input {
width: 250px;
}
input[type="submit"] {
width: calc(250px + 2rem);
}
textarea {
width: 250px;
}
}
/* Success/Error messages */
.success-message {
color: #71A172;
font-size: 1.25rem;
margin-top: 0.5rem;
}
.error-message {
color: #B16161;
font-size: 1.25rem;
margin-top: 0.5rem;
}
/* Footer styles */
footer {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
width: 90vw;
}
/* Footer media query for mobile */
@media only screen and (max-width: 600px) {
footer {
bottom: -2rem;
}
}

137
app/static/css/index.css Normal file
View File

@ -0,0 +1,137 @@
/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
background-color: #242528;
color: #9F9FAA;
}
/* Navbar styles */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #212223;
color: #9F9FAA;
}
nav a {
text-decoration: none;
color: #9F9FAA;
font-size: 1.5rem;
margin: 0 1rem;
}
nav a:hover {
color: #fff;
}
.navbar-left {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 15%;
}
.navbar-right {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 15%;
}
/* Navbar media query for mobile */
@media only screen and (max-width: 600px) {
nav a {
margin: 0;
font-size: 1rem;
}
.navbar-left {
margin: 0 1rem;
}
.navbar-right {
margin: 0 1rem;
}
.navbar-right a {
margin-left: 1rem;
}
}
/* Container styles */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.75rem;
text-align: center;
width: 500px;
}
.container h1 {
margin-bottom: 0;
}
.container p {
margin: 2rem 0 3rem 0;
}
.icons {
margin: 0 1rem;
height: 50px;
width: 50px;
color: #9F9FAA;
}
.icons:hover {
cursor: pointer;
opacity: 0.6;
transition: opacity 0.25s ease-in-out;
}
/* Continer media query for mobile */
@media only screen and (max-width: 600px) {
.container {
font-size: 1.5rem;
width: 300px;
}
.container p {
margin: 1rem 0 2rem 0;
}
.icons {
height: 40px;
width: 40px;
}
}
/* Footer styles */
footer {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
width: 90vw;
}
/* Footer media query for mobile */
@media only screen and (max-width: 600px) {
footer {
bottom: -2rem;
}
}

114
app/static/css/pgp.css Normal file
View File

@ -0,0 +1,114 @@
/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
background-color: #242528;
color: #9F9FAA;
}
/* Navbar styles */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #212223;
color: #9F9FAA;
}
nav a {
text-decoration: none;
color: #9F9FAA;
font-size: 1.5rem;
margin: 0 1rem;
}
nav a:hover {
color: #fff;
}
.navbar-left {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 15%;
}
.navbar-right {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 15%;
}
/* Navbar media query for mobile */
@media only screen and (max-width: 600px) {
nav a {
margin: 0;
font-size: 1rem;
}
.navbar-left {
margin: 0 1rem;
}
.navbar-right {
margin: 0 1rem;
}
.navbar-right a {
margin-left: 1rem;
}
}
/* Container styles */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.25rem;
text-align: center;
width: 600px;
word-break: break-all;
}
.container p {
text-align: left;
}
/* Continer media query for mobile */
@media only screen and (max-width: 600px) {
.container {
font-size: 1.25rem;
width: 300px;
}
.container p {
margin: 1rem 0 2rem 0;
}
}
/* Footer styles */
footer {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
width: 90vw;
}
/* Footer media query for mobile */
@media only screen and (max-width: 600px) {
footer {
bottom: -2rem;
}
}

View File

@ -8,6 +8,7 @@
<!-- Encourage indexing -->
<meta name="robots" content="index, follow">
<link rel="stylesheet", href="{{ url_for('static', filename='css/about.css') }}">
<meta property="og:title" content="About Me | pkrm.dev"/>
<meta property="og:url" content="https://pkrm.dev"/>
<meta property="og:type" content="website"/>
@ -33,116 +34,4 @@
<footer>PGP Fingerprint: 58B7 6B8B BAB8 794D 21E2 579C 95CD 2E0C 7E32 9F2A</footer>
</body>
</html>
<style>
/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
background-color: #242528;
color: #9F9FAA;
}
/* Navbar styles */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #212223;
color: #9F9FAA;
}
nav a {
text-decoration: none;
color: #9F9FAA;
font-size: 1.5rem;
margin: 0 1rem;
}
nav a:hover {
color: #fff;
}
.navbar-left {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 15%;
}
.navbar-right {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 15%;
}
/* Navbar media query for mobile */
@media only screen and (max-width: 600px) {
nav a {
margin: 0;
font-size: 1rem;
}
.navbar-left {
margin: 0 1rem;
}
.navbar-right {
margin: 0 1rem;
}
.navbar-right a {
margin-left: 1rem;
}
}
/* Container styles */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.75rem;
text-align: center;
width: 600px;
}
/* Continer media query for mobile */
@media only screen and (max-width: 600px) {
.container {
font-size: 1.25rem;
width: 300px;
}
.container p {
margin: 1rem 0 2rem 0;
}
}
/* Footer styles */
footer {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
width: 90vw;
}
/* Footer media query for mobile */
@media only screen and (max-width: 600px) {
footer {
bottom: -2rem;
}
}
</style>
</html>

View File

@ -9,8 +9,9 @@
<meta name="robots" content="index, follow">
<!-- Add altcha.js file -->
<script async defer src="{{ url_for('static', filename='altcha.js') }}" type="module"></script>
<script async defer src="{{ url_for('static', filename='js/altcha.js') }}" type="module"></script>
<link rel="stylesheet", href="{{ url_for('static', filename='css/contact.css') }}">
<meta property="og:title" content="Contact | pkrm.dev"/>
<meta property="og:url" content="https://pkrm.dev/contact"/>
<meta property="og:type" content="website"/>
@ -54,199 +55,6 @@
</body>
</html>
<style>
/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
body {
margin: 0;
padding: 0;
background-color: #242528;
color: #9F9FAA;
}
/* Navbar styles */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #212223;
color: #9F9FAA;
}
nav a {
text-decoration: none;
color: #9F9FAA;
font-size: 1.5rem;
margin: 0 1rem;
}
nav a:hover {
color: #fff;
}
.navbar-left {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 15%;
}
.navbar-right {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 15%;
}
/* Navbar media query for mobile */
@media only screen and (max-width: 600px) {
nav a {
margin: 0;
font-size: 1rem;
}
.navbar-left {
margin: 0 1rem;
}
.navbar-right {
margin: 0 1rem;
}
.navbar-right a {
margin-left: 1rem;
}
}
/* Container styles */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.75rem;
text-align: center;
border: 1px solid #9F9FAA;
border-radius: 5px;
padding: 2rem;
height: 450px;
width: 550px;
}
.container h1 {
margin: 0 0 1rem 0;
}
/* Continer media query for mobile */
@media only screen and (max-width: 600px) {
.container {
font-size: 1.25rem;
width: 250px;
}
.container h1 {
margin: 0 0 2rem 0;
}
}
/* Form styles */
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input {
margin: 0.75rem 0;
padding: 0.5rem 1rem;
border: 1px solid #9F9FAA;
border-radius: 5px;
background-color: #242528;
color: #9F9FAA;
font-size: 1.25rem;
width: 500px;
}
input[type="submit"] {
width: calc(500px + 2rem);
cursor: pointer;
}
textarea {
margin: 0.75rem 0;
padding: 0.5rem 1rem;
border: 1px solid #9F9FAA;
border-radius: 5px;
background-color: #242528;
color: #9F9FAA;
font-size: 1.25rem;
height: 100px;
width: 500px;
resize: none;
}
/* Form media query for mobile */
@media only screen and (max-width: 600px) {
input {
width: 250px;
}
input[type="submit"] {
width: calc(250px + 2rem);
}
textarea {
width: 250px;
}
}
altcha-widget {
visibility: none;
}
/* Success/Error messages */
.success-message {
color: #71A172;
font-size: 1.25rem;
margin-top: 0.5rem;
}
.error-message {
color: #B16161;
font-size: 1.25rem;
margin-top: 0.5rem;
}
/* Footer styles */
footer {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
width: 90vw;
}
/* Footer media query for mobile */
@media only screen and (max-width: 600px) {
footer {
bottom: -2rem;
}
}
</style>
<script>
// Get the form
const form = document.querySelector('form');

View File

@ -8,6 +8,7 @@
<!-- Encourage indexing -->
<meta name="robots" content="index, follow">
<link rel="stylesheet", href="{{ url_for('static', filename='css/index.css') }}">
<meta property="og:title" content="Home | pkrm.dev"/>
<meta property="og:url" content="https://pkrm.dev/"/>
<meta property="og:type" content="website"/>
@ -39,144 +40,4 @@
<footer>PGP Fingerprint: 58B7 6B8B BAB8 794D 21E2 579C 95CD 2E0C 7E32 9F2A</footer>
</body>
</html>
<style>
/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
background-color: #242528;
color: #9F9FAA;
}
/* Navbar styles */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #212223;
color: #9F9FAA;
}
nav a {
text-decoration: none;
color: #9F9FAA;
font-size: 1.5rem;
margin: 0 1rem;
}
nav a:hover {
color: #fff;
}
.navbar-left {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 15%;
}
.navbar-right {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 15%;
}
/* Navbar media query for mobile */
@media only screen and (max-width: 600px) {
nav a {
margin: 0;
font-size: 1rem;
}
.navbar-left {
margin: 0 1rem;
}
.navbar-right {
margin: 0 1rem;
}
.navbar-right a {
margin-left: 1rem;
}
}
/* Container styles */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.75rem;
text-align: center;
width: 500px;
}
.container h1 {
margin-bottom: 0;
}
.container p {
margin: 2rem 0 3rem 0;
}
.icons {
margin: 0 1rem;
height: 50px;
width: 50px;
color: #9F9FAA;
}
.icons:hover {
cursor: pointer;
opacity: 0.6;
transition: opacity 0.25s ease-in-out;
}
/* Continer media query for mobile */
@media only screen and (max-width: 600px) {
.container {
font-size: 1.5rem;
width: 300px;
}
.container p {
margin: 1rem 0 2rem 0;
}
.icons {
height: 40px;
width: 40px;
}
}
/* Footer styles */
footer {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
width: 90vw;
}
/* Footer media query for mobile */
@media only screen and (max-width: 600px) {
footer {
bottom: -2rem;
}
}
</style>
</html>

View File

@ -8,6 +8,7 @@
<!-- Encourage indexing -->
<meta name="robots" content="index, follow">
<link rel="stylesheet", href="{{ url_for('static', filename='css/pgp.css') }}">
<meta property="og:title" content="PGP Key | pkrm.dev"/>
<meta property="og:url" content="https://pkrm.dev/pgp"/>
<meta property="og:type" content="website"/>
@ -53,123 +54,6 @@
</body>
</html>
<style>
/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
background-color: #242528;
color: #9F9FAA;
}
/* Navbar styles */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #212223;
color: #9F9FAA;
}
nav a {
text-decoration: none;
color: #9F9FAA;
font-size: 1.5rem;
margin: 0 1rem;
}
nav a:hover {
color: #fff;
}
.navbar-left {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 15%;
}
.navbar-right {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 15%;
}
/* Navbar media query for mobile */
@media only screen and (max-width: 600px) {
nav a {
margin: 0;
font-size: 1rem;
}
.navbar-left {
margin: 0 1rem;
}
.navbar-right {
margin: 0 1rem;
}
.navbar-right a {
margin-left: 1rem;
}
}
/* Container styles */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.25rem;
text-align: center;
width: 600px;
word-break: break-all;
}
.container p {
text-align: left;
}
/* Continer media query for mobile */
@media only screen and (max-width: 600px) {
.container {
font-size: 1.25rem;
width: 300px;
}
.container p {
margin: 1rem 0 2rem 0;
}
}
/* Footer styles */
footer {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
text-align: center;
margin-bottom: 2rem;
width: 90vw;
}
/* Footer media query for mobile */
@media only screen and (max-width: 600px) {
footer {
bottom: -2rem;
}
}
</style>
<script>
// Get the h1
const h1 = document.querySelector('h1');