More css reorg

Split out some separation of concerns:
- color
- font/typography
- icon/emoji related
- z-indexes
- the rest (mostly layout)

wwwroot/css/color.css

@@ -0,0 +1,41 @@
+/* Colours */
+:root {
+  --background: var(--gray-8);
+  --shadow: var(--black);
+}
+
+body.dark {
+  --background: var(--gray-8);
+  --on-background: var(--gray-1);
+  --surface: var(--gray-9);
+  --on-surface: var(--gray-4);
+}
+
+.author { color: inherit }
+
+.status nav, .status nav .chip { color: var(--gray-7) }
+
+.avatar::after {
+  background-color: var(--surface-container-low);
+  border: 1px dashed var(--gray-4)
+}
+
+article.ephemeral { border: 2px dashed var(--gray-7) }
+
+article.now {
+  background-color: var(--green-2);
+  color: var(--black)
+}
+
+a.row.indent { border-left: 1px solid var(--outline) }
+
+.markdown-editor .editor-preview { background: var(--surface) }
+
+menu > details > a:is(:hover,:focus,.active), menu > details > summary:is(:hover,:focus,.active) {
+  background-color: var(--active)
+}
+
+#advanced :is(.field.textarea, textarea), .EasyMDEContainer {
+  background-color: #212121;
+  color: #eff
+}

wwwroot/css/icon.css

