Browse Source

First public release

master
Paweł Romanowski 4 years ago
commit
deee53f745
  1. 3
      .gitignore
  2. 15
      .travis.yml
  3. 45
      LICENSE-Hack.md
  4. 47
      LICENSE.md
  5. 335
      README.md
  6. 70
      config.toml
  7. 4
      content/_index.md
  8. 26
      content/i-dont-like-javascript.md
  9. 19
      content/learning-javascript.md
  10. 19
      content/more-ranting.md
  11. 3
      content/pages/_index.md
  12. 6
      content/pages/about.md
  13. 5
      content/pages/archive.md
  14. 98
      content/terminimal-theme.md
  15. 19
      content/zola-is-nice.md
  16. 92
      sass/buttons.scss
  17. 3
      sass/color/background_blue.scss
  18. 5
      sass/color/background_dark.scss
  19. 3
      sass/color/background_green.scss
  20. 3
      sass/color/background_orange.scss
  21. 3
      sass/color/background_pink.scss
  22. 3
      sass/color/background_red.scss
  23. 9
      sass/color/blue.scss
  24. 9
      sass/color/green.scss
  25. 9
      sass/color/orange.scss
  26. 9
      sass/color/pink.scss
  27. 9
      sass/color/red.scss
  28. 33
      sass/font-hack-subset.scss
  29. 33
      sass/font-hack.scss
  30. 64
      sass/footer.scss
  31. 96
      sass/header.scss
  32. 8
      sass/logo.scss
  33. 252
      sass/main.scss
  34. 77
      sass/pagination.scss
  35. 134
      sass/post.scss
  36. 8
      sass/style.scss
  37. 2
      sass/variables.scss
  38. BIN
      screenshot/screenshot.png
  39. BIN
      static/fonts/hack-bold-subset.woff
  40. BIN
      static/fonts/hack-bold-subset.woff2
  41. BIN
      static/fonts/hack-bold.woff
  42. BIN
      static/fonts/hack-bold.woff2
  43. BIN
      static/fonts/hack-bolditalic-subset.woff
  44. BIN
      static/fonts/hack-bolditalic-subset.woff2
  45. BIN
      static/fonts/hack-bolditalic.woff
  46. BIN
      static/fonts/hack-bolditalic.woff2
  47. BIN
      static/fonts/hack-italic-subset.woff
  48. BIN
      static/fonts/hack-italic-subset.woff2
  49. BIN
      static/fonts/hack-italic.woff
  50. BIN
      static/fonts/hack-italic.woff2
  51. BIN
      static/fonts/hack-regular-subset.woff
  52. BIN
      static/fonts/hack-regular-subset.woff2
  53. BIN
      static/fonts/hack-regular.woff
  54. BIN
      static/fonts/hack-regular.woff2
  55. 11
      templates/archive.html
  56. 113
      templates/index.html
  57. 3
      templates/macros/date.html
  58. 26
      templates/macros/head.html
  59. 31
      templates/macros/menu.html
  60. 96
      templates/macros/post.html
  61. 9
      templates/page.html
  62. 8
      templates/shortcodes/figure.html
  63. 3
      templates/shortcodes/image.html
  64. 17
      templates/tags/list.html
  65. 16
      templates/tags/single.html
  66. 45
      theme.toml

3
.gitignore vendored

@ -0,0 +1,3 @@
.idea/
public

15
.travis.yml

@ -0,0 +1,15 @@
dist: xenial
before_install:
- sudo snap install --edge --classic zola
before_script:
- zola build
deploy:
provider: pages
skip-cleanup: true
github-token: $GITHUB_TOKEN
keep-history: true
local-dir: public
verbose: true

45
LICENSE-Hack.md

@ -0,0 +1,45 @@
The work in the Hack project is Copyright 2018 Source Foundry Authors and licensed under the MIT License
The work in the DejaVu project was committed to the public domain.
Bitstream Vera Sans Mono Copyright 2003 Bitstream Inc. and licensed under the Bitstream Vera License with Reserved Font Names "Bitstream" and "Vera"
### MIT License
Copyright (c) 2018 Source Foundry Authors
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:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
### BITSTREAM VERA LICENSE
Copyright (c) 2003 by Bitstream, Inc. All Rights Reserved. Bitstream Vera is a trademark of Bitstream, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of the fonts accompanying this license ("Fonts") and associated documentation files (the "Font Software"), to reproduce and distribute the Font Software, including without limitation the rights to use, copy, merge, publish, distribute, and/or sell copies of the Font Software, and to permit persons to whom the Font Software is furnished to do so, subject to the following conditions:
The above copyright and trademark notices and this permission notice shall be included in all copies of one or more of the Font Software typefaces.
The Font Software may be modified, altered, or added to, and in particular the designs of glyphs or characters in the Fonts may be modified and additional glyphs or characters may be added to the Fonts, only if the fonts are renamed to names not containing either the words "Bitstream" or the word "Vera".
This License becomes null and void to the extent applicable to Fonts or Font Software that has been modified and is distributed under the "Bitstream Vera" names.
The Font Software may be sold as part of a larger software package but no copy of one or more of the Font Software typefaces may be sold by itself.
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL BITSTREAM OR THE GNOME FOUNDATION BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
Except as contained in this notice, the names of Gnome, the Gnome Foundation, and Bitstream Inc., shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Font Software without prior written authorization from the Gnome Foundation or Bitstream Inc., respectively. For further information, contact: fonts at gnome dot org.

47
LICENSE.md

@ -0,0 +1,47 @@
MIT License
Copyright (c) 2019 Paweł Romanowski
Copyright (c) 2019 panr
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:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
---
For hugo-theme-terminal:
The MIT License (MIT)
Copyright (c) 2019 panr
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:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

335
README.md

@ -0,0 +1,335 @@
# Terminimal
![No JavaScript](https://img.shields.io/badge/JavaScript-none-brightgreen.svg)
![Screenshot](../blob/master/screenshot/screenshot.png?raw=true)
Fork (not a port) of "Terminal" Hugo theme
by Radosław Kozieł (aka. panr):
https://github.com/panr/hugo-theme-terminal
Many thanks for that outstanding original theme, Radek!
## Changes compared to the original theme
- Slight changes in the layout and styling.
- Content has been centered (instead of left-aligned).
- The header stripes have been spaced out.
- Tweaks to pagination, especially on mobile (small screens).
- The post title underline is now dashed instead of doubly-dotted.
- All links are underscored, as per
[Brutalist Web Design Guidelines](https://www.brutalist-web.design/).
- Tweaks to header font sizes.
- Minor footer tweaks.
- Absolutely **no JavaScript**.
- No JavaScript needed to pre-process anything.
Zola with it's Sass pre-processor is the only dependency.
- There's no menu trigger.
- Things load crazy fast, as it's all static content.
- Prism.js syntax highlighting is not supported (you can use
[Zola's](https://www.getzola.org/documentation/content/syntax-highlighting/)).
- All references to social media (e.g. Twitter, OpenGraph) have been removed.
- All references to external URLs (e.g. Google CDN) have been removed.
This theme's static assets are meant to be served from where it's hosted.
- [Hack](https://github.com/source-foundry/Hack) is the default font.
- The default color theme is blue (original uses orange).
### New features
- You can pick the accent color as well as background color.
There's a new `dark` background. See [Configuration](#configuration)
below for details.
- Active "section" links will change color indicating the
active section. This is all static, done at template level.
## Features retained from the original
- 5 color themes, depending on your preference:
blue (default), green, orange, pink, red.
- The shortcodes `image` and `figure` (See [Shortcodes](#shortcodes)).
- Fully responsive.
## How to start
Option A: clone the theme directly into your Zola site folder:
```
$ git clone https://github.com/pawroman/zola-theme-terminimal.git themes/terminimal
```
You can also include it as a git submodule (it's better if you plan to use CI builders):
```
$ git submodule add https://github.com/pawroman/zola-theme-terminimal.git themes/terminal
```
Then in your `config.toml` set:
```toml
theme = "terminimal"
# Sass compilation is required
compile_sass = true
```
Also see the Zola documentation on using themes:
https://www.getzola.org/documentation/themes/installing-and-using-themes/
## Shortcodes
The theme adds two custom shortcodes related to image handling.
### `image`
Used to show images.
Required arguments:
- **`src`**
Optional arguments:
- **`alt`**
- **`position`** (center \[default\] | left | right)
- **`style`**
Example:
```
{{ image(src="/img/hello.png", alt="Hello Friend",
position="left", style="border-radius: 8px;") }}
```
### `figure`
Same as `image`, but with a few extra optional arguments:
- **`caption`**
- **`caption_position`** (center \[default\] | left | right)
- **`caption_style`**
Example:
```
{{ figure(src="http://rustacean.net/assets/rustacean-flat-gesture.png",
style="width: 25%;",
position="right"
caption_position="left",
caption="Ferris, the (unofficial) Rust mascot",
caption_style="font-weight: bold; font-style: italic;") }}
```
## Configuration
### Colors
Both the accent colors and background colors are
configurable.
By default, both accent and background are set
to `blue`.
To configure menu, add this in `[extra]` section
of your `config.toml`:
```toml
[extra]
# One of: blue, green, orange, pink, red.
# Defaults to blue.
accent_color = "green"
# One of: blue, dark, green, orange, pink, red.
# Enabling dark background will also modify primary font color
# to be darker.
# Defaults to accent color (or, if not accent color specified, to blue).
background_color = "dark"
```
### Logo text and link
You can set the "logo" text and what it links to,
by modifying `config.toml` like so:
```toml
[extra]
# The logo text - defaults to "Terminimal theme"
logo_text = "My blog"
# The logo link - defaults to base_url.
logo_home_link = "/take/me/away!"
```
### Author and copyright
You can set the footer's copyright author name like this:
```toml
[extra]
# Author name: when specified, modifies the default
# copyright text. Apart from author, it will
# contain current year and a link to the theme.
author = "My Name"
```
If you don't like the default copyright text,
you can set it to completely custom HTML:
```toml
[extra]
# Copyright text in HTML format. If specified,
# entirely replaces default copyright and author.
copyright_html = "My custom&nbsp;<b>copyright</b>"
```
### Menu
The menu is optional, static (all items are always shown,
no matter what the screen size) and fully user-configurable.
To configure menu, add this in `[extra]` section
of your `config.toml`:
```toml
[extra]
# menu is enabled by adding menu_items (optional)
menu_items = [
# each of these is optional, name and url are required
{name = "blog", url = "/"},
# tags should only be enabled if you have "tags" taxonomy
# see documentation below for more details
{name = "tags", url = "/tags"},
{name = "archive", url = "/archive"},
{name = "about me", url = "/about"},
# set newtab to true to make the link open in new tab
{name = "github", url = "url-to-your-github", newtab = true},
]
```
### Tags
The theme optionally supports tags. To enable them, create
a "tags" taxonomy in your `config.toml`:
```toml
taxonomies = [
{name = "tags"},
]
```
Enabling tags will create a new `/tags` page, and
cause them to show up in `archive` section. Note
that you still need to create a menu link to the tags
page manually.
### Pagination
Pagination is fully supported for post list (main site)
and intra-post (you can navigate to earlier and later posts).
To make sure pagination works properly, you must first configure
it in `content/_index.md`:
```toml
+++
# number of pages to paginate by
paginate_by = 2
# sorting order for pagination
sort_by = "date"
+++
```
Then, tweak the theme's pagination config in `config.toml`:
```toml
[extra]
# Whether to show links to earlier and later posts
# on each post page (defaults to true).
enable_post_view_navigation = true
# The text shown at the bottom of a post,
# before earlier/later post links.
# Defaults to "Thanks for reading! Read other posts?"
post_view_navigation_prompt = "Read more"
```
### Language code
Internationalization / translation is not supported
but you can set the HTML language code for your
site:
```toml
default_language = "en"
```
### Hack font subset
By default, the theme uses a subset of the Hack font.
This results in much smaller transfer sizes, but
might not contain all the Unicode characters you need.
You can enable full unicode support in `config.toml`:
```toml
[extra]
# Use full Hack character set, not just a subset.
# Switch this to true if you need full unicode support.
# Defaults to false.
use_full_hack_font = false
```
Also see [Hack's docs](https://github.com/source-foundry/Hack/blob/master/docs/WEBFONT_USAGE.md).
All the configuration options are also described in
[`config.toml`](../blob/master/config.toml).
## Extending
Each of the templates defines named blocks, so
it should be quite easy to customize the most common things.
For example, if you want to add extra `<meta>` tags to the
base template, `index.html`, create file like this in `templates/index.html`:
```html
{% extends "terminimal/templates/index.html" %}
{% block extra_head %}
<meta name="description" content="My awesome website"/>
<meta name="keywords" content="Hacking,Programming,Ranting"/>
{% endblock %}
```
## How to contribute
If you spot any bugs or wish to contribute new features, please create a new
[Pull Request](https://github.com/pawroman/zola-theme-terminimal/pulls).
## License
Copyright © 2019 Paweł Romanowski (pawroman)
Original theme: Copyright © 2019 Radosław Kozieł ([@panr](https://twitter.com/panr))
The theme is released under the MIT License.
Check the [license file](../blob/master/LICENSE.md)
for more information.
The license for Hack fonts used is included in
[LICENSE-Hack.md](../blob/master/LICENSE-Hack.md).

70
config.toml

@ -0,0 +1,70 @@
base_url = "https://pawroman.github.io/zola-theme-terminimal"
title = "Zola Terminimal theme"
# Sass compilation is required
compile_sass = true
# Optional: enable tags
taxonomies = [
{name = "tags"}
]
# Code highlighting
highlight_code = true
highlight_theme = "boron"
[extra]
# One of: blue, green, orange, pink, red.
# Defaults to blue.
accent_color = "orange"
# One of: blue, dark, green, orange, pink, red.
# Enabling dark background will also modify primary font color
# to be darker.
# Defaults to accent color (or, if not accent color specified, to blue).
background_color = "orange"
# The logo text - defaults to "Terminimal theme"
logo_text = "Terminimal theme"
# The logo link - defaults to base_url.
#logo_home_link = "/take/me/away!"
# Author name: when specified, modifies the default
# copyright text. Apart from author, it will
# contain current year and a link to the theme.
#author = "My Name"
# Copyright text in HTML format. If specified,
# entirely replaces default copyright and author.
#copyright_html = "My custom&nbsp;<b>copyright</b>"
# menu is enabled by adding menu_items (optional)
menu_items = [
# each of these is optional, name and url are required
{name = "blog", url = "/"},
# tags should only be enabled if you have "tags" taxonomy
# see documentation below for more details
{name = "tags", url = "/tags"},
{name = "archive", url = "/archive"},
{name = "about me", url = "/about"},
# set newtab to true to make the link open in new tab
{name = "github", url = "https://github.com/pawroman/zola-theme-terminimal", newtab = true},
]
# Whether to show links to earlier and later posts
# on each post page (defaults to true).
enable_post_view_navigation = true
# The text shown at the bottom of a post,
# before earlier/later post links.
# Defaults to "Thanks for reading! Read other posts?"
post_view_navigation_prompt = "Thanks for reading! Read other posts?"
# Use full Hack character set, not just a subset.
# Switch this to true if you need full unicode support.
# Defaults to false.
use_full_hack_font = false

4
content/_index.md

@ -0,0 +1,4 @@
+++
paginate_by = 2
sort_by = "date"
+++

26
content/i-dont-like-javascript.md

@ -0,0 +1,26 @@
+++
title = "I don't like JavaScript"
date = 2019-02-02
[taxonomies]
tags = ["javascript", "rant"]
+++
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien.
[wtfjs.com](https://wtfjs.com)
```javascript
>>> [1, 2, 3, 15, 30, 7, 5, 45, 60].sort()
[1, 15, 2, 3, 30, 45, 5, 60, 7]
```
<!-- more -->
Ut luctus dolor ut tortor hendrerit, sed hendrerit augue scelerisque. Suspendisse quis sodales dui, at tempus ante. Nulla at tempor metus. Aliquam vitae rutrum diam. Curabitur iaculis massa dui, quis varius nulla finibus a. Praesent eu blandit justo. Suspendisse pharetra, arcu in rhoncus rutrum, magna magna viverra erat, eget vestibulum enim tellus id dui. Nunc vel dui et arcu posuere maximus. Mauris quam quam, bibendum sed libero nec, tempus hendrerit arcu. Suspendisse sed gravida orci. Fusce tempor arcu ac est pretium porttitor. Aenean consequat risus venenatis sem aliquam, at sollicitudin nulla semper. Aenean bibendum cursus hendrerit. Nulla congue urna nec finibus bibendum. Donec porta tincidunt ligula non ultricies.
Sed vulputate tristique elit, eget pharetra elit sodales sed. Proin dignissim ipsum lorem, at porta eros malesuada sed. Proin tristique eros eu quam ornare, suscipit luctus mauris lobortis. Phasellus ut placerat enim. Donec egestas faucibus maximus. Nam quis efficitur eros. Cras tincidunt, lacus ac pretium porta, dui dolor varius elit, eget laoreet justo justo vitae metus. Morbi eget nisi ut ex scelerisque lobortis ut in lorem. Vestibulum et lorem quis ipsum feugiat varius. Mauris nec nulla viverra nisi porttitor efficitur. Morbi vel purus eleifend, finibus erat non, placerat ipsum. Mauris et augue vel nisi volutpat aliquam. Curabitur malesuada tortor est, at condimentum neque eleifend in.
Morbi id ornare lacus. Suspendisse ultrices rutrum posuere. Nullam porttitor libero quis ligula finibus semper. Mauris iaculis magna et nisl tristique, eget maximus ex feugiat. Nam eu felis leo. Quisque ultrices varius purus in molestie. Duis non accumsan ligula. Vivamus dignissim malesuada metus, vel hendrerit tellus viverra id. Curabitur posuere, mauris vitae dignissim dictum, velit mi condimentum lorem, nec varius velit arcu a mi. In dolor sapien, condimentum sed aliquam at, dignissim id purus. Cras lorem leo, vulputate ac ante sed, molestie tempus lectus. Curabitur efficitur libero quam, rhoncus faucibus libero pharetra nec. Curabitur lobortis ullamcorper nisl eu imperdiet. Duis porttitor interdum magna, ac eleifend orci consequat vitae. Aliquam augue felis, faucibus vel blandit sed, maximus non turpis.
Quisque viverra a eros id auctor. Proin id nibh ut nisl dignissim pellentesque et ac mi. Nullam mattis urna quis consequat bibendum. Donec pretium dui elit, a semper purus tristique et. Mauris euismod nisl eu vehicula facilisis. Maecenas facilisis non massa non scelerisque. Integer malesuada cursus erat eu viverra. Duis ligula mi, eleifend vel justo id, laoreet porttitor ex. Etiam ultricies lacus lorem, sed aliquam nulla blandit in. Maecenas vel facilisis neque, vitae fringilla eros. In justo nibh, pellentesque sed faucibus nec, varius sit amet risus.

19
content/learning-javascript.md

@ -0,0 +1,19 @@
+++
title = "Learning JavaScript"
date = 2019-01-03
[taxonomies]
tags = ["javascript"]
+++
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien. Aenean ligula nunc, laoreet id sem in, interdum bibendum felis. Donec vel dui neque. Praesent ac sem ut justo volutpat rutrum a imperdiet tellus. Nam lobortis massa non hendrerit hendrerit. Vivamus porttitor dignissim turpis, eget aliquam urna tincidunt non. Aliquam et fringilla turpis. Nullam eros est, eleifend in ornare sed, hendrerit eget est. Aliquam tellus felis, suscipit vitae ex vel, fringilla tempus massa. Nulla facilisi. Pellentesque lobortis consequat lectus. Maecenas ac libero elit.
<!-- more -->
Ut luctus dolor ut tortor hendrerit, sed hendrerit augue scelerisque. Suspendisse quis sodales dui, at tempus ante. Nulla at tempor metus. Aliquam vitae rutrum diam. Curabitur iaculis massa dui, quis varius nulla finibus a. Praesent eu blandit justo. Suspendisse pharetra, arcu in rhoncus rutrum, magna magna viverra erat, eget vestibulum enim tellus id dui. Nunc vel dui et arcu posuere maximus. Mauris quam quam, bibendum sed libero nec, tempus hendrerit arcu. Suspendisse sed gravida orci. Fusce tempor arcu ac est pretium porttitor. Aenean consequat risus venenatis sem aliquam, at sollicitudin nulla semper. Aenean bibendum cursus hendrerit. Nulla congue urna nec finibus bibendum. Donec porta tincidunt ligula non ultricies.
Sed vulputate tristique elit, eget pharetra elit sodales sed. Proin dignissim ipsum lorem, at porta eros malesuada sed. Proin tristique eros eu quam ornare, suscipit luctus mauris lobortis. Phasellus ut placerat enim. Donec egestas faucibus maximus. Nam quis efficitur eros. Cras tincidunt, lacus ac pretium porta, dui dolor varius elit, eget laoreet justo justo vitae metus. Morbi eget nisi ut ex scelerisque lobortis ut in lorem. Vestibulum et lorem quis ipsum feugiat varius. Mauris nec nulla viverra nisi porttitor efficitur. Morbi vel purus eleifend, finibus erat non, placerat ipsum. Mauris et augue vel nisi volutpat aliquam. Curabitur malesuada tortor est, at condimentum neque eleifend in.
Morbi id ornare lacus. Suspendisse ultrices rutrum posuere. Nullam porttitor libero quis ligula finibus semper. Mauris iaculis magna et nisl tristique, eget maximus ex feugiat. Nam eu felis leo. Quisque ultrices varius purus in molestie. Duis non accumsan ligula. Vivamus dignissim malesuada metus, vel hendrerit tellus viverra id. Curabitur posuere, mauris vitae dignissim dictum, velit mi condimentum lorem, nec varius velit arcu a mi. In dolor sapien, condimentum sed aliquam at, dignissim id purus. Cras lorem leo, vulputate ac ante sed, molestie tempus lectus. Curabitur efficitur libero quam, rhoncus faucibus libero pharetra nec. Curabitur lobortis ullamcorper nisl eu imperdiet. Duis porttitor interdum magna, ac eleifend orci consequat vitae. Aliquam augue felis, faucibus vel blandit sed, maximus non turpis.
Quisque viverra a eros id auctor. Proin id nibh ut nisl dignissim pellentesque et ac mi. Nullam mattis urna quis consequat bibendum. Donec pretium dui elit, a semper purus tristique et. Mauris euismod nisl eu vehicula facilisis. Maecenas facilisis non massa non scelerisque. Integer malesuada cursus erat eu viverra. Duis ligula mi, eleifend vel justo id, laoreet porttitor ex. Etiam ultricies lacus lorem, sed aliquam nulla blandit in. Maecenas vel facilisis neque, vitae fringilla eros. In justo nibh, pellentesque sed faucibus nec, varius sit amet risus.

19
content/more-ranting.md

@ -0,0 +1,19 @@
+++
title = "More ranting"
date = 2019-02-03
[taxonomies]
tags = ["rant"]
+++
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien. Aenean ligula nunc, laoreet id sem in, interdum bibendum felis. Donec vel dui neque. Praesent ac sem ut justo volutpat rutrum a imperdiet tellus. Nam lobortis massa non hendrerit hendrerit. Vivamus porttitor dignissim turpis, eget aliquam urna tincidunt non. Aliquam et fringilla turpis. Nullam eros est, eleifend in ornare sed, hendrerit eget est. Aliquam tellus felis, suscipit vitae ex vel, fringilla tempus massa. Nulla facilisi. Pellentesque lobortis consequat lectus. Maecenas ac libero elit.
<!-- more -->
Ut luctus dolor ut tortor hendrerit, sed hendrerit augue scelerisque. Suspendisse quis sodales dui, at tempus ante. Nulla at tempor metus. Aliquam vitae rutrum diam. Curabitur iaculis massa dui, quis varius nulla finibus a. Praesent eu blandit justo. Suspendisse pharetra, arcu in rhoncus rutrum, magna magna viverra erat, eget vestibulum enim tellus id dui. Nunc vel dui et arcu posuere maximus. Mauris quam quam, bibendum sed libero nec, tempus hendrerit arcu. Suspendisse sed gravida orci. Fusce tempor arcu ac est pretium porttitor. Aenean consequat risus venenatis sem aliquam, at sollicitudin nulla semper. Aenean bibendum cursus hendrerit. Nulla congue urna nec finibus bibendum. Donec porta tincidunt ligula non ultricies.
Sed vulputate tristique elit, eget pharetra elit sodales sed. Proin dignissim ipsum lorem, at porta eros malesuada sed. Proin tristique eros eu quam ornare, suscipit luctus mauris lobortis. Phasellus ut placerat enim. Donec egestas faucibus maximus. Nam quis efficitur eros. Cras tincidunt, lacus ac pretium porta, dui dolor varius elit, eget laoreet justo justo vitae metus. Morbi eget nisi ut ex scelerisque lobortis ut in lorem. Vestibulum et lorem quis ipsum feugiat varius. Mauris nec nulla viverra nisi porttitor efficitur. Morbi vel purus eleifend, finibus erat non, placerat ipsum. Mauris et augue vel nisi volutpat aliquam. Curabitur malesuada tortor est, at condimentum neque eleifend in.
Morbi id ornare lacus. Suspendisse ultrices rutrum posuere. Nullam porttitor libero quis ligula finibus semper. Mauris iaculis magna et nisl tristique, eget maximus ex feugiat. Nam eu felis leo. Quisque ultrices varius purus in molestie. Duis non accumsan ligula. Vivamus dignissim malesuada metus, vel hendrerit tellus viverra id. Curabitur posuere, mauris vitae dignissim dictum, velit mi condimentum lorem, nec varius velit arcu a mi. In dolor sapien, condimentum sed aliquam at, dignissim id purus. Cras lorem leo, vulputate ac ante sed, molestie tempus lectus. Curabitur efficitur libero quam, rhoncus faucibus libero pharetra nec. Curabitur lobortis ullamcorper nisl eu imperdiet. Duis porttitor interdum magna, ac eleifend orci consequat vitae. Aliquam augue felis, faucibus vel blandit sed, maximus non turpis.
Quisque viverra a eros id auctor. Proin id nibh ut nisl dignissim pellentesque et ac mi. Nullam mattis urna quis consequat bibendum. Donec pretium dui elit, a semper purus tristique et. Mauris euismod nisl eu vehicula facilisis. Maecenas facilisis non massa non scelerisque. Integer malesuada cursus erat eu viverra. Duis ligula mi, eleifend vel justo id, laoreet porttitor ex. Etiam ultricies lacus lorem, sed aliquam nulla blandit in. Maecenas vel facilisis neque, vitae fringilla eros. In justo nibh, pellentesque sed faucibus nec, varius sit amet risus.

3
content/pages/_index.md

@ -0,0 +1,3 @@
+++
render = false
+++

6
content/pages/about.md

@ -0,0 +1,6 @@
+++
title = "about me"
path = "about"
+++
Hello, World!

5
content/pages/archive.md

@ -0,0 +1,5 @@
+++
path = "archive"
template = "archive.html"
title = "blog archive (all posts)"
+++

98
content/terminimal-theme.md

@ -0,0 +1,98 @@
+++
title = "Terminimal Theme for Zola"
date = 2019-02-04
[taxonomies]
tags = ["zola", "theme", "showcase"]
+++
Welcome to Terminimal! This is a theme showcase post.
Code block (using "boron" theme):
```python
#!/usr/bin/python3
class HelloPrinter:
def __init__(self, thing):
self.thing = thing
def __call__(self):
print(f"Hello, {self.thing}!")
printer = HelloPrinter("World")
printer()
# prints: Hello, World!
```
Inline code: `print("Hello world!")`.
Basic typography:
*Italic text*. **Bold text**. _**Italic bold**_. Link: [click me](#)
# Header 1
## Header 2
### Header 3
#### Header 4
Quote:
> "Theory is when you know everything but nothing works.
Practice is when everything works but no one knows why.
In our lab, theory and practice are combined: nothing works and no one knows why."
Lists:
- A
- B
- CDEF
1. One
2. Two
3. Three
Horizontal line:
---
This is where the post summary ends.
<!-- more -->
The second part follows here.
## Shortcodes
`figure` shortcode:
```
figure(src="http://rustacean.net/assets/rustacean-flat-gesture.png",
style="width: 25%;",
position="center"
caption_position="left",
caption="Ferris, the (unofficial) Rust mascot"
caption_style="font-weight: bold; font-style: italic;")
```
{{ figure(src="http://rustacean.net/assets/rustacean-flat-gesture.png",
style="width: 25%;",
position="center",
caption_position="left",
caption="Ferris, the (unofficial) Rust mascot",
caption_style="font-weight: bold; font-style: italic;") }}
---
`image` shortcode:
```
image(src="https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg",
position="left")
```
{{ image(src="https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg",
position="left") }}

19
content/zola-is-nice.md

@ -0,0 +1,19 @@
+++
title = "Zola is nice"
date = 2019-02-01
[taxonomies]
tags = ["zola", "nice"]
+++
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat sapien. Aenean ligula nunc, laoreet id sem in, interdum bibendum felis. Donec vel dui neque. Praesent ac sem ut justo volutpat rutrum a imperdiet tellus. Nam lobortis massa non hendrerit hendrerit. Vivamus porttitor dignissim turpis, eget aliquam urna tincidunt non. Aliquam et fringilla turpis. Nullam eros est, eleifend in ornare sed, hendrerit eget est. Aliquam tellus felis, suscipit vitae ex vel, fringilla tempus massa. Nulla facilisi. Pellentesque lobortis consequat lectus. Maecenas ac libero elit.
<!-- more -->
Ut luctus dolor ut tortor hendrerit, sed hendrerit augue scelerisque. Suspendisse quis sodales dui, at tempus ante. Nulla at tempor metus. Aliquam vitae rutrum diam. Curabitur iaculis massa dui, quis varius nulla finibus a. Praesent eu blandit justo. Suspendisse pharetra, arcu in rhoncus rutrum, magna magna viverra erat, eget vestibulum enim tellus id dui. Nunc vel dui et arcu posuere maximus. Mauris quam quam, bibendum sed libero nec, tempus hendrerit arcu. Suspendisse sed gravida orci. Fusce tempor arcu ac est pretium porttitor. Aenean consequat risus venenatis sem aliquam, at sollicitudin nulla semper. Aenean bibendum cursus hendrerit. Nulla congue urna nec finibus bibendum. Donec porta tincidunt ligula non ultricies.
Sed vulputate tristique elit, eget pharetra elit sodales sed. Proin dignissim ipsum lorem, at porta eros malesuada sed. Proin tristique eros eu quam ornare, suscipit luctus mauris lobortis. Phasellus ut placerat enim. Donec egestas faucibus maximus. Nam quis efficitur eros. Cras tincidunt, lacus ac pretium porta, dui dolor varius elit, eget laoreet justo justo vitae metus. Morbi eget nisi ut ex scelerisque lobortis ut in lorem. Vestibulum et lorem quis ipsum feugiat varius. Mauris nec nulla viverra nisi porttitor efficitur. Morbi vel purus eleifend, finibus erat non, placerat ipsum. Mauris et augue vel nisi volutpat aliquam. Curabitur malesuada tortor est, at condimentum neque eleifend in.
Morbi id ornare lacus. Suspendisse ultrices rutrum posuere. Nullam porttitor libero quis ligula finibus semper. Mauris iaculis magna et nisl tristique, eget maximus ex feugiat. Nam eu felis leo. Quisque ultrices varius purus in molestie. Duis non accumsan ligula. Vivamus dignissim malesuada metus, vel hendrerit tellus viverra id. Curabitur posuere, mauris vitae dignissim dictum, velit mi condimentum lorem, nec varius velit arcu a mi. In dolor sapien, condimentum sed aliquam at, dignissim id purus. Cras lorem leo, vulputate ac ante sed, molestie tempus lectus. Curabitur efficitur libero quam, rhoncus faucibus libero pharetra nec. Curabitur lobortis ullamcorper nisl eu imperdiet. Duis porttitor interdum magna, ac eleifend orci consequat vitae. Aliquam augue felis, faucibus vel blandit sed, maximus non turpis.
Quisque viverra a eros id auctor. Proin id nibh ut nisl dignissim pellentesque et ac mi. Nullam mattis urna quis consequat bibendum. Donec pretium dui elit, a semper purus tristique et. Mauris euismod nisl eu vehicula facilisis. Maecenas facilisis non massa non scelerisque. Integer malesuada cursus erat eu viverra. Duis ligula mi, eleifend vel justo id, laoreet porttitor ex. Etiam ultricies lacus lorem, sed aliquam nulla blandit in. Maecenas vel facilisis neque, vitae fringilla eros. In justo nibh, pellentesque sed faucibus nec, varius sit amet risus.

92
sass/buttons.scss

@ -0,0 +1,92 @@
.button-container {
display: table;
margin-left: auto;
margin-right: auto;
}
button,
.button,
a.button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
margin-bottom: 5px;
text-align: center;
border-radius: 8px;
border: 1px solid transparent;
appearance: none;
cursor: pointer;
outline: none;
/* variants */
&.outline {
background: transparent;
box-shadow: none;
padding: 8px 18px;
:hover {
transform: none;
box-shadow: none;
}
}
&.primary {
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
&:hover {
box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08);
}
}
&.link {
background: none;
font-size: 1rem;
}
/* sizes */
&.small {
font-size: .8rem;
}
&.wide {
min-width: 200px;
padding: 14px 24px;
}
}
a.read-more,
a.read-more:hover,
a.read-more:active {
display: inline-flex;
background: none;
box-shadow: none;
padding: 0;
margin: 20px 0;
max-width: 100%;
}
.code-toolbar {
margin-bottom: 20px;
.toolbar-item a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 8px;
margin-bottom: 5px;
text-align: center;
font-size: 13px;
font-weight: 500;
border-radius: 8px;
border: 1px solid transparent;
appearance: none;
cursor: pointer;
outline: none;
}
}

3
sass/color/background_blue.scss

@ -0,0 +1,3 @@
:root {
--background: #1D212C;
}

5
sass/color/background_dark.scss

@ -0,0 +1,5 @@
:root {
--background: #101010;
--color: #A9B7C6;
}

3
sass/color/background_green.scss

@ -0,0 +1,3 @@
:root {
--background: #1F222A;
}

3
sass/color/background_orange.scss

@ -0,0 +1,3 @@
:root {
--background: #222129;
}

3
sass/color/background_pink.scss

@ -0,0 +1,3 @@
:root {
--background: #21202C;
}

3
sass/color/background_red.scss

@ -0,0 +1,3 @@
:root {
--background: #221F29;
}

9
sass/color/blue.scss

@ -0,0 +1,9 @@
:root {
--accent: rgb(35,176,255);
--accent-alpha-70: rgba(35,176,255,.7);
--accent-alpha-20: rgba(35,176,255,.2);
--background: #1D212C;
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

9
sass/color/green.scss

@ -0,0 +1,9 @@
:root {
--accent: rgb(120,226,160);
--accent-alpha-70: rgba(120,226,160,.7);
--accent-alpha-20: rgba(120,226,160,.2);
--background: #1F222A;
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

9
sass/color/orange.scss

@ -0,0 +1,9 @@
:root {
--accent: rgb(255,168,106);
--accent-alpha-70: rgba(255,168,106,.7);
--accent-alpha-20: rgba(255,168,106,.2);
--background: #222129;
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

9
sass/color/pink.scss

@ -0,0 +1,9 @@
:root {
--accent: rgb(238,114,241);
--accent-alpha-70: rgba(238,114,241,.7);
--accent-alpha-20: rgba(238,114,241,.2);
--background: #21202C;
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

9
sass/color/red.scss

@ -0,0 +1,9 @@
:root {
--accent: rgb(255,98,102);
--accent-alpha-70: rgba(255,98,102,.7);
--accent-alpha-20: rgba(255,98,102,.2);
--background: #221F29;
--color: white;
--border-color: rgba(255, 255, 255, .1);
}

33
sass/font-hack-subset.scss

@ -0,0 +1,33 @@
/*!
* Hack typeface https://github.com/source-foundry/Hack
* License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md
*/
/* FONT PATHS
* -------------------------- */
@font-face {
font-family: 'Hack';
src: url('fonts/hack-regular-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-regular-subset.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Hack';
src: url('fonts/hack-bold-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bold-subset.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Hack';
src: url('fonts/hack-italic-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-italic-webfont.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Hack';
src: url('fonts/hack-bolditalic-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bolditalic-subset.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: italic;
}

33
sass/font-hack.scss

@ -0,0 +1,33 @@
/*!
* Hack typeface https://github.com/source-foundry/Hack
* License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md
*/
/* FONT PATHS
* -------------------------- */
@font-face {
font-family: 'Hack';
src: url('fonts/hack-regular.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-regular.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Hack';
src: url('fonts/hack-bold.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bold.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Hack';
src: url('fonts/hack-italic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-italic.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Hack';
src: url('fonts/hack-bolditalic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bolditalic.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: italic;
}

64
sass/footer.scss

@ -0,0 +1,64 @@
@import "variables";
.footer {
padding: 40px 0;
flex-grow: 0;
opacity: .5;
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
width: 760px;
max-width: 100%;
@media (max-width: $tablet-max-width) {
flex-direction: column;
}
}
a {
color: inherit;
}
.copyright {
display: flex;
flex-direction: row;
align-items: center;
font-size: 1rem;
color: var(--light-color-secondary);
&--user {
margin: auto;
text-align: center;
}
& > *:first-child:not(:only-child) {
margin-right: 10px;
@media (max-width: $tablet-max-width) {
border: none;
padding: 0;
margin: 0;
}
}
@media (max-width: $tablet-max-width) {
flex-direction: column;
margin-top: 10px;
}
}
.copyright-theme-sep {
@media (max-width: $tablet-max-width) {
display: none;
}
}
.copyright-theme {
@media (max-width: $tablet-max-width) {
font-size: 0.75rem;
}
}
}

96
sass/header.scss

@ -0,0 +1,96 @@
@import "variables";
@mixin menu {
position: absolute;
background: var(--background);
box-shadow: var(--shadow);
color: white;
border: 2px solid;
margin: 0;
padding: 10px;
list-style: none;
z-index: 99;
}
.header {
display: flex;
flex-direction: column;
position: relative;
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
&__logo {
display: flex;
flex: 1;
&:after {
content: '';
background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 16px);
display: block;
width: 100%;
right: 10px;
}
a {
flex: 0 0 auto;
max-width: 100%;
}
}
.menu {
margin: 20px 0;
&__inner {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
li {
&.active {
color: var(--accent-alpha-70);
}
&:not(:last-of-type) {
margin-right: 20px;
margin-bottom: 10px;
flex: 0 0 auto;
}
}
}
&__sub-inner {
position: relative;
list-style: none;
padding: 0;
margin: 0;
&:not(:only-child) {
margin-left: 20px;
}
&-more {
@include menu;
top: 35px;
left: 0;
&-trigger {
color: var(--accent);
user-select: none;
cursor: pointer;
}
li {
margin: 0;
padding: 5px;
white-space: nowrap;
}
}
}
}
}

8
sass/logo.scss

@ -0,0 +1,8 @@
.logo {
display: flex;
align-items: center;
text-decoration: none;
background: var(--accent);
color: black;
padding: 5px 10px;
}

252
sass/main.scss

@ -0,0 +1,252 @@
@import "variables";
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
font-size: 1rem;
line-height: 1.54;
background-color: var(--background);
color: var(--color);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
@media (max-width: $phone-max-width) {
font-size: 1rem;
}
}
h1, h2, h3, h4, h5, h6 {
display: flex;
align-items: center;
font-weight: bold;
line-height: 1.3;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.3rem;
}
h3 {
font-size: 1.2rem;
}
h4, h5, h6 {
font-size: 1.15rem;
}
a {
color: inherit;
}
img {
display: block;
max-width: 100%;
&.left {
margin-right: auto;
}
&.center {
margin-left: auto;
margin-right: auto;
}
&.right {
margin-left: auto;
}
}
p {
margin-bottom: 20px;
}
figure {
display: table;
max-width: 100%;
margin: 25px 0;
&.left {
img {
margin-right: auto;
}
}
&.center {
img {
margin-left: auto;
margin-right: auto;
}
}
&.right {
img {
margin-left: auto;
}
}
figcaption {
font-size: 14px;
padding: 5px 10px;
margin-top: 5px;
background: var(--accent);
color: var(--background);
&.left {
text-align: left;
}
&.center {
text-align: center;
}
&.right {
text-align: right;
}
}
}
code {
font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
font-feature-settings: normal;
background: var(--accent-alpha-20);
padding: 1px 6px;
margin: 0 2px;
font-size: .95rem;
}
pre {
font-family: Hack, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
padding: 20px;
font-size: .95rem;
overflow: auto;
border-top: 1px solid rgba(255, 255, 255, .1);
border-bottom: 1px solid rgba(255, 255, 255, .1);
@media (max-width: $phone-max-width) {
white-space: pre-wrap;
word-wrap: break-word;
}
}
blockquote {
border-top: 1px solid var(--accent);
border-bottom: 1px solid var(--accent);
margin: 40px 0;
padding: 25px;
@media (max-width: $phone-max-width) {
padding-right: 0;
}
&:before {
content: '';
font-family: Georgia, serif;
font-size: 3.875rem;
position: absolute;
left: -40px;
top: -20px;
}
p:first-of-type {
margin-top: 0;
}
p:last-of-type {
margin-bottom: 0;
}
p {
position: relative;
}
p:before {
content: '>';
display: block;
position: absolute;
left: -25px;
color: var(--accent);
}
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin: 40px 0;
}
table, th, td {
border: 1px dashed var(--accent);
padding: 10px;
}
th {
color: var(--accent);
}
ul, ol {
margin-left: 30px;
padding: 0;
li {
position: relative;
}
@media (max-width: $phone-max-width) {
margin-left: 20px;
}
ul, ol {
margin-top: 20px;
}
}
ol ol {
list-style-type: lower-alpha;
}
.container {
display: flex;
flex-direction: column;
padding: 40px;
max-width: 864px;
min-height: 100vh;
margin: 0 auto;
@media (max-width: $phone-max-width) {
padding: 20px;
}
}
.content {
display: flex;
}
hr {
width: 100%;
border: none;
background: var(--border-color);
height: 1px;
}
.hidden {
display: none;
}

77
sass/pagination.scss

@ -0,0 +1,77 @@
@import 'variables';
.pagination {
margin-top: 50px;
&__title {
display: flex;
text-align: center;
position: relative;
margin: 100px 0 20px;
&-h {
text-align: center;
margin: 0 auto;
padding: 5px 10px;
background: var(--background);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .1em;
z-index: 1;
}
hr {
position: absolute;
left: 0;
right: 0;
width: 100%;
margin-top: 15px;
z-index: 0;
}
}
&__buttons {
display: flex;
align-items: center;
justify-content: center;
@media (max-width: $phone-max-width) {
flex-direction: column;
}
}
}
.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 8px;
max-width: 40%;
padding: 0;
cursor: pointer;
appearance: none;
@media (max-width: $phone-max-width) {
max-width: 80%;
}
+ .button {
margin-left: 10px;
}
a {
display: flex;
padding: 8px 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&__text {
text-overflow: ellipsis;
<