Merge up-to-date UX

hlxsites · Apr 30, 2024 · c526aa5 · c526aa5
2 parents 858a56c + 0d60ecd
commit c526aa5
Show file tree

Hide file tree

Showing 83 changed files with 800 additions and 416 deletions.
diff --git a/blocks/agent-search/agent-search.css b/blocks/agent-search/agent-search.css
@@ -88,7 +88,7 @@ main .section.agent-search-container {
 
 .agent-search.block .search-bar .suggester-results .list-title {
   padding: 15px 15px 5px;
-  font-family: var(--font-family-proxima);
+  font-family: var(--font-family-primary);
   font-size: var(--body-font-size-s);
   font-weight: var(--font-weight-bold);
   text-transform: uppercase;

diff --git a/blocks/avm-report/avm-report.css b/blocks/avm-report/avm-report.css
@@ -1,20 +1,24 @@
 .avm-report.block {
-  padding: 2em 0;
   max-width: 600px;
 }
 
 .avm-report.block h2 {
+  color: var(--primary-color);
+  font-size: 28px;
+  font-weight: var(--font-weight-normal);
   margin-bottom: .5em;
 }
 
 .avm-report.block p {
-  letter-spacing: var(--letter-spacing-s);
+  color: var(--primary-color);
+  font-size: var(--body-font-size-s);
+  letter-spacing: normal;
+  margin-bottom: 13px;
 }
 
 .avm-report.block form {
   display: flex;
   flex-direction: column;
-  margin-top: 2em;
   justify-content: center;
   align-items: center;
 }
@@ -26,11 +30,12 @@
 }
 
 .avm-report.block form .avm-input input {
+  border: 1px solid var(--grey);
   display: block;
-  padding-left: 10px;
-  margin-right: 16px;
   height: 50px;
-  border: 1px solid var(--grey);
+  letter-spacing: normal;
+  margin-right: 16px;
+  padding-left: 10px;
 }
 
 .avm-report.block form .avm-input input[name="avmaddress"] {
@@ -39,26 +44,42 @@
 }
 
 .avm-report.block form .avm-input input[name="avmunit"] {
-  padding-left: 10px;
+  font-size: var(--body-font-size-s);
+  margin-right: 0;
+  padding: 1px 2px 1px 10px;
   width: 67px;
 }
 
 .avm-report.block form button[type="submit"] {
+  border: 1px solid var(--secondary-grey);
+  font-size: var(--body-font-size-s);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-l);
+  text-transform: uppercase;
   transition: all .3s ease-in;
 }
 
 @media screen and (min-width: 600px) {
   .avm-report.block {
-    width: 85%;
     margin: 0 auto;
+    max-width: 720px;
+    width: 85%;
   }
 }
 
 @media screen and (min-width: 900px) {
+  main .avm-report-container.section {
+    padding: 62px 0;
+  }
+
   .avm-report.block form {
     flex-direction: row;
   }
 
+  .avm-report.block h2 {
+    font-size: var(--heading-font-size-xxl);
+  }
+
   .avm-report.block form .avm-input input[name="avmaddress"] {
     width: 100%;
   }

diff --git a/blocks/blog-details/blog-details.css b/blocks/blog-details/blog-details.css
@@ -14,7 +14,7 @@
 }
 
 .blog-details.block .title {
-  font-family: var(--font-family-proxima);
+  font-family: var(--font-family-primary);
   font-weight: var(--font-weight-bold);
   font-size: var(--heading-font-size-m);
   line-height: var(--line-height-m);
@@ -237,7 +237,7 @@
 .blog-details.block .article-share-page h3 {
   padding-top: 32px;
   margin-bottom: 32px;
-  font-family: var(--font-family-proxima);
+  font-family: var(--font-family-primary);
   font-weight: var(--font-weight-bold);
 }
 

diff --git a/blocks/blog-listing/blog-listing.css b/blocks/blog-listing/blog-listing.css
@@ -36,7 +36,7 @@
 .blog-item .title {
   font-size: var(--body-font-size-l);
   margin-bottom: 16px;
-  font-family: var(--font-family-proxima);
+  font-family: var(--font-family-primary);
   font-weight: var(--font-weight-bold);
   letter-spacing: var(--letter-spacing-xs);
 }

diff --git a/blocks/blog-menu/blog-menu.css b/blocks/blog-menu/blog-menu.css
@@ -1,28 +1,28 @@
 .section.blog-menu-container {
   padding: 0;
   margin: 0 auto;
-  max-width: var(--wide-page-width);
+  max-width: none;
   position: sticky;
   top: 0;
   z-index: 10;
 }
 
 .blog-nav {
+  color: var(--white);
+  background-color: var(--primary-color);
   display: flex;
   flex-flow: column;
-  background-color: var(--primary-color);
-  color: var(--white);
-  padding-top: 10px;
-  font-family: var(--font-family-proxima);
+  font-family: var(--font-family-primary);
   font-size: var(--body-font-size-m);
-  width: 100vw;
-  max-width: 1600px;
+  max-width: var(--wide-page-width);
+  margin: 0 auto;
+  width: 100%;
 }
 
 .blog-nav ul {
   display: none;
   position: absolute;
-  top: 120px;
+  top: 115px;
   text-align: center;
   width: 100%;
   padding: 0 10px;
@@ -64,27 +64,32 @@
 }
 
 .blog-nav a {
-  text-decoration: none;
+  color: var(--white);
+  font-family: var(--font-family-primary);
+  font-size: var(--body-font-size-s);
+  font-weight: var(--font-weight-semibold);
   letter-spacing: var(--letter-spacing-m);
-  font-family: var(--font-family-proxima);
-  font-size: var(--body-font-size-m);
-  font-weight: var(--font-weight-normal);
   line-height: var(--line-height-m);
-  text-decoration-style: solid;
-  color: var(--white);
+  padding: 5px 10px;
+  text-decoration: none;
 }
 
 .blog-nav h1 a {
-  display: block;
+  display: inline-block;
   font-size: var(--heading-font-size-xl);
-  font-family: var(--font-family-proxima);
-  font-weight: var(--font-weight-bold);
+  font-family: var(--font-family-secondary);
+  font-weight: var(--font-weight-normal);
   line-height: var(--line-height-m);
   text-align: center;
   text-transform: none;
   letter-spacing: initial;
 }
 
+.blog-nav a:hover {
+  background-color: var(--white);
+  color: var(--primary-color);
+}
+
 .blog-nav.seller-advice a {
   color: var(--primary-color);
 }
@@ -109,7 +114,8 @@
   color: var(--primary-color);
 }
 
