reduce image size

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com> rh-pre-commit.version: 2.2.0 rh-pre-commit.check-secrets: ENABLED
update website
2026-07-04 07:40:09 +05:30 · 2024-03-31 11:27:36 +05:30 · 2024-03-31 11:10:43 +05:30
237 changed files with 10482 additions and 10436 deletions
@@ -1,3 +0,0 @@
 # WakaTime API key — used to fetch coding activity stats for the homepage
 # Get yours at https://wakatime.com/settings/api-key
 WAKATIME_API_KEY=
@@ -1,28 +1,37 @@
 # Sample workflow for building and deploying a Hugo site to GitHub Pages
 name: Check build
 on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]
  pull_request:
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
 # Default to bash
 defaults:
  run:
    shell: bash
 jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
-
+      - uses: actions/setup-node@v3
      - uses: actions/setup-node@v4
        with:
-          node-version: 22
+          node-version: 16
          cache: "npm"
-
+          cache-dependency-path: ./package-lock.json
-      - name: Install dependencies
+      - name: Setup Hugo
-        run: npm ci
+        uses: peaceiris/actions-hugo@v2
-
+        with:
-      - name: Check types
+          hugo-version: '0.124.1'
-        run: npm run check
+          extended: true
-
+      - name: Install elm-land and node packages
-      - name: Build site
+        run: npm install
-        run: npm run build
+      - name: build
        run: make
@@ -1,21 +1,11 @@
-# Dependencies
+/dist
-node_modules/
+/.elm-land
-
+/.env
-# Build output
+/elm-stuff
-dist/
+/node_modules
 .astro/
 # Environment
 .env
 .env.local
 .env.production
 # IDE
 .idea/
 .vscode/
 # OS
 .DS_Store
-
+*.pem
-# Legacy Hugo
+/static/main.css
-public/
+/temp
 /blog/public
 /blog/node_modules
@@ -1,29 +1,27 @@
-.PHONY: dev build preview clean install check fmt lint new-post help
+# build everything for production
 all: css build
 	@echo "--- production build finished"
-# Default target
+# build only css for production
-help: ## Show this help
+css:
-	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \
+	@echo "--- building tailwind css"
-		awk 'BEGIN {FS = ":.*?## "}; {printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2}'
+	npx tailwindcss -i ./src/input.css -o ./static/main.css --minify
-install: ## Install dependencies
+# compile only elm for production
-	npm install
+build:
 	@echo "--- compiling elm land project"
 	npx elm-land build
 	hugo --source blog --destination ../dist --minify
-dev: ## Start dev server with hot reload
+# compile and watch for dev
-	npx astro dev
+elm-serve:
 	npx elm-land server
-build: ## Build for production
+# build css and watch
-	npx astro build
+css-serve:
 	npx tailwindcss -i ./src/input.css -o ./static/main.css --watch
-preview: ## Preview production build locally
+# clean
-	npx astro preview
+clean:
-
+	rm -rf dist
-check: ## Run Astro type checking
+	rm -rf blog/public
 	npx astro check
 clean: ## Remove build artifacts
 	rm -rf dist .astro node_modules/.astro
 nuke: ## Full clean (includes node_modules)
 	rm -rf dist .astro node_modules
 fresh: nuke install ## Clean install from scratch
@@ -1,87 +1,2 @@
-# avinal.space
+# My Personal Website and Blog
 Personal website and blog built with [Astro](https://astro.build). Minimal, fast, and almost entirely HTML & CSS with zero-JS by default.
 **Live:** [avinal.space](https://avinal.space)
 ## Design Inspiration
 - [jay.fish](https://jay.fish/) — homepage layout, activity graph, bento grid
 - [usememos.com](https://usememos.com/) — clean typography, color palette, overall theme
 ## Pages
 | Route | Description |
 |-------|-------------|
 | `/` | Homepage with hero card, GitHub/WakaTime activity graph, Game of Life widget, recent posts, and pinned repos |
 | `/posts/` | Blog index with category filters and featured images |
 | `/posts/<category>/` | Category-filtered post listings |
 | `/posts/<category>/<slug>/` | Individual blog posts |
 | `/resume/` | Resume page (data driven from `src/data/resume.json`) |
 | `/meeting/` | Book a meeting via [Cal.com](https://cal.com) embed |
 | `/setup/` | Hardware and software setup |
 | `/rss.xml` | RSS feed |
 ## Prerequisites
 - [Node.js](https://nodejs.org/) 22+
 - npm
 ## Getting Started
 ```bash
 git clone https://github.com/avinal/avinal.github.io.git
 cd avinal.github.io
 make install
 ```
 Copy the example env file and add your keys:
 ```bash
 cp .env.example .env
 ```
 | Variable | Required | Description |
 |----------|----------|-------------|
 | `WAKATIME_API_KEY` | No | Enables WakaTime coding stats on the homepage activity graph. Get yours at [wakatime.com/settings/api-key](https://wakatime.com/settings/api-key) |
 ## Development
 ```bash
 make dev        # Start dev server with hot reload
 make build      # Build for production
 make preview    # Preview production build locally
 make check      # Run Astro type checking
 make clean      # Remove build artifacts
 make nuke       # Full clean (includes node_modules)
 make fresh      # Clean install from scratch
 ```
 ## Project Structure
 ```
 src/
 ├── components/     # Reusable Astro components
 ├── config/         # Theme tokens and site config
 ├── content/posts/  # Blog posts (Markdown)
 ├── data/           # JSON data (resume, repos)
 ├── layouts/        # Page layouts
 ├── lib/            # Utilities and rehype plugins
 ├── pages/          # Route pages
 └── styles/         # Global CSS
 public/             # Static assets (images, favicons)
 ```
 ## Configuration
 - **Theme & colors:** `src/config/theme.ts` — single file for all design tokens, easily swap the entire color palette
 - **Repos:** `src/data/repos.json` — pinned repositories shown on the homepage
 - **Resume:** `src/data/resume.json` — JSON Resume format, drives the `/resume/` page
 ## Deployment
 The site is deployed via [Netlify](https://netlify.com). Any push to `main` triggers a build automatically. See `netlify.toml` for the build config.
 ## License
 See [LICENSE](LICENSE) for details.
@@ -1,28 +0,0 @@
 import { defineConfig } from "astro/config";
 import sitemap from "@astrojs/sitemap";
 import rehypeImageAlign from "./src/lib/rehype-image-align.ts";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 export default defineConfig({
  site: "https://avinal.space",
  output: "static",
  integrations: [sitemap()],
  markdown: {
    shikiConfig: {
      theme: "github-dark-default",
    },
    rehypePlugins: [
      rehypeImageAlign,
      rehypeSlug,
      [
        rehypeAutolinkHeadings,
        {
          behavior: "append",
          properties: { className: ["heading-anchor"], ariaLabel: "Link to this section" },
          content: { type: "text", value: "#" },
        },
      ],
    ],
  },
 });
@@ -0,0 +1,5 @@
 +++
 title = '{{ replace .File.ContentBaseName "-" " " | title }}'
 date = {{ .Date }}
 draft = true
 +++
@@ -0,0 +1,541 @@
 /*
 ! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
 */
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
 *,
 ::before,
 ::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
 }
 ::before,
 ::after {
  --tw-content: '';
 }
 /*
 1. Use a consistent sensible line-height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
 */
 html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
 }
 /*
 1. Remove the margin in all browsers.
 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
 */
 body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
 }
 /*
 1. Add the correct height in Firefox.
 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
 3. Ensure horizontal rules are visible by default.
 */
 hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
 }
 /*
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
 }
 /*
 Remove the default font size and weight for headings.
 */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
  font-size: inherit;
  font-weight: inherit;
 }
 /*
 Reset links to optimize for opt-in styling instead of opt-out.
 */
 a {
  color: inherit;
  text-decoration: inherit;
 }
 /*
 Add the correct font weight in Edge and Safari.
 */
 b,
 strong {
  font-weight: bolder;
 }
 /*
 1. Use the user's configured `mono` font-family by default.
 2. Use the user's configured `mono` font-feature-settings by default.
 3. Use the user's configured `mono` font-variation-settings by default.
 4. Correct the odd `em` font sizing in all browsers.
 */
 code,
 kbd,
 samp,
 pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
 }
 /*
 Add the correct font size in all browsers.
 */
 small {
  font-size: 80%;
 }
 /*
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
 sub,
 sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
 }
 sub {
  bottom: -0.25em;
 }
 sup {
  top: -0.5em;
 }
 /*
 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 3. Remove gaps between table borders by default.
 */
 table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
 }
 /*
 1. Change the font styles in all browsers.
 2. Remove the margin in Firefox and Safari.
 3. Remove default padding in all browsers.
 */
 button,
 input,
 optgroup,
 select,
 textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
 }
 /*
 Remove the inheritance of text transform in Edge and Firefox.
 */
 button,
 select {
  text-transform: none;
 }
 /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Remove default button styles.
 */
 button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
 }
 /*
 Use the modern Firefox focus style for all focusable elements.
 */
 :-moz-focusring {
  outline: auto;
 }
 /*
 Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
 :-moz-ui-invalid {
  box-shadow: none;
 }
 /*
 Add the correct vertical alignment in Chrome and Firefox.
 */
 progress {
  vertical-align: baseline;
 }
 /*
 Correct the cursor style of increment and decrement buttons in Safari.
 */
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
  height: auto;
 }
 /*
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
 */
 [type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
 }
 /*
 Remove the inner padding in Chrome and Safari on macOS.
 */
 ::-webkit-search-decoration {
  -webkit-appearance: none;
 }
 /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to `inherit` in Safari.
 */
 ::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
 }
 /*
 Add the correct display in Chrome and Safari.
 */
 summary {
  display: list-item;
 }
 /*
 Removes the default spacing and border for appropriate elements.
 */
 blockquote,
 dl,
 dd,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 hr,
 figure,
 p,
 pre {
  margin: 0;
 }
 fieldset {
  margin: 0;
  padding: 0;
 }
 legend {
  padding: 0;
 }
 ol,
 ul,
 menu {
  list-style: none;
  margin: 0;
  padding: 0;
 }
 /*
 Reset default styling for dialogs.
 */
 dialog {
  padding: 0;
 }
 /*
 Prevent resizing textareas horizontally by default.
 */
 textarea {
  resize: vertical;
 }
 /*
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
 }
 input::placeholder,
 textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
 }
 /*
 Set the default cursor for buttons.
 */
 button,
 [role="button"] {
  cursor: pointer;
 }
 /*
 Make sure disabled buttons don't get the pointer cursor.
 */
 :disabled {
  cursor: default;
 }
 /*
 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
 */
 img,
 svg,
 video,
 canvas,
 audio,
 iframe,
 embed,
 object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
 }
 /*
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
 img,
 video {
  max-width: 100%;
  height: auto;
 }
 /* Make elements with the HTML hidden attribute stay hidden by default */
 [hidden] {
  display: none;
 }
 *, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
 }
 ::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
 }
