website
git clone https://git.pyrossh.dev/website
木 Personal website of pyrossh. Built with astrojs, shiki, vite.
assets/css/workers/only-bible-app.css
| df4fd17 | 1 | .page-container { |
| df4fd17 | 2 | display: flex; |
| df4fd17 | 3 | flex: 1; |
| df4fd17 | 4 | flex-direction: column; |
| df4fd17 | 5 | padding-bottom: 16rem; /* pb-64 */ |
| df4fd17 | 6 | } |
| df4fd17 | 7 | |
| df4fd17 | 8 | .content-column { |
| df4fd17 | 9 | display: flex; |
| df4fd17 | 10 | flex-direction: column; |
| df4fd17 | 11 | align-items: center; |
| df4fd17 | 12 | } |
| df4fd17 | 13 | |
| df4fd17 | 14 | .hero-section { |
| df4fd17 | 15 | display: block; |
| df4fd17 | 16 | margin-bottom: 1rem; /* mb-4 */ |
| df4fd17 | 17 | } |
| df4fd17 | 18 | |
| df4fd17 | 19 | .main-title { |
| df4fd17 | 20 | display: flex; |
| df4fd17 | 21 | flex-direction: column; |
| df4fd17 | 22 | align-items: center; |
| df4fd17 | 23 | font-size: 1.875rem; /* text-3xl */ |
| df4fd17 | 24 | line-height: 2.25rem; /* text-3xl */ |
| df4fd17 | 25 | font-weight: 700; /* font-bold */ |
| df4fd17 | 26 | text-align: center; |
| df4fd17 | 27 | } |
| df4fd17 | 28 | |
| df4fd17 | 29 | .app-icon-title { |
| df4fd17 | 30 | margin-right: 0.5rem; /* mr-2 */ |
| df4fd17 | 31 | border-radius: 0.75rem; /* rounded-xl */ |
| df4fd17 | 32 | } |
| df4fd17 | 33 | |
| df4fd17 | 34 | .features-list { |
| df4fd17 | 35 | text-align: center; |
| df4fd17 | 36 | display: flex; |
| df4fd17 | 37 | flex-direction: column; |
| df4fd17 | 38 | font-size: 1.125rem; /* text-lg */ |
| df4fd17 | 39 | line-height: 1.75rem; /* text-lg */ |
| df4fd17 | 40 | } |
| df4fd17 | 41 | |
| df4fd17 | 42 | .cta-section { |
| df4fd17 | 43 | display: flex; |
| df4fd17 | 44 | flex: 1; |
| df4fd17 | 45 | flex-direction: column; |
| df4fd17 | 46 | align-items: center; |
| df4fd17 | 47 | } |
| df4fd17 | 48 | |
| df4fd17 | 49 | .cta-title { |
| df4fd17 | 50 | margin: 0; |
| df4fd17 | 51 | margin-top: 1rem; /* my-4 */ |
| df4fd17 | 52 | margin-bottom: 1rem; /* my-4 */ |
| df4fd17 | 53 | font-weight: 700; /* font-bold */ |
| df4fd17 | 54 | font-size: 1.25rem; /* text-xl */ |
| df4fd17 | 55 | line-height: 1.75rem; /* text-xl */ |
| df4fd17 | 56 | } |
| df4fd17 | 57 | |
| df4fd17 | 58 | .store-links-container { |
| df4fd17 | 59 | display: flex; |
| df4fd17 | 60 | flex-direction: column; |
| df4fd17 | 61 | } |
| df4fd17 | 62 | |
| df4fd17 | 63 | .playstore-link { |
| df4fd17 | 64 | margin-top: 1rem; /* mt-4 */ |
| df4fd17 | 65 | } |
| df4fd17 | 66 | |
| df4fd17 | 67 | .appstore-link { |
| df4fd17 | 68 | margin-top: 2rem; /* mt-8 */ |
| df4fd17 | 69 | } |
| df4fd17 | 70 | |
| df4fd17 | 71 | /* Small screen adjustments (sm:) */ |
| df4fd17 | 72 | @media (min-width: 640px) { |
| df4fd17 | 73 | .page-container { |
| df4fd17 | 74 | flex-direction: row; |
| df4fd17 | 75 | } |
| df4fd17 | 76 | .content-column { |
| df4fd17 | 77 | align-items: flex-start; |
| df4fd17 | 78 | } |
| df4fd17 | 79 | .main-title { |
| df4fd17 | 80 | flex-direction: row; /* default for flex, but explicit here */ |
| df4fd17 | 81 | align-items: flex-start; |
| df4fd17 | 82 | margin: 0; /* sm:m-0 */ |
| df4fd17 | 83 | text-align: left; /* sm:text-left */ |
| df4fd17 | 84 | } |
| df4fd17 | 85 | .features-list { |
| df4fd17 | 86 | text-align: left; /* sm:text-left */ |
| df4fd17 | 87 | margin-top: 1.25rem; /* sm:mt-5 */ |
| df4fd17 | 88 | } |
| df4fd17 | 89 | .cta-section { |
| df4fd17 | 90 | align-items: flex-start; |
| df4fd17 | 91 | } |
| df4fd17 | 92 | .store-links-container { |
| df4fd17 | 93 | flex-direction: row; |
| df4fd17 | 94 | } |
| df4fd17 | 95 | .playstore-link { |
| df4fd17 | 96 | margin-top: 0; /* sm:mt-0 */ |
| df4fd17 | 97 | margin-right: 0.5rem; /* sm:mr-2 */ |
| df4fd17 | 98 | } |
| df4fd17 | 99 | .appstore-link { |
| df4fd17 | 100 | margin-top: 0; /* sm:mt-0 */ |
| df4fd17 | 101 | } |
| df4fd17 | 102 | /* .screenshots-section { |
| df4fd17 | 103 | display: flex; |
| df4fd17 | 104 | flex: 1; |
| df4fd17 | 105 | justify-content: flex-end; |
| df4fd17 | 106 | padding-bottom: 9rem; |
| df4fd17 | 107 | } */ |
| df4fd17 | 108 | } |
| df4fd17 | 109 | |
| df4fd17 | 110 | /* Large screen adjustments (lg:) */ |
| df4fd17 | 111 | @media (min-width: 1024px) { |
| df4fd17 | 112 | .main-title { |
| df4fd17 | 113 | line-height: 1; /* lg:leading-tight */ |
| df4fd17 | 114 | } |
| df4fd17 | 115 | } |