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

46
src/css/main.css
View File

@ -2,10 +2,9 @@
* Version: 1.0.0
*/
:root {
color-scheme: light dark;
}
/* :root { */
/* color-scheme: only light; */
/* } */
html,
body {
margin: 0px;
@ -13,13 +12,16 @@ body {
height: 100%;
display: flex;
flex-direction: column;
}
html {
/* colors */
background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F);
}
main {
margin: auto;
width: 80%;
min-width: 80%;
padding: 10px;
min-height: 40%;
/* colors */
@ -28,38 +30,50 @@ main {
box-shadow: 3px 3px 3px #30303090;
}
main h1 {
main>h1 {
font-family: "Raleway", sans-serif;
font-size: 4em;
margin-top: 4px;
margin-top: 0px;
margin-bottom: 8px;
text-decoration: underline;
text-shadow: 0px 0px 4px white, 2px 2px 6px;
}
main p,
main a {
padding-left: 1em;
main>p {
margin-left: 1em;
}
main>h2 {
margin-left: 0.2em;
}
ul.dashed {
list-style-type: '- ';
}
.text-red {
color: red;
}
@media(prefers-color-scheme: dark) {
html,
body {
html.theme-dark {
color-scheme: dark;
background-image: none;
background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
color: white;
}
main {
.theme-dark>body>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: 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>
<body>
<header><button title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button></header>
<main>
<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>
<p class="text-red">Under construction</p>
<h2>Links</h2>
<a href="https://truyen.network">truyen.network</a>
</main>
<script src="js/theme.js"></script>
</body>
</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();