Extroonie/extroonie.com
1
0
Fork 0
mirror of https://github.com/Extroonie/extroonie.com.git synced 2026-07-07 07:06:42 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: various site enhancements

Browse source
This commit is contained in:
Ishmaam Khan 2025-08-05 00:24:10 +06:00
parent 688445f9ad
commit 09997f333f
10 changed files with 954 additions and 950 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
assets/css/style.css
View file

@ -80,22 +80,22 @@ select {
text-transform: none; text-transform: none;
} }
button, button,
[type="button"], [type='button'],
[type="reset"], [type='reset'],
[type="submit"] { [type='submit'] {
-webkit-appearance: button; -webkit-appearance: button;
} }
button::-moz-focus-inner, button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type='button']::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type='reset']::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
button:-moz-focusring, button:-moz-focusring,
[type="button"]:-moz-focusring, [type='button']:-moz-focusring,
[type="reset"]:-moz-focusring, [type='reset']:-moz-focusring,
[type="submit"]:-moz-focusring { [type='submit']:-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }
fieldset { fieldset {
@ -115,20 +115,20 @@ progress {
textarea { textarea {
overflow: auto; overflow: auto;
} }
[type="checkbox"], [type='checkbox'],
[type="radio"] { [type='radio'] {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
} }
[type="number"]::-webkit-inner-spin-button, [type='number']::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { [type='number']::-webkit-outer-spin-button {
height: auto; height: auto;
} }
[type="search"] { [type='search'] {
-webkit-appearance: textfield; -webkit-appearance: textfield;
outline-offset: -2px; outline-offset: -2px;
} }
[type="search"]::-webkit-search-decoration { [type='search']::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
::-webkit-file-upload-button { ::-webkit-file-upload-button {
@ -164,11 +164,11 @@ summary {
/* Typography */ /* Typography */
--fontFamily-sans: --fontFamily-sans:
"Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
system-ui, sans-serif; 'Segoe UI Emoji';
--fontFamily-serif: "Source Serif 4", ui-serif, Georgia, serif; --fontFamily-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--fontFamily-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; --fontFamily-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
--font-body: var(--fontFamily-serif); --font-body: var(--fontFamily-sans);
--font-heading: var(--fontFamily-sans); --font-heading: var(--fontFamily-sans);
--font-mono: var(--fontFamily-mono); --font-mono: var(--fontFamily-mono);
--fontWeight-normal: 400; --fontWeight-normal: 400;
@ -209,10 +209,8 @@ summary {
--focus-ring: 2px solid var(--color-focus); --focus-ring: 2px solid var(--color-focus);
--focus-ring-offset: 2px; --focus-ring-offset: 2px;
--shadow-small: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-small: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-medium: --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-large:
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--transition-base: 200ms; --transition-base: 200ms;
@ -244,12 +242,9 @@ summary {
--color-code-bg: #1c1c1e; --color-code-bg: #1c1c1e;
--color-code-inline: #2c2c2e; --color-code-inline: #2c2c2e;
--color-accent: #0a84ff; --color-accent: #0a84ff;
--shadow-small: --shadow-small: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.3);
0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.3); --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.4);
--shadow-medium: --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 0.7), 0 4px 6px -4px rgb(0 0 0 / 0.5);
0 4px 6px -1px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.4);
--shadow-large:
0 10px 15px -3px rgb(0 0 0 / 0.7), 0 4px 6px -4px rgb(0 0 0 / 0.5);
--backdrop-blur: blur(20px) saturate(180%); --backdrop-blur: blur(20px) saturate(180%);
} }
} }
@ -259,6 +254,10 @@ summary {
:after, :after,
:before { :before {
box-sizing: border-box; box-sizing: border-box;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
} }
html { html {
@ -278,6 +277,23 @@ body {
color var(--transition-slow) var(--ease-in-out-quart); color var(--transition-slow) var(--ease-in-out-quart);
line-height: var(--lineHeight-relaxed); line-height: var(--lineHeight-relaxed);
margin: 0; margin: 0;
word-break: normal;
overflow-wrap: break-word;
}
.icon {
filter: brightness(0) saturate(100%) invert(0);
transition: filter var(--transition-slow) var(--ease-in-out-quart);
}
@media (prefers-color-scheme: dark) {
.icon {
filter: brightness(0) saturate(100%) invert(1);
}
}
span[title] {
cursor: pointer;
} }
/* Typography */ /* Typography */
@ -386,17 +402,13 @@ blockquote {
} }
blockquote::before { blockquote::before {
content: ""; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 3px; width: 3px;
background: linear-gradient( background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-hover));
to bottom,
var(--color-primary),
var(--color-primary-hover)
);
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
} }
@ -455,7 +467,7 @@ a {
} }
a::after { a::after {
content: ""; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 1px; height: 1px;

2
content/writing/_index.md
View file

@ -1,4 +1,4 @@
--- ---
title: "My Writing" title: 'My Writing'
description: "I wouldn't exactly call it a blog, given the lack of a regular posting schedule, but there are times when I put pen to paper (or fingers to keys), and the result is worth sharing. You might find something enjoyable in one of these musings." description: "I wouldn't exactly call it a blog, given the lack of a regular posting schedule, but there are times when I put pen to paper (or fingers to keys), and the result is worth sharing. You might find something enjoyable in one of these musings."
--- ---

48
layouts/_default/baseof.html
View file

@ -1,39 +1,24 @@
<!doctype html> <!doctype html>
<html <html lang="{{ .Site.LanguageCode }}" itemscope itemtype="http://schema.org/WebSite">
lang="{{ .Site.LanguageCode }}"
itemscope
itemtype="http://schema.org/WebSite"
>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="darkreader-lock" content="true" />
{{ block "title" . }} {{ block "title" . }}
<title> <title>
{{ if .IsHome }}{{ .Site.Title }}{{ else if .Title }}{{ .Title }} | {{ {{ if .IsHome }}{{ .Site.Title }}{{ else if .Title }}{{ .Title }} | {{ .Site.Title }}{{ else }}{{
.Site.Title }}{{ else }}{{ .Site.Title }}{{ end }} .Site.Title }}{{ end }}
</title> </title>
{{ end }} {{ end }}
<meta <meta name="description" content="{{ .Description | default .Site.Params.description }}" />
name="description"
content="{{ .Description | default .Site.Params.description }}"
/>
<meta name="author" content="{{ .Site.Params.author }}" /> <meta name="author" content="{{ .Site.Params.author }}" />
<meta name="generator" content="Hugo {{ hugo.Version }}" /> <meta name="generator" content="Hugo {{ hugo.Version }}" />
<meta <meta property="og:title" content="{{ if .IsHome }}{{ .Site.Params.author }}{{ else }}{{ .Title }}{{ end }}" />
property="og:title" <meta property="og:description" content="{{ .Description | default .Site.Params.description }}" />
content="{{ if .IsHome }}{{ .Site.Params.author }}{{ else }}{{ .Title }}{{ end }}" <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
/>
<meta
property="og:description"
content="{{ .Description | default .Site.Params.description }}"
/>
<meta
property="og:type"
content="{{ if .IsPage }}article{{ else }}website{{ end }}"
/>
<meta property="og:url" content="{{ .Permalink }}" /> <meta property="og:url" content="{{ .Permalink }}" />
{{ with .Site.Params.images }} {{ with .Site.Params.images }}
<meta property="og:image" content="{{ $.Site.BaseURL }}{{ index . 0 }}" /> <meta property="og:image" content="{{ $.Site.BaseURL }}{{ index . 0 }}" />
@ -48,21 +33,20 @@
<link rel="canonical" href="{{ .Permalink }}" /> <link rel="canonical" href="{{ .Permalink }}" />
{{ $style := resources.Get "css/style.css" | resources.Minify | <link rel="preconnect" href="https://github.githubassets.com" />
resources.Fingerprint }} <link rel="stylesheet" href="https://github.githubassets.com/assets/primitives-363ec1831693.css" />
<link <link rel="stylesheet" href="https://github.githubassets.com/assets/github-b64b0b078eab.css" />
rel="stylesheet"
href="{{ $style.Permalink }}" {{ $style := resources.Get "css/style.css" | resources.Minify | resources.Fingerprint }}
integrity="{{ $style.Data.Integrity }}" <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" />
/>
<link rel="icon" href="/images/Pale_Blue_Dot.png" /> <link rel="icon" href="/images/Pale_Blue_Dot.png" />
<link rel="apple-touch-icon" href="/images/Pale_Blue_Dot.png" /> <link rel="apple-touch-icon" href="/images/Pale_Blue_Dot.png" />
{{ with .OutputFormats.Get "rss" -}} {{ printf ` {{ with .OutputFormats.Get "rss" -}} {{ printf `
<link rel="%s" type="%s" href="%s" title="%s" /> <link rel="%s" type="%s" href="%s" title="%s" />
` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}} {{ ` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}} {{ partial "structured-data.html" . }}
partial "structured-data.html" . }} {{ block "head" . }}{{ end }} {{ block "head" . }}{{ end }}
</head> </head>
<body> <body>
{{ block "header" . }}{{ end }} {{ block "header" . }}{{ end }}

