Improve styling of page tiles when page links overflow

osmus · Sep 10, 2024 · 1a46c22 · 1a46c22
1 parent 163fb65
commit 1a46c22
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/_includes/pagenav.html b/_includes/pagenav.html
@@ -1,6 +1,6 @@
 {%- if page.title or pate.temp_title -%}
 <div class="pagenav">
-  <div>
+  <div class="page-title-area">
     <a class="selflink" href="{{page.url | absolute_url}}">
       {%- if page.wordmark -%}
         <img class="wordmark" alt="{{page.temp_title | default: page.title}}" src="{{page.wordmark | absolute_url}}"/>

diff --git a/_sass/dogwood/_layout.scss b/_sass/dogwood/_layout.scss
@@ -518,11 +518,16 @@ body:not(.layout-post):not(.layout-session) {
 
 .pagenav {
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
   border-bottom: 1px solid $alpha-grid-color;
   margin-bottom: $sp;
 
+  .page-title-area {
+    padding-right: $sp*0.5;
+  }
+
   .meta {
     margin-bottom: $sp*0.5;
   }
@@ -541,6 +546,7 @@ body:not(.layout-post):not(.layout-session) {
 
   @media only screen and (max-width: $sections-width) {
     flex-direction: column;
+    flex-wrap: nowrap;
   }
 }
 .layout-page.has-image {