made the css dynamic #8
4 changed files with 106 additions and 160 deletions
|
|
@ -1,8 +1,8 @@
|
|||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||
|
||||
/*
|
||||
* freeftf website
|
||||
* Copyright (C) 2024 sageTheDM
|
||||
* interstellar_development website
|
||||
* Copyright (C) 2024 interstellar_development
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||
|
||||
/*
|
||||
* freeftf website
|
||||
* Copyright (C) 2024 sageTheDM
|
||||
* interstellar_development website
|
||||
* Copyright (C) 2024 interstellar_development
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||
|
||||
/*
|
||||
* freeftf website
|
||||
* Copyright (C) 2024 sageTheDM
|
||||
* interstellar_development website
|
||||
* Copyright (C) 2024 interstellar_development
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
|
|
|
|||
254
styles.css
254
styles.css
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
freeftf website
|
||||
Copyright (C) 2024 sageTheDM
|
||||
interstellar_development website
|
||||
Copyright (C) 2024 interstellar_development
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
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
|
||||
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;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -23,27 +42,26 @@
|
|||
|
||||
/* Body styling */
|
||||
body {
|
||||
background-color: #0b0c1d; /* Deep space blue */
|
||||
color: #c7d5e0; /* Light gray-blue text for contrast */
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: "Arial", sans-serif;
|
||||
line-height: 1.6;
|
||||
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-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Header styling */
|
||||
header {
|
||||
background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */
|
||||
background-color: var(--dark-blue);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-bottom: 10em;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.7); /* Deeper shadow for a mystic effect */
|
||||
backdrop-filter: blur(5px); /* Blur effect for a mystical aura */
|
||||
box-shadow: var(--box-shadow);
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
|
@ -59,34 +77,32 @@ header ul {
|
|||
gap: 20px;
|
||||
}
|
||||
|
||||
header ul li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
header ul li a {
|
||||
text-decoration: none;
|
||||
color: #ffdd55; /* Warm star-like yellow */
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
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 {
|
||||
background-color: rgba(255, 221, 85, 0.3); /* Glowing yellow hover effect */
|
||||
background-color: rgba(255, 221, 85, 0.3);
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px #ffdd55; /* Subtle glow on hover */
|
||||
box-shadow: 0 0 10px var(--accent-color);
|
||||
}
|
||||
|
||||
/* Old project name styling */
|
||||
.project-name {
|
||||
font-size: 1.5em;
|
||||
color: #ffdd55; /* Star yellow */
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-speed), text-shadow var(--transition-speed);
|
||||
}
|
||||
|
||||
.project-name:hover {
|
||||
color: #ffd700; /* Bright golden-yellow for hover effect */
|
||||
text-shadow: 0 0 10px #ffd700; /* Glowing text effect */
|
||||
color: var(--accent-hover-color);
|
||||
text-shadow: 0 0 10px var(--accent-hover-color);
|
||||
}
|
||||
|
||||
/* Article styling */
|
||||
|
|
@ -94,71 +110,68 @@ article {
|
|||
max-width: 800px;
|
||||
margin: 6.25em auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
|
||||
backdrop-filter: blur(5px); /* Blur effect for mystical atmosphere */
|
||||
background-color: var(--dark-blue-translucent);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 2.5em;
|
||||
font-size: var(--font-size-large);
|
||||
margin-bottom: 20px;
|
||||
color: #ffdd55; /* Star yellow */
|
||||
text-shadow: 0 0 15px #ffdd55; /* Glowing text effect */
|
||||
color: var(--accent-color);
|
||||
text-shadow: 0 0 15px var(--accent-color);
|
||||
}
|
||||
|
||||
article p {
|
||||
hyphens: auto;
|
||||
color: #c7d5e0; /* Light gray-blue text for better readability */
|
||||
color: var(--text-color);
|
||||
margin-bottom: 20px;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* Download list styling */
|
||||
/* Download list */
|
||||
article h2 {
|
||||
font-size: 1.8em;
|
||||
color: #ffdd55; /* Star yellow */
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 0 0 10px #ffdd55; /* Subtle glow for headings */
|
||||
font-size: var(--font-size-medium);
|
||||
margin: 20px 0 10px;
|
||||
color: var(--accent-color);
|
||||
text-shadow: 0 0 10px var(--accent-color);
|
||||
}
|
||||
|
||||
article ul {
|
||||
list-style-type: none; /* Remove bullet points */
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article ul li {
|
||||
background-color: rgba(46, 58, 95, 0.8); /* Dark blue with transparency */
|
||||
background-color: var(--light-blue);
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--border-radius);
|
||||
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 {
|
||||
text-decoration: none;
|
||||
color: #ffdd55; /* Warm yellow for links */
|
||||
color: var(--accent-color);
|
||||
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 {
|
||||
background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */
|
||||
background-color: var(--dark-blue);
|
||||
padding: 10px 20px;
|
||||
color: #c7d5e0; /* Light gray-blue text */
|
||||
color: var(--text-color);
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.7); /* Shadow for depth */
|
||||
backdrop-filter: blur(5px); /* Mystical blur effect */
|
||||
box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
|
|
@ -166,11 +179,7 @@ footer {
|
|||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
/* Old card styles */
|
||||
section .cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
|
|
@ -181,44 +190,44 @@ section .cards {
|
|||
section .card {
|
||||
text-align: center;
|
||||
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;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
|
||||
border: 1px solid #3a4971; /* Slightly lighter border for card edges */
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid #3a4971;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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 {
|
||||
transform: translateY(-5px); /* Slight lift effect */
|
||||
box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5);
|
||||
}
|
||||
|
||||
section .card img {
|
||||
height: 80px; /* Image size */
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%; /* Circular image */
|
||||
border-radius: 50%;
|
||||
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 {
|
||||
margin: 10px 0;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: #ffdd55; /* Star yellow for card titles */
|
||||
text-shadow: 0 0 10px #ffdd55; /* Glow effect */
|
||||
color: var(--accent-color);
|
||||
text-shadow: 0 0 10px var(--accent-color);
|
||||
}
|
||||
|
||||
section .card p {
|
||||
flex-grow: 1;
|
||||
color: #c7d5e0; /* Light gray-blue for card content */
|
||||
color: var(--text-color);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -229,7 +238,7 @@ section .card::before {
|
|||
right: 10px;
|
||||
width: 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;
|
||||
}
|
||||
|
||||
|
|
@ -243,21 +252,24 @@ section .card .suit-icon {
|
|||
background-size: contain;
|
||||
}
|
||||
|
||||
/* Contact form styles */
|
||||
/* Form styling */
|
||||
form {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */
|
||||
background: var(--dark-blue-translucent);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Shadow for depth */
|
||||
backdrop-filter: blur(5px); /* Mystical blur effect */
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #ffdd55; /* Star yellow */
|
||||
form label,
|
||||
form input,
|
||||
form textarea {
|
||||
color: var(--text-color);
|
||||
background-color: var(--light-blue);
|
||||
border: 1px solid #3a4971;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
form input,
|
||||
|
|
@ -265,106 +277,40 @@ form textarea {
|
|||
width: 100%;
|
||||
padding: 10px;
|
||||
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 {
|
||||
background-color: #ffdd55; /* Star yellow */
|
||||
color: #0b0c1d; /* Deep space blue for text */
|
||||
background-color: var(--accent-color);
|
||||
color: var(--background-color);
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
transition: background-color var(--transition-speed);
|
||||
}
|
||||
|
||||
form button:hover {
|
||||
background-color: #ffd700; /* Bright golden-yellow on hover */
|
||||
background-color: var(--accent-hover-color);
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
/* Header */
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
header ul {
|
||||
flex-direction: column;
|
||||
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 {
|
||||
margin: 12em 10px;
|
||||
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 {
|
||||
padding: 12px; /* Adjusted padding */
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
section .card img {
|
||||
height: 60px; /* Adjusted height */
|
||||
width: 60px; /* Adjusted width */
|
||||
border-radius: 8px; /* Adjusted border-radius */
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue