YouHaveTrouble/youhavetrouble.github.io
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/youhavetrouble.github.io.git synced 2026-05-11 22:06:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

change theme a bit

Browse Source
This commit is contained in:
YouHaveTrouble
2025-12-27 12:47:24 +01:00
parent a709eff380
commit 07c9b1c0af
2 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+21 -3
View File
@@ -36,6 +36,21 @@ const latestBlogPost = await getCollection("posts")
</div> </div>
<div class="window-row"> <div class="window-row">
<div class="window socials" data-title="Socials" id="socials" aria-label="Socials"> <div class="window socials" data-title="Socials" id="socials" aria-label="Socials">
<div class="buttons">
<button popovertarget="socials-info" popovertargetaction="show" tabindex="0" title="Socials info">
<span class="icon">ℹ️</span>
</button>
</div>
<div popover="auto" id="socials-info" class="window">
<div class="buttons">
<button popovertarget="socials-info" popovertargetaction="hide" tabindex="0"
aria-label="Close socials info">
<span class="icon">❌</span>
</button>
</div>
<h2>Socials</h2>
<p>I don't use social media much. Many of the ones listed here are here just as a way to reserve my username<br/> and/or to make it easier to verify that the account belongs to me.</p>
</div>
<SocialsWidget/> <SocialsWidget/>
</div> </div>
<div class="window blog" aria-label="Blog" id="blog" data-title="Blog"> <div class="window blog" aria-label="Blog" id="blog" data-title="Blog">
@@ -87,7 +102,7 @@ const latestBlogPost = await getCollection("posts")
<div class="window-row"> <div class="window-row">
<div class="window" data-title="Projects" id="projects" aria-label="Projects"> <div class="window" data-title="Projects" id="projects" aria-label="Projects">
<div class="buttons"> <div class="buttons">
<button popovertarget="projects-info" popovertargetaction="show" tabindex="0" aria-label="Projects info"> <button popovertarget="projects-info" popovertargetaction="show" tabindex="0" title="Projects info">
<span class="icon">ℹ️</span> <span class="icon">ℹ️</span>
</button> </button>
</div> </div>
@@ -122,7 +137,7 @@ const latestBlogPost = await getCollection("posts")
<style lang="scss"> <style lang="scss">
#projects-info { #projects-info, #socials-info {
position: fixed; position: fixed;
} }
@@ -194,13 +209,16 @@ const latestBlogPost = await getCollection("posts")
} }
.buttons { .buttons {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.rss { .rss {
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
aspect-ratio: 1/1; aspect-ratio: 1/1;
padding-bottom: 4px;
a { a {
height: 100%; height: 100%;
width: 100%; width: 100%;
src/styles/global.css
+5 -5
View File
@@ -285,7 +285,7 @@ button {
} }
[popover]::backdrop { [popover]::backdrop {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(49, 49, 49, 0.5);
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
} }
@@ -314,13 +314,13 @@ button {
.window { .window {
border: 2px solid #d0d0d0; border: 2px solid #d0d0d0;
border-radius: 0.5rem;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
overflow-y: hidden; overflow-y: hidden;
padding-top: 1.5rem; padding-top: 1.5rem;
min-width: 10rem; min-width: 10rem;
background-color: #232222; background-color: rgba(17, 17, 17, 0.95);
backdrop-filter: blur(4px);
color: #f3f3f3; color: #f3f3f3;
container-type: normal; container-type: normal;
&::before { &::before {
@@ -328,7 +328,7 @@ button {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 1.5rem; height: 1.75rem;
width: 100%; width: 100%;
border-bottom: #d0d0d0 solid 2px; border-bottom: #d0d0d0 solid 2px;
display: flex; display: flex;
@@ -351,6 +351,6 @@ button {
top: 0; top: 0;
right: 0; right: 0;
font-size: 0.75rem; font-size: 0.75rem;
height: 1.5rem; height: 1.6rem;
} }
} }