Cleaner GridItem width overriding; remembered scroll position

src/components/GridItem.astro

@@ -1,23 +1,24 @@
 ---
+import Icon from './Icon.astro';
+
 export interface Props {
+    id: string;
     title: string;
     text: string;
     url: string;
-    elemClass?: Array<String>;
+    width?: number;
-    btnClass?: Array<string>;
-    dataJs?: string;
 }
 
 const {
+    id,
     title, text, url,
-    elemClass = [],
+    width = 9,
-    btnClass = [],
-    dataJs = "",
 } = Astro.props;
 ---
 
-<div class:list={["gi", ...elemClass]}>
+<div class="gi" id={id}>
-    <a href={url} target="_blank" class="gi-main">
+    <div class="gi-row">
+        <div class="gi-main">
             <span class="icon-wrapper">
                 <slot name="icon-primary" />
             </span>
@@ -33,35 +34,73 @@ const {
                     </slot>
                 </span>
             </span>
-    </a>
+        </div>
-    <a href="javascript:void(0)" class:list={["gi-btn", ...btnClass]} data-js={dataJs}>
+        <a href={`#${id}`} class="gi-btn gi-btn-expand">
             <span class="icon-wrapper">
-            <slot name="icon-btn" />
+                <Icon code="&#xf107;" />
+            </span>
+        </a>
+        <a href="#scroll" class="gi-btn gi-btn-close">
+            <span class="icon-wrapper">
+                <Icon code="&#xf106;" />
             </span>
         </a>
     </div>
+    <div class="gi-options">
+        <slot name="options" />
+    </div>
+    <div class="gi-options gi-note">
+        <slot name="note" />
+    </div>
+</div>
 
-<style lang="less">
+<style lang="less" define:vars={{width: `${width}rem`}}>
-    @import "/src/styles/grid_calc.less";
-
     .gi {
         //     vertical horizontal
-        padding: 0.4rem @gi-horiz-padding;
+        padding: 0.4rem 0.6rem;
 
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
-        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: flex;
+                flex-direction: row;
+                justify-content: center;
+
+                :global(.icon) {
+                    @icon-size: 1.75rem;
+
+                    font-size: @icon-size;
+                    width: @icon-size;
+                }
             }
 
-    a.gi-main {
+            .gi-btn-close { display: flex }
+            .gi-btn-expand { display: none }
+        }
+    }
+
+    .gi-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .gi-main {
         flex-grow: 1;
         height: 100%;
 
@@ -73,46 +112,22 @@ const {
         text-decoration: none;
 
         .icon-wrapper {
-            width: @gi-icon-primary;
+            @icon-size: 2.3rem;
-            font-size: @gi-icon-primary;
+
-            margin-right: @gi-icon-margin;
+            width: @icon-size;
+            font-size: @icon-size;
+            margin-right: 0.4rem;
 
             & > :global(img) {
-                width: @gi-icon-primary;
+                width: @icon-size;
             }
         }
-    }
-
-    a.gi-btn {
-        position: relative;
-        font-size: 1.1rem;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .icon-wrapper {
-            width: @gi-icon-btn;
-            font-size: @gi-icon-btn;
-            margin-left: @gi-icon-margin;
-
-            & > :global(img) {
-                width: @gi-icon-btn;
-            }
-        }
-    }
-
-    .icon-wrapper {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
 
         .content {
             display: flex;
             flex-direction: column;
 
-        width: @gi-text-width;
+            width: var(--width);
             overflow: hidden;
 
             .title {
@@ -124,4 +139,34 @@ const {
                 color: var(--fg-sec);
             }
         }
+    }
+
+    .gi-btn {
+        position: relative;
+        font-size: 1.1rem;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .icon-wrapper {
+            @icon-size: 1.25rem;
+
+            width: @icon-size;
+            font-size: @icon-size;
+            margin-left: 0.4rem;
+
+            & > :global(img) {
+                width: @icon-size;
+            }
+        }
+    }
+
+    .icon-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        user-select: none;
+    }
 </style>

src/components/HostedService.astro

@@ -12,23 +12,11 @@ const { name, description, url, iconUrl = `${url}/favicon.ico` } = Astro.props;
 ---
 
 <GridItem
+    id={`s-${name.toLowerCase()}`}
     title={name}
     text={description}
     url={url}
-    elemClass={["gi-service"]}
+    width={14}
 >
     <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/Profile.astro

@@ -8,26 +8,37 @@ export interface Props {
     name: string;
     icon: string;
     copyName?: boolean;
+    note?: string;
 }
 
-const { app, url, name, icon, copyName = false } = Astro.props;
+const {
+    app, url, name, icon,
+    copyName = false,
+    note = "",
+} = Astro.props;
 ---
 
 <GridItem
+    id={`p-${app.toLowerCase()}`}
     title={app} text={name} url={url}
-    elemClass={["gi-profile"]}
+    width={9.5}
-    btnClass={["profile-copy"]}
-    dataJs={copyName ? name : url}
 >
     <Icon code={icon} slot="icon-primary" />
-    <Icon code="&#xf0c5;" slot="icon-btn" />
+    <Fragment slot="options">
+        <a href="javascript:void(0)" class="profile-copy" data-url={copyName ? name : url}>
+            <Icon code="&#xf0c5;" />
+        </a>
+        <a href={url}>
+            <Icon code="&#xf35d;" />
+        </a>
+    </Fragment>
 </GridItem>
 
 <script>
     const copy = document.querySelectorAll('.profile-copy')
     const copyClickHandler = (ev: Event) => {
         const elem = ev.currentTarget as HTMLElement
-        const link = elem.dataset.js
+        const link = elem.dataset.url
         if (!link) return
         navigator.clipboard.writeText(link)
     }
@@ -35,15 +46,3 @@ const { app, url, name, icon, copyName = false } = Astro.props;
         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/Layout.astro

@@ -19,6 +19,7 @@ const { title, description } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
+		<div id="scroll"></div>
 		<slot />
 	</body>
 </html>
@@ -113,3 +114,11 @@ const { title, description } = Astro.props;
 		}
 	}
 </style>
+
+<style>
+	#scroll {
+		position: fixed;
+		display: block;
+		height: 1px;
+	}
+</style>

src/layouts/Modal.astro

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

src/styles/grid_calc.less

@@ -1,25 +0,0 @@
-@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;
-}