src/components/ArticleCard.astro

@@ -1,6 +1,5 @@
 ---
 import Article from './Article.astro';
-import SimpleMenu from '../layouts/SimpleMenu.astro';
 import MenuItem from './MenuItem.astro';
 
 import postRenderer from '../post-renderer.mjs';
@@ -28,7 +27,7 @@ const link = `/blog/${post.slug}`;
         image={image}
         preview={true}
     />
-    <SimpleMenu jcc="end">
+    <ul>
         <MenuItem
             name={/*Comments*/""}
             link={`/blog/comments#${post.slug}`}
@@ -62,13 +61,23 @@ const link = `/blog/${post.slug}`;
             icon="&#xf105;"
             atLeft={false}
         />
-    </SimpleMenu>
+    </ul>
 </div>
 
 <style>
     .card {
         width: 100%;
     }
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+    }
 </style>
 
 <script>

src/components/GridItem.astro

@@ -1,98 +1,67 @@
 ---
-import SimpleMenu from '../layouts/SimpleMenu.astro';
-import Icon from './Icon.astro';
-
 export interface Props {
-    id: string;
     title: string;
     text: string;
     url: string;
-    width?: number;
+    elemClass?: Array<String>;
+    btnClass?: Array<string>;
+    dataJs?: string;
 }
 
 const {
-    id,
     title, text, url,
-    width = 9,
+    elemClass = [],
+    btnClass = [],
+    dataJs = "",
 } = Astro.props;
 ---
 
-<div class="gi" id={id}>
+<div class:list={["gi", ...elemClass]}>
-    <div class="gi-row">
+    <a href={url} target="_blank" class="gi-main">
-        <div class="gi-main">
+        <span class="icon-wrapper">
-            <span class="icon-wrapper">
+            <slot name="icon-primary" />
-                <slot name="icon-primary" />
+        </span>
+        <span class="content">
+            <span class="title">
+                <slot name="title">
+                    {title}
+                </slot>
             </span>
-            <span class="content">
+            <span class="text">
-                <span class="title">
+                <slot name="text">
-                    <slot name="title">
+                    {text}
-                        {title}
+                </slot>
-                    </slot>
-                </span>
-                <span class="text">
-                    <slot name="text">
-                        {text}
-                    </slot>
-                </span>
             </span>
-        </div>
+        </span>
-        <a href={`#${id}`} class="gi-btn gi-btn-expand">
+    </a>
-            <span class="icon-wrapper">
+    <a href="javascript:void(0)" class:list={["gi-btn", ...btnClass]} data-js={dataJs}>
-                <Icon code="&#xf107;" />
+        <span class="icon-wrapper">
-            </span>
+            <slot name="icon-btn" />
-        </a>
+        </span>
-        <a href="#scroll" class="gi-btn gi-btn-close">
+    </a>
-            <span class="icon-wrapper">
-                <Icon code="&#xf106;" />
-            </span>
-        </a>
-    </div>
-    <div class="gi-options">
-        <SimpleMenu jcc="center">
-            <slot name="options" />
-        </SimpleMenu>
-    </div>
-    <div class="gi-options gi-note">
-        <slot name="note" />
-    </div>
 </div>
 
-<style lang="less" define:vars={{width: `${width}rem`}}>
+<style lang="less">
+    @import "/src/styles/grid_calc.less";
+
     .gi {
         //     vertical horizontal
-        padding: 0.4rem 0.6rem;
+        padding: 0.4rem @gi-horiz-padding;
 
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
+        align-items: center;
 
+        width: @gi-width;
         min-height: 3rem;
         border-radius: var(--bdrs);
 
         &:hover {
             background: var(--accent-bg);
         }
-
-        .gi-options { display: none }
-        .gi-btn-close { display: none }
-        .gi-btn-expand { display: flex }
-
-        &:target {
-            background: var(--accent-bg);
-
-            .gi-options { display: block }
-
-            .gi-btn-close { display: flex }
-            .gi-btn-expand { display: none }
-        }
     }
 
-    .gi-row {
+    a.gi-main {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-    .gi-main {
         flex-grow: 1;
         height: 100%;
 
@@ -104,36 +73,17 @@ const {
         text-decoration: none;
 
         .icon-wrapper {
-            @icon-size: 2.3rem;
+            width: @gi-icon-primary;
-
+            font-size: @gi-icon-primary;
-            width: @icon-size;
+            margin-right: @gi-icon-margin;
-            font-size: @icon-size;
-            margin-right: 0.4rem;
 
             & > :global(img) {
-                width: @icon-size;
+                width: @gi-icon-primary;
-            }
-        }
-
-        .content {
-            display: flex;
-            flex-direction: column;
-
-            width: var(--width);
-            overflow: hidden;
-
-            .title {
-                font-weight: 600;
-            }
-            
-            .text {
-                font-size: 0.9rem;
-                color: var(--fg-sec);
             }
         }
     }
 
-    .gi-btn {
+    a.gi-btn {
         position: relative;
         font-size: 1.1rem;
 
@@ -142,14 +92,12 @@ const {
         align-items: center;
 
         .icon-wrapper {
-            @icon-size: 1.25rem;
+            width: @gi-icon-btn;
-
+            font-size: @gi-icon-btn;
-            width: @icon-size;
+            margin-left: @gi-icon-margin;
-            font-size: @icon-size;
-            margin-left: 0.4rem;
 
             & > :global(img) {
-                width: @icon-size;
+                width: @gi-icon-btn;
             }
         }
     }
@@ -158,7 +106,22 @@ const {
         display: flex;
         flex-direction: column;
         align-items: center;
+    }
 
-        user-select: none;
+    .content {
+        display: flex;
+        flex-direction: column;
+
+        width: @gi-text-width;
+        overflow: hidden;
+
+        .title {
+            font-weight: 600;
+        }
+        
+        .text {
+            font-size: 0.9rem;
+            color: var(--fg-sec);
+        }
     }
 </style>

src/components/HostedService.astro

@@ -12,11 +12,23 @@ const { name, description, url, iconUrl = `${url}/favicon.ico` } = Astro.props;
 ---
 
 <GridItem
-    id={`s-${name.toLowerCase()}`}
     title={name}
     text={description}
     url={url}
-    width={14}
+    elemClass={["gi-service"]}
 >
     <img src={iconUrl} slot="icon-primary" />
 </GridItem>
+
+<style lang="less" is:global>
+    @import "/src/styles/grid_calc.less";
+
+    // Overwriting default GridItem's width
+    .gi-service {
+        width: @service-width;
+
+        .content {
+            width: @service-text-width;
+        }
+    }
+</style>

src/components/MenuItem.astro

@@ -5,35 +5,27 @@ export interface Props {
     name: string;
     link: string;
     icon: string;
-    tblank?: boolean;
     atLeft?: boolean;
-    classes?: Array<string>;
-    datajs?: string;
 }
 
-const {
+const { name, link, icon, atLeft = true } = Astro.props;
-    name, link, icon,
-    tblank = false,
-    atLeft = true,
-    classes = [],
-    datajs = "",
-} = Astro.props;
 ---
 
 <li>
     <slot name="js-dataset"></slot>
-    <a href={link} target={tblank ? "_blank" : "_self"} class:list={classes} data-js={datajs}>
+    <a href={link}>
+        {!atLeft ? name : ""}
         <span class="icon-wrapper">
             <Icon code={icon} />
         </span>
-        {name}
+        {atLeft ? name : ""}
     </a>
 </li>
 
-<style lang="less" define:vars={{fxd: atLeft ? "row" : "row-reverse"}}>
+<style lang="less">
     a {
         display: flex;
-        flex-direction: var(--fxd);
+        flex-direction: row;
         align-items: center;
 
         font-size: 1.15rem;

src/components/Profile.astro

@@ -1,7 +1,6 @@
 ---
 import GridItem from './GridItem.astro';
 import Icon from './Icon.astro';
-import MenuItem from './MenuItem.astro';
 
 export interface Props {
     app: string;
@@ -9,37 +8,19 @@ export interface Props {
     name: string;
     icon: string;
     copyName?: boolean;
-    note?: string;
 }
 
-const {
+const { app, url, name, icon, copyName = false } = Astro.props;
-    app, url, name, icon,
-    copyName = false,
-    note = "",
-} = Astro.props;
 ---
 
 <GridItem
-    id={`p-${app.toLowerCase()}`}
     title={app} text={name} url={url}
-    width={9.5}
+    elemClass={["gi-profile"]}
+    btnClass={["profile-copy"]}
+    dataJs={copyName ? name : url}
 >
     <Icon code={icon} slot="icon-primary" />
-    <Fragment slot="options">
+    <Icon code="&#xf0c5;" slot="icon-btn" />
-        <MenuItem
-            name=""
-            link="javascript:void(0)"
-            icon="&#xf0c5;"
-            classes={["profile-copy"]}
-            datajs={copyName ? name : url}
-        />
-        <MenuItem
-            name="Open"
-            link={url}
-            icon="&#xf360;"
-            tblank
-        />
-    </Fragment>
 </GridItem>
 
 <script>
@@ -54,3 +35,15 @@ const {
         elem.addEventListener('click', copyClickHandler)
     }
 </script>
+
+<style lang="less" is:global>
+    @import "/src/styles/grid_calc.less";
+
+    .gi-profile {
+        width: @profile-width;
+
+        .content {
+            width: @profile-text-width;
+        }
+    }
+</style>

src/layouts/BlogLayout.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "./Layout.astro";
-import NavMenu from "./NavMenu.astro";
+import Menu from "./Menu.astro";
 import MenuItem from "../components/MenuItem.astro";
 
 export interface Props {
@@ -14,7 +14,7 @@ const { title, description, article = false } = Astro.props;
 
 <Layout title={"Blog | " + title} description={description}>
     <slot name="metadata" slot="metadata" />
-    <NavMenu>
+    <Menu>
         {
             !article ?
             <MenuItem name="Home" icon="&#xf104;" link="/" />
@@ -24,7 +24,7 @@ const { title, description, article = false } = Astro.props;
         <MenuItem name="Shorts" icon="&#xf0e7;" link="/blog/shorts" />
         <MenuItem name="Random" icon="&#xf522;" link="/blog/random" />
         <MenuItem name="Search" icon="&#xf002;" link="/blog/search" />
-    </NavMenu>
+    </Menu>
     <main>
         <slot />
     </main>

src/layouts/Layout.astro

@@ -19,7 +19,6 @@ const { title, description } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
-		<div id="scroll"></div>
 		<slot />
 	</body>
 </html>
@@ -45,7 +44,7 @@ const { title, description } = Astro.props;
 		flex-direction: column;
 	}
 
-	main {
+	main  {
 		margin: auto;
 		padding: @main-padding;
 		max-width: @max-width;
@@ -114,11 +113,3 @@ const { title, description } = Astro.props;
 		}
 	}
 </style>
-
-<style>
-	#scroll {
-		position: fixed;
-		display: block;
-		height: 1px;
-	}
-</style>

src/layouts/MainLayout.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "./Layout.astro";
-import NavMenu from "./NavMenu.astro";
+import Menu from "./Menu.astro";
 import MenuItem from "../components/MenuItem.astro";
 
 export interface Props {
@@ -12,12 +12,12 @@ const { page, description } = Astro.props;
 ---
 
 <Layout title={"DarkCat09 | " + page} description={description}>
-    <NavMenu>
+    <Menu>
 		<MenuItem name="Homepage" icon="&#xf015;" link="/" />
 		<MenuItem name="Projects" icon="&#xf121;" link="/projects" />
 		<MenuItem name="Services" icon="&#xf233;" link="/services" />
 		<MenuItem name="Blog" icon="&#xf1ea;" link="/blog" />
-	</NavMenu>
+	</Menu>
     <main>
         <slot />
     </main>

src/layouts/Modal.astro

@@ -9,7 +9,7 @@ const { id } = Astro.props;
 ---
 
 <div class="modal-bg" id={id}>
-    <a href="#scroll" class="modal-bg-close"></a>
+    <a href="#" class="modal-bg-close"></a>
     <div class="modal">
         <div class="controls">
             <a href="#"><Icon code="&#xf00d;" /></a>

src/layouts/SimpleMenu.astro

@@ -1,23 +0,0 @@
----
-export interface Props {
-    jcc: "start" | "center" | "end" | "space-around" | "space-between";
-}
-
-const { jcc } = Astro.props;
----
-
-<ul>
-    <slot />
-</ul>
-
-<style lang="less" define:vars={{jcc: jcc}}>
-    ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-
-        display: flex;
-        flex-direction: row;
-        justify-content: var(--jcc);
-    }
-</style>

src/styles/grid_calc.less

@@ -0,0 +1,25 @@
+@import "/src/styles/max_width.less";
+
+@gi-icon-primary: 2.3rem;
+@gi-icon-btn: 1.8rem;
+
+@gi-text-width: 9.5rem;
+@profile-text-width: 9rem;
+@service-text-width: 14rem;
+
+@gi-icon-margin: 0.4rem;
+@gi-horiz-padding: 0.6rem;
+
+// GridItem width without text
+@gi-width-wo-text: @gi-horiz-padding + @gi-icon-primary + @gi-icon-margin + @gi-icon-margin + @gi-icon-btn + @gi-horiz-padding;
+
+@gi-width: @gi-width-wo-text + @gi-text-width;
+@profile-width: @gi-width-wo-text + @profile-text-width;
+@service-width: @gi-width-wo-text + @service-text-width;
+
+.grid-mixin() {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}