@@ -0,0 +1,21 @@
 window.remark_config = {
    host: "https://remark42.avinal.space",
    site_id: "remark",
    show_rss_subscription: false,
    theme: 'dark',
    no_footer: true,
 };
 !(function (e, n) {
    for (var o = 0; o < e.length; o++) {
        var r = n.createElement("script"),
            c = ".js",
            d = n.head || n.body;
        "noModule" in r
            ? ((r.type = "module"), (c = ".mjs"))
            : (r.async = !0),
            (r.defer = !0),
            (r.src = remark_config.host + "/web/" + e[o] + c),
            d.appendChild(r);
    }
 })(remark_config.components || ["embed"], document);
@@ -0,0 +1,5 @@
 ---
 date: "2023-01-01T08:00:00-07:00"
 draft: false
 title: Home
 ---
@@ -0,0 +1,7 @@
 ---
 date: "2023-01-01T08:30:00-07:00"
 draft: false
 title: Posts
 ---
 All the posts.
@@ -1,7 +1,7 @@
 ---
 title: Installing Fedora with automatic and custom partioning
-date: 2023-01-19T23:02:00
+date: 2023-01-19 23:02
-category: blogs
+category: blog
 tags: [fedora, partioning]
 image: ""
 draft: true
@@ -5,7 +5,7 @@ description: The project was to Create the VLC User Documentation for Android Mo
  Port which was previously hosted on VLC wiki pages. The major portion of this was
  to start everything from scratch including chapter separation, section organization.
 image: /images/day-of-cone.webp
