layout ng

src/scss/main.scss

@@ -12,6 +12,7 @@ $flag-icon-path: '../img';
 @import "bootstrap/scss/bootstrap-grid";
 @import "bootstrap/scss/bootstrap-reboot";
 @import "bootstrap/scss/bootstrap-utilities";
+@import "bootstrap/scss/buttons";
 @import "bootstrap/scss/badge";
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
@@ -24,7 +25,8 @@ html, body {
 }
 
 body {
-  background-image: url("../img/bg.jpg");
+  background-color: #222;
+  background-image: url("../img/bg2.jpg");
   color: #fff;
   min-height: 100vh;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -34,6 +36,10 @@ ul {
   list-style: disclosure-closed;
 }
 
+p {
+  text-align: justify;
+}
+
 .content {
   flex: 1;
   padding: 2%;
@@ -55,26 +61,65 @@ a {
   }
 }
 
+.fill-col-inner {
+  display: flex;
+  align-items: center;
+}
+
 .logo {
   display: block;
   margin: 0 auto;
   max-width: 128px;
   max-height: 128px;
-  transition: transform .5s ease-in-out;
 
-  &:hover {
-    transform: rotate(360deg);
+  &.fixed {
+    width: 128px;
+    height: 128px;
+  }
+
+  &.huge {
+    width: 256px;
+    height: 256px;
+    max-width: 256px;
+    max-height: 256px;
+  }
+
+  &.mini.fixed {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .logo {
+    max-width: 96px;
+    max-height: 96px;
+  }
+}
+
+.me-profile {
+  display: block;
+  height: 256px;
+  width: 256px;
+  margin: 0 auto;
+  border-radius: 50%;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
   }
 }
 
 .nav {
   display: flex;
+  background-color: #111;
   justify-content: start;
   flex-wrap: wrap;
-  padding: .5rem;
+  padding: 1rem 1.5rem;
 
   .toggle {
-    padding: .5rem;
+    padding: 1rem 1.5rem;
     display: none;
   }
 
@@ -84,10 +129,11 @@ a {
 
   .items {
     display: flex;
-  }
+    align-items: center;
 
-  .lang-large {
-    display: flex;
+    .item {
+      display: flex;
+    }
   }
 }
 
@@ -105,6 +151,10 @@ a {
       }
     }
 
+    .logo {
+      display: none;
+    }
+
     .items {
       display: none;
 
@@ -113,7 +163,7 @@ a {
 
         a {
           display: block;
-          padding: 0.5rem;
+          padding: .75rem 1.5rem;
         }
       }
     }
@@ -123,7 +173,7 @@ a {
     }
 
     .lang-large {
-      display: none;
+      display: none !important;
     }
   }
 }
@@ -151,14 +201,6 @@ a {
   border-bottom: 1px solid #fff;
 }
 
-.heading {
-  text-align: center;
-
-  a {
-    color: #fff;
-  }
-}
-
 .flex-grow {
   flex: 1;
 }
@@ -264,13 +306,6 @@ pre {
   }
 }
 
-@media (max-width: 767.98px) {
-  .logo {
-    max-width: 96px;
-    max-height: 96px;
-  }
-}
-
 .table-container {
   overflow-y: auto;
 }
@@ -290,15 +325,6 @@ table.table {
   }
 }
 
-.ossrox {
-  background-color: #efefef;
-  border: 2px solid #000;
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
-  padding: 5px;
-  margin: 5px;
-  max-width: 250px;
-}
-
 .article-content {
   img {
     display: block;
@@ -342,3 +368,63 @@ table.table {
     border-bottom: none;
   }
 }
+
+.side-banner {
+  float: right;
+  width: 30%;
+  margin-left: 1rem;
+  margin-bottom: 1rem;
+}
+
+.ossrox-logo {
+  max-width: 250px;
+}
+
+.tab-card.ossrox {
+  .title {
+    background-color: #006269;
+    color: #fff;
+    padding: .75rem;
+    text-align: center;
+  }
+
+  .card {
+
+  }
+
+  img {
+    max-width: 250px;
+    max-height: 50px;
+  }
+}
+
+//.ossrox {
+//  background-color: #efefef;
+//  border: 2px solid #000;
+//  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
+//  padding: 5px;
+//  margin: 5px;
+//  max-width: 250px;
+//}
+
+@media (prefers-color-scheme: light) {
+  body {
+    background-color: #ddd;
+    background-image: url("../img/bgl.jpg");
+    color: #000;
+  }
+
+  .me-profile {
+    border: 1px solid #000;
+  }
+
+  .nav {
+    background-color: #eee;
+  }
+
+  .menu {
+    a {
+      color: #000;
+    }
+  }
+}