wholteza/blog
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

wip redesign

Browse Source
This commit is contained in:
wholteza
2025-09-18 14:44:35 +02:00
parent 215c9ff878
commit 0478cb71b9
4 changed files with 108 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/profile.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

8
src/index.ts
View File

@@ -25,8 +25,14 @@ new ToolchainBuilder(paths)
{ {
path: "src/templates/404.html", path: "src/templates/404.html",
nameOverride: "Not Found Page", nameOverride: "Not Found Page",
menuEntry: true, menuEntry: false,
}, },
{
path: "src/assets/profile.jpg",
},
{
path: "src/assets/favicon.ico",
}
], ],
}), }),
new StartPagePlugin({ new StartPagePlugin({

112
src/templates/index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,30 +8,34 @@
<style> <style>
html { html {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 1.3em; font-size: 17px;
line-height: 26px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
font-family: monospace;
} }
a {
color: #FFF;
}
body { body {
max-width: 800px; max-width: 800px;
color: #fbfbfe; color: #fbfbfe;
background-color: #1c1b22; background-color: #1c1b28;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
ul {
.content ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
li:nth-child(1){
display: none; .content li {
}
li {
margin: 1em 0; margin: 1em 0;
padding: 8px; padding: 8px;
border-radius: 8px; border-radius: 8px;
@@ -38,17 +43,100 @@
border-width: 1px; border-width: 1px;
border-color: #aaa; border-color: #aaa;
} }
li::before {
.content li::before {
content: "📝"; content: "📝";
margin-right: 8px; margin-right: 8px;
} }
a {
.content a {
color: #fbfbfe; color: #fbfbfe;
text-decoration: none; text-decoration: none;
} }
.profile {
border-color: #00FFFF;
border-width: 1px;
border-style: solid;
width: 100%;
padding: 20px;
box-sizing: border-box;
font-family: monospace;
display: flex;
flex-direction: column;
}
.profile .picture {
border-radius: 50%;
}
.profile ul {
margin: 0;
}
.profile li {}
.banner {
margin-top: 2rem;
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
margin-bottom: 1rem;
align-items: center;
flex: 1;
font-family: monospace;
}
.banner .title {
display: flex;
flex-direction: row;
flex: 1;
}
.banner .title::after {
background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
content: "";
display: block;
width: 100%;
margin-left: 10px;
}
.banner .title .name {
color: #1c1b28;
background-color: #00FFFF;
white-space: nowrap;
padding: 5px;
}
</style> </style>
</head> </head>
<body> <body>
{{content}} <div class="banner">
<div class="title">
<div class="name">Zackarias Montell</div>
</div>
</div>
<div class="profile">
<img class="picture" src="profile.jpg" width="150" height="150" />
<p>Yup, this is me! You probably wonder how i ended up in this situation.</p>
<p>Here are some things that I like:</p>
<ul>
<li>Programming</li>
<li>Building stuff</li>
<li>Adventures with family</li>
<li>Brewing beer</li>
<li>Music</li>
</ul>
<a href="mailto:contact@montell.se">contact@montell.se</a> | <a href="">a</a> | <a href="">a</a> | <a href="">a</a>
</div>
<div class="content">
{{content}}
</div>
</body> </body>
</html> </html>