work on layout.css

aircox_cms/static/aircox_cms/css/layout.css

@@ -62,30 +62,65 @@ ul {
 
 
 /** content: menus **/
-nav.menu {
+.menu {
     padding: 0.4em;
 }
 
-.menu.top {
-    padding: 0.2em;
-    height: 2.5em;
-    margin-bottom: 1em;
-    background-color: white;
-    box-shadow: 0em 0em 0.2em black;
-}
-    .menu.top * {
-        vertical-align: bottom;
+    body > .top *,
+    body > .header * {
+        vertical-align: middle;
     }
 
-    .menu.top > section {
+    body > .top section,
+    body > .header section {
         display: inline-block;
     }
 
-    .menu.top a {
+    body > .top a,
+    body > .header a {
         display: inline-block;
         margin: 0.2em 1em;
     }
 
+
+body > .top {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: calc(100% - 0.8em);
+    height: 2.5em;
+    background-color: white;
+    box-shadow: 0em 0em 0.2em black;
+    transition: opacity 1.5s;
+}
+
+    body[scrollY] > .top {
+        opacity: 0.1;
+        transition: opacity 1.5s 1s;
+    }
+
+    body > .top:hover {
+        opacity: 1.0;
+        transition: opacity 1.5s;
+    }
+
+
+body > .header {
+    overflow: hidden;
+    margin-top: 3.3em;
+    margin-bottom: 1em;
+}
+
+    body > .header > div {
+        width: 15000%;
+    }
+
+    body > .header > div > section {
+        margin: 0;
+        margin-right: -0.4em;
+    }
+
+
 .page_left, .page_right {
     max-width: 16em;
 }

aircox_cms/static/aircox_cms/css/theme.css

@@ -108,10 +108,8 @@ main.detail {
     }
 
     main.detail > header h1.title {
-        position: relative;
         width: calc(70% - 0.8em);
         margin: 0em;
-        margin-bottom: -2em;
         padding: 0.4em;
         background-color: rgba(255,255,255,0.8);
     }
@@ -125,7 +123,6 @@ main.detail {
     main.detail header .summary {
         display: inline-block;
         padding: 1em;
-        width: calc(20% - 2em);
         vertical-align: middle;
         font-size: 1.2em;
         font-weight: bold;