Transfer to git

2026-02-03 19:37:38 -03:00
commit 35d8517e56
137 changed files with 5817 additions and 0 deletions
--- a/css/global/layout/global-layout.css
+++ b/css/global/layout/global-layout.css
@@ -0,0 +1,171 @@
+/* -------- Variables --------- */
+
+html {
+    --gap:                          2em;
+    --mobile-topnavbar-height:      125px;
+    --mobile-botnavbar-height:      var(--mobile-topnavbar-height);
+    --side-bar-width:               240px;
+    --max-percentage-width-navar:   70%;
+}
+
+/* ---- Hide mobile only ---- */
+
+.navbar.bot             { display: none; }
+
+/* ---- Hierarchical layout ---- */
+
+
+.panel { padding:                calc(var(--gap) / 2); }
+
+    .panel .header {
+        flex-shrink:            0;
+        display:                flex;
+        justify-content:        center;
+        align-items:            center;
+        height:                 calc(var(--title-height) + 0.5em );
+        transform:              translateY(-15px);}
+
+.blank { pointer-events: none; }
+
+body {
+    display:                flex;
+    flex-direction:         row;
+    height:                 100%;
+    overflow:               hidden;
+}
+
+.navbar {
+    position:               fixed;
+    z-index:                999;
+    display:                flex;
+    gap:                    var(--gap);
+    padding:                var(--gap);
+}
+
+    .navbar.blank {
+        position:               relative;
+        flex-shrink:            0;
+        opacity:                0;}
+
+    .navbar.top {
+        flex-direction:         column;
+        justify-content:        space-around;
+        align-items:            center;
+        width:                  var(--side-bar-width);
+        height:                 100%;
+        --max-width:            var(--max-percentage-width-navar);
+    }
+
+        .links { 
+            flex-grow:              1;
+            display:                flex;
+            flex-direction:         column;
+            justify-content:        flex-start;
+            gap:                    calc(var(--gap) / 2);}
+
+            .links > div {
+                align-items:                center;
+                height:                     50px;
+                padding:                    7px;}
+
+            .links a {
+                margin:                     0px;
+                text-align:                 left;}
+
+            .links .mail { height: fit-content; }
+
+
+            .links > .social-media {
+                display:                flex;
+                flex-direction:         row;
+                gap:                    calc(var(--gap) / 4);}
+
+            .links img { height: 24px; }
+
+        .navbar.top > div { width: 100%; }
+
+.wrapper {
+    flex-grow:              1;
+    width:                  0%; /* Don't know why this works, forces div to always grow */  
+    overflow-y:             auto;
+    overflow-x:             hidden;}
+
+    .primary {
+        display:                flex;
+        flex-direction:         row-reverse;
+        align-content:          space-between;
+        flex-wrap:              wrap;
+        padding:                var(--gap);
+        gap:                    var(--gap);
+        height:                 fit-content;
+        width:                  100%;}
+
+@media only all and (max-width:700px) {
+
+    /* -- Ordering -- */
+    .about                  { order: 1; }
+    .logo                   { order: 2; }
+    .lang-picker            { order: 3; }
+
+    /* -- Layout -- */
+
+    body {
+        flex-direction:     column;
+        overflow:           hidden;}
+
+    .wrapper {
+        width:              100%;
+        height:             fit-content;
+        display:            flex;
+        flex-direction:     column;
+        flex-wrap:          wrap;
+        gap:                0;
+        overflow:           auto;
+        position:           relative;}
+
+    .navbar.top {
+        flex-direction:     row;
+        justify-content:    space-around;
+        align-items:        center;
+        height:             var(--mobile-topnavbar-height);
+        gap:                var(--gap);
+        width:              100%;
+        --max-width:        80%;}
+
+    .navbar.top > .links    { display: none; }
+    .navbar.bot             { display: flex; }
+
+    .navbar.bot.blank {
+        position:           relative;
+        flex-shrink:        0;
+        opacity:            0;}
+
+    .navbar.bot {
+        display:            flex;
+        position:           fixed;
+        bottom:             0px;
+        height:             var(--mobile-botnavbar-height);
+        flex-direction:     column;
+        justify-content:    center;
+        align-content:      center;
+        width:              100%;}
+
+        .navbar.bot > div { flex-direction: row; }
+
+        .links {
+            /* Scroll mechanics */
+            margin-bottom:      -1em; /* Trick to hide visual scrollbar */
+            padding-bottom:     1em;
+            overflow-x:         auto; 
+            overflow-y:         hidden;
+            mask-image:         linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0));
+            /* Ordering */
+            justify-content:    flex-start;
+            clip-path:          content-box;
+            align-items:        flex-start;
+            flex-direction:     column;}
+
+            .links .last { margin-right: 20%; } /* Complementing visual trick by allow extra scrolling to hide previous visual trick, 100% - 80% */
+
+            .links > div{ align-items: center;}
+}