doll.sister.pet / website
The source code for my personal website and blog. hanna.lol
blog website
fork atom

refactor: clean up component css

doll.sister.pet 7c7a1368 fa4f4541

+72 -72
unified split
+41 -41
src/layouts/Page.astro
··· 31 31 </html> 32 32 33 33 <style> 34 - div.navbar { 34 + .navbar { 35 35 display: flex; 36 36 align-items: center; 37 37 justify-content: space-between; ··· 44 44 width: 100%; 45 45 left: 0; 46 46 top: 0; 47 + } 47 48 48 - & > div.left { 49 - margin-left: var(--space-sm); 49 + .navbar .left { 50 + margin-left: var(--space-sm); 50 51 51 - & > h1 { 52 - font-size: 20px; 52 + & h1 { 53 + font-size: 20px; 53 54 54 - & > a { 55 - text-decoration: none; 56 - color: var(--text-primary); 57 - } 55 + & a { 56 + text-decoration: none; 57 + color: var(--text-primary); 58 58 } 59 59 } 60 + } 60 61 61 - & > div.right { 62 - margin-right: var(--space-sm); 62 + .navbar .right { 63 + margin-right: var(--space-sm); 64 + } 63 65 64 - & > ul.pages { 65 - margin-left: 0px; 66 - list-style: none; 67 - display: flex; 66 + .pages { 67 + margin-left: 0; 68 + list-style: none; 69 + display: flex; 68 70 69 - & > li:not(:last-child) { 70 - margin-right: var(--space-sm); 71 - } 71 + & li:not(:last-child) { 72 + margin-right: var(--space-sm); 73 + } 72 74 73 - & > li > a { 74 - display: flex; 75 - align-items: center; 76 - justify-content: center; 77 - background-color: var(--bg-secondary); 78 - border: 1px solid var(--border); 79 - border-radius: var(--radius-sm); 80 - color: var(--text-secondary); 81 - text-decoration: none; 82 - font-size: 0.9rem; 83 - height: 32px; 84 - width: 72px; 75 + & li a { 76 + display: flex; 77 + align-items: center; 78 + justify-content: center; 79 + background-color: var(--bg-secondary); 80 + border: 1px solid var(--border); 81 + border-radius: var(--radius-sm); 82 + color: var(--text-secondary); 83 + text-decoration: none; 84 + font-size: 0.9rem; 85 + height: 32px; 86 + width: 72px; 85 87 86 - &:hover { 87 - background-color: var(--bg-tertiary); 88 - border-color: var(--accent-blue); 89 - color: var(--accent-blue); 90 - } 88 + &:hover { 89 + background-color: var(--bg-tertiary); 90 + border-color: var(--accent-blue); 91 + color: var(--accent-blue); 92 + } 91 93 92 - @media only screen and (max-width: 475px) { 93 - font-size: 12px; 94 - height: 28px; 95 - width: 64px; 96 - } 97 - } 94 + @media only screen and (max-width: 475px) { 95 + font-size: 12px; 96 + height: 28px; 97 + width: 64px; 98 98 } 99 99 } 100 100 }
+31 -31
src/pages/index.astro
··· 67 67 </Page> 68 68 69 69 <style> 70 - div.background { 70 + .background { 71 71 background-image: url("/img/background.jpg"); 72 72 background-position: center; 73 73 filter: saturate(0%); ··· 79 79 top: 0; 80 80 } 81 81 82 - div.center { 82 + .center { 83 83 width: 100%; 84 84 height: 100%; 85 85 display: flex; ··· 87 87 align-items: center; 88 88 } 89 89 90 - div.container { 90 + .container { 91 91 box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); 92 92 border: 1px solid var(--border); 93 93 background-color: var(--bg-primary); ··· 103 103 } 104 104 } 105 105 106 - div.details { 107 - flex-direction: row; 106 + .details { 108 107 display: flex; 108 + flex-direction: row; 109 109 110 110 & > img { 111 111 width: 128px; ··· 122 122 } 123 123 } 124 124 125 - div.about { 125 + .about { 126 126 display: flex; 127 127 margin-left: var(--space-lg); 128 128 flex-direction: column; 129 129 justify-content: center; 130 130 131 - & > h1 { 131 + & h1 { 132 132 color: var(--text-primary); 133 133 } 134 134 135 - & > h2 { 135 + & h2 { 136 136 font-weight: 200; 137 137 color: var(--text-muted); 138 138 } ··· 140 140 @media only screen and (max-width: 800px) { 141 141 align-items: center; 142 142 margin-top: var(--space-md); 143 - margin-left: 0px !important; 143 + margin-left: 0; 144 144 width: 100%; 145 145 146 - & > h1 { 146 + & h1 { 147 147 @media only screen and (max-width: 475px) { 148 148 font-size: 20px; 149 149 } 150 150 } 151 151 152 - & > h2 { 152 + & h2 { 153 153 @media only screen and (max-width: 475px) { 154 154 font-size: 15px; 155 155 } ··· 157 157 } 158 158 } 159 159 160 - ul.socials { 160 + .socials { 161 161 display: flex; 162 162 list-style: none; 163 163 margin-top: var(--space-md); 164 164 width: 100%; 165 165 166 - & > li { 166 + & li { 167 167 display: inline-block; 168 168 margin-right: var(--space-sm); 169 169 170 - & > a { 170 + & a { 171 171 display: flex; 172 172 align-items: center; 173 173 justify-content: center; ··· 179 179 width: 32px; 180 180 height: 32px; 181 181 182 - & > img { 182 + & img { 183 183 width: 16px; 184 184 } 185 185 ··· 187 187 background-color: var(--bg-tertiary); 188 188 border-color: var(--accent-blue); 189 189 color: var(--accent-blue); 190 - } 191 190 192 - &:hover > img { 193 - filter: 194 - brightness(0) 195 - saturate(100%) 196 - invert(70%) 197 - sepia(37%) 198 - saturate(4975%) 199 - hue-rotate(200deg) 200 - brightness(106%) 201 - contrast(101%); 191 + & img { 192 + filter: 193 + brightness(0) 194 + saturate(100%) 195 + invert(70%) 196 + sepia(37%) 197 + saturate(4975%) 198 + hue-rotate(200deg) 199 + brightness(106%) 200 + contrast(101%); 201 + } 202 202 } 203 203 } 204 204 } 205 205 206 206 @media only screen and (max-width: 800px) { 207 207 flex-direction: column; 208 - margin-top: var(--space-md) !important; 208 + margin-top: var(--space-md); 209 209 210 - & > li { 211 - margin-right: 0px; 210 + & li { 211 + margin-right: 0; 212 212 213 213 &:not(:last-child) { 214 214 margin-bottom: var(--space-sm); 215 215 } 216 216 217 - & > a { 217 + & a { 218 218 width: 100%; 219 219 height: 48px; 220 220 } ··· 222 222 } 223 223 } 224 224 225 - span.label { 225 + .label { 226 226 display: none; 227 227 228 228 @media only screen and (max-width: 800px) {