Lots of cleanup
This commit is contained in:
parent
aa9006bf69
commit
e858b4f59b
24 changed files with 344 additions and 361 deletions
6
.gitignore
vendored
6
.gitignore
vendored
|
@ -1,5 +1,5 @@
|
|||
resources/
|
||||
public/
|
||||
/resources
|
||||
/public
|
||||
|
||||
# Local Netlify folder
|
||||
.netlify
|
||||
/.netlify
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
baseURL: https://lyte.dev
|
||||
languageCode: en-us
|
||||
title: lyte.dev
|
||||
theme: lyte
|
||||
pygmentsCodeFences: true
|
||||
pygmentsCodeFencesGuessSyntax: true
|
||||
pygmentsUseClasses: true
|
||||
|
|
|
@ -59,21 +59,21 @@ iex(4)> MyApp.Accounts.User.__schema__ :type, :email
|
|||
:string
|
||||
iex(5)> MyApp.Accounts.User.__schema__ :association, :roles
|
||||
%Ecto.Association.ManyToMany{
|
||||
cardinality: :many,
|
||||
defaults: [],
|
||||
field: :roles,
|
||||
join_keys: [user_id: :id, role_id: :id],
|
||||
join_through: MyApp.Accounts.UserRole,
|
||||
on_cast: nil,
|
||||
on_delete: :nothing,
|
||||
on_replace: :raise,
|
||||
owner: MyApp.Accounts.User,
|
||||
owner_key: :id,
|
||||
queryable: MyApp.Accounts.Role,
|
||||
related: MyApp.Accounts.Role,
|
||||
relationship: :child,
|
||||
unique: false,
|
||||
where: []
|
||||
cardinality: :many,
|
||||
defaults: [],
|
||||
field: :roles,
|
||||
join_keys: [user_id: :id, role_id: :id],
|
||||
join_through: MyApp.Accounts.UserRole,
|
||||
on_cast: nil,
|
||||
on_delete: :nothing,
|
||||
on_replace: :raise,
|
||||
owner: MyApp.Accounts.User,
|
||||
owner_key: :id,
|
||||
queryable: MyApp.Accounts.Role,
|
||||
related: MyApp.Accounts.Role,
|
||||
relationship: :child,
|
||||
unique: false,
|
||||
where: []
|
||||
}
|
||||
iex(6)> "siiiiiiiiiick"
|
||||
...
|
||||
|
@ -181,7 +181,7 @@ h1
|
|||
= form_for @changeset, action_path, [as: :data], fn f ->
|
||||
h2 Fields
|
||||
|
||||
= for field <- @schema_module.__schema__(:fields) do
|
||||
= for field <- @schema_module.__schema__(:fields) do
|
||||
.field
|
||||
label
|
||||
.label-text #{String.capitalize(to_string(field))}
|
||||
|
@ -265,14 +265,14 @@ practice on my end.
|
|||
# accounts/user.ex
|
||||
|
||||
defimpl MyApp.AdminEditable, for: MyApp.Accounts.User do
|
||||
@readable [:id, :email, :full_name, :inserted_at, :updated_at]
|
||||
@editable [:verified]
|
||||
@readable [:id, :email, :full_name, :inserted_at, :updated_at]
|
||||
@editable [:verified]
|
||||
|
||||
def admin_readable_fields(_s), do: @readable ++ @editable
|
||||
def admin_editable_fields(_s), do: @editable
|
||||
def admin_readable_fields(_s), do: @readable ++ @editable
|
||||
def admin_editable_fields(_s), do: @editable
|
||||
|
||||
# this controls what shows up on the index for a given schema
|
||||
def admin_index_fields(s), do: admin_readable_fields(s)
|
||||
def admin_index_fields(s), do: admin_readable_fields(s)
|
||||
end
|
||||
```
|
||||
|
||||
|
@ -391,7 +391,7 @@ end
|
|||
= form_for @changeset, Routes.admin_path(@conn, :update, @schema, @id), [as: :data], fn f ->
|
||||
h2 Fields
|
||||
|
||||
= for field <- @schema_module.__schema__(:fields) do
|
||||
= for field <- @schema_module.__schema__(:fields) do
|
||||
.field
|
||||
label
|
||||
.label-text #{String.capitalize(to_string(field))}
|
||||
|
|
|
@ -115,7 +115,7 @@ Done!
|
|||
|
||||
The rest is up to you! You'll need to [configure your Matrix servers within
|
||||
WeeChat][weechat-matrix-config] and then verify keys. Verifying keys isn't
|
||||
a particularly clean process at the moment, but I expect it shall improve. For
|
||||
a particularly clean process at the moment, but I expect it shall improve. For
|
||||
now, I followed this basic process in WeeChat:
|
||||
|
||||
+ Open a split at your status window so you can see it and the encrypted channel
|
||||
|
|
|
@ -3,20 +3,17 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{{ block "head-begin" . }}{{ end }}
|
||||
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
|
||||
<link rel="shortcut icon" href="/icon.png" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
<script defer src="/global.js"></script>
|
||||
<script defer src="//a.lyte.dev/matomo.js"></script>
|
||||
<script defer src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
|
||||
{{ block "head-end" . }}{{ end }}
|
||||
</head>
|
||||
<body>
|
||||
{{ block "body-begin" . }}{{ end }}
|
||||
<header>
|
||||
<a href="#start-of-content" class="hidden-in-browsers js-disabled-only">Skip to Content</a>
|
||||
<section>
|
||||
<section>
|
||||
<a href="/" id="logo">
|
||||
<svg version="1.1" viewBox="0 0 70 60" width="48" height="48" alt="lyte.dev LED icon">
|
||||
<linearGradient id="logo-gradient" x1="0" x2="0" y1="0" y2="1">
|
||||
|
@ -35,11 +32,11 @@
|
|||
<use href="#logo-path" style="filter: url(#logo-shadow);" id="icon-shadow"></use>
|
||||
<use href="#logo-path" stroke="url(#logo-gradient)"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/">
|
||||
<h1>lyte.dev</h1>
|
||||
</a>
|
||||
</section>
|
||||
</a>
|
||||
<a href="/">
|
||||
<h1>lyte.dev</h1>
|
||||
</a>
|
||||
</section>
|
||||
<section>
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
|
@ -50,23 +47,18 @@
|
|||
<a href="{{ .URL }}">{{ .Name }}</a>
|
||||
{{ end }}
|
||||
</section>
|
||||
<section style="position:absolute;height:100%;right:0">
|
||||
<button class="no-bg theme-toggler js-only centerize">
|
||||
<svg class="hide-in-light-theme" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path style="fill:var(--fg)" d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
|
||||
<svg class="hide-in-dark-theme" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path style="stroke:var(--fg)" d="M10 4c4.41 0 8 3.59 8 8s-3.59 8-8 8c-.34 0-.68-.02-1.01-.07C10.9 17.77 12 14.95 12 12s-1.1-5.77-3.01-7.93C9.32 4.02 9.66 4 10 4m0-2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
|
||||
</button>
|
||||
<button class="no-bg align-toggler js-only hidden-on-mobile centerize">
|
||||
<svg class="hide-in-align-left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><rect fill="none" height="24" width="24"/><path style="fill:var(--fg)" d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z"/></svg>
|
||||
<svg class="hide-in-align-center" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path style="fill:var(--fg)" d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"/></svg>
|
||||
</button>
|
||||
</section>
|
||||
<section style="position:absolute;height:100%;right:0">
|
||||
<button class="no-bg theme-toggler js-only centerize">
|
||||
<svg class="hide-in-light-theme" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path style="fill:var(--fg)" d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
|
||||
<svg class="hide-in-dark-theme" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path style="stroke:var(--fg)" d="M10 4c4.41 0 8 3.59 8 8s-3.59 8-8 8c-.34 0-.68-.02-1.01-.07C10.9 17.77 12 14.95 12 12s-1.1-5.77-3.01-7.93C9.32 4.02 9.66 4 10 4m0-2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
|
||||
</button>
|
||||
<button class="no-bg align-toggler js-only hidden-on-mobile centerize">
|
||||
<svg class="hide-in-align-left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><rect fill="none" height="24" width="24"/><path style="fill:var(--fg)" d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z"/></svg>
|
||||
<svg class="hide-in-align-center" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path style="fill:var(--fg)" d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"/></svg>
|
||||
</button>
|
||||
</section>
|
||||
</header>
|
||||
<main>
|
||||
{{ block "main" . }}{{ .Content }}{{ end }}
|
||||
</main>
|
||||
{{ block "body-end" . }}
|
||||
<footer style="padding-bottom: 5em">
|
||||
</footer>
|
||||
{{ end }}
|
||||
<main>{{ block "main" . }}{{ .Content }}{{ end }}</main>
|
||||
<footer style="padding-bottom: 5em"></footer>
|
||||
</body>
|
||||
</html>
|
17
layouts/_default/logo.svg.html
Normal file
17
layouts/_default/logo.svg.html
Normal file
|
@ -0,0 +1,17 @@
|
|||
<svg version="1.1" viewBox="0 0 70 60" width="48" height="48" alt="lyte.dev LED icon">
|
||||
<linearGradient id="logo-gradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="50%" style="stop-color:var(--pc)"></stop>
|
||||
<stop offset="100%" style="stop-color:var(--pcd)"></stop>
|
||||
</linearGradient>
|
||||
<filter id="logo-shadow">
|
||||
<feGaussianBlur stdDeviation="1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="1.5" result="offsetblur"></feOffset>
|
||||
<feMerge>
|
||||
<feMergeNode></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<path id="logo-path" stroke-width="3.5" fill-opacity="0" stroke-linecap="round" stroke-linejoin="round" d="M 19.5 44.6 h 30 v -12.3 a 15.0 14.057142857142859 0 0 0 -30 0 v 12.3 M 19.5 44.6 m 8 0 v 7 m 14 -7 v 7 M 19.5 44.6 m -9 -13.3 h -5 M 19.5 44.6 m -2.6999999999999997 -28.3 l -3.55 -3.55 M 19.5 44.6 m 15.0 -35.6 v -5 M 19.5 44.6 m 32.7 -28.3 l 3.55 -3.55 M 19.5 44.6 m 39 -13.3 h 5 M 19.5 44.6 m 8.0 -12.3 a 7.5 6.15 0 0 1 7.0 -6.5"></path>
|
||||
<use href="#logo-path" style="filter: url(#logo-shadow);" id="icon-shadow"></use>
|
||||
<use href="#logo-path" stroke="url(#logo-gradient)"></use>
|
||||
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
|
@ -1,59 +1,61 @@
|
|||
{{ define "main" }}
|
||||
<h2>Hi! I'm Daniel.</h2>
|
||||
|
||||
<p>
|
||||
<img class="rounded" src="/img/avatar-256.jpg" height=256 width=256 />
|
||||
</p>
|
||||
<h2 class="with-align">Hi! I'm Daniel.</h2>
|
||||
|
||||
<p>
|
||||
I live in Kansas City where I help run
|
||||
<a target="_blank" href="https://kcrising.church">a small Christian church</a>,
|
||||
raise two kids with my
|
||||
<a target="_blank" href="https://www.instagram.com/valerielauren93">awesome wife</a>,
|
||||
and write software for
|
||||
<a target="_blank" href="https://postmates.com">Postmates</a>
|
||||
(now <a target="_blank" href="https://uber.com">Uber</a>).
|
||||
</p>
|
||||
<p>
|
||||
<img class="rounded" src="/img/avatar-256.jpg" height=256 width=256 />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Occasionally, I post technical blog posts here.
|
||||
</p>
|
||||
<p>
|
||||
I live in Kansas City where I help run
|
||||
<a target="_blank" href="https://kcrising.church">a small Christian church</a>,
|
||||
raise two kids with my
|
||||
<a target="_blank" href="https://www.instagram.com/valerielauren93">awesome wife</a>,
|
||||
and write software for
|
||||
<a target="_blank" href="https://postmates.com">Postmates</a>
|
||||
(now <a target="_blank" href="https://uber.com">Uber</a>).
|
||||
</p>
|
||||
|
||||
<h2>Latest Posts</h2>
|
||||
<p>
|
||||
Occasionally, I post technical blog posts here.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
{{ range (where .Site.RegularPages "Section" "blog") }}
|
||||
{{ .Render "li" }}
|
||||
{{ else }}
|
||||
<p>Looks like there's nothing here!... yet!</p>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<h2>Latest Posts</h2>
|
||||
|
||||
<h2>More Me</h2>
|
||||
<ul>
|
||||
{{ range (where .Site.RegularPages "Section" "blog") }}
|
||||
{{ .Render "li" }}
|
||||
{{ else }}
|
||||
<p>Looks like there's nothing here!... yet!</p>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://discord.gg/jUCXCYp">Discord</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:daniel@lyte.dev">Email</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/lytedev">GitHub</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.lyte.dev/lytedev">git.lyte.dev</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>More Me</h2>
|
||||
|
||||
<h2>Meta</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://discord.gg/jUCXCYp">Discord</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:daniel@lyte.dev">Email</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/lytedev">GitHub</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.lyte.dev/lytedev">git.lyte.dev</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Meta</h2>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.lyte.dev/lytedev/site.lyte.dev">Site Code</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.lyte.dev/lytedev/site.lyte.dev">Site Code</a>
|
||||
</li>
|
||||
</ul>
|
||||
{{ end }}
|
||||
|
|
14
makefile
14
makefile
|
@ -1,23 +1,25 @@
|
|||
HUGO ?= hugo
|
||||
DEV_SERVE ?= serve --buildDrafts --buildFuture --buildExpired
|
||||
NETLIFY_DEPLOY ?= deploy -d public
|
||||
NETLIFY_DEPLOY ?= deploy -d public
|
||||
|
||||
.PHONY: all
|
||||
all: build
|
||||
|
||||
.PHONY: build
|
||||
build: themes/lyte/static/styles.css ; @${HUGO}
|
||||
build: static/styles.css ; @${HUGO}
|
||||
|
||||
.PHONY: public
|
||||
public: build
|
||||
|
||||
.PHONY: dev
|
||||
dev:
|
||||
@stylus -w themes/lyte/styles.styl --sourcemap -o themes/lyte/static/styles.css &
|
||||
@stylus -w src/stylus/styles.styl --sourcemap -o static/styles.css &
|
||||
@${HUGO} ${DEV_SERVE}
|
||||
|
||||
.PHONY: dev-ext
|
||||
dev-ext: ; @${HUGO} ${DEV_SERVE} --bind 0.0.0.0
|
||||
dev-ext:
|
||||
@stylus -w src/stylus/styles.styl --sourcemap -o static/styles.css &
|
||||
@${HUGO} ${DEV_SERVE} --bind $(shell ip a | grep -oP '192\.168\.\d+\.\d+/' | head -n 1 | tr -d '/')
|
||||
|
||||
.PHONY: clean
|
||||
clean: ; @rm -r public
|
||||
|
@ -28,8 +30,8 @@ publish: clean-css public ; @netlify ${NETLIFY_DEPLOY} && echo "Run \`make publi
|
|||
.PHONY: publish-prod
|
||||
publish-prod: clean-css public ; @netlify ${NETLIFY_DEPLOY} --prod
|
||||
|
||||
themes/lyte/static/styles.css: themes/lyte/styles.styl $(shell find ./themes/lyte -regex ".*\.styl")
|
||||
static/styles.css: src/stylus/styles.styl $(shell find src/stylus -regex ".*\.styl")
|
||||
stylus --compress $< -o $@
|
||||
|
||||
.PHONY: clean-css
|
||||
clean-css: ; rm -f themes/lyte/static/styles.css
|
||||
clean-css: ; rm -f static/styles.css
|
||||
|
|
54
src/stylus/font.styl
Normal file
54
src/stylus/font.styl
Normal file
|
@ -0,0 +1,54 @@
|
|||
// Jonathan Neal's system font stack
|
||||
// https://github.com/jonathantneal/system-font-css/blob/gh-pages/system-font.css
|
||||
font-sources(sources)
|
||||
result = ()
|
||||
for s in sources
|
||||
push(result, unquote("local('" + s + "'),"))
|
||||
push(result, sans-serif)
|
||||
(result)
|
||||
|
||||
system-font-face(style, weight, sources...)
|
||||
font-family system-ui
|
||||
font-style normal
|
||||
font-weight 300
|
||||
src font-sources(sources)
|
||||
|
||||
@font-face
|
||||
system-font-face(normal, 300, ".SFNS-Light", ".SFNSText-Light", ".HelveticaNeueDeskInterface-Light", ".LucidaGrandeUI", "Segoe UI Light", "Ubuntu Light", "Roboto-Light", "DroidSans", "Tahoma")
|
||||
|
||||
@font-face
|
||||
system-font-face(italic, 300, ".SFNS-LightItalic", ".SFNSText-LightItalic", ".HelveticaNeueDeskInterface-Italic", ".LucidaGrandeUI", "Segoe UI Light Italic", "Ubuntu Light Italic", "Roboto-LightItalic", "DroidSans", "Tahoma")
|
||||
|
||||
@font-face
|
||||
system-font-face(normal, 400, ".SFNS-Regular", ".SFNSText-Regular", ".HelveticaNeueDeskInterface-Regular", ".LucidaGrandeUI", "Segoe UI", "Ubuntu", "Roboto-Regular", "DroidSans", "Tahoma")
|
||||
|
||||
@font-face
|
||||
system-font-face(italic, 400, ".SFNS-Italic", ".SFNSText-Italic", ".HelveticaNeueDeskInterface-Italic", ".LucidaGrandeUI", "Segoe UI Italic", "Ubuntu Italic", "Roboto-Italic", "DroidSans", "Tahoma")
|
||||
|
||||
@font-face
|
||||
system-font-face(normal, 500, ".SFNS-Medium", ".SFNSText-Medium", ".HelveticaNeueDeskInterface-MediumP4", ".LucidaGrandeUI", "Segoe UI Semibold", "Ubuntu Medium", "Roboto-Medium", "DroidSans-Bold", "Tahoma Bold")
|
||||
|
||||
@font-face
|
||||
system-font-face(italic, 500, ".SFNS-MediumItalic", ".SFNSText-MediumItalic", ".HelveticaNeueDeskInterface-MediumItalicP4", ".LucidaGrandeUI", "Segoe UI Semibold Italic", "Ubuntu Medium Italic", "Roboto-MediumItalic", "DroidSans-Bold", "Tahoma Bold")
|
||||
|
||||
@font-face
|
||||
system-font-face(normal, 700, ".SFNS-Bold", ".SFNSText-Bold", ".HelveticaNeueDeskInterface-Bold", ".LucidaGrandeUI", "Segoe UI Bold", "Ubuntu Bold", "Roboto-Bold", "DroidSans-Bold", "Tahoma Bold")
|
||||
|
||||
@font-face
|
||||
system-font-face(italic, 700, ".SFNS-BoldItalic", ".SFNSText-BoldItalic", ".HelveticaNeueDeskInterface-BoldItalic", ".LucidaGrandeUI", "Segoe UI Bold Italic", "Ubuntu Bold Italic", "Roboto-BoldItalic", "DroidSans-Bold", "Tahoma Bold")
|
||||
|
||||
iosevka-font-face(style, weight, src)
|
||||
font-family iosevka
|
||||
font-style style
|
||||
font-weight weight
|
||||
src url(src), monospace
|
||||
font-display swap
|
||||
|
||||
@font-face
|
||||
iosevka-font-face(normal, 300, "/font/iosevka/ss07-regular.woff2")
|
||||
|
||||
@font-face
|
||||
iosevka-font-face(italic, 300, "/font/iosevka/ss07-italic.woff2")
|
||||
|
||||
@font-face
|
||||
iosevka-font-face(italic, 500, "/font/iosevka/ss07-bold-italic.woff2")
|
|
@ -3,8 +3,8 @@
|
|||
padding 0
|
||||
box-sizing border-box
|
||||
|
||||
@import theme
|
||||
@import font
|
||||
@import theme
|
||||
|
||||
code, pre { font-family: var(--msff) }
|
||||
ul, ol { padding-left: 2em }
|
||||
|
@ -45,7 +45,7 @@ body
|
|||
font-family var(--msff), monospace
|
||||
position relative
|
||||
display flex
|
||||
background-color var(--bg-header)
|
||||
background-color var(--header-bg)
|
||||
color var(--fg)
|
||||
box-shadow 0 0 0.5em rgba(0, 0, 0, 0.25)
|
||||
margin-bottom 0.5em
|
||||
|
@ -124,20 +124,23 @@ form
|
|||
.hidden-on-mobile { display: none }
|
||||
|
||||
@media (min-width 600px)
|
||||
body.align-left .hide-in-align-left { display: none }
|
||||
body.align-center .hide-in-align-center { display: none }
|
||||
|
||||
body.align-center > main
|
||||
max-width 60ch
|
||||
margin 0 auto
|
||||
body.align-left
|
||||
.hide-in-align-left { display: none }
|
||||
.with-align { text-align: left }
|
||||
|
||||
body.align-center
|
||||
&> main img,
|
||||
&> main embed,
|
||||
&> main frame,
|
||||
&> main iframe
|
||||
max-width 100%
|
||||
.hide-in-align-center { display: none }
|
||||
.with-align { text-align: center }
|
||||
&> main
|
||||
max-width 60ch
|
||||
margin 0 auto
|
||||
display block
|
||||
|
||||
img,
|
||||
embed,
|
||||
frame,
|
||||
iframe
|
||||
max-width 100%
|
||||
margin 0 auto
|
||||
display block
|
||||
|
||||
@import syntax-highlighting
|
63
src/stylus/syntax-highlighting.styl
Normal file
63
src/stylus/syntax-highlighting.styl
Normal file
|
@ -0,0 +1,63 @@
|
|||
main > .highlight pre.chroma
|
||||
border 0
|
||||
padding 0.25em 0.5em
|
||||
border-left solid 0.25em var(--syntax-left-edge)
|
||||
overflow-x auto
|
||||
background-color var(--syntax-bg)
|
||||
-moz-tab-size 2
|
||||
tab-size 2
|
||||
color var(--fg)
|
||||
|
||||
.chroma
|
||||
.err
|
||||
color var(--syntax-err)
|
||||
background-color var(--syntax-bg)
|
||||
|
||||
// Line Table Cell
|
||||
.lntd
|
||||
vertical-align top
|
||||
padding 0
|
||||
margin 0
|
||||
border 0
|
||||
|
||||
// Line Table
|
||||
.lntable
|
||||
border-spacing 0
|
||||
padding 0
|
||||
margin 0
|
||||
border 0
|
||||
width auto
|
||||
overflow auto
|
||||
display block
|
||||
|
||||
// Line Highlight
|
||||
.hl
|
||||
display block
|
||||
width 100%
|
||||
background-color var(--syntax-lhl)
|
||||
|
||||
// Line Numbers and Line Number Table
|
||||
.ln, .lnt
|
||||
margin-right 0.4em
|
||||
padding 0 0.4em 0 0.4em
|
||||
|
||||
.ge { font-style: italic } // GenericEmph
|
||||
.gs { font-weight: bold } // GenericStrong
|
||||
|
||||
for c in k kc kd kp kr kt no
|
||||
.{c} { color: var(--syntax-aq) }
|
||||
|
||||
for c in na nc nd ne gi nf nx
|
||||
.{c} { color: var(--syntax-name) }
|
||||
|
||||
for c in l se m mb mf mh mi il mo
|
||||
.{c} { color: var(--syntax-lit) }
|
||||
|
||||
for c in ld s sa sb sc dl sd s2 sh si sx sr s1 ss
|
||||
.{c} { color: var(--syntax-lits) }
|
||||
|
||||
for c in kn nt o gd ow
|
||||
.{c} { color: var(--syntax-mag) }
|
||||
|
||||
for c in c ch cm c1 cs cp cpf gu
|
||||
.{c} { color: var(--syntax-sh) }
|
88
src/stylus/theme.styl
Normal file
88
src/stylus/theme.styl
Normal file
|
@ -0,0 +1,88 @@
|
|||
light-syntax = {
|
||||
brd: rgba(255, 255, 255, 0.2),
|
||||
bg: rgba(0, 0, 0, 0.05),
|
||||
ledg: #ccc,
|
||||
sh: #775,
|
||||
name: #480,
|
||||
mag: #d04,
|
||||
lit: #40f,
|
||||
lits: #660,
|
||||
aq: #04d,
|
||||
err: #960050,
|
||||
}
|
||||
|
||||
dark-syntax = {
|
||||
brd: rgba(255, 255, 255, 0.2),
|
||||
bg: rgba(255, 255, 255, 0.03),
|
||||
ledg: #333,
|
||||
sh: #75715e,
|
||||
name: #a6e22e,
|
||||
mag: #f92672,
|
||||
lit: #ae81ff,
|
||||
lits: #e6db74,
|
||||
aq: #66d9ef,
|
||||
err: #960050,
|
||||
}
|
||||
|
||||
theme-colors = {
|
||||
heading-fg: #333,
|
||||
icon-shadow: #fff,
|
||||
input-bg: rgba(0, 0, 0, 0.08),
|
||||
input-hover-bg: rgba(0, 0, 0, 0.16),
|
||||
}
|
||||
|
||||
:root
|
||||
--ff system-ui
|
||||
--msff iosevka
|
||||
--pc #df3c59
|
||||
--pcd #8e293b
|
||||
--input-focus-bg var(--input-bg)
|
||||
--button-bg var(--input-bg)
|
||||
--button-hover-bg var(--input-hover-bg)
|
||||
--button-focus-bg var(--input-bg)
|
||||
--link-fg var(--fg)
|
||||
--link-visited-fg var(heading-fg)
|
||||
|
||||
light-theme =
|
||||
for k, v in light-syntax
|
||||
--syntax-{k}: v
|
||||
for k2, v2 in theme-colors
|
||||
{unquote("--" + k2)}: v2
|
||||
--bg #fff
|
||||
--header-bg #eee
|
||||
--fg #111
|
||||
|
||||
dark-theme =
|
||||
for k, v in dark-syntax
|
||||
--syntax-{k}: v
|
||||
for k2, v2 in theme-colors
|
||||
{unquote("--" + k2)}: invert(v2)
|
||||
--bg #111
|
||||
--header-bg #191919
|
||||
--fg #fff
|
||||
--link-visited-fg #aaa
|
||||
|
||||
:root, body.light-theme
|
||||
{light-theme}
|
||||
|
||||
body.dark-theme
|
||||
{dark-theme}
|
||||
|
||||
:root
|
||||
@media (prefers-color-scheme dark)
|
||||
{dark-theme}
|
||||
|
||||
.hide-in-light-theme
|
||||
display none
|
||||
|
||||
@media (prefers-color-scheme dark)
|
||||
.hide-in-dark-theme
|
||||
display none
|
||||
.hide-in-light-theme { display: inherit }
|
||||
body.light-theme .hide-in-dark-theme { display: inherit }
|
||||
body.dark-theme .hide-in-light-theme { display: none }
|
||||
|
||||
body.dark-theme .hide-in-dark-theme { display: none }
|
||||
body.dark-theme .hide-in-light-theme { display: inherit }
|
||||
body.light-theme .hide-in-dark-theme { display: inherit }
|
||||
body.light-theme .hide-in-light-theme { display: none }
|
|
@ -20,14 +20,14 @@ document.querySelectorAll(".js-disabled-only").forEach(a => a.remove())
|
|||
|
||||
const initAlign = () => {
|
||||
const cur = localStorage.getItem("align")
|
||||
const prev = cur == "left" ? "center" : "left"
|
||||
const prev = cur == "center" ? "left" : "center"
|
||||
document.body.classList.add("align-" + cur)
|
||||
document.body.classList.remove("align-" + prev)
|
||||
}
|
||||
if (localStorage.getItem("align") === null) localStorage.setItem("align", "left")
|
||||
if (localStorage.getItem("align") === null) localStorage.setItem("align", "center")
|
||||
initAlign()
|
||||
const toggleAlign = ev => {
|
||||
localStorage.setItem("align", localStorage.getItem("align") == "left" ? "center" : "left")
|
||||
localStorage.setItem("align", localStorage.getItem("align") == "center" ? "left" : "center")
|
||||
initAlign()
|
||||
if (!!ev.target) ev.preventDefault()
|
||||
return false
|
|
@ -1,83 +0,0 @@
|
|||
// Jonathan Neal's system font stack
|
||||
// https://github.com/jonathantneal/system-font-css/blob/gh-pages/system-font.css
|
||||
// TODO: condense with stylus
|
||||
@font-face {
|
||||
font-family system-ui
|
||||
font-style normal
|
||||
font-weight 300
|
||||
src local(".SFNS-Light"), local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"), sans-serif
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family system-ui
|
||||
font-style italic
|
||||
font-weight 300
|
||||
src local(".SFNS-LightItalic"), local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma"), sans-serif
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family system-ui
|
||||
font-style normal
|
||||
font-weight 400
|
||||
src local(".SFNS-Regular"), local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma"), sans-serif
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family system-ui
|
||||
font-style italic
|
||||
font-weight 400
|
||||
src local(".SFNS-Italic"), local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma"), sans-serif
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family system-ui
|
||||
font-style normal
|
||||
font-weight 500
|
||||
src local(".SFNS-Medium"), local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold"), sans-serif
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family system-ui
|
||||
font-style italic
|
||||
font-weight 500
|
||||
src local(".SFNS-MediumItalic"), local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold"), sans-serif
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family system-ui
|
||||
font-style normal
|
||||
font-weight 700
|
||||
src local(".SFNS-Bold"), local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold"), sans-serif
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family system-ui
|
||||
font-style italic
|
||||
font-weight 700
|
||||
src local(".SFNS-BoldItalic"), local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold"), sans-serif
|
||||
}
|
||||
|
||||
// TODO: condense with stylus
|
||||
@font-face {
|
||||
font-family iosevka
|
||||
font-style normal
|
||||
font-weight 300
|
||||
src url("/font/iosevka/ss07-regular.woff2"), monospace
|
||||
font-display swap
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family iosevka
|
||||
font-style italic
|
||||
font-weight 300
|
||||
src url("/font/iosevka/ss07-italic.woff2"), monospace
|
||||
font-display swap
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family iosevka
|
||||
font-style italic
|
||||
font-weight 500
|
||||
src url("/font/iosevka/ss07-bold-italic.woff2"), monospace
|
||||
font-display swap
|
||||
}
|
|
@ -1,67 +0,0 @@
|
|||
main > .highlight pre.chroma
|
||||
border 0
|
||||
padding 0.25em 0.5em
|
||||
border-left solid 0.25em var(--syntax-left-edge)
|
||||
overflow-x auto
|
||||
background-color var(--syntax-bg)
|
||||
|
||||
/* TabSize */ .chroma { -moz-tab-size: 2; tab-size: 2 }
|
||||
/* Background */ .chroma { color: var(--fg); border: solid 0.05em var(--syntax-border) }
|
||||
/* Error */ .chroma .err { color: var(--syntax-err); background-color: var(--syntax-bg) }
|
||||
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
|
||||
/* LineHighlight */ .chroma .hl { display: block; width: 100%; background-color: var(--syntax-lhl) }
|
||||
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
|
||||
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
|
||||
/* Keyword */ .chroma .k { color: var(--syntax-aq) }
|
||||
/* KeywordConstant */ .chroma .kc { color: var(--syntax-aq) }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: var(--syntax-aq) }
|
||||
/* KeywordNamespace */ .chroma .kn { color: var(--syntax-mag) }
|
||||
/* KeywordPseudo */ .chroma .kp { color: var(--syntax-aq) }
|
||||
/* KeywordReserved */ .chroma .kr { color: var(--syntax-aq) }
|
||||
/* KeywordType */ .chroma .kt { color: var(--syntax-aq) }
|
||||
/* NameAttribute */ .chroma .na { color: var(--syntax-name) }
|
||||
/* NameClass */ .chroma .nc { color: var(--syntax-name) }
|
||||
/* NameConstant */ .chroma .no { color: var(--syntax-aq) }
|
||||
/* NameDecorator */ .chroma .nd { color: var(--syntax-name) }
|
||||
/* NameException */ .chroma .ne { color: var(--syntax-name) }
|
||||
/* NameFunction */ .chroma .nf { color: var(--syntax-name) }
|
||||
/* NameOther */ .chroma .nx { color: var(--syntax-name) }
|
||||
/* NameTag */ .chroma .nt { color: var(--syntax-mag) }
|
||||
/* Literal */ .chroma .l { color: var(--syntax-lit) }
|
||||
/* LiteralDate */ .chroma .ld { color: var(--syntax-lits) }
|
||||
/* LiteralString */ .chroma .s { color: var(--syntax-lits) }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: var(--syntax-lits) }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: var(--syntax-lits) }
|
||||
/* LiteralStringChar */ .chroma .sc { color: var(--syntax-lits) }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: var(--syntax-lits) }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: var(--syntax-lits) }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: var(--syntax-lits) }
|
||||
/* LiteralStringEscape */ .chroma .se { color: var(--syntax-lit) }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: var(--syntax-lits) }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: var(--syntax-lits) }
|
||||
/* LiteralStringOther */ .chroma .sx { color: var(--syntax-lits) }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: var(--syntax-lits) }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: var(--syntax-lits) }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: var(--syntax-lits) }
|
||||
/* LiteralNumber */ .chroma .m { color: var(--syntax-lit) }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: var(--syntax-lit) }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: var(--syntax-lit) }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: var(--syntax-lit) }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: var(--syntax-lit) }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: var(--syntax-lit) }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: var(--syntax-lit) }
|
||||
/* Operator */ .chroma .o { color: var(--syntax-mag) }
|
||||
/* OperatorWord */ .chroma .ow { color: var(--syntax-mag) }
|
||||
/* Comment */ .chroma .c { color: var(--syntax-sh) }
|
||||
/* CommentHashbang */ .chroma .ch { color: var(--syntax-sh) }
|
||||
/* CommentMultiline */ .chroma .cm { color: var(--syntax-sh) }
|
||||
/* CommentSingle */ .chroma .c1 { color: var(--syntax-sh) }
|
||||
/* CommentSpecial */ .chroma .cs { color: var(--syntax-sh) }
|
||||
/* CommentPreproc */ .chroma .cp { color: var(--syntax-sh) }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: var(--syntax-sh) }
|
||||
/* GenericDeleted */ .chroma .gd { color: var(--syntax-mag) }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||
/* GenericInserted */ .chroma .gi { color: var(--syntax-name) }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { color: var(--syntax-sh) }
|
|
@ -1,87 +0,0 @@
|
|||
:root, body.light-theme
|
||||
--syntax-border rgba(255, 255, 255, 0.2)
|
||||
--syntax-bg rgba(0, 0, 0, 0.05)
|
||||
--syntax-left-edge #ccc
|
||||
--syntax-sh #775
|
||||
--syntax-name #480
|
||||
--syntax-mag #d04
|
||||
--syntax-lit #40f
|
||||
--syntax-lits #660
|
||||
--syntax-aq #04d
|
||||
--syntax-err #960050
|
||||
|
||||
--ff system-ui
|
||||
--msff iosevka
|
||||
/* primary "brand" colors */
|
||||
--pc #0af
|
||||
--pcd #0cf
|
||||
--bg #fff
|
||||
--fg #111
|
||||
--heading-fg #333
|
||||
--bg-header #eee
|
||||
--icon-shadow #4df
|
||||
|
||||
--input-bg #eee
|
||||
--input-hover-bg #ddd
|
||||
--input-focus-bg var(--input-bg)
|
||||
|
||||
--button-bg #eee
|
||||
--button-hover-bg #ddd
|
||||
--button-focus-bg var(--input-bg)
|
||||
|
||||
--link-fg var(--pc)
|
||||
--link-visited-fg var(--pcd)
|
||||
|
||||
dark-theme =
|
||||
--syntax-border rgba(255, 255, 255, 0.2)
|
||||
--syntax-bg rgba(255, 255, 255, 0.03)
|
||||
--syntax-left-edge #333
|
||||
--syntax-sh #75715e
|
||||
--syntax-name #a6e22e
|
||||
--syntax-mag #f92672
|
||||
--syntax-lit #ae81ff
|
||||
--syntax-lits #e6db74
|
||||
--syntax-aq #66d9ef
|
||||
--syntax-err #960050
|
||||
|
||||
--ff system-ui
|
||||
--msff iosevka
|
||||
// primary "brand" colors
|
||||
// --pc #df3c59
|
||||
// --pcd #8e293b
|
||||
--pc #0af
|
||||
--pcd #0cf
|
||||
--bg #111
|
||||
--fg #fff
|
||||
--heading-fg #ccc
|
||||
--bg-header #191919
|
||||
--icon-shadow #000
|
||||
|
||||
--input-bg #222
|
||||
--input-hover-bg #333
|
||||
--input-focus-bg var(--input-bg)
|
||||
|
||||
--button-bg #222
|
||||
--button-hover-bg #333
|
||||
--button-focus-bg var(--input-bg)
|
||||
|
||||
body.dark-theme
|
||||
{dark-theme}
|
||||
:root
|
||||
@media (prefers-color-scheme dark)
|
||||
{dark-theme}
|
||||
|
||||
.hide-in-light-theme
|
||||
display none
|
||||
|
||||
@media (prefers-color-scheme dark)
|
||||
.hide-in-dark-theme
|
||||
display none
|
||||
.hide-in-light-theme { display: inherit }
|
||||
body.light-theme .hide-in-dark-theme { display: inherit }
|
||||
body.dark-theme .hide-in-light-theme { display: none }
|
||||
|
||||
body.dark-theme .hide-in-dark-theme { display: none }
|
||||
body.dark-theme .hide-in-light-theme { display: inherit }
|
||||
body.light-theme .hide-in-dark-theme { display: inherit }
|
||||
body.light-theme .hide-in-light-theme { display: none }
|
Loading…
Reference in a new issue