Responsive

Author: PrashantUnity

assets/css/home.css

@@ -122,4 +122,67 @@ a.neumorphic-button:active>span {
     .button-grid {
         justify-content: center
     }
+}
+
+/* Layout tiers: Mobile, Tablet, Desktop */
+@media (max-width: 480px) {
+body {
+    padding: 1rem;
+}
+
+.page-header img {
+    height: 72px;
+}
+
+.page-header h3 {
+    font-size: 1.25rem;
+}
+
+.category-section {
+    margin-bottom: 2rem;
+    width: 100%;
+}
+
+.button-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: .75rem;
+    justify-content: center;
+}
+}
+
+@media (min-width: 481px) and (max-width: 768px) {
+body {
+    padding: 1.25rem;
+}
+
+.category-section {
+    width: min(40rem, 100%);
+}
+
+.button-grid {
+    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
+    gap: 1rem;
+}
+}
+
+@media (min-width: 769px) and (max-width: 1199px) {
+.category-section {
+    width: min(68rem, 100%);
+}
+
+.button-grid {
+    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
+    gap: 1.25rem;
+}
+}
+
+@media (min-width: 1200px) {
+.category-section {
+    width: min(80rem, 100%);
+}
+
+.button-grid {
+    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+    gap: 1.5rem;
+}
 }

data/home.yaml

@@ -37,6 +37,9 @@ categories:
       - name: "Weather"
         icon: "cfd-mausam"
         url: "/Mausam/"
+      - name: "Crop & Resize"
+        icon: "cfd-picwrap"
+        url: "https://picwrap.codefrydev.in"
   - name: "Games & Fun"
     items:
       - name: "Game"

layouts/about/about.html

@@ -5,7 +5,7 @@
     <meta name="description" content="Learn about CodeFryDev - your ultimate destination for diverse digital content, tools, games, and educational resources. Discover our mission and team.">
     <meta name="keywords" content="about codefrydev, codefrydev team, digital tools, web development, mobile apps, games, tutorials">
     <title>About - CodeFryDev | Learn More About Us</title>
-    <link rel="canonical" href="{{ .Permalink }}">
+    
     <link rel="stylesheet" href="/css/about.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
 </head>

layouts/ai/ai.html

@@ -6,7 +6,7 @@
     <meta name="description" content="Discover powerful AI tools by CodeFryDev. Use AI SocialSnap, Meme Generator, Visual Note AI, Aqua Tracker, and more AI-powered utilities.">
     <meta name="keywords" content="AI tools, artificial intelligence, AI generator, social media AI, meme generator, visual notes, AI summarize, codefrydev AI">
     <title>AI Tools - CodeFryDev | AI-Powered Utilities</title>
-    <link rel="canonical" href="{{ .Permalink }}">
+    
     <link rel="stylesheet" href="/css/internal.css">
 </head>
 

layouts/games/games.html

@@ -6,7 +6,7 @@
     <meta name="description" content="Play fun and engaging games by CodeFryDev. Enjoy Chain Reaction, Wordle, Snake, and more exciting games for free.">
     <meta name="keywords" content="games, online games, free games, chain reaction, wordle, snake, codefrydev games">
     <title>Games - CodeFryDev | Free Online Games</title>
-    <link rel="canonical" href="{{ .Permalink }}">
+    
     <link rel="stylesheet" href="/css/internal.css">
 </head>
 

layouts/index.html

@@ -5,7 +5,7 @@
   <meta name="description" content="CodeFryDev - Your ultimate destination for diverse digital content and tools. Enjoy our extensive game collection, innovative productivity apps, and comprehensive tutorials for all skill levels.">
   <meta name="keywords" content="codefrydev, digital tools, games, productivity apps, tutorials, design resources, AI tools, creative tools, web development">
   <title>CodeFryDev | Games, Apps, Tutorials, and Design Tools</title>
-  <link rel="canonical" href="{{ .Permalink }}">
+  
   {{ with resources.Get "css/home.css" }}
     {{ $minifiedCSS := . | resources.Minify }}
     <link rel="stylesheet" href="{{ $minifiedCSS.RelPermalink }}">

layouts/partials/header.html

@@ -7,17 +7,17 @@
 <meta name="author" content="CodeFryDev">
 <meta name="keywords" content="Codefrydev,CFD,NET,Tutorials,Design,Games,unity,c#,godot">
 <meta name="robots" content="index, follow">
-<link rel="canonical" href="https://www.codefrydev.in/">
+<link rel="canonical" href="{{ .Permalink }}">
 
 <meta property="og:title" content="CodeFryDev | Games, Apps, Tutorials, and Design Tools">
 <meta property="og:description" content="Your ultimate destination for diverse digital content, including games, productivity apps, educational tutorials, and design resources.">
-<meta property="og:image" content="https://www.codefrydev.in/og-image.png"> <meta property="og:url" content="https://www.codefrydev.in/">
+<meta property="og:image" content="{{ .Site.BaseURL }}og-image.png"> <meta property="og:url" content="{{ .Permalink }}">
 <meta property="og:type" content="website">
 
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="CodeFryDev | Games, Apps, Tutorials, and Design Tools">
 <meta name="twitter:description" content="Your ultimate destination for diverse digital content, including games, productivity apps, educational tutorials, and design resources.">
-<meta name="twitter:image" content="https://www.codefrydev.in/mstile-310x310.png"> 
+<meta name="twitter:image" content="{{ .Site.BaseURL }}mstile-310x310.png"> 
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

static/css/internal.css

@@ -105,4 +105,55 @@ button.neumorphic.active > .button-icon {
 button.neumorphic:active > span,
 button.neumorphic.active > span {
     font-size: 13cqi;
+}
+
+/* Layout tiers: Mobile, Tablet, Desktop */
+@media (max-width: 480px) {
+body {
+    padding: 1rem;
+}
+
+.buttons {
+    width: 100%;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+}
+
+button.neumorphic {
+    border-width: 0.4rem;
+    border-radius: 0.8rem;
+}
+
+.button-icon {
+    height: 33cqi;
+}
+
+button.neumorphic > span {
+    font-size: 16cqi;
+}
+}
+
+@media (min-width: 481px) and (max-width: 768px) {
+body {
+    padding: 1.25rem;
+}
+
+.buttons {
+    width: min(40rem, 100%);
+    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+}
+}
+
+@media (min-width: 769px) and (max-width: 1199px) {
+.buttons {
+    width: min(68rem, 100%);
+    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+}
+}
+
+@media (min-width: 1200px) {
+.buttons {
+    width: min(80rem, 100%);
+    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+}
 }