sageTheDm/pages
1
0
Fork 0
forked from interstellar_development/interstellar_website
Code Pull requests Activity

made the css dynamic WoW that's gonna get Patrick so many *female dogs* (#8)

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/interstellar_development/pages/pulls/8
Reviewed-by: Patrick <patrick_pluto@noreply.localhost>
Co-authored-by: sageTheDM <info@photofuel.tech>
Co-committed-by: sageTheDM <info@photofuel.tech>
This commit is contained in:
sageTheDM 2024-09-06 10:37:35 +02:00 committed by Patrick
parent b1b1efe519
commit 0d0adb1a7b
4 changed files with 106 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
contact-form.js
View file

@ -1,8 +1,8 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
/* /*
* freeftf website * interstellar_development website
* Copyright (C) 2024 sageTheDM * Copyright (C) 2024 interstellar_development
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as

4
footer.js
View file

@ -1,8 +1,8 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
/* /*
* freeftf website * interstellar_development website
* Copyright (C) 2024 sageTheDM * Copyright (C) 2024 interstellar_development
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as

4
header.js
View file

@ -1,8 +1,8 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
/* /*
* freeftf website * interstellar_development website
* Copyright (C) 2024 sageTheDM * Copyright (C) 2024 interstellar_development
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as

254
styles.css
View file

@ -1,6 +1,6 @@
/* /*
freeftf website interstellar_development website
Copyright (C) 2024 sageTheDM Copyright (C) 2024 interstellar_development
This program is free software: you can redistribute it and/or modify This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as it under the terms of the GNU Affero General Public License as
@ -15,7 +15,26 @@
You should have received a copy of the GNU Affero General Public License You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
* {
:root {
--background-color: #0b0c1d;
--text-color: #c7d5e0;
--accent-color: #ffdd55;
--accent-hover-color: #ffd700;
--dark-blue: rgba(31, 42, 64, 1);
--dark-blue-translucent: rgba(31, 42, 64, 0.9);
--light-blue: rgba(46, 58, 95, 0.8);
--border-radius: 8px;
--transition-speed: 0.3s;
--box-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
--font-size-large: 2.5em;
--font-size-medium: 1.8em;
}
/* Reset and normalize */
*,
*::before,
*::after {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -23,27 +42,26 @@
/* Body styling */ /* Body styling */
body { body {
background-color: #0b0c1d; /* Deep space blue */ background-color: var(--background-color);
color: #c7d5e0; /* Light gray-blue text for contrast */ color: var(--text-color);
font-family: "Arial", sans-serif; font-family: "Arial", sans-serif;
line-height: 1.6; line-height: 1.6;
padding: 0 20px; padding: 0 20px;
background-image: url("images/star.jpg"); /* Starry, mystical background */ background: url("images/star.jpg") no-repeat center center fixed;
background-size: cover; background-size: cover;
background-attachment: fixed;
} }
/* Header styling */ /* Header styling */
header { header {
background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */ background-color: var(--dark-blue);
position: fixed; position: fixed;
width: 100%; width: 100%;
padding: 15px 20px; padding: 15px 20px;
top: 0; top: 0;
left: 0; left: 0;
margin-bottom: 10em; margin-bottom: 10em;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.7); /* Deeper shadow for a mystic effect */ box-shadow: var(--box-shadow);
backdrop-filter: blur(5px); /* Blur effect for a mystical aura */ backdrop-filter: blur(5px);
z-index: 100; z-index: 100;
} }
@ -59,34 +77,32 @@ header ul {
gap: 20px; gap: 20px;
} }
header ul li {
display: inline;
}
header ul li a { header ul li a {
text-decoration: none; text-decoration: none;
color: #ffdd55; /* Warm star-like yellow */ color: var(--accent-color);
font-weight: bold; font-weight: bold;
padding: 5px 10px; padding: 5px 10px;
transition: background-color 0.3s ease, color 0.3s ease; border-radius: var(--border-radius);
transition: background-color var(--transition-speed), color var(--transition-speed);
} }
header ul li a:hover { header ul li a:hover {
background-color: rgba(255, 221, 85, 0.3); /* Glowing yellow hover effect */ background-color: rgba(255, 221, 85, 0.3);
color: #fff; color: #fff;
border-radius: 5px; box-shadow: 0 0 10px var(--accent-color);
box-shadow: 0 0 10px #ffdd55; /* Subtle glow on hover */
} }
/* Old project name styling */
.project-name { .project-name {
font-size: 1.5em; font-size: 1.5em;
color: #ffdd55; /* Star yellow */ color: var(--accent-color);
text-decoration: none; text-decoration: none;
transition: color var(--transition-speed), text-shadow var(--transition-speed);
} }
.project-name:hover { .project-name:hover {
color: #ffd700; /* Bright golden-yellow for hover effect */ color: var(--accent-hover-color);
text-shadow: 0 0 10px #ffd700; /* Glowing text effect */ text-shadow: 0 0 10px var(--accent-hover-color);
} }
/* Article styling */ /* Article styling */
@ -94,71 +110,68 @@ article {
max-width: 800px; max-width: 800px;
margin: 6.25em auto; margin: 6.25em auto;
padding: 20px; padding: 20px;
background-color: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */ background-color: var(--dark-blue-translucent);
border-radius: 10px; border-radius: var(--border-radius);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */ box-shadow: var(--box-shadow);
backdrop-filter: blur(5px); /* Blur effect for mystical atmosphere */ backdrop-filter: blur(5px);
} }
article h1 { article h1 {
font-size: 2.5em; font-size: var(--font-size-large);
margin-bottom: 20px; margin-bottom: 20px;
color: #ffdd55; /* Star yellow */ color: var(--accent-color);
text-shadow: 0 0 15px #ffdd55; /* Glowing text effect */ text-shadow: 0 0 15px var(--accent-color);
} }
article p { article p {
hyphens: auto; color: var(--text-color);
color: #c7d5e0; /* Light gray-blue text for better readability */
margin-bottom: 20px; margin-bottom: 20px;
hyphens: auto;
} }
/* Download list styling */ /* Download list */
article h2 { article h2 {
font-size: 1.8em; font-size: var(--font-size-medium);
color: #ffdd55; /* Star yellow */ margin: 20px 0 10px;
margin-top: 20px; color: var(--accent-color);
margin-bottom: 10px; text-shadow: 0 0 10px var(--accent-color);
text-shadow: 0 0 10px #ffdd55; /* Subtle glow for headings */
} }
article ul { article ul {
list-style-type: none; /* Remove bullet points */ list-style-type: none;
padding-left: 0; padding: 0;
} }
article ul li { article ul li {
background-color: rgba(46, 58, 95, 0.8); /* Dark blue with transparency */ background-color: var(--light-blue);
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 5px; border-radius: var(--border-radius);
padding: 10px; padding: 10px;
transition: background-color 0.3s ease, box-shadow 0.3s ease; transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}
article ul li:hover {
background-color: rgba(68, 80, 124, 0.9);
box-shadow: 0 0 10px var(--accent-color);
} }
article ul li a { article ul li a {
text-decoration: none; text-decoration: none;
color: #ffdd55; /* Warm yellow for links */ color: var(--accent-color);
font-weight: bold; font-weight: bold;
font-size: 1.1em;
display: block;
}
article ul li:hover {
background-color: rgba(68, 80, 124, 0.9); /* Lighter blue on hover */
box-shadow: 0 0 10px #ffdd55; /* Soft glow effect on hover */
} }
/* Footer styling */ /* Footer styling */
footer { footer {
background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */ background-color: var(--dark-blue);
padding: 10px 20px; padding: 10px 20px;
color: #c7d5e0; /* Light gray-blue text */ color: var(--text-color);
width: 100%; width: 100%;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.7); /* Shadow for depth */ box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px); /* Mystical blur effect */ backdrop-filter: blur(5px);
} }
.footer-content { .footer-content {
@ -166,11 +179,7 @@ footer {
font-size: 0.9em; font-size: 0.9em;
} }
footer p { /* Old card styles */
margin: 0;
}
/* Card styles */
section .cards { section .cards {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@ -181,44 +190,44 @@ section .cards {
section .card { section .card {
text-align: center; text-align: center;
list-style: none; list-style: none;
background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */ background-color: rgba(46, 58, 95, 0.9);
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
border: 1px solid #3a4971; /* Slightly lighter border for card edges */ border: 1px solid #3a4971;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform var(--transition-speed), box-shadow var(--transition-speed);
} }
section .card:hover { section .card:hover {
transform: translateY(-5px); /* Slight lift effect */ transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */ box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5);
} }
section .card img { section .card img {
height: 80px; /* Image size */ height: 80px;
width: 80px; width: 80px;
object-fit: cover; object-fit: cover;
border-radius: 50%; /* Circular image */ border-radius: 50%;
margin: 0 auto 15px; margin: 0 auto 15px;
box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */ box-shadow: 0 0 10px rgba(255, 221, 85, 0.5);
} }
section .card h3 { section .card h3 {
margin: 10px 0; margin: 10px 0;
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
color: #ffdd55; /* Star yellow for card titles */ color: var(--accent-color);
text-shadow: 0 0 10px #ffdd55; /* Glow effect */ text-shadow: 0 0 10px var(--accent-color);
} }
section .card p { section .card p {
flex-grow: 1; flex-grow: 1;
color: #c7d5e0; /* Light gray-blue for card content */ color: var(--text-color);
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -229,7 +238,7 @@ section .card::before {
right: 10px; right: 10px;
width: 24px; width: 24px;
height: 24px; height: 24px;
background: url("path-to-cosmic-icon.svg") no-repeat center; /* Space-themed icon */ background: url("path-to-cosmic-icon.svg") no-repeat center;
background-size: contain; background-size: contain;
} }
@ -243,21 +252,24 @@ section .card .suit-icon {
background-size: contain; background-size: contain;
} }
/* Contact form styles */ /* Form styling */
form { form {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
background: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */ background: var(--dark-blue-translucent);
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: var(--border-radius);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Shadow for depth */ box-shadow: var(--box-shadow);
backdrop-filter: blur(5px); /* Mystical blur effect */ backdrop-filter: blur(5px);
} }
form label { form label,
display: block; form input,
margin-bottom: 8px; form textarea {
color: #ffdd55; /* Star yellow */ color: var(--text-color);
background-color: var(--light-blue);
border: 1px solid #3a4971;
border-radius: 4px;
} }
form input, form input,
@ -265,106 +277,40 @@ form textarea {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
margin-bottom: 15px; margin-bottom: 15px;
border: 1px solid #3a4971; /* Slightly lighter border for input fields */
border-radius: 4px;
background: rgba(
46,
58,
95,
0.7
); /* Slightly lighter background for inputs */
color: #c7d5e0; /* Light gray-blue text for inputs */
} }
form button { form button {
background-color: #ffdd55; /* Star yellow */ background-color: var(--accent-color);
color: #0b0c1d; /* Deep space blue for text */ color: var(--background-color);
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color var(--transition-speed);
} }
form button:hover { form button:hover {
background-color: #ffd700; /* Bright golden-yellow on hover */ background-color: var(--accent-hover-color);
} }
/* Responsive design */ /* Responsive design */
@media (max-width: 768px) { @media (max-width: 768px) {
/* Header */
.header-content {
flex-direction: column;
align-items: flex-start;
}
header ul { header ul {
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
margin-top: 10px;
padding-left: 0;
} }
header ul li {
display: block; /* Ensure list items stack vertically */
}
header ul li a {
padding: 10px;
}
/* Article */
article { article {
margin: 12em 10px; margin: 12em 10px;
padding: 15px; padding: 15px;
} }
article h1 {
font-size: 1.8em; /* Adjust font size for smaller screens */
}
article h2 {
font-size: 1.5em;
margin-bottom: 15px;
}
article ul {
padding-left: 0;
margin-left: 0;
}
article ul li {
font-size: 1em;
padding: 8px;
margin-bottom: 10px;
}
article ul li a {
font-size: 1em; /* Ensure links are readable */
}
/* Footer */
footer {
padding: 10px 15px; /* Adjust padding for smaller screens */
}
.footer-content {
font-size: 0.9em; /* Ensure footer text is readable but not oversized */
}
/* Project Name */
.project-name {
font-size: 1.2em; /* Slightly smaller project name font size for smaller screens */
margin-bottom: 10px; /* Adjust spacing below project name */
}
section .card { section .card {
padding: 12px; /* Adjusted padding */ padding: 12px;
} }
section .card img { section .card img {
height: 60px; /* Adjusted height */ height: 60px;
width: 60px; /* Adjusted width */ width: 60px;
border-radius: 8px; /* Adjusted border-radius */
} }
} }