From 7cd5a2a353bb3e743b98dec374b1888a37b6f9f3 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 25 Feb 2024 19:45:11 +0000 Subject: [PATCH] Mobile responsivness --- web/README.md | 54 -------- web/README.txt | 127 ++++++++++++++++++ web/src/components/Hero.astro | 6 + web/src/components/scafold/NavBar.astro | 6 + .../components/things/ItemGitHubMetrics.astro | 1 + web/src/components/things/ServiceList.astro | 2 + web/src/pages/browse.astro | 4 + web/src/pages/index.astro | 8 ++ 8 files changed, 154 insertions(+), 54 deletions(-) delete mode 100644 web/README.md create mode 100644 web/README.txt diff --git a/web/README.md b/web/README.md deleted file mode 100644 index 1db3fb3..0000000 --- a/web/README.md +++ /dev/null @@ -1,54 +0,0 @@ -# Astro Starter Kit: Basics - -```sh -npm create astro@latest -- --template basics -``` - -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) -[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) -[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) - -> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! - -![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554) - -## 🚀 Project Structure - -Inside of your Astro project, you'll see the following folders and files: - -```text -/ -├── public/ -│ └── favicon.svg -├── src/ -│ ├── components/ -│ │ └── Card.astro -│ ├── layouts/ -│ │ └── Layout.astro -│ └── pages/ -│ └── index.astro -└── package.json -``` - -Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. - -There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. - -Any static assets, like images, can be placed in the `public/` directory. - -## 🧞 Commands - -All commands are run from the root of the project, from a terminal: - -| Command | Action | -| :------------------------ | :----------------------------------------------- | -| `npm install` | Installs dependencies | -| `npm run dev` | Starts local dev server at `localhost:4321` | -| `npm run build` | Build your production site to `./dist/` | -| `npm run preview` | Preview your build locally, before deploying | -| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | -| `npm run astro -- --help` | Get help using the Astro CLI | - -## 👀 Want to learn more? - -Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). diff --git a/web/README.txt b/web/README.txt new file mode 100644 index 0000000..f8532de --- /dev/null +++ b/web/README.txt @@ -0,0 +1,127 @@ + +WEBSITE SOURCE CODE +------------------- +This is the source code for the awesome-privacy website, which is deployed at +https://awesome-privacy.xyz. + +================================================================================ + +DEVELOPMENT SETUP +----------------- +To get started, you'll need Node and Git installed. +Then run the following commands: + +# 1. Clone the repo +git clone git@github.com:Lissy93/awesome-privacy.git +# 2. Navigate into it +cd awesome-privacy/web +# 3. Install dependencies +yarn install +# 4. Start the development server +yarn dev +5. Open browser +open http://127.0.0.1:4321 + +================================================================================ + +DEPLOYMENT +---------- +You have several options for deploying your own instance of Awesome Privacy +Option 1) Run `yarn build`, and copy the contents of `dist` to any web server/ CDN +Option 2) Fork the repo and import it to a provider of your choice (Netlify or Vercel) +Option 3) Use the included Dockerfile to build and run the application on any server + +================================================================================ + +TECHNOLOGY +---------- +The website is built with Astro, and statically generated at build-time. +This means that changes to the data will not be reflected until the site is rebuilt. +Dynamic elems (search + comments) are built as Svelte islands, and rehydrated at runtime. +Most the code is written in Typescript. We're not using a CSS library, just plain SASS. + +The site also uses: +- Fuse.js for fuzzy search +- js-yaml for parsing YAML +- marked for markdown rendering +- fontawesome for iconography + +================================================================================ + +DATA +---- +All data relating to software/apps/services used on the website is pulled from: +https://github.com/Lissy93/awesome-privacy/blob/main/awesome-privacy.yml (CC0-1.0) +If you only wish to update content, there's no need to edit the site's source code + +================================================================================ + +SITE STRUCTURE +-------------- +All views are located in /src/pages. +The general site structure is as follows: + +/ +├── about +├── search +│ └── [query] +├── browse +└── [category-name] + └── [section] + └── [service] + +Assets in /public will be served from the top-level (favicon, pwa assets, sitemap) + +================================================================================ + +THIRD-PARTY SERVICES +-------------------- + +Infra: +- Vercel - This is where the site is hosted +- GitHub - This is where the source code is stored +- Cloudflare - This is where the domain is managed + +Monitoring: +- Plausible (self-hosted) - For basic hit counting and traffic stats + (this does NOT collect nor store IP, user agent or any other personal info) +- GlitchTip (self-hosted) - For error tracking and reporting +- UptimeKuma (self-hosted) - For down detection and basic monitoring + +External Requests: +- Service icons are pulled from the respective service's website +- Comments are handled by Remark42 (self-hosted) +- Fonts which can not be loaded from /public will fallback to Google Fonts CDN +- Service icons which are not found, will be replaced from icon.horse +- Open source stats on services are fetched from the GitHub API + +================================================================================ + +LICENSE +------- +The data (in /awesome-privacy.yml) is licensed under Creative Commons CC0-1.0 +The website source code, and all other content is licensed under the MIT License + +(C) Alicia Sykes 2024 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sub-license, and/or sell +copies of the Software, and to permit persons to whom the Software is furnished +to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included install +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANT ABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL +THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +================================================================================ + + + diff --git a/web/src/components/Hero.astro b/web/src/components/Hero.astro index d9b071a..f0d0c67 100644 --- a/web/src/components/Hero.astro +++ b/web/src/components/Hero.astro @@ -48,6 +48,9 @@ import FontAwesome from "@components/form/FontAwesome.svelte" display: flex; flex-direction: column; gap: 2rem; + @media(max-width: 768px) { + padding: 2rem 1rem; + } } svg { position: absolute; @@ -71,6 +74,9 @@ import FontAwesome from "@components/form/FontAwesome.svelte" -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--foreground); text-shadow: 3px 3px 0 var(--foreground); + @media(max-width: 768px) { + font-size: 4rem; + } } .intro { text-align: center; diff --git a/web/src/components/scafold/NavBar.astro b/web/src/components/scafold/NavBar.astro index 84dd56d..8171255 100644 --- a/web/src/components/scafold/NavBar.astro +++ b/web/src/components/scafold/NavBar.astro @@ -86,5 +86,11 @@ import FontAwesome from "@components/form/FontAwesome.svelte" } } } + .homepage, nav { + @media(max-width: 768px) { + margin: 0 auto; + a { border: none; } + } + } } diff --git a/web/src/components/things/ItemGitHubMetrics.astro b/web/src/components/things/ItemGitHubMetrics.astro index 5cd1d85..8763280 100644 --- a/web/src/components/things/ItemGitHubMetrics.astro +++ b/web/src/components/things/ItemGitHubMetrics.astro @@ -119,6 +119,7 @@ const { gap: 1rem; font-size: 0.9rem; opacity: 0.6; + flex-wrap: wrap; span { display: flex; align-items: center; diff --git a/web/src/components/things/ServiceList.astro b/web/src/components/things/ServiceList.astro index 3359a36..35e4dc5 100644 --- a/web/src/components/things/ServiceList.astro +++ b/web/src/components/things/ServiceList.astro @@ -133,6 +133,7 @@ const { services, subHeading, buttonLink, noGitHubMetrics } = Astro.props; display: flex; align-items: center; gap: 0.5rem; + flex-wrap: wrap; h3, h4 { margin: 0; font-size: 1.6rem; @@ -172,6 +173,7 @@ const { services, subHeading, buttonLink, noGitHubMetrics } = Astro.props; .service-stats { display: flex; gap: 1rem; + flex-wrap: wrap; } .meta-item, .warning { display: flex; diff --git a/web/src/pages/browse.astro b/web/src/pages/browse.astro index 2d61557..d454ff9 100644 --- a/web/src/pages/browse.astro +++ b/web/src/pages/browse.astro @@ -165,6 +165,10 @@ if (typeof window !== 'undefined') { width: 85vw; max-width: 1800px; padding: 1rem 0 2rem 0; + @media(max-width: 768px) { + padding: 0; + width: 95%; + } .category { background: var(--accent-fg); border: 2px solid var(--foreground); diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro index 400c9a2..dccd3f0 100644 --- a/web/src/pages/index.astro +++ b/web/src/pages/index.astro @@ -76,6 +76,9 @@ const description = 'Privacy is a fundamental human right; ' max-width: calc(100% - 5rem); font-size: 20px; line-height: 1.6; + @media(max-width: 768px) { + padding: 0; + } .view-all { text-align: center; width: 16rem; @@ -129,6 +132,7 @@ const description = 'Privacy is a fundamental human right; ' .categories { columns: 6 300px; column-gap: 1rem; + padding: 0; .category { background: var(--accent-fg); border: 2px solid var(--foreground); @@ -139,6 +143,10 @@ const description = 'Privacy is a fundamental human right; ' display: inline-flex; flex-direction: column; margin: 1rem; + @media(max-width: 768px) { + margin: 1rem 0; + width: 90%; + } .category-title { text-decoration: none; color: var(--foreground);