Style improvement & name correction
This commit is contained in:
Sage The DM
parent
0450aa27c9
commit
649f201729
3 changed files with 50 additions and 52 deletions
|
|
@ -9,7 +9,7 @@
|
|||
<body>
|
||||
<header>
|
||||
<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>
|
||||
<ul class="menu">
|
||||
<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>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
<br />
|
||||
<br />
|
||||
</footer>
|
||||
<script>
|
||||
function toggleMenu() {
|
||||
const menu = document.querySelector(".menu");
|
||||
|
|
|
|||
23
index.html
23
index.html
|
|
@ -3,13 +3,13 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>freeTTRPG</title>
|
||||
<title>FreeTTRPG</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<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>
|
||||
<ul class="menu">
|
||||
<li><a href="#section1">The Game</a></li>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
<section id="section5">
|
||||
<h1>Join Us</h1>
|
||||
<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
|
||||
open, inclusive, and driven by the passion of its community.
|
||||
</p>
|
||||
|
|
@ -79,14 +79,17 @@
|
|||
|
||||
<section id="section6">
|
||||
<h1>Our Code</h1>
|
||||
<a href="download.html" target="_blank"
|
||||
><button type="button">Download</button></a
|
||||
>
|
||||
<p>
|
||||
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 id="section7">
|
||||
<h1>Our Game Assets</h1>
|
||||
<h1>Our charackters</h1>
|
||||
<h2>Our charackters</h2>
|
||||
<div class="cards">
|
||||
<a href="charackters/gigachad.html" class="card">
|
||||
<img src="assets/gigachad.png" alt="Gigachad" />
|
||||
|
|
@ -114,7 +117,7 @@
|
|||
<p>Out test tiefling bard at starting level</p>
|
||||
</a>
|
||||
</div>
|
||||
<h1>Our textures</h1>
|
||||
<h2>Our textures</h2>
|
||||
<div class="cards">
|
||||
<a href="index.html" class="card">
|
||||
<img src="assets/water.png" alt="Water Texture" />
|
||||
|
|
@ -140,6 +143,10 @@
|
|||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<footer>
|
||||
<br />
|
||||
<br />
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
function toggleMenu() {
|
||||
|
|
|
|||
70
style.css
70
style.css
|
|
@ -1,5 +1,5 @@
|
|||
/* Reset and global styles */
|
||||
* {
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -9,12 +9,7 @@
|
|||
|
||||
/* Body styles */
|
||||
body {
|
||||
background-color: #f5f5f5;
|
||||
background-image: url("assets/background.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background: #f5f5f5 url("assets/background.jpg") no-repeat center fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -33,11 +28,11 @@ header {
|
|||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
|
|
@ -79,8 +74,8 @@ header a:hover {
|
|||
|
||||
/* Article styles */
|
||||
article {
|
||||
margin-top: 100px;
|
||||
padding: 20px;
|
||||
margin-top: 140px;
|
||||
padding: 30px;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
|
|
@ -89,15 +84,22 @@ article {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin-bottom: -1em;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -107,8 +109,8 @@ img {
|
|||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
margin: 2em;
|
||||
padding: 12px 24px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
|
|
@ -121,24 +123,10 @@ button:hover {
|
|||
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 */
|
||||
section .cards {
|
||||
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;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
|
@ -166,11 +154,11 @@ section .card:hover {
|
|||
}
|
||||
|
||||
section .card img {
|
||||
height: 64px; /* Set fixed height */
|
||||
width: 64px; /* Set fixed width */
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
object-fit: cover;
|
||||
border-radius: 5px;
|
||||
margin: 0 auto 10px; /* Center image and add bottom margin */
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
|
||||
section .card h3 {
|
||||
|
|
@ -192,7 +180,7 @@ section .card p {
|
|||
flex-direction: column;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
position: absolute;
|
||||
top: 100%; /* Adjusted position */
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
|
|
@ -203,7 +191,7 @@ section .card p {
|
|||
}
|
||||
|
||||
header {
|
||||
padding: 5px;
|
||||
padding: 8px; /* Adjusted padding */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -229,17 +217,17 @@ section .card p {
|
|||
}
|
||||
|
||||
article {
|
||||
margin-top: 190px;
|
||||
padding-top: 20px;
|
||||
margin-top: 180px; /* Adjusted margin-top */
|
||||
padding: 20px; /* Adjusted padding */
|
||||
}
|
||||
|
||||
section .card {
|
||||
padding: 10px;
|
||||
padding: 12px; /* Adjusted padding */
|
||||
}
|
||||
|
||||
section .card img {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
border-radius: 10px;
|
||||
height: 60px; /* Adjusted height */
|
||||
width: 60px; /* Adjusted width */
|
||||
border-radius: 8px; /* Adjusted border-radius */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue