c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Uniform icon size class

Browse Source
This commit is contained in:
Daniel Kluge 2024-03-03 15:58:24 +01:00
parent c40af33d1d
commit e339b21f66
No known key found for this signature in database
6 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/LayoutComponents/Navbar.astro
View File

@ -3,10 +3,6 @@ import { Image } from "astro:assets";
import { Icon } from "astro-icon/components";
import ThemeSwitch from "./ThemeSwitch.astro";
import logo from "./logo.png";
const defaultFontSize = 16;
// 120%, 2em
const svgSize = defaultFontSize * 1.2 * 2;
---
<nav class="navigation">
@ -19,9 +15,9 @@ const svgSize = defaultFontSize * 1.2 * 2;
<span class="linkIcon"
><Icon
name="mdi:home"
size={svgSize}
title="Home and Projects"
id="mdi_nav_home"
class="icon-2em"
/></span
>
</a>
@ -32,7 +28,7 @@ const svgSize = defaultFontSize * 1.2 * 2;
<span class="linkIcon"
><Icon
name="mdi:account"
size={svgSize}
class="icon-2em"
title="About Me"
id="mdi_nav_aboutme"
/></span
@ -44,7 +40,7 @@ const svgSize = defaultFontSize * 1.2 * 2;
<a href="/terminal" class="nostyle">
<Icon
name="mdi:console"
size={svgSize}
class="icon-2em"
title="Terminal"
id="mdi_nav_terminal"
/>

6
src/components/LayoutComponents/ThemeSwitch.astro
View File

@ -3,9 +3,9 @@ import { Icon } from "astro-icon/components";
---
<div class="switch" transition:persist="theme-switch">
<Icon name="mdi:language-javascript" title="Theme switching needs JS to be enabled." data-theme-ph />
<Icon name="mdi:white-balance-sunny" title="Switch to dark theme" data-theme-sun />
<Icon name="mdi:weather-night" title="Switch to light theme" data-theme-moon />
<Icon name="mdi:language-javascript" title="Theme switching needs JS to be enabled." data-theme-ph class="icon-15em" />
<Icon name="mdi:white-balance-sunny" title="Switch to dark theme" data-theme-sun class="icon-15em" />
<Icon name="mdi:weather-night" title="Switch to light theme" data-theme-moon class="icon-15em" />
</div>
<script>

5
src/components/SkillCard.astro
View File

@ -40,7 +40,7 @@ const cardStyle = {
.map((skill) => (
<div class="skillBar">
<div class="barName">
<Icon name={skill.icon} />
<Icon name={skill.icon} class="icon-2em" />
</div>
<div
class="percentBar"
@ -61,7 +61,7 @@ const cardStyle = {
<>
<div class="badge">
<span>
<Icon name={additional.icon} />
<Icon name={additional.icon} class="icon-1em" />
</span>
<span>{additional.name}</span>
</div>
@ -202,7 +202,6 @@ const cardStyle = {
}
& > div:first-of-type {
height: 2em;
grid-row: 1/3;
}

20
src/layouts/Layout.astro
View File

@ -137,8 +137,8 @@ const { title, showAfterMain, mainTransitionName } = Astro.props;
<span class="divider">|</span>
{socials.flatMap((social, i) => (
i !== 0 ?
[<span class="divider">|</span>, <a href={social.url} target="_blank" rel="noreferrer" class="socialIcon"><Icon name={social.icon} title={social.name} /></a>] :
[<a href={social.url} target="_blank" rel="noreferrer" class="socialIcon"><Icon name={social.icon} title={social.name} /></a>]
[<span class="divider">|</span>, <a href={social.url} target="_blank" rel="noreferrer" class="socialIcon"><Icon name={social.icon} title={social.name} class="socialIcon" /></a>] :
[<a href={social.url} target="_blank" rel="noreferrer" class="socialIcon"><Icon name={social.icon} title={social.name} class="socialIcon" /></a>]
))}
<span class="divider">|</span>
<a class="nocolor" target="_blank" href="mailto:admin-website@c0ntroller.de" rel="noreferrer">Contact</a>
@ -304,4 +304,20 @@ const { title, showAfterMain, mainTransitionName } = Astro.props;
h6 {
color: var(--blog_color-accent-dark);
}
.icon-1em {
height: 1em;
width: 1em;
}
.icon-15em {
height: 1.5em;
width: 1.5em;
}
.icon-2em {
height: 2em;
width: 2em;
}
</style>

2
src/layouts/MarkdownLayout.astro
View File

@ -24,7 +24,7 @@ const gitUrl = `https://git.c0ntroller.de/c0ntroller/frontpage/src/branch/dev/sr
{ moreLinks && moreLinks.length !== 0 ?
<div class="more">
{ moreLinks.map(l => <a href={l.href} referrerpolicy="no-referrer" class="nostyle" style={{ display: "inline-block", width: "2em" }}><Icon name={l.icon} /></a>) }
{ moreLinks.map(l => <a href={l.href} referrerpolicy="no-referrer" class="nostyle"><Icon name={l.icon} class="icon-2em" /></a>) }
</div>
: null}
<h1 transition:name={`markdown-title-${slug}`}>{title}</h1>

5
src/pages/me.astro
View File

@ -67,16 +67,15 @@ const age = new Date().getFullYear() - 1998 - (new Date().getMonth() <= 10 ? 1 :
target="_blank"
rel="noreferrer"
class="nocolor"
style={{ width: "2em" }}
>
<Icon name={social.icon} />
<Icon name={social.icon} class="icon-2em" />
</a>
))
}
</div>
<h2>Achievements</h2>
{achievements.map((achievement) => <div class="achievement">
<Icon name={achievement.icon} /><span>{achievement.description}</span>
<Icon name={achievement.icon} class="icon-2em" /><span>{achievement.description}</span>
</div>)}
<h2>Skills</h2>
{skills.cards.map((card) => <SkillCard card={card} />)}