refactor(project): update example styles

merkle-open · May 3, 2024 · 5bd6fe8 · 5bd6fe8
1 parent f1bed96
commit 5bd6fe8
Show file tree

Hide file tree

Showing 32 changed files with 47 additions and 15 deletions.
diff --git a/packages/generator-nitro/generators/app/templates/src/patterns/atoms/box/css/box.scss b/packages/generator-nitro/generators/app/templates/src/patterns/atoms/box/css/box.scss
@@ -21,20 +21,24 @@
 		border-left: 2rem solid transparent;
 		border-right: 2rem solid $color-gray-8;
 	}
+
+	a {
+		padding: 0.5em 0;
+	}
 }
 
 // inline mixin examples
 @mixin box-mixin() {
 	display: block;
 }
-/* stylelint-disable-next-line  no-duplicate-selectors */
+/* stylelint-disable-next-line no-duplicate-selectors */
 .a-box {
 	@include box-mixin();
 }
 @mixin box-mixin-alternative($display: block) {
 	display: $display;
 }
-/* stylelint-disable-next-line  no-duplicate-selectors */
+/* stylelint-disable-next-line no-duplicate-selectors */
 .a-box {
 	@include box-mixin-alternative();
 	@include box-mixin-alternative(block);

diff --git a/.../generator-nitro/generators/app/templates/src/patterns/molecules/example/css/example.scss b/.../generator-nitro/generators/app/templates/src/patterns/molecules/example/css/example.scss
@@ -9,11 +9,15 @@
 }
 .m-example__headline {
 	font-size: 1.6em;
+	margin-bottom: 0.6rem;
 }
 .m-example__link {
 	color: inherit;
+	display: inline-block;
+	padding: 0.2rem 0;
 }
 .m-example__button {
+	font-size: 1rem;
 	padding: 0.5rem 1rem;
-	margin: 0.5rem 0.5rem 0.5rem 0;
+	margin: 1rem 0.5rem 0.5rem 0;
 }
diff --git a/packages/project-nitro-twig/src/patterns/atoms/box/css/box.scss b/packages/project-nitro-twig/src/patterns/atoms/box/css/box.scss
@@ -21,20 +21,24 @@
 		border-left: 2rem solid transparent;
 		border-right: 2rem solid $color-gray-8;
 	}
+
+	a {
+		padding: 0.5em 0;
+	}
 }
 
 // inline mixin examples
 @mixin box-mixin() {
 	display: block;
 }
-/* stylelint-disable-next-line  no-duplicate-selectors */
+/* stylelint-disable-next-line no-duplicate-selectors */
 .a-box {
 	@include box-mixin();
 }
 @mixin box-mixin-alternative($display: block) {
 	display: $display;
 }
-/* stylelint-disable-next-line  no-duplicate-selectors */
+/* stylelint-disable-next-line no-duplicate-selectors */
 .a-box {
 	@include box-mixin-alternative();
 	@include box-mixin-alternative(block);

diff --git a/packages/project-nitro-twig/src/patterns/molecules/example/css/example.scss b/packages/project-nitro-twig/src/patterns/molecules/example/css/example.scss
@@ -7,12 +7,16 @@
 	border-radius: 0.5em;
 }
 .m-example__headline {
-	font-size: 1.6em;
+	font-size: 1.6rem;
+	margin-bottom: 0.6rem;
 }
 .m-example__link {
 	color: inherit;
+	display: inline-block;
+	padding: 0.2rem 0;
 }
 .m-example__button {
+	font-size: 1rem;
 	padding: 0.5rem 1rem;
-	margin: 0.5rem 0.5rem 0.5rem 0;
+	margin: 1rem 0.5rem 0.5rem 0;
 }
