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

chore: added CV and theme-toggle-system

Browse Source
This commit is contained in:
Ward Truyen 2024-08-09 15:47:56 +02:00
parent a017d7283f
commit b39c4102ed
4 changed files with 82 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/css/main.css
View File

@ -2,10 +2,9 @@
* Version: 1.0.0 * Version: 1.0.0
*/ */
:root { /* :root { */
color-scheme: light dark; /* color-scheme: only light; */
} /* } */
html, html,
body { body {
margin: 0px; margin: 0px;
@ -13,53 +12,68 @@ 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%;
/* colors */ /* colors */
border: 1px solid darkblue; border: 1px solid darkblue;
background-color: white; background-color: white;
box-shadow: 3px 3px 3px #30303090; box-shadow: 3px 3px 3px #30303090;
} }
main h1 { main>h1 {
font-family: "Raleway", sans-serif; font-family: "Raleway", sans-serif;
font-size: 4em; font-size: 4em;
margin-top: 4px; margin-top: 0px;
margin-bottom: 8px; margin-bottom: 8px;
text-decoration: underline; text-decoration: underline;
text-shadow: 0px 0px 4px white, 2px 2px 6px; text-shadow: 0px 0px 4px white, 2px 2px 6px;
} }
main p, main>p {
main a { margin-left: 1em;
padding-left: 1em; }
main>h2 {
margin-left: 0.2em;
}
ul.dashed {
list-style-type: '- ';
} }
.text-red { .text-red {
color: red; color: red;
} }
@media(prefers-color-scheme: dark) { html.theme-dark {
color-scheme: dark;
background-image: none;
background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
color: white;
}
html, .theme-dark>body>main {
body { border: 1px solid darkgray;
background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F); background-color: black;
} box-shadow: 3px 3px 5px #101010C0;
}
main { .theme-dark>body>main>h1 {
border: 1px solid darkgray;
background-color: black;
box-shadow: 3px 3px 5px #101010C0;
}
main h1 {
text-shadow: 0px 0px 3px blue, 2px 2px 6px; text-shadow: 0px 0px 3px blue, 2px 2px 6px;
}
@media(orientation: portrait){
main{
margin: 1em;
} }
} }

BIN
src/docs/CV_WardTruyen_2024.pdf Normal file
View File

Binary file not shown.

13
src/index.html
View File

@ -7,15 +7,24 @@
</head> </head>
<body> <body>
<header><button title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button></header>
<main> <main>
<h1>Ward Truyen home</h1> <h1>Ward Truyen home</h1>
<p>Ik ben een computer wizzard op zoek naar een job in de ICT.
Voor meer informatie <a href="docs/CV_WardTruyen_2024.pdf">bekijk mijn cv</a>.</p>
<h2>Links</h2>
<ul class="dashed">
<li> <a href="docs/CV_WardTruyen_2024.pdf">download mijn cv</a> </li>
<li> <a href="https://truyen.network">truyen.network</a> </li>
<li> <a href="https://tds.truyen.network">tds.truyen.network</a> </li>
<li> <a href="https://willem.truyen.network">willem.truyen.network</a> </li>
</ul>
<h2>Status:</h2> <h2>Status:</h2>
<p class="text-red">Under construction</p> <p class="text-red">Under construction</p>
<h2>Links</h2>
<a href="https://truyen.network">truyen.network</a>
</main> </main>
<script src="js/theme.js"></script>
</body> </body>
</html> </html>

34
src/js/theme.js Normal file
View File

@ -0,0 +1,34 @@
function toggleTheme() {
const theme = "theme-dark";//localStorage.getItem('theme');
const root = document.querySelector(":root");
root.classList.toggle(theme);
}
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();