chore: shuffle files around
This commit is contained in:
Alexander Daichendt
parent
2d7ffaff20
commit
09a29f82cb
18 changed files with 6 additions and 6 deletions
77
src/lib/components/Code.svelte
Normal file
77
src/lib/components/Code.svelte
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<script lang="ts">
|
||||
let copied = false;
|
||||
|
||||
function copyToClipboard(event: MouseEvent) {
|
||||
// @ts-ignore
|
||||
const target = event.target?.innerText.split('\n')[0];
|
||||
navigator.clipboard.writeText(target);
|
||||
|
||||
// select the double clicked node
|
||||
let sel = document.getSelection();
|
||||
let range = new Range();
|
||||
range.selectNode(event.target?.firstChild);
|
||||
sel?.removeAllRanges();
|
||||
sel?.addRange(range);
|
||||
if (!copied) {
|
||||
copied = true;
|
||||
|
||||
setTimeout(() => (copied = false), 3000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<code on:dblclick={copyToClipboard}>
|
||||
<span class="text">
|
||||
<slot />
|
||||
</span>
|
||||
<div class:copied class="copyWrapper">
|
||||
{#if copied}
|
||||
Copied
|
||||
{:else}
|
||||
Double click to copy
|
||||
{/if}
|
||||
</div>
|
||||
</code>
|
||||
|
||||
<style>
|
||||
.copied {
|
||||
background-color: yellowgreen !important;
|
||||
min-width: 3rem !important;
|
||||
}
|
||||
|
||||
.copyWrapper {
|
||||
background-color: var(--special-color);
|
||||
margin-bottom: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
min-width: 10rem;
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
margin-left: 0px;
|
||||
}
|
||||
code:hover .copyWrapper {
|
||||
visibility: visible;
|
||||
}
|
||||
code {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: var(--light-color);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px var(--shadow-color);
|
||||
padding: 2px;
|
||||
border: 1px solid var(--border-color);
|
||||
line-break: anywhere;
|
||||
}
|
||||
:global([data-nu-scheme-is='dark'] body code:not([class*='language-'])) {
|
||||
color: var(--bg-color);
|
||||
}
|
||||
:global(pre[class*='language-']) {
|
||||
margin: 0.5em 1rem !important;
|
||||
}
|
||||
:global(code[class*='language-'], pre[class*='language-']) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
9
src/lib/components/Divider.svelte
Normal file
9
src/lib/components/Divider.svelte
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<hr />
|
||||
|
||||
<style>
|
||||
hr {
|
||||
background-color: var(--special-color);
|
||||
border: none;
|
||||
height: 1px;
|
||||
}
|
||||
</style>
|
||||
51
src/lib/components/Link.svelte
Normal file
51
src/lib/components/Link.svelte
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<script lang="ts">
|
||||
import { mdiLinkVariant } from '@mdi/js';
|
||||
import { mdiChevronRight } from '@mdi/js';
|
||||
import Icon from 'mdi-svelte';
|
||||
export let href: string;
|
||||
export let disableIcon = false;
|
||||
export let disablePrefetch = false;
|
||||
// svelte-ignore unused-export-let
|
||||
export let rel = '';
|
||||
|
||||
const internal = !href.startsWith('http');
|
||||
|
||||
// external props
|
||||
let props: Record<string,string|boolean> = {
|
||||
rel: "nofollow noreferrer noopener",
|
||||
target: "_blank"
|
||||
}
|
||||
if (internal) {
|
||||
// internal props
|
||||
if (!disablePrefetch ){
|
||||
props = {
|
||||
"sveltekit:prefetch": true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<a
|
||||
{...$$props}
|
||||
{...props}
|
||||
{href}
|
||||
>
|
||||
{#if !disableIcon && !internal}
|
||||
<Icon path={internal ? mdiChevronRight : mdiLinkVariant} size="1rem" />
|
||||
{/if}
|
||||
<span class="text"><slot /></span>
|
||||
</a><style>
|
||||
a {
|
||||
color: var(--special-color);
|
||||
text-decoration: none;
|
||||
font-weight: 550;
|
||||
}
|
||||
a:hover {
|
||||
background-color: var(--outline-color);
|
||||
color: var(--dark-color)
|
||||
}
|
||||
.text {
|
||||
text-decoration: underline;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
11
src/lib/components/ListItem.svelte
Normal file
11
src/lib/components/ListItem.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script lang="ts">
|
||||
export let id: string | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<li {id}><slot /></li>
|
||||
|
||||
<style>
|
||||
li {
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
</style>
|
||||
38
src/lib/components/MoveUpButton.svelte
Normal file
38
src/lib/components/MoveUpButton.svelte
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<script lang="ts">
|
||||
import { mdiChevronDoubleUp } from '@mdi/js';
|
||||
import Icon from 'mdi-svelte';
|
||||
let y: number = 0;
|
||||
|
||||
$: enabled = y > 100;
|
||||
|
||||
function onClick() {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
{#if enabled}
|
||||
<button on:click={onClick}><Icon path={mdiChevronDoubleUp} /></button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
button:focus {
|
||||
box-shadow: 0 0 5px var(--special-shadow-color);
|
||||
}
|
||||
button {
|
||||
border-radius: 35px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: fixed;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
color: var(--text-soft-color);
|
||||
border: 2px solid var(--border-color);
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
button:hover {
|
||||
color: var(--special-color);
|
||||
border: 4px solid var(--border-color);
|
||||
}
|
||||
</style>
|
||||
51
src/lib/components/Table.svelte
Normal file
51
src/lib/components/Table.svelte
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<script>
|
||||
</script>
|
||||
|
||||
<div tabindex="0">
|
||||
<table id="table">
|
||||
<slot />
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
box-shadow: 0px 0px 2px var(--shadow-color);
|
||||
border: 1px solid var(--outline-color);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(#table thead th) {
|
||||
padding-bottom: 0.25rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
border: solid;
|
||||
width: 350px;
|
||||
margin: auto;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
background: linear-gradient(var(--special-color), var(--special-color)) bottom
|
||||
/* left or right or else */ no-repeat;
|
||||
background-size: 50% 2px;
|
||||
}
|
||||
|
||||
:global(#table tbody tr) {
|
||||
border-bottom: 1px solid var(--outline-color);
|
||||
}
|
||||
|
||||
:global(#table tbody tr:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
:global(#table tbody td) {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
138
src/lib/components/ThemeSwitcher.svelte
Normal file
138
src/lib/components/ThemeSwitcher.svelte
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<script lang="js">
|
||||
// @ts-nocheck
|
||||
import { onMount } from 'svelte';
|
||||
let checked = false;
|
||||
|
||||
onMount(() => {
|
||||
const ROOT = document.querySelector(':root');
|
||||
const DARK = 'dark';
|
||||
const LIGHT = 'light';
|
||||
const HIGH = 'more';
|
||||
const LOW = 'no-preference';
|
||||
const SCHEMES = [DARK, LIGHT];
|
||||
const CONTRASTS = [HIGH, LOW];
|
||||
function observeContext(data) {
|
||||
if (data.find((record) => !record.attributeName.endsWith('-is'))) {
|
||||
setScheme();
|
||||
setContrast();
|
||||
}
|
||||
}
|
||||
const schemeMedia = matchMedia('(prefers-color-scheme: dark)');
|
||||
const contrastMedia = matchMedia('(prefers-contrast: more)');
|
||||
let globalScheme = schemeMedia.matches ? DARK : LIGHT;
|
||||
let globalContrast = contrastMedia.matches ? HIGH : LOW;
|
||||
schemeMedia.addListener((_media) => {
|
||||
globalScheme = _media.matches ? DARK : LIGHT;
|
||||
setScheme();
|
||||
});
|
||||
contrastMedia.addListener((_media) => {
|
||||
globalContrast = _media.matches ? HIGH : LOW;
|
||||
setContrast();
|
||||
});
|
||||
function setScheme() {
|
||||
const setting = ROOT.dataset.nuScheme;
|
||||
ROOT.dataset.nuSchemeIs =
|
||||
(setting !== 'auto' && SCHEMES.includes(setting) && setting) || globalScheme;
|
||||
}
|
||||
function setContrast() {
|
||||
const setting = ROOT.dataset.nuContrast;
|
||||
ROOT.dataset.nuContrastIs =
|
||||
(setting !== 'auto' && CONTRASTS.includes(setting) && setting) || globalContrast;
|
||||
}
|
||||
const observer = new MutationObserver((data) => observeContext(data));
|
||||
observer.observe(ROOT, {
|
||||
characterData: false,
|
||||
attributes: true,
|
||||
childList: false,
|
||||
subtree: false,
|
||||
});
|
||||
setScheme();
|
||||
// adjust the theme selector
|
||||
checked = globalScheme === DARK;
|
||||
|
||||
setContrast();
|
||||
// Switch to dark scheme
|
||||
// ROOT.dataset.nuContrast = 'more';
|
||||
// Increase contrast
|
||||
// ROOT.dataset.nuScheme = 'dark';
|
||||
});
|
||||
|
||||
function toggleTheme() {
|
||||
const root = document.querySelector(':root');
|
||||
const theme = root.dataset['nuSchemeIs'];
|
||||
|
||||
if (theme === 'light') {
|
||||
root.dataset['nuScheme'] = 'dark';
|
||||
} else {
|
||||
root.dataset['nuScheme'] = 'light';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<label class="switch">
|
||||
<input aria-label="Nightmode" type="checkbox" bind:checked on:change={toggleTheme} />
|
||||
<span class="slider round" />
|
||||
</label>
|
||||
|
||||
<style>
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: lightskyblue;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: gold;
|
||||
transition: 0.4s;
|
||||
background: radial-gradient(yellow, orange 63%, transparent calc(63% + 3px) 100%);
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--special-mark-color);
|
||||
}
|
||||
input:checked + .slider:before {
|
||||
background-color: white;
|
||||
background: radial-gradient(circle at 19% 19%, transparent 41%, var(--outline-color) 43%);
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 5px var(--special-shadow-color);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
29
src/lib/components/element.svelte
Normal file
29
src/lib/components/element.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<svg
|
||||
width="1.5rem"
|
||||
height="1.5rem"
|
||||
viewBox="0 0 54 54"
|
||||
style="vertical-align: middle"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M19.4414 3.24C19.4414 1.4506 20.892 0 22.6814 0C34.6108 0 44.2814 9.67065 44.2814 21.6C44.2814 23.3894 42.8308 24.84 41.0414 24.84C39.252 24.84 37.8014 23.3894 37.8014 21.6C37.8014 13.2494 31.032 6.48 22.6814 6.48C20.892 6.48 19.4414 5.0294 19.4414 3.24Z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M34.5586 50.76C34.5586 52.5494 33.108 54 31.3186 54C19.3893 54 9.71861 44.3294 9.71861 32.4C9.71861 30.6106 11.1692 29.16 12.9586 29.16C14.748 29.16 16.1986 30.6106 16.1986 32.4C16.1986 40.7505 22.9681 47.52 31.3186 47.52C33.108 47.52 34.5586 48.9706 34.5586 50.76Z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M3.24 34.5601C1.4506 34.5601 -6.34076e-08 33.1095 -1.41625e-07 31.3201C-6.63074e-07 19.3907 9.67065 9.72007 21.6 9.72007C23.3894 9.72007 24.84 11.1707 24.84 12.9601C24.84 14.7495 23.3894 16.2001 21.6 16.2001C13.2495 16.2001 6.48 22.9695 6.48 31.3201C6.48 33.1095 5.0294 34.5601 3.24 34.5601Z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M50.76 19.4399C52.5494 19.4399 54 20.8905 54 22.6799C54 34.6093 44.3294 44.2799 32.4 44.2799C30.6106 44.2799 29.16 42.8293 29.16 41.0399C29.16 39.2505 30.6106 37.7999 32.4 37.7999C40.7505 37.7999 47.52 31.0305 47.52 22.6799C47.52 20.8905 48.9706 19.4399 50.76 19.4399Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
14
src/lib/components/sup.svelte
Normal file
14
src/lib/components/sup.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script lang="ts">
|
||||
export let id: string | undefined;
|
||||
</script>
|
||||
|
||||
<sup {id}><slot /></sup>
|
||||
|
||||
<style>
|
||||
sup {
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
top: -0.3em;
|
||||
left: -0.2em;
|
||||
}
|
||||
</style>
|
||||
44
src/lib/layouts/blog.svelte
Normal file
44
src/lib/layouts/blog.svelte
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<script context="module">
|
||||
// @ts-ignore
|
||||
import components from './components';
|
||||
const { a, table, code, li, hr, sup } = components;
|
||||
export { a, table, code, li, hr, sup };
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// @ts-nocheck
|
||||
import { mdiCalendar } from '@mdi/js';
|
||||
import { mdiPencil } from '@mdi/js';
|
||||
import Icon from 'mdi-svelte';
|
||||
import Divider from '$components/Divider.svelte';
|
||||
import '$lib/utils/one-dark.css';
|
||||
|
||||
export let title;
|
||||
// svelte-ignore unused-export-let
|
||||
export let description;
|
||||
export let created;
|
||||
export let updated = '';
|
||||
// svelte-ignore unused-export-let
|
||||
export let keywords;
|
||||
// svelte-ignore unused-export-let
|
||||
export let hidden = false;
|
||||
</script>
|
||||
|
||||
<h1>{title}</h1>
|
||||
<aside role="note">
|
||||
{#if updated}
|
||||
<Icon path={mdiPencil} size="0.8rem" /> updated {new Date(updated).toLocaleDateString('en-GB')};
|
||||
{/if}
|
||||
<Icon path={mdiCalendar} size="0.8rem" /> created
|
||||
{new Date(created).toLocaleDateString('en-GB')}
|
||||
</aside>
|
||||
<Divider />
|
||||
<slot />
|
||||
|
||||
<style>
|
||||
aside {
|
||||
font-weight: 200;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
17
src/lib/layouts/components.js
Normal file
17
src/lib/layouts/components.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import Link from '../components/Link.svelte';
|
||||
import Table from '../components/Table.svelte';
|
||||
import Code from '../components/Code.svelte';
|
||||
import ListItem from '../components/ListItem.svelte';
|
||||
import Divider from '../components/Divider.svelte';
|
||||
import sup from '../components/sup.svelte';
|
||||
|
||||
const components = {
|
||||
a: Link,
|
||||
table: Table,
|
||||
code: Code,
|
||||
li: ListItem,
|
||||
hr: Divider,
|
||||
sup,
|
||||
};
|
||||
|
||||
export default components;
|
||||
443
src/lib/utils/one-dark.css
Normal file
443
src/lib/utils/one-dark.css
Normal file
|
|
@ -0,0 +1,443 @@
|
|||
/**
|
||||
* One Dark theme for prism.js
|
||||
* Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
|
||||
*/
|
||||
|
||||
/**
|
||||
* One Dark colours (accurate as of commit 8ae45ca on 6 Sep 2018)
|
||||
* From colors.less
|
||||
* --mono-1: hsl(220, 14%, 71%);
|
||||
* --mono-2: hsl(220, 9%, 55%);
|
||||
* --mono-3: hsl(220, 10%, 40%);
|
||||
* --hue-1: hsl(187, 47%, 55%);
|
||||
* --hue-2: hsl(207, 82%, 66%);
|
||||
* --hue-3: hsl(286, 60%, 67%);
|
||||
* --hue-4: hsl(95, 38%, 62%);
|
||||
* --hue-5: hsl(355, 65%, 65%);
|
||||
* --hue-5-2: hsl(5, 48%, 51%);
|
||||
* --hue-6: hsl(29, 54%, 61%);
|
||||
* --hue-6-2: hsl(39, 67%, 69%);
|
||||
* --syntax-fg: hsl(220, 14%, 71%);
|
||||
* --syntax-bg: hsl(220, 13%, 18%);
|
||||
* --syntax-gutter: hsl(220, 14%, 45%);
|
||||
* --syntax-guide: hsla(220, 14%, 71%, 0.15);
|
||||
* --syntax-accent: hsl(220, 100%, 66%);
|
||||
* From syntax-variables.less
|
||||
* --syntax-selection-color: hsl(220, 13%, 28%);
|
||||
* --syntax-gutter-background-color-selected: hsl(220, 13%, 26%);
|
||||
* --syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
|
||||
*/
|
||||
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: hsl(220, 13%, 18%);
|
||||
color: hsl(220, 14%, 71%);
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
code[class*='language-']::-moz-selection,
|
||||
code[class*='language-'] *::-moz-selection,
|
||||
pre[class*='language-'] *::-moz-selection {
|
||||
background: hsl(220, 13%, 28%);
|
||||
color: inherit;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
code[class*='language-']::selection,
|
||||
code[class*='language-'] *::selection,
|
||||
pre[class*='language-'] *::selection {
|
||||
background: hsl(220, 13%, 28%);
|
||||
color: inherit;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.2em 0.3em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Print */
|
||||
@media print {
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.cdata {
|
||||
color: hsl(220, 10%, 40%);
|
||||
}
|
||||
|
||||
.token.doctype,
|
||||
.token.punctuation,
|
||||
.token.entity {
|
||||
color: hsl(220, 14%, 71%);
|
||||
}
|
||||
|
||||
.token.attr-name,
|
||||
.token.class-name,
|
||||
.token.boolean,
|
||||
.token.constant,
|
||||
.token.number,
|
||||
.token.atrule {
|
||||
color: hsl(29, 54%, 61%);
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: hsl(286, 60%, 67%);
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.symbol,
|
||||
.token.deleted,
|
||||
.token.important {
|
||||
color: hsl(355, 65%, 65%);
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted,
|
||||
.token.regex,
|
||||
.token.attr-value,
|
||||
.token.attr-value > .token.punctuation {
|
||||
color: hsl(95, 38%, 62%);
|
||||
}
|
||||
|
||||
.token.variable,
|
||||
.token.operator,
|
||||
.token.function {
|
||||
color: hsl(207, 82%, 66%);
|
||||
}
|
||||
|
||||
.token.url {
|
||||
color: hsl(187, 47%, 55%);
|
||||
}
|
||||
|
||||
/* HTML overrides */
|
||||
.token.attr-value > .token.punctuation.attr-equals,
|
||||
.token.special-attr > .token.attr-value > .token.value.css {
|
||||
color: hsl(220, 14%, 71%);
|
||||
}
|
||||
|
||||
/* CSS overrides */
|
||||
.language-css .token.selector {
|
||||
color: hsl(355, 65%, 65%);
|
||||
}
|
||||
|
||||
.language-css .token.property {
|
||||
color: hsl(220, 14%, 71%);
|
||||
}
|
||||
|
||||
.language-css .token.function,
|
||||
.language-css .token.url > .token.function {
|
||||
color: hsl(187, 47%, 55%);
|
||||
}
|
||||
|
||||
.language-css .token.url > .token.string.url {
|
||||
color: hsl(95, 38%, 62%);
|
||||
}
|
||||
|
||||
.language-css .token.important,
|
||||
.language-css .token.atrule .token.rule {
|
||||
color: hsl(286, 60%, 67%);
|
||||
}
|
||||
|
||||
/* JS overrides */
|
||||
.language-javascript .token.operator {
|
||||
color: hsl(286, 60%, 67%);
|
||||
}
|
||||
|
||||
.language-javascript
|
||||
.token.template-string
|
||||
> .token.interpolation
|
||||
> .token.interpolation-punctuation.punctuation {
|
||||
color: hsl(5, 48%, 51%);
|
||||
}
|
||||
|
||||
/* JSON overrides */
|
||||
.language-json .token.operator {
|
||||
color: hsl(220, 14%, 71%);
|
||||
}
|
||||
|
||||
.language-json .token.null.keyword {
|
||||
color: hsl(29, 54%, 61%);
|
||||
}
|
||||
|
||||
/* MD overrides */
|
||||
.language-markdown .token.url,
|
||||
.language-markdown .token.url > .token.operator,
|
||||
.language-markdown .token.url-reference.url > .token.string {
|
||||
color: hsl(220, 14%, 71%);
|
||||
}
|
||||
|
||||
.language-markdown .token.url > .token.content {
|
||||
color: hsl(207, 82%, 66%);
|
||||
}
|
||||
|
||||
.language-markdown .token.url > .token.url,
|
||||
.language-markdown .token.url-reference.url {
|
||||
color: hsl(187, 47%, 55%);
|
||||
}
|
||||
|
||||
.language-markdown .token.blockquote.punctuation,
|
||||
.language-markdown .token.hr.punctuation {
|
||||
color: hsl(220, 10%, 40%);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.language-markdown .token.code-snippet {
|
||||
color: hsl(95, 38%, 62%);
|
||||
}
|
||||
|
||||
.language-markdown .token.bold .token.content {
|
||||
color: hsl(29, 54%, 61%);
|
||||
}
|
||||
|
||||
.language-markdown .token.italic .token.content {
|
||||
color: hsl(286, 60%, 67%);
|
||||
}
|
||||
|
||||
.language-markdown .token.strike .token.content,
|
||||
.language-markdown .token.strike .token.punctuation,
|
||||
.language-markdown .token.list.punctuation,
|
||||
.language-markdown .token.title.important > .token.punctuation {
|
||||
color: hsl(355, 65%, 65%);
|
||||
}
|
||||
|
||||
/* General */
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Plugin overrides */
|
||||
/* Selectors should have higher specificity than those in the plugins' default stylesheets */
|
||||
|
||||
/* Show Invisibles plugin overrides */
|
||||
.token.token.tab:not(:empty):before,
|
||||
.token.token.cr:before,
|
||||
.token.token.lf:before,
|
||||
.token.token.space:before {
|
||||
color: hsla(220, 14%, 71%, 0.15);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Toolbar plugin overrides */
|
||||
/* Space out all buttons and move them away from the right edge of the code block */
|
||||
div.code-toolbar > .toolbar.toolbar > .toolbar-item {
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
/* Styling the buttons */
|
||||
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
|
||||
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
|
||||
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
|
||||
background: hsl(220, 13%, 26%);
|
||||
color: hsl(220, 9%, 55%);
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
|
||||
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
|
||||
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
|
||||
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
|
||||
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
|
||||
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
|
||||
background: hsl(220, 13%, 28%);
|
||||
color: hsl(220, 14%, 71%);
|
||||
}
|
||||
|
||||
/* Line Highlight plugin overrides */
|
||||
/* The highlighted line itself */
|
||||
.line-highlight.line-highlight {
|
||||
background: hsla(220, 100%, 80%, 0.04);
|
||||
}
|
||||
|
||||
/* Default line numbers in Line Highlight plugin */
|
||||
.line-highlight.line-highlight:before,
|
||||
.line-highlight.line-highlight[data-end]:after {
|
||||
background: hsl(220, 13%, 26%);
|
||||
color: hsl(220, 14%, 71%);
|
||||
padding: 0.1em 0.6em;
|
||||
border-radius: 0.3em;
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
|
||||
}
|
||||
|
||||
/* Hovering over a linkable line number (in the gutter area) */
|
||||
/* Requires Line Numbers plugin as well */
|
||||
pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
|
||||
background-color: hsla(220, 100%, 80%, 0.04);
|
||||
}
|
||||
|
||||
/* Line Numbers and Command Line plugins overrides */
|
||||
/* Line separating gutter from coding area */
|
||||
.line-numbers.line-numbers .line-numbers-rows,
|
||||
.command-line .command-line-prompt {
|
||||
border-right-color: hsla(220, 14%, 71%, 0.15);
|
||||
}
|
||||
|
||||
/* Stuff in the gutter */
|
||||
.line-numbers .line-numbers-rows > span:before,
|
||||
.command-line .command-line-prompt > span:before {
|
||||
color: hsl(220, 14%, 45%);
|
||||
}
|
||||
|
||||
/* Match Braces plugin overrides */
|
||||
/* Note: Outline colour is inherited from the braces */
|
||||
.rainbow-braces .token.token.punctuation.brace-level-1,
|
||||
.rainbow-braces .token.token.punctuation.brace-level-5,
|
||||
.rainbow-braces .token.token.punctuation.brace-level-9 {
|
||||
color: hsl(355, 65%, 65%);
|
||||
}
|
||||
|
||||
.rainbow-braces .token.token.punctuation.brace-level-2,
|
||||
.rainbow-braces .token.token.punctuation.brace-level-6,
|
||||
.rainbow-braces .token.token.punctuation.brace-level-10 {
|
||||
color: hsl(95, 38%, 62%);
|
||||
}
|
||||
|
||||
.rainbow-braces .token.token.punctuation.brace-level-3,
|
||||
.rainbow-braces .token.token.punctuation.brace-level-7,
|
||||
.rainbow-braces .token.token.punctuation.brace-level-11 {
|
||||
color: hsl(207, 82%, 66%);
|
||||
}
|
||||
|
||||
.rainbow-braces .token.token.punctuation.brace-level-4,
|
||||
.rainbow-braces .token.token.punctuation.brace-level-8,
|
||||
.rainbow-braces .token.token.punctuation.brace-level-12 {
|
||||
color: hsl(286, 60%, 67%);
|
||||
}
|
||||
|
||||
/* Diff Highlight plugin overrides */
|
||||
/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
|
||||
pre.diff-highlight > code .token.token.deleted:not(.prefix),
|
||||
pre > code.diff-highlight .token.token.deleted:not(.prefix) {
|
||||
background-color: hsla(353, 100%, 66%, 0.15);
|
||||
}
|
||||
|
||||
pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
|
||||
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
|
||||
pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
|
||||
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
|
||||
background-color: hsla(353, 95%, 66%, 0.25);
|
||||
}
|
||||
|
||||
pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
|
||||
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
|
||||
pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
|
||||
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
|
||||
background-color: hsla(353, 95%, 66%, 0.25);
|
||||
}
|
||||
|
||||
pre.diff-highlight > code .token.token.inserted:not(.prefix),
|
||||
pre > code.diff-highlight .token.token.inserted:not(.prefix) {
|
||||
background-color: hsla(137, 100%, 55%, 0.15);
|
||||
}
|
||||
|
||||
pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
|
||||
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
|
||||
pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
|
||||
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
|
||||
background-color: hsla(135, 73%, 55%, 0.25);
|
||||
}
|
||||
|
||||
pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
|
||||
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
|
||||
pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
|
||||
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
|
||||
background-color: hsla(135, 73%, 55%, 0.25);
|
||||
}
|
||||
|
||||
/* Previewers plugin overrides */
|
||||
/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */
|
||||
/* Border around popup */
|
||||
.prism-previewer.prism-previewer:before,
|
||||
.prism-previewer-gradient.prism-previewer-gradient div {
|
||||
border-color: hsl(224, 13%, 17%);
|
||||
}
|
||||
|
||||
/* Angle and time should remain as circles and are hence not included */
|
||||
.prism-previewer-color.prism-previewer-color:before,
|
||||
.prism-previewer-gradient.prism-previewer-gradient div,
|
||||
.prism-previewer-easing.prism-previewer-easing:before {
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
/* Triangles pointing to the code */
|
||||
.prism-previewer.prism-previewer:after {
|
||||
border-top-color: hsl(224, 13%, 17%);
|
||||
}
|
||||
|
||||
.prism-previewer-flipped.prism-previewer-flipped.after {
|
||||
border-bottom-color: hsl(224, 13%, 17%);
|
||||
}
|
||||
|
||||
/* Background colour within the popup */
|
||||
.prism-previewer-angle.prism-previewer-angle:before,
|
||||
.prism-previewer-time.prism-previewer-time:before,
|
||||
.prism-previewer-easing.prism-previewer-easing {
|
||||
background: hsl(219, 13%, 22%);
|
||||
}
|
||||
|
||||
/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
|
||||
/* For time, this is the alternate colour */
|
||||
.prism-previewer-angle.prism-previewer-angle circle,
|
||||
.prism-previewer-time.prism-previewer-time circle {
|
||||
stroke: hsl(220, 14%, 71%);
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
|
||||
/* Stroke colours of the handle, direction point, and vector itself */
|
||||
.prism-previewer-easing.prism-previewer-easing circle,
|
||||
.prism-previewer-easing.prism-previewer-easing path,
|
||||
.prism-previewer-easing.prism-previewer-easing line {
|
||||
stroke: hsl(220, 14%, 71%);
|
||||
}
|
||||
|
||||
/* Fill colour of the handle */
|
||||
.prism-previewer-easing.prism-previewer-easing circle {
|
||||
fill: transparent;
|
||||
}
|
||||
17
src/lib/utils/types.ts
Normal file
17
src/lib/utils/types.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
export interface BlogPostFrontmatter {
|
||||
created: string;
|
||||
updated?: string;
|
||||
title: string;
|
||||
description: string;
|
||||
keywords: string[];
|
||||
hidden: boolean;
|
||||
}
|
||||
|
||||
export interface BlogPostMeta extends BlogPostFrontmatter {
|
||||
href: string;
|
||||
}
|
||||
export interface Skill {
|
||||
name: string;
|
||||
years: number;
|
||||
started: number;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue