Merge pull request #518 from hlxsites/472-application-layout-changes

Application Page Layout changes
hlxsites · Nov 30, 2023 · 84d2fcf · 84d2fcf
2 parents 2c2f269 + 87ec7b4
commit 84d2fcf
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 10 deletions.
diff --git a/styles/styles.css b/styles/styles.css
@@ -125,6 +125,10 @@
     padding-bottom: 2.5rem;
 }
 
+.application .blog main .popular-articles .default-content-wrapper p {
+    text-align: center;
+}
+
 @media (min-width: 1024px) {
 
     .blog main .popular-articles {
@@ -245,6 +249,31 @@
     gap: 2.5rem;
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.application main .section {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+.application .default-content-wrapper h1 {
+    padding-bottom: 0.75rem;
+    text-align: center;
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+    font-weight: 700;
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.application .default-content-wrapper p a {
+    font-weight: 700;
+}
+
+.application .bg-danaherlightblue-50 .default-content-wrapper p {
+    text-align: center;
 }
 
 .application main > div.columns-container > div.columns-wrapper {
@@ -260,6 +289,27 @@
     color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.application main .columns > div div > p:not(.button-container) a {
+    position: relative;
+    z-index: 0;
+    word-break: break-all;
+    text-decoration-line: underline;
+    text-decoration-color: #3bc7e5;
+    text-decoration-thickness: 3px;
+}
+
+.application main .columns > div div > p:not(.button-container) a:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(59 199 229 / var(--tw-bg-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .testimonial>div {
     display: flex;
     align-items: center;

diff --git a/templates/application/application.css b/templates/application/application.css
@@ -1,11 +1,27 @@
 .application main {
-    @apply gap-10 mx-auto w-full bg-white;
-  }
-
-  .application main > div.columns-container > div.columns-wrapper {
-    @apply bg-white;
-  }
-
-  .application main .columns > div div > p:not(.button-container) {
-    @apply mt-3 leading-7 text-base text-danahergray-700;
-  }
+  @apply gap-10 mx-auto w-full bg-white py-4;
+}
+
+.application main .section {
+  @apply py-2;
+}
+
+.application .default-content-wrapper h1 {
+  @apply text-center text-gray-900 font-bold text-3xl pb-3;
+}
+
+.application .default-content-wrapper p a {
+  @apply font-bold;
+}
+
+.application .bg-danaherlightblue-50 .default-content-wrapper p {
+  @apply text-center;
+}
+
+.application main > div.columns-container > div.columns-wrapper {
+  @apply bg-white;
+}
+
+.application main .columns > div div > p:not(.button-container) {
+  @apply mt-3 leading-7 href-text text-base text-danahergray-700;
+}