xevion/utsa-handbook
1
0
Fork 0
mirror of https://github.com/Xevion/utsa-handbook.git synced 2025-12-06 01:16:46 -06:00
Code Issues Packages Projects Releases Wiki Activity

SCSS, simplify header, improve README

Browse Source
This commit is contained in:
Xevion
2024-03-10 01:49:24 -06:00
parent 0b6b83eb42
commit 68d9299f11
10 changed files with 189 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
CHANGELOG.md
View File

@@ -1,5 +1,13 @@
# 0.0.2
- Added version/commit hash to the footer
- Added theme toggle to the header
- Culled lots of unnecessary CSS/unused content
- Switched CSS to SCSS
# 0.0.1 # 0.0.1
- Initialized with Astro Sample - Initialized with Astro Sample
- Added [Vercel Deployment](https://handbook.xevion.dev) - Built up the README with Content Ideas, Badges, Formatting
- Built up the README with Content Ideas, Badges, Formatting - Added [CHANGELOG.md](./CHANGELOG.md)
- Added [Vercel Deployment](https://handbook.xevion.dev)

9
README.md
View File

@@ -48,11 +48,11 @@ A handbook for students at [The University of Texas at San Antonio][utsa], with
The UTSA Handbook is intended to be a living document filled with perspectives, opinions and information gathered from numerous students, old and young, incoming and graduated. The UTSA Handbook is intended to be a living document filled with perspectives, opinions and information gathered from numerous students, old and young, incoming and graduated.
- Please consider contributing where If you have something to add, please consider contributing! The process is easier than you think, and is an easy way to participate in open source and contribute to the UTSA CS community.
## Setup ## Setup
This setup guide is very simple and does not cover This setup guide is very simple and does not cover the full process of installation. Expansion will occur in the future.
```bash ```bash
git clone https://github.com/Xevion/utsa-handbook.git git clone https://github.com/Xevion/utsa-handbook.git
@@ -61,6 +61,11 @@ pnpm dev
pnpm build pnpm build
``` ```
## Notes
- All content frontmatter obeys [this](https://github.com/withastro/astro/blob/main/packages/astro-rss/src/schema.ts) schema (for [@astrojs/rss](https://docs.astro.build/en/guides/rss/)).
- Document your changes in [CHANGELOG.md][changelog]. Not required for minor frontmatter changes, but recommended for all other changes.
### Disclaimer ### Disclaimer
This repository is completely unassociated with UTSA or the UTSA Computer Science department. All opinions and those of any contributors are their own and are not made in UTSA or UTSA CS's place. This repository is completely unassociated with UTSA or the UTSA Computer Science department. All opinions and those of any contributors are their own and are not made in UTSA or UTSA CS's place.

5
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "", "name": "handbook",
"type": "module", "type": "module",
"version": "0.0.1", "version": "0.0.2",
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",
@@ -22,6 +22,7 @@
"astro": "^4.4.15", "astro": "^4.4.15",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"sass": "^1.71.1",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"typescript": "^5.4.2" "typescript": "^5.4.2"
} }

34
pnpm-lock.yaml generated
View File

@@ -34,13 +34,16 @@ dependencies:
version: 18.2.21 version: 18.2.21
astro: astro:
specifier: ^4.4.15 specifier: ^4.4.15
version: 4.4.15(@types/node@20.11.25)(typescript@5.4.2) version: 4.4.15(@types/node@20.11.25)(sass@1.71.1)(typescript@5.4.2)
react: react:
specifier: ^18.2.0 specifier: ^18.2.0
version: 18.2.0 version: 18.2.0
react-dom: react-dom:
specifier: ^18.2.0 specifier: ^18.2.0
version: 18.2.0(react@18.2.0) version: 18.2.0(react@18.2.0)
sass:
specifier: ^1.71.1
version: 1.71.1
tailwindcss: tailwindcss:
specifier: ^3.4.1 specifier: ^3.4.1
version: 3.4.1 version: 3.4.1
@@ -150,7 +153,7 @@ packages:
'@astrojs/markdown-remark': 4.2.1 '@astrojs/markdown-remark': 4.2.1
'@mdx-js/mdx': 3.0.1 '@mdx-js/mdx': 3.0.1
acorn: 8.11.3 acorn: 8.11.3
astro: 4.4.15(@types/node@20.11.25)(typescript@5.4.2) astro: 4.4.15(@types/node@20.11.25)(sass@1.71.1)(typescript@5.4.2)
es-module-lexer: 1.4.1 es-module-lexer: 1.4.1
estree-util-visit: 2.0.0 estree-util-visit: 2.0.0
github-slugger: 2.0.0 github-slugger: 2.0.0
@@ -214,7 +217,7 @@ packages:
astro: ^3.0.0 || ^4.0.0 astro: ^3.0.0 || ^4.0.0
tailwindcss: ^3.0.24 tailwindcss: ^3.0.24
dependencies: dependencies:
astro: 4.4.15(@types/node@20.11.25)(typescript@5.4.2) astro: 4.4.15(@types/node@20.11.25)(sass@1.71.1)(typescript@5.4.2)
autoprefixer: 10.4.18(postcss@8.4.35) autoprefixer: 10.4.18(postcss@8.4.35)
postcss: 8.4.35 postcss: 8.4.35
postcss-load-config: 4.0.2(postcss@8.4.35) postcss-load-config: 4.0.2(postcss@8.4.35)
@@ -1054,7 +1057,7 @@ packages:
'@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.24.0) '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.24.0)
'@types/babel__core': 7.20.5 '@types/babel__core': 7.20.5
react-refresh: 0.14.0 react-refresh: 0.14.0
vite: 5.1.5(@types/node@20.11.25) vite: 5.1.5(@types/node@20.11.25)(sass@1.71.1)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: false dev: false
@@ -1231,7 +1234,7 @@ packages:
hasBin: true hasBin: true
dev: false dev: false
/astro@4.4.15(@types/node@20.11.25)(typescript@5.4.2): /astro@4.4.15(@types/node@20.11.25)(sass@1.71.1)(typescript@5.4.2):
resolution: {integrity: sha512-RTiAnlO8hDp6GqMVvaeJxyuCJhHNEho09lHshMNQBqgRabYPOJGW0HZZrbLRGNOqN9I14ivhZIunYGgAaGQpWw==} resolution: {integrity: sha512-RTiAnlO8hDp6GqMVvaeJxyuCJhHNEho09lHshMNQBqgRabYPOJGW0HZZrbLRGNOqN9I14ivhZIunYGgAaGQpWw==}
engines: {node: '>=18.14.1', npm: '>=6.14.0'} engines: {node: '>=18.14.1', npm: '>=6.14.0'}
hasBin: true hasBin: true
@@ -1295,7 +1298,7 @@ packages:
tsconfck: 3.0.3(typescript@5.4.2) tsconfck: 3.0.3(typescript@5.4.2)
unist-util-visit: 5.0.0 unist-util-visit: 5.0.0
vfile: 6.0.1 vfile: 6.0.1
vite: 5.1.5(@types/node@20.11.25) vite: 5.1.5(@types/node@20.11.25)(sass@1.71.1)
vitefu: 0.2.5(vite@5.1.5) vitefu: 0.2.5(vite@5.1.5)
which-pm: 2.1.1 which-pm: 2.1.1
yargs-parser: 21.1.1 yargs-parser: 21.1.1
@@ -2257,6 +2260,10 @@ packages:
resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
dev: false dev: false
/immutable@4.3.5:
resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
dev: false
/import-meta-resolve@4.0.0: /import-meta-resolve@4.0.0:
resolution: {integrity: sha512-okYUR7ZQPH+efeuMJGlq4f8ubUgO50kByRPyt/Cy1Io4PSRsPjxME+YlVaCOx+NIToW7hCsZNFJyTPFFKepRSA==} resolution: {integrity: sha512-okYUR7ZQPH+efeuMJGlq4f8ubUgO50kByRPyt/Cy1Io4PSRsPjxME+YlVaCOx+NIToW7hCsZNFJyTPFFKepRSA==}
dev: false dev: false
@@ -3825,6 +3832,16 @@ packages:
resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
dev: false dev: false
/sass@1.71.1:
resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==}
engines: {node: '>=14.0.0'}
hasBin: true
dependencies:
chokidar: 3.6.0
immutable: 4.3.5
source-map-js: 1.0.2
dev: false
/sax@1.3.0: /sax@1.3.0:
resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
dev: false dev: false
@@ -4436,7 +4453,7 @@ packages:
vfile-message: 4.0.2 vfile-message: 4.0.2
dev: false dev: false
/vite@5.1.5(@types/node@20.11.25): /vite@5.1.5(@types/node@20.11.25)(sass@1.71.1):
resolution: {integrity: sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==} resolution: {integrity: sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==}
engines: {node: ^18.0.0 || >=20.0.0} engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true hasBin: true
@@ -4468,6 +4485,7 @@ packages:
esbuild: 0.19.12 esbuild: 0.19.12
postcss: 8.4.35 postcss: 8.4.35
rollup: 4.12.1 rollup: 4.12.1
sass: 1.71.1
optionalDependencies: optionalDependencies:
fsevents: 2.3.3 fsevents: 2.3.3
dev: false dev: false
@@ -4480,7 +4498,7 @@ packages:
vite: vite:
optional: true optional: true
dependencies: dependencies:
vite: 5.1.5(@types/node@20.11.25) vite: 5.1.5(@types/node@20.11.25)(sass@1.71.1)
dev: false dev: false
/volar-service-css@0.0.30(@volar/language-service@2.0.4): /volar-service-css@0.0.30(@volar/language-service@2.0.4):

4
src/components/BaseHead.astro
View File

@@ -1,7 +1,5 @@
--- ---
// Import the global.css file here so that it is included on import '@/styles/global.scss';
// all pages through the use of the <BaseHead /> component.
import '@/styles/global.css';
interface Props { interface Props {
title: string; title: string;

164
src/components/Header.astro
View File

@@ -1,87 +1,91 @@
--- ---
import HeaderLink from '@components/HeaderLink.astro'; import HeaderLink from "@components/HeaderLink.astro";
import { SITE_TITLE } from '@/consts'; import { SITE_TITLE } from "@/consts";
import ThemeToggle from '@components/ThemeToggle'; import ThemeToggle from "@components/ThemeToggle";
--- ---
<header> <header class="dark:bg-zinc-900/70 bg-zinc-200 dark:text-zinc-300 text-black">
<nav> <nav>
<h2><a href="/">{SITE_TITLE}</a></h2> <h2>
<div class="internal-links"> <a href="/">{SITE_TITLE}</a>
<HeaderLink href="/">Home</HeaderLink> </h2>
<HeaderLink href="/blog">Blog</HeaderLink> <div class="internal-links">
<HeaderLink href="/about">About</HeaderLink> <HeaderLink href="/">Home</HeaderLink>
</div> <HeaderLink href="/blog">Blog</HeaderLink>
<div class="social-links"> <HeaderLink href="/about">About</HeaderLink>
<ThemeToggle client:only /> </div>
<a class="dark:color-zinc-100" href="https://m.webtoo.ls/@astro" target="_blank"> <div class="social-links">
<span class="sr-only">Follow Astro on Mastodon</span> <ThemeToggle client:only />
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" <a
><path class="dark:color-zinc-100"
fill="currentColor" href="https://m.webtoo.ls/@astro"
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z" target="_blank"
></path></svg >
> <span class="sr-only">Follow Astro on Mastodon</span>
</a> <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
<a href="https://twitter.com/astrodotbuild" target="_blank"> ><path
<span class="sr-only">Follow Astro on Twitter</span> fill="currentColor"
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
><path ></path></svg
fill="currentColor" >
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" </a>
></path></svg <a href="https://twitter.com/astrodotbuild" target="_blank">
> <span class="sr-only">Follow Astro on Twitter</span>
</a> <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
<a href="https://github.com/withastro/astro" target="_blank"> ><path
<span class="sr-only">Go to Astro's GitHub repo</span> fill="currentColor"
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
><path ></path></svg
fill="currentColor" >
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" </a>
></path></svg <a href="https://github.com/withastro/astro" target="_blank">
> <span class="sr-only">Go to Astro's GitHub repo</span>
</a> <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
</div> ><path
</nav> fill="currentColor"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path></svg
>
</a>
</div>
</nav>
</header> </header>
<style> <style>
header { header {
margin: 0; margin: 0;
padding: 0 1em; padding: 0 1em;
background: white; box-shadow: 0 2px 8px rgba(var(--black), 5%);
box-shadow: 0 2px 8px rgba(var(--black), 5%); }
} h2 {
h2 { margin: 0;
margin: 0; font-size: 1em;
font-size: 1em; }
}
h2 a, h2 a,
h2 a.active { h2 a.active {
text-decoration: none; text-decoration: none;
} }
nav { nav {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
nav a { nav a {
padding: 1em 0.5em; padding: 1em 0.5em;
color: var(--black); border-bottom: 4px solid transparent;
border-bottom: 4px solid transparent; text-decoration: none;
text-decoration: none; }
} nav a.active {
nav a.active { text-decoration: none;
text-decoration: none; border-bottom-color: var(--accent);
border-bottom-color: var(--accent); }
} .social-links,
.social-links, .social-links a {
.social-links a { display: flex;
display: flex; }
} @media (max-width: 720px) {
@media (max-width: 720px) { .social-links {
.social-links { display: none;
display: none; }
} }
}
</style> </style>

1
src/consts.ts
View File

@@ -1,2 +1,3 @@
export const SITE_TITLE = 'UTSA CS Handbook'; export const SITE_TITLE = 'UTSA CS Handbook';
export const SITE_DESCRIPTION = 'An unofficial guide to the Computer Science program at UTSA'; export const SITE_DESCRIPTION = 'An unofficial guide to the Computer Science program at UTSA';
export const GITHUB_URL = 'https://github.com/Xevion/utsa-handbook'

2
src/pages/index.astro
View File

@@ -10,7 +10,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head> </head>
<body class="dark:text-zinc-200 dark:bg-zinc-700"> <body class="dark:text-zinc-200 dark:bg-zinc-800">
<Header /> <Header />
<Footer /> <Footer />
</body> </body>

154
src/styles/global.css
View File

@@ -1,154 +0,0 @@
/*
The CSS in this style tag is based off of Bear Blog's default CSS.
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/
:root {
--accent: #2337ff;
--accent-dark: #000d8a;
--black: 15, 18, 25;
--gray: 96, 115, 159;
--gray-light: 229, 233, 240;
--gray-dark: 34, 41, 57;
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
0 16px 32px rgba(var(--gray), 33%);
}
@font-face {
font-family: 'Atkinson';
src: url('/fonts/atkinson-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Atkinson';
src: url('/fonts/atkinson-bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
body {
font-family: 'Atkinson', sans-serif;
margin: 0;
padding: 0;
text-align: left;
/* background: linear-gradient(var(--gray-gradient)) no-repeat; */
/* background-size: 100% 600px; */
word-wrap: break-word;
overflow-wrap: break-word;
/* color: rgb(var(--gray-dark)); */
font-size: 20px;
line-height: 1.7;
}
main {
width: 720px;
max-width: calc(100% - 2em);
margin: auto;
padding: 3em 1em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 0.5rem 0;
color: rgb(var(--black));
line-height: 1.2;
}
h1 {
font-size: 3.052em;
}
h2 {
font-size: 2.441em;
}
h3 {
font-size: 1.953em;
}
h4 {
font-size: 1.563em;
}
h5 {
font-size: 1.25em;
}
strong,
b {
font-weight: 700;
}
a {
color: var(--accent);
}
a:hover {
color: var(--accent);
}
p {
margin-bottom: 1em;
}
.prose p {
margin-bottom: 2em;
}
textarea {
width: 100%;
font-size: 16px;
}
input {
font-size: 16px;
}
table {
width: 100%;
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
code {
padding: 2px 5px;
background-color: rgb(var(--gray-light));
border-radius: 2px;
}
pre {
padding: 1.5em;
border-radius: 8px;
}
pre > code {
all: unset;
}
blockquote {
border-left: 4px solid var(--accent);
padding: 0 0 0 20px;
margin: 0px;
font-size: 1.333em;
}
hr {
border: none;
border-top: 1px solid rgb(var(--gray-light));
}
@media (max-width: 720px) {
body {
font-size: 18px;
}
main {
padding: 1em;
}
}
.sr-only {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px 1px 1px 1px);
/* maybe deprecated but we need to support legacy browsers */
clip: rect(1px, 1px, 1px, 1px);
/* modern browsers, clip-path works inwards from each corner */
clip-path: inset(50%);
/* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
white-space: nowrap;
}

56
src/styles/global.scss Normal file
View File

@@ -0,0 +1,56 @@
/*
The CSS in this style tag is based off of Bear Blog's default CSS.
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/
:root {
--accent: #2337ff;
--accent-dark: #000d8a;
--black: 15, 18, 25;
--gray: 96, 115, 159;
--gray-light: 229, 233, 240;
--gray-dark: 34, 41, 57;
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
0 16px 32px rgba(var(--gray), 33%);
}
@font-face {
font-family: "Atkinson";
src: url("/fonts/atkinson-regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Atkinson";
src: url("/fonts/atkinson-bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
html {
font-family: "Atkinson", sans-serif;
word-wrap: break-word;
overflow-wrap: break-word;
font-size: 20px;
line-height: 1.7;
}
main {
width: 720px;
max-width: calc(100% - 2em);
margin: auto;
padding: 3em 1em;
}
@media (max-width: 720px) {
html {
font-size: 18px;
}
main {
padding: 1em;
}
}