Mobile responsivness
This commit is contained in:
Alicia Sykes
parent
95d9d314b2
commit
7cd5a2a353
|
|
@ -1,54 +0,0 @@
|
|||
# Astro Starter Kit: Basics
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
|
||||
## 🚀 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).
|
||||
|
|
@ -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 <https://aliciasykes.com> 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.
|
||||
|
||||
================================================================================
|
||||
|
||||
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -86,5 +86,11 @@ import FontAwesome from "@components/form/FontAwesome.svelte"
|
|||
}
|
||||
}
|
||||
}
|
||||
.homepage, nav {
|
||||
@media(max-width: 768px) {
|
||||
margin: 0 auto;
|
||||
a { border: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -119,6 +119,7 @@ const {
|
|||
gap: 1rem;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.6;
|
||||
flex-wrap: wrap;
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue