addet profile-mode on homepage

This commit is contained in:
pika 2024-06-24 19:32:39 +02:00
parent e2f0ef9b68
commit 89865aa831
11 changed files with 73 additions and 278 deletions

View file

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facepunch</title><path d="M12 0C5.388 0 0 5.388 0 12s5.388 12 12 12 12-5.388 12-12S18.629 0 12 0zm0 21.314c-5.133 0-9.297-4.164-9.297-9.297S6.867 2.72 12 2.72s9.297 4.164 9.297 9.297-4.164 9.297-9.297 9.297zM10.028 12l1.48 1.479-1.922 1.92-1.478-1.478-1.428 1.444-1.92-1.92L6.203 12l-1.377-1.377 1.92-1.904 1.36 1.377 1.411-1.41 1.921 1.903L10.03 12zm9.162-1.462-1.411 1.411 1.479 1.479-1.92 1.904-1.48-1.48-1.444 1.446-1.904-1.921 1.445-1.428-1.377-1.377 1.904-1.92 1.376 1.376 1.411-1.41 1.92 1.92z"/></svg>

After

Width:  |  Height:  |  Size: 587 B

View file

@ -6,7 +6,7 @@ theme: paperMod
enableRobotsTXT: true
params:
defaultTheme: auto
defaultTheme: dark
homeInfoParams:
Title: Welcome to my blog! Feel free to contribute some topics over on GiTea
socialIcons:
@ -19,6 +19,23 @@ params:
enableEmoji: true
UseHugoToc: true
profileMode:
enabled: true
title: "Hi, I'm pika!"
subtitle: "You are currently at my dev-environment. Here I'm trying to get better in stuff like writing blogentries, and styling a website/creating one. So, take anything here with a grain of salt and have fun reading. Also be sure to checkout the GiTea instance!"
imageUrl: "/img/facepunch.svg"
imageWidth: 120
imageHeight: 120
buttons:
- name: BlogPosts
url: "/blog/"
- name: Archive
url: "/archive/"
- name: Tutorials
url: "/tutorials/"
- name: GiTea
url: "https://git.k4li.de/pika/"
menu:
main:
- identifier: Home

View file

@ -27,34 +27,6 @@
}
</style>
<style>
@media (prefers-color-scheme: dark) {
:root {
--theme: rgb(29, 30, 32);
--entry: rgb(46, 46, 51);
--primary: rgb(218, 218, 219);
--secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68);
--content: rgb(196, 196, 197);
--code-block-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51);
}
.list {
background: var(--theme);
}
.list:not(.dark)::-webkit-scrollbar-track {
background: 0 0;
}
.list:not(.dark)::-webkit-scrollbar-thumb {
border-color: var(--theme);
}
}
</style>
</noscript>
@ -72,14 +44,10 @@
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
</head>
<body class="list" id="top">
<body class="list dark" id="top">
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>

View file

@ -28,34 +28,6 @@ My name is Alexander Pieck, and even though I&rsquo;m in the IT business, I&rsqu
}
</style>
<style>
@media (prefers-color-scheme: dark) {
:root {
--theme: rgb(29, 30, 32);
--entry: rgb(46, 46, 51);
--primary: rgb(218, 218, 219);
--secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68);
--content: rgb(196, 196, 197);
--code-block-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51);
}
.list {
background: var(--theme);
}
.list:not(.dark)::-webkit-scrollbar-track {
background: 0 0;
}
.list:not(.dark)::-webkit-scrollbar-thumb {
border-color: var(--theme);
}
}
</style>
</noscript>
@ -127,14 +99,10 @@ My name is Alexander Pieck, and even though I&rsquo;m in the IT business, I&rsqu
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
</head>
<body class="" id="top">
<body class=" dark" id="top">
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>

View file

