open-source (oss)

footer.css

@@ -3,6 +3,8 @@
 */
 
 .footer {
+    grid-row:5;
+    margin-top:10px;    
     text-align:center;
     display:grid;
     grid-template-columns: repeat(3,1fr);
@@ -12,8 +14,8 @@
     color:black;
     align-items: center;
     align-content: center;
-    text-transform: capitalize;
-    /* background-color: rgba(255,255,255,0.8); */
+    text-transform: capitalize; 
+    /* background-color: rgba(255,255,255,0.8);
+    
     
-    grid-column: 1 /span 2;
 }

header.css

@@ -1,3 +1,7 @@
-.main .header { display:grid; grid-template-columns:64px auto; gap:4px}
-.main .header .title {font-size:28px; font-weight:bold}
-.main .header img {width:55px; height:55px;}
+.main .header {display:grid; grid-template-columns:64px auto; gap:4px; width:100%; align-items:center;}
+.main .header .icon {width:64px; height:64px;}
+.main .header .icon img {width:64px; height:64px;}
+
+.main .header .title { font-size:32px; text-transform: uppercase; font-weight:bold}
+.main .header .subtitle {font-style:italic;font-size:14px; color:gray; text-transform: capitalize;}
+

layout.css

@@ -1,15 +1,43 @@
+/**
+* This file implements theme Open Source Software, the expectation is just a pager that presents a tool/software
+*/
+body, ul, p, select {
+    font-size: 16px;
+    font-weight:lighter;
+    font-family:sans-serif;
+    line-height:1.5;
 
-
+}
 .main {
-    height:98vh; display:grid; grid-template-columns:70% auto; gap:4px;
-    grid-template-rows:70px 40px auto 32px;
-    padding-left:2%; padding-right:2%;
-    line-height: 1.5; font-size:16px; font-family: sans-serif; font-weight:lighter;
+    display:grid;
+    grid-template-columns: 100%;;
+    margin:1%;
+    margin-left:10%;
+    margin-right:10%;
+    gap:4px;
+    height:90%;
+    width:80%;
 }
 .main .content{
+    
+    grid-row:4;
     align-self:center;
+    height:100%;
+    width:100%;
 }
-.main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;}
+
+.main .content .banner {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    height:200px;
+    align-items: center;
+    align-content: center;
+    display: grid;
+
+}
+
+/* .main .pane {border-left:1px solid #CAD5E0; height:100%; padding:8px;} */
 .bold {font-weight:bold}
 .small-text {font-size:12px; font-weight:lighter; color :#000000;}
 .active {cursor:pointer; padding:2px; margin:2px; border-bottom:2px solid transparent}

menu.css

@@ -1,30 +1,8 @@
-.menu {
-    padding:8px;
-    border:1px solid #CAD5E0 ;
-    
-    display:grid;
-    grid-column: 1 / span 2;
-    grid-template-columns: 92px repeat(7,auto);
-    gap:4px;
-    text-transform: capitalize;
-    align-items: center;
-    
-}
-.menu .icon {padding:4px;}
+
+.menu .icon {padding:4px; align-items:center; display:grid;}
 .menu .icon img {width:30px; height:30px;}
-.menu .item {
-    font-weight:bold;
-    cursor:pointer;
-    padding:4px;
-    text-align: left;
-   
-    
-   
-    
-    
-}
 
-.menu .sub-menu {
+.main .menu .sub-menu {
     
     display:none;
     position:absolute;
@@ -39,12 +17,38 @@
     background-color: rgba(255,255,255,0.8);
     
 }
+.main .menu .item {
+    font-weight:bold;
+    cursor:pointer;
+    padding:4px;
+    text-align: left;
+}
 
-.menu .item:hover .sub-menu{
+.main .menu .item:hover .sub-menu{
     
     display:block;
     height:auto;    
 }
+
+.main .menu {
+    padding:8px;
+    grid-row:2;
+    width:100%;
+    display:none;
+    
+    /* grid-row:2; grid-column:1 ; */
+    grid-template-columns: 92px repeat(7,auto);
+    gap:4px;
+    text-transform: capitalize;
+    border:0;  height:48px; padding:0px;
+    display:grid; grid-template:64px repeat(6,1fr); gap:4px; 
+    /* background-color: #f3f3f3; */
+    align-items: center;
+}
+.main .menu .icon .button {
+    border:1px solid #CAD5E0; border-radius:8px; padding:2px;
+    ;
+}
 /**
 * TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS
 */