death.au/Neighbourhood.omg.lol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

(in progress) cleaning up css

Browse source
This commit is contained in:
Gordon Pedersen 2024-07-12 17:08:22 +10:00
parent 640cd73271
commit 1bf7e74a5a
4 changed files with 186 additions and 284 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Components/Pages/Now.razor
View file

@ -16,7 +16,7 @@
<article class="now"> <article class="now">
<nav> <nav>
<a class="author" href="/person/@now.Address#now"> <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> </a>
</nav> </nav>
<nav> <nav>

16
Components/StatusCardSkeleton.razor
View file

@ -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 {
}

2
Neighbourhood.omg.lol.csproj
View file

@ -57,7 +57,7 @@
<ApplicationId>au.death.lol.omg.neighbourhood</ApplicationId> <ApplicationId>au.death.lol.omg.neighbourhood</ApplicationId>
<ApplicationDisplayVersion>0.9.7</ApplicationDisplayVersion> <ApplicationDisplayVersion>0.9.7</ApplicationDisplayVersion>
<AndroidKeyStore>True</AndroidKeyStore> <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> <ApplicationVersion>7</ApplicationVersion>
<AndroidSigningStorePass>a!zobzizl</AndroidSigningStorePass> <AndroidSigningStorePass>a!zobzizl</AndroidSigningStorePass>
<AndroidSigningKeyAlias>neighbourhood.omg.lol</AndroidSigningKeyAlias> <AndroidSigningKeyAlias>neighbourhood.omg.lol</AndroidSigningKeyAlias>

434
wwwroot/css/style.css
View file