-.blog-nav h1:hover {
+.blog-nav h1 a:hover {
+  background-color: transparent;
   color: var(--white);
   opacity: 0.6;
 }
@@ -122,7 +128,7 @@
 }
 
 .blog-nav li {
-  font-family: var(--font-family-proxima);
+  font-family: var(--font-family-primary);
   font-size: var(--body-font-size-m);
   line-height: var(--line-height-m);
   letter-spacing: var(--letter-spacing-m);
@@ -131,13 +137,6 @@
   text-align: center;
 }
 
-.blog-nav li:hover {
-  border-bottom: 1px solid var(--white);
-  color: var(--white);
-  opacity: 0.6;
-}
-
-
 .blog-nav.seller-advice li:hover {
   border-bottom: 1px solid var(--primary-color);
 }
@@ -237,18 +236,19 @@
   }
 
   .blog-nav ul {
+    display: flex;
     padding: 0 66px 25px;
     position: unset;
-    display: flex;
-    justify-content: space-between;
+    justify-content: center;
   }
 
   .blog-nav li {
-    padding: 0;
     border-top: none;
+    padding: 0 0 0 16px;
   }
 
   .blog-nav h1 a {
+    font-size: var(--heading-font-size-xxl);
     text-align: left;
     margin: 0 66px
   }
@@ -257,7 +257,6 @@
 
 @media (min-width: 1200px) {
   .blog-nav h1 a {
-    font-size: var(--heading-font-size-xxxl);
-    line-height: var(--line-height-l);
+    font-size: var(--heading-font-size-xxl);
   }
 }