mirror of
https://github.com/Extroonie/extroonie.com.git
synced 2026-07-07 07:06:42 -07:00
feat: various site enhancements
This commit is contained in:
parent
688445f9ad
commit
09997f333f
10 changed files with 954 additions and 950 deletions
|
|
@ -80,22 +80,22 @@ select {
|
|||
text-transform: none;
|
||||
}
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
[type='button']::-moz-focus-inner,
|
||||
[type='reset']::-moz-focus-inner,
|
||||
[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
[type='button']:-moz-focusring,
|
||||
[type='reset']:-moz-focusring,
|
||||
[type='submit']:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
fieldset {
|
||||
|
|
@ -115,20 +115,20 @@ progress {
|
|||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
[type='number']::-webkit-inner-spin-button,
|
||||
[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
[type="search"] {
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
::-webkit-file-upload-button {
|
||||
|
|
@ -164,11 +164,11 @@ summary {
|
|||
|
||||
/* Typography */
|
||||
--fontFamily-sans:
|
||||
"Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
system-ui, sans-serif;
|
||||
--fontFamily-serif: "Source Serif 4", ui-serif, Georgia, serif;
|
||||
--fontFamily-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
|
||||
--font-body: var(--fontFamily-serif);
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji';
|
||||
--fontFamily-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--fontFamily-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--font-body: var(--fontFamily-sans);
|
||||
--font-heading: var(--fontFamily-sans);
|
||||
--font-mono: var(--fontFamily-mono);
|
||||
--fontWeight-normal: 400;
|
||||
|
|
@ -209,10 +209,8 @@ summary {
|
|||
--focus-ring: 2px solid var(--color-focus);
|
||||
--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-medium:
|
||||
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-medium: 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);
|
||||
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--transition-base: 200ms;
|
||||
|
|
@ -244,12 +242,9 @@ summary {
|
|||
--color-code-bg: #1c1c1e;
|
||||
--color-code-inline: #2c2c2e;
|
||||
--color-accent: #0a84ff;
|
||||
--shadow-small:
|
||||
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-large:
|
||||
0 10px 15px -3px rgb(0 0 0 / 0.7), 0 4px 6px -4px rgb(0 0 0 / 0.5);
|
||||
--shadow-small: 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-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%);
|
||||
}
|
||||
}
|
||||
|
|
@ -259,6 +254,10 @@ summary {
|
|||
:after,
|
||||
:before {
|
||||
box-sizing: border-box;
|
||||
hyphens: none;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -278,6 +277,23 @@ body {
|
|||
color var(--transition-slow) var(--ease-in-out-quart);
|
||||
line-height: var(--lineHeight-relaxed);
|
||||
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 */
|
||||
|
|
@ -386,17 +402,13 @@ blockquote {
|
|||
}
|
||||
|
||||
blockquote::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--color-primary),
|
||||
var(--color-primary-hover)
|
||||
);
|
||||
background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-hover));
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
|
|
@ -455,7 +467,7 @@ a {
|
|||
}
|
||||
|
||||
a::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,39 +1,24 @@
|
|||
<!doctype html>
|
||||
<html
|
||||
lang="{{ .Site.LanguageCode }}"
|
||||
itemscope
|
||||
itemtype="http://schema.org/WebSite"
|
||||
>
|
||||
<html lang="{{ .Site.LanguageCode }}" itemscope itemtype="http://schema.org/WebSite">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="darkreader-lock" content="true" />
|
||||
|
||||
{{ block "title" . }}
|
||||
<title>
|
||||
{{ if .IsHome }}{{ .Site.Title }}{{ else if .Title }}{{ .Title }} | {{
|
||||
.Site.Title }}{{ else }}{{ .Site.Title }}{{ end }}
|
||||
{{ if .IsHome }}{{ .Site.Title }}{{ else if .Title }}{{ .Title }} | {{ .Site.Title }}{{ else }}{{
|
||||
.Site.Title }}{{ end }}
|
||||
</title>
|
||||
{{ end }}
|
||||
|
||||
<meta
|
||||
name="description"
|
||||
content="{{ .Description | default .Site.Params.description }}"
|
||||
/>
|
||||
<meta name="description" content="{{ .Description | default .Site.Params.description }}" />
|
||||
<meta name="author" content="{{ .Site.Params.author }}" />
|
||||
<meta name="generator" content="Hugo {{ hugo.Version }}" />
|
||||
|
||||
<meta
|
||||
property="og:title"
|
||||
content="{{ if .IsHome }}{{ .Site.Params.author }}{{ else }}{{ .Title }}{{ 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:title" content="{{ if .IsHome }}{{ .Site.Params.author }}{{ else }}{{ .Title }}{{ 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 }}" />
|
||||
{{ with .Site.Params.images }}
|
||||
<meta property="og:image" content="{{ $.Site.BaseURL }}{{ index . 0 }}" />
|
||||
|
|
@ -48,21 +33,20 @@
|
|||
|
||||
<link rel="canonical" href="{{ .Permalink }}" />
|
||||
|
||||
{{ $style := resources.Get "css/style.css" | resources.Minify |
|
||||
resources.Fingerprint }}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ $style.Permalink }}"
|
||||
integrity="{{ $style.Data.Integrity }}"
|
||||
/>
|
||||
<link rel="preconnect" href="https://github.githubassets.com" />
|
||||
<link rel="stylesheet" href="https://github.githubassets.com/assets/primitives-363ec1831693.css" />
|
||||
<link rel="stylesheet" href="https://github.githubassets.com/assets/github-b64b0b078eab.css" />
|
||||
|
||||
{{ $style := resources.Get "css/style.css" | resources.Minify | resources.Fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" />
|
||||
|
||||
<link rel="icon" href="/images/Pale_Blue_Dot.png" />
|
||||
<link rel="apple-touch-icon" href="/images/Pale_Blue_Dot.png" />
|
||||
|
||||
{{ with .OutputFormats.Get "rss" -}} {{ printf `
|
||||
<link rel="%s" type="%s" href="%s" title="%s" />
|
||||
` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}} {{
|
||||
partial "structured-data.html" . }} {{ block "head" . }}{{ end }}
|
||||
` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}} {{ partial "structured-data.html" . }}
|
||||
{{ block "head" . }}{{ end }}
|
||||
</head>
|
||||
<body>
|
||||
{{ block "header" . }}{{ end }}
|
||||
|
|
|
|||
|
|
@ -4,47 +4,82 @@
|
|||
|
||||
<div class="content">
|
||||
<p>
|
||||
Hi! I'm Ishmaam. I'm a 20-year-old student and software developer. You may
|
||||
enjoy reading some of the
|
||||
Hi! I'm Ishmaam. I'm a 20-year-old student and software developer. You may enjoy reading some of the
|
||||
<a href="/writing">articles</a> I've written.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Reach out:</strong> <a
|
||||
href="mailto:ishmaam@extroonie.com"
|
||||
>ishmaam@extroonie.com</a
|
||||
<strong>Reach out:</strong>
|
||||
<a href="mailto:ishmaam@extroonie.com" title="Email: ishmaam@extroonie.com">
|
||||
<img
|
||||
src="/images/icons/envelope-fill.svg"
|
||||
alt="Email"
|
||||
width="18"
|
||||
height="18"
|
||||
style="vertical-align: middle"
|
||||
class="icon"
|
||||
/> </a
|
||||
>
|
||||
<a title="Discord: Extroonie">
|
||||
<img
|
||||
src="/images/icons/discord.svg"
|
||||
alt="Discord"
|
||||
width="18"
|
||||
height="18"
|
||||
style="vertical-align: middle"
|
||||
class="icon"
|
||||
/> </a
|
||||
>
|
||||
<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>
|
||||
<a
|
||||
href="https://github.com/Extroonie"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>GitHub</a
|
||||
>
|
||||
<a
|
||||
href="https://twitter.com/Extroonie"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>Twitter</a
|
||||
>
|
||||
<a href="https://github.com/Extroonie" rel="noopener noreferrer" target="_blank" title="GitHub">
|
||||
<img
|
||||
src="/images/icons/github.svg"
|
||||
alt="GitHub"
|
||||
width="18"
|
||||
height="18"
|
||||
style="vertical-align: middle"
|
||||
class="icon"
|
||||
/> </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>
|
||||
I have 6 years of experience as a backend software developer. My expertise
|
||||
is in TypeScript and Node.js for building server-side applications, with
|
||||
working knowledge of Rust and Go gained through self-directed learning.
|
||||
Currently, most of my projects are closed-source, but I plan to publish
|
||||
many of them and work on more complex portfolio projects in the near
|
||||
future.
|
||||
I have 6 years of experience as a backend software developer. My expertise is in TypeScript and Node.js for
|
||||
building server-side applications, with working knowledge of Rust and Go gained through self-directed
|
||||
learning. Currently, most of my projects are closed-source, but I plan to publish many of them and work on
|
||||
more complex portfolio projects in the near future.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I enjoy learning about science, especially physics. I have also developed
|
||||
an appreciation for philosophy and enjoy discussing metaphysical
|
||||
questions, how we know things, free will controversies, logical puzzles,
|
||||
and more. I'm also into learning about theology and different faiths to
|
||||
get more insightful takes. I simply enjoy learning — beyond the horizon.
|
||||
I enjoy learning about science, especially physics. I have also developed an appreciation for philosophy and
|
||||
enjoy discussing metaphysical questions, how we know things, free will controversies, logical puzzles, and
|
||||
more. I'm also into learning about theology and different faiths to get more insightful takes. I simply
|
||||
enjoy learning — beyond the horizon.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,41 +10,29 @@
|
|||
<header class="page-header">
|
||||
<h1>My Writing</h1>
|
||||
<p>
|
||||
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
|
||||
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.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{{ if .Pages }}
|
||||
<ol class="post-list" role="list">
|
||||
{{ range .Pages }} {{ $dateISO := .Date.Format "2006-01-02T15:04:05Z07:00"
|
||||
}} {{ $dateHuman := .Date.Format "January 2, 2006" }}
|
||||
{{ range .Pages }} {{ $dateISO := .Date.Format "2006-01-02T15:04:05Z07:00" }} {{ $dateHuman := .Date.Format
|
||||
"January 2, 2006" }}
|
||||
<li role="listitem">
|
||||
<a
|
||||
href="{{ .Permalink }}"
|
||||
class="post-list-item-link"
|
||||
aria-label="Read {{ .Title }}"
|
||||
>
|
||||
<article
|
||||
class="post-list-item"
|
||||
itemscope
|
||||
itemtype="http://schema.org/BlogPosting"
|
||||
>
|
||||
<a href="{{ .Permalink }}" class="post-list-item-link" aria-label="Read {{ .Title }}">
|
||||
<article class="post-list-item" itemscope itemtype="http://schema.org/BlogPosting">
|
||||
<header>
|
||||
<h2>
|
||||
<span itemprop="headline">{{ .Title }}</span>
|
||||
</h2>
|
||||
<time datetime="{{ $dateISO }}" itemprop="datePublished">
|
||||
{{ $dateHuman }}
|
||||
</time>
|
||||
<time datetime="{{ $dateISO }}" itemprop="datePublished"> {{ $dateHuman }} </time>
|
||||
<meta itemprop="author" content="{{ .Site.Params.author }}" />
|
||||
</header>
|
||||
<section>
|
||||
<p itemprop="description">
|
||||
{{ if .Params.description }}{{ .Params.description }}{{ else
|
||||
}}{{ .Summary }}{{ end }}
|
||||
{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Summary }}{{ end }}
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,11 @@
|
|||
{{ define "main" }}
|
||||
<div class="layout">
|
||||
{{ $dateISO := .Date.Format "2006-01-02T15:04:05Z07:00" }} {{ $dateHuman :=
|
||||
.Date.Format "January 2, 2006" }}
|
||||
{{ $dateISO := .Date.Format "2006-01-02T15:04:05Z07:00" }} {{ $dateHuman := .Date.Format "January 2, 2006" }}
|
||||
|
||||
<header class="global-header">
|
||||
<nav role="navigation" aria-label="Main navigation">
|
||||
<a class="header-link-home" href="/" aria-label="Go to homepage">Home</a>
|
||||
<a
|
||||
class="header-link-all-posts"
|
||||
href="/writing/"
|
||||
aria-label="View all posts"
|
||||
>All Posts</a
|
||||
>
|
||||
<a class="header-link-all-posts" href="/writing/" aria-label="View all posts">All Posts</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
|
@ -19,11 +13,8 @@
|
|||
<header class="post-header">
|
||||
<h1 itemprop="headline">{{ .Title }}</h1>
|
||||
<div class="post-meta">
|
||||
<time datetime="{{ $dateISO }}" itemprop="datePublished">
|
||||
{{ $dateHuman }}
|
||||
</time>
|
||||
{{ if .Lastmod }} {{ $lastmodISO := .Lastmod.Format
|
||||
"2006-01-02T15:04:05Z07:00" }}
|
||||
<time datetime="{{ $dateISO }}" itemprop="datePublished"> {{ $dateHuman }} </time>
|
||||
{{ if .Lastmod }} {{ $lastmodISO := .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}
|
||||
<meta itemprop="dateModified" content="{{ $lastmodISO }}" />
|
||||
{{ end }}
|
||||
<meta itemprop="author" content="{{ .Site.Params.author }}" />
|
||||
|
|
@ -33,9 +24,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<section class="post-content" itemprop="articleBody">
|
||||
{{ .Content }}
|
||||
</section>
|
||||
<section class="post-content" itemprop="articleBody">{{ .Content }}</section>
|
||||
</article>
|
||||
|
||||
<nav class="post-nav" role="navigation" aria-label="Post navigation">
|
||||
|
|
@ -53,11 +42,7 @@
|
|||
</li>
|
||||
<li class="post-nav-next">
|
||||
{{ if .PrevInSection }}
|
||||
<a
|
||||
href="{{ .PrevInSection.Permalink }}"
|
||||
rel="next"
|
||||
aria-label="Next post: {{ .PrevInSection.Title }}"
|
||||
>
|
||||
<a href="{{ .PrevInSection.Permalink }}" rel="next" aria-label="Next post: {{ .PrevInSection.Title }}">
|
||||
{{ .PrevInSection.Title }} →
|
||||
</a>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue