Commits vergleichen

..

4 Commits

Autor SHA1 Nachricht Datum
yoyosource
513dfee6ca Merge remote-tracking branch 'origin/master' 2022-08-14 22:29:40 +02:00
yoyosource
cf597957bc Add TNT feature 2022-08-14 22:29:32 +02:00
Chaos
b760683101 Add Homepage 2022-08-07 20:56:08 +02:00
yoyosource
341f2b56d5 Update index.css 2022-08-02 21:38:23 +02:00
5 geänderte Dateien mit 68 neuen und 75 gelöschten Zeilen

25
app.js
Datei anzeigen

@ -10,27 +10,4 @@ if(window.innerWidth > 1200) {
}
}
}
}
function setColorSchema(themeMode) {
let theme = document.querySelector("body");
if(themeMode) {
theme.classList.replace("dark", "light");
} else {
theme.classList.replace("light", "dark");
}
}
if(document.getElementById("theme-button")) {
document.getElementById("theme-button").addEventListener("click", () => {
let theme = document.querySelector("body");
setColorSchema(theme.classList.contains("dark"));
});
}
console.log(window.matchMedia('(prefers-color-scheme: dark)'))
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
setColorSchema(!event.matches);
});
}

Datei anzeigen

@ -34,25 +34,16 @@
<script src="https://kit.fontawesome.com/df996a11da.js" crossorigin="anonymous"></script>
<script src="/app.js" defer></script>
</head>
<body class="dark">
<script>
if (window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.querySelector("body").classList.replace("dark", "light");
}
</script>
<body>
<header>
<a id="back-button" href="#">
<a id="back-button" href="..">
<i class="fa-solid fa-chevron-left"></i>
<span>
SteamWar.de/docs
</span>
</a>
<div id="theme-button">
<i class="fa-solid fa-sun"></i>
</div>
</header>
<div class="center">
@ -62,7 +53,7 @@
<details>
<summary><h4>Regionen</h4></summary>
<ul>
<li>TNT</li>
<li><a href="#tnt">TNT</a></li>
<li>Fire</li>
<li>Freeze</li>
<li>Testblock</li>
@ -148,6 +139,15 @@
</details>
<br>
<h3>Regionen</h3>
<div id="tnt">
<h4>TNT</h4>
<p>
Mit <code>/tnt</code> kann der Blockschaden von TNT reguliert werden. Dabei wechselt er zwischen den zwei Einstellungen „aus“ und „nur außerhalb
Baurahmen“ bei welchem TNT nur außerhalb des Baurahmens Blockschaden verursacht. Mit <code>/tnt</code> on kannst du den Blockschaden in der
ganzen Region (also auch im Baurahmen) erlauben. Welcher Modus gerade aktiv ist, siehst du rechts in der Sidebar auf deinem Bau.
</p>
</div>
<h3>Bauhilfen</h3>
<div id="smartplace">
<h4>Smartplace</h4>

22
home.css Normale Datei
Datei anzeigen

@ -0,0 +1,22 @@
nav {
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(auto-fill, 32rem);
gap: 2rem;
justify-content: center;
}
nav > * {
aspect-ratio: 1;
border: gray .15rem dashed;
border-radius: .5rem;
text-align: center;
transition: transform .3s ease-in-out;
display: flex;
flex-direction: column;
justify-content: space-between;
}
nav > *:hover {
transform: scale(1.01);
}

Datei anzeigen

@ -1,17 +1,3 @@
.dark {
--background: #1a1a1a;
--background-nav: #2f2f2f;
--text-color: #fff;
--code-bg-color: #1a1a1a;
}
.light {
--background: white;
--background-nav: black;
--text-color: #000;
--code-bg-color: #f7f7f9;
}
html {
/* Scrolls for me */
scroll-behavior: smooth;
@ -77,7 +63,7 @@ code {
font-size: 1em;
padding: .2rem .4rem;
color: #bd4147;
background-color: var(--code-bg-color);
background-color: #f7f7f9;
border-radius: .25rem;
}
@ -85,13 +71,6 @@ body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background: var(--background);
color: var(--text-color);
}
* {
transition: color 0.5s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.center {
@ -106,11 +85,11 @@ img {
}
#content {
width: clamp(60%, 60rem, 100%);
width: clamp(60%, 60rem, 97%);
}
a {
color: var(--text-color);
color: black;
text-decoration: none;
}
@ -133,15 +112,13 @@ header {
background: black;
color: white;
height: fit-content;
width: available;
width: 100%;
display: flex;
justify-content: space-between;
background: var(--background-nav);
padding: 0 15px;
}
#back-button {
margin-left: 15px;
display: flex;
align-items: center;
justify-content: center;
@ -154,13 +131,3 @@ header {
-moz-user-select: none;
-ms-user-select: none;
}
#theme-button {
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(20px, 2vh, 100px);
cursor: pointer;
}

Datei anzeigen

@ -5,9 +5,36 @@
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<title>SteamWar.de/docs</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="home.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/df996a11da.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<div id="back-button">
<span>SteamWar.de/docs</span>
</div>
</header>
<nav>
<a href="bausystem">
<h1>BauSystem</h1>
<p>Alle Funktionen die auf dem SteamWar.de Bauserver zur verfügung stehen.</p>
<em>Work in progress</em>
</a>
<div>
<h1>SchematicSystem</h1>
<p>Die haupt Schematic Verwaltungssoftware von SteamWar</p>
<em>Geplannt</em>
</div>
</nav>
</body>
</html>