Merge pull request #85 from creativecommons/viewport-fix-vocab

update upstream vocabulary, correct viewport resizing and padding issues

Author: possumbilities

src/context/default-page.html

@@ -46,7 +46,7 @@ <h1><a class="identity-logo" href="#">Creative Commons</a></h1>
 
 
 
-    <nav class="explore-menu" aria-label="Explore menu">
+    <div class="explore-panel">
 
     <!-- (optional main CC logo, p, link on non-home site back to main site) -->
     <!-- <aside>
@@ -55,11 +55,11 @@ <h2>Our Work Relies On You!</h2>
         <p>Help us keep the internet free and open.</p>
     </aside> -->
 
-    <nav class="explore-menu">
+    <nav class="explore-menu" aria-label="Explore menu">
         <ul>
             <li>
                 <a href="#">Global Network</a>
-                <p>Join a global community working to strengthen the Commons</p>
+                <p>Join a  global community working to strengthen the Commons</p>
             </li>
             <li>
                 <a href="#">Certificate</a>

src/vocabulary/css/vocabulary.css

@@ -385,6 +385,7 @@ main > aside.sidebar .attention a {
 
 main h2 {
     width: 100%;
+    box-sizing: border-box;
 
     font-family: 'Roboto Condensed';
     font-style: normal;
@@ -394,6 +395,8 @@ main h2 {
 }
 
 main h3 {
+    box-sizing: border-box;
+    
     font-family: 'Roboto Condensed';
     font-style: normal;
     font-weight: 700;
@@ -510,7 +513,7 @@ main figure {
     padding: 0;
 }
 
-main > article figure img, main > figure img {
+main > article figure img, main > figure img, main > .content figure img {
     width: 100%;
 }
 
@@ -1133,7 +1136,7 @@ body > header .explore-panel nav ul li p {
 
 body > article.attention {
     grid-column: 1 / span 11;
-    padding: 1em 5%;
+    padding: 1em var(--vocabulary-page-edges-space);
 
     background: var(--vocabulary-brand-color-soft-green);
     font-family: 'Source Sans Pro';
@@ -1523,7 +1526,7 @@ body > footer .license svg {
 }
 
 .blog-index main .posts.featured ul {    
-    padding: 0 5%;
+    padding: 0 var(--vocabulary-page-edges-space);
 }
 
 .blog-index main .posts.featured ul li {
@@ -1901,7 +1904,7 @@ body > footer .license svg {
     }
 
     .blog-index main .posts {
-        padding: 0 5%;
+        padding: 0 var(--vocabulary-page-edges-space);
     }
 
     .blog-index main footer .attribution-list ul.expand {
@@ -1950,17 +1953,51 @@ body > footer .license svg {
         left: 0;
     }
 
+    main .content {
+        padding: 0 var(--vocabulary-page-edges-space);
+    }
+
+    main:has( > aside.sidebar) > aside.sidebar { 
+        padding: 0 var(--vocabulary-page-edges-space);
+    }
+
+    main > *:not(header) {
+        padding: 0 var(--vocabulary-page-edges-space);
+    }
+
+    main > .posts {
+        padding: 0 var(--vocabulary-page-edges-space); 
+    }
+
     .posts article figure {
         width: 100%;
         flex: initial;
     }
 
+    .person-page main > header {
+        padding-left: var(--vocabulary-page-edges-space);
+        padding-right: var(--vocabulary-page-edges-space);
+    }
+
+    .person-page main > header:before { 
+        left: 0;
+    }
+
+    .search-index main > header {
+        padding-left: var(--vocabulary-page-edges-space);
+        padding-right: var(--vocabulary-page-edges-space);
+    }
+
+    .search-index main > header:before { 
+        left: 0;
+    }
+    
     .team-index main > header {
-        padding: 0 5%;
+        padding: 0 var(--vocabulary-page-edges-space);
     }
 
     .team-index main article.persons {
-        padding: 0 5%;
+        padding: 0 var(--vocabulary-page-edges-space);
     }
 
     .team-index main article.persons ul {
@@ -1979,10 +2016,6 @@ body > footer .license svg {
         order: -1;
     }
 
-    main nav.pagination {
-        width: 100%;
-    }
-
     main nav.pagination ol {
         /* width: 100%; */
         flex-wrap: wrap;
@@ -2005,6 +2038,11 @@ body > footer .license svg {
     main article.posts.related ul {
         grid-template-columns: 1fr;
     }
+
+    .posts .post figure {
+        width: 100%;
+        flex: initial;
+    }
 }
 
 @media (max-width: 425px) {