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

Style improvement & name correction

Browse source
This commit is contained in:
Sage The DM 2024-06-18 19:16:01 +02:00
parent 0450aa27c9
commit 649f201729
3 changed files with 50 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
download.html
View file

@ -9,7 +9,7 @@
<body> <body>
<header> <header>
<div class="header-content"> <div class="header-content">
<div class="project-name"><a href="index.html">freeTTRPG</a></div> <div class="project-name"><a href="index.html">FreeTTRPG</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button> <button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu"> <ul class="menu">
<li><a href="#section1">open a git console</a></li> <li><a href="#section1">open a git console</a></li>
@ -62,7 +62,10 @@
<p>Move the bash console into the newly created repository</p> <p>Move the bash console into the newly created repository</p>
</section> </section>
</article> </article>
<footer>
<br />
<br />
</footer>
<script> <script>
function toggleMenu() { function toggleMenu() {
const menu = document.querySelector(".menu"); const menu = document.querySelector(".menu");

23
index.html
View file

@ -3,13 +3,13 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>freeTTRPG</title> <title>FreeTTRPG</title>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<header> <header>
<div class="header-content"> <div class="header-content">
<div class="project-name"><a href="index.html">freeTTRPG</a></div> <div class="project-name"><a href="index.html">FreeTTRPG</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button> <button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu"> <ul class="menu">
<li><a href="#section1">The Game</a></li> <li><a href="#section1">The Game</a></li>
@ -71,7 +71,7 @@
<section id="section5"> <section id="section5">
<h1>Join Us</h1> <h1>Join Us</h1>
<p> <p>
We're excited to share freeTTRPG with the world and hope you'll join We're excited to share FreeTTRPG with the world and hope you'll join
us on this journey. Together, let's create a TTRPG ecosystem that's us on this journey. Together, let's create a TTRPG ecosystem that's
open, inclusive, and driven by the passion of its community. open, inclusive, and driven by the passion of its community.
</p> </p>
@ -79,14 +79,17 @@
<section id="section6"> <section id="section6">
<h1>Our Code</h1> <h1>Our Code</h1>
<a href="download.html" target="_blank" <p>
><button type="button">Download</button></a The entire code for FreeTTRPG is publicly saved and available. To download out project please follow the instructions from the download page.
> </p>
<a href="download.html" target="_blank">
<button type="button">Download</button>
</a>
</section> </section>
<section id="section7"> <section id="section7">
<h1>Our Game Assets</h1> <h1>Our Game Assets</h1>
<h1>Our charackters</h1> <h2>Our charackters</h2>
<div class="cards"> <div class="cards">
<a href="charackters/gigachad.html" class="card"> <a href="charackters/gigachad.html" class="card">
<img src="assets/gigachad.png" alt="Gigachad" /> <img src="assets/gigachad.png" alt="Gigachad" />
@ -114,7 +117,7 @@
<p>Out test tiefling bard at starting level</p> <p>Out test tiefling bard at starting level</p>
</a> </a>
</div> </div>
<h1>Our textures</h1> <h2>Our textures</h2>
<div class="cards"> <div class="cards">
<a href="index.html" class="card"> <a href="index.html" class="card">
<img src="assets/water.png" alt="Water Texture" /> <img src="assets/water.png" alt="Water Texture" />
@ -140,6 +143,10 @@
</div> </div>
</section> </section>
</article> </article>
<footer>
<br />
<br />
</footer>
<script> <script>
function toggleMenu() { function toggleMenu() {

72
style.css
View file

@ -1,5 +1,5 @@
/* Reset and global styles */ /* Reset and global styles */
* { body {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -9,12 +9,7 @@
/* Body styles */ /* Body styles */
body { body {
background-color: #f5f5f5; background: #f5f5f5 url("assets/background.jpg") no-repeat center fixed;
background-image: url("assets/background.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -33,11 +28,11 @@ header {
} }
.header-content { .header-content {
max-width: 1200px;
margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1200px;
margin: 0 auto;
} }
.project-name { .project-name {
@ -79,8 +74,8 @@ header a:hover {
/* Article styles */ /* Article styles */
article { article {
margin-top: 100px; margin-top: 140px;
padding: 20px; padding: 30px;
width: 90%; width: 90%;
max-width: 800px; max-width: 800px;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
@ -89,15 +84,22 @@ article {
text-align: center; text-align: center;
} }
h1, p {
margin-bottom: 20px;
}
h1 { h1 {
color: #333; color: #333;
margin-bottom: 20px; font-size: 1.8em;
}
h2{
margin-bottom: -1em;
} }
p { p {
color: #666; color: #666;
line-height: 1.6; line-height: 1.6;
margin-bottom: 20px;
} }
img { img {
@ -107,8 +109,8 @@ img {
} }
button { button {
padding: 10px 20px; padding: 12px 24px;
margin: 2em; margin: 0;
border: none; border: none;
background-color: #333; background-color: #333;
color: white; color: white;
@ -121,24 +123,10 @@ button:hover {
background-color: #555; background-color: #555;
} }
/* Additional CSS for command-line style */
.code-box {
background-color: #f0f0f0;
font-family: "Courier New", Courier, monospace;
padding: 10px;
border-left: 4px solid #555;
margin-left: 20px;
}
.flex {
display: flex;
align-items: center;
}
/* Cards section styles */ /* Cards section styles */
section .cards { section .cards {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjusted minmax size */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px; gap: 20px;
margin-top: 50px; margin-top: 50px;
} }
@ -166,11 +154,11 @@ section .card:hover {
} }
section .card img { section .card img {
height: 64px; /* Set fixed height */ height: 64px;
width: 64px; /* Set fixed width */ width: 64px;
object-fit: cover; object-fit: cover;
border-radius: 5px; border-radius: 5px;
margin: 0 auto 10px; /* Center image and add bottom margin */ margin: 0 auto 10px;
} }
section .card h3 { section .card h3 {
@ -192,7 +180,7 @@ section .card p {
flex-direction: column; flex-direction: column;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
position: absolute; position: absolute;
top: 100%; /* Adjusted position */ top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 999; z-index: 999;
@ -201,9 +189,9 @@ section .card p {
.menu.active { .menu.active {
display: flex; display: flex;
} }
header { header {
padding: 5px; padding: 8px; /* Adjusted padding */
height: auto; height: auto;
} }
@ -229,17 +217,17 @@ section .card p {
} }
article { article {
margin-top: 190px; margin-top: 180px; /* Adjusted margin-top */
padding-top: 20px; padding: 20px; /* Adjusted padding */
} }
section .card { section .card {
padding: 10px; padding: 12px; /* Adjusted padding */
} }
section .card img { section .card img {
height: 64px; height: 60px; /* Adjusted height */
width: 64px; width: 60px; /* Adjusted width */
border-radius: 10px; border-radius: 8px; /* Adjusted border-radius */
} }
} }