Move visualiser to explorer folder and start working on account

assets/common.css

@@ -0,0 +1,50 @@
+.ps-1
+{
+    padding-left: 1em;
+}
+.pe-1
+{
+    padding-right: 1em;
+}
+.pt-1
+{
+    padding-top: 1em;
+}
+.pb-1
+{
+    padding-bottom: 1em;
+}
+
+.ps-2
+{
+    padding-left: 2em;
+}
+.pe-2
+{
+    padding-right: 2em;
+}
+.pt-2
+{
+    padding-top: 2em;
+}
+.pb-2
+{
+    padding-bottom: 2em;
+}
+
+.ps-3
+{
+    padding-left: 3em;
+}
+.pe-3
+{
+    padding-right: 3em;
+}
+.pt-3
+{
+    padding-top: 3em;
+}
+.pb-3
+{
+    padding-bottom: 3em;
+}

assets/global.css

@@ -3316,9 +3316,8 @@ input[type='number'] {
     height: 18px;
 }
 
-.site-header .search-view-outer {
-    width: 50%;
-    max-width: 240px;
+.site-nav-bar .search-view-outer {
+    flex: 1 1 0;
     order: 1;
 }
 
@@ -3332,7 +3331,7 @@ input[type='number'] {
     margin: 0;
     width: 0;
     flex-grow: 1;
-    padding-left: 30px;
+    padding-left: 14px;
 }
 
 .search-view-container .search-bar.has-no-results {
@@ -3463,7 +3462,6 @@ input[type='number'] {
 }
 
 .site-body-left-column-site-theme-toggle {
-    padding: 0 0 12px 0;
     display: flex;
     position: relative;
 }
@@ -3800,10 +3798,6 @@ body {
     -webkit-user-select: none;
 }
 
-.published-container.has-navigation .site-header {
-    display: none;
-}
-
 .published-container .markdown-preview-view {
     user-select: text;
 }
@@ -3852,11 +3846,11 @@ body {
 }
 
 @media screen and (min-width: 750px) {
-    .published-container.is-readable-line-width:not(.has-navigation).published-container.is-readable-line-width:not(.has-graph).published-container.is-readable-line-width:not(.has-outline) .site-header {
+    .published-container.is-readable-line-width:not(.has-navigation).published-container.is-readable-line-width:not(.has-graph).published-container.is-readable-line-width:not(.has-outline) .site-nav-bar {
         width: var(--page-width);
         margin: 0 auto;
         border-bottom: 0;
-        padding: 24px 48px;
+        padding: .5em 3em;
     }
 
     .published-container.is-readable-line-width:not(.has-navigation).published-container.is-readable-line-width:not(.has-graph).published-container.is-readable-line-width:not(.has-outline) .site-body-center-column {
@@ -3926,8 +3920,7 @@ body {
 /* Nav view */
 .nav-view-outer {
     overflow: auto;
-    padding-bottom: 32px;
-    padding-top: 10px;
+    padding: 12px 18px 0 36px;
     scrollbar-gutter: stable;
 }
 
@@ -4147,7 +4140,6 @@ body {
     width: var(--sidebar-left-width);
     flex: 0 0 var(--sidebar-left-width);
     min-width: var(--sidebar-left-width);
-    padding: 32px 18px 0 36px;
     position: relative;
     display: flex;
     background-color: var(--sidebar-left-background);
@@ -4192,19 +4184,18 @@ body {
     object-fit: contain;
 }
 
-.site-body-left-column-site-name {
+.site-name {
     color: var(--site-name-color);
     font-size: var(--site-name-size);
     font-weight: var(--site-name-weight);
     z-index: 1;
     cursor: pointer;
     line-height: 1.2;
-    padding: 4px 32px 32px 0;
     text-decoration: none;
 }
 
 @media (hover: hover) {
-    .site-body-left-column-site-name:hover {
+    .site-name:hover {
         color: var(--site-name-color-hover);
         text-decoration: none;
     }
@@ -4277,26 +4268,15 @@ body {
     }
 }
 
-.site-header {
-    display: flex;
-    font-size: var(--site-name-size);
-    line-height: 1.3;
-    height: var(--header-height);
-    padding: 12px 18px;
-    border-bottom: 1px solid var(--background-modifier-border);
-    align-items: center;
-    flex: 0 0 auto;
-}
-
-.site-header .clickable-icon {
+.site-nav-bar .clickable-icon {
     display: none;
 }
 
-.site-header .clickable-icon svg {
+.site-nav-bar .clickable-icon svg {
     vertical-align: middle;
 }
 
-.site-header-logo img {
+.site-nav-bar-logo img {
     border-radius: var(--logo-radius);
     max-height: calc(var(--header-height) - 10px);
     width: var(--logo-width);
@@ -4306,7 +4286,7 @@ body {
     object-fit: contain;
 }
 
-.site-header-text {
+.site-nav-bar-text {
     color: var(--site-name-color);
     cursor: pointer;
     font-size: var(--site-name-size);
@@ -4315,7 +4295,7 @@ body {
     text-decoration: none;
 }
 
-.site-header-text:hover {
+.site-nav-bar-text:hover {
     color: var(--site-name-color-hover);
 }
 
@@ -4780,7 +4760,7 @@ body {
         z-index: -1;
     }
 
-    .published-container.has-navigation .site-header {
+    .published-container.has-navigation .site-nav-bar {
         display: flex;
         z-index: 90;
         background-color: var(--header-background);
@@ -4789,7 +4769,7 @@ body {
         /* Hamburger menu icon */
     }
 
-    .published-container.has-navigation .site-header .clickable-icon {
+    .published-container.has-navigation .site-nav-bar .clickable-icon {
         display: flex;
         align-items: center;
         color: var(--site-menu-icon-color);
@@ -4798,7 +4778,7 @@ body {
         margin-right: 6px;
     }
 
-    .published-container.has-navigation .site-header .clickable-icon svg {
+    .published-container.has-navigation .site-nav-bar .clickable-icon svg {
         width: var(--site-menu-icon-size);
         height: var(--site-menu-icon-size);
         stroke-width: 1.2px;
@@ -4985,3 +4965,21 @@ body {
 .callout.is-collapsed .fold {
     transform: rotate(-90deg);
 }
+
+.site-nav-bar {
+    border-bottom: 1px solid var(--background-modifier-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .5em 3em;
+}
+
+.site-nav-bar > div {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: row;
+}
+
+.site-nav-bar > div:last-child {
+    justify-content: end;
+}