kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 12:05:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: move icon and click area sizes into tokens

Browse Source
This commit is contained in:
Stefan Imhoff
2023-02-24 16:20:51 +01:00
parent 8c2095af74
commit 8219cf576a
4 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Backlink.astro
View File

@@ -16,10 +16,10 @@ const { backLink } = Astro.props;
>
<button
aria-label="Back to overview"
class="back-link-button flex h-[40px] w-[40px] cursor-pointer items-center justify-center border-none text-[0]"
class="back-link-button h-clickarea w-clickarea flex cursor-pointer items-center justify-center border-none text-[0]"
type="button"
>
<Sprite name="ri:arrow-left-line" class="h-[25px] w-[25px]" />
<Sprite name="ri:arrow-left-line" class="h-icon w-icon" />
</button>
</a>
)

6
src/components/ThemeToggle.astro
View File

@@ -3,15 +3,15 @@ import { Sprite } from 'astro-icon';
---
<theme-toggle
class="col-start-18 flex h-[40px] w-[40px] items-center self-center justify-center justify-self-center print:hidden"
class="col-start-18 flex h-clickarea w-clickarea items-center self-center justify-center justify-self-center print:hidden"
>
<button
aria-label="Switch color theme"
class="theme-toggle group flex h-[40px] w-[40px] cursor-pointer items-center justify-center self-center border-0 text-[0]"
class="theme-toggle h-clickarea w-clickarea group flex cursor-pointer items-center justify-center self-center border-0 text-[0]"
>
<Sprite
name="circle"
class="duration-500 h-[25px] w-[25px] transition-transform ease-in-out group-hover:scale-125 group-focus:scale-125"
class="duration-500 h-icon w-icon transition-transform ease-in-out group-hover:scale-125 group-focus:scale-125"
/>
</button>
</theme-toggle>

6
src/layouts/Layout.astro
View File

@@ -61,11 +61,5 @@ const { title, backLink } = Astro.props;
Footer
</footer>
</Sprite.Provider>
<style>
:global([astro-icon]) {
width: 24px;
height: 24px;
}
</style>
</body>
</html>

2
tailwind.config.cjs
View File

@@ -107,6 +107,8 @@ module.exports = {
20: 'clamp(8.916rem, 19.08vw, 10.699rem)', // --space-20
55: '5.55vw', // --space-55 TODO: new name, e.g. spacing-grid
layout: 'clamp(1.5rem, 5.55vw, 4.5rem)',
icon: '24px',
clickarea: '40px',
},
fontFamily: {
sans: ['SecuelaVariable', 'Arial', 'sans-serif'], // --font-family-base