Compare commits
10 commits
b57e76e2bc
...
cbcc11f8d9
| Author | SHA1 | Date | |
|---|---|---|---|
| cbcc11f8d9 | |||
| 37d8e1c19a | |||
| 1f1b97a4eb | |||
| 52330a0535 | |||
| cbb368491a | |||
| 14edc4a3c7 | |||
| 01a196460a | |||
| 4193a15b0e | |||
| b10b9143d6 | |||
| c5aaf57b69 |
23 changed files with 637 additions and 797 deletions
|
|
@ -1,4 +1,4 @@
|
|||
Copyright 2020 Alexandre Vicenzi
|
||||
Copyright for portions of Wantsum are held by Alexandre Vicenzias, 2020 part of the Soho theme. All other copyright Wantsum are held by Ben Charlton, 2024
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,20 @@
|
|||
+++
|
||||
description = ""
|
||||
tags = ["Development", "golang"]
|
||||
categories = ["Development", "GoLang"]
|
||||
draft = false
|
||||
+++
|
||||
---
|
||||
title: "{{ replace .Name "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
draft: true
|
||||
#featured_image: "sample.jpg"
|
||||
#crop_options: center
|
||||
tags: []
|
||||
categories: []
|
||||
|
||||
---
|
||||
This is a content
|
||||
|
||||
<!--more-->
|
||||
# more content
|
||||
|
||||
## youtube
|
||||
{{< youtube k3suoT_gi78 >}}
|
||||
|
||||
###
|
||||
{{< imgproc thing >}}caption for thing{{< /imgproc >}}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
version: '3'
|
||||
services:
|
||||
app:
|
||||
build: .
|
||||
working_dir: /blog
|
||||
command: hugo server --logLevel info --bind "0.0.0.0" --port 1313 --watch -t soho
|
||||
ports:
|
||||
- "1313:1313"
|
||||
volumes:
|
||||
- ./exampleSite:/blog
|
||||
- .:/blog/themes/soho
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
baseurl = "https://example.com/"
|
||||
languageCode = "en"
|
||||
title = "Soho Theme"
|
||||
theme = "github.com/alexandrevicenzi/soho"
|
||||
title = "Wantsum Theme"
|
||||
theme = "git.spod.cx/bcc/wantsum"
|
||||
DefaultContentLanguage = "en"
|
||||
enableInlineShortcodes = true
|
||||
summarylength = 10
|
||||
|
|
@ -10,9 +10,9 @@ paginate = 5
|
|||
ignoreErrors = ["error-remote-getjson"]
|
||||
|
||||
[params]
|
||||
title = "Soho Theme"
|
||||
title = "Wantsum Theme"
|
||||
description = "Example Blog"
|
||||
# gravatar = "soho@example.com"
|
||||
# gravatar = "wantsum@example.com"
|
||||
images = ["images/profile.png"]
|
||||
profilePicture = "images/profile.png"
|
||||
copyright = "Author Name"
|
||||
|
|
@ -32,7 +32,7 @@ mainSections = ["post"]
|
|||
[[params.socialIcons]]
|
||||
icon = "fa-github"
|
||||
title = "GitHub"
|
||||
url = "https://github.com/alexandrevicenzi/soho"
|
||||
url = "https://github.com/bcc"
|
||||
|
||||
[[params.socialIcons]]
|
||||
icon = "fa-twitter"
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
+++
|
||||
title = "Soho Theme"
|
||||
date = "2020-05-01"
|
||||
description = "About Soho Theme."
|
||||
tags = [
|
||||
"theme",
|
||||
]
|
||||
+++
|
||||
|
||||
[Soho](https://github.com/alexandrevicenzi/soho) is a minimalist two-column [hugo](https://gohugo.io) theme based on [Hyde](https://github.com/spf13/hyde) and inspired by the success of [Flex](https://github.com/alexandrevicenzi/Flex).
|
||||
|
||||
## Features
|
||||
|
||||
- Mobile First
|
||||
- Responsive
|
||||
- Semantic
|
||||
- SEO Best Practices
|
||||
- Open Graph
|
||||
- Rich Snippets (JSON-LD)
|
||||
- Twitter Card
|
||||
- Pagination
|
||||
- Customizable
|
||||
- Support all [Hugo Internals](https://gohugo.io/templates/internal/)
|
||||
|
||||
## Integrations
|
||||
|
||||
- [Disqus](https://disqus.com/)
|
||||
- [Google Analytics](https://www.google.com/analytics/web/)
|
||||
19
exampleSite/content/post/wantsum.md
Normal file
19
exampleSite/content/post/wantsum.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
+++
|
||||
title = "Wantsum Theme"
|
||||
date = "2024-07-05"
|
||||
description = "About Wantsum Theme."
|
||||
tags = [
|
||||
"theme",
|
||||
]
|
||||
+++
|
||||
|
||||
[Wantsum](https://git.spod.cx/bcc/wantsum) is a minimalist two-column [hugo](https://gohugo.io) theme based on [Soho](https://github.com/alexandrevicenzi/soho)
|
||||
|
||||
## Features
|
||||
|
||||
- Similar to Soho, but:
|
||||
- External integrations removed
|
||||
- No external dependencies
|
||||
- Page sizes dramatically smaller - ~1.5MB to ~50kB
|
||||
- Dark Mode
|
||||
-
|
||||
3
go.mod
3
go.mod
|
|
@ -1,3 +0,0 @@
|
|||
module github.com/alexandrevicenzi/soho
|
||||
|
||||
go 1.12
|
||||
|
|
@ -26,7 +26,12 @@
|
|||
|
||||
<link type="text/css"
|
||||
rel="stylesheet"
|
||||
href="{{ `css/hyde.css` | relURL }}">
|
||||
href="{{ `css/hyde-light.css` | relURL }}">
|
||||
|
||||
<link type="text/css"
|
||||
rel="stylesheet"
|
||||
href="{{ `css/hyde-dark.css` | relURL }}"
|
||||
media="(prefers-color-scheme: dark)">
|
||||
|
||||
{{ partial "theme-color.html" . }}
|
||||
|
||||
|
|
@ -35,18 +40,10 @@
|
|||
{{- end}}
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap">
|
||||
href="/fonts.css">
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
|
||||
integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
|
||||
crossorigin="anonymous" />
|
||||
|
||||
<link rel="apple-touch-icon-precomposed"
|
||||
sizes="144x144"
|
||||
href="/apple-touch-icon-144-precomposed.png">
|
||||
|
||||
<link rel="shortcut icon" href="/favicon.png">
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
|
||||
<!-- RSS -->
|
||||
{{ range .AlternativeOutputFormats -}}
|
||||
|
|
@ -56,26 +53,18 @@
|
|||
<body>
|
||||
{{ partial "sidebar.html" . }}
|
||||
|
||||
<main class="content container">
|
||||
<main class="content container" data-pagefind-body>
|
||||
{{ block "main" . -}}{{- end }}
|
||||
</main>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"
|
||||
integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="{{ `js/jquery.min.js` | relURL }}"></script>
|
||||
<script src="{{ `js/soho.js` | relURL }}"></script>
|
||||
|
||||
{{ range $.Site.Params.customJs -}}
|
||||
<script src="{{ . | relURL }}"></script>
|
||||
{{- end}}
|
||||
|
||||
{{ if not hugo.IsServer }}
|
||||
{{ template "_internal/google_analytics.html" . }}
|
||||
{{ end }}
|
||||
<script src="{{ `js/colour-toggle.js` | relURL }}"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
{{ define "main" -}}
|
||||
<ul class="posts">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="homepage-content">
|
||||
<!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
{{ range .Data.Pages -}}
|
||||
<li>
|
||||
<div class="flex">
|
||||
|
|
|
|||
|
|
@ -3,11 +3,6 @@
|
|||
<h1 class="title">{{ .Title }}</h1>
|
||||
{{ with .Params.tagline }}<span class="tagline">{{ . }}</span>{{ end }}
|
||||
|
||||
{{ if ne .Type "page" -}}
|
||||
<div class="post-date">
|
||||
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time> <span class="readtime">· {{ .ReadingTime }} min read</span>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
<div>
|
||||
{{ .Content }}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,21 @@
|
|||
{{ define "main" -}}
|
||||
<div class="homepage-content">
|
||||
<!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<h2>Latest Updates</h2>
|
||||
<div class="posts">
|
||||
{{- $pages := where .Site.RegularPages "Type" "in" .Site.Params.MainSections -}}
|
||||
{{- $paginator := .Paginate $pages -}}
|
||||
|
||||
{{ range $paginator.Pages }}
|
||||
<article class="post">
|
||||
<h1 class="post-title">
|
||||
<h3>
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</h1>
|
||||
</h3>
|
||||
|
||||
<div class="post-date">
|
||||
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time> · {{ .ReadingTime }} min read
|
||||
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -25,4 +30,6 @@
|
|||
</div>
|
||||
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
|
||||
{{- end }}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
<footer>
|
||||
<div>
|
||||
<p>
|
||||
© {{ $.Site.Params.Copyright }} {{ now.Format "2006"}}
|
||||
© {{ $.Site.Params.Copyright }} {{ now.Format "2006"}} {{ with .GitInfo }}- {{ .AbbreviatedHash }} {{ end }}
|
||||
|
||||
|
||||
{{ with $.Site.Params.License -}}
|
||||
· <a href="{{ $.Site.Params.licenseURL }}" target="_blank">{{ . | safeHTML }}</a>
|
||||
{{- end }}
|
||||
|
||||
{{ with $.Site.Params.BuiltWith -}}
|
||||
· Build with <a href="https://gohugo.io/" target="_blank">Hugo</a> & <a href="https://themes.gohugo.io/soho/" target="_blank">Soho</a> theme
|
||||
· Build with <a href="https://gohugo.io/" target="_blank">Hugo</a> & <a href="https://git.spod.cx/bcc/wantsum/" target="_blank">Wantsum</a> theme
|
||||
{{- end }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
{{ template "_internal/schema.html" . }}
|
||||
|
||||
{{ template "_internal/twitter_cards.html" . }}
|
||||
|
||||
{{ template "_internal/opengraph.html" . }}
|
||||
|
||||
{{ partial "json-ld.html" . }}
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
<div class="share-buttons">
|
||||
<a class="twitter-share-button"
|
||||
href="#"
|
||||
title="Share on Twitter"
|
||||
data-url="{{ .Permalink }}"
|
||||
data-text="{{ .Title }}"><i class="fab fa-twitter"></i></a>
|
||||
|
||||
<a class="linkedin-share-button"
|
||||
href="#"
|
||||
title="Share on LinkedIn"
|
||||
data-url="{{ .Permalink }}"
|
||||
data-text="{{ .Title }}"><i class="fab fa-linkedin-in"></i></a>
|
||||
|
||||
<a class="facebook-share-button"
|
||||
href="#"
|
||||
title="Share on Facebook"
|
||||
data-url="{{ .Permalink }}"
|
||||
data-text="{{ .Title }}"><i class="fab fa-facebook"></i></a>
|
||||
|
||||
<a class="telegram-share-button"
|
||||
href="#"
|
||||
title="Share on Telegram"
|
||||
data-url="{{ .Permalink }}"
|
||||
data-text="{{ .Title }}"><i class="fab fa-telegram"></i></a>
|
||||
|
||||
<a class="pinterest-share-button"
|
||||
href="#"
|
||||
title="Share on Pinterest"
|
||||
data-url="{{ .Permalink }}"
|
||||
data-text="{{ .Title }}"><i class="fab fa-pinterest"></i></a>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<aside class="sidebar">
|
||||
<aside class="sidebar" data-pagefind-ignore="all">
|
||||
<div class="container">
|
||||
<div class="sidebar-about">
|
||||
{{ with .Site.Params.gravatar }}
|
||||
|
|
@ -40,9 +40,16 @@
|
|||
<section class="social-icons">
|
||||
{{ range $item := .Site.Params.socialIcons }}
|
||||
<a href="{{ $item.url }}" rel="me" title="{{ $item.title }}" target="_blank">
|
||||
<i class="fab {{ $item.icon }}" aria-hidden="true"></i>
|
||||
<img src='/fa/svgs/{{ $item.icon }}.svg' style='width:32px; height:32px; display:inline; filter:invert(100%)'>
|
||||
</a>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
<section></section>
|
||||
<a class="colour-toggle" href="javascript:toggleColorScheme();">
|
||||
<span id="toggle-light">light mode</span>
|
||||
<span id="toggle-dark">dark mode</span>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
|||
21
layouts/shortcodes/imgproc.html
Normal file
21
layouts/shortcodes/imgproc.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{{ $images := .Page.Resources.ByType "image" }}
|
||||
{{ $original := $images.GetMatch (printf "%s*" (.Get 0)) }}
|
||||
{{ $command := .Get 1 | default "Resize" }}
|
||||
{{ $options := .Get 2 | default "smart" }}
|
||||
{{ $caption := .Get 3 | default "" }}
|
||||
{{ $options := print "1000x " $options}}
|
||||
{{ if eq $command "Fit"}}
|
||||
{{ .Scratch.Set "image" ($original.Fit $options) }}
|
||||
{{ else if eq $command "Resize"}}
|
||||
{{ .Scratch.Set "image" ($original.Resize $options) }}
|
||||
{{ else if eq $command "Fill"}}
|
||||
{{ .Scratch.Set "image" ($original.Fill $options) }}
|
||||
{{ else }}
|
||||
{{ $original.ResourceType }}
|
||||
{{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
|
||||
{{ end }}
|
||||
{{ $image := .Scratch.Get "image" }}
|
||||
<figure>
|
||||
<img src="{{ $image.RelPermalink }}">
|
||||
<figcaption>{{ with .Inner }}{{ . }}{{ else }}{{ $caption }}{{ end }}</figcaption>
|
||||
</figure>
|
||||
|
|
@ -1,81 +1,12 @@
|
|||
/*
|
||||
* __ __
|
||||
* /\ \ /\ \
|
||||
* \ \ \___ __ __ \_\ \ __
|
||||
* \ \ _ `\/\ \/\ \ /'_` \ /'__`\
|
||||
* \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/
|
||||
* \ \_\ \_\/`____ \ \___,_\ \____\
|
||||
* \/_/\/_/`/___/> \/__,_ /\/____/
|
||||
* /\___/
|
||||
* \/__/
|
||||
*
|
||||
* Designed, built, and released under MIT license by @mdo. Learn more at
|
||||
* https://github.com/poole/hyde.
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Contents
|
||||
*
|
||||
* Global resets
|
||||
* Sidebar
|
||||
* Container
|
||||
* Reverse layout
|
||||
* Themes
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Global resets
|
||||
*
|
||||
* Update the foundational and global aspects of the page.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: 'Open Sans', 'Roboto', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 58em) {
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*
|
||||
* Flexible banner for housing site name, intro, and "footer" content. Starts
|
||||
* out above content in mobile and later moves to the side with wider viewports.
|
||||
*/
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.sidebar {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
|
||||
color: rgba(255,255,255,.5);
|
||||
background-color: #202020;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 18rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-left: 19rem !important;
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: #ccc;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* Sidebar links */
|
||||
|
|
@ -86,82 +17,20 @@ h1,h2,h3,h4,h5,h6 {
|
|||
/* About section */
|
||||
.sidebar-about h1 {
|
||||
color: #222;
|
||||
margin-top: 0;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Sidebar nav */
|
||||
.sidebar-nav {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.sidebar-nav-item {
|
||||
display: block;
|
||||
}
|
||||
a.sidebar-nav-item:hover,
|
||||
a.sidebar-nav-item:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sidebar-nav-item.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Container
|
||||
*
|
||||
* Align the contents of the site above the proper threshold with some margin-fu
|
||||
* with a 25%-wide `.sidebar`.
|
||||
*/
|
||||
|
||||
.content {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
min-height: 50%;
|
||||
}
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #000000;
|
||||
color: #ccc;
|
||||
background-color: #000;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: .7rem;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
padding: 1rem 0;
|
||||
margin: 0 1rem;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.content {
|
||||
max-width: 40rem;
|
||||
margin-left: 20rem;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: -40px;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.img-headshot {
|
||||
border: 6px solid #222;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
|
@ -180,103 +49,23 @@ footer a,
|
|||
color: #336699;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.read-more-link a {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid;
|
||||
border-color: #336699;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.read-more-link a:hover {
|
||||
text-decoration: none;
|
||||
color: #222;
|
||||
background-color: #336699;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul.posts {
|
||||
list-style: none;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.social-icons,
|
||||
.sidebar nav {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
ul.posts li,
|
||||
.sidebar nav li {
|
||||
font-size: 1.2rem;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.social-icons a {
|
||||
font-size: 1.5rem;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 58rem) {
|
||||
.social-icons a {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
ul.posts li,
|
||||
.sidebar nav li {
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icons a,
|
||||
.social-icons a:hover,
|
||||
.social-icons a:focus {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
margin: 1em 0 2rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.pagination li a {
|
||||
display: block;
|
||||
margin-bottom: 0.25em;
|
||||
padding: 0.5em 1em;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #336699;
|
||||
border: 1px solid #336699;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.pagination li a:hover {
|
||||
color: #222;
|
||||
background-color: #336699;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.pagination li.active a {
|
||||
|
|
@ -286,94 +75,41 @@ ul.posts li,
|
|||
|
||||
.pagination li.disabled a {
|
||||
color: rgba(67, 118, 122, 0.5);
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pagination li:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pagination li:first-child a {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination li:last-child a {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.share-buttons {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.share-buttons a {
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
|
||||
.share-buttons a:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
ul.tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
ul.tags li {
|
||||
display: inline-block;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
a.tag-link {
|
||||
background-color: #f2f2f2;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
text-decoration: none;
|
||||
color: #757575 !important;
|
||||
}
|
||||
|
||||
a.tag-link:hover {
|
||||
text-decoration: none;
|
||||
|
||||
/* Code */
|
||||
code,
|
||||
pre,
|
||||
.highlight {
|
||||
font-family: Menlo, Monaco, "Courier New", monospace;
|
||||
}
|
||||
code {
|
||||
color: #e83e8c;
|
||||
white-space: pre;
|
||||
}
|
||||
pre {
|
||||
background-color: #222;
|
||||
}
|
||||
pre code {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
.highlight {
|
||||
border-color: #ddd #ddd #ccc;
|
||||
}
|
||||
.chroma .lntd {
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
figure {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.social-icons {
|
||||
filter:invert(100%);
|
||||
}
|
||||
|
||||
figure > img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
text-align: center;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
display: block;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
380
static/css/hyde-light.css
Normal file
380
static/css/hyde-light.css
Normal file
|
|
@ -0,0 +1,380 @@
|
|||
/*
|
||||
* __ __
|
||||
* /\ \ /\ \
|
||||
* \ \ \___ __ __ \_\ \ __
|
||||
* \ \ _ `\/\ \/\ \ /'_` \ /'__`\
|
||||
* \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/
|
||||
* \ \_\ \_\/`____ \ \___,_\ \____\
|
||||
* \/_/\/_/`/___/> \/__,_ /\/____/
|
||||
* /\___/
|
||||
* \/__/
|
||||
*
|
||||
* Designed, built, and released under MIT license by @mdo. Learn more at
|
||||
* https://github.com/poole/hyde.
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Contents
|
||||
*
|
||||
* Global resets
|
||||
* Sidebar
|
||||
* Container
|
||||
* Reverse layout
|
||||
* Themes
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Global resets
|
||||
*
|
||||
* Update the foundational and global aspects of the page.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: 'Open Sans', 'Roboto', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 58em) {
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*
|
||||
* Flexible banner for housing site name, intro, and "footer" content. Starts
|
||||
* out above content in mobile and later moves to the side with wider viewports.
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
color: rgba(255,255,255,.5);
|
||||
background-color: #202020;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 18rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-left: 19rem !important;
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar links */
|
||||
.sidebar a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* About section */
|
||||
.sidebar-about h1 {
|
||||
color: #fff;
|
||||
margin-top: 0;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Sidebar nav */
|
||||
.sidebar-nav {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.sidebar-nav-item {
|
||||
display: block;
|
||||
}
|
||||
a.sidebar-nav-item:hover,
|
||||
a.sidebar-nav-item:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sidebar-nav-item.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Container
|
||||
*
|
||||
* Align the contents of the site above the proper threshold with some margin-fu
|
||||
* with a 25%-wide `.sidebar`.
|
||||
*/
|
||||
|
||||
.content {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
min-height: 50%;
|
||||
}
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: .7rem;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
padding: 1rem 0;
|
||||
margin: 0 1rem;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.content {
|
||||
max-width: 40rem;
|
||||
margin-left: 20rem;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: -40px;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.img-headshot {
|
||||
border: 6px solid #fff;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #336699;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar a,
|
||||
.sidebar-about h1 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
footer a,
|
||||
.content a,
|
||||
.related-posts li a:hover {
|
||||
color: #336699;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.read-more-link a {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid;
|
||||
border-color: #336699;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.read-more-link a:hover {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background-color: #336699;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul.posts {
|
||||
list-style: none;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.social-icons,
|
||||
.sidebar nav {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
ul.posts li,
|
||||
.sidebar nav li {
|
||||
font-size: 1.2rem;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.social-icons a {
|
||||
font-size: 1.5rem;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 58rem) {
|
||||
.social-icons a {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
ul.posts li,
|
||||
.sidebar nav li {
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icons a,
|
||||
.social-icons a:hover,
|
||||
.social-icons a:focus {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
margin: 1em 0 2rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.pagination li a {
|
||||
display: block;
|
||||
margin-bottom: 0.25em;
|
||||
padding: 0.5em 1em;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #336699;
|
||||
border: 1px solid #336699;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.pagination li a:hover {
|
||||
color: #fff;
|
||||
background-color: #336699;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.pagination li.active a {
|
||||
color: #fff;
|
||||
background-color: #336699;
|
||||
}
|
||||
|
||||
.pagination li.disabled a {
|
||||
color: rgba(67, 118, 122, 0.5);
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pagination li:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pagination li:first-child a {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination li:last-child a {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.share-buttons {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.share-buttons a {
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
|
||||
.share-buttons a:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
ul.tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
ul.tags li {
|
||||
display: inline-block;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
a.tag-link {
|
||||
background-color: #f2f2f2;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
text-decoration: none;
|
||||
color: #757575 !important;
|
||||
}
|
||||
|
||||
a.tag-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
figure {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figure > img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
text-align: center;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
display: block;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #efefef;
|
||||
border-left: 3px solid #ccc;
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
|
|
@ -1,373 +1 @@
|
|||
/*
|
||||
* __ __
|
||||
* /\ \ /\ \
|
||||
* \ \ \___ __ __ \_\ \ __
|
||||
* \ \ _ `\/\ \/\ \ /'_` \ /'__`\
|
||||
* \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/
|
||||
* \ \_\ \_\/`____ \ \___,_\ \____\
|
||||
* \/_/\/_/`/___/> \/__,_ /\/____/
|
||||
* /\___/
|
||||
* \/__/
|
||||
*
|
||||
* Designed, built, and released under MIT license by @mdo. Learn more at
|
||||
* https://github.com/poole/hyde.
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Contents
|
||||
*
|
||||
* Global resets
|
||||
* Sidebar
|
||||
* Container
|
||||
* Reverse layout
|
||||
* Themes
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Global resets
|
||||
*
|
||||
* Update the foundational and global aspects of the page.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: 'Open Sans', 'Roboto', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 58em) {
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*
|
||||
* Flexible banner for housing site name, intro, and "footer" content. Starts
|
||||
* out above content in mobile and later moves to the side with wider viewports.
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
color: rgba(255,255,255,.5);
|
||||
background-color: #202020;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 18rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-left: 19rem !important;
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar links */
|
||||
.sidebar a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* About section */
|
||||
.sidebar-about h1 {
|
||||
color: #fff;
|
||||
margin-top: 0;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Sidebar nav */
|
||||
.sidebar-nav {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.sidebar-nav-item {
|
||||
display: block;
|
||||
}
|
||||
a.sidebar-nav-item:hover,
|
||||
a.sidebar-nav-item:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sidebar-nav-item.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Container
|
||||
*
|
||||
* Align the contents of the site above the proper threshold with some margin-fu
|
||||
* with a 25%-wide `.sidebar`.
|
||||
*/
|
||||
|
||||
.content {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
min-height: 50%;
|
||||
}
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: .7rem;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
padding: 1rem 0;
|
||||
margin: 0 1rem;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.content {
|
||||
max-width: 40rem;
|
||||
margin-left: 20rem;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: -40px;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.img-headshot {
|
||||
border: 6px solid #fff;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #336699;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar a,
|
||||
.sidebar-about h1 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
footer a,
|
||||
.content a,
|
||||
.related-posts li a:hover {
|
||||
color: #336699;
|
||||
}
|
||||
|
||||
.read-more-link {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.read-more-link a {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid;
|
||||
border-color: #336699;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.read-more-link a:hover {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background-color: #336699;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul.posts {
|
||||
list-style: none;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.social-icons,
|
||||
.sidebar nav {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
ul.posts li,
|
||||
.sidebar nav li {
|
||||
font-size: 1.2rem;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.social-icons a {
|
||||
font-size: 1.5rem;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 58rem) {
|
||||
.social-icons a {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
ul.posts li,
|
||||
.sidebar nav li {
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icons a,
|
||||
.social-icons a:hover,
|
||||
.social-icons a:focus {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
margin: 1em 0 2rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.pagination li a {
|
||||
display: block;
|
||||
margin-bottom: 0.25em;
|
||||
padding: 0.5em 1em;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #336699;
|
||||
border: 1px solid #336699;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.pagination li a:hover {
|
||||
color: #fff;
|
||||
background-color: #336699;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.pagination li.active a {
|
||||
color: #fff;
|
||||
background-color: #336699;
|
||||
}
|
||||
|
||||
.pagination li.disabled a {
|
||||
color: rgba(67, 118, 122, 0.5);
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pagination li:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pagination li:first-child a {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination li:last-child a {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.share-buttons {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.share-buttons a {
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
|
||||
.share-buttons a:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
ul.tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
ul.tags li {
|
||||
display: inline-block;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
a.tag-link {
|
||||
background-color: #f2f2f2;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
text-decoration: none;
|
||||
color: #757575 !important;
|
||||
}
|
||||
|
||||
a.tag-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
figure {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figure > img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
text-align: center;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
display: block;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@import "hyde-dark.css";
|
||||
12
static/css/pagefind-dark.css
Normal file
12
static/css/pagefind-dark.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--pagefind-ui-primary: #aaa;
|
||||
--pagefind-ui-text: #aaa;
|
||||
--pagefind-ui-background: #393939;
|
||||
--pagefind-ui-border: #393939;
|
||||
--pagefind-ui-tag: #393939;
|
||||
}
|
||||
.pagefind-ui mark {
|
||||
background-color: #336699;
|
||||
}
|
||||
}
|
||||
4
static/fonts.css
Normal file
4
static/fonts.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url(/fonts/webfonts/open-sans-latin-400-normal.woff2);
|
||||
}
|
||||
98
static/js/colour-toggle.js
Normal file
98
static/js/colour-toggle.js
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
// With thanks to Mendhak on
|
||||
// https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting
|
||||
// Return the system level color scheme, but if something's in local storage, return that
|
||||
// Unless the system scheme matches the the stored scheme, in which case... remove from local storage
|
||||
function getPreferredColorScheme(){
|
||||
let systemScheme = 'light';
|
||||
if(window.matchMedia('(prefers-color-scheme: dark)').matches){
|
||||
systemScheme = 'dark';
|
||||
}
|
||||
let chosenScheme = systemScheme;
|
||||
|
||||
if(localStorage.getItem("scheme")){
|
||||
chosenScheme = localStorage.getItem("scheme");
|
||||
}
|
||||
|
||||
if(systemScheme === chosenScheme){
|
||||
localStorage.removeItem("scheme");
|
||||
}
|
||||
|
||||
return chosenScheme;
|
||||
}
|
||||
|
||||
// Write chosen color scheme to local storage
|
||||
// Unless the system scheme matches the the stored scheme, in which case... remove from local storage
|
||||
function savePreferredColorScheme(scheme){
|
||||
let systemScheme = 'light';
|
||||
|
||||
if(window.matchMedia('(prefers-color-scheme: dark)').matches){
|
||||
systemScheme = 'dark';
|
||||
}
|
||||
|
||||
if(systemScheme === scheme){
|
||||
localStorage.removeItem("scheme");
|
||||
}
|
||||
else {
|
||||
localStorage.setItem("scheme", scheme);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Get the current scheme, and apply the opposite
|
||||
function toggleColorScheme(){
|
||||
let newScheme = "light";
|
||||
let scheme = getPreferredColorScheme();
|
||||
if (scheme === "light"){
|
||||
newScheme = "dark";
|
||||
}
|
||||
|
||||
applyPreferredColorScheme(newScheme);
|
||||
savePreferredColorScheme(newScheme);
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Apply the chosen color scheme by traversing stylesheet rules, and applying a medium.
|
||||
function applyPreferredColorScheme(scheme) {
|
||||
for (var s = 0; s < document.styleSheets.length; s++) {
|
||||
|
||||
for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
|
||||
rule = document.styleSheets[s].cssRules[i];
|
||||
|
||||
|
||||
if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
|
||||
|
||||
switch (scheme) {
|
||||
case "light":
|
||||
rule.media.appendMedium("original-prefers-color-scheme");
|
||||
if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
|
||||
if (rule.media.mediaText.includes("dark")) rule.media.deleteMedium("(prefers-color-scheme: dark)");
|
||||
break;
|
||||
case "dark":
|
||||
rule.media.appendMedium("(prefers-color-scheme: light)");
|
||||
rule.media.appendMedium("(prefers-color-scheme: dark)");
|
||||
if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
|
||||
break;
|
||||
default:
|
||||
rule.media.appendMedium("(prefers-color-scheme: dark)");
|
||||
if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
|
||||
if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Change the toggle button to be the opposite of the current scheme
|
||||
if (scheme === "dark") {
|
||||
document.getElementById("toggle-light").style.display = 'inline';
|
||||
document.getElementById("toggle-dark").style.display = 'none';
|
||||
} else {
|
||||
document.getElementById("toggle-dark").style.display = 'inline';
|
||||
document.getElementById("toggle-light").style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
applyPreferredColorScheme(getPreferredColorScheme());
|
||||
15
theme.toml
15
theme.toml
|
|
@ -1,16 +1,15 @@
|
|||
name = "Soho"
|
||||
name = "Wantsum"
|
||||
license = "MIT"
|
||||
licenselink = "https://github.com/alexandrevicenzi/soho/blob/master/LICENSE.md"
|
||||
description = "A minimalist and mobile first theme for Hugo"
|
||||
tags = ["blog", "responsive", "light", "minimal"]
|
||||
features = ["blog", "seo", "responsive", "mobile", "disqus", "analytics"]
|
||||
tags = ["blog", "responsive", "light", "dark", "minimal"]
|
||||
features = ["blog", "seo", "responsive", "mobile"]
|
||||
min_version = "0.54.0"
|
||||
|
||||
[author]
|
||||
name = "alexandrevicenzi"
|
||||
homepage = "https://alxd.dev"
|
||||
name = "bcc"
|
||||
homepage = "https://spod.cx"
|
||||
|
||||
[original]
|
||||
author = "spf13"
|
||||
homepage = "http://spf13.com"
|
||||
repo = "https://github.com/spf13/hyde"
|
||||
name = "alexandrevicenzi"
|
||||
homepage = "https://alxd.dev"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue