mirror of
https://github.com/withastro/astro.git
synced 2025-03-10 23:01:26 -05:00
simplifying the footer, reducing font sizes slightly
This commit is contained in:
Tony Sullivan
parent
8c5280937d
commit
ff1efb37a4
3 changed files with 42 additions and 56 deletions
|
|
@ -1,63 +1,30 @@
|
|||
---
|
||||
import settings from '../settings';
|
||||
import Icon from './Icon.astro';
|
||||
|
||||
const socialLinks = Object.values(settings.social)
|
||||
---
|
||||
|
||||
<footer>
|
||||
<section>
|
||||
<p>
|
||||
{settings.name} © {new Date().getFullYear()}
|
||||
</p>
|
||||
<b>•</b>
|
||||
<p>
|
||||
Designed & Developed with ♥
|
||||
</p>
|
||||
<b>•</b>
|
||||
<p><a href="/rss.xml"><Icon icon="rss-alt" size="1.5em" />RSS</a></p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
{
|
||||
socialLinks.map(({ url, title }) => (
|
||||
<a href={url}>{title}</a>
|
||||
))
|
||||
}
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
border-top: 3px solid var(--theme-shade-subtle);
|
||||
border-radius: var(--theme-radius-xl);
|
||||
padding: var(--theme-space-md);
|
||||
gap: var(--theme-space-sm);
|
||||
row-gap: var(--theme-space-sm);
|
||||
column-gap: var(--theme-space-lg);
|
||||
color: var(--theme-gray-200);
|
||||
font-size: var(--theme-text-sm);
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
gap: var(--theme-space-xs);
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--theme-space-sm);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p :global(svg) {
|
||||
margin-block-start: -.25em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ const socialLinks = Object.entries(settings.social);
|
|||
|
||||
.bio-sections {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
align-items: flex-start;
|
||||
gap: var(--theme-space-sm) var(--theme-space-md);
|
||||
}
|
||||
|
|
@ -137,12 +137,23 @@ const socialLinks = Object.entries(settings.social);
|
|||
gap: var(--theme-space-3xs);
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.social a {
|
||||
color: var(--theme-accent-dark);
|
||||
}
|
||||
|
||||
@media (min-width: 35em) {
|
||||
.bio-sections {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.social {
|
||||
grid-row: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
.bio-sections {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,14 @@
|
|||
--theme-text-2xl: clamp(1.73rem, calc(1.58rem + 0.75vw), 2.16rem);
|
||||
--theme-text-3xl: clamp(2.07rem, calc(1.89rem + 0.90vw), 2.59rem);
|
||||
--theme-text-4xl: clamp(2.49rem, calc(2.27rem + 1.08vw), 3.11rem);
|
||||
/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
|
||||
--theme-text-sm: clamp(0.83rem, calc(0.80rem + 0.18vw), 0.94rem);
|
||||
--theme-text-base: clamp(1.00rem, calc(0.96rem + 0.22vw), 1.13rem);
|
||||
--theme-text-lg: clamp(1.20rem, calc(1.15rem + 0.26vw), 1.35rem);
|
||||
--theme-text-xl: clamp(1.44rem, calc(1.38rem + 0.31vw), 1.62rem);
|
||||
--theme-text-2xl: clamp(1.73rem, calc(1.65rem + 0.38vw), 1.94rem);
|
||||
--theme-text-3xl: clamp(2.07rem, calc(1.98rem + 0.45vw), 2.33rem);
|
||||
--theme-text-4xl: clamp(2.49rem, calc(2.38rem + 0.54vw), 2.80rem);
|
||||
|
||||
/* Fonts */
|
||||
--__font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
|
|
@ -52,29 +60,29 @@
|
|||
--theme-transition: 0.2s ease-in-out;
|
||||
|
||||
/* Spacing */
|
||||
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
|
||||
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
|
||||
--theme-space-3xs: clamp(0.25rem, calc(0.23rem + 0.11vw), 0.31rem);
|
||||
--theme-space-2xs: clamp(0.50rem, calc(0.46rem + 0.22vw), 0.63rem);
|
||||
--theme-space-xs: clamp(0.75rem, calc(0.68rem + 0.33vw), 0.94rem);
|
||||
--theme-space-sm: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
|
||||
--theme-space-md: clamp(1.50rem, calc(1.37rem + 0.65vw), 1.88rem);
|
||||
--theme-space-lg: clamp(2.00rem, calc(1.83rem + 0.87vw), 2.50rem);
|
||||
--theme-space-xl: clamp(3.00rem, calc(2.74rem + 1.30vw), 3.75rem);
|
||||
--theme-space-2xl: clamp(4.00rem, calc(3.65rem + 1.74vw), 5.00rem);
|
||||
--theme-space-3xl: clamp(6.00rem, calc(5.48rem + 2.61vw), 7.50rem);
|
||||
--theme-space-2xs: clamp(0.50rem, calc(0.48rem + 0.11vw), 0.56rem);
|
||||
--theme-space-xs: clamp(0.75rem, calc(0.71rem + 0.22vw), 0.88rem);
|
||||
--theme-space-sm: clamp(1.00rem, calc(0.96rem + 0.22vw), 1.13rem);
|
||||
--theme-space-md: clamp(1.50rem, calc(1.43rem + 0.33vw), 1.69rem);
|
||||
--theme-space-lg: clamp(2.00rem, calc(1.91rem + 0.43vw), 2.25rem);
|
||||
--theme-space-xl: clamp(3.00rem, calc(2.87rem + 0.65vw), 3.38rem);
|
||||
--theme-space-2xl: clamp(4.00rem, calc(3.83rem + 0.87vw), 4.50rem);
|
||||
--theme-space-3xl: clamp(6.00rem, calc(5.74rem + 1.30vw), 6.75rem);
|
||||
|
||||
/* One-up pairs */
|
||||
--theme-space-3xs-2xs: clamp(0.25rem, calc(0.12rem + 0.65vw), 0.63rem);
|
||||
--theme-space-2xs-xs: clamp(0.50rem, calc(0.35rem + 0.76vw), 0.94rem);
|
||||
--theme-space-xs-sm: clamp(0.75rem, calc(0.58rem + 0.87vw), 1.25rem);
|
||||
--theme-space-sm-md: clamp(1.00rem, calc(0.70rem + 1.52vw), 1.88rem);
|
||||
--theme-space-md-lg: clamp(1.50rem, calc(1.15rem + 1.74vw), 2.50rem);
|
||||
--theme-space-lg-xl: clamp(2.00rem, calc(1.39rem + 3.04vw), 3.75rem);
|
||||
--theme-space-xl-2xl: clamp(3.00rem, calc(2.30rem + 3.48vw), 5.00rem);
|
||||
--theme-space-2xl-3xl: clamp(4.00rem, calc(2.78rem + 6.09vw), 7.50rem);
|
||||
--theme-space-3xs-2xs: clamp(0.25rem, calc(0.14rem + 0.54vw), 0.56rem);
|
||||
--theme-space-2xs-xs: clamp(0.50rem, calc(0.37rem + 0.65vw), 0.88rem);
|
||||
--theme-space-xs-sm: clamp(0.75rem, calc(0.62rem + 0.65vw), 1.13rem);
|
||||
--theme-space-sm-md: clamp(1.00rem, calc(0.76rem + 1.20vw), 1.69rem);
|
||||
--theme-space-md-lg: clamp(1.50rem, calc(1.24rem + 1.30vw), 2.25rem);
|
||||
--theme-space-lg-xl: clamp(2.00rem, calc(1.52rem + 2.39vw), 3.38rem);
|
||||
--theme-space-xl-2xl: clamp(3.00rem, calc(2.48rem + 2.61vw), 4.50rem);
|
||||
--theme-space-2xl-3xl: clamp(4.00rem, calc(3.04rem + 4.78vw), 6.75rem);
|
||||
|
||||
/* Custom pairs */
|
||||
--theme-space-sm-lg: clamp(1.00rem, calc(0.48rem + 2.61vw), 2.50rem);
|
||||
--theme-space-sm-lg: clamp(1.00rem, calc(0.57rem + 2.17vw), 2.25rem);
|
||||
}
|
||||
|
||||
:root.theme-dark {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue