new lay, phase 1

1 files changed, 212 insertions, 114 deletions

diff --git a/themes/24-unification/layouts/_default/baseof.html b/themes/24-unification/layouts/_default/baseof.html
index c484d92..0454bf5 100644
--- a/themes/24-unification/layouts/_default/baseof.html
+++ b/themes/24-unification/layouts/_default/baseof.html
@@ -137,6 +137,9 @@
                   padding: 5px;
                   box-sizing: border-box;
               }
+              > li.active {
+                  background-color: var(--button-emph-bg);
+              }
               > li:hover {
                   background-color: var(--button-emph-bg);
               }
@@ -146,10 +149,12 @@
           }
 
           ol.subsection {
+              display: none;
               background-color: var(--panel-color);
               box-sizing: border-box;
               padding-left: 20px;
               border-bottom: var(--cool-border);
+              
               li {
                   background-color: var(--panel-color);
                   border: 0;
@@ -166,132 +171,225 @@
               text-align: center;
               margin-top: 20px;
           }
+
+          li.active ol.subsection {
+              display: block;
+          }
       }
-        
-       @media only screen and (max-width: 800px) {
-           .logo {
-               display: none;
-           }
-
-           .nav {
-               width: 100%;
-               padding-bottom: 20px;;
-               
-               .nav-box {
-                   width: 100%;
-                   border: 0;
-               }
-
-               ol.section {
-                   display: flex;
-                   flex-direction: row;
-                   flex-wrap: wrap;
-               }
-           
-               ol.subsection {
-                   display: none;
-               }
-
-               li {
-                   flex-shrink: 1;
-                   border: var(--cool-border)!important;
-                   padding: 5px;
-
-                   a {
-                       width: 100%!important;
-                       border: 0!important;
-                   }
-               }
-           }
-
-           .webbuttons {
-               display: none;
-           }
-           
-       }
- 
-           main {
-               padding-left: 20px;
-               box-sizing: border-box;
+      
+      @media only screen and (max-width: 800px) {
+          .logo {
+              display: none;
+          }
+
+          .nav {
+              width: 100%;
+              padding-bottom: 20px;;
+              
+              .nav-box {
+                  width: 100%;
+                  border: 0;
+              }
+
+              ol.section {
+                  display: flex;
+                  flex-direction: row;
+                  flex-wrap: wrap;
+              }
+              
+              ol.subsection {
+                  display: none;
+              }
+
+              li {
+                  flex-shrink: 1;
+                  border: var(--cool-border)!important;
+                  padding: 5px;
+
+                  a {
+                      width: 100%!important;
+                      border: 0!important;
+                  }
+              }
+          }
+
+          .webbuttons {
+              display: none;
+          }
           
-               article {
-                   background-color: var(--panel-color);
-                   margin-bottom: 20px;
-                   border: var(--cool-border);
-                   padding: 20px;
-               }
-           
-               img {
-                   max-width: 100%;
-                   height: auto;
-               
-               }
-           }
-
-       @media only screen and (max-width: 800px) {
-           main {
-               padding: 0;
-           }
-       }
-           </style>
+      }
+
+      /* Main  */
+      main {
+          padding-left: 20px;
+          box-sizing: border-box;
+          width: 100%;
+          
+          article {
+              background-color: var(--panel-color);
+              margin-bottom: 20px;
+              border: var(--cool-border);
+
+              h2 {
+                  margin: 0;
+                  padding-top: 10px;
+                  padding-bottom: 5px;
+                  padding-left: 20px;
+                  padding-right: 20px;
+
+              }
+              p {
+                  padding-left: 20px;
+                  padding-right: 20px;
+                  text-align: justify;
+              }
+              
+              time {
+                  padding-left: 20px;
+                  padding-right: 20px;
+              }
+
+              > pre, table {
+                  padding-left: 20px;
+                  padding-right: 20px;
+                  overflow-x: scroll;
+              }
+              
+              .highlight {
+                  padding-left: 20px;
+                  padding-right: 20px;
+
+                  pre {
+                  overflow-x: scroll;
+
+                  }
+              }
+              
+              aside.post-meta {
+                  border-top: var(--cool-border);
+                  padding-left: 20px;
+                  padding-right: 20px;
+                  padding-top: 5px;
+                  padding-bottom: 5px;
+                  background-color: var(--panel-meta-color);
+              }
+              
+              figure {
+                  text-align: center;
+                  margin: 0;
+                  max-width: 100%;
+                  font-size: 0.8em;
+              }
+              
+              img.float-right {
+                  float: right;
+                  display: inline;
+                  margin-left: 10px;
+              }
+              
+              img.center {
+                  max-width: 100%;
+                  height: auto;
+              }
+              
+              .pull-left {
+                  float: left;
+                  margin: 10px;
+              }
+              
+              .pull-right {
+                  float: right;
+                  margin: 10px;
+              }
+          }
+          article.link {
+              padding: 20px;
+              display: flex;
+              justify-content: center;
+
+              time {
+                  padding-left: 0;;
+              }
+              .img {
+                  padding-right: 20px;
+                  flex-grow: 0;
+                  height: 32px;
+                  width: 32px;
+              }
+              .text {
+                  flex-grow: 1;
+              }
+          }
+      }
+      
+      img {
+          max-width: 100%;
+          height: auto;
+          
+      }
+
+      .blog-pages-list {
+          border: var(--cool-border);
+          margin-bottom: 20px;
+          padding: 20px;
+          background-color: var(--panel-color);
+      }
+}
+
+ @media only screen and (max-width: 800px) {
+     main {
+         padding: 0;
+     }
+ }
+    </style>
   </head>
   
   <body>
 
