Changeset 13272 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/site/_site.scss

Timestamp:

03/05/2024 02:45:07 AM (15 months ago)

Author:

adamwood

Message:

Support Theme: Redesign iteration 1

Replace wp4 with wporg-parent-2021
Redesign forums homepage
Reskin templates

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/site/_site.scss (modified) (11 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support-2024/sass/site/_site.scss

@@ -1 +1 @@
 @import "../variables-site/variables-site";
 
-
-body, #pagebody {
-    font-size: ms(0);
-}
-
 /*--------------------------------------------------------------
 # .site-header
 --------------------------------------------------------------*/
 .site-header {
-    background: $color__wp-blue;
+    background: var(--wp--preset--color--blueberry-1);
     padding: 1rem 0;
     position: relative;
@@ -86 +81 @@
 --------------------------------------------------------------*/
 .main-navigation {
-    background: $color__wp-blue;
+    background: var(--wp--preset--color--blueberry-1);
     clear: both;
     left: 0;
@@ -177 +172 @@
     #wporg-header ul li.current-menu-item::after,
     #wporg-header ul li.current_page_parent::after {
-        border-bottom: 9px solid $color__wp-blue;
+        border-bottom: 9px solid var(--wp--preset--color--blueberry-1);
     }
 
@@ -251 +246 @@
 /*--------------------------------------------------------------
 # .site-main
---------------------------------------------------------------*/
-.site-main {
-    margin: 0 auto;
-    max-width: $size__site-main;
-    padding: ms(10) ms(4);
-
-    @media screen and ( min-width: $ms-breakpoint ) {
-        padding: ms(10) 10px;
-    }
-
-    .single & {
-        padding: 0;
-
-        @media screen and ( min-width: $ms-breakpoint ) {
-            padding: 0 10px ms(10);
-        }
-    }
-
-    #page & {
-        padding: 0 10px ms(10);
-    }
-
-    .page-header {
-
-        h1 {
-            margin: 0;
-        }
-
-        p {
-            margin: 0.5rem 0;
-        }
-    }
-
-    .page-title {
-        font-size: ms( 4 );
-        font-weight: 400;
-    }
-
-    .no-results {
-        margin: 0 auto;
-        max-width: ms(32);
-        padding: 0 2rem;
+# Override original styles
+--------------------------------------------------------------*/
+
+body:not(.trac):not(.home-page):not(.home) #main {
+    margin-top: 0;
+    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--edge-space) var(--wp--preset--spacing--10);
+}
+
+@media screen and (max-width: 460px) {
+
+    #main {
+        margin: unset;
+    }
+}
+
+@media screen and (min-width: 960px) {
+
+    #header-inner,
+    #headline-inner,
+    #subnav-inner,
+    #showcase-inner,
+    #main,
+    #footer {
+        width: unset;
     }
 }
@@ -306 +283 @@
 --------------------------------------------------------------*/
 .sidebar {
-
-    div {
-        margin-bottom: 2rem;
+    margin-top: 0;
+
+    // Override parent theme
+    body.single & {
+        margin-top: 0;
+    }
+
+    > div {
+        margin-bottom: var(--wp--preset--spacing--30);
 
         ul {
             margin-bottom: 0;
+            padding-left: unset;
         }
 
         ul > li {
-            font-size: ms(-2);
-            border-top: 1px solid #eee;
+            font-size: var(--wp--preset--font-size--small);
+            border-top: 1px solid var(--wp--custom--color--border);
             padding: 0.5rem 0;
         }
+    }
+
+    a {
+        text-decoration: none;
     }
 }
@@ -376 +364 @@
             border-radius: 0;
             box-shadow: none;
-            color: $color__text-input;
+            color: #32373c;
             display: block;
             height: 100%;
@@ -438 +426 @@
 
     .site-main & .search-field {
-        border: 1px solid $color__border-input;
+        border: 1px solid var(--wp--preset--color--light-grey-1);
         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
         padding: 0.5rem;
@@ -457 +445 @@
 }
 
+/*--------------------------------------------------------------
+# .forums-homepage
+# .page
+--------------------------------------------------------------*/
+
+.forums-homepage-footer .wp-block-heading a {
+    text-decoration: none;
+}
+
+.forums-homepage-topics {
+
+    .wp-block-group-is-layout-grid.is-style-cards-grid .wp-block-wporg-link-wrapper h3 {
+        margin-bottom: unset;
+    }
+}
 
 /*--------------------------------------------------------------
@@ -466 +469 @@
 
     .entry-header {
-        margin-top: 2rem;
 
         .entry-title {
-            font-size: ms( 6 );
-            font-weight: 400;
-            margin: 0 auto;
-            max-width: ms(32);
 
             @media screen and ( min-width: $ms-breakpoint ) {
@@ -482 +480 @@
     .entry-content {
 
-        h2 {
-            font-size: ms( 4 );
-            font-weight: 400;
-        }
-
-        h3 {
-            font-size: ms( 0 );
-            font-weight: 600;
-            letter-spacing: 0.01rem;
-            text-transform: uppercase;
-        }
-
-        a {
-            text-decoration: underline;
-        }
-
         section {
-            padding: 2rem 0;
+            margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--50);
 
             .container {
                 margin: 0 auto;
-                max-width: ms(32);
 
                 @media screen and ( min-width: $ms-breakpoint ) {
@@ -515 +496 @@
 
             & + section {
-                border-top: 2px solid $color__background-hr;
-            }
-        }
+                border-top: 2px solid var(--wp--preset--color--light-grey-1);
+            }
+        }
+
+        h2.toc-heading {
+            font-size: var(--wp--preset--font-size--heading-4);
+            line-height: var(--wp--custom--heading--level-4--typography--line-height);
+            font-weight: 600;
+        }
+
+        h3.toc-heading {
+            font-size: var(--wp--preset--font-size--heading-5);
+            line-height: var(--wp--custom--heading--level-5--typography--line-height);
+            font-weight: 600;
+        }
+
+        h2,
+        h3 {
+
+            &.toc-heading:target {
+                border-left-color: var(--wp--preset--color--blueberry-1);
+            }
+        }
+
+        .table-of-contents {
+            margin: 0 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
+
+            .items {
+                font-size: var(--wp--preset--font-size--small);
+
+                li {
+
+                    ul {
+                        margin-left: 0;
+                    }
+
+                    a:hover {
+                        color: var(--wp--custom--link--color--text);
+                    }
+                }
+            }
+        }
+
+        p.toc-jump {
+            margin-bottom: unset;
+        }
+    }
+
+    .entry-footer {
+        margin-bottom: var(--wp--preset--spacing--40);
     }