@@ -0,0 +1,48 @@
+/* Icons and emoji */
+:root { --emoji-font: TwemojiCountryFlags, SegoeUIEmoji, 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol' }
+
+.animated[data-emoji|=🫥] { content: url(/vendor/fluent-emoji/1fae5/animated.png) }
+
+.fa-seedling { color: var(--green-9) !important }
+.fa-message-smile { color: var(--blue-4) !important }
+.fa-images { color: var(--yellow-6) !important }
+.fa-id-card { color: var(--pink-4) !important }
+.fa-comment-dots { color: var(--gray-6) !important }
+
+i.tiny { ---size: 1em }
+
+:is(h1,h2,h3,h4,h5,h6) i {
+  ---size: 1em;
+  margin-right: .3em;
+  &.fa-at, &:only-child {
+    margin-right: 0;
+    inline-size: auto
+  }
+}
+
+h1 i:only-child { margin-block-start: 1rem }
+
+#new-status-emoji, #status-emoji, :is(.status,.pic) .emoji {
+  margin-bottom: auto;
+  inline-size: 3.5rem;
+  block-size: 3.5rem;
+  font-size: 3.1rem;
+  line-height: 3.5rem;
+  text-indent: -6px
+}
+
+:not(#feed) > .pic .emoji { display: none }
+.chip i { border-radius: 0 }
+
+i[class*=fa-at] {
+  vertical-align: unset;
+  font-size: .75em
+}
+
+.editor-toolbar :is(.easymde-dropdown, button) { color: inherit }
+
+.editor-toolbar i.separator {
+  ---size: unset;
+  opacity: .25;
+  border-radius: 0
+}

wwwroot/css/style.css

@@ -2,67 +2,25 @@
 @import url(../vendor/color.css);
 @import url(../vendor/type.css);
 
-.animated[data-emoji|=🫥] { content: url(/vendor/fluent-emoji/1fae5/animated.png) }
+@import url(icon.css);
+@import url(type.css);
+@import url(color.css);
+@import url(z.css);
 
 :root {
-  --emoji-font: TwemojiCountryFlags, SegoeUIEmoji, 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol';
-  --font: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif, var(--emoji-font);
   --spacing: 1.5rem;
-  --background: var(--gray-8);
-  --shadow: var(--black);
   --max-article-size: 75rem;
 }
 
-body.dark {
+main {
-  --background: var(--gray-8);
+  position: relative; 
-  --on-background: var(--gray-1);
+  overflow-x: hidden;
-  --surface: var(--gray-9);
+  overflow-y: auto
-  --on-surface: var(--gray-4);
 }
 
-body, html { font-family: var(--font) }
-
-.address, .author, .honey, .page-heading {
-  font-family: "VC Honey Deck",var(--font)
-}
-
-body { font-size: 1.2em }
-
-main { position: relative }
-
 a:not(.author) { text-decoration: underline }
 :is(nav, .tabs, #directory) a { text-decoration: none }
 
-:is(h1,h2,h3,h4,h5,h6) i, i.tiny {
-  ---size: 1em;
-}
-
-:is(h1,h2,h3,h4,h5,h6) i {
-  margin-right: .3em;
-  &.fa-at, &:only-child {
-    margin-right: 0;
-    inline-size: auto
-  }
-}
-
-#bio :is(h1,h2,h3,h4,h5,h6) {
-  text-align: center;
-  display: block
-}
-
-h1 i:only-child {
-  margin-block-start: 1rem
-}
-
-li, p {
-  line-height: 160%
-}
-
-.author {
-  color: inherit;
-  font-size: 1.2em
-}
-
 img {
   max-inline-size: 100%;
   max-block-size: 100%;
@@ -70,25 +28,19 @@ img {
   margin: 0 auto
 }
 
-#new-status-emoji, #status-emoji, :is(.status,.pic) .emoji {
+.avatar { position: relative }
-  margin-bottom: auto;
-  inline-size: 3.5rem;
-  block-size: 3.5rem;
-  font-size: 3.1rem;
-  line-height: 3.5rem;
-  text-indent: -6px
-}
 
-:not(#feed) > .pic .emoji {
+.avatar::after {
-  display: none
+  content: "";
-}
+  position: absolute;
-
+  left: 0;
-.chip i {
+  right: 0;
-  border-radius: 0
+  top: 0;
-}
+  bottom: 0;
-
+  background-size: contain;
-.status nav, .status nav .chip {
+  background-repeat: no-repeat;
-  color: var(--gray-7)
+  background-position: center bottom;
+  border-radius: 50%
 }
 
 .profile.avatar {
@@ -97,8 +49,9 @@ img {
   max-inline-size: 10rem
 }
 
-nav header {
+#bio :is(h1,h2,h3,h4,h5,h6) {
-  z-index: 101
+  text-align: center;
+  display: block
 }
 
 :is(button,.button).tiny {
@@ -107,10 +60,7 @@ nav header {
   border-radius: .75rem
 }
 
-nav.bottom.s:not(.drawer) > a:not(.button,.chip) {
+nav.bottom.s:not(.drawer) > a:not(.button,.chip) { inline-size: unset }
-  inline-size: unset
-}
-
 nav.bottom.s:not(.drawer) :is(button,.button) > menu {
   position: fixed;
   margin-top: auto;
@@ -119,21 +69,24 @@ nav.bottom.s:not(.drawer) :is(button,.button) > menu {
   margin-right: 0;
   inline-size: auto;
   min-inline-size: 12rem;
-  z-index: 100;
   transform: none !important;
   inset: auto 0 0 auto
 }
 
-i[class*=fa-at] {
-  vertical-align: unset;
-  font-size: .75em
-}
-
 .fab {
   position: fixed;
   right: 2rem;
-  bottom: 2rem;
+  bottom: 2rem
-  z-index: 1
+}
+
+@media only screen and (max-width:992px) {
+  .fab {
+    bottom: 7rem
+  }
+
+  :has(>main.responsive) {
+    max-block-size: calc(100vh - 5rem)
+  }
 }
 
 dialog {
@@ -149,47 +102,6 @@ dialog {
   padding: 0
 }
 
-@media only screen and (max-width:992px) {
-  .fab {
-    bottom: 7rem
-  }
-
-  :has(>main.responsive) {
-    max-block-size: calc(100vh - 5rem)
-  }
-}
-
-.avatar {
-  position: relative
-}
-
-  .avatar::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background-color: var(--surface-container-low);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center bottom;
-    border-radius: 50%;
-    border: 1px dashed var(--gray-4);
-    z-index: 1
-  }
-
-article.ephemeral {
-  max-width: 50rem;
-  border: 2px dashed var(--gray-7)
-}
-
-#pics article {
-  max-width: 50rem;
-  margin: 1rem auto;
-  text-align: center
-}
-
 .card-grid {
   display: flex;
   flex-direction: row;
@@ -197,18 +109,31 @@ article.ephemeral {
   gap: .5rem;
   justify-content: space-between
 }
+.card-grid > * { flex-grow: 1; flex-shrink: 1 }
 
-#pics article > :not(:first-child) {
+#now-garden { gap: 1rem }
+#now-garden > :not(.now) { position: absolute }
+
+article {
+  overflow-wrap: anywhere;
+  width: 100%;
+  max-width: var(--max-article-size);
+  margin-inline: auto
+}
+
+article.now { margin: 0; width: auto }
+article.theme { height: 10rem; width: 15rem }
+article.ephemeral { max-width: 50rem }
+
+article.pic {
+  max-width: 50rem;
+  margin: 1rem auto;
   text-align: left
 }
+article.pic > img:first-child { text-align: center }
+article.pic nav { flex-wrap: wrap }
 
-#pics article nav {
+#pics.card-grid article { max-width: 24rem }
-  flex-wrap: wrap
-}
-
-#pics.card-grid article {
-  max-width: 24rem
-}
 
 @media only screen and (max-width:895px) {
   #pics.card-grid article {
@@ -216,23 +141,6 @@ article.ephemeral {
   }
 }
 
-#pics article > img:first-child {
-  text-align: center
-}
-
-#now-garden {
-  gap: 1rem
-}
-
-  #now-garden > :not(.now) {
-    position: absolute
-  }
-
-.card-grid > * {
-  flex-grow: 1;
-  flex-shrink: 1
-}
-
 iframe {
   width: 100%;
   flex-grow: 1;
@@ -241,56 +149,28 @@ iframe {
   padding: 0
 }
 
-.now {
-  background-color: var(--green-2);
-  color: var(--black)
-}
-
 .page-container, .page-container > .page.active, main {
   flex-grow: 1;
   display: flex;
   flex-direction: column
 }
 
-main {
+#info :is(ul,ol) { margin-left: var(--spacing) }
-  overflow-x: hidden;
+#info :is(p,ul,ol) { margin-bottom: var(--spacing) }
-  overflow-y: auto
+
+#directory { column-width: 14rem }
+
+article#directory ul { list-style: none }
+
+nav label:is(.checkbox,.radio,.switch) {
+  white-space: break-spaces;
+  flex: 1 1 100%
 }
 
-.hover {
+menu > details .row, menu > li > details .row {
-  z-index: 1
+  padding: .5rem 1rem;
-}
+  min-block-size: 3rem;
-
+  flex: 1
-#info :is(ul,ol) {
-  margin-left: var(--spacing)
-}
-
-#info :is(p,ul,ol) {
-  margin-bottom: var(--spacing)
-}
-
-.fa-seedling {
-  color: var(--green-9) !important
-}
-
-.fa-message-smile {
-  color: var(--blue-4) !important
-}
-
-.fa-images {
-  color: var(--yellow-6) !important
-}
-
-.fa-id-card {
-  color: var(--pink-4) !important
-}
-
-.fa-comment-dots {
-  color: var(--gray-6) !important
-}
-
-nav.bottom.s :is(small,.label) {
-  font-size: .75rem
 }
 
 .row p {
@@ -298,10 +178,7 @@ nav.bottom.s :is(small,.label) {
   max-width: 100%
 }
 
-a.row.indent {
+a.row.indent { margin-left: 1rem }
-  margin-left: 1rem;
-  border-left: 1px solid var(--outline)
-}
 
 :is(.circle,.square).large.small:not(i,img,video,svg) {
   block-size: 2rem;
@@ -335,92 +212,22 @@ a.row.indent {
   }
 }
 
-#directory {
-  column-width: 14rem
-}
-
-  #directory a {
-    font-size: 1.1rem;
-  }
-
-article#directory ul {
-  list-style: none
-}
-
-#directoryIndex a {
-  font-size: 1.5rem
-}
-
-.editor-toolbar .easymde-dropdown, .editor-toolbar button {
-  color: inherit
-}
-
-.editor-toolbar i.separator {
-  ---size: unset;
-  opacity: .25;
-  border-radius: 0
-}
-
-.markdown-editor .editor-preview {
-  background: var(--surface)
-}
-
 .markdown-editor {
   flex: auto;
   display: flex;
   flex-direction: column
 }
 
-  .markdown-editor + nav, .markdown-editor > .EasyMDEContainer > .editor-toolbar {
+.markdown-editor + nav, .markdown-editor > .EasyMDEContainer > .editor-toolbar {
   flex: none
-  }
+}
 
-  .markdown-editor > .EasyMDEContainer {
+.markdown-editor > .EasyMDEContainer {
   flex: 1;
   display: flex;
   flex-direction: column
-  }
+}
 
-    .markdown-editor > .EasyMDEContainer > .CodeMirror {
+.markdown-editor > .EasyMDEContainer > .CodeMirror {
   flex: auto
-    }
-
-article {
-  overflow-wrap: anywhere;
-  width: 100%;
-  max-width: var(--max-article-size);
-  margin-inline: auto
-}
-
-nav label:is(.checkbox,.radio,.switch) {
-  white-space: break-spaces;
-  flex: 1 1 100%
-}
-
-menu > details .row, menu > li > details .row {
-  padding: .5rem 1rem;
-  min-block-size: 3rem;
-  flex: 1
-}
-
-menu > details > a:is(:hover,:focus,.active), menu > details > summary:is(:hover,:focus,.active) {
-  background-color: var(--active)
-}
-
-article.now {
-  margin: 0;
-  width: auto
-}
-
-#advanced .field.textarea, #advanced textarea {
-  background-color: #212121;
-  color: #eff;
-}
-#advanced .field.textarea, #advanced textarea, .EasyMDEContainer {
-  font-family: 'MD IO 0.4', monospace
-}
-
-article.theme {
-  height: 10rem;
-  width: 15rem
 }

wwwroot/css/type.css

@@ -0,0 +1,16 @@
+/* typography and fonts */
+
+:root { --font: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif, var(--emoji-font) }
+
+body, html { font-family: var(--font) }
+body { font-size: 1.2em }
+
+.address, .author, .honey, .page-heading { font-family: "VC Honey Deck",var(--font) }
+
+#advanced :is(.field.textarea, textarea), .EasyMDEContainer { font-family: 'MD IO 0.4', monospace, var(--emoji-font) }
+
+li, p { line-height: 160% }
+.author { font-size: 1.2em }
+nav.bottom.s :is(small,.label) { font-size: .75rem }
+#directory a { font-size: 1.1rem }
+#directoryIndex a { font-size: 1.5rem }

wwwroot/css/z.css

@@ -0,0 +1,11 @@
+/* Anything related to z-indexes */
+
+nav header { z-index: 101 }
+
+nav.bottom.s:not(.drawer) :is(button,.button) > menu { z-index: 100 }
+
+.fab { z-index: 1 }
+
+.avatar::after { z-index: 1 }
+
+.hover { z-index: 1 }