-  <nav class="nav">
+    <nav class="nav">
 
-<div class="nav-box">    
-    <div class="logo">
-      {{ partial "blog/face-game.html" . }}
-    </div>
-    
-    
-    {{- with index site.Menus "sections" }}
-    <ol class="section">
-        <li class="name"><a href="/"><b>CRYS</b>SITE</a></li>
-    
-        {{- range . }}
-{{ . }}
-        <li><a href="{{ .URL }}">{{ .Name }}</a>
+      <div class="nav-box">    
+        <div class="logo">
+          {{ partial "blog/face-game.html" . }}
+        </div>
+        
+        {{ $page := . }}
+        {{- with index site.Menus "sections" }}
+        <ol class="section">
+          <li class="name"><a href="/"><b>CRYS</b>SITE</a></li>
+          {{- range . }}
+          <li
+            {{ $sectionSlice := slice .Params.section}}
+            {{ if intersect $page.Params.Categories $sectionSlice}}
+            class="active"
+            {{ end }}
+
+            ><a href="{{ .URL }}">{{ .Name }}</a>
             {{- with index site.Menus .Params.submenu }}
             <ol class="subsection">
-                {{- range .}}
-          <li><a href="{{ .URL}}">{{ .Name }}</a></li>
+              {{- range .}}
+              <li><a href="{{ .URL}}">{{ .Name }}</a></li>
+              {{- end}}
+            </ol>
+            
+            {{- end}}
+          </li>
+
           {{- end}}
         </ol>
-        
         {{- end}}
-      </li>
-
-      {{- end}}
-    </ol>
-    {{- end}}
-
-      <!-- <li class="active"><a href="/blog">Blog</a> -->
-      <!--   <ol class="subsection"> -->
-      <!--     <li>Archive -->
-      <!--       <ol> -->
-      <!--         <li><a href="/blog/2024">2024</a></li> -->
-      <!--         <li><a href="/blog/2024">2024</a></li> -->
-      <!--         <li><a href="/blog/2024">2024</a></li> -->
-      <!--       </ol> -->
-      <!--   </ol> -->
-      <!-- </li> -->
+        
+      </div>
+
+      <div class="webbuttons">
+        {{ partial "button-31" (dict "file" "rss.gif" "alt" "RSS Feed" "href" "https://michal.sapka.me/blog/index.xml") }}
+      </div>
       
-</div>
-
-    <div class="webbuttons">
-      {{ partial "button-31" (dict "file" "rss.gif" "alt" "RSS Feed" "href" "https://michal.sapka.me/blog/index.xml") }}
-      {{ partial "button-31" (dict "file" "openbsd.gif" "alt" "RSS Feed" "href" "https://michal.sapka.me/blog/index.xml") }}
-      {{ partial "button-31" (dict "file" "openbsd.gif" "alt" "RSS Feed" "href" "https://michal.sapka.me/blog/index.xml") }}
-      {{ partial "button-31" (dict "file" "openbsd.gif" "alt" "RSS Feed" "href" "https://michal.sapka.me/blog/index.xml") }}
-    </div>
+    </nav>
     
-  </nav>
-  
-  <main>
-    {{ block "main" . }}
-    {{ end }}
-  </main>
-</body>
+    <main>
+      {{ block "main" . }}
+      {{ end }}
+    </main>
+  </body>