Show case gallery is bigger, changed top menu behaviour in mobile version, make icons expand on mouse hover.

layouts/partials/showcase.html

@@ -1,4 +1,4 @@
-<section id="showcase" mode="gallery">
+<section id="showcase"  class="gallery" mode="gallery">
     {{ partial "showCaseCommon.html" . }}
   
   </section>

layouts/partials/showcaseBanner.html

@@ -28,7 +28,7 @@
       {{ .Summary | plainify | safeHTML  | truncate 200 }} {{ if .Truncated }}
       {{ end }}
       <br />
-      <a class="readMore" href="{{ .RelPermalink }}">See game page </a> {{ end }}
+      <a class="readMore" href="{{ .RelPermalink }}#showcase">See game page </a> {{ end }}
     </div>
   </div>
 

layouts/partials/topMenu.html

@@ -1,73 +1,72 @@
-<nav class="responsiveWidth toggleOnPortrait" id="topmenu">
+<nav class="responsiveWidth  " id="topmenu">
     <div>
         <a href="/">
-            <button class="genericCl">
-                <i class="fas fa-home"></i> Home
+            <button class="genericCl responsiveIcon">
+                <i class="fas fa-home"></i> <span>Home</span>
             </button>
         </a>
 
 
         <a href="https://hub.jmonkeyengine.org">
-            <button class="genericCl">
-                <i class="fab fa-discourse"></i> Discussions
+            <button class="genericCl responsiveIcon">
+                <i class="fab fa-discourse"></i> <span>Discussions</span>
             </button>
         </a>
 
         <a href="https://store.jmonkeyengine.org">
-            <button class="genericCl">
-                <i class="fas fa-puzzle-piece"></i> Store
+            <button class="genericCl responsiveIcon">
+                <i class="fas fa-puzzle-piece"></i> <span>Store</span>
             </button>
         </a>
 
         <a href="/docs">
-            <button class="genericCl">
-                <i class="fas fa-book"></i> Docs
+            <button class="genericCl responsiveIcon">
+                <i class="fas fa-book"></i> <span>Docs</span>
             </button>
-         </a>
+        </a>
 
         <a href="/license">
-            <button class="genericCl">
-                <i class="fas fa-balance-scale-right"></i> License
+            <button class="genericCl responsiveIcon">
+                <i class="fas fa-balance-scale-right"></i> <span>License</span>
             </button>
         </a>
     </div>
 
+    <div class="toggleable toggledOffPortrait">
+            <a href="https://github.com/jMonkeyEngine/jmonkeyengine" rel='noopener noreferrer' target="_blank">
+                <button class="icon codeCl" title="Github">
+                    <i class="fab fa-github-square"></i> <span>Github</span>
+                </button>
+            </a>
+            <a href="https://twitter.com/jmonkeyengine" rel='noopener noreferrer' target="_blank">
+                <button class="icon twitterCl" title="Follow on Twitter">
+                    <i class="fab fa-twitter"></i> <span>Twitter</span>
+                </button>
+            </a>
 
-    <div>
-        <a href="https://github.com/jMonkeyEngine/jmonkeyengine"  rel='noopener noreferrer' target="_blank">
-            <button class="icon codeCl" title="Github">
-                <i class="fab fa-github-square"></i>
-            </button>
-        </a>
-        <a href="https://twitter.com/jmonkeyengine" rel='noopener noreferrer' target="_blank">
-            <button class="icon twitterCl" title="Follow on Twitter">
-                <i class="fab fa-twitter"></i>
-            </button>
-        </a>
-
-        <a href="https://www.youtube.com/channel/UC-Fs3R5Q6wW_XYspOXGZgPw" rel='noopener noreferrer' target="_blank">
-            <button class="icon youtubeCl" title="Follow on Youtube">
-                <i class="fab fa-youtube"></i>
-            </button>
-        </a>
-    </div>
+            <a href="https://www.youtube.com/channel/UC-Fs3R5Q6wW_XYspOXGZgPw" rel='noopener noreferrer'
+                target="_blank">
+                <button class="icon youtubeCl" title="Follow on Youtube">
+                    <i class="fab fa-youtube"></i> <span>Youtube</span>
+                </button>
+            </a>
+       
 
-    <div>
-        <a href="https://jmonkeyengine.itch.io/jMonkeyEngine" rel='noopener noreferrer' target="_blank">
-            <button class="icon itchCl" title="Itch.io">
-                <i class="fab fa-itch-io"></i>
-            </button>
-        </a>
-        <a href="https://discord.gg/Rv8sfVu" rel='noopener noreferrer' target="_blank">
-            <button class="icon discordCl" title="Discord">
-                <i class="fab fa-discord"></i>
-            </button>
-        </a>
-        <a href="https://opencollective.com/jmonkeyengine" rel='noopener noreferrer' target="_blank">
-            <button class="icon donateCl" title="Donate">
-                <i class="fas fa-donate"></i>
-            </button>
-        </a>
+            <a href="https://jmonkeyengine.itch.io/jMonkeyEngine" rel='noopener noreferrer' target="_blank">
+                <button class="icon itchCl" title="Itch.io">
+                    <i class="fab fa-itch-io"></i> <span>Itch.io</span>
+                </button>
+            </a>
+            <a href="https://discord.gg/Rv8sfVu" rel='noopener noreferrer' target="_blank">
+                <button class="icon discordCl" title="Discord">
+                    <i class="fab fa-discord"></i> <span>Discord</span>
+                </button>
+            </a>
+            <a href="https://opencollective.com/jmonkeyengine" rel='noopener noreferrer' target="_blank">
+                <button class="icon donateCl" title="Donate">
+                    <i class="fas fa-donate"></i> <span>Donate!</span>
+                </button>
+            </a>
 
-    </div>
+        </div>
 </nav>

static/css/style.less

@@ -257,45 +257,46 @@ nav li:before {
 
 
 #topmenu {
-
     background-color: var(--background);
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
-    align-items: center;
     border-bottom-left-radius: @borderRoundness;
     border-bottom-right-radius: @borderRoundness;
     padding: 0.2rem;
     padding-left: 1rem;
     padding-right: 1rem;
 
+
     a {
         text-decoration: none !important;
     }
 
-    button.icon {
-        min-width: 1.7rem;
-    }
+
 
     >div {
+        display:flex;
+        align-items: center;
         flex-direction: row;
-
-        @media @portrait {
-            flex-direction: column;
-        }
-
+        flex-wrap: wrap; 
+        justify-content: space-around; 
         margin-right:0.3rem;
 
     }
 
-    >div:nth-child(2) {
-        // The last ul is on the right.
-        margin-left: auto;
-
-    }
 
     >div:last-child {
         margin-right: 0;
+        >div{
+            margin-left:0.3rem;
+        }
+
+        @media @portrait {
+            margin:auto;
+        }
+
+
+    
     }
 
 
@@ -305,9 +306,12 @@ nav li:before {
         margin-left: 0;
 
         @media @portrait {
-            button {
-                width: 100%;
-            }
+            margin:auto;
+        }
+        @media @portrait {
+            // button {
+            //     width: 100%;
+            // }
         }
     }
 
@@ -354,21 +358,85 @@ button:hover {
     filter: brightness(130%);
 
 }
+@keyframes buttonIconExpand {
+    0% {  
+   
+   
+    }
+    100% {
+      
+        position:initial;
+    }
+
+  }
+  
+  @keyframes buttonIconExpandR {
+
+ 0%{
+    }
+    
+    100% {  
+    
+
+    }
+  }
+  
+.clickableIcon{
 
-button.icon {
     i {
         margin: 0 !important;
         padding: 0 !important;
+        display:inline-block;
+        margin-right:-0.25rem!important;
+        transition: margin 0.6s linear;
+
+    }
+    >span{
+        opacity: 0;
+        letter-spacing: -0.9rem;
+        font-size:0px;
+        margin:0;
+        padding:0;
+        
+        transition: letter-spacing .8s linear, opacity .3s linear 0.6s,font-size 0.3s linear;
     }
+    @media @portrait{
+        >span{
+            display:none;
+        }
+        i{
+            margin:0!important;
 
+        }
+    }
+    &.hover,&:hover{
+        i{
+            margin:0!important;
+        }
+        >span{
+            font-size:inherit;
+            letter-spacing: 0px;
+            opacity:1;
+        }
+    }
+    
     padding:0.5rem;
     padding-left:0.7rem;
     padding-right:0.7rem;
-
+    min-width:1.8rem;
     text-align: center;
     font-size: 1.2rem;
 }
 
+button.icon {
+    .clickableIcon();
+
+}
+button.responsiveIcon {
+    @media @portrait{
+    .clickableIcon();
+    }
+}
 
 nav {
     display: flex;
@@ -451,6 +519,10 @@ h3 {
     &:hover {
         color: var(--highlightFg2);
     }
+
+@media @portrait {
+        display: block;
+    }
 }
 
 // Useless things are hidden inportrait mode.
@@ -459,27 +531,24 @@ h3 {
         display: none;
     }
 }
-
-@media @portrait {
-    .toggleNavOnPortraitButton {
-        display: block;
+    .toggleable.toggledOn {
+        display: flex;
+    }
+    .toggleable.toggledOff {
+        display: none!important;
     }
 
-    nav.toggleOnPortrait {
-
-        >* {
-            flex-direction: column;
-            display: none;
+    .toggleable.toggledOnPortrait{
+        @media @portrait {
+            .toggleable.toggledOn();
         }
-
-        >.toggledOn {
-            flex-direction: column;
-            display: flex;
+    }
+    .toggleable.toggledOffPortrait{
+        @media @portrait {
+            .toggleable.toggledOff();
         }
-
-        align-items: center;
     }
-}
+
 
 
 // Give padding to all the icons (from font awesome)
@@ -1120,15 +1189,21 @@ section#showcase {
 
     }
 
+    &.gallery{
+        min-height:80vh;
+    }
     #showCasePrev {
         font-size: 4rem;
-        bottom: 1rem;
+        top: 50%;
+        margin-top:-2rem;
         left: 1rem;
     }
 
     #showCaseNext {
         font-size: 4rem;
-        bottom: 1rem;
+        margin-top:-2rem;
+
+        top: 50%;
         right: 1rem;
     }
 

static/js/utils.js

@@ -59,24 +59,31 @@ PROGRESS_BAR_INTERVAL = setInterval(function () {
 
 
 window.addEventListener("DOMContentLoaded", function () {
-    document.querySelectorAll(".toggleNavOnPortraitButton").forEach(el=>{
+    document.querySelectorAll("[toggle]").forEach(el=>{
         const toggleId=el.getAttribute("toggle");
         if(!toggleId)return;
         const parent=document.querySelector("#"+toggleId);
         if(!parent)return;
         el.addEventListener("click",()=>{
-            let toggled=el.getAttribute("toggled");
-            console.log("Toggle ",toggled?"on":"off'")
-            parent.querySelectorAll("div").forEach(el2=>{
+           
+            parent.querySelectorAll(".toggleable").forEach(el2=>{
+                let toggled=el2.classList.contains("toggledOn");
+                let toggledPortrait=el2.classList.contains("toggledOnPortrait");
+                let notToggledPortrait=el2.classList.contains("toggledOffPortrait");
+                toggled=toggled||toggledPortrait;
+                const portrait=notToggledPortrait||toggledPortrait;
+                console.log("Toggle ",toggled?"on":"off'")
                 if(toggled){
-                    el.removeAttribute("toggled",false);
-                    el2.classList.add("toggledOff");
+                    // el.removeAttribute("toggled",false);
+                    el2.classList.add(portrait?"toggledOffPortrait":"toggledOff");
                     el2.classList.remove("toggledOn");
+                    el2.classList.remove("toggledOnPortrait");
 
                 }else{
-                    el.setAttribute("toggled",true);
+                    // el.setAttribute("toggled",true);
                     el2.classList.remove("toggledOff");
-                    el2.classList.add("toggledOn");
+                    el2.classList.remove("toggledOffPortrait");
+                    el2.classList.add(portrait?"toggledOnPortrait":"toggledOn");
 
                 }
             });