diff --git a/...top/bitmaps_reference/Screen_project-nitro-twig_Example_0_m-example_0_phone.png b/...top/bitmaps_reference/Screen_project-nitro-twig_Example_0_m-example_0_phone.png
diff --git a/...op/bitmaps_reference/Screen_project-nitro-twig_Example_0_m-example_1_tablet.png b/...op/bitmaps_reference/Screen_project-nitro-twig_Example_0_m-example_1_tablet.png
diff --git a/...p/bitmaps_reference/Screen_project-nitro-twig_Example_0_m-example_2_desktop.png b/...p/bitmaps_reference/Screen_project-nitro-twig_Example_0_m-example_2_desktop.png
diff --git a/...bitmaps_reference/Screen_project-nitro-twig_Example_1_m-example__n2_0_phone.png b/...bitmaps_reference/Screen_project-nitro-twig_Example_1_m-example__n2_0_phone.png
diff --git a/...itmaps_reference/Screen_project-nitro-twig_Example_1_m-example__n2_1_tablet.png b/...itmaps_reference/Screen_project-nitro-twig_Example_1_m-example__n2_1_tablet.png
diff --git a/...tmaps_reference/Screen_project-nitro-twig_Example_1_m-example__n2_2_desktop.png b/...tmaps_reference/Screen_project-nitro-twig_Example_1_m-example__n2_2_desktop.png
diff --git a/...sts/backstop/bitmaps_reference/nitro-twig_test_Homepage_0_m-example_0_phone.png b/...sts/backstop/bitmaps_reference/nitro-twig_test_Homepage_0_m-example_0_phone.png
diff --git a/...ts/backstop/bitmaps_reference/nitro-twig_test_Homepage_0_m-example_1_tablet.png b/...ts/backstop/bitmaps_reference/nitro-twig_test_Homepage_0_m-example_1_tablet.png
diff --git a/...s/backstop/bitmaps_reference/nitro-twig_test_Homepage_0_m-example_2_desktop.png b/...s/backstop/bitmaps_reference/nitro-twig_test_Homepage_0_m-example_2_desktop.png
diff --git a/...backstop/bitmaps_reference/nitro-twig_test_Homepage_1_m-example__n2_0_phone.png b/...backstop/bitmaps_reference/nitro-twig_test_Homepage_1_m-example__n2_0_phone.png
diff --git a/...ackstop/bitmaps_reference/nitro-twig_test_Homepage_1_m-example__n2_1_tablet.png b/...ackstop/bitmaps_reference/nitro-twig_test_Homepage_1_m-example__n2_1_tablet.png
diff --git a/...ckstop/bitmaps_reference/nitro-twig_test_Homepage_1_m-example__n2_2_desktop.png b/...ckstop/bitmaps_reference/nitro-twig_test_Homepage_1_m-example__n2_2_desktop.png
diff --git a/packages/project-nitro-typescript/src/patterns/atoms/box/css/box.scss b/packages/project-nitro-typescript/src/patterns/atoms/box/css/box.scss
@@ -21,20 +21,24 @@
 		border-left: 2rem solid transparent;
 		border-right: 2rem solid $color-gray-8;
 	}
+
+	a {
+		padding: 0.5em 0;
+	}
 }
 
 // inline mixin examples
 @mixin box-mixin() {
 	display: block;
 }
-/* stylelint-disable-next-line  no-duplicate-selectors */
+/* stylelint-disable-next-line no-duplicate-selectors */
 .a-box {
 	@include box-mixin();
 }
 @mixin box-mixin-alternative($display: block) {
 	display: $display;
 }
-/* stylelint-disable-next-line  no-duplicate-selectors */
+/* stylelint-disable-next-line no-duplicate-selectors */
 .a-box {
 	@include box-mixin-alternative();
 	@include box-mixin-alternative(block);

diff --git a/packages/project-nitro-typescript/src/patterns/molecules/example/css/example.scss b/packages/project-nitro-typescript/src/patterns/molecules/example/css/example.scss
@@ -7,12 +7,16 @@
 	border-radius: 0.5em;
 }
 .m-example__headline {
-	font-size: 1.6em;
+	font-size: 1.6rem;
+	margin-bottom: 0.6rem;
 }
 .m-example__link {
 	color: inherit;
+	display: inline-block;
+	padding: 0.2rem 0;
 }
 .m-example__button {
+	font-size: 1rem;
 	padding: 0.5rem 1rem;
-	margin: 0.5rem 0.5rem 0.5rem 0;
+	margin: 1rem 0.5rem 0.5rem 0;
 }
diff --git a/packages/project-nitro/src/patterns/atoms/box/css/box.scss b/packages/project-nitro/src/patterns/atoms/box/css/box.scss
@@ -21,20 +21,24 @@
 		border-left: 2rem solid transparent;
 		border-right: 2rem solid $color-gray-8;
 	}
