Progress on auth handling

assets/common.css

@@ -49,29 +49,78 @@
     padding-bottom: 3em;
 }
 
-.gap-1 > *
+.flex
+{
+    display: flex;
+}
+.block
+{
+    display: block;
+}
+.inline
+{
+    display: inline;
+}
+.hidden
+{
+    display: none;
+}
+.row
+{
+    display: flex;
+    flex-direction: row;
+}
+.column
+{
+    display: flex;
+    flex-direction: column;
+}
+.gapx-1 > *
 {
     margin-left: .4em;
     margin-right: .4em;
 }
-.gap-1 > *:first-child, .gap-2 > *:first-child, .gap-3 > *:first-child
+.gapx-1 > *:first-child, .gapx-2 > *:first-child, .gapx-3 > *:first-child
 {
     margin-left: 0;
 }
-.gap-1 > *:last-child, .gap-2 > *:last-child, .gap-3 > *:last-child
+.gapx-1 > *:last-child, .gapx-2 > *:last-child, .gapx-3 > *:last-child
 {
     margin-right: 0;
 }
-.gap-2 > *
+.gapx-2 > *
 {
     margin-left: .8em;
     margin-right: .8em;
 }
-.gap-3 > *
+.gapx-3 > *
 {
     margin-left: 1.2em;
     margin-right: 1.2em;
 }
+.gapy-1 > *
+{
+    margin-top: .4em;
+    margin-bottom: .4em;
+}
+.gapy-1 > *:first-child, .gapy-2 > *:first-child, .gapy-3 > *:first-child
+{
+    margin-top: 0;
+}
+.gapy-1 > *:last-child, .gapy-2 > *:last-child, .gapy-3 > *:last-child
+{
+    margin-bottom: 0;
+}
+.gapy-2 > *
+{
+    margin-top: .8em;
+    margin-bottom: .8em;
+}
+.gapy-3 > *
+{
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+}
 
 html.dark-mode .dark-hidden {
     display: none;
@@ -100,4 +149,24 @@ html.light-mode .light-block {
 }
 .align-stretch {
     align-items: stretch;
+}
+
+@media screen and (max-width: 750px) {
+    .mobile-bigger {
+        flex: 3 1 0 !important;
+    }
+    .mobile-hidden {
+        display: none !important;
+    }
+    .mobile-block {
+        display: inherit !important;
+    }
+}
+@media screen and (min-width: 750px) {
+    .desktop-hidden {
+        display: none !important;
+    }
+    .desktop-block {
+        display: inherit !important;
+    }
 }

assets/global.css

@@ -4277,20 +4277,35 @@ body {
     object-fit: contain;
 }
 
-.site-nav-bar-text {
-    color: var(--site-name-color);
-    cursor: pointer;
-    font-size: var(--site-name-size);
-    font-weight: var(--site-name-weight);
-    flex: 1 0 0;
-    text-decoration: none;
-    position: relative;
-    display: flex;
-    align-items: center;
-}
+@media screen and (min-width: 750px) 
+{
+    .site-nav-bar-text {
+        color: var(--site-name-color);
+        cursor: pointer;
+        font-size: var(--site-name-size);
+        font-weight: var(--site-name-weight);
+        flex: 1 0 0;
+        text-decoration: none;
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
 
-.site-nav-bar-text:hover {
-    color: var(--site-name-color-hover);
+    .site-nav-bar-text:hover {
+        color: var(--site-name-color-hover);
+    }
+}
+@media screen and (max-width: 750px)
+{
+    .site-body-left-column-inner .site-nav-bar-text {
+        color: var(--site-name-color);
+        padding: .5em 0;
+        font-size: var(--site-name-size);
+        font-weight: var(--nav-parent-item-weight);
+        line-height: var(--line-height-normal);
+        text-decoration: none;
+        display: block;
+    }
 }
 
 .extra-title {
@@ -4978,14 +4993,16 @@ body {
     justify-content: end;
 }
 
-.site-nav-bar-text.mod-active:after {
-    content: "";
-    background-color: var(--nav-item-border-color-active);
-    height: 3px;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: calc(-0.5em + 2px);
+@media screen and (min-width: 750px) {
+    .site-nav-bar-text.mod-active:after {
+        content: "";
+        background-color: var(--nav-item-border-color-active);
+        height: 3px;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: calc(-0.5em + 2px);
+    }
 }
 
 .site-login {