wip bsky client for the web & android
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: springy animation for modals & popovers, prettier toggleswitch styles

vi 8ca88d3d 4e588c0a

+104 -54
+27 -23
src/assets/main.css src/assets/main.scss
··· 1 + @use './variables.scss' as vars; 2 + 1 3 @font-face { 2 4 font-family: 'OpenDyslexic'; 3 5 src: ··· 30 32 margin: 0; 31 33 padding: 0; 32 34 font-weight: normal; 35 + user-select: none; 33 36 34 37 scrollbar-width: thin; 35 38 scrollbar-color: hsla(var(--overlay1) / 1) transparent; 36 39 37 - --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); 38 40 -webkit-tap-highlight-color: transparent; 39 41 outline: 2px solid transparent; 40 42 outline-offset: 4px; 41 43 42 - transition: 43 - margin var(--transition), 44 - grid-template-rows var(--transition), 45 - grid-template-columns var(--transition), 46 - stroke-dasharray var(--transition), 47 - stroke-dashoffset var(--transition), 48 - outline-color var(--transition), 49 - outline-offset var(--transition), 50 - color var(--transition), 51 - background-color var(--transition), 52 - box-shadow var(--transition), 53 - outline var(--transition), 54 - border-color var(--transition), 55 - border-radius var(--transition), 56 - font-weight var(--transition), 57 - opacity var(--transition), 58 - transform var(--transition), 59 - backdrop-filter var(--transition), 60 - text-decoration-color var(--transition), 61 - filter var(--transition); 44 + transition-property: vars.$transition-properties; 45 + transition-duration: vars.$transition-duration; 46 + transition-timing-function: vars.$ease; 62 47 63 48 &:focus-visible { 64 49 outline-color: hsl(var(--blue)); ··· 95 80 --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); 96 81 --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); 97 82 83 + --transition: vars.$default-transition; 98 84 --border-colour: hsl(var(--surface0) / 0.5); 99 85 100 86 --accented-border-colour: color-mix( 101 87 in oklab, 102 - hsl(var(--accent) / 0.1) 20%, 88 + hsl(var(--accent) / 0.5) 20%, 103 89 hsl(var(--surface0) / 0.1) 80% 104 90 ); 105 91 ··· 128 114 -webkit-font-smoothing: antialiased; 129 115 -moz-osx-font-smoothing: grayscale; 130 116 overflow: hidden; 117 + 118 + &.reduce-blur { 119 + * { 120 + backdrop-filter: none !important; 121 + } 122 + } 131 123 } 132 124 133 125 ::selection { 134 - background-color: hsla(var(--rosewater) / 0.3); 126 + background-color: hsla(var(--accent) / 0.3); 135 127 color: hsl(var(--text)); 136 128 } 137 129 ··· 235 227 color: hsl(var(--surface2)); 236 228 font-weight: 900; 237 229 } 230 + 231 + .sr-only { 232 + position: absolute; 233 + width: 1px; 234 + height: 1px; 235 + padding: 0; 236 + margin: -1px; 237 + overflow: hidden; 238 + clip: rect(0, 0, 0, 0); 239 + white-space: nowrap; 240 + border: 0; 241 + }
+19
src/assets/variables.scss
··· 1 + $ease: cubic-bezier(0.4, 0, 0.2, 1); 2 + $ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); 3 + $ease-springier: cubic-bezier(0.25, 2.2, 0.5, 1); 4 + $ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); 5 + 6 + $transition-properties: 7 + margin, grid-template-rows, grid-template-columns, stroke-dasharray, stroke-dashoffset, 8 + outline-color, outline-offset, color, background-color, box-shadow, outline, border-color, 9 + border-radius, font-weight, opacity, transform, backdrop-filter, text-decoration-color, filter, 10 + scale; 11 + $transition-duration: 0.2s; 12 + $default-transition: $transition-duration $ease; 13 + 14 + $border-colour: hsl(var(--subtext0) / 0.1); 15 + $accented-border-colour: color-mix( 16 + in oklab, 17 + hsl(var(--accent) / 1) 20%, 18 + hsl(var(--surface0) / 1) 20% 19 + );
+3 -1
src/components/Navigation/AppBar.vue
··· 131 131 </template> 132 132 133 133 <style scoped lang="scss"> 134 + @use '@/assets/variables.scss' as vars; 135 + 134 136 .progressive-blur { 135 137 --blur-strength: 16px; 136 138 height: var(--inset-top, 3.5rem); ··· 190 192 .topbar { 191 193 background: hsla(var(--base) / 0.8); 192 194 backdrop-filter: blur(0.75rem); 193 - border-bottom: 1px solid hsla(var(--surface2) / 0.3); 195 + border-bottom: 3px solid vars.$border-colour; 194 196 195 197 position: absolute; 196 198 top: 0;
+7 -16
src/components/Navigation/PageLayout.vue
··· 86 86 </div> 87 87 </template> 88 88 89 - <style> 89 + <style scoped lang="scss"> 90 + @use '@/assets/variables.scss' as vars; 91 + 90 92 .page-layout { 91 93 display: flex; 92 94 flex-direction: column; ··· 138 140 @media (min-width: 640px) { 139 141 .page-layout { 140 142 border-radius: 1rem; 141 - height: calc(100vh - 0.5rem); 142 - margin: 0.25rem; 143 - border: 1px solid var(--border-colour); 143 + height: calc(100vh - 1rem); 144 + margin: 0.5rem; 145 + outline: 3px solid vars.$border-colour; 146 + outline-offset: -1px; 144 147 } 145 - } 146 - 147 - .sr-only { 148 - position: absolute; 149 - width: 1px; 150 - height: 1px; 151 - padding: 0; 152 - margin: -1px; 153 - overflow: hidden; 154 - clip: rect(0, 0, 0, 0); 155 - white-space: nowrap; 156 - border: 0; 157 148 } 158 149 159 150 .no-padding {
+10
src/components/UI/BaseModal.vue
··· 156 156 </template> 157 157 158 158 <style scoped lang="scss"> 159 + @use '@/assets/variables' as *; 160 + 161 + .modal-wrapper, 162 + .backdrop, 163 + .modal-container, 164 + .modal-content { 165 + transition-timing-function: $ease-spring; 166 + transition-duration: 0.3s; 167 + } 168 + 159 169 .modal-wrapper { 160 170 position: fixed; 161 171 inset: 0;
+9
src/components/UI/BasePopover.vue
··· 378 378 </template> 379 379 380 380 <style scoped lang="scss"> 381 + @use '@/assets/variables' as *; 382 + 383 + .popover-root, 384 + .popover-backdrop, 385 + .popover-panel { 386 + transition-timing-function: $ease-spring; 387 + transition-duration: 0.3s; 388 + } 389 + 381 390 .popover-root { 382 391 position: fixed; 383 392 inset: 0;
+2 -2
src/components/UI/ListItem.vue
··· 129 129 130 130 .is-clickable { 131 131 cursor: pointer; 132 - &:hover { 132 + /* &:hover { 133 133 background: var(--accent-surface-hover); 134 134 } 135 135 &:active { ··· 139 139 z-index: 1; 140 140 background: hsl(var(--mantle)); 141 141 box-shadow: inset 0 0 0 2px hsl(var(--accent)); 142 - } 142 + } */ 143 143 } 144 144 145 145 .is-danger {
+23 -10
src/components/UI/ToggleSwitch.vue
··· 49 49 display: inline-flex; 50 50 width: 3rem; 51 51 height: 1.75rem; 52 - background-color: hsl(var(--surface1)); 52 + background-color: hsla(var(--surface1) / 0.85); 53 53 border-radius: 1rem; 54 54 border: none; 55 55 position: relative; ··· 76 76 outline-offset: -1px; 77 77 } 78 78 79 + &:hover { 80 + background-color: hsla(var(--surface1) / 1); 81 + } 82 + 83 + &:active { 84 + .toggle-thumb { 85 + width: calc(var(--width) + var(--pressed-grow)); 86 + } 87 + } 88 + 79 89 &.is-checked { 80 - background-color: hsla(var(--accent) / 0.8); 90 + background: hsl(var(--accent)); 81 91 82 92 .toggle-thumb { 83 93 transform: translateX(1.25rem); 84 - background-color: hsl(var(--base)); 94 + } 95 + .toggle-label { 96 + color: hsl(var(--text)); 85 97 } 86 98 87 - &:active, 88 - &:focus-visible { 99 + &:active { 89 100 .toggle-thumb { 90 - background-color: hsl(var(--base) / 0.8); 91 - transform: translateX(1.1rem); 101 + transform: translateX(calc(1.15rem - (var(--pressed-grow)))); 92 102 } 93 103 } 94 104 } 95 105 } 96 106 97 107 .toggle-thumb { 108 + --width: 1.35rem; 109 + --pressed-grow: 0.4rem; 110 + 98 111 position: absolute; 99 112 top: 0.2rem; 100 113 left: 0.2rem; 101 - width: 1.35rem; 114 + width: var(--width); 102 115 height: 1.35rem; 103 116 background: hsl(var(--base)); 104 - border-radius: 50%; 105 - box-shadow: 0 1px 3px hsla(var(--crust) / 0.2); 117 + border-radius: 2rem; 106 118 107 119 transition-timing-function: $ease-spring; 108 120 transition-duration: 0.3s; 121 + transition-property: $transition-properties, width; 109 122 } 110 123 </style>
+1 -1
src/main.ts
··· 2 2 import { createPinia } from 'pinia' 3 3 import { SystemBars, SystemBarsStyle } from '@capacitor/core' 4 4 5 - import './assets/main.css' 5 + import './assets/main.scss' 6 6 import App from './App.vue' 7 7 8 8 const app = createApp(App)
+3 -1
src/views/Root/HomeView.vue
··· 189 189 </template> 190 190 191 191 <style lang="scss" scoped> 192 + @use '@/assets/variables.scss' as vars; 193 + 192 194 .feeds-bar { 193 195 display: flex; 194 196 gap: 0.5rem; ··· 252 254 inset: 0; 253 255 border-radius: 10rem; 254 256 background: transparent; 255 - transition: var(--transition); 257 + transition: vars.$default-transition; 256 258 z-index: -1; 257 259 pointer-events: none; 258 260 }