@ -2,21 +2,14 @@
@import url(../vendor/color.css); @import url(../vendor/color.css);
@import url(../vendor/type.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 { :root {
--emoji-font: TwemojiCountryFlags, SegoeUIEmoji, 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol'; --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); --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; --spacing: 1.5rem;
--radius: .75em;
--small-radius: .13em;
--color: var(--gray-1);
--background: var(--gray-8); --background: var(--gray-8);
--shadow: var(--black); --shadow: var(--black);
--button-shadow: var(--gray-7);
--max-article-size: 75rem; --max-article-size: 75rem;
} }
@ -25,245 +18,176 @@ body.dark {
--on-background: var(--gray-1); --on-background: var(--gray-1);
--surface: var(--gray-9); --surface: var(--gray-9);
--on-surface: var(--gray-4); --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 { body, html { font-family: var(--font) }
font-family: var(--font);
.address, .author, .honey, .page-heading {
font-family: "VC Honey Deck",var(--font)
} }
body { body { font-size: 1.2em }
font-size: 1.2em;
}
a { main { position: relative }
text-decoration: underline;
}
: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; ---size: 1em;
margin-right: 0.3em;
} }
:is(nav) a, .author { :is(h1,h2,h3,h4,h5,h6) i {
text-decoration: none; margin-right: .3em;
&.fa-at, &:only-child {
margin-right: 0;
inline-size: auto
}
} }
p, li { #bio :is(h1,h2,h3,h4,h5,h6) {
line-height: 160%; text-align: center;
display: block
} }
.author, .address, .page-heading, .honey { h1 i:only-child {
font-family: 'VC Honey Deck', var(--font); margin-block-start: 1rem
} }
li, p {
line-height: 160%
}
.author { .author {
color: inherit; color: inherit;
font-size: 1.2em; font-size: 1.2em
} }
img { img {
max-inline-size: 100%; max-inline-size: 100%;
max-block-size: 100%; max-block-size: 100%;
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto
} }
:is(.status,.pic) .emoji { #new-status-emoji, #status-emoji, :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 {
margin-bottom: auto; margin-bottom: auto;
inline-size: 3.5rem; inline-size: 3.5rem;
block-size: 3.5rem; block-size: 3.5rem;
font-size: 3.1rem; font-size: 3.1rem;
line-height: 3.5rem; line-height: 3.5rem;
text-indent: -6px; text-indent: -6px
} }
:not(#feed)>.pic .emoji{ :not(#feed) > .pic .emoji {
display:none; 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;
} }
.chip i { .chip i {
border-radius: 0; border-radius: 0
} }
.status nav .chip, .status nav { .status nav, .status nav .chip {
color: var(--gray-7); color: var(--gray-7)
} }
.profile.avatar { .profile.avatar {
border-radius: .75rem; border-radius: .75rem;
max-block-size: 10rem; max-block-size: 10rem;
max-inline-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;
} }
nav header { nav header {
z-index: 101; z-index: 101
} }
:is(button,.button).tiny { :is(button,.button).tiny {
block-size: 1.5rem; block-size: 1.5rem;
/*max-inline-size: 1.5rem;*/
font-size: .875rem; font-size: .875rem;
border-radius: .75rem; 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 { nav.bottom.s:not(.drawer) :is(button,.button) > menu {
position: fixed; position: fixed;
margin-top:auto; margin-top: auto;
margin-bottom: 5rem; margin-bottom: 5rem;
margin-left:auto; margin-left: auto;
margin-right:0; margin-right: 0;
inline-size: auto; inline-size: auto;
min-inline-size: 12rem; min-inline-size: 12rem;
z-index: 100; z-index: 100;
transform: none !important; transform: none !important;
inset: auto 0 0 auto; inset: auto 0 0 auto
} }
i[class*=fa-at] { i[class*=fa-at] {
vertical-align:unset; vertical-align: unset;
font-size: .75em; font-size: .75em
} }
.fab { .fab {
position:fixed; position: fixed;
right: 2rem; right: 2rem;
bottom: 2rem; bottom: 2rem;
z-index: 1; z-index: 1
} }
dialog { dialog {
overflow:visible; overflow: visible;
width:80%; width: 80%
} }
.invisible { .invisible {
max-width:0px; max-width: 0;
max-height:0px; max-height: 0;
border: none; border: 0;
margin:0; margin: 0;
padding:0; padding: 0
} }
@media only screen and (max-width: 992px) { @media only screen and (max-width:992px) {
.fab { .fab {
bottom: 7rem; bottom: 7rem
} }
*:has(> main.responsive) { :has(>main.responsive) {
/*flex-direction: row;*/ max-block-size: calc(100vh - 5rem)
max-block-size: calc(100vh - 5rem);
} }
} }
.avatar { .avatar {
position:relative; position: relative
} }
.avatar::after { .avatar::after {
content: ''; content: "";
position:absolute; position: absolute;
left:0; right:0; left: 0;
top:0; bottom:0; right: 0;
top: 0;
bottom: 0;
background-color: var(--surface-container-low); background-color: var(--surface-container-low);
/*background-image: var(--prami-svg);*/
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center bottom; background-position: center bottom;
border-radius: 50%; border-radius: 50%;
border: 1px dashed var(--gray-4); border: 1px dashed var(--gray-4);
z-index:1; z-index: 1
} }
article.ephemeral { article.ephemeral {
max-width: 50rem; max-width: 50rem;
border: 2px dashed var(--gray-7); border: 2px dashed var(--gray-7)
} }
#pics article { #pics article {
max-width: 50rem; max-width: 50rem;
} margin: 1rem auto;
text-align: center
.tabs a {
text-decoration:none;
} }
.card-grid { .card-grid {
@ -271,238 +195,232 @@ article.ephemeral {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
gap: .5rem; gap: .5rem;
justify-content: space-between; justify-content: space-between
} }
#pics article { #pics article > :not(:first-child) {
margin: 1rem auto; text-align: left
text-align:center;
}
#pics article>:not(:first-child) {
text-align: left;
} }
#pics article nav { #pics article nav {
flex-wrap: wrap; flex-wrap: wrap
} }
#pics.card-grid article{ #pics.card-grid article {
max-width: 24rem; max-width: 24rem
} }
@media only screen and (max-width: 895px) {
@media only screen and (max-width:895px) {
#pics.card-grid article { #pics.card-grid article {
max-width: calc(100% - 1rem); max-width: calc(100% - 1rem)
} }
} }
#pics article > img:first-child { #pics article > img:first-child {
text-align: center; text-align: center
} }
#now-garden{ #now-garden {
gap:1rem; gap: 1rem
} }
#now-garden > :not(.now) { #now-garden > :not(.now) {
position: absolute; position: absolute
} }
.card-grid > * { .card-grid > * {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1
} }
.page-container > .page.active {
display:flex;
flex-direction:column;
flex-grow: 1;
}
iframe { iframe {
width:100%; width: 100%;
flex-grow: 1; flex-grow: 1;
border: none; border: 0;
margin:0; margin: 0;
padding:0; padding: 0
} }
.now { .now {
background-color: var(--green-2); background-color: var(--green-2);
color: var(--black); color: var(--black)
} }
.page-container, .page-container > .page.active, main {
flex-grow: 1;
main, .page-container {
flex-grow:1;
display: flex; display: flex;
flex-direction: column; flex-direction: column
} }
main { main {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto
} }
.hover { .hover {
z-index: 1; z-index: 1
} }
#info :is(ul, ol) { #info :is(ul,ol) {
margin-left: var(--spacing); margin-left: var(--spacing)
} }
#info :is(p, ul, ol) { #info :is(p,ul,ol) {
margin-bottom: var(--spacing); margin-bottom: var(--spacing)
} }
.fa-seedling { color: var(--green-9) !important; } .fa-seedling {
.fa-message-smile { color: var(--blue-4) !important; } color: var(--green-9) !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;
} }
i.tiny { .fa-message-smile {
---size: 1em; 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 { .row p {
white-space: normal; white-space: normal;
max-width: 100%; max-width: 100%
} }
a.row.indent { a.row.indent {
margin-left: 1rem; 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) { :is(.circle,.square).large.small:not(i,img,video,svg) {
block-size: 2rem; block-size: 2rem;
inline-size: 2rem; inline-size: 2rem
} }
:is(button,.button,.chip).large.small > .responsive { :is(button,.button,.chip).large.small > .responsive {
inline-size: 2rem; inline-size: 2rem
} }
/* s */ @media only screen and (max-width:600px) {
@media only screen and (max-width: 600px) { .l:not(.s), .m.l:not(.s), .m:not(.s) {
.m:not(.s), .l:not(.s), .m.l:not(.s) { display: none !important
display: none !important;
} }
} }
/* m */ @media only screen and (min-width:601px) and (max-width:992px) {
@media only screen and (min-width: 601px) and (max-width: 992px) { .l:not(.m), .s.l:not(.m), .s:not(.m) {
.s:not(.m), .l:not(.m), .s.l:not(.m) { display: none !important
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) { :is(.circle,.square).large.small:not(i,img,video,svg) {
block-size: 3rem; block-size: 3rem;
inline-size: 3rem; inline-size: 3rem
} }
:is(button,.button,.chip).large.small > .responsive { :is(button,.button,.chip).large.small > .responsive {
inline-size: 3rem; inline-size: 3rem
} }
} }
#directory{ #directory {
column-width: 14rem; column-width: 14rem
}
#directory a {
font-size: 1.1rem;
text-decoration: none;
} }
article#directory ul{ #directory a {
list-style:none; font-size: 1.1rem;
}
article#directory ul {
list-style: none
} }
#directoryIndex a { #directoryIndex a {
font-size: 1.5rem; font-size: 1.5rem
} }
.editor-toolbar .easymde-dropdown, .editor-toolbar button { .editor-toolbar .easymde-dropdown, .editor-toolbar button {
color: inherit; color: inherit
} }
.editor-toolbar i.separator { .editor-toolbar i.separator {
---size: unset; ---size: unset;
opacity: 0.25; opacity: .25;
border-radius: 0 border-radius: 0
} }
.markdown-editor .editor-preview { .markdown-editor .editor-preview {
background: var(--surface); background: var(--surface)
} }
.markdown-editor { .markdown-editor {
flex: auto; flex: auto;
display: flex; display: flex;
flex-direction:column; flex-direction: column
} }
.markdown-editor + nav { .markdown-editor + nav, .markdown-editor > .EasyMDEContainer > .editor-toolbar {
flex: none; flex: none
} }
.markdown-editor > .EasyMDEContainer {
.markdown-editor > .EasyMDEContainer {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column
} }
.markdown-editor > .EasyMDEContainer > .editor-toolbar{ .markdown-editor > .EasyMDEContainer > .CodeMirror {
flex: none; flex: auto
} }
.markdown-editor > .EasyMDEContainer > .CodeMirror {
flex: auto;
}
article { article {
overflow-wrap: anywhere; 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; white-space: break-spaces;
flex: 1 1 100%; flex: 1 1 100%
} }
menu > details .row, menu > li > details .row { menu > details .row, menu > li > details .row {
padding: .5rem 1rem; padding: .5rem 1rem;
min-block-size: 3rem; min-block-size: 3rem;
flex: 1; flex: 1
} }
menu > details > a:is(:hover,:focus,.active), menu > details > summary:is(:hover,:focus,.active) { menu > details > a:is(:hover,:focus,.active), menu > details > summary:is(:hover,:focus,.active) {
background-color: var(--active); background-color: var(--active)
}
article {
width: 100%;
max-width: var(--max-article-size);
margin-inline: auto;
} }
article.now { article.now {
margin: 0; margin: 0;
width:auto; width: auto
} }
#advanced textarea, #advanced .field.textarea { #advanced .field.textarea, #advanced textarea {
background-color: #212121; background-color: #212121;
color: #EEFFFF; color: #eff;
font-family: monospace; }
#advanced .field.textarea, #advanced textarea, .EasyMDEContainer {
font-family: 'MD IO 0.4', monospace
} }
article.theme { article.theme {
height: 10rem; height: 10rem;
width: 15rem; width: 15rem
} }