WIP
AtelierSnek
parent
8a0ff1b1a0
commit
16debb4b41
|
|
@ -8,17 +8,18 @@ rtl: false
|
|||
title: "Rin"
|
||||
# logo = "img/logo.png"
|
||||
description: "As in 凛冽时雨"
|
||||
copyright: "Copyright 2022 Rin (Tamara Vassileva) - All opinions herein are our own and not those of our employers"
|
||||
copyright: "Copyright 2022 Rin (Tamara Vassileva) <br /> All opinions herein are our own
|
||||
and not those of employers past, present, or potential."
|
||||
|
||||
dateFormat: "2 January 2006"
|
||||
dateFormat: "Mon Jan 2 2006"
|
||||
|
||||
author:
|
||||
name: "Rin"
|
||||
image: "img/blowfish_logo.png"
|
||||
headline: "As in 凛冽时雨"
|
||||
bio: "System that mostly works on TCP/IP networks and automation, but loves FP and Category Theory"
|
||||
bio: "System that mostly works on TCP/IP networks and automation,<br />but loves FP and Category Theory"
|
||||
links:
|
||||
# - email: 'mailto:hello@your_domain.com'
|
||||
- email: 'mailto:rin@rin.systems'
|
||||
# - link: 'https://link-to-some-website.com/'
|
||||
# - amazon: 'https://www.amazon.com/hz/wishlist/ls/wishlist-id'
|
||||
# - apple: 'https://www.apple.com'
|
||||
|
|
@ -56,6 +57,6 @@ author:
|
|||
# - tiktok: 'https://tiktok.com/@username'
|
||||
# - tumblr: 'https://username.tumblr.com'
|
||||
# - twitch: 'https://twitch.tv/username'
|
||||
# - twitter: 'https://twitter.com/username'
|
||||
- twitter: 'https://twitter.com/diserasta'
|
||||
# - whatsapp: 'https://wa.me/phone-number'
|
||||
# - youtube: 'https://youtube.com/username'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"vimMode": true
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"cssTheme": "Everforest"
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
[
|
||||
"file-explorer",
|
||||
"global-search",
|
||||
"switcher",
|
||||
"graph",
|
||||
"backlink",
|
||||
"outgoing-link",
|
||||
"tag-pane",
|
||||
"page-preview",
|
||||
"daily-notes",
|
||||
"templates",
|
||||
"note-composer",
|
||||
"command-palette",
|
||||
"editor-status",
|
||||
"starred",
|
||||
"outline",
|
||||
"word-count",
|
||||
"file-recovery"
|
||||
]
|
||||
|
|
@ -0,0 +1 @@
|
|||
{}
|
||||
|
|
@ -0,0 +1,669 @@
|
|||
/***** TABLE OF CONTENTS *****/
|
||||
/* TODO: Reformat entire CSS file as below.
|
||||
/* 1. Font
|
||||
/* 2. Colours
|
||||
/* 2.1. Dark theme color variables
|
||||
/* 2.2. Light theme color variables
|
||||
/* 2.3. Dark theme implementation
|
||||
/* 2.4. Light theme implementation
|
||||
/* 3. General UI
|
||||
/* 3.1. Title Bar
|
||||
/* 4. Markdown (editor / preview)
|
||||
/* 4.1. Headings
|
||||
/* 4.1.1. Fix font weights
|
||||
/* 4.2. Links
|
||||
/* 4.2.1. Nifty arrow before internal links (also applies to embeds)
|
||||
/* 4.3. Embeds
|
||||
/* 4.4. Tables
|
||||
/* 4.5. Popovers
|
||||
/* 4.6. Task Lists
|
||||
/* 4.7. Blockquotes
|
||||
/* 4.8. Code
|
||||
/* 4.9. Bulleted lists
|
||||
/* 4.10. Misc Fixes
|
||||
/* 5. Graph view colours
|
||||
/* 6. Notion Colour Blocks
|
||||
/* 7. In-document header (scrolls with the document) [remove for compatibility with Andy's mode]
|
||||
/* 7.1. Adjustments for non-in-document headers (graphs, etc)\
|
||||
/* 7.2. Active pane border
|
||||
/* 7.3. Misc fixes
|
||||
/* 8. Tags
|
||||
/* 8.1. Tag custom colours
|
||||
/***** *****/
|
||||
|
||||
/* 1. Font */
|
||||
body {
|
||||
/* font stacks taken directly from Notion */
|
||||
--font-monospace: "Hack Nerd Font", "Source Code Pro", monospace;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
/* 2. Colours */
|
||||
:root
|
||||
{
|
||||
/* 2.1 Dark theme color variables */
|
||||
--bg0-dark: #22282c;
|
||||
--bg1-dark: #272f34;
|
||||
--bg-dark: #2f383e;
|
||||
--bg2-dark: #374247;
|
||||
--bg3-dark: #404c51;
|
||||
--bg4-dark: #4a555b;
|
||||
--bg5-dark: #525c62;
|
||||
--bg_visual: #503946;
|
||||
--bg_red: #4e3e43;
|
||||
--bg_green: #404d44;
|
||||
--bg_blue: #394f5a;
|
||||
--bg_yellow: #4a4940;
|
||||
--shadow: #00000070;
|
||||
|
||||
--fg-dark: #d3c6aa;
|
||||
--grey0-dark: #7f897d;
|
||||
--grey1-dark: #859289;
|
||||
--grey2-dark: #9aa79d;
|
||||
|
||||
--faded-red: #e67e80;
|
||||
--faded-orange: #e69875;
|
||||
--faded-yellow: #dbbc7f;
|
||||
--faded-green: #a7c080;
|
||||
--faded-aqua: #83c092;
|
||||
--faded-blue: #7fbbb3;
|
||||
--faded-purple: #d699b6;
|
||||
|
||||
--dim-red: #da6362;
|
||||
--dim-orange: #d77f48;
|
||||
--dim-yellow: #bf983d;
|
||||
--dim-green: #899c40;
|
||||
--dim-aqua: #569d79;
|
||||
--dim-blue: #5a93a2;
|
||||
--dim-purple: #b87b9d;
|
||||
|
||||
|
||||
/* 2.2 Light theme color variables */
|
||||
--bg0-light: #f0edd8;
|
||||
--bg1-light: #f6f1dd;
|
||||
--bg-light: #fdf6e3;
|
||||
--bg2-light: #f3efda;
|
||||
--bg3-light: #edead5;
|
||||
--bg4-light: #e4e1cd;
|
||||
--bg5-light: #dfdbc8;
|
||||
--grey0-light: #a4ad9e;
|
||||
--grey1-light: #939f91;
|
||||
--grey2-light: #879686;
|
||||
--shadow-light: #3c474d20;
|
||||
|
||||
|
||||
--bg_visual_light: #eaedc8;
|
||||
--bg_red_light: #fbe3da;
|
||||
--bg_green_light: #f0f1d2;
|
||||
--bg_blue_light: #e9f0e9;
|
||||
--bg_yellow_light: #faedcd;
|
||||
|
||||
--fg-light: #5c6a72;
|
||||
|
||||
--light-red: #f85552;
|
||||
--light-orange: #f57d26;
|
||||
--light-yellow: #bf983d;
|
||||
--light-green: #899c40;
|
||||
--light-aqua: #569d79;
|
||||
--light-blue: #5a93a2;
|
||||
--light-purple: #b87b9d;
|
||||
|
||||
--light-dim-red: #f1706f;
|
||||
--light-dim-orange: #f39459;
|
||||
--light-dim-yellow: #e4b649;
|
||||
--light-dim-green: #a4bb4a;
|
||||
--light-dim-aqua: #6ec398;
|
||||
--light-dim-blue: #6cb3c6;
|
||||
--light-dim-purple: #e092be;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* 2.3 Dark theme implementation */
|
||||
.theme-dark
|
||||
{
|
||||
--background-primary: var(--bg-dark);
|
||||
--background-primary-alt: var(--bg-dark);
|
||||
--background-secondary: var(--bg-dark);
|
||||
--background-secondary-alt: var(--bg-dark);
|
||||
--text-normal: var(--fg-dark);
|
||||
--text-faint: var(--grey1-dark);
|
||||
--text-title-h1: var(--dim-red);
|
||||
--text-title-h2: var(--dim-orange);
|
||||
--text-title-h3: var(--dim-yellow);
|
||||
--text-title-h4: var(--dim-green);
|
||||
--text-title-h5: var(--dim-aqua);
|
||||
--text-title-h6: var(--dim-purple);
|
||||
--text-link: var(--faded-blue);
|
||||
--text-a: var(--dim-aqua);
|
||||
--text-a-hover: var(--faded-aqua);
|
||||
--text-mark: rgba(215, 153, 33, 0.4); /* light-yellow */
|
||||
--pre-code: var(--bg1-dark);
|
||||
--text-highlight-bg: var(--bg_green);
|
||||
--interactive-accent: var(--dim-aqua);
|
||||
--interactive-before: var(--bg5-dark);
|
||||
--background-modifier-border: var(--bg5-dark);
|
||||
--text-accent: var(--dim-blue);
|
||||
--interactive-accent-rgb: var(--dim-blue);
|
||||
--inline-code: var(--dim-blue);
|
||||
--code-block: var(--fg-dark);
|
||||
--vim-cursor: var(--faded-blue);
|
||||
--text-selection: var(--bg5-dark);
|
||||
}
|
||||
|
||||
/* 2.4 Light theme implementation */
|
||||
.theme-light
|
||||
{
|
||||
--background-primary: var(--bg-light);
|
||||
--background-primary-alt: var(--bg-light);
|
||||
--background-secondary: var(--bg-light);
|
||||
--background-secondary-alt: var(--bg-light);
|
||||
--text-normal: var(--fg-light);
|
||||
--text-faint: var(--grey1-light);
|
||||
--text-title-h1: var(--light-red);
|
||||
--text-title-h2: var(--light-orange);
|
||||
--text-title-h3: var(--light-yellow);
|
||||
--text-title-h4: var(--light-green);
|
||||
--text-title-h5: var(--light-aqua);
|
||||
--text-title-h6: var(--light-purple);
|
||||
--text-link: var(--light-blue);
|
||||
--text-a: var(--light-dim-blue);
|
||||
--text-a-hover: var(--light-blue);
|
||||
--text-mark: rgba(215, 153, 33, 0.4); /* light-yellow */
|
||||
--pre-code: var(--bg1-light);
|
||||
--text-highlight-bg: var(--light-dim-green);
|
||||
--interactive-accent: var(--bg5-light);
|
||||
--interactive-before: var(--bg5-light);
|
||||
--background-modifier-border: var(--bg5-light);
|
||||
--text-accent: var(--bg5-light);
|
||||
--interactive-accent-rgb: var(--light-dim-green);
|
||||
--inline-code: var(--light-blue);
|
||||
--code-block: var(--fg-light);
|
||||
--vim-cursor: var(--light-blue);
|
||||
--text-selection: rgba(189, 174, 147, 0.5); /* light3 */
|
||||
}
|
||||
|
||||
.theme-dark code[class*="language-"],
|
||||
.theme-dark pre[class*="language-"],
|
||||
.theme-light code[class*="language-"],
|
||||
.theme-light pre[class*="language-"]
|
||||
{
|
||||
text-shadow: none ;
|
||||
background-color: var(--pre-code) ;
|
||||
}
|
||||
|
||||
/* 3. General UI */
|
||||
.view-header-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 3.1. Title bar */
|
||||
.titlebar {
|
||||
background-color: var(--background-secondary-alt);
|
||||
}
|
||||
|
||||
.titlebar-inner {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.graph-view.color-circle,
|
||||
.graph-view.color-fill-highlight,
|
||||
.graph-view.color-line-highlight
|
||||
{
|
||||
color: var(--interactive-accent-rgb) ;
|
||||
}
|
||||
.graph-view.color-text
|
||||
{
|
||||
color: var(--text-a-hover) ;
|
||||
}
|
||||
/*
|
||||
.graph-view.color-fill
|
||||
{
|
||||
color: var(--background-secondary);
|
||||
}
|
||||
.graph-view.color-line
|
||||
{
|
||||
color: var(--background-modifier-border);
|
||||
}
|
||||
*/
|
||||
|
||||
html,
|
||||
body
|
||||
{
|
||||
font-size: 16px ;
|
||||
}
|
||||
|
||||
strong
|
||||
{
|
||||
font-weight: 600 ;
|
||||
}
|
||||
|
||||
a,
|
||||
.cm-hmd-internal-link
|
||||
{
|
||||
color: var(--text-a) ;
|
||||
text-decoration: none ;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.cm-hmd-internal-link:hover,
|
||||
.cm-url
|
||||
{
|
||||
color: var(--text-a-hover) ;
|
||||
text-decoration: none ;
|
||||
}
|
||||
|
||||
|
||||
/*----------------------------------------------------------------
|
||||
TAGS
|
||||
----------------------------------------------------------------*/
|
||||
|
||||
.token.tag {
|
||||
padding: 0px 0px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.token.tag:hover {
|
||||
background: transparent;
|
||||
color: var(--text-a-hover) !important;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------
|
||||
TAG PILLS
|
||||
----------------------------------------------------------------*/
|
||||
.markdown-preview-section h1 a.tag,
|
||||
.markdown-preview-section h2 a.tag,
|
||||
.markdown-preview-section h3 a.tag,
|
||||
.markdown-preview-section h4 a.tag,
|
||||
.markdown-preview-section h5 a.tag,
|
||||
.markdown-preview-section h4 a.tag {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: var(--tag-base);
|
||||
border: 1px solid var(--interactive-accent);
|
||||
color: var(--text-a);
|
||||
font-weight: 500;
|
||||
padding: 1.5px 6px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
color: var(--interactive-accent);
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------
|
||||
TAG REF STYLING
|
||||
----------------------------------------------------------------*/
|
||||
|
||||
.tag[href^="#❗️"],
|
||||
.tag[href^="#important❗️"] {
|
||||
background-color: var(--tag-base);
|
||||
border: 1px solid var(--boldred);
|
||||
}
|
||||
|
||||
.tag[href^="#📓"],
|
||||
.tag[href^="#journal📓"] {
|
||||
background-color: var(--tag-base);
|
||||
border: 1px solid var(--purple);
|
||||
}
|
||||
|
||||
.tag[href^="#🌱"],
|
||||
.tag[href^="#seedling🌱"],
|
||||
.tag[href^="#🌿"],
|
||||
.tag[href^="#budding🌿"],
|
||||
.tag[href^="#🌳"],
|
||||
.tag[href^="#evergreen🌳"] {
|
||||
background-color: var(--tag-base);
|
||||
border: 1px solid var(--boldgreen);
|
||||
}
|
||||
|
||||
mark
|
||||
{
|
||||
background-color: var(--text-mark) ;
|
||||
}
|
||||
|
||||
.view-actions a
|
||||
{
|
||||
color: var(--text-normal) ;
|
||||
}
|
||||
|
||||
.view-actions a:hover
|
||||
{
|
||||
color: var(--text-a) ;
|
||||
}
|
||||
|
||||
.HyperMD-codeblock-bg
|
||||
{
|
||||
background-color: var(--pre-code) ;
|
||||
}
|
||||
|
||||
.HyperMD-codeblock
|
||||
{
|
||||
line-height: 1.4em ;
|
||||
color: var(--code-block) ;
|
||||
}
|
||||
|
||||
.HyperMD-codeblock-begin
|
||||
{
|
||||
border-top-left-radius: 4px ;
|
||||
border-top-right-radius: 4px ;
|
||||
}
|
||||
|
||||
.HyperMD-codeblock-end
|
||||
{
|
||||
border-bottom-left-radius: 4px ;
|
||||
border-bottom-right-radius: 4px ;
|
||||
}
|
||||
|
||||
th
|
||||
{
|
||||
font-weight: 600 ;
|
||||
}
|
||||
|
||||
thead
|
||||
{
|
||||
border-bottom: 2px solid var(--background-modifier-border) ;
|
||||
}
|
||||
|
||||
.HyperMD-table-row
|
||||
{
|
||||
line-height: normal ;
|
||||
padding-left: 4px ;
|
||||
padding-right: 4px ;
|
||||
/* background-color: var(--pre-code) ; */
|
||||
}
|
||||
|
||||
.HyperMD-table-row-0
|
||||
{
|
||||
padding-top: 4px ;
|
||||
}
|
||||
|
||||
.CodeMirror-foldgutter-folded,
|
||||
.is-collapsed .nav-folder-collapse-indicator
|
||||
{
|
||||
color: var(--text-a) ;
|
||||
}
|
||||
|
||||
.nav-file-tag
|
||||
{
|
||||
color: var(--text-a) ;
|
||||
}
|
||||
|
||||
.is-active .nav-file-title
|
||||
{
|
||||
color: var(--text-a) ;
|
||||
background-color: var(--background-primary-alt) ;
|
||||
}
|
||||
|
||||
.nav-file-title
|
||||
{
|
||||
border-bottom-left-radius: 0 ;
|
||||
border-bottom-right-radius: 0 ;
|
||||
border-top-left-radius: 0 ;
|
||||
border-top-right-radius: 0 ;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
display: block ;
|
||||
margin-left: auto ;
|
||||
margin-right: auto ;
|
||||
}
|
||||
|
||||
.HyperMD-list-line
|
||||
{
|
||||
padding-top: 0 ;
|
||||
}
|
||||
|
||||
.CodeMirror-code,
|
||||
.CodeMirror-linenumber,
|
||||
.cm-formatting
|
||||
{
|
||||
font-family: var(--font-monospace) ;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.markdown-preview-section pre code,
|
||||
.markdown-preview-section code
|
||||
{
|
||||
font-size: 0.9em ;
|
||||
background-color: var(--pre-code) ;
|
||||
}
|
||||
|
||||
.markdown-preview-section pre code
|
||||
{
|
||||
padding: 4px ;
|
||||
line-height: 1.4em ;
|
||||
display: block ;
|
||||
color: var(--code-block) ;
|
||||
}
|
||||
|
||||
.markdown-preview-section code
|
||||
{
|
||||
color: var(--inline-code) ;
|
||||
}
|
||||
|
||||
.cm-s-obsidian,
|
||||
.cm-inline-code
|
||||
{
|
||||
-webkit-font-smoothing: auto ;
|
||||
}
|
||||
|
||||
.cm-inline-code
|
||||
{
|
||||
color: var(--inline-code) ;
|
||||
background-color: var(--pre-code) ;
|
||||
padding: 1px ;
|
||||
}
|
||||
|
||||
.workspace-leaf-header-title
|
||||
{
|
||||
font-weight: 600 ;
|
||||
}
|
||||
|
||||
.side-dock-title
|
||||
{
|
||||
padding-top: 15px ;
|
||||
font-size: 20px ;
|
||||
}
|
||||
|
||||
.side-dock-ribbon-tab:hover,
|
||||
.side-dock-ribbon-action:hover,
|
||||
.side-dock-ribbon-action.is-active:hover,
|
||||
.nav-action-button:hover,
|
||||
.side-dock-collapse-btn:hover
|
||||
{
|
||||
color: var(--text-a);
|
||||
}
|
||||
|
||||
.side-dock
|
||||
{
|
||||
border-right: 0 ;
|
||||
}
|
||||
|
||||
.cm-s-obsidian,
|
||||
.markdown-preview-view
|
||||
{
|
||||
/* padding-left: 10px ; */
|
||||
padding-right: 10px ;
|
||||
}
|
||||
|
||||
/* vertical resize-handle */
|
||||
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
|
||||
.workspace-split.mod-left-split > .workspace-leaf-resize-handle,
|
||||
.workspace-split.mod-right-split > .workspace-leaf-resize-handle
|
||||
{
|
||||
width: 1px ;
|
||||
background-color: var(--dim-aqua);
|
||||
}
|
||||
|
||||
/* horizontal resize-handle */
|
||||
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle
|
||||
{
|
||||
height: 1px ;
|
||||
background-color: var(--dim-aqua);
|
||||
}
|
||||
|
||||
/* Remove vertical split padding */
|
||||
.workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content,
|
||||
.workspace-split.mod-vertical > .workspace-split,
|
||||
.workspace-split.mod-vertical > .workspace-leaf,
|
||||
.workspace-tabs
|
||||
{
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.markdown-embed-title
|
||||
{
|
||||
font-weight: 600 ;
|
||||
}
|
||||
|
||||
.markdown-embed
|
||||
{
|
||||
padding-left: 10px ;
|
||||
padding-right: 10px ;
|
||||
margin-left: 10px ;
|
||||
margin-right: 10px ;
|
||||
}
|
||||
|
||||
.cm-header-1,
|
||||
.markdown-preview-section h1
|
||||
{
|
||||
font-weight: 500 ;
|
||||
font-size: 34px ;
|
||||
color: var(--text-title-h1) ;
|
||||
}
|
||||
|
||||
.cm-header-2,
|
||||
.markdown-preview-section h2
|
||||
{
|
||||
font-weight: 500 ;
|
||||
font-size: 26px ;
|
||||
color: var(--text-title-h2) ;
|
||||
}
|
||||
|
||||
.cm-header-3,
|
||||
.markdown-preview-section h3
|
||||
{
|
||||
font-weight: 500 ;
|
||||
font-size: 22px ;
|
||||
color: var(--text-title-h3) ;
|
||||
}
|
||||
|
||||
.cm-header-4,
|
||||
.markdown-preview-section h4
|
||||
{
|
||||
font-weight: 500 ;
|
||||
font-size: 20px ;
|
||||
color: var(--text-title-h4) ;
|
||||
}
|
||||
|
||||
.cm-header-5,
|
||||
.markdown-preview-section h5
|
||||
{
|
||||
font-weight: 500 ;
|
||||
font-size: 18px ;
|
||||
color: var(--text-title-h5) ;
|
||||
}
|
||||
|
||||
.cm-header-6,
|
||||
.markdown-preview-section h6
|
||||
{
|
||||
font-weight: 500 ;
|
||||
font-size: 18px ;
|
||||
color: var(--text-title-h6) ;
|
||||
}
|
||||
|
||||
.suggestion-item.is-selected
|
||||
{
|
||||
background-color: var(--text-selection);
|
||||
}
|
||||
|
||||
.empty-state-container:hover
|
||||
{
|
||||
background-color: var(--background-secondary-alt);
|
||||
border: 5px solid var(--interactive-accent) ;
|
||||
}
|
||||
|
||||
.checkbox-container
|
||||
{
|
||||
background-color: var(--interactive-before);
|
||||
}
|
||||
|
||||
.checkbox-container:after
|
||||
{
|
||||
background-color: var(--interactive-accent);
|
||||
}
|
||||
|
||||
.checkbox-container.is-enabled:after
|
||||
{
|
||||
background-color: var(--bg5-dark);
|
||||
}
|
||||
|
||||
.mod-cta
|
||||
{
|
||||
color: var(--background-secondary-alt) ;
|
||||
font-weight: 600 ;
|
||||
}
|
||||
|
||||
.mod-cta a
|
||||
{
|
||||
color: var(--background-secondary-alt) ;
|
||||
font-weight: 600 ;
|
||||
}
|
||||
|
||||
.mod-cta:hover
|
||||
{
|
||||
background-color: var(--interactive-before) ;
|
||||
font-weight: 600 ;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor
|
||||
{
|
||||
background-color: var(--vim-cursor) ;
|
||||
opacity: 60% ;
|
||||
}
|
||||
|
||||
input.task-list-item-checkbox {
|
||||
border: 1px solid var(--faded-blue);
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input.task-list-item-checkbox:checked
|
||||
{
|
||||
background-color: var(--faded-blue);
|
||||
box-shadow: inset 0 0 0 2px var(--background-primary);
|
||||
}
|
||||
|
||||
::selection
|
||||
{
|
||||
background-color: var(--text-selection) ;
|
||||
}
|
||||
|
||||
.mermaid .note
|
||||
{
|
||||
fill: var(--dark3) ;
|
||||
}
|
||||
|
||||
.frontmatter-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Bullet point relationship lines */
|
||||
.markdown-source-view.mod-cm6 .cm-indent::before,
|
||||
.markdown-rendered.show-indentation-guide li > ul::before,
|
||||
.markdown-rendered.show-indentation-guide li > ol::before {
|
||||
position: absolute;
|
||||
border-right: 1px solid var(--dim-blue);
|
||||
}
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
{
|
||||
"main": {
|
||||
"id": "0dcf92fb98d9c2b7",
|
||||
"type": "split",
|
||||
"children": [
|
||||
{
|
||||
"id": "d2010cb2ed47df72",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "markdown",
|
||||
"state": {
|
||||
"file": "rootless-containers-alpine.md",
|
||||
"mode": "source",
|
||||
"source": true
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"direction": "vertical"
|
||||
},
|
||||
"left": {
|
||||
"id": "087c4815ba51a7aa",
|
||||
"type": "split",
|
||||
"children": [
|
||||
{
|
||||
"id": "a7608751ba799cd4",
|
||||
"type": "tabs",
|
||||
"children": [
|
||||
{
|
||||
"id": "fcd11343af776433",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "file-explorer",
|
||||
"state": {}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "131c386952c6d285",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "search",
|
||||
"state": {
|
||||
"query": "",
|
||||
"matchingCase": false,
|
||||
"explainSearch": false,
|
||||
"collapseAll": false,
|
||||
"extraContext": false,
|
||||
"sortOrder": "alphabetical"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "970a5b0b94f320f4",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "starred",
|
||||
"state": {}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"direction": "horizontal",
|
||||
"width": 300
|
||||
},
|
||||
"right": {
|
||||
"id": "57d7bb53099a1925",
|
||||
"type": "split",
|
||||
"children": [
|
||||
{
|
||||
"id": "e74e1359728d8c4d",
|
||||
"type": "tabs",
|
||||
"children": [
|
||||
{
|
||||
"id": "e404835578910261",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "backlink",
|
||||
"state": {
|
||||
"file": "rootless-containers-alpine.md",
|
||||
"collapseAll": false,
|
||||
"extraContext": false,
|
||||
"sortOrder": "alphabetical",
|
||||
"showSearch": false,
|
||||
"searchQuery": "",
|
||||
"backlinkCollapsed": false,
|
||||
"unlinkedCollapsed": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "a0252ac6a440959c",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "outgoing-link",
|
||||
"state": {
|
||||
"file": "rootless-containers-alpine.md",
|
||||
"linksCollapsed": false,
|
||||
"unlinkedCollapsed": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "4b19ecb63868cdbc",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "tag",
|
||||
"state": {
|
||||
"sortOrder": "frequency",
|
||||
"useHierarchy": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "05dc04e4a372898e",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "outline",
|
||||
"state": {
|
||||
"file": "rootless-containers-alpine.md"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"direction": "horizontal",
|
||||
"width": 300,
|
||||
"collapsed": true
|
||||
},
|
||||
"active": "d2010cb2ed47df72",
|
||||
"lastOpenFiles": [
|
||||
"rootless-containers-alpine.md"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
---
|
||||
title: "Rootless Containers on Alpine"
|
||||
date: 2022-10-12T22:17:15+11:00
|
||||
draft: false
|
||||
showSummary: true
|
||||
summary: "We recently murdered a server's terminal via `do_distro_upgrade`, and thought it'd be a good time to learn more about containers and Alpine."
|
||||
---
|
||||
|
||||
# Rootless Containers on Alpine Linux
|
||||
|
||||
## Background
|
||||
**(Ashe)**
|
||||
So. We recently murdered a server's terminal via `do_distro_upgrade`.
|
||||
|
||||
**(Tammy)** Was it really that bad?
|
||||
|
||||
**(Ashe)** Yes.
|
||||
|
||||
```
|
||||
% man 7z
|
||||
WARNING: terminal is not fully functional
|
||||
- (press RETURN)%
|
||||
```
|
||||
It was in fact *that bad*. So we figured, well, we can spend a few hours, days, whatever fixing this...
|
||||
|
||||
**(Tammy)** Or we could just build a new server!
|
||||
|
||||
**(Ashe)** Right.
|
||||
So, after asking some friends about their opinions, we settled on Alpine Linux. And why not also migrate all of our pm2 workloads to containers while we're at it? We've been meaning to learn more about containers for a while now.
|
||||
|
||||
So off we go!
|
||||
|
||||
## Prep Work
|
||||
|
||||
We need a few things before we actually set up rootless containers. We'll be following along with the [Official Rootless Containers Tutorial](https://rootlesscontaine.rs/getting-started/common/), making adjustments as necessary.
|
||||
|
||||
### Login Information
|
||||
|
||||
Most Rootless Container implementations use `$XDG_RUNTIME_DIR` to find the user's ID and where their runtime lives (usually some subdir of `/run/user/`).
|
||||
Systemd-based Linux distros will handle this automatically, but Alpine uses [OpenRC](https://wiki.alpinelinux.org/wiki/OpenRC), which does not do this automatically.
|
||||
|
||||
While Alpine doesn't provide a tutorial for Rootless Containers, we can adapt some of the prep work done for [Wayland](https://wiki.alpinelinux.org/wiki/Wayland) to get OpenRC to set `$XDG_RUNTIME_DIR` for us.
|
||||
|
||||
We just create `/etc/profile.d/xdg_runtime_dir.sh` like so:
|
||||
```sh
|
||||
if test -z "${XDG_RUNTIME_DIR}"; then
|
||||
export XDG_RUNTIME_DIR=/tmp/$(id -u)-runtime-dir
|
||||
if ! test -d "${XDG_RUNTIME_DIR}"; then
|
||||
mkdir "${XDG_RUNTIME_DIR}"
|
||||
chmod 0700 "${XDG_RUNTIME_DIR}"
|
||||
fi
|
||||
fi
|
||||
```
|
||||
And, log out and then back in...
|
||||
```sh
|
||||
~ ❯ env
|
||||
[...]
|
||||
XDG_RUNTIME_DIR=/tmp/1000-runtime-dir
|
||||
[...]
|
||||
```
|
||||
|
||||
With that done, we can move onto our next steps.
|
||||
|
||||
### Sysctl
|
||||
There's some sysctl config required for older distros, but it's not required on Alpine, so on we go.
|
||||
|
||||
### User Namespace Configuration
|
||||
Rootless Containers use User Namespaces, subUIDs, and subGIDs, so we'll need to have those working. The apk package `shadow-subids` provides that functionality for us.
|
||||
```
|
||||
~ ❯ apk info shadow-subids
|
||||
shadow-subids-4.10-r3 description:
|
||||
Utilities for using subordinate UIDs and GIDs
|
||||
|
||||
shadow-subids-4.10-r3 webpage:
|
||||
https://github.com/shadow-maint/shadow
|
||||
|
||||
shadow-subids-4.10-r3 installed size:
|
||||
140 KiB
|
||||
```
|
||||
|
||||
### Sub-ID Counts
|
||||
Rootless Containers generally expect `/etc/subuid` and `/etc/subgid` to contain at least 65,536 sub-IDs for each user.
|
||||
`shadow-subids` doed create these files for us, but leaves them empty by default, so let's go ahead and do that.
|
||||
The [page on subIDs](https://rootlesscontaine.rs/getting-started/common/subuid/) provides a handy Python script to do that for us, which we'll edit slightly so it's not writing directly to system files:
|
||||
```python
|
||||
f = open("subuid", "w")
|
||||
for uid in range(1000, 65536):
|
||||
f.write("%d:%d:65536\n" %(uid,uid*65536))
|
||||
f.close()
|
||||
|
||||
f = open("subgid", "w")
|
||||
for uid in range(1000, 65536):
|
||||
f.write("%d:%d:65536\n" %(uid,uid*65536))
|
||||
f.close()
|
||||
```
|
||||
This is probably overkill for our use-case, but that's also fine.
|
||||
|
||||
**(Doll)** So this one just runs script and copies to /etc/?
|
||||
|
||||
**(Ashe)** Yes Doll, that's right.
|
||||
With that done, we can move onto the last prep step.
|
||||
|
||||
### CGroups V2
|
||||
To limit resources that a container can use, we need to enable CGroups V2. In OpenRC, this can be done by changing some options in `/etc/rc.conf`.
|
||||
|
||||
To enable CGroups in general, we need to set `rc_controller_cgroups` to `YES`
|
||||
```sh
|
||||
# This switch controls whether or not cgroups version 1 controllers are
|
||||
# individually mounted under
|
||||
# /sys/fs/cgroup in hybrid or legacy mode.
|
||||
rc_controller_cgroups="YES"
|
||||
```
|
||||
From here, we can enable CGroups V2 by setting `rc_cgroup_mode` to `hybrid`
|
||||
```sh
|
||||
# This sets the mode used to mount cgroups.
|
||||
# "hybrid" mounts cgroups version 2 on /sys/fs/cgroup/unified and
|
||||
# cgroups version 1 on /sys/fs/cgroup.
|
||||
# "legacy" mounts cgroups version 1 on /sys/fs/cgroup
|
||||
# "unified" mounts cgroups version 2 on /sys/fs/cgroup
|
||||
rc_cgroup_mode="hybrid"
|
||||
```
|
||||
And configure the particular controllers we want to use:
|
||||
```sh
|
||||
# This is a list of controllers which should be enabled for cgroups version 2
|
||||
# when hybrid mode is being used.
|
||||
# Controllers listed here will not be available for cgroups version 1.
|
||||
rc_cgroup_controllers="cpuset cpu io memory hugetlb pids"
|
||||
```
|
||||
Now we just reboot and we're ready to go!
|
||||
|
||||
## Configuring the Rootless containerd service
|
||||
We'll be using nerdctl as our containerd controller of choice. It comes with a rootless containerd.service, but since Alpine doesn't use systemd, we'll have to adapt this into an rc service.
|
||||
|
||||
We can adapt the [install script](https://github.com/containerd/nerdctl/blob/48f189a53a24c12838433f5bb5dd57f536816a8a/extras/rootless/containerd-rootless-setuptool.sh) nerdctl provides to our purposes.
|
||||
Loading…
Reference in New Issue