website
git clone https://git.pyrossh.dev/website
木 Personal website of pyrossh. Built with astrojs, shiki, vite.
assets/css/workers/home.css
| 44991dd | 1 | /* Homepage-only styling, nested under .pageContainer (the page's own |
| 44991dd | 2 | top-level wrapper — see src/index.njk) now that this file ships in the |
| 44991dd | 3 | site-wide bundle.css instead of being the only stylesheet loaded on |
| 44991dd | 4 | this page. Without this nesting, the bare `h2`/`section` selectors |
| 44991dd | 5 | below would apply to every h2/section on every other page too. */ |
| fe1b28f | 6 | .pageContainer { |
| fe1b28f | 7 | margin-left: auto; |
| fe1b28f | 8 | margin-right: auto; |
| fe1b28f | 9 | margin-bottom: 2.5rem; |
| fe1b28f | 10 | |
| 44991dd | 11 | .description { |
| ada6e53 | 12 | font-size: var(--fs-sm); |
| df4fd17 | 13 | } |
| df4fd17 | 14 | |
| 44991dd | 15 | h2 { |
| ada6e53 | 16 | font-size: var(--fs-md); |
| 44991dd | 17 | font-weight: 600; |
| 44991dd | 18 | } |
| df4fd17 | 19 | |
| 44991dd | 20 | section { |
| 44991dd | 21 | display: flex; |
| 44991dd | 22 | flex-direction: column; |
| 44991dd | 23 | margin-top: 1.5rem; |
| ada6e53 | 24 | margin-bottom: var(--space-section-mb); |
| 44991dd | 25 | } |
| df4fd17 | 26 | |
| 44991dd | 27 | .rounded-md { |
| 44991dd | 28 | border-radius: 0.375rem; |
| df4fd17 | 29 | } |
| df4fd17 | 30 | |
| 44991dd | 31 | .repos { |
| 44991dd | 32 | display: grid; |
| 60e980e | 33 | grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); |
| 44991dd | 34 | gap: 1rem; |
| 44991dd | 35 | margin-top: 0.5rem; |
| df4fd17 | 36 | } |
| df4fd17 | 37 | |
| 44991dd | 38 | .title { |
| ada6e53 | 39 | font-size: var(--fs-title-lg); |
| 44991dd | 40 | line-height: 2.25rem; |
| 44991dd | 41 | font-weight: 700; |
| 44991dd | 42 | margin-bottom: 1rem; |
| fe1b28f | 43 | } |
| df4fd17 | 44 | |
| 44991dd | 45 | .firstSection { |
| 44991dd | 46 | display: flex; |
| 44991dd | 47 | flex-direction: column; |
| ec165f1 | 48 | } |
| df4fd17 | 49 | |
| 44991dd | 50 | .firstPara { |
| ec165f1 | 51 | display: flex; |
| 44991dd | 52 | flex-direction: row; |
| ec165f1 | 53 | } |
| df4fd17 | 54 | |
| 44991dd | 55 | .linkUnderline { |
| 44991dd | 56 | text-decoration-line: underline; |
| ec165f1 | 57 | } |
| fe1b28f | 58 | |
| 44991dd | 59 | .gridContainer { |
| ec165f1 | 60 | display: grid; |
| 60e980e | 61 | grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); |
| ada6e53 | 62 | gap: var(--space-gap-fluid); |
| fe1b28f | 63 | } |
| df4fd17 | 64 | |
| 44991dd | 65 | .repo { |
| 44991dd | 66 | text-overflow: ellipsis; |
| 44991dd | 67 | overflow: hidden; |
| 44991dd | 68 | padding: 0.5rem; |
| 44991dd | 69 | background: var(--color-box-bg); |
| 44991dd | 70 | color: var(--color-text); |
| 44991dd | 71 | font-size: 0.95rem; |
| ec165f1 | 72 | |
| 44991dd | 73 | a { |
| 44991dd | 74 | color: var(--color-link); |
| 44991dd | 75 | } |
| ec165f1 | 76 | |
| 44991dd | 77 | h4 { |
| 44991dd | 78 | font-size: 1.05rem; |
| 44991dd | 79 | font-weight: 500; |
| 44991dd | 80 | line-height: 1.2; |
| 44991dd | 81 | border-bottom: 1px solid #495057; |
| 44991dd | 82 | text-overflow: ellipsis; |
| 44991dd | 83 | white-space: nowrap; |
| 44991dd | 84 | overflow: hidden; |
| 44991dd | 85 | margin-bottom: 0; |
| 44991dd | 86 | padding: 0; |
| ec165f1 | 87 | } |
| ec165f1 | 88 | |
| 44991dd | 89 | .tags { |
| 44991dd | 90 | margin-top: 0.5rem; |
| 44991dd | 91 | display: flex; |
| 44991dd | 92 | flex-wrap: wrap; |
| 44991dd | 93 | gap: 0.25rem; |
| ec165f1 | 94 | } |
| ec165f1 | 95 | |
| 44991dd | 96 | .tag { |
| 44991dd | 97 | color: var(--color-tag); |
| 44991dd | 98 | padding: 0.15rem 0.5rem 0.5rem 0rem; |
| 44991dd | 99 | border-radius: 0.25rem; |
| 44991dd | 100 | font-size: 0.95rem; |
| ec165f1 | 101 | font-weight: 500; |
| ec165f1 | 102 | } |
| ec165f1 | 103 | } |
| df4fd17 | 104 | |
| 44991dd | 105 | .interests { |
| 44991dd | 106 | ul { |
| 44991dd | 107 | display: grid; |
| 44991dd | 108 | gap: 0.5rem; |
| 44991dd | 109 | grid-template-columns: auto auto auto; |
| 44991dd | 110 | text-align: center; |
| 44991dd | 111 | margin-top: 0.5rem; |
| 44991dd | 112 | font-size: 1.1rem; |
| 44991dd | 113 | |
| 44991dd | 114 | li { |
| 44991dd | 115 | background-color: var(--color-box-bg); |
| 44991dd | 116 | padding: 0.25rem; |
| 44991dd | 117 | } |
| 44991dd | 118 | } |
| ec165f1 | 119 | } |
| df4fd17 | 120 | |
| 44991dd | 121 | .contact { |
| 44991dd | 122 | ul { |
| 44991dd | 123 | display: grid; |
| 44991dd | 124 | gap: 0.5rem; |
| 44991dd | 125 | grid-template-columns: auto; |
| 44991dd | 126 | margin-top: 0.5rem; |
| ec165f1 | 127 | |
| 44991dd | 128 | li { |
| 44991dd | 129 | display: flex; |
| 44991dd | 130 | flex-direction: row; |
| 44991dd | 131 | align-items: baseline; |
| 44991dd | 132 | padding: 0.25rem; |
| 44991dd | 133 | background-color: var(--color-box-bg); |
| ada6e53 | 134 | font-size: var(--fs-sm); |
| 44991dd | 135 | |
| 44991dd | 136 | @media (max-width: 720px) { |
| 44991dd | 137 | flex-direction: column; |
| 44991dd | 138 | } |
| 44991dd | 139 | } |
| 44991dd | 140 | |
| 44991dd | 141 | a { |
| 44991dd | 142 | color: var(--color-link); |
| 44991dd | 143 | } |
| 44991dd | 144 | |
| 44991dd | 145 | strong { |
| 44991dd | 146 | font-weight: 500; |
| 44991dd | 147 | margin-left: 0.25rem; |
| 44991dd | 148 | margin-right: 0.5rem; |
| 44991dd | 149 | } |
| ec165f1 | 150 | } |
| 44991dd | 151 | } |
| ec165f1 | 152 | |
| 44991dd | 153 | .tools { |
| 44991dd | 154 | img { |
| 44991dd | 155 | width: 36px; |
| 44991dd | 156 | height: 36px; |
| 44991dd | 157 | } |
| ec165f1 | 158 | |
| 44991dd | 159 | ul { |
| 44991dd | 160 | display: grid; |
| 44991dd | 161 | gap: 0.5rem; |
| 60e980e | 162 | grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); |
| 44991dd | 163 | text-align: center; |
| 44991dd | 164 | margin-top: 0.5rem; |
| 44991dd | 165 | |
| 44991dd | 166 | li { |
| ec165f1 | 167 | display: flex; |
| ec165f1 | 168 | align-items: center; |
| 44991dd | 169 | background-color: var(--color-box-bg); |
| 44991dd | 170 | padding: 0.25rem; |
| 44991dd | 171 | font-size: 1rem; |
| ec165f1 | 172 | |
| 44991dd | 173 | a { |
| 44991dd | 174 | display: flex; |
| ec165f1 | 175 | flex: 1; |
| 44991dd | 176 | flex-direction: row; |
| 44991dd | 177 | align-items: center; |
| 44991dd | 178 | text-align: left; |
| 44991dd | 179 | margin-left: 0.25rem; |
| 44991dd | 180 | margin-right: 0.25rem; |
| 44991dd | 181 | |
| 44991dd | 182 | div { |
| 44991dd | 183 | flex: 1; |
| 44991dd | 184 | } |
| ec165f1 | 185 | } |
| ec165f1 | 186 | } |
| ec165f1 | 187 | } |
| ec165f1 | 188 | } |
| fe1b28f | 189 | } |