From 475d5c2a446dee6a5174db87e9fa45b2f7383c2d Mon Sep 17 00:00:00 2001
From: Kruimol <41127358+kruimol@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:58:47 +0100
Subject: [PATCH] Add some responsive breakpionts in CSS

To create a multi platform website you need breakpoints for varius platforms.
so I added Responsive design, with: phone, tablet and desktop
---
 public/data/css.json | 47 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/public/data/css.json b/public/data/css.json
index b6659f66..98b40f47 100644
--- a/public/data/css.json
+++ b/public/data/css.json
@@ -67,6 +67,53 @@
         ],
         "tags": ["css", "reset", "browser", "layout"],
         "author": "AmeerMoustafa"
+      },
+      {
+        "title": "Responsive Design",
+        "description": "The different responsive breakpoints.",
+        "code": [
+          "/* Phone */",
+          ".element {",
+          "  margin: 0 10%",
+          "}",
+          "",
+          "/* Tablet */",
+          "@media (min-width: 640px) {",
+          "  .element {",
+          "    margin: 0 20%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop base */",
+          "@media (min-width: 768px) {",
+          "  .element {",
+          "    margin: 0 30%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop large */",
+          "@media (min-width: 1024px) {",
+          "  .element {",
+          "    margin: 0 40%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop extra large */",
+          "@media (min-width: 1280px) {",
+          "  .element {",
+          "    margin: 0 60%",
+          "  }",
+          "}",
+          "",
+          "/* Desktop bige */",
+          "@media (min-width: 1536px) {",
+          "  .element {",
+          "    margin: 0 80%",
+          "  }",
+          "}"
+        ],
+        "tags": ["css", "responsive"],
+        "author": "kruimol"
       }
     ]
   },