diff --git a/.vscode/launch.json b/.vscode/launch.json index f1a48af..e22abfb 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -8,7 +8,7 @@ "type": "firefox", "request": "launch", "name": "Open index.html", - "file": "c:\\Users\\lucab\\Desktop\\opendnd\\Website-draft\\index.html" + "file": "c:\\Users\\lucab\\Desktop\\freettrpg\\pages\\index.html" } ] } \ No newline at end of file diff --git a/assets/background.jpg b/assets/background.jpg index a0cdc9f..0cc1b5a 100644 Binary files a/assets/background.jpg and b/assets/background.jpg differ diff --git a/download.html b/download.html index 7dba409..f709747 100644 --- a/download.html +++ b/download.html @@ -5,42 +5,21 @@ FreeTTRPG + + -
-
-
FreeTTRPG
- - -
-
+
-

open a git console

-

$ git init

-

Initialize an empty Git repository in the current directory.

-
- -

Go to our codeberg website

-

- $ git clone https://codeberg.org/Patrick_Pluto/FreeTTRPG.git -

-

- Clone the FreeTTRPG repository from Codeberg to your local machine. -

-
+

git clone

$ git clone https://codeberg.org/Patrick_Pluto/FreeTTRPG.git @@ -50,13 +29,13 @@

-
+

move into the repository

$ cd FreeTTRPG

Display the contents of the license file (`LICENSE`).

-
+

read through our license

$ cat LICENSE

Move the bash console into the newly created repository

@@ -66,11 +45,5 @@