@ -27,34 +27,6 @@
}
</style>
<style>
@media (prefers-color-scheme: dark) {
:root {
--theme: rgb(29, 30, 32);
--entry: rgb(46, 46, 51);
--primary: rgb(218, 218, 219);
--secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68);
--content: rgb(196, 196, 197);
--code-block-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51);
}
.list {
background: var(--theme);
}
.list:not(.dark)::-webkit-scrollbar-track {
background: 0 0;
}
.list:not(.dark)::-webkit-scrollbar-thumb {
border-color: var(--theme);
}
}
</style>
</noscript>
@ -124,14 +96,10 @@
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
</head>
<body class="" id="top">
<body class=" dark" id="top">
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>

View file

@ -28,34 +28,6 @@
}
</style>
<style>
@media (prefers-color-scheme: dark) {
:root {
--theme: rgb(29, 30, 32);
--entry: rgb(46, 46, 51);
--primary: rgb(218, 218, 219);
--secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68);
--content: rgb(196, 196, 197);
--code-block-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51);
}
.list {
background: var(--theme);
}
.list:not(.dark)::-webkit-scrollbar-track {
background: 0 0;
}
.list:not(.dark)::-webkit-scrollbar-thumb {
border-color: var(--theme);
}
}
</style>
</noscript>
@ -88,14 +60,10 @@
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
</head>
<body class="list" id="top">
<body class="list dark" id="top">
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>

View file

@ -28,34 +28,6 @@
}
</style>
<style>
@media (prefers-color-scheme: dark) {
:root {
--theme: rgb(29, 30, 32);
--entry: rgb(46, 46, 51);
--primary: rgb(218, 218, 219);
--secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68);
--content: rgb(196, 196, 197);
--code-block-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51);
}
.list {
background: var(--theme);
}
.list:not(.dark)::-webkit-scrollbar-track {
background: 0 0;
}
.list:not(.dark)::-webkit-scrollbar-thumb {
border-color: var(--theme);
}
}
</style>
</noscript>
@ -73,14 +45,10 @@
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
</head>
<body class="list" id="top">
<body class="list dark" id="top">
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>

View file

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facepunch</title><path d="M12 0C5.388 0 0 5.388 0 12s5.388 12 12 12 12-5.388 12-12S18.629 0 12 0zm0 21.314c-5.133 0-9.297-4.164-9.297-9.297S6.867 2.72 12 2.72s9.297 4.164 9.297 9.297-4.164 9.297-9.297 9.297zM10.028 12l1.48 1.479-1.922 1.92-1.478-1.478-1.428 1.444-1.92-1.92L6.203 12l-1.377-1.377 1.92-1.904 1.36 1.377 1.411-1.41 1.921 1.903L10.03 12zm9.162-1.462-1.411 1.411 1.479 1.479-1.92 1.904-1.48-1.48-1.444 1.446-1.904-1.921 1.445-1.428-1.377-1.377 1.904-1.92 1.376 1.376 1.411-1.41 1.92 1.92z"/></svg>

After

Width:  |  Height:  |  Size: 587 B

View file

@ -29,34 +29,6 @@
}
</style>
<style>
@media (prefers-color-scheme: dark) {
:root {
--theme: rgb(29, 30, 32);
--entry: rgb(46, 46, 51);
--primary: rgb(218, 218, 219);
--secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68);
--content: rgb(196, 196, 197);
--code-block-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51);
}
.list {
background: var(--theme);
}
.list:not(.dark)::-webkit-scrollbar-track {
background: 0 0;
}
.list:not(.dark)::-webkit-scrollbar-thumb {
border-color: var(--theme);
}
}
</style>
</noscript>
@ -87,14 +59,10 @@
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
</head>
<body class="list" id="top">
<body class="list dark" id="top">
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>
@ -151,16 +119,12 @@
</ul>
</nav>
</header>
<main class="main">
<article class="first-entry home-info">
<header class="entry-header">
<h1>Welcome to my blog! Feel free to contribute some topics over on GiTea</h1>
</header>
<div class="entry-content">
</div>
<footer class="entry-footer">
<div class="social-icons" >
<main class="main"><div class="profile">
<div class="profile_inner">
<img draggable="false" src="https://blog.k4li.me/img/facepunch.svg" alt="profile image" title=""
height="120" width="120" />
<h1>Hi, I&rsquo;m pika!</h1>
<span>You are currently at my dev-environment. Here I&rsquo;m trying to get better in stuff like writing blogentries, and styling a website/creating one. So, take anything here with a grain of salt and have fun reading. Also be sure to checkout the GiTea instance!</span><div class="social-icons" >
<a href="https://git.k4li.de/pika/" target="_blank" rel="noopener noreferrer me"
title="Gitea">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" fill="currentColor">
@ -170,33 +134,37 @@
</a>
</div>
</footer>
</article>
<div class="buttons">
<a class="button" href="/blog/" rel="noopener" title="BlogPosts">
<span class="button-inner">
BlogPosts
</span>
</a>
<a class="button" href="/archive/" rel="noopener" title="Archive">
<span class="button-inner">
Archive
</span>
</a>
<a class="button" href="/tutorials/" rel="noopener" title="Tutorials">
<span class="button-inner">
Tutorials
</span>
</a>
<a class="button" href="https://git.k4li.de/pika/" rel="noopener" title="GiTea">
<span class="button-inner">
GiTea&nbsp;
<svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="14" width="14">
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
<article class="post-entry">
<header class="entry-header">
<h2 class="entry-hint-parent">A challange will get you going fast
</h2>
</header>
<div class="entry-content">
<p>A Challenge Will Get You Going A few days ago, I embarked on a new adventure: writing my first blog entry. I didnt really know what I was doing, and to be honest, that hasnt changed much! 😊 However, I am amazed at how straightforward and enjoyable it is to learn website development with the Hugo framework. As I mentioned before, one of my goals was to create a website for a client....</p>
</div>
<footer class="entry-footer"><span title='2024-06-20 23:15:44 +0200 CEST'>June 20, 2024</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;401 words</footer>
<a class="entry-link" aria-label="post link to A challange will get you going fast" href="https://blog.k4li.me/blog/2024/2/"></a>
</article>
<article class="post-entry">
<header class="entry-header">
<h2 class="entry-hint-parent">About me and why I do this
</h2>
</header>
<div class="entry-content">
<p>whoami tl;dr pika aka. Alexander Pieck IT Sysadmin IT started as a hobby Homelab Enthusiast Never wanted to code… but now I might be coding… Welcome to my newly created blog! Im not sure how good this is going to be, but Ill try to make it as beautiful and interesting as possible.
My name is Alexander Pieck, and even though Im in the IT business, Im usually the kind of sysadmin who runs the servers and hardware and gets blamed for slow internet speeds and bad password policies (spoiler: I also hate changing my password every 180 days)....</p>
</div>
<footer class="entry-footer"><span title='2024-06-20 19:49:35 +0200 CEST'>June 20, 2024</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;527 words</footer>
<a class="entry-link" aria-label="post link to About me and why I do this" href="https://blog.k4li.me/blog/2024/1/"></a>
</article>
</main>
<footer class="footer">

View file

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>https://blog.k4li.me/</title>
<link rel="canonical" href="https://blog.k4li.me/">
<title>http://localhost:1313/</title>
<link rel="canonical" href="http://localhost:1313/">
<meta name="robots" content="noindex">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=https://blog.k4li.me/">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/">
</head>
</html>

View file

@ -28,34 +28,6 @@
}
</style>
<style>
@media (prefers-color-scheme: dark) {
:root {
--theme: rgb(29, 30, 32);
--entry: rgb(46, 46, 51);
--primary: rgb(218, 218, 219);
--secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68);
--content: rgb(196, 196, 197);
--code-block-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51);
}
.list {
background: var(--theme);
}
.list:not(.dark)::-webkit-scrollbar-track {
background: 0 0;
}
.list:not(.dark)::-webkit-scrollbar-thumb {
border-color: var(--theme);
}
}
</style>
</noscript>
@ -73,14 +45,10 @@
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
</head>
<body class="list" id="top">
<body class="list dark" id="top">
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>