Interstellar commit
This commit is contained in:
Sage The DM
parent
f34cd19677
commit
0fa4dc78dd
11 changed files with 669 additions and 0 deletions
27
contact-form.js
Normal file
27
contact-form.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
// contact-form.js
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(event) {
|
||||
event.preventDefault(); // Prevent the form from submitting the traditional way
|
||||
|
||||
// Generate a random ticket number
|
||||
const ticketNumber = Math.floor(Math.random() * 1000000); // Generates a random number between 0 and 999999
|
||||
|
||||
// Retrieve form values
|
||||
const name = encodeURIComponent(document.getElementById('name').value);
|
||||
const email = encodeURIComponent(document.getElementById('email').value);
|
||||
const message = encodeURIComponent(document.getElementById('message').value);
|
||||
|
||||
// Construct the mailto link
|
||||
const subject = `Support Ticket #${ticketNumber}`;
|
||||
const body = `Name: ${name}%0AEmail: ${email}%0AMessage:%0A${message}`;
|
||||
const mailtoLink = `mailto:info@photofuel.tech?subject=${subject}&body=${body}`;
|
||||
|
||||
// Open the default mail client
|
||||
window.location.href = mailtoLink;
|
||||
});
|
||||
}
|
||||
});
|
||||
41
contact.html
Normal file
41
contact.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Contact Us</title>
|
||||
<script src="header.js" type="text/javascript" defer></script>
|
||||
<script src="footer.js" type="text/javascript" defer></script>
|
||||
<script src="contact-form.js" type="text/javascript" defer></script>
|
||||
<!-- Added new script -->
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header-component></header-component>
|
||||
|
||||
<!-- Main Content -->
|
||||
<article>
|
||||
<main>
|
||||
<!-- Contact Form -->
|
||||
<section id="contact">
|
||||
<h2>Contact Us</h2>
|
||||
<form id="contactForm">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" required />
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required />
|
||||
|
||||
<label for="message">Message:</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
|
||||
<button type="submit">Send Message</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</article>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer-component></footer-component>
|
||||
</body>
|
||||
</html>
|
||||
22
footer.js
Normal file
22
footer.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||
class Footer extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<center>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<p>2024 Interstellar Development | Designed by Squadi the Viking</p>
|
||||
</div>
|
||||
</footer>
|
||||
</center>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('footer-component', Footer);
|
||||
|
||||
// @license-end
|
||||
26
header.js
Normal file
26
header.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||
class Header extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<header>
|
||||
<div class="header-content">
|
||||
<div><a href="index.html" class="project-name">Interstellar Development</a></div>
|
||||
<ul>
|
||||
<li><a href="index.html#project">Our Projects</a></li>
|
||||
<li><a href="index.html#about">Our Team</a></li>
|
||||
<li><a href="index.html#vision">Our Vision</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('header-component', Header);
|
||||
|
||||
// @license-end
|
||||
BIN
images/Patrick.png
Normal file
BIN
images/Patrick.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
images/norway.png
Normal file
BIN
images/norway.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
BIN
images/sage.png
Normal file
BIN
images/sage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
BIN
images/star.jpg
Normal file
BIN
images/star.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 545 KiB |
BIN
images/tander.png
Normal file
BIN
images/tander.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 505 KiB |
200
index.html
Normal file
200
index.html
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="header.js" type="text/javascript" defer></script>
|
||||
<script src="footer.js" type="text/javascript" defer></script>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Interstellar Development</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Custom header component -->
|
||||
<header-component></header-component>
|
||||
|
||||
<article>
|
||||
<section id="project">
|
||||
<h1>Our Projects</h1>
|
||||
|
||||
<h2>Our Games</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.freettrpg.org/" target="_blank">FreeTTRPG</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://patrick_pluto.codeberg.page/freeftf/"
|
||||
target="_blank"
|
||||
>FreeFTF</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Our Other Projects</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://patrick_pluto.codeberg.page/foss_alternatives/"
|
||||
target="_blank"
|
||||
>FOSS Alternatives</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- About Us section -->
|
||||
<section id="about">
|
||||
<h2>About Us</h2>
|
||||
<h1>This is just a filler text</h1>
|
||||
<p>
|
||||
Have you ever felt that a new game you bought lacks soul, as if it was
|
||||
made without love or passion? Or maybe you've noticed that the tools
|
||||
you use seem to watch your every move, leaving you feeling monitored
|
||||
and uneasy. Even after paying for a subscription, do you feel like you
|
||||
don’t truly own the software you rely on? We’ve felt the same way, and
|
||||
we’re here to change that. We are an international group of
|
||||
programmers, united by a common goal: to reshape the world of
|
||||
technology. With team members from Switzerland, Norway, and beyond,
|
||||
we're a diverse collective of students and developers who believe in
|
||||
the power of open-source software. Open source isn’t just a
|
||||
development model for us; it’s a commitment to transparency,
|
||||
community, and user freedom. Inspired by the Free Software Foundation
|
||||
(FSF) and the Free Software Supporters Europe (FSSE), we strive to
|
||||
create software that empowers users, respects their privacy, and
|
||||
fosters collaboration. In a world where much of the software feels
|
||||
corporate and detached, we’re dedicated to creating tools and games
|
||||
with passion and care—products you can trust and truly own. Join us in
|
||||
reshaping the digital landscape, where technology serves you, not the
|
||||
other way around.
|
||||
</p>
|
||||
|
||||
<!-- Cards section with team members -->
|
||||
<section class="cards">
|
||||
<div class="card">
|
||||
<a href="https://patrick_pluto.codeberg.page/" class="card-link">
|
||||
<img src="images/Patrick.png" alt="Patrick" />
|
||||
<h3>Patrick_Pluto</h3>
|
||||
<p>
|
||||
The system administrator and our lead coder. He is the one you
|
||||
will need to blame for bugs in the games
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<a href="https://jane_doe.example.com" class="card-link">
|
||||
<img src="images/sage.png" alt="Sage" />
|
||||
<h3>sageTheDM</h3>
|
||||
<p>
|
||||
Our mostly competent web developer and secondary coder, if you
|
||||
experience any bugs on the website or spelling mistake he is to
|
||||
blame
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<a href="https://john_smith.example.com" class="card-link">
|
||||
<img src="images/norway.png" alt="Norway" />
|
||||
<h3>NorwayLC</h3>
|
||||
<p>
|
||||
Our Development assistant, he is responsible to help our coders
|
||||
don't lose their mind. He does quality of life improvements for
|
||||
the endusers and help to keep the project running.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Keep this as a comment unti5l further notice -->
|
||||
<!--
|
||||
<div class="card">
|
||||
<a href="https://emily_jones.example.com" class="card-link">
|
||||
<img src="images/tander.png" alt="Tanderson" />
|
||||
<h3>Tanderson</h3>
|
||||
<p>
|
||||
Our Wildcard he just randomly commit code improvements gives us
|
||||
tips and vanishes again. No one can truly understand him, but
|
||||
without him the project would not be running
|
||||
</p>
|
||||
</a>
|
||||
</div> -->
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="vision">
|
||||
<h1>This is just a filler text</h1>
|
||||
<h2>Our vision</h2>
|
||||
<h2>Our Vision: Crafting a Future of Open Source</h2>
|
||||
|
||||
<h3>The Beginning: A Need for Change</h3>
|
||||
<p>
|
||||
In a world dominated by soulless, profit-driven software, we felt a
|
||||
deep dissatisfaction with the state of the tech industry. Many of us
|
||||
have experienced the frustration of using tools that feel invasive,
|
||||
with constant surveillance and restrictions. We've all been
|
||||
there—buying a game that lacks passion, subscribing to software that
|
||||
we never truly own, or feeling trapped in ecosystems designed to
|
||||
profit off our data. These experiences led us to a simple, yet
|
||||
profound question: <em>What if technology could be different?</em>
|
||||
</p>
|
||||
|
||||
<h3>2023: The Seed of an Idea</h3>
|
||||
<p>
|
||||
In 2023, a group of fresh-faced students from Switzerland, Norway, and
|
||||
beyond came together with a shared dream. United by our love for
|
||||
coding and our belief in the power of open-source software, we set out
|
||||
to challenge the status quo. We were inspired by the pioneers of the
|
||||
Free Software Movement (FSM) and the values they championed:
|
||||
transparency, freedom, and community.
|
||||
</p>
|
||||
|
||||
<h3>2024: Building the Foundation</h3>
|
||||
<p>
|
||||
By 2024, our team had grown, and so had our ambitions. We began
|
||||
working on our first projects, focusing on creating games and tools
|
||||
that were not just free to use, but free to modify, share, and
|
||||
improve. Our mission was clear: to bring open-source alternatives to
|
||||
the mainstream, offering users a genuine choice in a market saturated
|
||||
with proprietary solutions.
|
||||
</p>
|
||||
|
||||
<h3>2025: Expanding Our Horizons</h3>
|
||||
<p>
|
||||
As our community grew, so did our impact. In 2025, we launched several
|
||||
successful projects, each embodying our core values of openness and
|
||||
collaboration. We forged partnerships with like-minded organizations
|
||||
and began to make waves in the tech world. Our tools and games started
|
||||
gaining recognition for their quality, security, and the freedom they
|
||||
offered users.
|
||||
</p>
|
||||
|
||||
<h3>2026 and Beyond: Shaping the Future</h3>
|
||||
<p>
|
||||
Looking ahead, we see a future where open-source software is the norm,
|
||||
not the exception. We envision a world where users are empowered to
|
||||
take control of their digital lives, where technology serves the needs
|
||||
of people, not corporations. Our goal is to continue expanding our
|
||||
portfolio of open-source projects, making them accessible to everyone,
|
||||
regardless of their background or technical expertise.
|
||||
</p>
|
||||
|
||||
<h3>Our Commitment</h3>
|
||||
<p>
|
||||
Our vision is not just about the products we create; it's about the
|
||||
culture we want to build. We are committed to fostering a global
|
||||
community of developers, gamers, and tech enthusiasts who share our
|
||||
passion for open source. Together, we believe we can create a more
|
||||
just, equitable, and innovative digital world.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Join us on this journey as we work to bring open-source tools and
|
||||
games to the market for everyone to enjoy. Let's reshape the future of
|
||||
technology, one line of code at a time.
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- Custom footer component -->
|
||||
<footer-component></footer-component>
|
||||
</body>
|
||||
</html>
|
||||
353
styles.css
Normal file
353
styles.css
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Body styling */
|
||||
body {
|
||||
background-color: #0b0c1d; /* Deep space blue */
|
||||
color: #c7d5e0; /* Light gray-blue text for contrast */
|
||||
font-family: "Arial", sans-serif;
|
||||
line-height: 1.6;
|
||||
padding: 0 20px;
|
||||
background-image: url("images/star.jpg"); /* Starry, mystical background */
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Header styling */
|
||||
header {
|
||||
background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */
|
||||
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 */
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
header ul li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
header ul li a {
|
||||
text-decoration: none;
|
||||
color: #ffdd55; /* Warm star-like yellow */
|
||||
font-weight: bold;
|
||||
padding: 5px 10px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
header ul li a:hover {
|
||||
background-color: rgba(255, 221, 85, 0.3); /* Glowing yellow hover effect */
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px #ffdd55; /* Subtle glow on hover */
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: 1.5em;
|
||||
color: #ffdd55; /* Star yellow */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project-name:hover {
|
||||
color: #ffd700; /* Bright golden-yellow for hover effect */
|
||||
text-shadow: 0 0 10px #ffd700; /* Glowing text effect */
|
||||
}
|
||||
|
||||
/* Article styling */
|
||||
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 */
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
color: #ffdd55; /* Star yellow */
|
||||
text-shadow: 0 0 15px #ffdd55; /* Glowing text effect */
|
||||
}
|
||||
|
||||
article p {
|
||||
hyphens: auto;
|
||||
color: #c7d5e0; /* Light gray-blue text for better readability */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Download list styling */
|
||||
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 */
|
||||
}
|
||||
|
||||
article ul {
|
||||
list-style-type: none; /* Remove bullet points */
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
article ul li {
|
||||
background-color: rgba(46, 58, 95, 0.8); /* Dark blue with transparency */
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
article ul li a {
|
||||
text-decoration: none;
|
||||
color: #ffdd55; /* Warm yellow for links */
|
||||
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 */
|
||||
padding: 10px 20px;
|
||||
color: #c7d5e0; /* Light gray-blue text */
|
||||
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 */
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
section .cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
section .card {
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
|
||||
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 */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
section .card:hover {
|
||||
transform: translateY(-5px); /* Slight lift effect */
|
||||
box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
|
||||
}
|
||||
|
||||
section .card img {
|
||||
height: 80px; /* Image size */
|
||||
width: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%; /* Circular image */
|
||||
margin: 0 auto 15px;
|
||||
box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
|
||||
}
|
||||
|
||||
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 */
|
||||
}
|
||||
|
||||
section .card p {
|
||||
flex-grow: 1;
|
||||
color: #c7d5e0; /* Light gray-blue for card content */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
section .card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url("path-to-cosmic-icon.svg") no-repeat center; /* Space-themed icon */
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
section .card .suit-icon {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url("path-to-suit-icon.svg") no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
/* Contact form styles */
|
||||
form {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */
|
||||
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 */
|
||||
}
|
||||
|
||||
form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #ffdd55; /* Star yellow */
|
||||
}
|
||||
|
||||
form input,
|
||||
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 */
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
form button:hover {
|
||||
background-color: #ffd700; /* Bright golden-yellow on hover */
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
section .card img {
|
||||
height: 60px; /* Adjusted height */
|
||||
width: 60px; /* Adjusted width */
|
||||
border-radius: 8px; /* Adjusted border-radius */
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue