Jonas_Jones/blog.jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/blog.jonasjones.dev.git synced 2025-10-22 23:49:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Blog Header UI changes

Browse source
This commit is contained in:
J-onasJones 2024-06-15 15:34:15 +02:00
parent fa5934c684
commit 7160dd4a40
3 changed files with 64 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="src/global.css"> <link rel="stylesheet" href="src/global.css">
<link rel="icon" type="image/svg+xml" href="dist/favicon.png" /> <link rel="icon" type="image/svg+xml" href="dist/favicon.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jonas_Jones Blog</title> <title>Jonas_Jones Blog</title>
</head> </head>

5
src/global.css
View file

@ -24,6 +24,11 @@ html, body {
padding: 0; padding: 0;
background-color: #303030; background-color: #303030;
color: #e2b714; color: #e2b714;
font-family: 'JetBrains Mono';
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Pixelify Sans';
} }
.content { .content {

65
src/routes/Post.svelte
View file

@ -11,12 +11,15 @@
let post: {id: String, date: String, title: String, author: String, description: String} = {}; let post: {id: String, date: String, title: String, author: String, description: String} = {};
let postTitle = ""; let postTitle = "";
let postDescription = ""; let postAuthor = "";
let postDate = "";
let loading = true; let loading = true;
let error404 = false; let error404 = false;
let thisHref = location.href; let thisHref = location.href;
let clickText = "Copy Link";
if (params.year && params.month && params.day && params.title) { if (params.year && params.month && params.day && params.title) {
const searchdate = new Date(`${params.year}-${params.month}-${params.day}`); const searchdate = new Date(`${params.year}-${params.month}-${params.day}`);
} else { } else {
@ -53,7 +56,8 @@
document.getElementById('markdowncontent').innerHTML = await markdowncontent; document.getElementById('markdowncontent').innerHTML = await markdowncontent;
loading = false; loading = false;
postTitle = post.title; postTitle = post.title;
postDescription = post.description; postAuthor = post.author;
postDate = post.date;
} else { } else {
loading = false loading = false
error404 = true error404 = true
@ -101,6 +105,17 @@
}); });
} }
function copyLink() {
navigator.clipboard.writeText(location.href).then(() => {
clickText = "Copied!";
setTimeout(() => {
clickText = "Copy Link";
}, 2000);
}).catch(err => {
console.error('Failed to copy: ', err);
});
}
</script> </script>
{#if loading} {#if loading}
<Loading /> <Loading />
@ -111,18 +126,52 @@
{/if} {/if}
<div class="post"> <div class="post">
<h1>{postTitle}</h1> <p class="postHead">by</p>
<h3>{postDescription}</h3> <h3 class="postHead">{postAuthor}</h3>
<p class="postHead">{postDate}</p>
<div class="copy-link" on:click={copyLink}>
<i class="fas fa-link"></i>
<span>{clickText}</span>
</div>
<h1 class="postHead">{postTitle}</h1>
<div id="markdowncontent"></div> <div id="markdowncontent"></div>
</div> </div>
<style> <style>
h1 { h1.postHead {
color: #008cff;
text-transform: uppercase; text-transform: uppercase;
font-size: 4em; font-family: 'Libre Barcode 128', sans-serif;
font-weight: 100; font-size: 5em;
margin-top: 0;
}
h3.postHead {
font-family: 'Pixelify Sans', sans-serif;
font-size: 1.7em;
margin-bottom: 0;
}
p.postHead {
font-family: 'Pixelify Sans', sans-serif;
font-size: 1.5em;
margin-bottom: 0;
}
p.postHead, h3.postHead {
display: inline-block;
padding: 0 10px;
color: gray;
}
.copy-link {
display: inline-flex;
align-items: center;
cursor: pointer;
font-size: 1em;
}
.copy-link span {
margin-left: 8px;
font-size: 16px;
} }
</style> </style>