mirror of
https://github.com/foo-dogsquared/hugo-theme-contentful.git
synced 2025-01-30 22:57:55 +00:00
Update the theme to v1.1.0
This commit is contained in:
foo-dogsquared
parent
a8fda38e52
commit
2a978de093
@ -4,8 +4,43 @@ All notable changes to this project will be documented in this file.
|
||||
The format is based on https://keepachangelog.com/en/1.0.0/[Keep a Changelog],
|
||||
and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Versioning].
|
||||
|
||||
|
||||
|
||||
== [Unreleased]
|
||||
|
||||
|
||||
|
||||
|
||||
== [1.1.0] - 2020-05-09
|
||||
|
||||
|
||||
=== Added
|
||||
|
||||
* Create a theme toggle.
|
||||
It also [detects with CSS if the user prefers a dark scheme](https://css-tricks.com/dark-modes-with-css/).
|
||||
|
||||
* Add a modified date (although requires `.GitInfo` to work which requires a Git-enabled repository).
|
||||
|
||||
* Add `toc` to as site and page configuration.
|
||||
The page config has more priority and can override the site config.
|
||||
|
||||
|
||||
=== Changed
|
||||
|
||||
* Update the site to conform with accessibility features.
|
||||
** Add a `aria-label` for list entries.
|
||||
** Make the theme screen-reader-friendly with the correct use of [content semantic tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
|
||||
** Revise the color of the links.
|
||||
** Use viewport units for dynamic font sizes.
|
||||
|
||||
* Improve the vertical rhythm of the site.
|
||||
|
||||
|
||||
|
||||
|
||||
== [1.0.0] - 2019-09-21
|
||||
|
||||
|
||||
=== Added
|
||||
* Create the base layout.
|
||||
* Add the Asciidoctor content template.
|
||||
|
||||
191
README.md
191
README.md
@ -1,33 +1,147 @@
|
||||
# Contentful
|
||||
|
||||
It's a Hugo theme that focuses on being contentful by having the most
|
||||
minimal format as much as possible while being readable.
|
||||
That said, it is easy to extend and modify to implement the feature that
|
||||
you want.
|
||||
It's a Hugo theme that focuses on being contentful by having the most minimal format as much as possible maintaining readability and easy on the eyes, using modern web standards and features in this day and age.
|
||||
It also aims to be easy to extend and modify to implement the feature that you want.
|
||||
Primarily tested on Chromium-based and Firefox-based web browsers.
|
||||
|
||||
It could also serve as a pretty introduction to Hugo themes since there
|
||||
not much going on.
|
||||
It could also serve as a pretty introduction to Hugo themes since there not much going on.
|
||||
|
||||
Getting started with this theme is pretty easy.
|
||||
All it needs is the `title` field from your site config.
|
||||
Getting started with this theme is pretty easy.
|
||||
All it needs is the `title` field from your site config.
|
||||
|
||||
The base theme could also render menu entries (but nested menus are not supported).
|
||||
|
||||
## Inlining CSS
|
||||
|
||||
You can make the CSS to be inline instead by moving the CSS stylesheet in the assets
|
||||
folder and edit the appropriate file.
|
||||
|
||||
As of 2019-09-11, this stylesheet is located in `static/css/main.css` so it should be
|
||||
easy to override it with your own modifications.
|
||||
## Installation
|
||||
|
||||
## RSS, Atom, and JSON feeds
|
||||
I assume you already have [Git](https://git-scm.com/) and [Hugo](https://gohugo.io/) installed.
|
||||
For future reference, the minimum Hugo version required is at v0.58.
|
||||
Additionally, the following instructions are done as if you're in a Hugo directory.
|
||||
|
||||
You can have web syndication formats like RSS and Atom by setting [custom output formats](https://gohugo.io/templates/output-formats) to your site configurations.
|
||||
Installation of a Hugo theme is pretty simple, just clone the repo into your theme folder of your Hugo project.
|
||||
|
||||
The theme supports output feeds for the homepage and site sections.
|
||||
```shell
|
||||
git clone https://github.com/foo-dogsquared/hugo-theme-contentful.git themes/contentful
|
||||
```
|
||||
|
||||
Here is an example configuration on enabling all of them.
|
||||
To try the theme out, just execute Hugo using the theme like in the following command.
|
||||
|
||||
```shell
|
||||
hugo server --theme contentful
|
||||
```
|
||||
|
||||
If you're decided to use this theme and don't want to bother using the `--theme` option, just set it in your [site configuration](https://gohugo.io/getting-started/configuration/) and you're done!
|
||||
|
||||
|
||||
|
||||
|
||||
## Configuration
|
||||
|
||||
The theme tries to use as little custom parameters as possible.
|
||||
Thus, it would be pointless if I lay them all out since they're already explained from [the official documentation](https://gohugo.io/documentation/).
|
||||
Instead, I decided to create an example configuration for you to explore.
|
||||
The following example assumes you're using a TOML (`config.toml`).
|
||||
|
||||
```toml
|
||||
baseURL = "https://example.com"
|
||||
title = "Contentful"
|
||||
enableGitInfo = true
|
||||
paginate = 20
|
||||
|
||||
|
||||
[languages]
|
||||
[languages.en]
|
||||
languageName = "English"
|
||||
|
||||
[languages.tl]
|
||||
languageName = "Tagalog"
|
||||
|
||||
|
||||
[mediaTypes]
|
||||
[mediaTypes."application/atom+xml"]
|
||||
suffixes = ["atom"]
|
||||
|
||||
[mediaTypes."application/rss+xml"]
|
||||
suffixes = ["rss"]
|
||||
|
||||
|
||||
[outputFormats]
|
||||
[outputFormats.RSS]
|
||||
mediaType = "application/rss+xml"
|
||||
baseName = "index"
|
||||
|
||||
[outputFormats.Atom]
|
||||
mediaType = "application/atom+xml"
|
||||
baseName = "index"
|
||||
|
||||
|
||||
[outputs]
|
||||
home = ["HTML", "RSS", "ATOM", "JSON"]
|
||||
section = ["HTML", "RSS", "ATOM", "JSON"]
|
||||
|
||||
|
||||
[menu]
|
||||
[[menu.main]]
|
||||
name = "About"
|
||||
url = "about/"
|
||||
|
||||
[[menu.main]]
|
||||
name = "Categories"
|
||||
url = "categories/"
|
||||
|
||||
[[menu.main]]
|
||||
name = "Tags"
|
||||
url = "tags/"
|
||||
|
||||
|
||||
[params]
|
||||
# Enable table of content generation (only valid for Markdown files to be parsed by Hugo's built-in parsers).
|
||||
toc = true
|
||||
```
|
||||
|
||||
As for custom frontmatter for individual pages, Contentful checks the following keys:
|
||||
|
||||
* `author` field based from the [site `author` field](https://gohugo.io/variables/site/#site-variables-list).
|
||||
It could be handy for guest posts and co-authored papers with others.
|
||||
|
||||
* `toc` field which only requires a boolean and overrides the global `toc` setting for that page.
|
||||
|
||||
The theme was made to be easy to modify (thus extend).
|
||||
But first, a preview of the core file structure of the project that you'll surely some attention in the future:
|
||||
|
||||
```shell
|
||||
hugo-theme-contentful
|
||||
├── content/
|
||||
├── i18n/
|
||||
├── layouts/
|
||||
├── static/
|
||||
├── CHANGELOG.adoc*
|
||||
├── LICENSE*
|
||||
└── README.md*
|
||||
```
|
||||
|
||||
This is simply the [Hugo's directory structure](https://gohugo.io/getting-started/directory-structure/).
|
||||
If you're already familiar with this, it shouldn't be a problem.
|
||||
|
||||
If you want to store CSS and JavaScript files, it is preferred to store them in `static/` folder.
|
||||
To edit the site CSS, simply copy the stylesheet located in `theme/contentful/static/css/main.css` to your own static folder (with the same folder structure) and override it with your own modifications.
|
||||
If your own modification has gone to an extent where maintaining a single CSS file is reminiscent of r
|
||||
|
||||
The next folder you most likely want to pay attention is the `layouts/` directory where all of the well, layouts are stored.
|
||||
There are some things that are already figured out for you such as the templates for RSS, Atom, and JSON feeds.
|
||||
You can easily add in your own, if you want.
|
||||
|
||||
Some things you may want to be customized are the [404 page](./layouts/404.html), [`<head>` for your own scripts](./layouts/partials/head.html), [header](./layouts/partials/header.html), and the [footer](./layouts/partials/footer.html).
|
||||
|
||||
|
||||
|
||||
|
||||
## RSS, Atom, and JSON feeds
|
||||
|
||||
You can have web syndication formats like RSS and Atom by setting [custom output formats](https://gohugo.io/templates/output-formats) to your site configurations.
|
||||
The theme supports output feeds for the homepage and site sections.
|
||||
|
||||
Here is an example configuration on enabling all of them.
|
||||
|
||||
```toml
|
||||
# Visit the following for more information:
|
||||
@ -38,7 +152,7 @@ Here is an example configuration on enabling all of them.
|
||||
[mediaTypes]
|
||||
[mediaTypes."application/atom+xml"]
|
||||
suffixes = ["atom", "atom.xml"] # You can remove the "atom.xml" if you want
|
||||
|
||||
|
||||
# Redefining RSS media type for the additional suffix
|
||||
[mediaTypes."application/rss+xml"]
|
||||
suffixes = ["rss", "rss.xml"] # You can remove the "rss.xml" if you want
|
||||
@ -54,36 +168,47 @@ Here is an example configuration on enabling all of them.
|
||||
mediaType = "application/atom+xml"
|
||||
baseName = "index"
|
||||
|
||||
# Indicating what output formats shall be included
|
||||
|
||||
# Indicating what output formats shall be included
|
||||
# for the following kinds
|
||||
[outputs]
|
||||
# .Site.BaseURL/index.* is available
|
||||
# .Site.BaseURL/index.* is available
|
||||
home = ["HTML", "JSON", "RSS", "ATOM"]
|
||||
|
||||
# .Site.BaseURL/$section/index.* is available
|
||||
section = ["HTML", "JSON", "RSS", "ATOM"]
|
||||
section = ["HTML", "JSON", "RSS", "ATOM"]
|
||||
```
|
||||
|
||||
## Multilingual mode support
|
||||
|
||||
Multiple languages for your site is supported.
|
||||
You can simply organize your content as discussed on [this blog post](https://regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/).
|
||||
|
||||
The theme requires a language code based from [IANA Language Subtag Registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) as defined from the [W3 documentation](https://www.w3.org/International/questions/qa-choosing-language-tags).
|
||||
|
||||
As of 2019-09-21, only English and Tagalog is supported.
|
||||
Contributions through translations are appreciated.
|
||||
## Multilingual mode support
|
||||
|
||||
[Multiple languages](https://gohugo.io/content-management/multilingual/) for your site is supported.
|
||||
You can simply organize your content as described on [this blog post](https://regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/).
|
||||
|
||||
The theme requires a language code based from [IANA Language Subtag Registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) as defined from the [W3 documentation](https://www.w3.org/International/questions/qa-choosing-language-tags).
|
||||
|
||||
As of 2019-09-21, only English and Tagalog is supported.
|
||||
Contributions through translations are appreciated.
|
||||
|
||||
|
||||
|
||||
|
||||
## Inspirations
|
||||
|
||||
This theme is inspired by the following beautiful and minimal pieces of work:
|
||||
|
||||
* [The Best Motherfucking Website](https://thebestmotherfucking.website/)
|
||||
* [Jeff Kreeftmeijer's site](https://jeffkreeftmeijer.com/)
|
||||
* [Hugo XMin](https://github.com/yihui/hugo-xmin)
|
||||
* [Hugo XMin](https://github.com/yihui/hugo-xmin)
|
||||
* [ratfactor.com](https://ratfactor.com/)
|
||||
* [Arch Terminal](https://github.com/foo-dogsquared/hugo-theme-arch-terminal) (OK, I think this is just selling out; this is my first theme, btw)
|
||||
* [Arch Terminal](https://github.com/foo-dogsquared/hugo-theme-arch-terminal) (OK, I think this is just selling out; this is my first theme, btw)
|
||||
|
||||
## License
|
||||
|
||||
This theme is licensed under MIT license.
|
||||
Please see the original license file for more details.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
This theme is licensed under MIT license.
|
||||
Please see the original license file for more details.
|
||||
|
||||
30
i18n/en.toml
30
i18n/en.toml
@ -1,19 +1,37 @@
|
||||
# Pagination
|
||||
[first_page]
|
||||
other = "First page"
|
||||
other = "Newest posts"
|
||||
|
||||
[prev_page]
|
||||
other = "Previous page"
|
||||
other = "Newer posts"
|
||||
|
||||
[next_page]
|
||||
other = "Next page"
|
||||
other = "Older posts"
|
||||
|
||||
[last_page]
|
||||
other = "Last page"
|
||||
other = "Oldest posts"
|
||||
|
||||
|
||||
# Content
|
||||
[published_by]
|
||||
other = "Authors"
|
||||
|
||||
[published_on]
|
||||
other = "Created"
|
||||
|
||||
[updated_on]
|
||||
other = "Updated"
|
||||
|
||||
[available_translations]
|
||||
other = "Translations"
|
||||
|
||||
|
||||
# General
|
||||
[back_to_home]
|
||||
other = "Back to home"
|
||||
|
||||
[available_translations]
|
||||
other = "Available translations"
|
||||
[multilingual]
|
||||
other = "Available in other languages"
|
||||
|
||||
[theme_toggle]
|
||||
other = "Toggle theme"
|
||||
|
||||
22
i18n/tl.toml
22
i18n/tl.toml
@ -11,9 +11,27 @@ other = "Sunod"
|
||||
[last_page]
|
||||
other = "Huling pahina"
|
||||
|
||||
|
||||
# Content
|
||||
[published_by]
|
||||
other = "Sinulat ni"
|
||||
|
||||
[published_on]
|
||||
other = "Na-publish noong"
|
||||
|
||||
[updated_on]
|
||||
other = "Binago noong"
|
||||
|
||||
[available_translations]
|
||||
other = "Mga pagsasalin"
|
||||
|
||||
|
||||
# General
|
||||
[back_to_home]
|
||||
other = "Balik sa homepage"
|
||||
|
||||
[available_translations]
|
||||
other = "Mga pagsasalin"
|
||||
[multilingual]
|
||||
other = "Ibang lengwahe"
|
||||
|
||||
[theme_toggle]
|
||||
other = "Toggle theme"
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
{{ end }}
|
||||
{{ range (.Paginate $pages).Pages }}
|
||||
<article class="post">
|
||||
<a href="{{ .Permalink }}"><h1>{{ .Title }}</h1></a>
|
||||
<a href="{{ .Permalink }}" aria-label="{{ .Title }}"><h1>{{ .Title }}</h1></a>
|
||||
<date datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</date>
|
||||
</article>
|
||||
{{ end }}
|
||||
@ -30,4 +30,4 @@
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
@ -1,20 +1,44 @@
|
||||
{{ define "main" }}
|
||||
<main>
|
||||
<h1 class="post-title">{{ .Title }}</h1>
|
||||
{{ with .Params.author }}<p>{{ . }}</p>{{ end }}
|
||||
<date datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</date>
|
||||
{{ if .IsTranslated }}
|
||||
<div>
|
||||
{{ i18n "available_translations" }}:
|
||||
{{ range .Translations }}
|
||||
<a href="{{ .Permalink }}">{{ .Lang }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<header>
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
||||
<div class="post__meta">
|
||||
<!-- List the author(s) of the article. -->
|
||||
{{- with .Params.author }}
|
||||
<p class="author">{{ i18n "published_by" }}: {{ range . }}{{ . }}; {{ end }}</p>
|
||||
{{- end }}
|
||||
|
||||
<!-- Publication date. -->
|
||||
<p class="created-date">{{ i18n "published_on" }}: <date datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</date></p>
|
||||
|
||||
<!-- Modification date (will only appear if the publication date is less than the modified date.) -->
|
||||
{{- if ne .Date .Lastmod }}
|
||||
<p class="updated-date">{{ i18n "updated_on" }}: <date datetime="{{ .Lastmod.Format "2006-01-02" }}">{{ .Lastmod.Format "2006-01-02" }}</date></p>
|
||||
{{- end }}
|
||||
|
||||
<!-- Link the translated versions if the article has at least one translated page. -->
|
||||
{{- if .IsTranslated }}
|
||||
<p>
|
||||
{{- i18n "available_translations" }}:
|
||||
{{ range .Translations }}
|
||||
<a href="{{ .Permalink }}">{{ with .Language.LanguageName }}{{ . }}{{ else }}{{ .Lang }}{{ end }}</a>
|
||||
{{- end }}
|
||||
</p>
|
||||
{{- end }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
{{ $is_toc := cond (ne .Params.toc nil) .Params.toc $.Site.Params.toc }}
|
||||
{{ if $is_toc }}
|
||||
{{ .TableOfContents }}
|
||||
{{ end }}
|
||||
|
||||
<!-- The article content. -->
|
||||
<article>
|
||||
{{ .Content }}
|
||||
</article>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
@ -10,4 +10,5 @@
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
{{ end }}
|
||||
@ -1,5 +1,17 @@
|
||||
<hr>
|
||||
<footer>
|
||||
<!-- A convenient back to home. -->
|
||||
<p><a href="{{ $.Site.BaseURL }}">{{ i18n "back_to_home" }}</a></p>
|
||||
</footer>
|
||||
|
||||
<!-- Linking to other languages' homepage. -->
|
||||
{{ if $.Site.IsMultiLingual }}
|
||||
<p>{{ i18n "multilingual" }}:
|
||||
{{ range $.Site.Languages }}
|
||||
<a href="{{ . | relURL }}">{{ with .LanguageName }}{{ . }}{{ else }}{{ .Lang }}{{ end }}</a>
|
||||
{{ end }}
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
<!-- Copyright info. -->
|
||||
<p>{{ with $.Site.Copyright }}{{ . | markdownify }}{{ else }}© {{ now.Year }} {{ with $.Site.Author.name }}{{ . }}{{ else }}{{ $.Site.Title }}{{ end }}{{ end }}</p>
|
||||
@ -1,4 +1,14 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ if .IsHome }}{{ $.Site.Title }}{{ else }}{{ .Title }}{{ end }}</title>
|
||||
<link rel="stylesheet" href="{{"css/main.css" | absURL }}" />
|
||||
<link rel="stylesheet" href="{{"css/main.css" | absURL }}" />
|
||||
<script>
|
||||
const theme = window.localStorage.getItem('theme');
|
||||
if (theme) {
|
||||
document.documentElement.dataset.theme = theme;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- MathJax -->
|
||||
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
||||
<script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{{ if not .IsPage }}
|
||||
<header>
|
||||
<h1>{{ $.Site.Title }}</h1>
|
||||
<nav>
|
||||
<nav aria-labelledby="primary-navigation">
|
||||
<a class="site__title" href="{{ $.Site.BaseURL }}">{{ $.Site.Title }}</a>
|
||||
<div class="site__links">
|
||||
|
|
||||
{{ range $.Site.Menus.main -}}
|
||||
<a href="{{ .URL | absURL }}">{{ .Name }}</a>
|
||||
<a href="{{ .URL | absURL }}">{{ .Name }}</a> |
|
||||
{{ end }}
|
||||
</nav>
|
||||
</header>
|
||||
{{ end }}
|
||||
</div>
|
||||
<button class="site__theme-btn" aria-label="theme-toggle" onclick="const theme = window.localStorage.getItem('theme') == 'dark' ? 'light' : 'dark'; window.localStorage.setItem('theme', theme); document.documentElement.dataset.theme = theme">{{ i18n "theme_toggle" }}</button>
|
||||
</nav>
|
||||
|
||||
@ -1,12 +1,23 @@
|
||||
:root {
|
||||
--background: #000000;
|
||||
--background-light: #cecccc;
|
||||
--foreground: #ffffff;
|
||||
--fontSize: 1.25rem;
|
||||
--verticalRhythm: 2rem;
|
||||
html:root {
|
||||
--foreground: #000000;
|
||||
--foreground-light: #363537;
|
||||
--background: #ffffff;
|
||||
--background-light: #E6E6E6;
|
||||
--grey: #454545;
|
||||
--fontFamily: serif;
|
||||
--fontSize: 1.7vw;
|
||||
--verticalRhythm: 24px;
|
||||
--contentWidth: 900px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"]:root {
|
||||
--foreground: #FFFFFF;
|
||||
--foreground-light: #E6E6E6;
|
||||
--background: #000000;
|
||||
--background-light: #363537;
|
||||
--grey: #919191;
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -15,36 +26,61 @@ html {
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--fontFamily);
|
||||
font-size: var(--fontSize);
|
||||
line-height: var(--verticalRhythm);
|
||||
margin: 0 auto;
|
||||
max-width: var(--contentWidth);
|
||||
padding: 1rem;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
body {
|
||||
font-size: var(--fontSize);
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: var(--verticalRhythm) auto;
|
||||
}
|
||||
|
||||
nav > * {
|
||||
background: var(--background-light);
|
||||
padding: 0.5rem;
|
||||
article h2 {
|
||||
margin-top: calc(var(--verticalRhythm) * 3);
|
||||
}
|
||||
|
||||
article h3 {
|
||||
margin-top: calc(var(--verticalRhythm) * 2);
|
||||
}
|
||||
|
||||
|
||||
/* Text formatting */
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3AA2BF;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #AC5A82;
|
||||
}
|
||||
|
||||
dd, li, p, td {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
dd, p {
|
||||
margin-top: var(--verticalRhythm);
|
||||
margin-bottom: var(--verticalRhythm);
|
||||
}
|
||||
|
||||
table, thead, tbody {
|
||||
border: var(--background) solid 1px;
|
||||
border: var(--foreground) solid 1px;
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: var(--background) solid 1px;
|
||||
border: var(--foreground) solid 1px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@ -53,20 +89,84 @@ tr:nth-child(even) {
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1rem;
|
||||
background: var(--background-light);
|
||||
border: var(--background) solid 1px;
|
||||
line-height: 1.5;
|
||||
margin-top: var(--verticalRhythm);
|
||||
margin-bottom: var(--verticalRhythm);
|
||||
padding: calc(var(--verticalRhythm) / 2);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
aside {
|
||||
--vertical-rhythm-reduction: 0.2;
|
||||
color: var(--grey);
|
||||
border: 1px solid var(--grey);
|
||||
border-left: 3px solid var(--grey);
|
||||
font-size: calc(var(--fontSize) * (1 - var(--vertical-rhythm-reduction)));
|
||||
line-height: calc(var(--verticalRhythm) * (1 + var(--vertical-rhythm-reduction)));
|
||||
margin: var(--verticalRhythm) 0;
|
||||
padding: calc(var(--verticalRhythm) / 2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Multimedia blocks */
|
||||
img, video, audio, iframe {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-bottom: calc(var(--verticalRhythm) * 2);
|
||||
}
|
||||
|
||||
svg {
|
||||
--size: var(--fontSize);
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
/* Layout styles. */
|
||||
.site__title {
|
||||
display: inline-block;
|
||||
font-size: calc(var(--fontSize) * 2);
|
||||
margin-bottom: var(--verticalRhythm);
|
||||
margin-right: calc(var(--verticalRhythm) / 2);
|
||||
}
|
||||
|
||||
.site__links {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.site__theme-btn {
|
||||
background: unset;
|
||||
border: var(--foreground) solid 1px;
|
||||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
padding: calc(var(--verticalRhythm) / 2);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
@ -77,18 +177,44 @@ footer {
|
||||
margin: var(--verticalRhythm);
|
||||
}
|
||||
|
||||
.page-item {
|
||||
padding: 0.5rem;
|
||||
border: var(--background) solid 1px;
|
||||
}
|
||||
|
||||
.post {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: var(--verticalRhythm);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: calc(var(--fontSize) * 2.5);
|
||||
line-height: calc(var(--fontSize) * 3);
|
||||
.post h1 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post__meta > * {
|
||||
margin: calc(var(--verticalRhythm) / 2) auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin: 0.25rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile styles */
|
||||
@media (max-width: 860px) {
|
||||
html:root {
|
||||
--fontSize: 18px;
|
||||
}
|
||||
|
||||
.post {
|
||||
align-items: unset;
|
||||
flex-flow: column;
|
||||
margin-bottom: var(--verticalRhythm);
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1000px) {
|
||||
html:root {
|
||||
--fontSize: 24px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user