Merge pull request #223 from hlxsites/bug/enhancements

Updated minor css issues
hlxsites · Dec 7, 2023 · 5bb5f49 · 5bb5f49
2 parents be3f695 + 9df4d4c
commit 5bb5f49
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 38 deletions.
diff --git a/blocks/connect/connect.css b/blocks/connect/connect.css
@@ -1,7 +1,6 @@
 /* connet css */
 .linkedin-bottom {
-    padding-top: 80px;
-    padding-bottom: 80px;
+    padding: 70px 0;
 }
 
 .linkedin-bottom .outer {

diff --git a/blocks/timeline-slide/timeline-slide.css b/blocks/timeline-slide/timeline-slide.css
@@ -3,12 +3,12 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 80px 0;
+    padding-top: 70px;
     overflow: hidden;
   }
 
   /* Slider styles */
-  #year-slider {
+  .timeline-slide #year-slider {
     display: flex;
     overflow: hidden;
     transform: translate3d(43%, 0, 0);
@@ -17,7 +17,7 @@
     padding-bottom: 20px;
   }
 
-  .year {
+  .timeline-slide .year {
     cursor: pointer;
     border-radius: 5px;
     color: #dbdbdb;
@@ -28,18 +28,18 @@
     width: 160px;
   }
 
-  .year.active {
+  .timeline-slide .year.active {
     color: #f49600;
     transition: 0.3s all ease-in-out;
   }
 
   /* Content area styles */
-  #content-slider-container {
+  .timeline-slide #content-slider-container {
     position: relative;
     width: 100%;
   }
 
-  #content-slider {
+  .timeline-slide #content-slider {
     /* width: 100%; */
     display: flex;
     align-items: center;
@@ -49,7 +49,7 @@
     overflow: hidden;
   }
 
-  #content-slider li::before {
+  .timeline-slide #content-slider li::before {
     color: var(--primary-color);
     content: "\25A0";
     font-family: Arial;
@@ -60,22 +60,22 @@
     top: 0.45em;
 }
 
-  .year-content {
+.timeline-slide .year-content {
     display: none;
     transition: transform 0.5s ease, opacity 0.5s ease;
     opacity: 0;
     left: 0;
     right: 0;
   }
 
-  .year-content.active {
+  .timeline-slide .year-content.active {
     display: block;
     opacity: 1;
     transform: translateX(0);
   }
 
   /* buttons  */
-  .button-container {
+  .timeline-slide .button-container {
     width: 100%;
     position: absolute;
     height: 100%;
@@ -88,13 +88,13 @@
     justify-content: space-between;
   }
 
-  .button-container .hide {
+  .timeline-slide .button-container .hide {
     opacity: .35;
     cursor: auto;
     pointer-events: none;
   }
 
-  .button-prev {
+  .timeline-slide .button-prev {
     border: 2px solid #f49600;
     border-radius: 50%;
     color: #f49600;
@@ -109,7 +109,7 @@
     margin: 15px;
   }
 
-  .button-prev::after {
+  .timeline-slide .button-prev::after {
     content: '';
     border: 2px solid #f49600;
     border-width: 0 2px 2px 0;
@@ -123,7 +123,7 @@
     height: 20px;
   }
 
-  .button-next {
+  .timeline-slide .button-next {
     border: 2px solid #f49600;
     border-radius: 50%;
     color: #f49600;
@@ -140,24 +140,24 @@
 
 
 
-  .button-next:hover {
+  .timeline-slide .button-next:hover {
     background-color: #f49600;
   }
 
-  .button-next:hover::after {
+  .timeline-slide .button-next:hover::after {
     border-color: #fff;
   }
 
 
-  .button-prev:hover {
+  .timeline-slide .button-prev:hover {
     background-color: #f49600;
   }
 
-  .button-prev:hover::after {
+  .timeline-slide .button-prev:hover::after {
     border-color: #fff;
   }
 
-  .button-next::after {
+  .timeline-slide .button-next::after {
     content: '';
     border: 2px solid #f49600;
     border-width: 0 2px 2px 0;
@@ -172,26 +172,26 @@
   }
 
   @media (max-width: 767px) {
-    .timeline-slide {
+    .timeline-slide .timeline-slide {
       padding: 60px 0;
     }
 
-    #content-slider {
+    .timeline-slide #content-slider {
       margin: 0 30px;
     }
 
-    .button-container {
+    .timeline-slide .button-container {
         position: relative;
         justify-content: center;
         margin-top: 32px;
         height: 54px;
     }
 
-    .button-prev {
+    .timeline-slide .button-prev {
       margin-right: 5px;
     }
 
-    .year {
+    .timeline-slide .year {
       width: 150px;
     }
   }
diff --git a/blocks/vimeo/vimeo.css b/blocks/vimeo/vimeo.css
@@ -1,4 +1,3 @@
 .vimeo {
-    padding-top: 50px;
-    padding-bottom: 50px;
+    padding-top: 70px;
 }
diff --git a/styles/Typo.css b/styles/Typo.css
@@ -639,7 +639,7 @@ input[type="submit"] {
 
 .button.secondary {
     background-color: transparent;
-    padding: 0;
+    padding: 0!important;
     border: none;
     color: #ec8f2d;
     text-transform: none;

diff --git a/templates/Anniversary/Anniversary.css b/templates/Anniversary/Anniversary.css
@@ -1,38 +1,41 @@
 /* Default template css */
-.default-content-wrapper {
+.anniversary .default-content-wrapper {
     text-align: left!important;
 }
 
-.default-content-wrapper h2:first-child {
+.anniversary .default-content-wrapper h2:first-child {
     margin-top: 0px!important;
 }
 
-.outer {
+.anniversary .sidebar-section #content-wrapper .outer {
     display: flex;
     justify-content: space-between;
 }
 
-#main {
+.anniversary .sidebar-section #content-wrapper #content {
+    padding-bottom: 0px;
+}
+
+.anniversary #main {
     float: none;
 }
 
-#sidebar {
+.anniversary #sidebar {
     position: sticky;
     top: 130px;
-    float: none;
 }
 
 @media (max-width: 960px) {
-    #sidebar {
+    .anniversary #sidebar {
         top: 80px;
     }
 }
 
 @media (max-width: 860px) {
-    .outer {
+    .anniversary .sidebar-section #content-wrapper .outer {
         flex-direction: column;
     }
-    #sidebar {
+    .anniversary #sidebar {
         max-height: none;
     }
 }