Merge pull request #12 from TorstenDittmann/fix-website-mobile-padding

Move padding to child elements and apply only inline padding

Author: TorstenDittmann

packages/main/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "launch.css",
 	"type": "module",
-	"version": "1.1.3",
+	"version": "1.1.4",
 	"description": "A classless CSS framework built for speed. Style your website later—build it now.",
 	"homepage": "https://launch-css.dev",
 	"main": "dist/index.css",

packages/main/src/layouts/_website.scss

@@ -8,15 +8,15 @@
 		"header"
 		"main"
 		"footer";
-	@media (max-width: map.get(
-			breakpoints.$breakpoints,
-			"small"
-		)) {
-		padding: 1rem;
-	}
 	>  {
 		header {
 			grid-area: header;
+			@media (max-width: map.get(
+					breakpoints.$breakpoints,
+					"small"
+				)) {
+				padding-block-start: 1rem;
+			}
 		}
 		main {
 			display: grid;
@@ -31,6 +31,12 @@
 		footer {
 			margin: 0 auto;
 			@include breakpoints.container;
+			@media (max-width: map.get(
+					breakpoints.$breakpoints,
+					"small"
+				)) {
+				padding-inline: 1rem;
+			}
 		}
 		header {
 			grid-area: header;