Mercurial > web-octave

changeset 206:68d54c6d397a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
More top menu bar style tweaks.
author Kai T. Ohlhus <k.ohlhus@gmail.com>
date Thu, 09 Jul 2020 23:02:56 +0900
parents 585fc24ed727
children 826f2ee9419f
files _layouts/default.html css/app.css
diffstat 2 files changed, 33 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/_layouts/default.html	Thu Jul 09 23:01:48 2020 +0900
+++ b/_layouts/default.html	Thu Jul 09 23:02:56 2020 +0900
@@ -26,6 +26,7 @@
     <noscript>
       <style>
       .no-js .title-bar { display: none; }
+      .no-js .top-bar .top-bar-left { display: block; }
       @media screen and (min-width: 40em) {
         .no-js .top-bar { display: block; }
       }
@@ -48,15 +49,17 @@
   <body>
 
     <div data-sticky-container>
-      <div class="no-js" data-sticky data-options="marginTop:0;">
+      <div class="no-js dark-background" data-sticky data-options="marginTop:0;">
 
         <div class="title-bar" data-responsive-toggle="homepage-menu" data-hide-for="large">
           <!-- title-bar-X is visible in collapsed mode -->
           <div class="title-bar-left">
             <div class="title-bar-title octave-logo">
-              <img src="{{ "/img/octave-logo.svg" | relative_url }}"
-                   style="width: 32px; height: auto" alt="GNU Octave logo">
-              <a href="{{ "/" | relative_url }}" style="height:100%">{{ site.title }}</a>
+              <a href="{{ "/" | relative_url }}">
+                <img src="{{ "/img/octave-logo.svg" | relative_url }}"
+                     style="width: 32px; height: auto" alt="GNU Octave logo">
+                <span>{{ site.title }}</span>
+              </a>
             </div>
           </div>
           <div class="title-bar-right">
@@ -67,9 +70,11 @@
         <div class="top-bar" id="homepage-menu">
           <div class="top-bar-left">
             <div class="octave-logo">
-              <img src="{{ "/img/octave-logo.svg" | relative_url }}"
-                   style="width: 32px; height: auto" alt="GNU Octave logo">
-              <a href="{{ "/" | relative_url }}" style="height:100%">{{ site.title }}</a>
+              <a href="{{ "/" | relative_url }}">
+                <img src="{{ "/img/octave-logo.svg" | relative_url }}"
+                     style="width: 32px; height: auto" alt="GNU Octave logo">
+                <span>{{ site.title }}</span>
+              </a>
             </div>
           </div>
           <div class="top-bar-right">
@@ -77,10 +82,7 @@
               {%- for page in site.pages -%}
                 {%- if page.menu -%}
                   <li>
-                    <a href="{{ page.url | relative_url }}">
-                      <i class="{{ page.icon | default: "fi-list" }}"></i>
-                      <span>{{ page.title }}</span>
-                    </a>
+                    <a href="{{ page.url | relative_url }}">{{ page.title }}</a>
                   </li>
                 {%- endif -%}
               {%- endfor -%}
--- a/css/app.css	Thu Jul 09 23:01:48 2020 +0900
+++ b/css/app.css	Thu Jul 09 23:02:56 2020 +0900
@@ -13,6 +13,10 @@
   font-size: 2.33rem;
 }
 
+.dark-background {
+  background: #333;
+}
+
 /* Foundation 6 modifications */
 
 .title-bar,
@@ -21,6 +25,11 @@
   background: #333;
 }
 
+.top-bar {
+  max-width: 1200px;
+  margin: auto;
+}
+
 .top-bar ul li a {
   color: #FFF;
 }
@@ -29,7 +38,12 @@
   background-color: #585858;
 }
 
-.grid-container {
+@media screen and (max-width: 1023px) {
+  .top-bar .top-bar-left { display: none; }
+  .top-bar .top-bar-right { margin-left: 0px; }
+}
+
+.grid-container { /* Content */
   margin: 1em auto;
 }
 
@@ -37,6 +51,11 @@
   width: 100%;
 }
 
+a.button.warning { /* RSS Feed */
+  font-weight: bold;
+  color: #FFF;
+}
+
 /* Foundation 6 responsive buttons */
 
 @media screen and (max-width: 39.9375em) {