interstellar_development/interstellar_website
3
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated the website

Browse source
This commit is contained in:
sageTheDM 2024-12-17 10:43:57 +01:00
parent 74736d9b40
commit 02a8d891bc
4 changed files with 223 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

162
styles.css
View file

@ -51,50 +51,109 @@ body {
background-size: cover;
}
/* Header styling */
/* Header Styling */
/* Header Styling */
header {
background-color: var(--dark-blue);
height: 5em;
position: fixed;
width: 100%;
padding: 15px 20px;
top: 0;
left: 0;
margin-bottom: 10em;
padding: 15px 20px;
box-shadow: var(--box-shadow);
backdrop-filter: blur(5px);
z-index: 100;
margin-bottom: 0px;
}
/* Burger Menu Styling */
.burger-menu {
background: none;
border: none;
color: #ffffff;
font-size: 1.8em;
cursor: pointer;
display: block;
padding: 0;
z-index: 110;
}
/* Dropdown Menu (Hidden by Default) */
.div-menu {
z-index: 1;
background-color: var(--light-blue);
width: 100%;
position: fixed;
top: 0;
left: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
padding: 0;
margin-top: 0px;
height: auto;
}
.div-menu li {
margin: 0;
padding: 1em;
z-index: 1;
}
.div-menu a {
width: 100%;
padding: 8px 0;
text-align: center;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
display: block;
}
.div-menu a:hover {
background-color: #34495e;
}
/* Menu Animation and Styling */
.menu {
display: flex;
flex-direction: column;
background-color: var(--light-blue);
position: absolute;
top: -50vh;
left: 0;
width: 100%;
z-index: 5;
padding: 0;
margin: 0;
list-style: none;
justify-content: center;
text-align: center;
font-weight: bolder;
font-size: large;
transition: top 0.5s ease-in-out;
}
.menu.active {
display: flex;
top: 4em;
z-index: 5;
}
/* Header Content Container */
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
z-index: 10;
}
header ul {
list-style: none;
display: flex;
gap: 20px;
}
header ul li a {
text-decoration: none;
color: var(--accent-color);
font-weight: bold;
padding: 5px 10px;
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);
color: #fff;
box-shadow: 0 0 10px var(--accent-color);
}
/* Old project name styling */
/* Project Name Styling */
.project-name {
font-size: 1.5em;
font-size: 2em;
color: var(--accent-color);
text-decoration: none;
transition: color var(--transition-speed), text-shadow var(--transition-speed);
@ -142,7 +201,7 @@ article ul {
padding: 0;
}
article ul li {
article ul a li {
background-color: var(--light-blue);
margin-bottom: 10px;
border-radius: var(--border-radius);
@ -150,12 +209,12 @@ article ul li {
transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}
article ul li:hover {
article ul a li:hover {
background-color: rgba(68, 80, 124, 0.9);
box-shadow: 0 0 10px var(--accent-color);
}
article ul li a {
article ul a li{
text-decoration: none;
color: var(--accent-color);
font-weight: bold;
@ -180,9 +239,9 @@ footer {
}
/* Card container styles */
section .cards {
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: repeat(3, 1fr); /* Display 3 cards per line */
gap: 20px;
margin-top: 50px;
}
@ -200,13 +259,11 @@ section .card a {
padding: 20px;
}
/* Card styles */
section .card {
text-align: center;
list-style: none;
background: linear-gradient(180deg, rgba(0, 0, 50, 0.9), rgba(10, 10, 100, 0.9), rgba(30, 30, 150, 0.9));
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 50, 0.8), 0 0 10px rgba(255, 255, 255, 0.1);
border: 1px solid #2e3a60;
@ -218,6 +275,7 @@ section .card {
transition: background 0.5s ease, transform 0.4s ease, box-shadow 0.5s ease;
}
/* Hover effect */
section .card:hover {
transform: translateY(-8px);
background: linear-gradient(180deg, rgba(30, 30, 150, 0.9), rgba(40, 0, 100, 0.9), rgba(100, 0, 150, 0.9));
@ -275,7 +333,6 @@ section .card:hover .suit-icon {
opacity: 1;
}
/* Keyframes for spinning element */
@keyframes spin {
0% {
@ -302,40 +359,39 @@ form input,
form textarea {
color: var(--text-color);
background-color: var(--light-blue);
border: 1px solid #3a4971;
border-radius: 4px;
}
form input,
form textarea {
width: 100%;
border: 1px solid #3a4b7f;
border-radius: var(--border-radius);
padding: 10px;
margin-bottom: 15px;
margin: 10px 0;
width: 100%;
}
form button {
form input[type="submit"] {
background-color: var(--accent-color);
color: var(--background-color);
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background-color var(--transition-speed);
}
form button:hover {
form input[type="submit"]:hover {
background-color: var(--accent-hover-color);
}
li a.listElement{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
/* Footer Styling */
footer {
background-color: var(--dark-blue);
padding: 10px 20px;
color: var(--text-color);
text-align: center;
font-size: 0.9em;
}
/* Responsive design */
@media (max-width: 768px) {
.cards {
grid-template-columns: 1fr; /* 1 card per line on smaller screens */
}
header ul {
flex-direction: column;
gap: 10px;