Neighbourhood.omg.lol/wwwroot/css/style.css

@import url(../vendor/beer.min.css);
@import url(../vendor/color.css);
@import url(../vendor/type.css);

.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);
  --spacing: 1.5rem;
  --background: var(--gray-8);
  --shadow: var(--black);
  --max-article-size: 75rem;
}

body.dark {
  --background: var(--gray-8);
  --on-background: var(--gray-1);
  --surface: var(--gray-9);
  --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%;
  max-width: 100%;
  margin: 0 auto
}

#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
}

.status nav, .status nav .chip {
  color: var(--gray-7)
}

.profile.avatar {
  border-radius: .75rem;
  max-block-size: 10rem;
  max-inline-size: 10rem
}

nav header {
  z-index: 101
}

:is(button,.button).tiny {
  block-size: 1.5rem;
  font-size: .875rem;
  border-radius: .75rem
}

nav.bottom.s:not(.drawer) > a:not(.button,.chip) {
  inline-size: unset
}

nav.bottom.s:not(.drawer) :is(button,.button) > menu {
  position: fixed;
  margin-top: auto;
  margin-bottom: 5rem;
  margin-left: auto;
  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;
  z-index: 1
}

dialog {
  overflow: visible;
  width: 80%
}

.invisible {
  max-width: 0;
  max-height: 0;
  border: 0;
  margin: 0;
  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;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: space-between
}

#pics article > :not(:first-child) {
  text-align: left
}

#pics article nav {
  flex-wrap: wrap
}

#pics.card-grid article {
  max-width: 24rem
}

@media only screen and (max-width:895px) {
  #pics.card-grid article {
    max-width: calc(100% - 1rem)
  }
}

#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;
  border: 0;
  margin: 0;
  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 {
  overflow-x: hidden;
  overflow-y: auto
}

.hover {
  z-index: 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 {
  white-space: normal;
  max-width: 100%
}

a.row.indent {
  margin-left: 1rem;
  border-left: 1px solid var(--outline)
}

:is(.circle,.square).large.small:not(i,img,video,svg) {
  block-size: 2rem;
  inline-size: 2rem
}

:is(button,.button,.chip).large.small > .responsive {
  inline-size: 2rem
}

@media only screen and (max-width:600px) {
  .l:not(.s), .m.l:not(.s), .m:not(.s) {
    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
  }
}

@media only screen and (min-width:993px) {
  :is(.circle,.square).large.small:not(i,img,video,svg) {
    block-size: 3rem;
    inline-size: 3rem
  }

  :is(button,.button,.chip).large.small > .responsive {
    inline-size: 3rem
  }
}

#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 {
    flex: none
  }

  .markdown-editor > .EasyMDEContainer {
    flex: 1;
    display: flex;
    flex-direction: column
  }

    .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
}