- diff --git a/header-download.js b/header-download.js new file mode 100644 index 0000000..526e208 --- /dev/null +++ b/header-download.js @@ -0,0 +1,31 @@ +// @license https://creativecommons.org/licenses/by-sa/4.0/ CC-BY-SA-4.0 +class Header extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + this.innerHTML = ` + +
+
+ + +
+
+
+ +
+ `; + } +} + +customElements.define('header-component', Header); +// @license-end \ No newline at end of file diff --git a/header.js b/header.js new file mode 100644 index 0000000..c38572c --- /dev/null +++ b/header.js @@ -0,0 +1,34 @@ +// @license https://creativecommons.org/licenses/by-sa/4.0/ CC-BY-SA-4.0 +class Header extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + this.innerHTML = ` + +
+
+ + +
+
+
+ +
+ `; + } +} + +customElements.define('header-component', Header); +// @license-end \ No newline at end of file diff --git a/index.html b/index.html index b866f8b..961bee8 100644 --- a/index.html +++ b/index.html @@ -5,23 +5,11 @@ FreeTTRPG + + -
-
-
FreeTTRPG
- - -
-
+
@@ -33,7 +21,7 @@ freedom back in the hands of players.

current game version -

Current game version

+

Current game version

@@ -147,12 +135,5 @@

- - diff --git a/java.js b/java.js new file mode 100644 index 0000000..04c6225 --- /dev/null +++ b/java.js @@ -0,0 +1,21 @@ +// @license https://creativecommons.org/licenses/by-sa/4.0/ CC-BY-SA-4.0 +function toggleMenu() { + const menu = document.querySelector(".menu"); + menu.classList.toggle("active"); + + // Add event listener to close menu when clicking anywhere on the document + if (menu.classList.contains("active")) { + document.addEventListener("click", closeMenu); + } else { + document.removeEventListener("click", closeMenu); + } +} + +function closeMenu(event) { + const menu = document.querySelector(".menu"); + if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) { + menu.classList.remove("active"); + document.removeEventListener("click", closeMenu); + } +} +// @license-end \ No newline at end of file diff --git a/style.css b/style.css index 710b327..71e56e0 100644 --- a/style.css +++ b/style.css @@ -1,126 +1,224 @@ /* Reset and global styles */ -body { +* { box-sizing: border-box; margin: 0; padding: 0; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - transition: 0.5s; + font-family: "Roboto", Arial, sans-serif; + transition: 0.5s; /* Smooth transitions */ } /* Body styles */ body { + background-color: #f9f9f9; background: #f5f5f5 url("assets/background.jpg") no-repeat center fixed; display: flex; flex-direction: column; align-items: center; min-height: 100vh; + margin: 0; + padding: 0; } -/* Header styles */ -header { - background-color: rgba(0, 0, 0, 0.7); - padding: 10px; +.div-menu{ + z-index: 1; + background-color: #211c1c; width: 100%; position: fixed; top: 0; left: 0; - z-index: 1000; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + padding: 0; + height: auto; +} + +/* Header styles */ +header { + background-color: #211c1c; + width: 100%; + position: fixed; + top: 0; + left: 0; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + padding: 0; /* Further reduce the padding */ + height: auto; + z-index: 10; /* Higher z-index to ensure it is above other elements */ } .header-content { - max-width: 1200px; - margin: 0 auto; display: flex; justify-content: space-between; align-items: center; + max-width: 1200px; + margin: 0 auto; + flex-direction: row; + padding: 0 20px; /* Original padding */ + z-index: 10; +} + +.div-menu li { + margin: 1; + z-index: 1; + padding: 1em; +} + +.div-menu a { + width: 100%; + padding: 12px 0; + text-align: center; /* Center align the menu items */ + color: #ffffff; + text-decoration: none; + padding: 8px; /* Smaller padding */ + border-radius: 5px; + transition: background-color 0.3s ease; + justify-content: center; + z-index: 1; +} + +.div-menu a:hover { + background-color: #34495e; } .project-name { - color: white; - font-size: 1.5em; + text-decoration: none; + color: #ffffff; + font-size: 1.5em; /* Updated font size */ + font-weight: bold; + z-index: 11; /* Higher z-index to ensure it is above the menu */ } .burger-menu { background: none; border: none; - color: white; - font-size: 1.5em; + color: #ffffff; + font-size: 1.5em; /* Updated font size */ cursor: pointer; - display: none; + display: block; + padding: 0; + z-index: 12; /* Higher z-index to ensure it is above the menu */ } .menu { - list-style: none; display: flex; - justify-content: space-around; - flex-grow: 1; + flex-direction: column; + background-color: #211c1c; + position: absolute; + top: -50vh; + left: 0; + width: 100%; /* Full width of the header */ + z-index: 5; /* Lower z-index than header, header content, and project name */ + padding: 0; + list-style: none; + justify-content: center; /* Center items vertically */ + text-align: center; /* Center items horizontally */ + animation: top 1s ease-in-out; /* Initial animation state */ } -header li { - margin: 0 10px; -} - -header a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - transition: background-color 0.3s ease; -} - -header a:hover { - background-color: rgba(255, 255, 255, 0.2); +.menu.active { + display: flex; + top: 10vh; + z-index: 5; /* Lower z-index than header, header content, and project name */ } /* Article styles */ article { - margin-top: 140px; - padding: 30px; + margin-bottom: 50px; + padding: 20px; width: 90%; max-width: 800px; - background: rgba(255, 255, 255, 0.9); + background-color: #ffffff; border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - text-align: center; -} - -h1, p { - margin-bottom: 20px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); + text-align: left; + margin-top: 140px; /* Increase margin-top for better readability */ + padding-top: 20px; } h1 { - color: #333; - font-size: 1.8em; + color: #333333; + margin: 20px 0; + font-size: 2.5em; } -h2{ - margin-bottom: -1em; -} - -p { - color: #666; +p.text { + color: #555555; line-height: 1.6; + margin: 20px 0; + font-size: 1.1em; } +.code-box { + background-color: #f7f7f7; + border: 1px solid #ddd; + font-family: monospace; + padding: 15px; + margin: 1em 0; +} + + img { max-width: 100%; height: auto; margin-bottom: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } button { padding: 12px 24px; - margin: 0; + margin: 1em 0; border: none; - background-color: #333; - color: white; + background-color: #3498db; + color: #ffffff; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { - background-color: #555; + background-color: #2980b9; +} + +.flex { + display: flex; + align-items: center; +} + +nav { + margin: 20px; +} + +.folder-list { + justify-content: center; + list-style-type: none; + padding: 0; +} + +.folder-list-item { + margin-bottom: 10px; + justify-content: center; +} + +.folder-link { + text-decoration: none; + color: #ffffff; + font-weight: bold; + display: block; + padding: 10px; + border-radius: 5px; + background-color: #2c3e50; + transition: background-color 0.3s ease; +} + +.folder-link:hover { + background-color: #34495e; +} + +.folder-link:active { + transform: scale(0.98); /* Slight scale down on click */ +} + +article img{ + margin-top: 1em; } /* Cards section styles */ @@ -129,6 +227,7 @@ section .cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 50px; + z-index: 0; /* Ensure cards are behind the dropdown menu */ } section .card { @@ -161,6 +260,11 @@ section .card img { margin: 0 auto 10px; } +h2{ + margin-bottom: 1em; + margin-top: 1em; +} + section .card h3 { margin: 10px 0; } @@ -169,58 +273,13 @@ section .card p { flex-grow: 1; } +.no-margin{ + margin: -20px 0; + margin-bottom: 20px; +} + /* Mobile Styles */ @media (max-width: 768px) { - .burger-menu { - display: block; - } - - .menu { - display: none; - flex-direction: column; - background-color: rgba(0, 0, 0, 0.7); - position: absolute; - top: 100%; - left: 0; - width: 100%; - z-index: 999; - } - - .menu.active { - display: flex; - } - - header { - padding: 8px; /* Adjusted padding */ - height: auto; - } - - .header-content { - flex-direction: row; - justify-content: space-between; - align-items: center; - } - - .project-name { - font-size: 1.2em; - } - - header li { - margin: 0; - width: 100%; - } - - header a { - padding: 10px; - width: 100%; - display: block; - } - - article { - margin-top: 180px; /* Adjusted margin-top */ - padding: 20px; /* Adjusted padding */ - } - section .card { padding: 12px; /* Adjusted padding */ }