From 1bf7e74a5a8d55d34d1bb54db3d1281684e89d81 Mon Sep 17 00:00:00 2001
From: Gordon Pedersen <death.au@death.id.au>
Date: Fri, 12 Jul 2024 17:08:22 +1000
Subject: [PATCH] (in progress) cleaning up css

---
 Components/Pages/Now.razor          |   2 +-
 Components/StatusCardSkeleton.razor |  16 -
 Neighbourhood.omg.lol.csproj        |   2 +-
 wwwroot/css/style.css               | 450 ++++++++++++----------------
 4 files changed, 186 insertions(+), 284 deletions(-)
 delete mode 100644 Components/StatusCardSkeleton.razor

diff --git a/Components/Pages/Now.razor b/Components/Pages/Now.razor
index 16342b8..a9a2534 100644
--- a/Components/Pages/Now.razor
+++ b/Components/Pages/Now.razor
@@ -16,7 +16,7 @@
       <article class="now">
         <nav>
           <a class="author" href="/person/@now.Address#now">
-            <h6><i class="fa-duotone fa-seedling"></i> @now.Address</h6>
+            <h6><i class="fa-duotone fa-seedling"></i><span>@now.Address</span></h6>
           </a>
         </nav>
         <nav>
diff --git a/Components/StatusCardSkeleton.razor b/Components/StatusCardSkeleton.razor
deleted file mode 100644
index 790af3d..0000000
--- a/Components/StatusCardSkeleton.razor
+++ /dev/null
@@ -1,16 +0,0 @@
-<article class="status">
-  <div class="row">
-    <div class="large emoji skeleton round" />
-    <div class="max">
-      <span class="author skeleton"> </span>
-      <p class="skeleton"> </p>
-    </div>
-  </div>
-  <nav>
-    <span class="chip transparent-border skeleton"> </span>
-  </nav>
-</article>
-
-@code {
-
-}
diff --git a/Neighbourhood.omg.lol.csproj b/Neighbourhood.omg.lol.csproj
index 57f340e..208b5c4 100644
--- a/Neighbourhood.omg.lol.csproj
+++ b/Neighbourhood.omg.lol.csproj
@@ -57,7 +57,7 @@
       <ApplicationId>au.death.lol.omg.neighbourhood</ApplicationId>
       <ApplicationDisplayVersion>0.9.7</ApplicationDisplayVersion>
       <AndroidKeyStore>True</AndroidKeyStore>
-      <AndroidSigningKeyStore>D:\Neighbourhood.omg.lol\neighbourhood.omg.lol.keystore</AndroidSigningKeyStore>
+      <AndroidSigningKeyStore>D:\_assets\neighbourhood.omg.lol\neighbourhood.omg.lol.keystore</AndroidSigningKeyStore>
       <ApplicationVersion>7</ApplicationVersion>
       <AndroidSigningStorePass>a!zobzizl</AndroidSigningStorePass>
       <AndroidSigningKeyAlias>neighbourhood.omg.lol</AndroidSigningKeyAlias>
diff --git a/wwwroot/css/style.css b/wwwroot/css/style.css
index fc45874..b86dbf5 100644
--- a/wwwroot/css/style.css
+++ b/wwwroot/css/style.css
@@ -2,21 +2,14 @@
 @import url(../vendor/color.css);
 @import url(../vendor/type.css);
 
-
-.animated[data-emoji|="🫥"] { content: url(/vendor/fluent-emoji/1fae5/animated.png); }
-
+.animated[data-emoji|=🫥] { content: url(/vendor/fluent-emoji/1fae5/animated.png) }
 
 :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);
-  --prami-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path fill="%23FF6BAE" stroke="none" d="M250 450C211.612 450 173.225 435.354 143.934 406.066L43.9346 306.066C-14.6446 247.487 -14.6446 152.513 43.9346 93.9341C100.533 37.3361 191.104 35.421 250 88.1907C308.898 35.4229 399.47 37.3379 456.066 93.9341C514.645 152.513 514.645 247.487 456.066 306.066L356.066 406.066C326.778 435.354 288.389 450 250 450" /><path fill="none" stroke="%23471036" stroke-width="19" stroke-linecap="round" d="M208.749 223.817C227.625 254.619 272.376 254.619 291.251 223.817" /><circle fill="%23471036" cx="291.3" cy="176.6" r="17.75" /><circle fill="%23471036" cx="208.6" cy="176.6" r="17.75" /><circle fill="%23E24097" cx="120.3" cy="212" r="59.2" /><circle fill="%23E24097" cx="379.7" cy="212" r="59.2" /></svg>');
   --spacing: 1.5rem;
-  --radius: .75em;
-  --small-radius: .13em;
-  --color: var(--gray-1);
   --background: var(--gray-8);
   --shadow: var(--black);
-  --button-shadow: var(--gray-7);
   --max-article-size: 75rem;
 }
 
@@ -25,245 +18,176 @@ body.dark {
   --on-background: var(--gray-1);
   --surface: var(--gray-9);
   --on-surface: var(--gray-4);
- /* --surface-variant: #49454e;
-  --on-surface-variant: #cac4cf;
-  --outline: #948f99;
-  --outline-variant: #49454e;
-  --shadow: #000000;
-  --scrim: #000000;
-  --inverse-surface: #e6e1e6;
-  --inverse-on-surface: #313033;
-  --inverse-primary: #6750a4;
-  --surface-dim: #141316;
-  --surface-bright: #3a383c;
-  --surface-container-lowest: #0f0e11;
-  --surface-container-low: #1c1b1e;
-  --surface-container: #201f22;
-  --surface-container-high: #2b292d;
-  --surface-container-highest: #363438;*/
 }
 
-html, body {
-  font-family: var(--font);
+body, html { font-family: var(--font) }
+
+.address, .author, .honey, .page-heading {
+  font-family: "VC Honey Deck",var(--font)
 }
 
-body {
-  font-size: 1.2em;
-}
+body { font-size: 1.2em }
 
-a {
-  text-decoration: underline;
-}
+main { position: relative }
 
-:is(h1, h2, h3, h4, h5, h6) i {
+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;
-  margin-right: 0.3em;
 }
 
-:is(nav) a, .author {
-  text-decoration: none;
+:is(h1,h2,h3,h4,h5,h6) i {
+  margin-right: .3em;
+  &.fa-at, &:only-child {
+    margin-right: 0;
+    inline-size: auto
+  }
 }
 
-p, li {
-  line-height: 160%;
+#bio :is(h1,h2,h3,h4,h5,h6) {
+  text-align: center;
+  display: block
 }
 
-.author, .address, .page-heading, .honey {
-  font-family: 'VC Honey Deck', var(--font);
+h1 i:only-child {
+  margin-block-start: 1rem
 }
+
+li, p {
+  line-height: 160%
+}
+
 .author {
   color: inherit;
-  font-size: 1.2em;
+  font-size: 1.2em
 }
 
 img {
   max-inline-size: 100%;
   max-block-size: 100%;
   max-width: 100%;
-  margin: 0 auto;
+  margin: 0 auto
 }
 
-:is(.status,.pic) .emoji {
-  margin-bottom: auto;
-  inline-size: 5.5rem;
-  block-size: 5.5rem;
-  font-size: 5rem;
-  line-height: 5.5rem;
-  text-indent: -10px;
-}
-
-:is(.status,.pic) .emoji, #status-emoji, #new-status-emoji {
+#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;
+  text-indent: -6px
 }
 
-:not(#feed)>.pic .emoji{
-  display:none;
-}
-
-:is(h1, h2, h3, h4, h5, h6) :is(i.fa-at, i:only-child){
-  margin-right: 0;
-  inline-size: auto;
-}
-
-h1 i:only-child {
-  margin-block-start: 1rem;
+:not(#feed) > .pic .emoji {
+  display: none
 }
 
 .chip i {
-  border-radius: 0;
+  border-radius: 0
 }
 
-.status nav .chip, .status nav {
-  color: var(--gray-7);
+.status nav, .status nav .chip {
+  color: var(--gray-7)
 }
 
 .profile.avatar {
   border-radius: .75rem;
   max-block-size: 10rem;
-  max-inline-size: 10rem;
-}
-
-#bio :is(h1, h2, h3, h4, h5, h6) {
-  text-align:center;
-  display: block;
-}
-
-.skeleton {
-  animation: skeleton-loading 1s linear infinite alternate;
-  min-height: 1em;
-}
-
-@keyframes skeleton-loading {
-  0% {
-    background-color: hsl(200, 20%, 70%);
-  }
-
-  100% {
-    background-color: hsl(200, 20%, 95%);
-  }
-}
-
-.author.skeleton {
-  width: 6em;
-  display: inline-block;
-}
-
-p.skeleton {
-  width: 80%;
-}
-
-.chip.skeleton {
-  width: 10em;
-}
-
-main {
-  position: relative;
-}
-
-.skeleton-container {
-  flex:1 1 auto;
-  overflow: hidden;
+  max-inline-size: 10rem
 }
 
 nav header {
-  z-index: 101;
+  z-index: 101
 }
 
 :is(button,.button).tiny {
   block-size: 1.5rem;
-  /*max-inline-size: 1.5rem;*/
   font-size: .875rem;
-  border-radius: .75rem;
+  border-radius: .75rem
 }
 
 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;
+  margin-top: auto;
   margin-bottom: 5rem;
-  margin-left:auto;
-  margin-right:0;
+  margin-left: auto;
+  margin-right: 0;
   inline-size: auto;
   min-inline-size: 12rem;
   z-index: 100;
   transform: none !important;
-  inset: auto 0 0 auto;
+  inset: auto 0 0 auto
 }
 
 i[class*=fa-at] {
-  vertical-align:unset;
-  font-size: .75em;
+  vertical-align: unset;
+  font-size: .75em
 }
 
 .fab {
-  position:fixed;
+  position: fixed;
   right: 2rem;
   bottom: 2rem;
-  z-index: 1;
+  z-index: 1
 }
 
 dialog {
-  overflow:visible;
-  width:80%;
+  overflow: visible;
+  width: 80%
 }
 
 .invisible {
-  max-width:0px;
-  max-height:0px;
-  border: none;
-  margin:0;
-  padding:0;
+  max-width: 0;
+  max-height: 0;
+  border: 0;
+  margin: 0;
+  padding: 0
 }
 
-@media only screen and (max-width: 992px) {
+@media only screen and (max-width:992px) {
   .fab {
-    bottom: 7rem;
+    bottom: 7rem
   }
 
-  *:has(> main.responsive) {
-    /*flex-direction: row;*/
-    max-block-size: calc(100vh - 5rem);
+  :has(>main.responsive) {
+    max-block-size: calc(100vh - 5rem)
   }
 }
 
 .avatar {
-  position:relative;
+  position: relative
 }
 
-.avatar::after {
-  content: '';
-  position:absolute;
-  left:0; right:0;
-  top:0; bottom:0;
-  background-color: var(--surface-container-low);
-  /*background-image: var(--prami-svg);*/
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center bottom;
-  border-radius: 50%;
-  border: 1px dashed var(--gray-4);
-  z-index:1;
-}
+  .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);
+  border: 2px dashed var(--gray-7)
 }
 
 #pics article {
   max-width: 50rem;
-}
-
-.tabs a {
-  text-decoration:none;
+  margin: 1rem auto;
+  text-align: center
 }
 
 .card-grid {
@@ -271,238 +195,232 @@ article.ephemeral {
   flex-direction: row;
   flex-wrap: wrap;
   gap: .5rem;
-  justify-content: space-between;
+  justify-content: space-between
 }
 
-#pics article {
-  margin: 1rem auto;
-  text-align:center;
-}
-
-#pics article>:not(:first-child) {
-  text-align: left;
+#pics article > :not(:first-child) {
+  text-align: left
 }
 
 #pics article nav {
-  flex-wrap: wrap;
+  flex-wrap: wrap
 }
 
-#pics.card-grid article{
-  max-width: 24rem;
+#pics.card-grid article {
+  max-width: 24rem
 }
-@media only screen and (max-width: 895px) {
+
+@media only screen and (max-width:895px) {
   #pics.card-grid article {
-    max-width: calc(100% - 1rem);
+    max-width: calc(100% - 1rem)
   }
 }
 
 #pics article > img:first-child {
-  text-align: center;
+  text-align: center
 }
 
-#now-garden{
-  gap:1rem;
+#now-garden {
+  gap: 1rem
 }
 
-#now-garden > :not(.now) {
-  position: absolute;
-}
+  #now-garden > :not(.now) {
+    position: absolute
+  }
 
 .card-grid > * {
   flex-grow: 1;
-  flex-shrink: 1;
+  flex-shrink: 1
 }
 
-.page-container > .page.active {
-  display:flex;
-  flex-direction:column;
-  flex-grow: 1;
-}
 iframe {
-  width:100%;
+  width: 100%;
   flex-grow: 1;
-  border: none;
-  margin:0;
-  padding:0;
-
+  border: 0;
+  margin: 0;
+  padding: 0
 }
 
 .now {
   background-color: var(--green-2);
-  color: var(--black);
+  color: var(--black)
 }
 
-
-
-main, .page-container {
-  flex-grow:1;
+.page-container, .page-container > .page.active, main {
+  flex-grow: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: column
 }
 
 main {
   overflow-x: hidden;
-  overflow-y: auto;
-
+  overflow-y: auto
 }
 
 .hover {
-  z-index: 1;
+  z-index: 1
 }
 
-#info :is(ul, ol) {
-  margin-left: var(--spacing);
+#info :is(ul,ol) {
+  margin-left: var(--spacing)
 }
 
-#info :is(p, ul, ol) {
-  margin-bottom: 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: 0.75rem;
+.fa-seedling {
+  color: var(--green-9) !important
 }
 
-i.tiny {
-  ---size: 1em;
+.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 {
   white-space: normal;
-  max-width: 100%;
+  max-width: 100%
 }
 
 a.row.indent {
   margin-left: 1rem;
-  border-left: 1px solid var(--outline);
+  border-left: 1px solid var(--outline)
 }
 
 :is(.circle,.square).large.small:not(i,img,video,svg) {
   block-size: 2rem;
-  inline-size: 2rem;
+  inline-size: 2rem
 }
+
 :is(button,.button,.chip).large.small > .responsive {
-  inline-size: 2rem;
+  inline-size: 2rem
 }
 
-/* s */
-@media only screen and (max-width: 600px) {
-  .m:not(.s), .l:not(.s), .m.l:not(.s) {
-    display: none !important;
+@media only screen and (max-width:600px) {
+  .l:not(.s), .m.l:not(.s), .m:not(.s) {
+    display: none !important
   }
 }
 
-/* m */
-@media only screen and (min-width: 601px) and (max-width: 992px) {
-  .s:not(.m), .l:not(.m), .s.l:not(.m) {
-    display: none !important;
+@media only screen and (min-width:601px) and (max-width:992px) {
+  .l:not(.m), .s.l:not(.m), .s:not(.m) {
+    display: none !important
   }
 }
 
-/* l */
-@media only screen and (min-width: 993px) {
+@media only screen and (min-width:993px) {
   :is(.circle,.square).large.small:not(i,img,video,svg) {
     block-size: 3rem;
-    inline-size: 3rem;
+    inline-size: 3rem
   }
+
   :is(button,.button,.chip).large.small > .responsive {
-    inline-size: 3rem;
+    inline-size: 3rem
   }
 }
 
-#directory{
-  column-width: 14rem;
-}
-#directory a {
-  font-size: 1.1rem;
-  text-decoration: none;
+#directory {
+  column-width: 14rem
 }
 
-article#directory ul{
-  list-style:none;
+  #directory a {
+    font-size: 1.1rem;
+  }
+
+article#directory ul {
+  list-style: none
 }
 
 #directoryIndex a {
-  font-size: 1.5rem;
+  font-size: 1.5rem
 }
 
 .editor-toolbar .easymde-dropdown, .editor-toolbar button {
-  color: inherit;
+  color: inherit
 }
+
 .editor-toolbar i.separator {
   ---size: unset;
-  opacity: 0.25;
+  opacity: .25;
   border-radius: 0
 }
+
 .markdown-editor .editor-preview {
-  background: var(--surface);
+  background: var(--surface)
 }
 
 .markdown-editor {
   flex: auto;
   display: flex;
-  flex-direction:column;
+  flex-direction: column
 }
 
-.markdown-editor + nav {
-  flex: none;
-}
-.markdown-editor > .EasyMDEContainer {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
+  .markdown-editor + nav, .markdown-editor > .EasyMDEContainer > .editor-toolbar {
+    flex: none
+  }
 
-.markdown-editor > .EasyMDEContainer > .editor-toolbar{
-  flex: none;
-}
+  .markdown-editor > .EasyMDEContainer {
+    flex: 1;
+    display: flex;
+    flex-direction: column
+  }
 
-.markdown-editor > .EasyMDEContainer > .CodeMirror {
-  flex: auto;
-}
+    .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) {
+nav label:is(.checkbox,.radio,.switch) {
   white-space: break-spaces;
-  flex: 1 1 100%;
+  flex: 1 1 100%
 }
 
 menu > details .row, menu > li > details .row {
   padding: .5rem 1rem;
   min-block-size: 3rem;
-  flex: 1;
+  flex: 1
 }
 
 menu > details > a:is(:hover,:focus,.active), menu > details > summary:is(:hover,:focus,.active) {
-  background-color: var(--active);
-}
-
-article {
-  width: 100%;
-  max-width: var(--max-article-size);
-  margin-inline: auto;
+  background-color: var(--active)
 }
 
 article.now {
   margin: 0;
-  width:auto;
+  width: auto
 }
 
-#advanced textarea, #advanced .field.textarea {
+#advanced .field.textarea, #advanced textarea {
   background-color: #212121;
-  color: #EEFFFF;
-  font-family: monospace;
+  color: #eff;
+}
+#advanced .field.textarea, #advanced textarea, .EasyMDEContainer {
+  font-family: 'MD IO 0.4', monospace
 }
 
 article.theme {
   height: 10rem;
-  width: 15rem;
-}
\ No newline at end of file
+  width: 15rem
+}