forked from data.coop/website
Styling for fixed sidebars - TODO: responsiveness
This commit is contained in:
parent
05d7c33fa3
commit
86b7972501
GPG key ID:
7D49441634585664
|
|
@ -1,304 +0,0 @@
|
||||||
---
|
|
||||||
---
|
|
||||||
|
|
||||||
//
|
|
||||||
// IMPORTS
|
|
||||||
//
|
|
||||||
|
|
||||||
@import "reset";
|
|
||||||
@import "variables";
|
|
||||||
// Syntax highlighting @import is at the bottom of this file
|
|
||||||
|
|
||||||
/**************/
|
|
||||||
/* BASE RULES */
|
|
||||||
/**************/
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: $white;
|
|
||||||
font: 18px/1.4 $helvetica;
|
|
||||||
color: $darkGray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 740px;
|
|
||||||
padding: 0 10px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: $helveticaNeue;
|
|
||||||
color: $darkerGray;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
line-height: 1.7;
|
|
||||||
margin: 1em 0 15px;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
@include mobile {
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 30px;
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 18px;
|
|
||||||
color: $gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $blue;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover, &:active {
|
|
||||||
color: $blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul, ol {
|
|
||||||
margin: 15px 0;
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol ul, ul ol, ul ul, ol ol {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul ul, ol ul {
|
|
||||||
list-style-type: circle;
|
|
||||||
}
|
|
||||||
|
|
||||||
em, i {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong, b {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fixes images in popup boxes from Google Translate
|
|
||||||
.gmnoprint img {
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date {
|
|
||||||
font-style: italic;
|
|
||||||
color: $gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Specify the color of the selection
|
|
||||||
::-moz-selection {
|
|
||||||
color: $black;
|
|
||||||
background: $lightGray;
|
|
||||||
}
|
|
||||||
::selection {
|
|
||||||
color: $black;
|
|
||||||
background: $lightGray;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Nicolas Gallagher's micro clearfix hack
|
|
||||||
// http://nicolasgallagher.com/micro-clearfix-hack/
|
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
content: " ";
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************/
|
|
||||||
/* LAYOUT / SECTIONS */
|
|
||||||
/*********************/
|
|
||||||
|
|
||||||
//
|
|
||||||
// .masthead
|
|
||||||
//
|
|
||||||
|
|
||||||
.wrapper-masthead {
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.masthead {
|
|
||||||
padding: 20px 0;
|
|
||||||
border-bottom: 1px solid $lightGray;
|
|
||||||
|
|
||||||
@include mobile {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-avatar {
|
|
||||||
float: left;
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
margin-right: 15px;
|
|
||||||
|
|
||||||
@include mobile {
|
|
||||||
float: none;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-info {
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
@include mobile {
|
|
||||||
float: none;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-name {
|
|
||||||
margin: 0;
|
|
||||||
color: $darkGray;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: $helveticaNeue;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 28px;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-description {
|
|
||||||
margin: -5px 0 0 0;
|
|
||||||
color: $gray;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
@include mobile {
|
|
||||||
margin: 3px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
float: right;
|
|
||||||
margin-top: 23px; // @TODO: Vertically middle align
|
|
||||||
font-family: $helveticaNeue;
|
|
||||||
font-size: 18px;
|
|
||||||
|
|
||||||
@include mobile {
|
|
||||||
float: none;
|
|
||||||
margin-top: 9px;
|
|
||||||
display: block;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
margin-left: 20px;
|
|
||||||
color: $darkGray;
|
|
||||||
text-align: right;
|
|
||||||
font-weight: 300;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
|
|
||||||
@include mobile {
|
|
||||||
margin: 0 10px;
|
|
||||||
color: $blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// .main
|
|
||||||
//
|
|
||||||
|
|
||||||
.posts > .post {
|
|
||||||
padding-bottom: 2em;
|
|
||||||
border-bottom: 1px solid $lightGray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posts > .post:last-child {
|
|
||||||
padding-bottom: 1em;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post {
|
|
||||||
blockquote {
|
|
||||||
margin: 1.8em .8em;
|
|
||||||
border-left: 2px solid $gray;
|
|
||||||
padding: 0.1em 1em;
|
|
||||||
color: $gray;
|
|
||||||
font-size: 22px;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comments {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper-footer {
|
|
||||||
margin-top: 50px;
|
|
||||||
border-top: 1px solid #ddd;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
background-color: $lightGray;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
padding: 20px 0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table th
|
|
||||||
{
|
|
||||||
text-align: left;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
table td,
|
|
||||||
table th
|
|
||||||
{
|
|
||||||
padding: 5px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Settled on moving the import of syntax highlighting to the bottom of the CSS
|
|
||||||
// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
|
|
||||||
@import "highlights";
|
|
||||||
@import "svg-icons";
|
|
||||||
@import "datacoop";
|
|
||||||
|
|
@ -1,174 +0,0 @@
|
||||||
# Minimal Bootstrap Hugo Theme
|
|
||||||
|
|
||||||
[](https://app.netlify.com/sites/minimal-bootstrap-hugo-theme/deploys)
|
|
||||||
|
|
||||||
A minimal hugo theme made with bootstrap that focuses on content readability.
|
|
||||||
|
|
||||||
## Table of contents
|
|
||||||
|
|
||||||
- [Demo](#demo)
|
|
||||||
- [Minimum Hugo version](#minimum-hugo-version)
|
|
||||||
- [Installation](#installation)
|
|
||||||
- [Updating](#updating)
|
|
||||||
- [Run example site](#run-example-site)
|
|
||||||
- [Configuration](#configuration)
|
|
||||||
- [Favicons](#favicons)
|
|
||||||
- [Override](#override)
|
|
||||||
- [Homepage example](#homepage-example)
|
|
||||||
- [Configure cookie consent](#configure-cookie-consent)
|
|
||||||
- [Syntax highlighting](#syntax-highlighting)
|
|
||||||
- [Shortcodes](#shortcodes)
|
|
||||||
- [`blockquote`](#blockquote)
|
|
||||||
- [`imgAbs`](#imgabs)
|
|
||||||
- [`imgRel`](#imgrel)
|
|
||||||
- [`imgProc`](#imgproc)
|
|
||||||
- [`mastodon`](#mastodon)
|
|
||||||
- [Getting help](#getting-help)
|
|
||||||
- [Stackbit Deploy](#stackbit-deploy)
|
|
||||||
|
|
||||||
## Demo
|
|
||||||
|
|
||||||
https://minimal-bootstrap-hugo-theme.netlify.com/
|
|
||||||
|
|
||||||
## Minimum Hugo version
|
|
||||||
|
|
||||||
Hugo version `0.60.1` or higher is required. View the [Hugo releases](https://github.com/gohugoio/hugo/releases) and download the binary for your OS.
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
From the root of your site:
|
|
||||||
|
|
||||||
```
|
|
||||||
git submodule add https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme.git themes/minimal-bootstrap-hugo-theme
|
|
||||||
```
|
|
||||||
|
|
||||||
## Updating
|
|
||||||
|
|
||||||
From the root of your site:
|
|
||||||
|
|
||||||
```
|
|
||||||
git submodule update --remote --merge
|
|
||||||
```
|
|
||||||
|
|
||||||
## Run example site
|
|
||||||
|
|
||||||
From the root of `themes/minimal-bootstrap-hugo-theme/exampleSite`:
|
|
||||||
|
|
||||||
```
|
|
||||||
hugo server --themesDir ../..
|
|
||||||
```
|
|
||||||
|
|
||||||
## Configuration
|
|
||||||
|
|
||||||
Copy the `config.toml` from the [`exampleSite`](https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme/tree/master/exampleSite), then edit as desired.
|
|
||||||
|
|
||||||
## Favicons
|
|
||||||
|
|
||||||
Upload your image to [RealFaviconGenerator](https://realfavicongenerator.net/) then copy-paste the generated favicon files under `static`.
|
|
||||||
|
|
||||||
## Override
|
|
||||||
|
|
||||||
### Homepage example
|
|
||||||
|
|
||||||
As an example, let's say you didn't like the default homepage, and wanted to design one of your own. To do this, you would:
|
|
||||||
|
|
||||||
1. Copy file `YOUR_SITE/themes/minimal-bootstrap-hugo-theme/layouts/index.html`
|
|
||||||
1. Paste that file to `YOUR_SITE/layouts/index.html`
|
|
||||||
1. Edit `index.html` as desired
|
|
||||||
|
|
||||||
### Configure cookie consent
|
|
||||||
|
|
||||||
You can change the position, layout, color palette, "Learn more" link, compliance type, and custom text of the cookie consent popup. To do this, you would:
|
|
||||||
|
|
||||||
1. Copy file `YOUR_SITE/themes/minimal-bootstrap-hugo-theme/layouts/partials/cookie-consent.html`
|
|
||||||
1. Paste that file to `YOUR_SITE/layouts/partials/cookie-consent.html`
|
|
||||||
1. Complete the [cookie consent wizard](https://cookieconsent.insites.com/download/)
|
|
||||||
1. Paste the generated code from the wizard into `cookie-consent.html`
|
|
||||||
|
|
||||||
## Syntax highlighting
|
|
||||||
|
|
||||||
Hugo has built-in syntax highlighting, provided by Chroma. It is currently enabled in the `config.toml` file from the [`exampleSite`](https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme/tree/master/exampleSite).
|
|
||||||
|
|
||||||
Checkout the [Chroma style gallery](https://xyproto.github.io/splash/docs/all.html) and choose the style you like.
|
|
||||||
|
|
||||||
## Shortcodes
|
|
||||||
|
|
||||||
### `blockquote`
|
|
||||||
|
|
||||||
This will format your blockquotes nicely. To use it, put the quote within the shortcode. The `author` argument is optional.
|
|
||||||
|
|
||||||
```
|
|
||||||
{{< blockquote author="Laura Ingalls" >}}
|
|
||||||
I am beginning to learn that it is the sweet, **simple** things of life which are the real ones after all.
|
|
||||||
{{< /blockquote >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### `imgAbs`
|
|
||||||
|
|
||||||
This will insert an image into your content by absolute path. To use it, pass the `pathURL` of your image.
|
|
||||||
|
|
||||||
These arguments are optional: `alt`, `class`, `style`.
|
|
||||||
|
|
||||||
```
|
|
||||||
{{< imgAbs
|
|
||||||
pathURL="img/some-img.png"
|
|
||||||
alt="Some description"
|
|
||||||
class="some-class"
|
|
||||||
style="some-style" >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### `imgRel`
|
|
||||||
|
|
||||||
This will insert an image into your content by relative path. To use it, pass the `pathURL` of your image.
|
|
||||||
|
|
||||||
These arguments are optional: `alt`, `class`, `style`.
|
|
||||||
|
|
||||||
```
|
|
||||||
{{< imgRel
|
|
||||||
pathURL="img/some-img.png"
|
|
||||||
alt="Some description"
|
|
||||||
class="some-class"
|
|
||||||
style="some-style" >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### `imgProc`
|
|
||||||
|
|
||||||
This will process an image from a [page bundle](https://gohugo.io/content-management/page-bundles/), then provide a link to the original image. To use it, pass the image name, command, and command options.
|
|
||||||
|
|
||||||
The `command` argument will be one of: `Resize`, `Fit`, `Fill`. For a deeper dive see the [hugo docs for image processing](https://gohugo.io/content-management/image-processing/).
|
|
||||||
|
|
||||||
These arguments are optional: `alt`, `class`, `style`.
|
|
||||||
|
|
||||||
The below example resizes an image to 800px width, while keeping the aspect ratio.
|
|
||||||
|
|
||||||
```
|
|
||||||
{{< imgProc
|
|
||||||
img="some-img.png"
|
|
||||||
command="Resize"
|
|
||||||
options="800x"
|
|
||||||
alt="Some description"
|
|
||||||
class="some-class"
|
|
||||||
style="some-style" >}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### `mastodon`
|
|
||||||
|
|
||||||
This will embed a toot in an `iframe`.
|
|
||||||
|
|
||||||
These arguments are optional: `width`, `height`.
|
|
||||||
|
|
||||||
```
|
|
||||||
{{% mastodon
|
|
||||||
status="https://mastodon.social/@kevingimbel/100700713283716694"
|
|
||||||
width="1000" height="500" %}}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Getting help
|
|
||||||
|
|
||||||
If you run into an issue that isn't answered by this documentation or the [`exampleSite`](https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme/tree/master/exampleSite), then visit the [Hugo forum](https://discourse.gohugo.io/). The folks there are helpful and friendly. **Before** asking your question, be sure to read the [requesting help guidelines](https://discourse.gohugo.io/t/requesting-help/9132). Feel free to tag me in your question, my forum username is [@zwbetz](https://discourse.gohugo.io/u/zwbetz/summary).
|
|
||||||
|
|
||||||
## Stackbit Deploy
|
|
||||||
|
|
||||||
This theme is ready to import into Stackbit. This theme can be deployed to Netlify and you can connect any headless CMS including Forestry, NetlifyCMS, DatoCMS, or Contentful.
|
|
||||||
|
|
||||||
[](https://app.stackbit.com/create?theme=https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme)
|
|
||||||
|
|
@ -39,66 +39,175 @@ $font-family-base: "Space Grotesk";
|
||||||
$font-family-monospace: "Space Mono";
|
$font-family-monospace: "Space Mono";
|
||||||
|
|
||||||
$datacoop-purple: #4B3ABA;
|
$datacoop-purple: #4B3ABA;
|
||||||
$data-coop-light-blue: #A8F3F4;
|
$datacoop-light-blue: #A8F3F4;
|
||||||
$data-coop-curry: #BA8D21;
|
$datacoop-curry: #BA8D21;
|
||||||
$data-coop-grey: #BCB8B3;
|
$datacoop-grey: #BCB8B3;
|
||||||
|
|
||||||
$fair-light-bluegreen: rgb(226, 243, 245);
|
|
||||||
$fair-light-green: rgb(165, 206, 190);
|
$datacoop-curry-light: lighten($datacoop-curry, 12%);
|
||||||
$fair-light-red: rgb(253, 210, 188);
|
$datacoop-curry-lighter: lighten($datacoop-curry, 38%);
|
||||||
$fair-light-yellow: rgb(255, 249, 184);
|
|
||||||
$fair-light-blue: rgb(181, 201, 232);
|
$datacoop-grey: #BCB8B3;
|
||||||
|
|
||||||
|
|
||||||
$primary: $datacoop-purple;
|
$primary: $datacoop-purple;
|
||||||
$secondary: $data-coop-light-blue;
|
$secondary: $datacoop-light-blue;
|
||||||
$success: $datacoop-purple;
|
$success: $datacoop-purple;
|
||||||
$info: $data-coop-grey;
|
$info: $datacoop-grey;
|
||||||
$warning: $data-coop-curry;
|
$warning: $datacoop-curry;
|
||||||
$danger: $data-coop-curry;
|
$danger: $datacoop-curry;
|
||||||
|
|
||||||
|
|
||||||
|
$body-color: $datacoop-purple;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@import "bootstrap/bootstrap";
|
@import "bootstrap/bootstrap";
|
||||||
|
|
||||||
|
html
|
||||||
|
{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-navbar {
|
.everything-container {
|
||||||
margin-bottom: 1em;
|
height: 100%;
|
||||||
height: 60px;
|
max-width: 1200px;
|
||||||
}
|
padding: 0; // Overwrites .container-fluid
|
||||||
|
margin: 0; // Overwrites .container-fluid
|
||||||
|
|
||||||
.custom-navbar a {
|
> .row
|
||||||
display: inline-block;
|
{
|
||||||
padding: 18px 0;
|
max-width: 1200px;
|
||||||
margin-right: 1em;
|
margin: 0; // Overwrites .row
|
||||||
font-weight: bold;
|
height: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.custom-navbar a:hover,
|
|
||||||
.custom-navbar a:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
.custom-navbar {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.datacoop-sidebar {
|
||||||
|
background-color: $datacoop-light-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datacoop-navbar {
|
||||||
|
|
||||||
|
background-color: $datacoop-light-blue;
|
||||||
|
color: $datacoop-purple;
|
||||||
|
height: 100%;
|
||||||
|
padding: 40px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $datacoop-purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datacoop-menulists
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-coop-sidebar-logo
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul
|
||||||
|
{
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ul > li
|
||||||
|
{
|
||||||
|
list-style-type: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul > li > a
|
||||||
|
{
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.datacoop-langchooser
|
||||||
|
{
|
||||||
|
margin-top: 20px;
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 20px;
|
||||||
|
a {
|
||||||
|
font-size: 18px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datacoop-sidebar-gutter
|
||||||
|
{
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
max-width: auto !important; // overwrites col-md
|
||||||
|
flex: 0 0 0; // overwrites col-md
|
||||||
|
width: auto;
|
||||||
|
padding: 20px 10px;
|
||||||
|
background-color: $datacoop-curry-lighter;
|
||||||
|
color: $datacoop-purple;
|
||||||
|
font-family: $font-family-monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.datacoop-sidebar-gutter-right
|
||||||
|
{
|
||||||
|
writing-mode: horizontal-lr;
|
||||||
|
transform: rotate(0);
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
min-width: 33px;
|
||||||
|
|
||||||
|
.sidebar-rotated
|
||||||
|
{
|
||||||
|
transform: rotate(180deg);
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
width: 500px;
|
||||||
|
font-size: 16px;
|
||||||
|
white-space: nowrap;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
background-color: $datacoop-light-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.datacoop-container-content
|
||||||
|
{
|
||||||
|
padding: 30px 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
padding-bottom: 1em;
|
padding: 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 9.5px;
|
padding: 9.5px;
|
||||||
|
|
@ -136,4 +245,9 @@ blockquote,
|
||||||
border-left: 5px solid #6c757d;
|
border-left: 5px solid #6c757d;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
256
themes/datacoop2020/gh-md-toc
vendored
256
themes/datacoop2020/gh-md-toc
vendored
|
|
@ -1,256 +0,0 @@
|
||||||
#!/usr/bin/env bash
|
|
||||||
|
|
||||||
#
|
|
||||||
# Steps:
|
|
||||||
#
|
|
||||||
# 1. Download corresponding html file for some README.md:
|
|
||||||
# curl -s $1
|
|
||||||
#
|
|
||||||
# 2. Discard rows where no substring 'user-content-' (github's markup):
|
|
||||||
# awk '/user-content-/ { ...
|
|
||||||
#
|
|
||||||
# 3.1 Get last number in each row like ' ... </span></a>sitemap.js</h1'.
|
|
||||||
# It's a level of the current header:
|
|
||||||
# substr($0, length($0), 1)
|
|
||||||
#
|
|
||||||
# 3.2 Get level from 3.1 and insert corresponding number of spaces before '*':
|
|
||||||
# sprintf("%*s", substr($0, length($0), 1)*3, " ")
|
|
||||||
#
|
|
||||||
# 4. Find head's text and insert it inside "* [ ... ]":
|
|
||||||
# substr($0, match($0, /a>.*<\/h/)+2, RLENGTH-5)
|
|
||||||
#
|
|
||||||
# 5. Find anchor and insert it inside "(...)":
|
|
||||||
# substr($0, match($0, "href=\"[^\"]+?\" ")+6, RLENGTH-8)
|
|
||||||
#
|
|
||||||
|
|
||||||
gh_toc_version="0.5.0"
|
|
||||||
|
|
||||||
gh_user_agent="gh-md-toc v$gh_toc_version"
|
|
||||||
|
|
||||||
#
|
|
||||||
# Download rendered into html README.md by its url.
|
|
||||||
#
|
|
||||||
#
|
|
||||||
gh_toc_load() {
|
|
||||||
local gh_url=$1
|
|
||||||
|
|
||||||
if type curl &>/dev/null; then
|
|
||||||
curl --user-agent "$gh_user_agent" -s "$gh_url"
|
|
||||||
elif type wget &>/dev/null; then
|
|
||||||
wget --user-agent="$gh_user_agent" -qO- "$gh_url"
|
|
||||||
else
|
|
||||||
echo "Please, install 'curl' or 'wget' and try again."
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
}
|
|
||||||
|
|
||||||
#
|
|
||||||
# Converts local md file into html by GitHub
|
|
||||||
#
|
|
||||||
# ➥ curl -X POST --data '{"text": "Hello world github/linguist#1 **cool**, and #1!"}' https://api.github.com/markdown
|
|
||||||
# <p>Hello world github/linguist#1 <strong>cool</strong>, and #1!</p>'"
|
|
||||||
gh_toc_md2html() {
|
|
||||||
local gh_file_md=$1
|
|
||||||
URL=https://api.github.com/markdown/raw
|
|
||||||
TOKEN="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)/token.txt"
|
|
||||||
if [ -f "$TOKEN" ]; then
|
|
||||||
URL="$URL?access_token=$(cat $TOKEN)"
|
|
||||||
fi
|
|
||||||
OUTPUT="$(curl -s --user-agent "$gh_user_agent" \
|
|
||||||
--data-binary @"$gh_file_md" -H "Content-Type:text/plain" \
|
|
||||||
$URL)"
|
|
||||||
|
|
||||||
if [ "$?" != "0" ]; then
|
|
||||||
echo "XXNetworkErrorXX"
|
|
||||||
fi
|
|
||||||
if [ "$(echo "${OUTPUT}" | awk '/API rate limit exceeded/')" != "" ]; then
|
|
||||||
echo "XXRateLimitXX"
|
|
||||||
else
|
|
||||||
echo "${OUTPUT}"
|
|
||||||
fi
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#
|
|
||||||
# Is passed string url
|
|
||||||
#
|
|
||||||
gh_is_url() {
|
|
||||||
case $1 in
|
|
||||||
https* | http*)
|
|
||||||
echo "yes";;
|
|
||||||
*)
|
|
||||||
echo "no";;
|
|
||||||
esac
|
|
||||||
}
|
|
||||||
|
|
||||||
#
|
|
||||||
# TOC generator
|
|
||||||
#
|
|
||||||
gh_toc(){
|
|
||||||
local gh_src=$1
|
|
||||||
local gh_src_copy=$1
|
|
||||||
local gh_ttl_docs=$2
|
|
||||||
local need_replace=$3
|
|
||||||
|
|
||||||
if [ "$gh_src" = "" ]; then
|
|
||||||
echo "Please, enter URL or local path for a README.md"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
|
|
||||||
# Show "TOC" string only if working with one document
|
|
||||||
if [ "$gh_ttl_docs" = "1" ]; then
|
|
||||||
|
|
||||||
echo "Table of Contents"
|
|
||||||
echo "================="
|
|
||||||
echo ""
|
|
||||||
gh_src_copy=""
|
|
||||||
|
|
||||||
fi
|
|
||||||
|
|
||||||
if [ "$(gh_is_url "$gh_src")" == "yes" ]; then
|
|
||||||
gh_toc_load "$gh_src" | gh_toc_grab "$gh_src_copy"
|
|
||||||
if [ "${PIPESTATUS[0]}" != "0" ]; then
|
|
||||||
echo "Could not load remote document."
|
|
||||||
echo "Please check your url or network connectivity"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
if [ "$need_replace" = "yes" ]; then
|
|
||||||
echo
|
|
||||||
echo "!! '$gh_src' is not a local file"
|
|
||||||
echo "!! Can't insert the TOC into it."
|
|
||||||
echo
|
|
||||||
fi
|
|
||||||
else
|
|
||||||
local rawhtml=$(gh_toc_md2html "$gh_src")
|
|
||||||
if [ "$rawhtml" == "XXNetworkErrorXX" ]; then
|
|
||||||
echo "Parsing local markdown file requires access to github API"
|
|
||||||
echo "Please make sure curl is installed and check your network connectivity"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
if [ "$rawhtml" == "XXRateLimitXX" ]; then
|
|
||||||
echo "Parsing local markdown file requires access to github API"
|
|
||||||
echo "Error: You exceeded the hourly limit. See: https://developer.github.com/v3/#rate-limiting"
|
|
||||||
TOKEN="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)/token.txt"
|
|
||||||
echo "or place github auth token here: $TOKEN"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
local toc=`echo "$rawhtml" | gh_toc_grab "$gh_src_copy"`
|
|
||||||
echo "$toc"
|
|
||||||
if [ "$need_replace" = "yes" ]; then
|
|
||||||
local ts="<\!--ts-->"
|
|
||||||
local te="<\!--te-->"
|
|
||||||
local dt=`date +'%F_%H%M%S'`
|
|
||||||
local ext=".orig.${dt}"
|
|
||||||
local toc_path="${gh_src}.toc.${dt}"
|
|
||||||
local toc_footer="<!-- Added by: `whoami`, at: `date --iso-8601='minutes'` -->"
|
|
||||||
# http://fahdshariff.blogspot.ru/2012/12/sed-mutli-line-replacement-between-two.html
|
|
||||||
# clear old TOC
|
|
||||||
sed -i${ext} "/${ts}/,/${te}/{//!d;}" "$gh_src"
|
|
||||||
# create toc file
|
|
||||||
echo "${toc}" > "${toc_path}"
|
|
||||||
echo -e "\n${toc_footer}\n" >> "$toc_path"
|
|
||||||
# insert toc file
|
|
||||||
if [[ "`uname`" == "Darwin" ]]; then
|
|
||||||
sed -i "" "/${ts}/r ${toc_path}" "$gh_src"
|
|
||||||
else
|
|
||||||
sed -i "/${ts}/r ${toc_path}" "$gh_src"
|
|
||||||
fi
|
|
||||||
echo
|
|
||||||
echo "!! TOC was added into: '$gh_src'"
|
|
||||||
echo "!! Origin version of the file: '${gh_src}${ext}'"
|
|
||||||
echo "!! TOC added into a separate file: '${toc_path}'"
|
|
||||||
echo
|
|
||||||
fi
|
|
||||||
fi
|
|
||||||
}
|
|
||||||
|
|
||||||
#
|
|
||||||
# Grabber of the TOC from rendered html
|
|
||||||
#
|
|
||||||
# $1 — a source url of document.
|
|
||||||
# It's need if TOC is generated for multiple documents.
|
|
||||||
#
|
|
||||||
gh_toc_grab() {
|
|
||||||
# if closed <h[1-6]> is on the new line, then move it on the prev line
|
|
||||||
# for example:
|
|
||||||
# was: The command <code>foo1</code>
|
|
||||||
# </h1>
|
|
||||||
# became: The command <code>foo1</code></h1>
|
|
||||||
sed -e ':a' -e 'N' -e '$!ba' -e 's/\n<\/h/<\/h/g' |
|
|
||||||
# find strings that corresponds to template
|
|
||||||
grep -E -o '<a.*id="user-content-[^"]*".*</h[1-6]' |
|
|
||||||
# remove code tags
|
|
||||||
sed 's/<code>//' | sed 's/<\/code>//' |
|
|
||||||
# now all rows are like:
|
|
||||||
# <a id="user-content-..." href="..."><span ...></span></a> ... </h1
|
|
||||||
# format result line
|
|
||||||
# * $0 — whole string
|
|
||||||
echo -e "$(awk -v "gh_url=$1" '{
|
|
||||||
print sprintf("%*s", substr($0, length($0), 1)*3, " ") "* [" substr($0, match($0, /a>.*<\/h/)+2, RLENGTH-5)"](" gh_url substr($0, match($0, "href=\"[^\"]+?\" ")+6, RLENGTH-8) ")"}' | sed 'y/+/ /; s/%/\\x/g')"
|
|
||||||
}
|
|
||||||
|
|
||||||
#
|
|
||||||
# Returns filename only from full path or url
|
|
||||||
#
|
|
||||||
gh_toc_get_filename() {
|
|
||||||
echo "${1##*/}"
|
|
||||||
}
|
|
||||||
|
|
||||||
#
|
|
||||||
# Options hendlers
|
|
||||||
#
|
|
||||||
gh_toc_app() {
|
|
||||||
local app_name=$(basename $0)
|
|
||||||
local need_replace="no"
|
|
||||||
|
|
||||||
if [ "$1" = '--help' ] || [ $# -eq 0 ] ; then
|
|
||||||
echo "GitHub TOC generator ($app_name): $gh_toc_version"
|
|
||||||
echo ""
|
|
||||||
echo "Usage:"
|
|
||||||
echo " $app_name [--insert] src [src] Create TOC for a README file (url or local path)"
|
|
||||||
echo " $app_name - Create TOC for markdown from STDIN"
|
|
||||||
echo " $app_name --help Show help"
|
|
||||||
echo " $app_name --version Show version"
|
|
||||||
return
|
|
||||||
fi
|
|
||||||
|
|
||||||
if [ "$1" = '--version' ]; then
|
|
||||||
echo "$gh_toc_version"
|
|
||||||
return
|
|
||||||
fi
|
|
||||||
|
|
||||||
if [ "$1" = "-" ]; then
|
|
||||||
if [ -z "$TMPDIR" ]; then
|
|
||||||
TMPDIR="/tmp"
|
|
||||||
elif [ -n "$TMPDIR" -a ! -d "$TMPDIR" ]; then
|
|
||||||
mkdir -p "$TMPDIR"
|
|
||||||
fi
|
|
||||||
local gh_tmp_md
|
|
||||||
gh_tmp_md=$(mktemp $TMPDIR/tmp.XXXXXX)
|
|
||||||
while read input; do
|
|
||||||
echo "$input" >> "$gh_tmp_md"
|
|
||||||
done
|
|
||||||
gh_toc_md2html "$gh_tmp_md" | gh_toc_grab ""
|
|
||||||
return
|
|
||||||
fi
|
|
||||||
|
|
||||||
if [ "$1" = '--insert' ]; then
|
|
||||||
need_replace="yes"
|
|
||||||
shift
|
|
||||||
fi
|
|
||||||
|
|
||||||
for md in "$@"
|
|
||||||
do
|
|
||||||
echo ""
|
|
||||||
gh_toc "$md" "$#" "$need_replace"
|
|
||||||
done
|
|
||||||
|
|
||||||
echo ""
|
|
||||||
echo "Created by [gh-md-toc](https://github.com/ekalinin/github-markdown-toc)"
|
|
||||||
}
|
|
||||||
|
|
||||||
#
|
|
||||||
# Entry point
|
|
||||||
#
|
|
||||||
gh_toc_app "$@"
|
|
||||||
|
|
@ -4,23 +4,53 @@
|
||||||
{{ partial "head.html" . }}
|
{{ partial "head.html" . }}
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{{ partial "nav.html" . }}
|
|
||||||
|
<div class="container-fluid everything-container">
|
||||||
<div class="container">
|
|
||||||
<article>
|
<div class="row">
|
||||||
{{ block "main" . }}{{ end }}
|
|
||||||
</article>
|
<div class="col-md-3 datacoop-sidebar d-print-none" style="min-width: 340px;">
|
||||||
|
<div class="fixed-top" style="width: 340px; height: 100%;">
|
||||||
|
{{ partial "nav.html" . }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-1 datacoop-sidebar-gutter d-print-none d-none d-md-flex">
|
||||||
|
<div class="sticky-bottom">
|
||||||
|
{{ with (now) | printf "%s" }}
|
||||||
|
{{ i18n "generated_date" . }}
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-7">
|
||||||
|
<div class="container datacoop-container-content">
|
||||||
|
<article>
|
||||||
|
{{ block "main" . }}{{ end }}
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-1 datacoop-sidebar-gutter datacoop-sidebar-gutter-right d-print-none d-none d-md-flex">
|
||||||
|
|
||||||
|
<div class="fixed-top">
|
||||||
|
|
||||||
|
<a href="#" class="sidebar-rotated">
|
||||||
|
<img src="{{ "/static/img/icons/expand.svg" | absURL }}" alt="open">
|
||||||
|
{{ i18n "services_status" }}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ partial "bootstrap-js.html" . }}
|
</div>
|
||||||
{{ partial "mastodon-js.html" . }}
|
|
||||||
|
{{ partial "mastodon-js.html" . }}
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
{{ partial "bootstrap-js.html" . }}
|
||||||
{{ range $.Site.Home.AllTranslations }}
|
|
||||||
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
|
|
||||||
{{ end }}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,26 +8,13 @@
|
||||||
<meta name="description" content="{{ . }}">
|
<meta name="description" content="{{ . }}">
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ $appleTouchIcon := "apple-touch-icon.png" }}
|
<link rel="apple-touch-icon" sizes="180x180" href="{{ "/static/img" | absURL }}/apple-touch-icon.png">
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ $appleTouchIcon | absURL }}">
|
<link rel="icon" type="image/png" sizes="32x32" href="{{ "/static/img" | absURL }}/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="{{ "/static/img" | absURL }}/favicon-16x16.png">
|
||||||
{{ $favicon32x32 := "favicon-32x32.png" }}
|
<link rel="manifest" href="{{ "" | absURL }}/site.webmanifest">
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ $favicon32x32 | absURL }}">
|
<link rel="mask-icon" href="{{ "/static/img" | absURL }}/safari-pinned-tab.svg" color="#4b3aba">
|
||||||
|
<meta name="msapplication-TileColor" content="#4b3aba">
|
||||||
{{ $favicon16x16 := "favicon-16x16.png" }}
|
<meta name="theme-color" content="#4b3aba">
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ $favicon16x16 | absURL }}">
|
|
||||||
|
|
||||||
{{ $siteWebmanifest := "site.webmanifest" }}
|
|
||||||
<link rel="manifest" href="{{ $siteWebmanifest | absURL }}">
|
|
||||||
|
|
||||||
<link rel="sitemap" href="{{ .Site.SitemapAbsURL }}" />
|
|
||||||
|
|
||||||
{{ $safariPinnedTab := "safari-pinned-tab.svg" }}
|
|
||||||
<link rel="mask-icon" href="{{ $safariPinnedTab | absURL }}" color="{{ .Site.Params.faviconSafariPinnedTabColor }}">
|
|
||||||
|
|
||||||
<meta name="msapplication-TileColor" content="{{ .Site.Params.faviconMsApplicationTileColor }}">
|
|
||||||
|
|
||||||
<meta name="theme-color" content="{{ .Site.Params.faviconThemeColor }}">
|
|
||||||
|
|
||||||
{{ $style := resources.Get "static/css/style.scss" | resources.ToCSS | resources.Minify }}
|
{{ $style := resources.Get "static/css/style.scss" | resources.ToCSS | resources.Minify }}
|
||||||
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,23 @@
|
||||||
<nav class="custom-navbar">
|
<nav class="datacoop-navbar">
|
||||||
<div class="container">
|
|
||||||
{{ range .Site.Menus.nav }}
|
<a href="/" class="data-coop-sidebar-logo">
|
||||||
<a href="{{ .URL }}">{{ .Name }}</a>
|
<img src="{{ printf "/static/img/logo.svg" | absURL }}">
|
||||||
{{ end }}
|
{{ (i18n "tagline") | safeHTML }}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="datacoop-menulists">
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{{ range .Site.Menus.nav }}
|
||||||
|
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
<ul class="datacoop-langchooser">
|
||||||
|
{{ range $.Site.Home.AllTranslations }}
|
||||||
|
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
|
||||||
|
</nav>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue