Commits vergleichen
4 Commits
| Autor | SHA1 | Datum | |
|---|---|---|---|
|
513dfee6ca | ||
|
|
cf597957bc | ||
|
|
b760683101 | ||
|
|
341f2b56d5 |
23
app.js
23
app.js
@ -11,26 +11,3 @@ 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);
|
|
||||||
});
|
|
||||||
@ -34,25 +34,16 @@
|
|||||||
<script src="https://kit.fontawesome.com/df996a11da.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/df996a11da.js" crossorigin="anonymous"></script>
|
||||||
<script src="/app.js" defer></script>
|
<script src="/app.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="dark">
|
<body>
|
||||||
|
|
||||||
<script>
|
|
||||||
if (window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
||||||
document.querySelector("body").classList.replace("dark", "light");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<a id="back-button" href="#">
|
<a id="back-button" href="..">
|
||||||
<i class="fa-solid fa-chevron-left"></i>
|
<i class="fa-solid fa-chevron-left"></i>
|
||||||
<span>
|
<span>
|
||||||
SteamWar.de/docs
|
SteamWar.de/docs
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div id="theme-button">
|
|
||||||
<i class="fa-solid fa-sun"></i>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="center">
|
<div class="center">
|
||||||
@ -62,7 +53,7 @@
|
|||||||
<details>
|
<details>
|
||||||
<summary><h4>Regionen</h4></summary>
|
<summary><h4>Regionen</h4></summary>
|
||||||
<ul>
|
<ul>
|
||||||
<li>TNT</li>
|
<li><a href="#tnt">TNT</a></li>
|
||||||
<li>Fire</li>
|
<li>Fire</li>
|
||||||
<li>Freeze</li>
|
<li>Freeze</li>
|
||||||
<li>Testblock</li>
|
<li>Testblock</li>
|
||||||
@ -148,6 +139,15 @@
|
|||||||
</details>
|
</details>
|
||||||
|
|
||||||
<br>
|
<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>
|
<h3>Bauhilfen</h3>
|
||||||
<div id="smartplace">
|
<div id="smartplace">
|
||||||
<h4>Smartplace</h4>
|
<h4>Smartplace</h4>
|
||||||
|
|||||||
22
home.css
Normale Datei
22
home.css
Normale Datei
@ -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);
|
||||||
|
}
|
||||||
43
index.css
43
index.css
@ -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 {
|
html {
|
||||||
/* Scrolls for me */
|
/* Scrolls for me */
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
@ -77,7 +63,7 @@ code {
|
|||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
padding: .2rem .4rem;
|
padding: .2rem .4rem;
|
||||||
color: #bd4147;
|
color: #bd4147;
|
||||||
background-color: var(--code-bg-color);
|
background-color: #f7f7f9;
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -85,13 +71,6 @@ body {
|
|||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 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 {
|
.center {
|
||||||
@ -106,11 +85,11 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
width: clamp(60%, 60rem, 100%);
|
width: clamp(60%, 60rem, 97%);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--text-color);
|
color: black;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -133,15 +112,13 @@ header {
|
|||||||
background: black;
|
background: black;
|
||||||
color: white;
|
color: white;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
width: available;
|
width: 100%;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
background: var(--background-nav);
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#back-button {
|
#back-button {
|
||||||
|
margin-left: 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -154,13 +131,3 @@ header {
|
|||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-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;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|||||||
29
index.html
29
index.html
@ -5,9 +5,36 @@
|
|||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
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">
|
<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>
|
</head>
|
||||||
<body>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Laden…
In neuem Issue referenzieren
Einen Benutzer sperren