feature/RZA-250001: abcd copied from xkeshav/abcd

.astro/collections/blogs.schema.json

@@ -8,6 +8,9 @@
           "type": "string",
           "maxLength": 60
         },
+        "slug": {
+          "type": "string"
+        },
         "publishDate": {
           "anyOf": [
             {

CHANGELOG.md

@@ -8,7 +8,6 @@ The format is based on Keep a Changelog and this project adheres to Semantic Ver
 
 Created Repo from template
 
-
 ### [Unreleased]
 
 Here we write upgrading notes for brands. It's a team effort to make them as straightforward as possible.

abcd.code-workspace

@@ -73,25 +73,9 @@
       "javascript": "javascriptreact"
     },
     "eslint.options": {
-      "extensions": [
-        ".js",
-        ".jsx",
-        ".md",
-        ".mdx",
-        ".ts",
-        ".tsx",
-        ".astro"
-      ]
+      "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx", ".astro"]
     },
-    "eslint.validate": [
-      "mdx",
-      "markdown",
-      "javascript",
-      "javascriptreact",
-      "typescript",
-      "typescriptreact",
-      "astro"
-    ],
+    "eslint.validate": ["mdx", "markdown", "javascript", "javascriptreact", "typescript", "typescriptreact", "astro"],
     "explorer.compactFolders": false,
     "explorer.confirmDelete": false,
     "explorer.confirmDragAndDrop": false,
@@ -119,10 +103,7 @@
     },
     "git.autofetch": true,
     "git.branchPrefix": "feature/",
-    "git.branchProtection": [
-      "develop",
-      "main"
-    ],
+    "git.branchProtection": ["develop", "main"],
     "git.branchRandomName.enable": true,
     "git.confirmSync": false,
     "git.enableCommitSigning": false,
@@ -133,9 +114,7 @@
     "js/ts.implicitProjectConfig.checkJs": true,
     "peacock.affectSideBarBorder": true,
     "peacock.color": "#abcd00",
-    "prettier.documentSelectors": [
-      "**/*.astro"
-    ],
+    "prettier.documentSelectors": ["**/*.astro"],
     "prettier.printWidth": 120,
     "prettier.quoteProps": "consistent",
     "prettier.singleQuote": false,
@@ -155,6 +134,19 @@
     "window.autoDetectColorScheme": true,
     "window.title": "${rootNameShort}${separator}${activeEditorShort}${separator}${activeFolderMedium}",
     "window.zoomLevel": 0.5,
+    "workbench.colorTheme": "Tokyo Night Storm",
+    "workbench.editor.pinnedTabSizing": "compact",
+    "workbench.editor.pinnedTabsOnSeparateRow": true,
+    "workbench.editorAssociations": {
+      "*.log": "default"
+    },
+    "zenMode.centerLayout": false,
+    "cSpell.words": [],
+    "workbench.editor.limit.excludeDirty": true,
+    "files.readonlyInclude": {
+      ".githooks/**": true,
+      ".github/**": true
+    },
     "workbench.colorCustomizations": {
       "activityBar.activeBackground": "#d5ff01",
       "activityBar.background": "#d5ff01",
@@ -173,21 +165,7 @@
       "titleBar.activeBackground": "#abcd00",
       "titleBar.activeForeground": "#15202b",
       "titleBar.inactiveBackground": "#abcd0099",
-      "titleBar.inactiveForeground": "#15202b99",
-      "tab.activeBorder": "#d5ff01"
-    },
-    "workbench.colorTheme": "Tokyo Night Storm",
-    "workbench.editor.pinnedTabSizing": "compact",
-    "workbench.editor.pinnedTabsOnSeparateRow": true,
-    "workbench.editorAssociations": {
-      "*.log": "default"
-    },
-    "zenMode.centerLayout": false,
-    "cSpell.words": [],
-    "workbench.editor.limit.excludeDirty": true,
-    "files.readonlyInclude": {
-      ".githooks/**": true,
-      ".github/**": true
+      "titleBar.inactiveForeground": "#15202b99"
     }
   }
-}
+}

components.json

@@ -14,4 +14,4 @@
     "components": "components",
     "utils": "utils"
   }
-}
+}

public/sitemap-index.html

@@ -3,4 +3,4 @@
   <sitemap>
     <loc>https://www.parixan.xyz/sitemap2.xml.gz</loc>
   </sitemap>
-</sitemapindex>
+</sitemapindex>

src/assets/styles/about.css

@@ -0,0 +1,14 @@
+@import url("./common.css");
+
+.about-main {
+  display: block;
+}
+
+.container__about {
+  padding: 1rem;
+
+  > .moto {
+    color: #3a8657;
+    font-size: 3rem;
+  }
+}

src/assets/styles/alphabet.css

@@ -0,0 +1,56 @@
+.container__alphabet {
+  display: grid;
+  grid-gap: 4px;
+  container-type: inline-size;
+  container-name: layout;
+  font-family: "atkinson";
+}
+
+.list {
+  display: grid;
+  grid-gap: 4px;
+  grid-template-columns: repeat(5, 1fr);
+  margin-block: 1rem;
+}
+
+.letter {
+  display: grid;
+  grid-auto-flow: row;
+  justify-items: center;
+  align-content: center;
+  color: var(--text, grey);
+  border: 2px solid var(--bc);
+  border-radius: 0.5rem;
+  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+  padding: 0.5rem;
+  height: fit-content;
+
+  & p {
+    font-size: clamp(1.5rem, 5vw, 5rem);
+    text-align: center;
+    width: 100%;
+  }
+
+  & .code {
+    cursor: pointer;
+    font-size: small;
+  }
+
+  ::selection {
+    color: red;
+    background-color: yellow;
+    text-shadow: 5px 5px #558abb;
+  }
+}
+
+@container layout (width <=768px) {
+  .list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .letter {
+    background-color: white;
+    color: black;
+    font-size: max(1.5em, 1.23em + 2cqi);
+  }
+}

src/assets/styles/card.css

@@ -2,22 +2,23 @@
   list-style: none;
   display: flex;
   padding: 1px;
-  background-color: #23262d;
-  background-image: none;
+  background: var(--background);
   background-size: 400%;
-  border-radius: 7px;
+  border-radius: 0.75rem;
   background-position: 100%;
-  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  transition: all 0.2s;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border);
+  overflow: hidden;
 }
 
 .link-card > a {
   width: 100%;
   text-decoration: none;
   line-height: 1.4;
-  padding: calc(1.5rem - 1px);
+  padding: 1.5rem;
   border-radius: 8px;
-  color: white;
+  color: var(--text);
   background-color: #23262d;
   opacity: 0.8;
 }
@@ -26,16 +27,25 @@ h2 {
   margin: 0;
   font-size: 1.25rem;
   transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--primary);
 }
 
 p {
   margin-top: 0.5rem;
   margin-bottom: 0;
+  color: var(--secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
 }
 
 .link-card:is(:hover, :focus-within) {
   background-position: 0;
   background-image: var(--accent-gradient);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 15%, transparent);
+  border-color: var(--primary-light);
 }
 
 .link-card:is(:hover, :focus-within) h2 {

src/assets/styles/common.css

@@ -0,0 +1,5 @@
+.hint {
+  padding: 1rem;
+  outline: 1px solid grey;
+  cursor: pointer;
+}

src/assets/styles/custom-fonts.css

@@ -0,0 +1,45 @@
+/* src/styles/custom-font.css */
+@supports font-format(woff2) {
+  @font-face {
+    font-family: "sportrop";
+    src:
+      url("/fonts/sportrop-webfont.woff2") format("woff2"),
+      url("/fonts/sportrop-webfont.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "atkinson";
+    src:
+      url("/fonts/atkinson-hyperlegible-regular-102-webfont.woff2") format("woff2"),
+      url("/fonts/atkinson-hyperlegible-regular-102-webfont.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Mudra";
+    src: url("/fonts/MudraMohta-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+  }
+}
+
+@font-face {
+  font-family: "boisuStroke";
+  src: url("/fonts/Boisu-Stroke.otf") format("otf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-Bold.ttf") format("ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}