witchcraft.systems / pds-dash
this repo has no description
fork atom

Css now uses variables for all its colors

authored by ari.express and committed by astrra.space 824fcf25 5da14940

verified
options
unified split
Changed files
+46 -34
src
App.svelte
app.css
lib
AccountComponent.svelte
PostComponent.svelte
+8 -7
src/App.svelte
··· 41 41 </main> 42 42 43 43 <style> 44 + 44 45 /* desktop style */ 45 - 46 + 46 47 #Content { 47 48 display: flex; 48 49 /* split the screen in half, left for accounts, right for posts */ ··· 51 52 flex-direction: row; 52 53 justify-content: space-between; 53 54 align-items: center; 54 - background-color: #12082b; 55 - color: #ffffff; 55 + background-color: var(--background-color); 56 + color: var(--text-color); 56 57 } 57 58 #Feed { 58 59 width: 65%; ··· 74 75 width: 35%; 75 76 display: flex; 76 77 flex-direction: column; 77 - border: 1px solid #8054f0; 78 - background-color: #0d0620; 78 + border: 1px solid var(--border-color); 79 + background-color: var(--content-background-color); 79 80 height: 80vh; 80 81 padding: 20px; 81 82 margin-left: 20px; ··· 96 97 margin-bottom: 20px; 97 98 } 98 99 99 - /* mobile style */ 100 - @media screen and (max-width: 600px) { 100 + /* mobile style */ 101 + @media screen and (max-width: 600px) { 101 102 #Content { 102 103 flex-direction: column; 103 104 width: auto;
+18 -8
src/app.css
··· 3 3 src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf); 4 4 } 5 5 6 + :root { 7 + --link-color: #646cff; 8 + --link-hover-color: #535bf2; 9 + --background-color: #12082b; 10 + --header-background-color: #1f1145; 11 + --content-background-color: #0d0620; 12 + --text-color: white; 13 + --border-color: #8054f0; 14 + --indicator-inactive-color: #4a4a4a; 15 + --indicator-active-color: #8054f0; 16 + } 17 + 6 18 ::-webkit-scrollbar { 7 19 width: 0px; 8 20 background: transparent; ··· 35 47 36 48 a { 37 49 font-weight: 500; 38 - color: #646cff; 50 + color: var(--link-color); 39 51 text-decoration: inherit; 40 52 } 41 53 a:hover { 42 - color: #535bf2; 54 + color: var(--link-hover-color); 43 55 text-decoration: underline; 44 56 } 45 57 ··· 49 61 place-items: center; 50 62 min-width: 320px; 51 63 min-height: 100vh; 52 - background-color: #12082b; 64 + background-color: var(--background-color); 53 65 font-family: 'ProggyClean', monospace; 54 66 font-size: 24px; 55 - color: white; 56 - border-color: #8054f0; 67 + color: var(--text-color); 68 + border-color: var(--border-color); 57 69 } 58 70 59 71 h1 { ··· 68 80 margin-left: auto; 69 81 margin-right: auto; 70 82 text-align: center; 71 - } 72 - 73 - 83 + }
+3 -3
src/lib/AccountComponent.svelte
··· 24 24 display: flex; 25 25 text-align: start; 26 26 align-items: center; 27 - background-color: #12082b; 27 + background-color: var(--background-color); 28 28 padding: 0px; 29 29 margin-bottom: 15px; 30 - border: 1px solid #8054f0; 30 + border: 1px solid var(--border-color); 31 31 } 32 32 #accountName { 33 33 margin-left: 10px; ··· 43 43 width: 50px; 44 44 height: 50px; 45 45 margin: 0px; 46 - border-right: #8054f0 1px solid; 46 + border-right: var(--border-color) 1px solid; 47 47 } 48 48 </style>
+17 -16
src/lib/PostComponent.svelte
··· 77 77 <a 78 78 id="postLink" 79 79 href="{Config.FRONTEND_URL}/profile/{post.authorDid}/post/{post.recordName}" 80 - >{moment(post.timenotstamp).isBefore(moment().subtract(1, 'month')) 81 - ? moment(post.timenotstamp).format('MMM D, YYYY') 80 + >{moment(post.timenotstamp).isBefore(moment().subtract(1, "month")) 81 + ? moment(post.timenotstamp).format("MMM D, YYYY") 82 82 : moment(post.timenotstamp).fromNow()}</a 83 83 > 84 84 </p> ··· 145 145 </div> 146 146 147 147 <style> 148 + 148 149 a:hover { 149 150 text-decoration: underline; 150 151 } 151 152 #postContainer { 152 153 display: flex; 153 154 flex-direction: column; 154 - border: 1px solid #8054f0; 155 - background-color: black; 155 + border: 1px solid var(--border-color); 156 + background-color: var(--background-color); 156 157 margin-bottom: 15px; 157 158 overflow-wrap: break-word; 158 159 } ··· 161 162 flex-direction: row; 162 163 align-items: center; 163 164 justify-content: start; 164 - background-color: #1f1145; 165 + background-color: var(--header-background-color); 165 166 padding: 0px 0px; 166 167 height: fit-content; 167 - border-bottom: 1px solid #8054f0; 168 + border-bottom: 1px solid var(--border-color); 168 169 font-weight: bold; 169 170 overflow-wrap: break-word; 170 171 height: 60px; 171 172 } 172 173 #displayName { 173 - color: white; 174 + color: var(--text-color); 174 175 font-size: 1.2em; 175 176 padding: 0; 176 177 margin: 0; 177 178 } 178 179 #handle { 179 - color: #8054f0; 180 + color: var(--border-color); 180 181 font-size: 0.8em; 181 182 padding: 0; 182 183 margin: 0; 183 184 } 184 185 185 186 #postLink { 186 - color: #8054f0; 187 + color: var(--border-color); 187 188 font-size: 0.8em; 188 189 padding: 0; 189 190 margin: 0; ··· 193 194 text-align: start; 194 195 flex-direction: column; 195 196 padding: 10px; 196 - background-color: #0d0620; 197 - color: white; 197 + background-color: var(--content-background-color); 198 + color: var(--text-color); 198 199 overflow-wrap: break-word; 199 200 } 200 201 #replyingText { ··· 224 225 height: 100%; 225 226 margin: 0px; 226 227 margin-left: 0px; 227 - border-right: #8054f0 1px solid; 228 + border-right: var(--border-color) 1px solid; 228 229 } 229 230 #carouselContainer { 230 231 position: relative; ··· 249 250 .indicator { 250 251 width: 8px; 251 252 height: 8px; 252 - background-color: #4a4a4a; 253 + background-color: var(--indicator-inactive-color); 253 254 } 254 255 .indicator.active { 255 - background-color: #8054f0; 256 + background-color: var(--indicator-active-color); 256 257 } 257 258 #prevBtn, 258 259 #nextBtn { 259 260 background-color: rgba(31, 17, 69, 0.7); 260 - color: white; 261 - border: 1px solid #8054f0; 261 + color: var(--text-color); 262 + border: 1px solid var(--border-color); 262 263 width: 30px; 263 264 height: 30px; 264 265 cursor: pointer;