Periodic/blazestar.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify social links component. Style tweaks for responsiveness

Browse Source
This commit is contained in:
Drew Haven
2026-05-01 20:48:01 -07:00
parent 40f38301ea
commit f8e1ce6b70
6 changed files with 65 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Footer.astro
View File

@@ -1,8 +1,12 @@
--- ---
import SocialLinks from "./SocialLinks.astro";
const today = new Date(); const today = new Date();
--- ---
<footer> <footer>
<div class="social-links">
<SocialLinks />
</div>
<div> <div>
&copy; {today.getFullYear()} Periodic. All rights reserved. &copy; {today.getFullYear()} Periodic. All rights reserved.
</div> </div>
@@ -19,7 +23,15 @@ const today = new Date();
<style> <style>
footer { footer {
padding: 2em 1em 6em 1em; padding: 2em 1em 6em 1em;
text-align: center; display: flex;
flex-direction: column;
align-items: center;
color: var(--color-gray); color: var(--color-gray);
} }
@media (min-width: 1000px) {
.social-links {
display: none;
}
}
</style> </style>

31
src/components/Header.astro
View File

@@ -3,6 +3,7 @@ import HeaderLink from './HeaderLink.astro';
import Blazestar from './Blazestar.astro'; import Blazestar from './Blazestar.astro';
import NoteHierarchy from './NoteHierarchy.astro'; import NoteHierarchy from './NoteHierarchy.astro';
import NotchedBox from './NotchedBox.astro'; import NotchedBox from './NotchedBox.astro';
import SocialLinks from './SocialLinks.astro';
--- ---
<header> <header>
@@ -24,26 +25,6 @@ import NotchedBox from './NotchedBox.astro';
</div> </div>
</div> </div>
</div> </div>
<div class="social-links">
<a href="https://m.webtoo.ls/@astro" target="_blank">
<span class="sr-only">Follow Periodic on Mastodon</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
><path
fill="currentColor"
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
></path></svg
>
</a>
<a href="https://github.com/periodic" target="_blank">
<span class="sr-only">Go to Periodic's GitHub repo</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
><path
fill="currentColor"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path></svg
>
</a>
</div>
</nav> </nav>
<div class="h-card"> <div class="h-card">
<img class="u-photo" src="/photos/Bingley Business.jpg" /> <img class="u-photo" src="/photos/Bingley Business.jpg" />
@@ -54,7 +35,7 @@ import NotchedBox from './NotchedBox.astro';
<style> <style>
header { header {
color: var(--color-light-text); color: var(--color-light-text);
margin: 0; margin: 0 1em;
padding: 0; padding: 0;
} }
@@ -71,6 +52,7 @@ import NotchedBox from './NotchedBox.astro';
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
} }
nav a { nav a {
padding: 1em 0.5em; padding: 1em 0.5em;
@@ -90,12 +72,6 @@ import NotchedBox from './NotchedBox.astro';
display: flex; display: flex;
} }
@media (max-width: 800px) {
nav {
flex-direction: column;
}
}
.internal-links { .internal-links {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -151,4 +127,5 @@ import NotchedBox from './NotchedBox.astro';
.h-card { .h-card {
display: none; display: none;
} }
</style> </style>

31
src/components/Sidebar.astro
View File

@@ -2,6 +2,7 @@
import SidebarLink from './SidebarLink.astro'; import SidebarLink from './SidebarLink.astro';
import Blazestar from './Blazestar.astro'; import Blazestar from './Blazestar.astro';
import NotesLinks from './NotesLinks.astro'; import NotesLinks from './NotesLinks.astro';
import SocialLinks from './SocialLinks.astro';
--- ---
<header> <header>
@@ -14,24 +15,7 @@ import NotesLinks from './NotesLinks.astro';
<NotesLinks /> <NotesLinks />
</div> </div>
<div class="social-links"> <div class="social-links">
<a href="https://mastodon.social/@periodic" target="_blank" rel="me"> <SocialLinks />
<span class="sr-only">Follow Periodic on Mastodon</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
><path
fill="currentColor"
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
></path></svg
>
</a>
<a href="https://github.com/periodic" target="_blank" rel="me">
<span class="sr-only">Go to Periodic's GitHub repo</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
><path
fill="currentColor"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path></svg
>
</a>
</div> </div>
</nav> </nav>
</header> </header>
@@ -75,15 +59,4 @@ import NotesLinks from './NotesLinks.astro';
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
} }
.social-links,
.social-links a {
display: flex;
gap: 16px;
justify-content: center;
}
@media (max-width: 720px) {
.social-links {
display: none;
}
}
</style> </style>

32
src/components/SocialLinks.astro Normal file
View File

@@ -0,0 +1,32 @@
<div class="social-links">
<a href="https://m.webtoo.ls/@astro" target="_blank">
<span class="sr-only">Follow Periodic on Mastodon</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
><path
fill="currentColor"
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
></path></svg>
</a>
<a href="https://github.com/periodic" target="_blank">
<span class="sr-only">Go to Periodic's GitHub repo</span>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
><path
fill="currentColor"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path></svg
>
</a>
</div>
<style>
.social-links {
display: flex;
flex-direction: row;
gap: 16px;
a {
color: var(--color-light-text);
text-decoration: none;
}
}
</style>

12
src/layouts/RootLayout.astro
View File

@@ -33,7 +33,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
</div> </div>
</body> </body>
<style> <style>
@media (max-width: 900px) { @media (max-width: 1000px) {
body { body {
grid-template-areas: grid-template-areas:
"header" "header"
@@ -52,7 +52,8 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
display: none; display: none;
} }
} }
@media (min-width: 900px) {
@media (min-width: 1000px) {
body { body {
grid-template-areas: grid-template-areas:
"header header" "header header"
@@ -69,6 +70,13 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
display: block; display: block;
} }
} }
@media (max-width: 500px) {
body {
font-size: 14px;
}
}
body { body {
display: grid; display: grid;
} }

4
src/styles/global.css
View File

@@ -23,6 +23,10 @@
--font-size-2xl: calc(var(--font-size-xl) * 1.2); --font-size-2xl: calc(var(--font-size-xl) * 1.2);
--font-size-3xl: calc(var(--font-size-2xl) * 1.2); --font-size-3xl: calc(var(--font-size-2xl) * 1.2);
--font-size-4xl: calc(var(--font-size-3xl) * 1.2); --font-size-4xl: calc(var(--font-size-3xl) * 1.2);
--width-full: 1000px;
--width-narrow: 800px;
--width-mobile: 500px;
} }
@font-face { @font-face {