~repos /website

#astro#js#html#css

GIT_CONFIG_PARAMETERS="'http.version=HTTP/1.1'" git clone https://git.pyrossh.dev/website.git
Discussions: https://groups.google.com/g/rust-embed-devs

木 Personal website of pyrossh. Built with astrojs, shiki, vite.


astro.config.mjs CHANGED
@@ -22,6 +22,9 @@ export default defineConfig({
22
22
  }]
23
23
  },
24
24
  vite: {
25
+ plugins:
26
+ [
25
- plugins: [tailwindcss()],
27
+ tailwindcss()
28
+ ],
26
29
  },
27
30
  });
bun.lock CHANGED
@@ -17,6 +17,7 @@
17
17
  "devDependencies": {
18
18
  "@playwright/test": "^1.52.0",
19
19
  "@types/node": "^22.15.3",
20
+ "mistcss": "^1.0.6",
20
21
  },
21
22
  },
22
23
  },
@@ -423,6 +424,8 @@
423
424
 
424
425
  "fsevents": ["[email protected]", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
425
426
 
427
+ "function-bind": ["[email protected]", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
428
+
426
429
  "get-east-asian-width": ["[email protected]", "", {}, "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ=="],
427
430
 
428
431
  "github-slugger": ["[email protected]", "", {}, "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="],
@@ -431,6 +434,8 @@
431
434
 
432
435
  "h3": ["[email protected]", "", { "dependencies": { "cookie-es": "^1.2.2", "crossws": "^0.3.3", "defu": "^6.1.4", "destr": "^2.0.3", "iron-webcrypto": "^1.2.1", "node-mock-http": "^1.0.0", "radix3": "^1.1.2", "ufo": "^1.5.4", "uncrypto": "^0.1.3" } }, "sha512-+ORaOBttdUm1E2Uu/obAyCguiI7MbBvsLTndc3gyK3zU+SYLoZXlyCP9Xgy0gikkGufFLTZXCXD6+4BsufnmHA=="],
433
436
 
437
+ "hasown": ["[email protected]", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
438
+
434
439
  "hast-util-from-html": ["[email protected]", "", { "dependencies": { "@types/hast": "^3.0.0", "devlop": "^1.1.0", "hast-util-from-parse5": "^8.0.0", "parse5": "^7.0.0", "vfile": "^6.0.0", "vfile-message": "^4.0.0" } }, "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw=="],
435
440
 
436
441
  "hast-util-from-parse5": ["[email protected]", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "devlop": "^1.0.0", "hastscript": "^9.0.0", "property-information": "^7.0.0", "vfile": "^6.0.0", "vfile-location": "^5.0.0", "web-namespaces": "^2.0.0" } }, "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg=="],
@@ -473,6 +478,8 @@
473
478
 
474
479
  "is-arrayish": ["[email protected]", "", {}, "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="],
475
480
 
481
+ "is-core-module": ["[email protected]", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="],
482
+
476
483
  "is-decimal": ["[email protected]", "", {}, "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A=="],
477
484
 
478
485
  "is-docker": ["[email protected]", "", { "bin": { "is-docker": "cli.js" } }, "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ=="],
@@ -633,6 +640,8 @@
633
640
 
634
641
  "micromark-util-types": ["[email protected]", "", {}, "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA=="],
635
642
 
643
+ "mistcss": ["[email protected]", "", { "dependencies": { "postcss-import": "^16.1.0", "postcss-selector-parser": "^6.1.2" } }, "sha512-H2iGZHCmQxZFfkuwYnd1uqrDf5Y5gibVwmo8+1QVhYxnXJ7hAp4TQaScOMGyVS/ELZ2034VQBoE4CyIjubln5g=="],
644
+
636
645
  "mrmime": ["[email protected]", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
637
646
 
638
647
  "ms": ["[email protected]", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
@@ -675,16 +684,26 @@
675
684
 
676
685
  "parse5": ["[email protected]", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
677
686
 
687
+ "path-parse": ["[email protected]", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
688
+
678
689
  "picocolors": ["[email protected]", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
679
690
 
680
691
  "picomatch": ["[email protected]", "", {}, "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg=="],
681
692
 
693
+ "pify": ["[email protected]", "", {}, "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="],
694
+
682
695
  "playwright": ["[email protected]", "", { "dependencies": { "playwright-core": "1.52.0" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw=="],
683
696
 
684
697
  "playwright-core": ["[email protected]", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg=="],
685
698
 
686
699
  "postcss": ["[email protected]", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],
687
700
 
701
+ "postcss-import": ["[email protected]", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg=="],
702
+
703
+ "postcss-selector-parser": ["[email protected]", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
704
+
705
+ "postcss-value-parser": ["[email protected]", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
706
+
688
707
  "prismjs": ["[email protected]", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
689
708
 
690
709
  "prompts": ["[email protected]", "", { "dependencies": { "kleur": "^3.0.3", "sisteransi": "^1.0.5" } }, "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q=="],
@@ -693,6 +712,8 @@
693
712
 
694
713
  "radix3": ["[email protected]", "", {}, "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA=="],
695
714
 
715
+ "read-cache": ["[email protected]", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
716
+
696
717
  "readdirp": ["[email protected]", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
697
718
 
698
719
  "recma-build-jsx": ["[email protected]", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="],
@@ -731,6 +752,8 @@
731
752
 
732
753
  "remark-stringify": ["[email protected]", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw=="],
733
754
 
755
+ "resolve": ["[email protected]", "", { "dependencies": { "is-core-module": "^2.16.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w=="],
756
+
734
757
  "restructure": ["[email protected]", "", {}, "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw=="],
735
758
 
736
759
  "retext": ["[email protected]", "", { "dependencies": { "@types/nlcst": "^2.0.0", "retext-latin": "^4.0.0", "retext-stringify": "^4.0.0", "unified": "^11.0.0" } }, "sha512-sbMDcpHCNjvlheSgMfEcVrZko3cDzdbe1x/e7G66dFp0Ff7Mldvi2uv6JkJQzdRcvLYE8CA8Oe8siQx8ZOgTcA=="],
@@ -781,6 +804,8 @@
781
804
 
782
805
  "style-to-object": ["[email protected]", "", { "dependencies": { "inline-style-parser": "0.2.4" } }, "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g=="],
783
806
 
807
+ "supports-preserve-symlinks-flag": ["[email protected]", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
808
+
784
809
  "tailwindcss": ["[email protected]", "", {}, "sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A=="],
785
810
 
786
811
  "tapable": ["[email protected]", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="],
@@ -845,6 +870,8 @@
845
870
 
846
871
  "unstorage": ["[email protected]", "", { "dependencies": { "anymatch": "^3.1.3", "chokidar": "^4.0.3", "destr": "^2.0.3", "h3": "^1.15.0", "lru-cache": "^10.4.3", "node-fetch-native": "^1.6.6", "ofetch": "^1.4.1", "ufo": "^1.5.4" }, "peerDependencies": { "@azure/app-configuration": "^1.8.0", "@azure/cosmos": "^4.2.0", "@azure/data-tables": "^13.3.0", "@azure/identity": "^4.6.0", "@azure/keyvault-secrets": "^4.9.0", "@azure/storage-blob": "^12.26.0", "@capacitor/preferences": "^6.0.3", "@deno/kv": ">=0.9.0", "@netlify/blobs": "^6.5.0 || ^7.0.0 || ^8.1.0", "@planetscale/database": "^1.19.0", "@upstash/redis": "^1.34.3", "@vercel/blob": ">=0.27.1", "@vercel/kv": "^1.0.1", "aws4fetch": "^1.0.20", "db0": ">=0.2.1", "idb-keyval": "^6.2.1", "ioredis": "^5.4.2", "uploadthing": "^7.4.4" }, "optionalPeers": ["@azure/app-configuration", "@azure/cosmos", "@azure/data-tables", "@azure/identity", "@azure/keyvault-secrets", "@azure/storage-blob", "@capacitor/preferences", "@deno/kv", "@netlify/blobs", "@planetscale/database", "@upstash/redis", "@vercel/blob", "@vercel/kv", "aws4fetch", "db0", "idb-keyval", "ioredis", "uploadthing"] }, "sha512-m40eHdGY/gA6xAPqo8eaxqXgBuzQTlAKfmB1iF7oCKXE1HfwHwzDJBywK+qQGn52dta+bPlZluPF7++yR3p/bg=="],
847
872
 
873
+ "util-deprecate": ["[email protected]", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
874
+
848
875
  "vfile": ["[email protected]", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
849
876
 
850
877
  "vfile-location": ["[email protected]", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg=="],
jsconfig.json DELETED
@@ -1,14 +0,0 @@
1
- {
2
- "extends": "./.svelte-kit/tsconfig.json",
3
- "compilerOptions": {
4
- "allowJs": true,
5
- "checkJs": true,
6
- "esModuleInterop": true,
7
- "forceConsistentCasingInFileNames": true,
8
- "resolveJsonModule": true,
9
- "skipLibCheck": true,
10
- "sourceMap": true,
11
- "strict": true,
12
- "moduleResolution": "bundler"
13
- }
14
- }
src/components/Footer.astro CHANGED
@@ -7,9 +7,9 @@ const today = new Date();
7
7
  <footer>
8
8
  <Wrapper>
9
9
  <div class="container">
10
- <div class="flex-1"></div>
10
+ <div class="spacer"></div>
11
- <div class="flex items-center justify-center mx-2">
11
+ <div class="copyright-container">
12
- <span class="text-base text-gray-200 hover:no-underline mr-2">
12
+ <span>
13
13
  Copyright © {today.getFullYear()}
14
14
  <a class="link" href="https://git.sr.ht/~pyrossh/"> pyrossh </a>
15
15
  </span>
@@ -29,7 +29,23 @@ const today = new Date();
29
29
  padding: 16px 0px;
30
30
  }
31
31
 
32
+ .spacer {
33
+ flex: 1;
34
+ }
35
+
36
+ .copyright-container {
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ margin-left: 0.5rem;
41
+ margin-right: 0.5rem;
42
+ }
43
+
32
44
  .link {
45
+ font-size: 1rem;
46
+ line-height: 1.5rem;
47
+ color: var(--color-gray-200);
48
+ margin-right: 0.5rem;
33
49
  color: var(--color-white);
34
50
  font-weight: 500;
35
51
  text-underline-offset: 2px;
src/pages/cv/index.astro CHANGED
@@ -16,7 +16,7 @@ import Layout from "@/layouts/Base.astro";
16
16
  <ul>
17
17
  <li>
18
18
  <h6>John Lewis <span>(Mar '21 - Aug '24)</span></h6>
19
- <ul class="*:list-disc">
19
+ <ul>
20
20
  <li>
21
21
  Built a quiz memory game with leaderboard scoring to improve
22
22
  engagement during Christmas
@@ -46,7 +46,7 @@ import Layout from "@/layouts/Base.astro";
46
46
  </li>
47
47
  <li>
48
48
  <h6>iOWNA <span>(Mar '20 - Mar '21)</span></h6>
49
- <ul class="*:list-disc">
49
+ <ul>
50
50
  <li>
51
51
  Built a Content Editor for curators to create content on our
52
52
  platform
@@ -74,7 +74,7 @@ import Layout from "@/layouts/Base.astro";
74
74
  </li>
75
75
  <li>
76
76
  <h6>Zeta <span>(Nov '19 - Feb '20)</span></h6>
77
- <ul class="*:list-disc">
77
+ <ul>
78
78
  <li>
79
79
  Added multiple download formats (pdf,html,xlsx) for reports in
80
80
  the Reporting Center
@@ -103,7 +103,7 @@ import Layout from "@/layouts/Base.astro";
103
103
  </li>
104
104
  <li>
105
105
  <h6>Lifebox <span>(Oct '18 - Oct '19)</span></h6>
106
- <ul class="*:list-disc">
106
+ <ul>
107
107
  <li>
108
108
  Added search functionality to the hospital procedure codes
109
109
  </li>
@@ -140,7 +140,7 @@ import Layout from "@/layouts/Base.astro";
140
140
  freeing up a lot of effort, time and heart-burn, to help your business
141
141
  grow.
142
142
  </h5>
143
- <ul class="*:list-disc">
143
+ <ul>
144
144
  <li>
145
145
  Implemented new features and fixed bugs on the numberz android app
146
146
  </li>
@@ -194,7 +194,7 @@ import Layout from "@/layouts/Base.astro";
194
194
  Playlyfe is an online Gamification Platform which empowers anyone to
195
195
  design and implement a gamified system.
196
196
  </h5>
197
- <ul class="*:list-disc">
197
+ <ul>
198
198
  <li>
199
199
  Built the Playlyfe Hybrid Mobile app using Phonegap for Android and
200
200
  iOS
src/pages/index.astro CHANGED
@@ -9,12 +9,12 @@ import styles from "./index.module.css";
9
9
  title="pyrossh"
10
10
  description="Tech Lead from Bangalore who likes to create frameworks and programming languages."
11
11
  >
12
- <div class="mx-auto mb-10">
12
+ <div class={styles.pageContainer}>
13
13
  <div>
14
- <h1 class="text-3xl font-bold mb-4">Hello!</h1>
14
+ <h1 class={styles.title}>Hello!</h1>
15
15
  <p>
16
16
  <a
17
- class="underline"
17
+ class={styles.linkUnderline}
18
18
  href="https://www.linkedin.com/in/pyrossh"
19
19
  target="_blank"
20
20
  rel="noopener noreferrer"
@@ -26,11 +26,12 @@ import styles from "./index.module.css";
26
26
  I like to build frameworks and automate common tasks to make it easier to
27
27
  develop applications.
28
28
  </p>
29
+ <button data-variant="primary">Button 1</button>
29
30
  <p>
30
31
  I enjoy working on open-source projects, and during the last decade,
31
32
  I've created a number of projects that are widely used.
32
33
  </p>
33
- <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
34
+ <div class={styles.gridContainer}>
34
35
  <section class={styles.interests}>
35
36
  <h2>Interests</h2>
36
37
  <ul>
src/pages/index.module.css CHANGED
@@ -26,6 +26,47 @@ section {
26
26
  }
27
27
  }
28
28
 
29
+ .pageContainer {
30
+ margin-left: auto;
31
+ margin-right: auto;
32
+ margin-bottom: 2.5rem;
33
+ /* mb-10 */
34
+ }
35
+
36
+ .title {
37
+ font-size: 1.875rem;
38
+ /* text-3xl */
39
+ line-height: 2.25rem;
40
+ /* text-3xl */
41
+ font-weight: 700;
42
+ /* font-bold */
43
+ margin-bottom: 1rem;
44
+ /* mb-4 */
45
+ }
46
+
47
+ .linkUnderline {
48
+ text-decoration-line: underline;
49
+ }
50
+
51
+ .gridContainer {
52
+ display: grid;
53
+ grid-template-columns: repeat(1, minmax(0, 1fr));
54
+ /* grid-cols-1 */
55
+ gap: 1rem;
56
+ /* gap-4 */
57
+ }
58
+
59
+ @media (min-width: 640px) {
60
+
61
+ /* sm: */
62
+ .gridContainer {
63
+ grid-template-columns: repeat(2, minmax(0, 1fr));
64
+ /* sm:grid-cols-2 */
65
+ gap: 2rem;
66
+ /* sm:gap-8 */
67
+ }
68
+ }
69
+
29
70
  .repo {
30
71
  text-overflow: ellipsis;
31
72
  overflow: hidden;
src/pages/only-bible-app/+layout.svelte DELETED
@@ -1,42 +0,0 @@
1
- <script>
2
- import Copyright from '$lib/components/Copyright.svelte';
3
- /**
4
- * @typedef {Object} Props
5
- * @property {import('svelte').Snippet} [children]
6
- */
7
-
8
- /** @type {Props} */
9
- let { children } = $props();
10
- </script>
11
-
12
- <div class="h-full sm:w-6/12 mx-auto">
13
- <header class="flex flex-col mx-4 text-sm mt-4">
14
- <nav class="flex flex-1 justify-between" aria-label="Global">
15
- <div class="flex flex-1">
16
- <a
17
- class="flex flex-1 items-center text-xl font-semibold text-gray-200 no-underline focus:outline-none focus:ring-1 focus:ring-gray-600"
18
- href="/only-bible-app"
19
- aria-label="Brand"
20
- >
21
- <div class="flex flex-1">Only Bible App</div>
22
- </a>
23
- </div>
24
- <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0">
25
- <a
26
- class="text-gray-300 font-medium focus:outline-none focus:ring-1 no-underline hover:text-neutral-100 focus:ring-neutral-200"
27
- href="/only-bible-app/privacy-policy">Privacy Policy</a
28
- >
29
- <a
30
- class="text-gray-300 font-medium focus:outline-none focus:ring-1 no-underline hover:text-neutral-100 focus:ring-neutral-200"
31
- href="/only-bible-app/terms-and-conditions">Terms & Conditions</a
32
- >
33
- </div>
34
- </nav>
35
- </header>
36
- <main class="flex flex-col mx-4 mt-10 sm:mt-0">
37
- {@render children?.()}
38
- </main>
39
- <footer class="text-center py-5 mt-20">
40
- <Copyright />
41
- </footer>
42
- </div>
src/pages/only-bible-app/index.astro CHANGED
@@ -11,33 +11,27 @@ import AppImagePng from "@/assets/images/app_image.png";
11
11
  title="Only Bible App"
12
12
  description="The only bible app you will ever need"
13
13
  >
14
- <div class="flex flex-1 flex-col sm:flex-row pb-64">
15
- <div class="flex flex-col items-center sm:items-start">
14
+ <div class="page-container">
15
+ <div class="content-column">
16
- <div class="block mb-4">
16
+ <div class="hero-section">
17
- <h1
18
- class="flex flex-col items-center sm:items-start sm:m-0 text-3xl font-bold text-center sm:text-left lg:leading-tight"
19
- >
20
- <Image
21
- class="mr-2 rounded-xl"
17
+ <h1 class="main-title">
22
- src={AppIconPng}
23
- alt="Only Bible App"
18
+ <Image class="app-icon-title" src={AppIconPng} alt="Only Bible App" />
24
- />
25
19
  The only bible app you will ever need
26
20
  </h1>
27
- <div class="text-center sm:text-left flex flex-col text-lg sm:mt-5">
21
+ <div class="features-list">
28
22
  <span>No ads,</span>
29
23
  <span>No in-app purchases,</span>
30
24
  <span>No distractions.</span>
31
25
  <span>Works completely offline.</span>
32
26
  </div>
33
27
  </div>
34
- <div class="flex flex-1 flex-col items-center sm:items-start">
28
+ <div class="cta-section">
35
- <h3 class="m-0 my-4 font-bold text-xl">
29
+ <h3 class="cta-title">
36
30
  What are you waiting for? Get it now! Quickly.
37
31
  </h3>
38
- <div class="flex flex-col sm:flex-row">
32
+ <div class="store-links-container">
39
33
  <a
40
- class="mt-4 sm:mt-0 sm:mr-2"
34
+ class="playstore-link"
41
35
  href="https://play.google.com/store/apps/details?id=dev.pyrossh.onlyBible"
42
36
  rel="noopener noreferrer"
43
37
  target="_blank"
@@ -45,7 +39,7 @@ import AppImagePng from "@/assets/images/app_image.png";
45
39
  <PlayStoreIcon width={196} />
46
40
  </a>
47
41
  <a
48
- class="mt-8 sm:mt-0"
42
+ class="appstore-link"
49
43
  href="https://apps.apple.com/us/app/only-bible-app/id6467606465?itsct=apps_box_badge&itscg=30200"
50
44
  rel="noopener noreferrer"
51
45
  target="_blank"
@@ -55,7 +49,7 @@ import AppImagePng from "@/assets/images/app_image.png";
55
49
  </div>
56
50
  </div>
57
51
  </div>
58
- <!-- <div class="flex flex-1 justify-center sm:justify-end pb-36">
52
+ <!-- <div class="screenshots-section">
59
53
  <Image
60
54
  src="https://play-lh.googleusercontent.com/RHXOXHwSlGPvid-YnzMSGuCtkuBLeV6-PDE1Z8c9f4014oGfr64MSXHgFf1uID0w5mAQ=w1052-h592-rw"
61
55
  alt="app screenshot android"
@@ -71,3 +65,120 @@ import AppImagePng from "@/assets/images/app_image.png";
71
65
  </div> -->
72
66
  </div>
73
67
  </Layout>
68
+ <style>
69
+ .page-container {
70
+ display: flex;
71
+ flex: 1;
72
+ flex-direction: column;
73
+ padding-bottom: 16rem; /* pb-64 */
74
+ }
75
+
76
+ .content-column {
77
+ display: flex;
78
+ flex-direction: column;
79
+ align-items: center;
80
+ }
81
+
82
+ .hero-section {
83
+ display: block;
84
+ margin-bottom: 1rem; /* mb-4 */
85
+ }
86
+
87
+ .main-title {
88
+ display: flex;
89
+ flex-direction: column;
90
+ align-items: center;
91
+ font-size: 1.875rem; /* text-3xl */
92
+ line-height: 2.25rem; /* text-3xl */
93
+ font-weight: 700; /* font-bold */
94
+ text-align: center;
95
+ }
96
+
97
+ .app-icon-title {
98
+ margin-right: 0.5rem; /* mr-2 */
99
+ border-radius: 0.75rem; /* rounded-xl */
100
+ }
101
+
102
+ .features-list {
103
+ text-align: center;
104
+ display: flex;
105
+ flex-direction: column;
106
+ font-size: 1.125rem; /* text-lg */
107
+ line-height: 1.75rem; /* text-lg */
108
+ }
109
+
110
+ .cta-section {
111
+ display: flex;
112
+ flex: 1;
113
+ flex-direction: column;
114
+ align-items: center;
115
+ }
116
+
117
+ .cta-title {
118
+ margin: 0;
119
+ margin-top: 1rem; /* my-4 */
120
+ margin-bottom: 1rem; /* my-4 */
121
+ font-weight: 700; /* font-bold */
122
+ font-size: 1.25rem; /* text-xl */
123
+ line-height: 1.75rem; /* text-xl */
124
+ }
125
+
126
+ .store-links-container {
127
+ display: flex;
128
+ flex-direction: column;
129
+ }
130
+
131
+ .playstore-link {
132
+ margin-top: 1rem; /* mt-4 */
133
+ }
134
+
135
+ .appstore-link {
136
+ margin-top: 2rem; /* mt-8 */
137
+ }
138
+
139
+ /* Small screen adjustments (sm:) */
140
+ @media (min-width: 640px) {
141
+ .page-container {
142
+ flex-direction: row;
143
+ }
144
+ .content-column {
145
+ align-items: flex-start;
146
+ }
147
+ .main-title {
148
+ flex-direction: row; /* default for flex, but explicit here */
149
+ align-items: flex-start;
150
+ margin: 0; /* sm:m-0 */
151
+ text-align: left; /* sm:text-left */
152
+ }
153
+ .features-list {
154
+ text-align: left; /* sm:text-left */
155
+ margin-top: 1.25rem; /* sm:mt-5 */
156
+ }
157
+ .cta-section {
158
+ align-items: flex-start;
159
+ }
160
+ .store-links-container {
161
+ flex-direction: row;
162
+ }
163
+ .playstore-link {
164
+ margin-top: 0; /* sm:mt-0 */
165
+ margin-right: 0.5rem; /* sm:mr-2 */
166
+ }
167
+ .appstore-link {
168
+ margin-top: 0; /* sm:mt-0 */
169
+ }
170
+ /* .screenshots-section {
171
+ display: flex;
172
+ flex: 1;
173
+ justify-content: flex-end;
174
+ padding-bottom: 9rem;
175
+ } */
176
+ }
177
+
178
+ /* Large screen adjustments (lg:) */
179
+ @media (min-width: 1024px) {
180
+ .main-title {
181
+ line-height: 1; /* lg:leading-tight */
182
+ }
183
+ }
184
+ </style>
src/pages/only-bible-app/privacy-policy/index.astro CHANGED
@@ -6,7 +6,7 @@ import Layout from "@/layouts/Base.astro";
6
6
  title="Privacy Policy | Only Bible App"
7
7
  description="Privacy Policy | Only Bible App"
8
8
  >
9
- <h1 class="font-bold text-3xl">Privacy Policy</h1>
9
+ <h1>Privacy Policy</h1>
10
10
  <p>
11
11
  Only Bible App does not collect any information about you or your usage of
12
12
  the app. It does not send any information about you to anyone. It does not
@@ -27,7 +27,9 @@ import Layout from "@/layouts/Base.astro";
27
27
  </Layout>
28
28
  <style>
29
29
  h1 {
30
- font-size: 1.8rem;
30
+ font-size: 1.875rem; /* text-3xl */
31
+ line-height: 2.25rem; /* text-3xl */
32
+ font-weight: 700; /* font-bold */
31
33
  }
32
34
  b {
33
35
  font-weight: 600;
src/pages/only-bible-app/terms-and-conditions/index.astro CHANGED
@@ -6,8 +6,8 @@ import Layout from "@/layouts/Base.astro";
6
6
  title="Terms and Conditions | Only Bible App"
7
7
  description="Terms and Conditions | Only Bible App"
8
8
  >
9
- <div class="pb-10 mt-10">
9
+ <div class="terms-container">
10
- <h1 class="font-bold text-3xl">Terms and Conditions</h1>
10
+ <h1>Terms and Conditions</h1>
11
11
  <p>
12
12
  By downloading or using the app, these terms will automatically apply to
13
13
  you – you should make sure therefore that you read them carefully before
@@ -48,3 +48,26 @@ import Layout from "@/layouts/Base.astro";
48
48
  <strong>[email protected]</strong>
49
49
  </div>
50
50
  </Layout>
51
+ <style>
52
+ .terms-container {
53
+ padding-bottom: 2.5rem; /* pb-10 */
54
+ margin-top: 2.5rem; /* mt-10 */
55
+ }
56
+
57
+ h1 {
58
+ font-weight: 700; /* font-bold */
59
+ font-size: 1.875rem; /* text-3xl */
60
+ line-height: 2.25rem; /* text-3xl */
61
+ }
62
+
63
+ /* Basic styling for h4 and strong for consistency, can be adjusted or removed if global styles exist */
64
+ h4 {
65
+ font-weight: 600;
66
+ margin-top: 0.5rem;
67
+ font-size: 1.17em; /* Default h4 size */
68
+ }
69
+
70
+ strong {
71
+ font-weight: bold;
72
+ }
73
+ </style>
src/pages/posts/index.astro CHANGED
@@ -4,22 +4,24 @@ import FormattedDate from "../../components/FormattedDate.astro";
4
4
  import Layout from "@/layouts/Base.astro";
5
5
 
6
6
  const posts = (await getCollection("content")).sort(
7
- (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
7
+ (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
8
8
  );
9
9
  ---
10
10
 
11
11
  <Layout title="Posts" description="Posts">
12
- <h1 class="font-bold text-3xl">Posts</h1>
12
+ <h1 class="posts-title">Posts</h1>
13
13
  <div class="container">
14
- <ul class="flex flex-col">
14
+ <ul class="posts-list">
15
15
  {
16
16
  posts.map((post) => (
17
- <li class="item grid grid-cols-1 sm:grid-cols-2 gap-3 justify-start items-end mt-5 leading-6">
18
- <div class="flex flex-col">
17
+ <li class="post-list-item">
18
+ <div class="post-list-item__content">
19
19
  <a href={`/posts/${post.id}`}>{post.data.title}</a>
20
- <span class="hover:cursor-default">{post.data.description}</span>
20
+ <span class="post-list-item__description">
21
+ {post.data.description}
22
+ </span>
21
23
  </div>
22
- <span class="flex flex-1 justify-end sm:ml-4 text-md ">
24
+ <span class="post-list-item__date-wrapper">
23
25
  <FormattedDate date={post.data.pubDate} />
24
26
  </span>
25
27
  </li>
@@ -33,19 +35,64 @@ const posts = (await getCollection("content")).sort(
33
35
  display: flex;
34
36
  float: left;
35
37
  }
36
- .item {
37
- a {
38
- color: var(--color-post-link);
39
- text-decoration-line: underline;
40
- text-underline-offset: 4px;
41
- }
42
38
 
39
+ .posts-title {
40
+ font-weight: 700;
41
+ font-size: 1.875rem;
42
+ line-height: 2.25rem;
43
+ }
44
+
45
+ .posts-list {
43
- span {
46
+ display: flex;
47
+ flex-direction: column;
48
+ }
49
+
50
+ .post-list-item {
51
+ display: grid;
52
+ grid-template-columns: repeat(1, minmax(0, 1fr));
53
+ gap: 0.75rem;
54
+ justify-items: start;
55
+ align-items: end;
56
+ margin-top: 1.25rem;
57
+ line-height: 1.5rem;
58
+ }
59
+
60
+ .post-list-item a {
61
+ color: var(--color-post-link);
62
+ text-decoration-line: underline;
63
+ text-underline-offset: 4px;
64
+ }
65
+
66
+ .post-list-item__description {
44
- font-size: 13pt;
67
+ font-size: 13pt;
45
- }
68
+ }
69
+ .post-list-item__description:hover {
70
+ cursor: default;
71
+ }
72
+
73
+ .post-list-item time {
74
+ font-size: 12pt;
75
+ }
46
76
 
77
+ .post-list-item__content {
78
+ display: flex;
79
+ flex-direction: column;
80
+ }
81
+
82
+ .post-list-item__date-wrapper {
83
+ display: flex;
47
- time {
84
+ flex: 1;
85
+ justify-content: flex-end;
48
- font-size: 12pt;
86
+ font-size: 1rem;
87
+ line-height: 1.5rem;
88
+ }
89
+
90
+ @media (min-width: 640px) {
91
+ .post-list-item {
92
+ grid-template-columns: repeat(2, minmax(0, 1fr));
93
+ }
94
+ .post-list-item__date-wrapper {
95
+ margin-left: 1rem;
49
96
  }
50
97
  }
51
98
  </style>