+
+	a {
+		padding: 0.5em 0;
+	}
 }
 
 // inline mixin examples
 @mixin box-mixin() {
 	display: block;
 }
-/* stylelint-disable-next-line  no-duplicate-selectors */
+/* stylelint-disable-next-line no-duplicate-selectors */
 .a-box {
 	@include box-mixin();
 }
 @mixin box-mixin-alternative($display: block) {
 	display: $display;
 }
-/* stylelint-disable-next-line  no-duplicate-selectors */
+/* stylelint-disable-next-line no-duplicate-selectors */
 .a-box {
 	@include box-mixin-alternative();
 	@include box-mixin-alternative(block);

diff --git a/packages/project-nitro/src/patterns/molecules/example/css/example.scss b/packages/project-nitro/src/patterns/molecules/example/css/example.scss
@@ -8,12 +8,16 @@
 	border-radius: $example-border-radius;
 }
 .m-example__headline {
-	font-size: 1.6em;
+	font-size: 1.6rem;
+	margin-bottom: 0.6rem;
 }
 .m-example__link {
 	color: inherit;
+	display: inline-block;
+	padding: 0.2rem 0;
 }
 .m-example__button {
+	font-size: 1rem;
 	padding: 0.5rem 1rem;
-	margin: 0.5rem 0.5rem 0.5rem 0;
+	margin: 1rem 0.5rem 0.5rem 0;
 }
diff --git a/...ts/backstop/bitmaps_reference/Screen_Dark_Theme_Example_0_m-example_0_phone.png b/...ts/backstop/bitmaps_reference/Screen_Dark_Theme_Example_0_m-example_0_phone.png
diff --git a/...s/backstop/bitmaps_reference/Screen_Dark_Theme_Example_0_m-example_1_tablet.png b/...s/backstop/bitmaps_reference/Screen_Dark_Theme_Example_0_m-example_1_tablet.png
diff --git a/.../backstop/bitmaps_reference/Screen_Dark_Theme_Example_0_m-example_2_desktop.png b/.../backstop/bitmaps_reference/Screen_Dark_Theme_Example_0_m-example_2_desktop.png
diff --git a/...ackstop/bitmaps_reference/Screen_Dark_Theme_Example_1_m-example__n2_0_phone.png b/...ackstop/bitmaps_reference/Screen_Dark_Theme_Example_1_m-example__n2_0_phone.png
diff --git a/...ckstop/bitmaps_reference/Screen_Dark_Theme_Example_1_m-example__n2_1_tablet.png b/...ckstop/bitmaps_reference/Screen_Dark_Theme_Example_1_m-example__n2_1_tablet.png
diff --git a/...kstop/bitmaps_reference/Screen_Dark_Theme_Example_1_m-example__n2_2_desktop.png b/...kstop/bitmaps_reference/Screen_Dark_Theme_Example_1_m-example__n2_2_desktop.png
diff --git a/...s/backstop/bitmaps_reference/Screen_Light_Theme_Example_0_m-example_0_phone.png b/...s/backstop/bitmaps_reference/Screen_Light_Theme_Example_0_m-example_0_phone.png
diff --git a/.../backstop/bitmaps_reference/Screen_Light_Theme_Example_0_m-example_1_tablet.png b/.../backstop/bitmaps_reference/Screen_Light_Theme_Example_0_m-example_1_tablet.png
diff --git a/...backstop/bitmaps_reference/Screen_Light_Theme_Example_0_m-example_2_desktop.png b/...backstop/bitmaps_reference/Screen_Light_Theme_Example_0_m-example_2_desktop.png
diff --git a/...ckstop/bitmaps_reference/Screen_Light_Theme_Example_1_m-example__n2_0_phone.png b/...ckstop/bitmaps_reference/Screen_Light_Theme_Example_1_m-example__n2_0_phone.png
diff --git a/...kstop/bitmaps_reference/Screen_Light_Theme_Example_1_m-example__n2_1_tablet.png b/...kstop/bitmaps_reference/Screen_Light_Theme_Example_1_m-example__n2_1_tablet.png
diff --git a/...stop/bitmaps_reference/Screen_Light_Theme_Example_1_m-example__n2_2_desktop.png b/...stop/bitmaps_reference/Screen_Light_Theme_Example_1_m-example__n2_2_desktop.png