more and consisten buttons

app/assets/stylesheets/merged/merged.css

@@ -1510,10 +1510,6 @@ select {
   margin-bottom: 1rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -1546,10 +1542,18 @@ select {
   margin-right: 0.5rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .mb-10 {
   margin-bottom: 2.5rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .mt-16 {
   margin-top: 4rem;
 }
@@ -1566,10 +1570,6 @@ select {
   margin-top: 5rem;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
 .block {
   display: block;
 }
@@ -1734,14 +1734,18 @@ select {
   flex-grow: 1;
 }
 
-.basis-80 {
+.basis-60 {
-  flex-basis: 20rem;
+  flex-basis: 15rem;
 }
 
 .basis-full {
   flex-basis: 100%;
 }
 
+.basis-80 {
+  flex-basis: 20rem;
+}
+
 .basis-72 {
   flex-basis: 18rem;
 }
@@ -1754,10 +1758,6 @@ select {
   flex-basis: 24rem;
 }
 
-.basis-60 {
-  flex-basis: 15rem;
-}
-
 .origin-\[0\] {
   transform-origin: 0;
 }
@@ -1886,10 +1886,6 @@ select {
   gap: 1rem;
 }
 
-.gap-8 {
-  gap: 2rem;
-}
-
 .gap-10 {
   gap: 2.5rem;
 }
@@ -1898,6 +1894,10 @@ select {
   gap: 0.75rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .gap-12 {
   gap: 3rem;
 }
@@ -1914,12 +1914,6 @@ select {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
-.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
-}
-
 .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-divide-opacity));
@@ -1969,6 +1963,10 @@ select {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-4 {
   border-width: 4px;
 }
@@ -1977,10 +1975,6 @@ select {
   border-width: 0px;
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
 .border-l-4 {
   border-left-width: 4px;
 }
@@ -1993,17 +1987,13 @@ select {
   border-bottom-width: 8px;
 }
 
-.border-b-2 {
-  border-bottom-width: 2px;
-}
-
 .border-solid {
   border-style: solid;
 }
 
-.border-gray-400 {
+.border-gray-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
 
 .border-red-500 {
@@ -2021,6 +2011,11 @@ select {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.border-slate-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(148 163 184 / var(--tw-border-opacity));
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -2031,34 +2026,14 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-gray-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
-
 .border-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
 
-.border-slate-200 {
+.border-gray-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(226 232 240 / var(--tw-border-opacity));
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
-
-.border-slate-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(100 116 139 / var(--tw-border-opacity));
-}
-
-.border-slate-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(203 213 225 / var(--tw-border-opacity));
-}
-
-.border-slate-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
 .bg-cyan-200 {
@@ -2066,14 +2041,9 @@ select {
   background-color: rgb(165 243 252 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-200 {
+.bg-red-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
-}
-
-.bg-red-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
 
 .bg-green-200 {
@@ -2081,16 +2051,16 @@ select {
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
 }
 
-.bg-red-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
-}
-
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
@@ -2195,9 +2165,14 @@ select {
   background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 
-.bg-cyan-50 {
+.bg-neutral-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(236 254 255 / var(--tw-bg-opacity));
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+}
+
+.bg-slate-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
 
 .bg-transparent {
@@ -2219,39 +2194,9 @@ select {
   background-color: rgb(254 243 199 / var(--tw-bg-opacity));
 }
 
-.bg-gray-50 {
+.bg-cyan-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  background-color: rgb(236 254 255 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
-}
-
-.bg-teal-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 253 250 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
-}
-
-.bg-slate-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 
 .bg-gray-200 {
@@ -2259,11 +2204,6 @@ select {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.bg-slate-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
-}
-
 .bg-cover {
   background-size: cover;
 }
@@ -2334,14 +2274,9 @@ select {
   padding: 1.25rem;
 }
 
-.px-4 {
+.px-3 {
-  padding-left: 1rem;
+  padding-left: 0.75rem;
-  padding-right: 1rem;
+  padding-right: 0.75rem;
-}
-
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
 }
 
 .py-2 {
@@ -2349,21 +2284,16 @@ select {
   padding-bottom: 0.5rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .px-20 {
   padding-left: 5rem;
   padding-right: 5rem;
 }
 
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -2389,6 +2319,11 @@ select {
   padding-bottom: 0.375rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -2419,6 +2354,14 @@ select {
   padding-bottom: 1rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pr-12 {
   padding-right: 3rem;
 }
@@ -2427,10 +2370,6 @@ select {
   padding-right: 0.5rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -2447,10 +2386,6 @@ select {
   padding-bottom: 1.5rem;
 }
 
-.pt-4 {
-  padding-top: 1rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -2623,6 +2558,11 @@ select {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -2639,10 +2579,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.outline-4 {
-  outline-width: 4px;
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2693,6 +2629,19 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.hover\:border-4:hover {
+  border-width: 4px;
+}
+
+.hover\:border-2:hover {
+  border-width: 2px;
+}
+
+.hover\:bg-cyan-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-red-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity));
@@ -2703,11 +2652,6 @@ select {
   background-color: rgb(224 242 254 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-cyan-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-blue-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));
@@ -2717,6 +2661,11 @@ select {
   color: rgb(107 114 128 / 0.75);
 }
 
+.hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .hover\:shadow-xl:hover {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -2739,6 +2688,16 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.group:hover .group-hover\:translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:translate-x-1 {
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .group:hover .group-hover\:scale-x-100 {
   --tw-scale-x: 1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

app/helpers/merged/view_helper.rb

@@ -40,5 +40,18 @@ module Merged
       image_tag(image.asset_name , alt: image.name , class: classes )
     end
 
+    def view_button(element , extra_classes = "")
+      return "" unless element.has_option?("button_link")
+      ["<button class='#{button_classes} ",
+        extra_classes,
+        " hover:border-2'>" ,
+        "<a href='#{element.option("button_link")}'>" ,
+        element.option("button_text") ,
+        "</a>",
+      " </button>"].join.html_safe
+    end
+    def view_button_classes(element)
+      button_classes + " hover:border-4"
+    end
   end
 end

app/views/merged/view/_section_full_image.haml

@@ -7,6 +7,4 @@
             = section.header
           .sm:mt-4.text-2xl{ prose_classes }
             = markdown(section)
-          .mt-4.md:mt-8
+          =view_button(section , "my-2")
-            -if section.has_option?("button_text")
-              = render 'merged/view/elements/button' , section: section

app/views/merged/view/_section_full_up.haml

@@ -8,3 +8,4 @@
           = section.option("subheader")
       .mt-4.text-lg.pt-10{ prose_classes }
         = markdown(section)
+      =view_button(section , "my-2")

app/views/merged/view/_section_half_image.haml

@@ -10,6 +10,4 @@
           = section.option("subheader")
       .mt-8{ prose_classes }
         = markdown(section)
-      -if section.has_option?("button_text")
+      =view_button(section , "my-2")
-        .mt-8.md:mt-8
-          = render 'merged/view/elements/button' , section: section

app/views/merged/view/_section_large_image.haml

@@ -10,3 +10,4 @@
             = section.option("subheader")
         .mt-3{ prose_classes }
           = markdown(section)
+        =view_button(section , "my-2")

app/views/merged/view/_section_text.haml

@@ -10,3 +10,8 @@
 
   .max-w-full.mt-4.gap-16{ options(section , :text_column , :prose ) }
     = markdown_image(section)
+    - if section.has_option?("button_text") and section.has_option?("button_link")
+      %span.block.transition.group-hover:translate-x-1
+        %a.text-gray-800.transition{:class => "hover:text-gray-500", :href => "#{section.option("button_link")}"}
+          = section.option("button_text")
+          →

app/views/merged/view/cards/_card_feature_box.haml

@@ -8,8 +8,6 @@
       .flex.items-center.justify-center.w-16.h-16.mb-4.mr-2.rounded-full.lg:mb-0{options(card,:background )}
         = image_for( card , "h-8 w-8")
       %h6.font-semibold.leading-5{options(card, :color)}= card.header
-    %p.mb-2.text-sm.text-gray-900{ prose_classes }
+    .mb-2.text-sm.text-gray-900{ prose_classes }
       = markdown(card)
-    - if card.has_option?("button_link")
+    .text-center=view_button(card , "mb-2")
-      %a.inline-flex.items-center.text-sm.font-semibold.transition-colors.duration-200.text-deep-purple-accent-400.hover:text-deep-purple-800{"aria-label" => "", :href => "/"}
-        =card.option("button_text")

app/views/merged/view/cards/_card_feature_normal.haml

@@ -4,6 +4,4 @@
   %h4.mb-3.text-xl.font-bold.leading-5{options(card, :color)}= card.header
   .mb-3.text-sm.text-gray-900{ prose_classes }
     = markdown(card)
-  - if card.has_option?("button_link")
+  =view_button(card , "mb-2")
-    %a.inline-flex.items-center.font-semibold.transition-colors.duration-200.text-deep-purple-accent-400.hover:text-deep-purple-800{"aria-label" => "", :href => card.option("button_link") }
-      =card.option("button_text")

app/views/merged/view/cards/_card_gap_square.haml

@@ -8,3 +8,4 @@
     .m-6{options(card , :background , :color ) }
       %div{ prose_classes }
         = markdown(card)
+      =view_button(card , "my-2")

app/views/merged/view/cards/_card_normal_round.haml

@@ -5,3 +5,4 @@
     .p-5{options(card , :text_align , :color)}
       .m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
         = markdown(card)
+      =view_button(card , "my-2")

app/views/merged/view/cards/_card_normal_square.haml

@@ -6,6 +6,4 @@
     -if card.has_option?("subheader")
       %h4.p-4.text-xl= card.option("subheader")
     .pose.mt-2.p-4= markdown(card)
-    - if card.has_option?("button_link")
+    =view_button(card)
-      %a.inline-flex.items-center.font-semibold.transition-colors.duration-200.text-deep-purple-accent-400.hover:text-deep-purple-800{"aria-label" => "", :href => card.option("button_link") }
-        =card.option("button_text")

app/views/merged/view/cards/_card_wide_square.haml

@@ -5,3 +5,4 @@
     -if card.has_option?("subheader")
       %h4.p-4.text-xl= card.option("subheader")
     .pose.mt-2.p-4= markdown(card)
+    =view_button(card , "mb-2")

config/merged/card_styles.yml

@@ -51,6 +51,8 @@
     - text_align
     - subheader
     - order
+    - button_link
+    - button_text
 - template: card_feature_normal
   header: Card looking feature
   text: For things where no image is available or apropriate.
@@ -89,6 +91,8 @@
     - background
     - color
     - text_align
+    - button_link
+    - button_text
 - template: form_field
   header: A single field in a form
   text: The header is the Name of the field, the description

config/merged/section_styles.yml

@@ -54,8 +54,6 @@
     - color
     - text_align
     - item_align
-    - button_link
-    - button_text
 - template: section_text
   header: Newspaper style section for longer passages of text.
   text: Text may be markdown. The section may have one image than
@@ -71,6 +69,8 @@
     - color
     - margin
     - subheader
+    - button_link
+    - button_text
 - template: section_half_image
   header: Split section with image left or right
   text: Image on one side, header and text on the other.
@@ -102,6 +102,8 @@
     - item_align
     - image_align
     - shade_color
+    - button_link
+    - button_text
 - template: section_large_image
   header: Two third image header with adjustable text
   text: Large picture background with Header and text offset.
@@ -117,6 +119,8 @@
     - order
     - color
     - background
+    - button_link
+    - button_text
 - template: section_spacer
   header: Spacer
   text: Just for extra padding