Transfer to git

2026-02-03 19:37:38 -03:00
commit 35d8517e56
137 changed files with 5817 additions and 0 deletions
--- a/css/main/layouts/mobile.css
+++ b/css/main/layouts/mobile.css
@@ -0,0 +1,149 @@
+/* RESPONSIVE DESIGN, MOBILE */
+
+@media only all and (max-width:700px){
+    /* ------------- Order ------------- */
+    .blinkies.one           { order: 0; }
+    .main                   { order: 1; }
+    .articles               { order: 2; }
+    .chat-webrings          { order: 3; }
+    .verticalscroll         { order: 4; }
+
+    /* -------- Display changes ---------- */
+    .blinkies.two           { display: none;  }
+    .verticalscroll         { display: flex;  }
+    .scroll_below-clip-box  { display: block; }
+
+    .navbar.bot > .about, .navbar.bot > .logo, .navbar.bot > .lang-picker { display: none; }
+
+    /* Decoration */
+
+    #try_hovering--blinkie  { display: none;     }
+    #try_tapping--blinkie   { display: block; }
+
+    /* ------------- Layout ------------- */
+
+    .primary {
+        width:              calc(100% - var(--scrolls-height) - var(--gap) * 2);
+        height:             fit-content;
+        flex-direction:     column;
+        padding-right:      0;}
+
+        .primary > * {
+            width:              100%;}
+
+            .main {
+                height:             fit-content;
+                flex-grow:          1;
+                flex-basis:         auto;}
+        
+    .verticalscroll {
+        position:           fixed;
+        right:              0; /* There is a slight inconsistency with this, as scrollbar width isn't considered with fixed, but the blank version does contemplate, creating a gap wider than expected */
+        margin:             var(--gap);
+        justify-content:    center;
+        height:             calc(100% - var(--mobile-botnavbar-height) - var(--mobile-topnavbar-height) - var(--gap) * 2);
+        width:              var(--scrolls-height);
+        overflow:           hidden;}
+
+    .verticalscroll.blank {
+        height:             100%;
+        position:           relative;
+        opacity:            0;}
+        
+        .vertical-scroll-wrapper {
+            height:             fit-content;}
+
+            .verticalscroll .clip-box {
+                position:           absolute;
+                top:                0;
+                left:               0; 
+                right:              0;
+                bottom:             0;
+                height:             fit-content;
+                display:            flex;
+                justify-content:    center;}
+
+            .verticalscroll .auto-scroll{
+                display:            flex;
+                flex-direction:     column;}
+
+            .verticalscroll p {
+                writing-mode:       vertical-lr;
+                text-orientation:   sideways;
+                text-wrap:          nowrap;}
+
+        .webrings {
+            gap:                var(--blinkies-gap);
+            height:             var(--webrings-mobile-height);
+            flex-shrink:        0;
+            padding-top:        0;
+            padding-bottom:     0;}
+
+            .webrings .clip-box {
+                align-content:      center;}
+
+            .webrings .auto-scroll {
+                flex-direction:     row;
+                animation-name:     scroll-webring-mobile;}
+
+                .webrings .scroll_one, .webrings .scroll_two {
+                    flex-direction:     row;}
+
+                .webrings .auto-scroll > * > div img {
+                    height: 60px;
+                    width: auto;}
+
+    .scroll_below-clip-box {
+        position:           absolute;
+        bottom:             0;
+        top:                50px;
+        width:              100%;
+        height:             100%;
+        pointer-events:     none;
+        clip-path:          border-box;}
+
+        .scroll_below {
+            position:           fixed;
+            left:               0px;
+            bottom:             var(--mobile-botnavbar-height);
+            margin-bottom:      0px;
+            height:             fit-content;
+            width:              fit-content;
+            padding-left:       1em;
+            padding-right:      1em;
+            text-align:         center;}
+
+    /* ----------- Animation ----------- */
+    
+    /* Blinkies */
+    .blinkies.one .auto-scroll {
+        animation-duration:     20s;
+        animation-direction:    reverse;}
+
+    /* Webrings */
+    .webrings .clip-box {
+        height:                 100%;
+        width:                  100%;}
+
+    @keyframes scroll-webring-mobile {
+        from                    {transform: translateX(calc(-50%));}
+        to                      {transform: translateX(0%);}}
+
+    /* Vertical scroll text */
+    .verticalscroll .auto-scroll {
+        animation-name:             scroll-vertical;
+        animation-direction:        reverse;
+        animation-duration:         20s;}
+
+    @keyframes scroll-vertical {
+        from                        {transform: translateY(calc(-50%));}
+        to                          {transform: translateY(0%);}}
+
+    /* Opacity enhancements */
+    .webrings .clip-box{
+    mask-image:             linear-gradient(to right, 
+                                            rgba(0,0,0,0) 0%, 
+                                            rgba(0,0,0,1) 5%, 
+                                            rgba(0,0,0,1) 95%, 
+                                            rgba(0,0,0,0) 100%);}
+}