ward/willem-truyen-network-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: added theme/css; fixed wterminal.css

Browse Source
This commit is contained in:
Ward Truyen 2024-08-09 16:16:44 +02:00
parent d3ae0abac4
commit 60d815f71c
8 changed files with 76 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/css/main.css
View File

@ -1,7 +1,3 @@
:root {
color-scheme: light dark;
}
html, html,
body { body {
margin: 0px; margin: 0px;
@ -9,13 +5,16 @@ body {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
html{
/* colors */ /* colors */
background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F); background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F);
} }
main { main {
margin: auto; margin: auto;
width: 80%; min-width: 80%;
padding: 10px; padding: 10px;
min-height: 40%; min-height: 40%;
overflow-y: scroll; overflow-y: scroll;
@ -51,7 +50,7 @@ main p {
} }
header { header {
padding: 3px 16px 3px 16px; padding: 3px 8px 3px 8px;
border-bottom: 1px solid black; border-bottom: 1px solid black;
background-image: linear-gradient(#0000006f, #0000007f); background-image: linear-gradient(#0000006f, #0000007f);
text-shadow: 1px 1px 1px #0000004f; text-shadow: 1px 1px 1px #0000004f;
@ -86,35 +85,32 @@ footer p {
margin: 0px; margin: 0px;
} }
@media(prefers-color-scheme: dark) { html.theme-dark {
color-scheme: dark;
html,
body {
background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F); background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
} color: white;
}
main { .theme-dark>body>main {
border: 1px solid darkgray; border: 1px solid darkgray;
background-color: black; background-color: black;
box-shadow: 3px 3px 5px #101010C0; box-shadow: 3px 3px 5px #101010C0;
} }
main h1 { .theme-dark>body>main>h1 {
text-shadow: 0px 0px 3px blue, 2px 2px 6px; text-shadow: 0px 0px 3px blue, 2px 2px 6px;
} }
header { .theme-dark>body>header {
/* border-bottom: 1px solid darkgray; */
background-image: linear-gradient(#FFFFFF1f, #FFFFFF3f); background-image: linear-gradient(#FFFFFF1f, #FFFFFF3f);
} }
header a { .theme-dark>body>footer {
/* color: white */
/* background-color: #0000004f; */
}
footer {
/* border-top: 1px solid darkgray; */
background-image: linear-gradient(#FFFFFF4f, #FFFFFF0f); background-image: linear-gradient(#FFFFFF4f, #FFFFFF0f);
}
@media(orientation: portrait){
main{
margin: 1em;
} }
} }

2
src/game-pong-context2d.html
View File

@ -13,6 +13,7 @@
<body> <body>
<header> <header>
<button title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
<a href="index.html">Willem Games</a> <a href="index.html">Willem Games</a>
</header> </header>
@ -39,6 +40,7 @@
<p class="float-right">Author: Ward Truyen</p> <p class="float-right">Author: Ward Truyen</p>
</footer> </footer>
<script src="js/theme.js"></script>
<script src="term/wterminal-autoextend.js"></script> <script src="term/wterminal-autoextend.js"></script>
</body> </body>

2
src/game-tetris-context2d.html
View File

@ -13,6 +13,7 @@
<body> <body>
<header> <header>
<button title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
<a href="index.html">Willem Games</a> <a href="index.html">Willem Games</a>
</header> </header>
@ -37,6 +38,7 @@
<p class="float-right">Author: Ward Truyen</p> <p class="float-right">Author: Ward Truyen</p>
</footer> </footer>
<script src="js/theme.js"></script>
<script src="term/wterminal-autoextend.js"></script> <script src="term/wterminal-autoextend.js"></script>
</body> </body>

2
src/games-launcher.html
View File

@ -14,6 +14,7 @@
<body> <body>
<header> <header>
<button title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
<a href="index.html">Willem Games</a> <a href="index.html">Willem Games</a>
</header> </header>
@ -36,6 +37,7 @@
<p class="float-right">Author: Ward Truyen</p> <p class="float-right">Author: Ward Truyen</p>
</footer> </footer>
<script src="js/theme.js"></script>
<script src="js/game-pong-context2d.js"></script> <script src="js/game-pong-context2d.js"></script>
<script src="js/game-tetris-context2d.js"></script> <script src="js/game-tetris-context2d.js"></script>
</body> </body>

2
src/index.html
View File

@ -10,6 +10,7 @@
<body> <body>
<header> <header>
<button title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
<a href="index.html">Willem Games</a> <a href="index.html">Willem Games</a>
</header> </header>
@ -32,6 +33,7 @@
<footer> <footer>
<p class="float-right">Author: Ward Truyen</p> <p class="float-right">Author: Ward Truyen</p>
</footer> </footer>
<script src="js/theme.js"></script>
</body> </body>
</html> </html>

38
src/js/theme.js Normal file
View 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 them: " + 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();

4
src/term/wterminal.css
View File

@ -66,7 +66,7 @@
background-color: #DDD; background-color: #DDD;
} }
.wterminal-container input[type="submit"]:hover, button:hover{ .wterminal-container input[type="submit"]:hover, .wterminal-container button:hover{
background-color: #DDD; background-color: #DDD;
cursor: pointer; cursor: pointer;
} }
@ -78,7 +78,7 @@
margin: 0; margin: 0;
margin-left: 2px; margin-left: 2px;
} }
.wterminal-container input[type="submit"], button{ .wterminal-container input[type="submit"], .wterminal-container button{
width: unset; width: unset;
height: unset; height: unset;
margin: 0; margin: 0;

2
src/test-collision.html
View File

@ -13,6 +13,7 @@
<body> <body>
<header> <header>
<button title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
<a href="index.html">Willem Games</a> <a href="index.html">Willem Games</a>
</header> </header>
@ -61,6 +62,7 @@
<p class="float-right">Author: Ward Truyen</p> <p class="float-right">Author: Ward Truyen</p>
</footer> </footer>
<script src="js/theme.js"></script>
<script src="term/wterminal-autoextend.js"></script> <script src="term/wterminal-autoextend.js"></script>
</body> </body>