Commits vergleichen
1 Commits
| Autor | SHA1 | Datum | |
|---|---|---|---|
|
d38609f0a3 |
25
app.js
25
app.js
|
|
@ -10,4 +10,27 @@ 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,16 +34,25 @@
|
|||
<script src="https://kit.fontawesome.com/df996a11da.js" crossorigin="anonymous"></script>
|
||||
<script src="/app.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="dark">
|
||||
|
||||
<script>
|
||||
if (window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.querySelector("body").classList.replace("dark", "light");
|
||||
}
|
||||
</script>
|
||||
|
||||
<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">
|
||||
|
|
@ -53,7 +62,7 @@
|
|||
<details>
|
||||
<summary><h4>Regionen</h4></summary>
|
||||
<ul>
|
||||
<li><a href="#tnt">TNT</a></li>
|
||||
<li>TNT</li>
|
||||
<li>Fire</li>
|
||||
<li>Freeze</li>
|
||||
<li>Testblock</li>
|
||||
|
|
@ -139,15 +148,6 @@
|
|||
</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
22
home.css
|
|
@ -1,22 +0,0 @@
|
|||
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,3 +1,17 @@
|
|||
.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;
|
||||
|
|
@ -63,7 +77,7 @@ code {
|
|||
font-size: 1em;
|
||||
padding: .2rem .4rem;
|
||||
color: #bd4147;
|
||||
background-color: #f7f7f9;
|
||||
background-color: var(--code-bg-color);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
|
|
@ -71,6 +85,13 @@ 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 {
|
||||
|
|
@ -85,11 +106,11 @@ img {
|
|||
}
|
||||
|
||||
#content {
|
||||
width: clamp(60%, 60rem, 97%);
|
||||
width: clamp(60%, 60rem, 100%);
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -112,13 +133,15 @@ header {
|
|||
background: black;
|
||||
color: white;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
width: available;
|
||||
|
||||
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;
|
||||
|
|
@ -131,3 +154,13 @@ 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;
|
||||
|
||||
}
|
||||
|
|
|
|||
29
index.html
29
index.html
|
|
@ -5,36 +5,9 @@
|
|||
<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>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>
|
||||
<title>Document</title>
|
||||
</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>
|
||||
Laden…
In neuem Issue referenzieren
Einen Benutzer sperren