Uniform icon size class

src/components/LayoutComponents/Navbar.astro

@@ -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"
             />

src/components/LayoutComponents/ThemeSwitch.astro

@@ -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: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 />
+    <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 />
+    <Icon name="mdi:weather-night" title="Switch to light theme" data-theme-moon class="icon-15em" />
 </div>
 
 <script>

src/components/SkillCard.astro

@@ -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;
         }
 

src/layouts/Layout.astro

@@ -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>] : 
+						[<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} /></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>

src/layouts/MarkdownLayout.astro

@@ -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>

src/pages/me.astro

@@ -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} />)}