scientific-witchery/pds-dash
3
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

Cleanup and Maintenance part 1 #1

Merged
astra merged 10 commits from ari/CleanAndMaintenance into main 2025-04-21 06:30:50 +00:00
Conversation 0 Commits 10 Files changed 8 +46 -34
4 changed files with 46 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 824fcf2575 - Show all commits

9
src/App.svelte
View file

@ -41,6 +41,7 @@
</main> </main>
<style> <style>
/* desktop style */ /* desktop style */
#Content { #Content {
@ -51,8 +52,8 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: #12082b; background-color: var(--background-color);
color: #ffffff; color: var(--text-color);
} }
#Feed { #Feed {
width: 65%; width: 65%;
@ -74,8 +75,8 @@
width: 35%; width: 35%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid #8054f0; border: 1px solid var(--border-color);
background-color: #0d0620; background-color: var(--content-background-color);
height: 80vh; height: 80vh;
padding: 20px; padding: 20px;
margin-left: 20px; margin-left: 20px;

24
src/app.css
View file

@ -3,6 +3,18 @@
src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf); src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
} }
:root {
--link-color: #646cff;
--link-hover-color: #535bf2;
--background-color: #12082b;
--header-background-color: #1f1145;
--content-background-color: #0d0620;
--text-color: white;
--border-color: #8054f0;
--indicator-inactive-color: #4a4a4a;
--indicator-active-color: #8054f0;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0px; width: 0px;
background: transparent; background: transparent;
@ -35,11 +47,11 @@
a { a {
font-weight: 500; font-weight: 500;
color: #646cff; color: var(--link-color);
text-decoration: inherit; text-decoration: inherit;
} }
a:hover { a:hover {
color: #535bf2; color: var(--link-hover-color);
text-decoration: underline; text-decoration: underline;
} }
@ -49,11 +61,11 @@ body {
place-items: center; place-items: center;
min-width: 320px; min-width: 320px;
min-height: 100vh; min-height: 100vh;
background-color: #12082b; background-color: var(--background-color);
font-family: 'ProggyClean', monospace; font-family: 'ProggyClean', monospace;
font-size: 24px; font-size: 24px;
color: white; color: var(--text-color);
border-color: #8054f0; border-color: var(--border-color);
} }
h1 { h1 {
@ -69,5 +81,3 @@ h1 {
margin-right: auto; margin-right: auto;
text-align: center; text-align: center;
} }

6
src/lib/AccountComponent.svelte
View file

@ -24,10 +24,10 @@
display: flex; display: flex;
text-align: start; text-align: start;
align-items: center; align-items: center;
background-color: #12082b; background-color: var(--background-color);
padding: 0px; padding: 0px;
margin-bottom: 15px; margin-bottom: 15px;
border: 1px solid #8054f0; border: 1px solid var(--border-color);
} }
#accountName { #accountName {
margin-left: 10px; margin-left: 10px;
@ -43,6 +43,6 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
margin: 0px; margin: 0px;
border-right: #8054f0 1px solid; border-right: var(--border-color) 1px solid;
} }
</style> </style>

33
src/lib/PostComponent.svelte
View file

@ -77,8 +77,8 @@
<a <a
id="postLink" id="postLink"
href="{Config.FRONTEND_URL}/profile/{post.authorDid}/post/{post.recordName}" href="{Config.FRONTEND_URL}/profile/{post.authorDid}/post/{post.recordName}"
>{moment(post.timenotstamp).isBefore(moment().subtract(1, 'month')) >{moment(post.timenotstamp).isBefore(moment().subtract(1, "month"))
? moment(post.timenotstamp).format('MMM D, YYYY') ? moment(post.timenotstamp).format("MMM D, YYYY")
: moment(post.timenotstamp).fromNow()}</a : moment(post.timenotstamp).fromNow()}</a
> >
</p> </p>
@ -145,14 +145,15 @@
</div> </div>
<style> <style>
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
#postContainer { #postContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid #8054f0; border: 1px solid var(--border-color);
background-color: black; background-color: var(--background-color);
margin-bottom: 15px; margin-bottom: 15px;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@ -161,29 +162,29 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: start; justify-content: start;
background-color: #1f1145; background-color: var(--header-background-color);
padding: 0px 0px; padding: 0px 0px;
height: fit-content; height: fit-content;
border-bottom: 1px solid #8054f0; border-bottom: 1px solid var(--border-color);
font-weight: bold; font-weight: bold;
overflow-wrap: break-word; overflow-wrap: break-word;
height: 60px; height: 60px;
} }
#displayName { #displayName {
color: white; color: var(--text-color);
font-size: 1.2em; font-size: 1.2em;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#handle { #handle {
color: #8054f0; color: var(--border-color);
font-size: 0.8em; font-size: 0.8em;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#postLink { #postLink {
color: #8054f0; color: var(--border-color);
font-size: 0.8em; font-size: 0.8em;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -193,8 +194,8 @@
text-align: start; text-align: start;
flex-direction: column; flex-direction: column;
padding: 10px; padding: 10px;
background-color: #0d0620; background-color: var(--content-background-color);
color: white; color: var(--text-color);
overflow-wrap: break-word; overflow-wrap: break-word;
} }
#replyingText { #replyingText {
@ -224,7 +225,7 @@
height: 100%; height: 100%;
margin: 0px; margin: 0px;
margin-left: 0px; margin-left: 0px;
border-right: #8054f0 1px solid; border-right: var(--border-color) 1px solid;
} }
#carouselContainer { #carouselContainer {
position: relative; position: relative;
@ -249,16 +250,16 @@
.indicator { .indicator {
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: #4a4a4a; background-color: var(--indicator-inactive-color);
} }
.indicator.active { .indicator.active {
background-color: #8054f0; background-color: var(--indicator-active-color);
} }
#prevBtn, #prevBtn,
#nextBtn { #nextBtn {
background-color: rgba(31, 17, 69, 0.7); background-color: rgba(31, 17, 69, 0.7);
color: white; color: var(--text-color);
border: 1px solid #8054f0; border: 1px solid var(--border-color);
width: 30px; width: 30px;
height: 30px; height: 30px;
cursor: pointer; cursor: pointer;