Compare commits
12 Commits
5306609ea6
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 562615f7a7 | |||
| 9c1489e48b | |||
| 5c87a4260e | |||
| 03bd9c324b | |||
| a348e01499 | |||
| a7f2142bc6 | |||
| a9d3d80959 | |||
| d825546505 | |||
| efc3a9d730 | |||
| 22b664f6b2 | |||
| 9519d5db8b | |||
| f6e08f3741 |
@ -1,9 +1,12 @@
|
||||
services:
|
||||
siteroot:
|
||||
build: .
|
||||
image: truyen/web
|
||||
container_name: truyen-web
|
||||
restart: always
|
||||
labels:
|
||||
- "traefik.http.routers.siteroot.rule=Host(`truyen.network`) && PathPrefix(`/`)"
|
||||
- "traefik.http.routers.siteroot.entrypoints=websecure"
|
||||
# - "traefik.http.routers.siteroot.tls=true"
|
||||
# - "traefik.http.routers.siteroot.tls.certresolver=letsencrypt"
|
||||
- "traefik.http.routers.siteroot.tls=true"
|
||||
- "traefik.http.routers.siteroot.tls.certresolver=myresolver"
|
||||
- "traefik.enable=true"
|
||||
|
||||
@ -2,10 +2,6 @@
|
||||
* Version: 1.0.0
|
||||
*/
|
||||
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0px;
|
||||
@ -13,24 +9,28 @@ body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* colors */
|
||||
}
|
||||
|
||||
html {
|
||||
background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F);
|
||||
}
|
||||
|
||||
main {
|
||||
margin: auto;
|
||||
margin-top: 1em;
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
min-height: 40%;
|
||||
overflow-y: scroll;
|
||||
/* colors */
|
||||
border: 1px solid darkblue;
|
||||
background-color: white;
|
||||
box-shadow: 3px 3px 3px #30303090;
|
||||
box-shadow: 3px 3px 3px #30303090;
|
||||
}
|
||||
|
||||
main h1 {
|
||||
font-family: "Raleway", sans-serif;
|
||||
font-size: 4em;
|
||||
font-size: 3em;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 8px;
|
||||
text-decoration: underline;
|
||||
@ -46,20 +46,24 @@ main a {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark) {
|
||||
html.theme-dark {
|
||||
color-scheme: dark;
|
||||
background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
|
||||
color: white;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
|
||||
}
|
||||
.theme-dark>body>main {
|
||||
border: 1px solid darkgray;
|
||||
background-color: black;
|
||||
box-shadow: 3px 3px 5px #101010C0;
|
||||
}
|
||||
|
||||
main {
|
||||
border: 1px solid darkgray;
|
||||
background-color: black;
|
||||
box-shadow: 3px 3px 5px #101010C0;
|
||||
}
|
||||
|
||||
main h1 {
|
||||
.theme-dark>body>main>h1 {
|
||||
text-shadow: 0px 0px 3px blue, 2px 2px 6px;
|
||||
}
|
||||
|
||||
@media(orientation: portrait) {
|
||||
main {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,19 +3,27 @@
|
||||
|
||||
<head>
|
||||
<title>Truyen home</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="css/main.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main>
|
||||
<button style="float: right; font-size:large;" title="Dark theme on/off" onclick="toggleTheme();">☀</button>
|
||||
<h1>Truyen home</h1>
|
||||
<h2>Status:</h2>
|
||||
<p class="text-red">Under construction</p>
|
||||
<h2>Links</h2>
|
||||
<a href="https://ward.truyen.network">ward.truyen.network</a>
|
||||
<h2>Subdomains</h2>
|
||||
<a href="https://git.truyen.network" target="_blank">git.truyen.network</a>
|
||||
<a href="https://ward.truyen.network" target="_blank">ward.truyen.network</a>
|
||||
<a href="https://willem.truyen.network" target="_blank">willem.truyen.network</a>
|
||||
<a href="https://wterminal.truyen.network" target="_blank">wterminal.truyen.network</a>
|
||||
<a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a>
|
||||
<a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a>
|
||||
</main>
|
||||
|
||||
<script src="js/theme.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
38
src/js/theme.js
Normal file
38
src/js/theme.js
Normal file
@ -0,0 +1,38 @@
|
||||
function toggleTheme() {
|
||||
const theme = "theme-dark";//localStorage.getItem('theme');
|
||||
const root = document.querySelector(":root");
|
||||
root.classList.toggle(theme);
|
||||
if (root.classList.contains(theme)) {
|
||||
localStorage.setItem('theme', theme);
|
||||
} else {
|
||||
localStorage.setItem('theme', "theme-light");
|
||||
}
|
||||
}
|
||||
|
||||
function setTheme(themeName) {
|
||||
console.log("setting theme: " + themeName);
|
||||
const root = document.querySelector(":root");
|
||||
root.classList.add(themeName);
|
||||
localStorage.setItem('theme', themeName);
|
||||
}
|
||||
|
||||
function detectTheme() {
|
||||
const theme = localStorage.getItem('theme');
|
||||
if (theme === 'theme-dark' || theme === 'theme-light') {
|
||||
setTheme(theme);
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
setTheme('theme-dark');
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.matchMedia('(prefers-color-scheme: light)').matches) {
|
||||
setTheme('theme-light');
|
||||
return;
|
||||
}
|
||||
|
||||
setTheme('theme-light');
|
||||
}
|
||||
detectTheme();
|
||||
Loading…
x
Reference in New Issue
Block a user