-modified: 2020-12-31T23:19:00
+modified: 2020-12-31 23:19
 tags:
 - vlc
 - gsod
@@ -5,6 +5,7 @@ description: CMake stands for Cross-platform Make. Normally, a build tool like M
  will parse a configuration file (Makefile) that contains all the commands required
  to build an artifact based on the source files and other resources inside the project.
 image: /images/cmake-office.webp
 slug: cmake-basics
 tags:
 - cmake
 - gsoc
@@ -4,9 +4,10 @@ date: 2022-02-27T20:47:00
 description: This blog is a descreptive account of the development of Minimal Tekton
  Server. This is highly technical in nature, so please make sure that you have sufficient
  knowledge about Golang, Docker, Kubernetes and TektonCD. You can refer to my [previous
-  blog](/posts/development/i-am-loving-it-redhat/) to know about these topics.
+  blog]("https://avinal.space/posts/development/i-am-loving-it-redhat.html") to know
  about these topics.
 image: /images/development.webp
-modified: 2022-03-07T22:47:00
+modified: 2022-03-07 22:47
 tags:
 - tekton
 - go
@@ -22,7 +23,7 @@ title: Developing Minimal Tekton Server
 This blog is a descreptive account of the development of Minimal Tekton Server.
 This is highly technical in nature, so please make sure that you have sufficient
 knowledge about Golang, Docker, Kubernetes and TektonCD. You can refer to my
-[previous blog](/posts/development/i-am-loving-it-redhat/)
+[previous blog]("https://avinal.space/posts/development/i-am-loving-it-redhat.html")
 to know about these topics.
 As mentioned in my last blog, we were given to implement an application
@@ -216,4 +217,4 @@ type SpaceTimeList struct {
 ### Attribution
 - Photo by [Luca Bravo](https://unsplash.com/@lucabravo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/XJXWbfSo2f0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).
-  
+  
@@ -0,0 +1,23 @@
 ---
 title: Everything on my Pi
 date: 2023-10-01T10:47:00
 category: raspi
 tags: [raspi, linux, pi, raspbian, debian, ubuntu, server, docker]
 image: "/images/big-raspberry-pi.webp"
 description: "A list of everything I have installed on my Raspberry Pi 4B."
 ---
 I always wanted to have my self-hosted server when I was in college. Never had enough money to do much
 until recently. So after I got my first job, I have invested moderately (heavily actually ;)) in gadgets and stuff. And one
 of my most prized possession is my Raspberry Pi 4. I have been using it for a while now, and I have
 installed many useful things on it. So I thought I would share it with everyone. This is a list of
 everything I have on my Pi.
 ## Hardware and Specifications
 - [Raspberry Pi 4B 8GB Model](https://www.raspberrypi.org/products/raspberry-pi-4-model-b/)
 - [Samsung 64GB EVO Plus microSDXC U1 Class 10](https://www.samsung.com/us/computing/memory-storage/memory-cards/evo-plus---adapter-microsdxc-64gb-mb-mc64ka-am/)
 - [Raspberry Pi 15W USB-C Power Supply](https://www.raspberrypi.com/products/type-c-power-supply/)
 - [Rpi shop Raspberry pi 4 case Model B Acrylic case with Fan + heatsink Included](https://amzn.eu/d/8vvwkfg)
 I already had a good quality ethernet cable, so I didn't have to buy one. 
@@ -0,0 +1,45 @@
 baseURL: 'https://avinal.space/'
 languageCode: en-us
 title: Fedoraemon
 menus:
  main:
    - name: Home
      pageRef: /
      weight: 10
    - name: Posts
      pageRef: /posts
      weight: 20
    - name: Tags
      pageRef: /tags
      weight: 30
 module:
  hugoVersion:
    extended: false
    min: 0.116.0
 params:
  showWordCount: true
  showReadingTime: true
  toc: true
  numberedSubtitles: true
  navs:
    - name: Home
      link: https://avinal.space
    - name: About
      link: https://avinal.space/pages/about-me
    - name: Blog
      link: https://avinal.space/posts
    - name: Projects
      link: https://avinal.space/pages/projects
    - name: GitHub
      link: https://github.com/avinal
 disableKinds: ["home", "taxonomy"]
 taxonomies:
  category: category
  tag: tags
 permalinks:
  tags: "/posts/tags/:slug"
  category: "/posts/category/:slug"
@@ -0,0 +1,3 @@
 <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
    <a href="#{{ .Anchor | safeURL }}">#</a>
 </h{{ .Level }}>
@@ -0,0 +1,18 @@
 <!DOCTYPE html>
 <html lang="{{ or site.Language.LanguageCode site.Language.Lang }}"
  dir="{{ or site.Language.LanguageDirection `ltr` }}">
 <head>
  {{ partial "head.html" . }}
 </head>
 <body class="bg-neutral-800">
  <main class="container mx-auto">
    {{ block "main" . }}{{ end }}
    <footer>
      {{ partial "footer.html" . }}
    </footer>
  </main>
 </body>
 </html>
@@ -0,0 +1,7 @@
 {{ define "main" }}
  {{ .Content }}
  {{ range site.RegularPages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
    {{ .Summary }}
  {{ end }}
 {{ end }}
@@ -0,0 +1,82 @@
 {{ define "main" }}
 <div
  class="prose prose-invert mx-auto lg:prose-lg prose-a:decoration-cyan-500 hover:prose-a:decoration-pink-500 text-white">
  <div class="md:-mx-8 lg:-mx-16 px-8 py-1">
    <h1 class="text-5xl font-bold mb-6 mt-12 text-center">{{ .Title }}</h1>
    {{ .Content }}
  </div>
 </div>
 <section class="text-gray-100">
  <div class="max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12 mb-16">
    {{ range first 1 .Pages }}
    <div
      class="block max-x-sm gap-3 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 bg-neutral-900">
      <a class="lg:col-span-7" href="{{ .RelPermalink }}">
        <img class="object-cover w-full h-64 rounded sm:h-96 lg:col-span-7" src="{{ .Params.Image | absURL }}"
          alt="{{ .LinkTitle }}">
      </a>
      <div class="p-6 space-y-2 lg:col-span-5">
        <a href="{{ .RelPermalink }}">
          <h3 class="text-2xl font-semibold sm:text-4xl group-hover:underline group-focus:underline">{{ .LinkTitle }}
          </h3>
          {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
          {{ $dateHuman := .Date | time.Format ":date_long" }}
          <time datetime="{{ $dateMachine }}" class="text-gray-400">{{ $dateHuman }}</time>
          {{ if gt .ReadingTime 1 }}
          {{ .Scratch.Set "timeUnit" "mins" }}
          {{ else }}
          {{ .Scratch.Set "timeUnit" "min" }}
          {{ end }}
          {{ if .Site.Params.showReadingTime }}
          <span class="text-gray-400"> | ~{{.ReadingTime}} {{ .Scratch.Get "timeUnit" }}</span>
          {{ end }}
          <p> {{ .Summary | truncate 250 }}</p>
        </a>
        <a href="" target="_blank">
          <span class="flex flex-wrap py-6 space-x-2">
            <a class="px-3 py-1 m-1 rounded-sm hover:underline bg-pink-400 text-gray-900 font-bold" href="/posts/category/{{ .Params.Category }}">
              {{ .Params.Category }}</a>
          </span>
        </a>
      </div>
    </div>
    {{ end }}
    <div class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {{ range after 1 .Pages }}
      <div class="max-w-sm mx-auto group hover:no-underline focus:no-underline bg-neutral-900">
        <a href="{{ .RelPermalink }}">
          <img class="object-cover w-full h-44 rounded" src="{{ .Params.Image | absURL }}" alt="{{ .LinkTitle }}">
        </a>
        <div class="p-6 space-y-2">
          <a href="{{ .RelPermalink }}">
            <h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">{{ .LinkTitle }}</h3>
            {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
            {{ $dateHuman := .Date | time.Format ":date_long" }}
            <time datetime="{{ $dateMachine }}" class="text-gray-400">{{ $dateHuman }}</time>
            {{ if gt .ReadingTime 1 }}
            {{ .Scratch.Set "timeUnit" "mins" }}
            {{ else }}
            {{ .Scratch.Set "timeUnit" "min" }}
            {{ end }}
            {{ if .Site.Params.showReadingTime }}
            <span class="text-gray-400"> | ~{{.ReadingTime}} {{ .Scratch.Get "timeUnit" }}</span>
            {{ end }}
            <p> {{ .Summary | truncate 150 }}</p>
          </a>
          <a href="" target="_blank">
            <span class="flex flex-wrap py-6 space-x-2">
              <a class="px-3 py-1 m-1 rounded-sm hover:underline bg-pink-400 text-gray-900 font-bold" href="/posts/category/{{ .Params.Category }}">
                {{ .Params.Category }}</a>
            </span>
          </a>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
 </section>
 {{ end }}
@@ -0,0 +1,32 @@
 {{ define "main" }}
 <div class="min-h-screen flex flex-col justify-center relative overflow-hidden">
  <div class="relative w-full bg-neutral md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pb-28">
    <div class="prose prose-invert mx-auto lg:prose-lg prose-a:decoration-cyan-500 hover:prose-a:decoration-pink-500">
      <div class="bg-neutral-900 md:-mx-8 lg:-mx-16 px-8 py-1">
        {{ partial "header.html" . }}
        <article>
          {{ if cond (ne .Params.toc nil) .Params.toc .Site.Params.toc }}
          {{ if ne .TableOfContents "<nav id=\"TableOfContents\"></nav>" }}
          <details class="open:bg-neutral-800 open:border open:rounded open:border-cyan-700  ">
            <summary>
              <b>In this post, we'll take a look at:</b>
            </summary>
            <div class="toc {{ if .Site.Params.numberedSubtitles }}numbered-subtitles{{ end }} ">{{ .TableOfContents }}
            </div>
          </details>
          {{ end }}
          {{ end }}
          {{ .Content }}
        </article>
        {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
      </div>
    </div>
    {{ partial "comments.html" . (dict "taxonomy" "tags" "page" .) }}
  </div>
 </div>
 {{ end }}
@@ -0,0 +1 @@
 <div id="remark42" class="md:p-4 mb-16"></div>
@@ -0,0 +1,8 @@
 <div class="fixed bottom-0 left-0 bg-neutral-900 p-3 w-full border-t border-cyan-500">
    <div class="mx-auto flex justify-center space-x-6 text-gray-400">
        {{ range .Site.Params.navs }}
        <a class="underline decoration-cyan-500 hover:decoration-pink-500 text-xl" href="{{ .link | safeURL }}">{{ .name
            }}</a>
        {{ end }}
    </div>
 </div>
@@ -0,0 +1,28 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title itemprop="name">{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}
 </title>
 {{ if eq .Section "posts" }}
 <meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
 <meta name="twitter:title" content="{{ .Title }} | {{ .Site.Title }}" />
 <meta itemprop="name" content="{{ .Title }} | {{ .Site.Title }}" />
 <meta name="application-name" content="{{ .Title }} | {{ .Site.Title }}" />
 <meta property="og:site_name" content="{{ .Site.Params.sitename }}" />
 <meta name="description" content="{{ .Params.description }}" />
 <meta itemprop="description" content="{{ .Params.description }}" />
 <meta property="og:description" content="{{ .Params.description }}" />
 <meta name="twitter:description" content="{{ .Params.description }}" />
 {{ with .Params.image }}
 <meta itemprop="image" content="{{ . | absURL }}" />
 <meta property="og:image" content="{{ . | absURL }}" />
 <meta name="twitter:image" content="{{ . | absURL }}" />
 <meta name="twitter:image:src" content="{{ . | absURL }}" />
 {{ else }}
 <meta itemprop="image" content="{{ .Site.Params.ogimage | absURL }}" />
 <meta property="og:image" content="{{ .Site.Params.ogimage | absURL }}" />
 <meta name="twitter:image" content="{{ .Site.Params.ogimage | absURL }}" />
 <meta name="twitter:image:src" content="{{ .Site.Params.ogimage | absURL }}" />
 {{ end }}
 {{ end }}
 {{ partialCached "head/css.html" . }}
 {{ partialCached "head/js.html" . }}
@@ -0,0 +1,9 @@
 {{- with resources.Get "css/main.css" }}
  {{- if eq hugo.Environment "development" }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
 {{- end }}
@@ -0,0 +1,12 @@
 {{- with resources.Get "js/main.js" }}
  {{- if eq hugo.Environment "development" }}
    {{- with . | js.Build }}
      <script src="{{ .RelPermalink }}"></script>
    {{- end }}
  {{- else }}
    {{- $opts := dict "minify" true }}
    {{- with . | js.Build $opts | fingerprint }}
      <script src="{{ .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous"></script>
    {{- end }}
  {{- end }}
 {{- end }}
@@ -0,0 +1,25 @@
 <header class="relative">
 <img class="object-cover w-full h-60 sm:h-96 brightness-50" src="{{ .Params.Image | absURL }}" alt="{{ .Title }}">
 <h1 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-full text-white">{{ .Title }}</h1>
 <span class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-base font-sans oldstyle-nums text-center w-full">
  <a class="font-bold no-underline hover:text-pink-500" href="/">Avinal Kumar</a>
  |
  {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
  {{ $dateHuman := .Date | time.Format ":date_long" }}
  <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
  {{ if .Site.Params.showWordCount }}
  <span>| {{ .WordCount }} words</span>
  {{ end }}
  {{ if gt .ReadingTime 1 }}
  {{ .Scratch.Set "timeUnit" "mins" }}
  {{ else }}
  {{ .Scratch.Set "timeUnit" "min" }}
  {{ end }}
  {{ if .Site.Params.showReadingTime }}
  <span>| ~{{.ReadingTime}} {{ .Scratch.Get "timeUnit" }}</span>
  {{ end }}
 </span>
 </header>
@@ -0,0 +1,51 @@
 {{- /*
 Renders a menu for the given menu ID.
@context {page} page The current page.
@context {string} menuID The menu ID.
@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
 */}}
 {{- $page := .page }}
 {{- $menuID := .menuID }}
 {{- with index site.Menus $menuID }}
  <nav>
    <ul>
      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
    </ul>
  </nav>
 {{- end }}
 {{- define "partials/inline/menu/walk.html" }}
  {{- $page := .page }}
  {{- range .menuEntries }}
    {{- $attrs := dict "href" .URL }}
    {{- if $page.IsMenuCurrent .Menu . }}
      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
    {{- else if $page.HasMenuCurrent .Menu .}}
      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
    {{- end }}
    {{- $name := .Name }}
    {{- with .Identifier }}
      {{- with T . }}
        {{- $name = . }}
      {{- end }}
    {{- end }}
    <li>
      <a
        {{- range $k, $v := $attrs }}
          {{- with $v }}
            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
          {{- end }}
        {{- end -}}
      >{{ $name }}</a>
      {{- with .Children }}
        <ul>
          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
        </ul>
      {{- end }}
    </li>
  {{- end }}
 {{- end }}
@@ -0,0 +1,22 @@
 {{- /*
 For a given taxonomy, renders a list of terms assigned to the page.
@context {page} page The current page.
@context {string} taxonomy The taxonony.
@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
 */}}
 {{- $page := .page }}
 {{- $taxonomy := .taxonomy }}
 {{- with $page.GetTerms $taxonomy }}
 {{- $label := (index . 0).Parent.LinkTitle }}
 <span class="flex flex-wrap py-6 space-x-2 border-t border-gray-500">
  <!-- <a class="px-3 py-1 m-1 rounded-sm hover:underline bg-pink-400 text-gray-900 font-bold" href="/category/"></a> -->
  {{- range . }}
  <a class="px-3 py-1 m-1 rounded-sm bg-cyan-500 text-gray-900" href="{{ .RelPermalink }}">#{{ .LinkTitle }}</a>
  {{- end }}
 </span>
 {{- end }}
@@ -0,0 +1,545 @@
 /*
 ! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
 */
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
 *,
 ::before,
 ::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
 }
 ::before,
 ::after {
  --tw-content: '';
 }
 /*
 1. Use a consistent sensible line-height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
 */
 html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
 }
 /*
 1. Remove the margin in all browsers.
 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
 */
 body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
 }
 /*
 1. Add the correct height in Firefox.
 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
 3. Ensure horizontal rules are visible by default.
 */
 hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
 }
 /*
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
 }
 /*
 Remove the default font size and weight for headings.
 */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
  font-size: inherit;
  font-weight: inherit;
 }
 /*
 Reset links to optimize for opt-in styling instead of opt-out.
 */
 a {
  color: inherit;
  text-decoration: inherit;
 }
 /*
 Add the correct font weight in Edge and Safari.
 */
 b,
 strong {
  font-weight: bolder;
 }
 /*
 1. Use the user's configured `mono` font-family by default.
 2. Use the user's configured `mono` font-feature-settings by default.
 3. Use the user's configured `mono` font-variation-settings by default.
 4. Correct the odd `em` font sizing in all browsers.
 */
 code,
 kbd,
 samp,
 pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
 }
 /*
 Add the correct font size in all browsers.
 */
 small {
  font-size: 80%;
 }
 /*
 Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
 sub,
 sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
 }
 sub {
  bottom: -0.25em;
 }
 sup {
  top: -0.5em;
 }
 /*
 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 3. Remove gaps between table borders by default.
 */
 table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
 }
 /*
 1. Change the font styles in all browsers.
 2. Remove the margin in Firefox and Safari.
 3. Remove default padding in all browsers.
 */
 button,
 input,
 optgroup,
 select,
 textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
 }
 /*
 Remove the inheritance of text transform in Edge and Firefox.
 */
 button,
 select {
  text-transform: none;
 }
 /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Remove default button styles.
 */
 button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
 }
 /*
 Use the modern Firefox focus style for all focusable elements.
 */
 :-moz-focusring {
  outline: auto;
 }
 /*
 Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
 :-moz-ui-invalid {
  box-shadow: none;
 }
 /*
 Add the correct vertical alignment in Chrome and Firefox.
 */
 progress {
  vertical-align: baseline;
 }
 /*
 Correct the cursor style of increment and decrement buttons in Safari.
 */
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
  height: auto;
 }
 /*
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
 */
 [type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
 }
 /*
 Remove the inner padding in Chrome and Safari on macOS.
 */
 ::-webkit-search-decoration {
  -webkit-appearance: none;
 }
 /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to `inherit` in Safari.
 */
 ::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
 }
 /*
 Add the correct display in Chrome and Safari.
 */
 summary {
  display: list-item;
 }
 /*
 Removes the default spacing and border for appropriate elements.
 */
 blockquote,
 dl,
 dd,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 hr,
 figure,
 p,
 pre {
  margin: 0;
 }
 fieldset {
  margin: 0;
  padding: 0;
 }
 legend {
  padding: 0;
 }
 ol,
 ul,
 menu {
  list-style: none;
  margin: 0;
  padding: 0;
 }
 /*
 Reset default styling for dialogs.
 */
 dialog {
  padding: 0;
 }
 /*
 Prevent resizing textareas horizontally by default.
 */
 textarea {
  resize: vertical;
 }
 /*
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
 }
 input::placeholder,
 textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
 }
 /*
 Set the default cursor for buttons.
 */
 button,
 [role="button"] {
  cursor: pointer;
 }
 /*
 Make sure disabled buttons don't get the pointer cursor.
 */
 :disabled {
  cursor: default;
 }
 /*
 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
 */
 img,
 svg,
 video,
 canvas,
 audio,
 iframe,
 embed,
 object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
 }
 /*
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
 img,
 video {
  max-width: 100%;
  height: auto;
 }
 /* Make elements with the HTML hidden attribute stay hidden by default */
 [hidden] {
  display: none;
 }
 *, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
 }
 ::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
 }
 .block {
  display: block;
 }
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1 @@`
							`<div id="remark42" class="md:p-4 mb-16"></div>`