93
layouts/index.html
View file

@ -4,47 +4,82 @@
<div class="content"> <div class="content">
<p> <p>
Hi! I'm Ishmaam. I'm a 20-year-old student and software developer. You may Hi! I'm Ishmaam. I'm a 20-year-old student and software developer. You may enjoy reading some of the
enjoy reading some of the
<a href="/writing">articles</a> I've written. <a href="/writing">articles</a> I've written.
</p> </p>
<p> <p>
<strong>Reach out:</strong>&nbsp;&nbsp;<a <strong>Reach out:</strong>&nbsp;&nbsp;
href="mailto:ishmaam@extroonie.com" <a href="mailto:ishmaam@extroonie.com" title="Email: ishmaam@extroonie.com">
>ishmaam@extroonie.com</a <img
src="/images/icons/envelope-fill.svg"
alt="Email"
width="18"
height="18"
style="vertical-align: middle"
class="icon"
/> </a
>&nbsp;&nbsp;
<a title="Discord: Extroonie">
<img
src="/images/icons/discord.svg"
alt="Discord"
width="18"
height="18"
style="vertical-align: middle"
class="icon"
/> </a
>&nbsp;&nbsp;
<a
href="https://signal.me/#eu/ZowsAT4NJCOyeG4SrCxT_02-yCidvGI73x3GycgIt1SdfH3J_o1NpYBnFGZua8Lk"
rel="noopener noreferrer"
target="_blank"
title="Signal: Extroonie.01"
> >
or Extroonie on Discord and Extroonie.01 on Signal<br /> <img
src="/images/icons/signal.svg"
alt="Signal"
width="18"
height="18"
style="vertical-align: middle"
class="icon"
/> </a
><br />
<strong>Find me:</strong>&nbsp;&nbsp; <strong>Find me:</strong>&nbsp;&nbsp;
<a <a href="https://github.com/Extroonie" rel="noopener noreferrer" target="_blank" title="GitHub">
href="https://github.com/Extroonie" <img
rel="noopener noreferrer" src="/images/icons/github.svg"
target="_blank" alt="GitHub"
>GitHub</a width="18"
> height="18"
<a style="vertical-align: middle"
href="https://twitter.com/Extroonie" class="icon"
rel="noopener noreferrer" /> </a
target="_blank" >&nbsp;&nbsp;
>Twitter</a <a href="https://twitter.com/Extroonie" rel="noopener noreferrer" target="_blank" title="Twitter">
> <img
src="/images/icons/twitter.svg"
alt="Twitter"
width="18"
height="18"
style="vertical-align: middle"
class="icon"
/>
</a>
</p> </p>
<p> <p>
I have 6 years of experience as a backend software developer. My expertise I have 6 years of experience as a backend software developer. My expertise is in TypeScript and Node.js for
is in TypeScript and Node.js for building server-side applications, with building server-side applications, with working knowledge of Rust and Go gained through self-directed
working knowledge of Rust and Go gained through self-directed learning. learning. Currently, most of my projects are closed-source, but I plan to publish many of them and work on
Currently, most of my projects are closed-source, but I plan to publish more complex portfolio projects in the near future.
many of them and work on more complex portfolio projects in the near
future.
</p> </p>
<p> <p>
I enjoy learning about science, especially physics. I have also developed I enjoy learning about science, especially physics. I have also developed an appreciation for philosophy and
an appreciation for philosophy and enjoy discussing metaphysical enjoy discussing metaphysical questions, how we know things, free will controversies, logical puzzles, and
questions, how we know things, free will controversies, logical puzzles, more. I'm also into learning about theology and different faiths to get more insightful takes. I simply
and more. I'm also into learning about theology and different faiths to enjoy learning — beyond the horizon.
get more insightful takes. I simply enjoy learning — beyond the horizon.
</p> </p>
</div> </div>
</div> </div>

