From 816b8bb36f61b11822d454b64c51d38b539075d9 Mon Sep 17 00:00:00 2001 From: Leonora Tindall Date: Tue, 19 Sep 2023 23:53:11 -0500 Subject: [PATCH] Initial commit --- .gitignore | 1 + LICENSE.md | 1 + README.md | 55 +++++ archetypes/default.md | 4 + layouts/404.html | 6 + layouts/_default/list.html | 42 ++++ layouts/_default/single.html | 31 +++ layouts/_default/terms.html | 16 ++ layouts/partials/foot_custom.html | 24 ++ layouts/partials/footer.html | 20 ++ layouts/partials/head_custom.html | 19 ++ layouts/partials/header.html | 57 +++++ layouts/shortcodes/details.html | 3 + layouts/shortcodes/div.html | 3 + layouts/shortcodes/figure.html | 3 + layouts/shortcodes/pgpkey.html | 3 + layouts/shortcodes/relme.html | 1 + layouts/shortcodes/section.html | 3 + layouts/shortcodes/summary.html | 3 + static/css/fonts.css | 13 ++ static/css/style.css | 365 ++++++++++++++++++++++++++++++ theme.toml | 13 ++ 22 files changed, 686 insertions(+) create mode 100644 .gitignore create mode 100644 LICENSE.md create mode 100644 README.md create mode 100644 archetypes/default.md create mode 100644 layouts/404.html create mode 100644 layouts/_default/list.html create mode 100644 layouts/_default/single.html create mode 100644 layouts/_default/terms.html create mode 100644 layouts/partials/foot_custom.html create mode 100644 layouts/partials/footer.html create mode 100644 layouts/partials/head_custom.html create mode 100644 layouts/partials/header.html create mode 100644 layouts/shortcodes/details.html create mode 100644 layouts/shortcodes/div.html create mode 100644 layouts/shortcodes/figure.html create mode 100644 layouts/shortcodes/pgpkey.html create mode 100644 layouts/shortcodes/relme.html create mode 100644 layouts/shortcodes/section.html create mode 100644 layouts/shortcodes/summary.html create mode 100644 static/css/fonts.css create mode 100644 static/css/style.css create mode 100644 theme.toml diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..e611ae3 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1 @@ +i'm gay also nora has the ability to fuck with this idk diff --git a/README.md b/README.md new file mode 100644 index 0000000..8f2800a --- /dev/null +++ b/README.md @@ -0,0 +1,55 @@ +# MONKEYCHEF + +MONKEYCHEF is a Hugo theme based on semantic HTML elements and simple, ultra-responsive +CSS. + +## Title Override + +Want your page title to be one thing but the page itself to show something else, like a +name for a resumé? Use `display_title` in the front matter. The `title` will +still show up in the title bar and as the `title` attribute for all metadata. + +Need to hide post metadata? Try `hide_post_meta: true`. + +## Skip to Main Content + +Every page has a "skip to main content" as its first link, for better screenreader and +keyboard support. + +## Navigation + +All navigation is placed at the top of the page beside the title. + +## Post Metadata +Every post contains a few `` fields, which correspond to either site config or +post frontmatter variables. These are Dublin Core enabled where possible, meaning that +posts on this theme can easily be ingested into e.g. Zotero. + +- `Title` is the title of the post. +- `Creator` is from `author` in the frontmatter or `params.Author` in `config.toml` otherwise. +- `Date` is the Hugo-recorded date of the post. +- `Language` is from Hugo's generating locale. +- `Description` is from `Description` in the frontmatter, or `Summary` if that's not present, or `MetaSiteDescription` in `config.toml` as a fallback. +- `Identifier` is the permalink URL. + +Non-Dublin Core attributes are: + +- `viewport` for rendering properly, this isn't customizable +- `keywords` is from the `tags` taxonomy in the frontmatter +- `google-site-verification` is from `params.googlesiteverification` in `config.toml` in case you need that. +- `nolist` turns off listing sub-pages on specific index pages. + +## Figures + +To insert a figure with caption, you can use the `{{< figure >}}` shortcode. Simply +place your Markdown with image and caption inside it. To make it float left or right, +use `{{< figure "left" >}}` or `{{< figure "right" >}}`. For instance: + +```markdown +{{< figure "right" >}} + ![The drive cage of my Thelio with one drive out of its slot.](/images/thelio/drive_cage.jpg) + Drives are inserted on rails using vibration-isolating gromits. If only it were this easy + to get RAID working! +{{< /figure >}} +``` + diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..fb98e92 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,4 @@ +--- +title: '' +date: '' +--- diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..e8ae2d7 --- /dev/null +++ b/layouts/404.html @@ -0,0 +1,6 @@ +{{ partial "header.html" . }} +
+

Document Not Found

+

The content you requested could not be found at the given URL.

+
+{{ partial "footer.html" . }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..3f0b288 --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,42 @@ +{{ partial "header.html" . }} +
+ + {{if .IsHome }} + {{ .Content }} + + {{ else }} +

+ {{ .Title }} +

+
+ {{ .Content }} + {{ if .Params.nolist }} + {{ else }} +
    + + + {{ range .Pages }} +
  • +
    +

    {{ .Title }} + {{ with .Date }} + written {{ .Format "Jan 02, 2006" }} + {{ end }}

    + {{ with .Description }} +

    {{ . }}

    + {{ end }} + + +
    +
    • + {{ end }} + + +
+ {{ end }} +
+ +{{ end }} +
+{{ partial "footer.html" . }} + diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..8706a5e --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,31 @@ +{{ partial "header.html" . }} +
+
+ {{ if .Params.display_title }} +

{{ .Params.display_title }}

+ {{ else }} +

{{ .Title }}

+ {{ end }} + + {{ if .Params.hide_post_meta }} + + {{ else }} + {{ if .Params.author }} + {{ .Author }} + {{ else if .Site.Params.author }} + {{ .Site.Params.author }} + {{ end }} + {{ if .Date }} {{ .Date.Format "2006/01/02" }} {{ end }} + {{ end }} + + {{ if .Params.toc }} + {{ .TableOfContents }} + {{ end }} +
+ +
+{{ .Content }} +
+
+ +{{ partial "footer.html" . }} diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html new file mode 100644 index 0000000..17ac559 --- /dev/null +++ b/layouts/_default/terms.html @@ -0,0 +1,16 @@ +{{ partial "header.html" . }} +
+

{{ .Title }}

+ + +
+{{ partial "footer.html" . }} diff --git a/layouts/partials/foot_custom.html b/layouts/partials/foot_custom.html new file mode 100644 index 0000000..015b733 --- /dev/null +++ b/layouts/partials/foot_custom.html @@ -0,0 +1,24 @@ + + + + + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..9165666 --- /dev/null +++ b/layouts/partials/footer.html @@ -0,0 +1,20 @@ + + + diff --git a/layouts/partials/head_custom.html b/layouts/partials/head_custom.html new file mode 100644 index 0000000..3802b8c --- /dev/null +++ b/layouts/partials/head_custom.html @@ -0,0 +1,19 @@ +
+ {{ .Site.Title }} + + +
+ diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..3e66564 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,57 @@ + + + + + {{ if .Title }} + {{ .Title }} | {{ .Site.Title }} + + {{ end }} + + {{ if .Date }} + + {{ end }} + + {{ if .Params.author }} + + {{ else if .Site.Params.author }} + + {{ else if $.Site.Author }} + {{ range $.Site.Author }} + + {{ end }} + {{ end }} + + {{ if .Site.Language.Lang }} + + {{ end }} + + {{ if .Description }} + + {{ else if .IsPage }} + + {{ else }} + + {{ end }} + + {{ if .Permalink }} + + {{ end }} + + {{ if .Params.tags }} + + {{ end }} + + {{ if .Site.Params.googlesiteverification }} + + {{ end }} + + + + + + + + + Skip to main content + {{ partial "head_custom.html" . }} + diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html new file mode 100644 index 0000000..f15f1a2 --- /dev/null +++ b/layouts/shortcodes/details.html @@ -0,0 +1,3 @@ +
+ {{ .Inner | markdownify }} +
diff --git a/layouts/shortcodes/div.html b/layouts/shortcodes/div.html new file mode 100644 index 0000000..4f5c071 --- /dev/null +++ b/layouts/shortcodes/div.html @@ -0,0 +1,3 @@ +
+ {{ .Inner | markdownify }} +
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html new file mode 100644 index 0000000..b677373 --- /dev/null +++ b/layouts/shortcodes/figure.html @@ -0,0 +1,3 @@ +
+ {{ .Inner | markdownify }} +
diff --git a/layouts/shortcodes/pgpkey.html b/layouts/shortcodes/pgpkey.html new file mode 100644 index 0000000..08121a2 --- /dev/null +++ b/layouts/shortcodes/pgpkey.html @@ -0,0 +1,3 @@ + + {{ .Inner | markdownify }} + diff --git a/layouts/shortcodes/relme.html b/layouts/shortcodes/relme.html new file mode 100644 index 0000000..6a6913c --- /dev/null +++ b/layouts/shortcodes/relme.html @@ -0,0 +1 @@ +{{ trim .Inner "\n" }} diff --git a/layouts/shortcodes/section.html b/layouts/shortcodes/section.html new file mode 100644 index 0000000..1b86421 --- /dev/null +++ b/layouts/shortcodes/section.html @@ -0,0 +1,3 @@ +
+ {{ .Inner | markdownify }} +
diff --git a/layouts/shortcodes/summary.html b/layouts/shortcodes/summary.html new file mode 100644 index 0000000..185ebf5 --- /dev/null +++ b/layouts/shortcodes/summary.html @@ -0,0 +1,3 @@ + + {{ .Inner | markdownify }} + diff --git a/static/css/fonts.css b/static/css/fonts.css new file mode 100644 index 0000000..3fbdf3d --- /dev/null +++ b/static/css/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "Berkeley Mono"; + src: url("/fonts/BerkeleyMono.woff2"); +} + +body { + font-family: "Berkeley Mono", monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Symbola'; +} + +code { + font-family: "Berkeley Mono", monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Symbola'; + font-size: 85%; +} diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..0c4deae --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,365 @@ +/* Variable declarations which are available to all styles. */ +:root { + --black-coffee: #352d39; + --floral-white: #fef9ef; + --charcoal: #2c4251; + --charcoal-light: #2c425130; + --red-violet: #943246; + --lavender-blush: #ffedef; + --honey-yellow: #ffb000; + --sunglow: #ffcc00; + --phosphor-brown: #282828; + /* --shadow: 0 0 3px #ffb00066, 0 0 5px #ffcc0033; */ + /* The background of the page backdrop. */ + --bg-color: var(--floral-white); + /* The color of text on the backdrop. */ + --fg-color: black; + + /* The color used for borders and highlights. */ + --offset-border-color: var(--charcoal); + /* The background used to encapsulate off-set text areas of the page. */ + --offset-bg-color: var(--floral-white); + + /* The color used for cards and callouts. */ + --callout-bg-color: var(--floral-white); + --callout-fg-color: var(--fg-color); + --callout-dropshadow-color: var(--charcoal-light); + + /* The color used to set links apart from non-interactable text. */ + --link-color: inherit; +} +html{ + background-color: var(--black-coffee); +} + +/* Applied to the whole visible content of the page. */ +body { + max-width: 55em; + margin: 1.5em auto 1.5em auto; + /* provides nice soft padding for text on narrow screens. */ + padding: 1em 2.5em 1em 2.5em; + box-shadow: 0 0 0 1em var(--bg-color); + color: var(--fg-color); + text-shadow: var(--shadow); + background-color: var(--bg-color); + border-left: 11.7px var(--black-coffee) dotted; + border-right: 11.7px var(--black-coffee) dotted; +} + + +/* Applied to the textual content of the page. */ +main { + hyphens: auto; + /* "Let it breathe." Text does not need to be jammed as close together as possible. */ + line-height: 1.4; + /* Slightly higher font size means it's easier to read. */ + /* Setting a pt value here means other adjustments are made in scale. */ +} + +main header { + text-align: center; +} + +main h1 { + font-size: 1.8rem; +} + +main h2 { + font-size: 1.5rem; +} + +main h3 { +} + +/* The main content for the index page, standing out on purpose. */ +.hero { + display: flex; + flex-flow: row nowrap; + align-items: center; +} + +/* Let the hero portrait image be above the hero intro text on small devices. */ +@media only screen and (max-width: 600px) { + +} + +/* Reduces margin just enough to accomodate the shadow (see below) */ +/* (shadows gets cut off otherwise, since it breaches the borders of ) */ +.hero .portrait { + margin-left: 2px; +} + +/* Adds a soft border-like shadow under the image to make it stand out but not too much */ +.hero img { + filter: drop-shadow(0 0 2px var(--callout-dropshadow-color)); +} + +/* Text block in the hero for displaying larger introductory text. */ +.intro { + min-width: 200px; +} + +/* Make section into cards. */ +section { + margin: 0px; + padding: 0px 8px 0px; + color: var(--callout-fg-color); + background-color: var(--bg-color); +} + +/* Remove the disclosure triangle, per + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary + */ +summary { + display: block; +} + +/* Makes the content cascade downwards nicely. + * Details summary is flush, but details content is one em right. */ +details { + padding: 0 0em; +} + +details > :not(summary) { + margin-left: 1em; + margin-right: 0em; +} + +/* Show a textual prompt for opening details (shown after the summary) */ +summary:after { + color: var(--link-color); + font-weight: bold; + content: "Show more..."; +} + +/* Show a textual prompt for closing details (shown after the summary) */ +details[open] summary:after { + content: "Show less..."; +} + +/* Basic shape and alignment of the navigational header and informational footer. */ +header, footer { + text-align: center; +} + +/* Place the title on the left and the navigation on the right. */ +body>header { + display: flex; + /* spreads the elements of a flex-displayed container as far apart as possible */ + justify-content: space-between; + /* aligns the elements of a flex-displayed container vertically, along the center line */ + align-items: center; + margin-bottom: 1em; + padding: 0.25rem 0.5rem; + background-color: var(--fg-color); + color: var(--bg-color); +} + +/* Let the header text be above the navigation links in the header on small devices. */ +@media only screen and (max-width: 600px) { + header { + display: flex; + flex-flow: column nowrap; + align-items: center; + margin-bottom: 1em; + } + .hero { + display: flex; + flex-flow: column nowrap; + align-items: center; + } + body{ + margin: 1rem; + padding: 1rem; + } +} + +nav.div { + display: block; + float: right; +} + +nav a + a { + margin-left: 0.33em; +} + +/* Link styling. All links get the same color. When hovering, they get an underline. */ +a, +a:visited, +a:hover { color: var(--link-color) } + +a { text-decoration: underline; } +a:hover { text-decoration: none; } + +a[href*="://"]:after { + content: "↗"; + display: inline-block; + font-weight: bold; +} + +/* List styling */ + +li + li { margin-top: 0.5ex; } + +/* Turn off bullets and spacing on list pages */ +.list ul { + padding-left: 0px; +} +.list li { + list-style-type: none; +} + +/* Applied to the Hugo-generated Table of Contents. + * To get a TOC, the following is added to the YAML. + + output: + blogdown::html_page: + toc: true + + */ + +/* Images, tables, etc are centrally aligned. */ +img:not(.inline), iframe, video { + max-width: 100%; + display: block; + margin-left: auto; + margin-right: auto; +} + +/* Generated tables. */ +#goat { + max-width: 100%; + display: block; + margin-left: auto; + margin-right: auto; +} + +/* For images with caption, placed in-line with text */ +figure { + margin: 20px; + max-width: 300px; + background-color: white; + padding: 2.5%; + border-radius: 0.5rem; + filter: drop-shadow(3px 3px 4px black); +} + +figure.right { + float: right; + transform: rotate(0.5deg); +} + +figure.left { + float: left; + transform: rotate(-0.75deg); +} + +figure.center { + max-width: 100%; + width: auto; + margin: auto; + text-align: center; +} + +figure img { + max-width: 200px; + border-radius: 0.5rem; + filter: grayscale(0.5); +} + +figure.center img { + max-width: 100%; +} +figure.portrait { + margin: initial; + background-color: white; + padding: 0; + margin: 2.5%; + border-radius: 50%; + filter: none; +} +figure.portrait img { + max-width: 200px; + border-radius: 100%; +} + +/* Block quotes and code quotes have some emphasis added. */ +blockquote, pre { + /* A bar to the left of each quote. */ + border: 1px solid var(--offset-border-color); + border-left: 5px solid var(--offset-border-color); + + /* Tastefully rounded corners. */ + border-radius: 3px; + + /* An offset background. Important to override pygments. */ + background-color: var(--offset-bg-color) !important; + + /* Basic outstanding layout. */ + margin: 1rem 0.75rem 0.5rem 0.75rem; + padding: 0.5rem 1rem; +} + +/* Code boxes scroll instead of wrapping. */ +pre { + overflow-x: auto; +} + +/* pagination */ +.pagination li { + display: inline; + list-style: none; +} +ul.pagination { + padding: none; +} + +/* Pretty styling for tables. */ +table { + border-collapse: collapse; +} + +thead th, tfoot th { + margin: auto; + padding: 2px; + font-weight: heavy; +} + +td { + padding: 0.5rem 0.5rem; + border: 1px solid var(--fg-color); +} + +/* +table { + margin: auto; + border-top: 1px solid var(--fg-color); + border-bottom: 1px solid var(--fg-color); +} +table thead th { border-bottom: 1px solid var(--fg-color); } +th, td { padding: 5px; } +*/ + +/* Turn off unused elements in print layouts */ +@media print { + header, footer { display: none !important; } + code { font-size: 45%; } + a.footnote-return { display: none !important; } +} + +/* From https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/ */ +a.skip-main { + position: absolute; + left: -9999px; + background-color: #000; + color: #fff; + padding: 0.25em 1em; + border-radius: 16px; + border: 4px solid yellow; + text-align: center; + font-size: 1.25em; +} + +a.skip-main:focus, +a.skip-main:active { left: auto; } + diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..2800cd9 --- /dev/null +++ b/theme.toml @@ -0,0 +1,13 @@ +name = "MONKEYCHEF" +license = "fuck u" +licenselink = "https://www.youtube.com/watch?v=dQw4w9WgXcQ" +description = "A pretty page that looks like paper!" +homepage = "https://nora.codes" +tags = ["minimal", "blog", "personal", "simple", "clean", "starter", "minimalist"] +features = ["blog"] +min_version = "0.69" + +[author] + name = "null & void Danger Ultraviolet" + homepage = "https://0ultraviolet.space" +