28
layouts/writing/list.html
View file

@ -10,41 +10,29 @@
<header class="page-header"> <header class="page-header">
<h1>My Writing</h1> <h1>My Writing</h1>
<p> <p>
I wouldn't exactly call it a blog, given the lack of a regular posting I wouldn't exactly call it a blog, given the lack of a regular posting schedule, but there are times
schedule, but there are times when I put pen to paper (or fingers to when I put pen to paper (or fingers to keys), and the result is worth sharing. You might find something
keys), and the result is worth sharing. You might find something
enjoyable in one of these musings. enjoyable in one of these musings.
</p> </p>
</header> </header>
{{ if .Pages }} {{ if .Pages }}
<ol class="post-list" role="list"> <ol class="post-list" role="list">
{{ range .Pages }} {{ $dateISO := .Date.Format "2006-01-02T15:04:05Z07:00" {{ range .Pages }} {{ $dateISO := .Date.Format "2006-01-02T15:04:05Z07:00" }} {{ $dateHuman := .Date.Format
}} {{ $dateHuman := .Date.Format "January 2, 2006" }} "January 2, 2006" }}
<li role="listitem"> <li role="listitem">
<a <a href="{{ .Permalink }}" class="post-list-item-link" aria-label="Read {{ .Title }}">
href="{{ .Permalink }}" <article class="post-list-item" itemscope itemtype="http://schema.org/BlogPosting">
class="post-list-item-link"
aria-label="Read {{ .Title }}"
>
<article
class="post-list-item"
itemscope
itemtype="http://schema.org/BlogPosting"
>
<header> <header>
<h2> <h2>
<span itemprop="headline">{{ .Title }}</span> <span itemprop="headline">{{ .Title }}</span>
</h2> </h2>
<time datetime="{{ $dateISO }}" itemprop="datePublished"> <time datetime="{{ $dateISO }}" itemprop="datePublished"> {{ $dateHuman }} </time>
{{ $dateHuman }}
</time>
<meta itemprop="author" content="{{ .Site.Params.author }}" /> <meta itemprop="author" content="{{ .Site.Params.author }}" />
</header> </header>
<section> <section>
<p itemprop="description"> <p itemprop="description">
{{ if .Params.description }}{{ .Params.description }}{{ else {{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Summary }}{{ end }}
}}{{ .Summary }}{{ end }}
</p> </p>
</section> </section>
</article> </article>

27
layouts/writing/single.html
View file

@ -1,17 +1,11 @@
{{ define "main" }} {{ define "main" }}
<div class="layout"> <div class="layout">
{{ $dateISO := .Date.Format "2006-01-02T15:04:05Z07:00" }} {{ $dateHuman := {{ $dateISO := .Date.Format "2006-01-02T15:04:05Z07:00" }} {{ $dateHuman := .Date.Format "January 2, 2006" }}
.Date.Format "January 2, 2006" }}
<header class="global-header"> <header class="global-header">
<nav role="navigation" aria-label="Main navigation"> <nav role="navigation" aria-label="Main navigation">
<a class="header-link-home" href="/" aria-label="Go to homepage">Home</a> <a class="header-link-home" href="/" aria-label="Go to homepage">Home</a>
<a <a class="header-link-all-posts" href="/writing/" aria-label="View all posts">All Posts</a>
class="header-link-all-posts"
href="/writing/"
aria-label="View all posts"
>All Posts</a
>
</nav> </nav>
</header> </header>
@ -19,11 +13,8 @@
<header class="post-header"> <header class="post-header">
<h1 itemprop="headline">{{ .Title }}</h1> <h1 itemprop="headline">{{ .Title }}</h1>
<div class="post-meta"> <div class="post-meta">
<time datetime="{{ $dateISO }}" itemprop="datePublished"> <time datetime="{{ $dateISO }}" itemprop="datePublished"> {{ $dateHuman }} </time>
{{ $dateHuman }} {{ if .Lastmod }} {{ $lastmodISO := .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}
</time>
{{ if .Lastmod }} {{ $lastmodISO := .Lastmod.Format
"2006-01-02T15:04:05Z07:00" }}
<meta itemprop="dateModified" content="{{ $lastmodISO }}" /> <meta itemprop="dateModified" content="{{ $lastmodISO }}" />
{{ end }} {{ end }}
<meta itemprop="author" content="{{ .Site.Params.author }}" /> <meta itemprop="author" content="{{ .Site.Params.author }}" />
@ -33,9 +24,7 @@
</div> </div>
</header> </header>
<section class="post-content" itemprop="articleBody"> <section class="post-content" itemprop="articleBody">{{ .Content }}</section>
{{ .Content }}
</section>
</article> </article>
<nav class="post-nav" role="navigation" aria-label="Post navigation"> <nav class="post-nav" role="navigation" aria-label="Post navigation">
@ -53,11 +42,7 @@
</li> </li>
<li class="post-nav-next"> <li class="post-nav-next">
{{ if .PrevInSection }} {{ if .PrevInSection }}
<a <a href="{{ .PrevInSection.Permalink }}" rel="next" aria-label="Next post: {{ .PrevInSection.Title }}">
href="{{ .PrevInSection.Permalink }}"
rel="next"
aria-label="Next post: {{ .PrevInSection.Title }}"
>
{{ .PrevInSection.Title }} → {{ .PrevInSection.Title }} →
</a> </a>
{{ end }} {{ end }}