Commit aa01c93f authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Merge commit '7ac62f809ea6dbcf679ce1f0169c062e389af60a'

parents 923d608c f6a5185f
......@@ -21,7 +21,6 @@ Your copy of the site should now be running locally on [https://localhost](https
## How to run with demo content
If you’d like to try the theme with demo content, try the Site.js [starter-blog-demo](https://source.small-tech.org/site.js/starters/starter-blog-demo) or [starter-photo-blog-demo](https://source.small-tech.org/site.js/starters/starter-photo-blog-demo).
---
## Guiding Principles
......@@ -33,7 +32,7 @@ The Starter Theme is [Small Tech](https://small-tech.org).
The CSS files are concatenated by Hugo into one file, stripping out comments and spaces. The order is as follows:
1. **`starter-theme/assets/css/palette.css`** Gets the colour palette depending on the settings in .hugo/config/_default/params.toml.
2. **`starter-theme/assets/css/colours-mode.css`** Determines the colour modes (light, tint, dark) depending on the settings in .hugo/config/_default/params.toml, and pulls in the correct mode palette for that colour mode.
2. **`starter-theme/assets/css/colours.css`** Determines the colour modes (light, tint, dark) depending on the settings in .hugo/config/_default/params.toml, and pulls in the correct mode palette for that colour mode.
3. **`starter-theme/assets/css/base.css`** Sets variables, a normaliser, and styling for basic element selectors.
4. **`starter-theme/assets/css/fonts-base.css`** Defines base typography, mostly on element selectors.
5. **`starter-theme/assets/css/fonts- fontface/sans/serif/system.css`** Defines the font families and applies them to the relevant selectors depending on the settings in .hugo/config/_default/params.toml.
......
......@@ -2,5 +2,5 @@
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true # change to draft: false to publish this post
featureImageAltText: "" # describe this page/post’s feature image for those who can’t see it
altText: "" # describe this page/post’s thumbnail image for those who can’t see it
---
\ No newline at end of file
......@@ -5,5 +5,5 @@ draft: true # change to draft: false to publish this post
menu:
navigation # include this page in the navigation menu
showDate: false
featureImageAltText: "" # describe this page/post’s feature image for those who can’t see it
altText: "" # describe this page/post’s thumbnail image for those who can’t see it
---
\ No newline at end of file
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true # change to draft: false to publish this post
tags: [""] # add each tag in "" quotes, separated by a comma. for example tags: ["photo", "summer", "dog"]
altText: "" # describe this page/post’s thumbnail image for those who can’t see it
---
\ No newline at end of file
......@@ -3,5 +3,5 @@ title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true # change to draft: false to publish this post
tags: [""] # add each tag in "" quotes, separated by a comma. for example tags: ["photo", "summer", "dog"]
featureImageAltText: "" # describe this page/post’s feature image for those who can’t see it
altText: "" # describe this page/post’s thumbnail image for those who can’t see it
---
\ No newline at end of file
......@@ -40,42 +40,6 @@
--error: var(--darkRed);
}
/* Tinted light mode */
[data-colour-tint="true"] {
/* colour variables for tint colour mode */
--background: var(--colour25);
--background-highlight: var(--colour15);
--background-input: var(--mono0);
--background-header: var(--colour25);
--background-footer: var(--colour25);
--text: var(--mono90);
--text-highlight: var(--mono90);
--text-secondary: var(--mono80);
--text-secondary-highlight: var(--mono80);
--text-strong: var(--colour85);
--text-strong-highlight: var(--colour85);
--text-subtle: var(--colour75);
--text-subtle-highlight: var(--colour75);
--text-heading: var(--mono90);
--text-site-title: var(--colour90);
--background-button: var(--colour35);
--background-button-highlight: var(--colour35);
--background-button-strong: var(--colour40);
--background-button-strong-highlight: var(--colour40);
--background-button-subtle: var(--colour35);
--background-button-subtle-highlight: var(--colour35);
--text-button: var(--colour100);
--text-button-highlight: var(--colour100);
--border: var(--colour40);
--line: var(--colour60);
--focus: var(--colour50);
--background-selection: var(--colour35);
--shadow: rgba(0,0,0,0.2);
--shadow-light: var(--mono20);
--error: var(--darkRed);
}
/* Dark mode */
[data-darkmode="always"] {
......@@ -157,8 +121,7 @@
/* Light code mode */
[data-darkmode-code="auto"],
[data-darkmode-code="never"],
[data-colour-tint="false"] {
[data-darkmode-code="never"] {
/* colour variables for code light mode */
--background-code-block: var(--colour10);
--code-block-highlight: var(--colour30);
......@@ -176,7 +139,6 @@
/* Dark code mode */
[data-colour-tint="true"],
[data-darkmode-code="always"] {
/* colour variables for code dark mode */
--background-code-block: var(--mono100);
......@@ -197,9 +159,7 @@
/* get the CSS for the dark mode */
@media (prefers-color-scheme: dark) {
[data-darkmode-code="auto"],
[data-colour-tint="false"],
[data-colour-tint="true"] {
[data-darkmode-code="auto"] {
/* colour variables for code dark mode */
--background-code-block: var(--mono100);
--code-block-highlight: var(--mono80);
......
......@@ -225,10 +225,6 @@ body {
margin-top: calc(.7em + 5vh); /* put extra space between title and header on taller viewports */
}
.featured-image + .article-title {
margin-top: 0.7em; /* don’t use extra space when title follows image */
}
/*
(if grid is supported) */
@supports (display: grid) {
......@@ -273,76 +269,6 @@ body {
} /* end @supports (display: grid) */
/* LIST IMAGES
- - - - - - - - - - - - - */
/*
(if grid is supported) */
@supports (display: grid) {
/* when blog posts have images (as well as text, pull images into margin */
.layout-blog .with-list-images .posts {
grid-column: full;
display: grid;
grid-template-columns: var(--grid-template-columns);
column-gap: var(--column-gap-default);
}
.layout-blog .with-list-images .post {
grid-column: measure;
}
.layout-blog .with-list-images .photo {
grid-column: margins;
}
.layout-blog .with-list-images .photo {
display: grid;
grid-template-columns: var(--subgrid-template-columns);
column-gap: var(--column-gap-default);
}
.layout-blog .with-list-images .photo > * {
grid-column: 4 / span 4;
}
.layout-blog .with-list-images .featured-image {
grid-column: 2 / span 2; /* landscape and (exactly) square thumbnails span 2 columns */
grid-row: -1 / span 6;
}
.layout-blog .with-list-images .featured-image {
grid-column: 2 / span 2; /* portrait thumbnails span 2 columns */
}
@media (min-width: 75ch) {
.layout-blog .with-list-images .photo > * {
grid-column: 6 / span 4;
}
.layout-blog .with-list-images .featured-image {
grid-column: 3 / span 3; /* landscape and (exactly) square thumbnails span 3 columns */
grid-row: -1 / span 6;
}
.layout-blog .with-list-images .featured-image {
grid-column: 4 / span 2; /* portrait thumbnails span 2 columns */
}
}
} /* end @supports (display: grid) */
/* PHOTOBLOG LAYOUT
- - - - - - - - - - - - - - - - - - - - - - */
a.no-photo {
background: #ccc;
display: block;
height: 15em;
width: 100%;
}
/*
(if grid is supported) */
@supports (display: grid) {
......@@ -350,7 +276,7 @@ a.no-photo {
/* LIST VIEW
- - - - - - - - - - - - - */
.layout-photoblog .posts {
ul.photos {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(auto-fill, minmax(10em,1fr));
......@@ -358,58 +284,22 @@ a.no-photo {
margin-top: 1.5em;
}
ul.photos .post {
display: block;
}
@media (min-width: 65ch) {
.layout-photoblog .posts {
ul.photos {
grid-template-columns: repeat(auto-fill, minmax(15em,1fr));
}
}
.layout-photoblog .posts li {
ul.photos li {
margin-bottom: 0;
}
.layout-photoblog .posts li.has-portrait:not(.cropped) {
grid-row-end: span 2;
}
.layout-photoblog .posts li article {
display: block;
}
.layout-photoblog .posts img {
ul.photos img {
margin: 0;
}
} /* end @supports (display: grid) */
/* SINGLE VIEW
- - - - - - - - - - - - - */
/*
(if grid is supported) */
@supports (display: grid) {
.single.layout-photoblog article.has-landscape > .featured-image {
grid-column: margins;
}
@media (min-width: 65rem) {
.single.layout-photoblog article.has-portrait {
grid-template-columns: var(--subgrid-template-2columns);
grid-row: 1 / -1;
}
.single.layout-photoblog article.has-portrait > * {
grid-column: col1;
}
.single.layout-photoblog article.has-portrait > .featured-image {
grid-column: col2;
grid-row-end: span 8; /* hack to get image to span multiple rows */
}
}
} /* end @supports (display: grid) */
\ No newline at end of file
......@@ -18,19 +18,23 @@
float: left;
list-style-type: none;
line-height: 1;
margin: 0.25em 0;
margin: 0.25em;
text-align: center;
}
.pagination li a, .pagination li[aria-current="true"], .pagination .ellipsis {
.pagination li a {
display: block;
min-width: 1.5rem;
padding: 0.3em 0.25rem;
}
.pagination li[aria-current="true"] {
margin-right: 0.25rem;
margin-left: 0.25rem;
min-width: 1.5rem;
padding: 0.3em 0.25rem;
}
.pagination li .previous-page, .pagination li .next-page, .pagination li[aria-current="true"] {
.pagination .ellipsis, .pagination li .previous-page, .pagination li .next-page, .pagination li[aria-current="true"] {
padding: 0.3em 0.25rem;
}
......
......@@ -7,7 +7,6 @@
<body
class='{{- partial "classnames/body.html" . }}'
data-colour-theme='{{- partial "get-param/colour-theme.html" . }}'
data-colour-tint='{{- partial "get-param/colour-tint.html" . }}'
data-darkmode='{{- partial "get-param/darkmode.html" . }}'
data-darkmode-code='{{- partial "get-param/darkmode-code.html" . }}'
>
......
{{ define "main" }}
{{- /* template for homepage */ -}}
{{- $layout := partial "get-param/layout.html" . -}}
{{- $listShowImages := partial "get-param/list-images.html" . -}}
{{- /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -}}
{{- partial "home-intro.html" . }}
{{- /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -}}
{{- /* display any content found in _index.md of this section */ -}}
{{- if .Content }}
{{ partial "list-index-content.html" . }}
{{- end }}
{{- /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -}}
{{- /* get the posts for current context */ -}}
{{- $posts := .Pages }}
{{- if eq $layout "blog" -}}
{{- $posts = where site.RegularPages "Section" "eq" "posts" }}
{{- else if eq $layout "photoBlog" -}}
{{- $posts = where site.RegularPages "Section" "eq" "photos" }}
{{- end }}
{{- /* only display structure around posts if posts exist */ -}}
{{- if $posts }}
{{- /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -}}
{{- if eq $layout "blog" -}}
{{- /* If posts are set to groupPostsByDate, range over the posts and group by date */}}
{{- if eq .Site.Params.groupPostsByDate true -}}
{{- /* Group by year */}}
{{- range (.Paginate $posts).Pages.GroupByDate "2006" }}
<h2 class='year'>{{ .Key }}</h2>
{{- /* Group by month. */}}
{{- range .Pages.GroupByDate "January" }}
<h3 class='month'>{{ .Key }}</h3>
{{- /* Group by day */}}
{{- range .Pages.GroupByDate "02" }}
<h4 class='day'>{{ .Key }}</h4>
<ul class='posts'>
{{- range $index, $post := .Pages }}
{{- if eq $listShowImages true }}
{{- partial "photo-post.html" . }}
{{- else }}
{{- partial "post.html" . }}
{{- end }}
{{- end }}
</ul>
{{- end }}
{{- end }}
{{- end }}
{{- partial "paginator.html" . }}
{{- else }}
{{- /* If posts are not grouped, display posts in a simple list */ -}}
<ul class='posts'>
{{- range (.Paginate $posts).Pages }}
{{- if eq $listShowImages true }}
{{- partial "photo-post.html" . }}
{{- else }}
{{- partial "post.html" . }}
{{- end }}
{{- end }}
</ul>
{{- partial "paginator.html" . }}
{{- end }}
{{- /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -}}
{{- else if eq $layout "photoBlog" -}}
<ul class='posts'>
{{- range (.Paginate $posts).Pages }}
{{- partial "photo-post.html" . }}
{{- end }}
</ul>
{{- partial "paginator.html" . }}
{{- /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -}}
{{- else if eq $layout "pagedSite" -}}
{{- /* don’t display a list of posts on the pagedSite homepage */ -}}
{{- end }}
{{- end }}
{{- end }}
\ No newline at end of file
{{ define "main" }}
{{- /* template for section and taxonomy lists */ -}}
{{- /* template for home, section and taxonomy lists */ -}}
{{- $layout := partial "get-param/layout.html" . -}}
{{- $listShowImages := partial "get-param/list-images.html" . -}}
{{- /* check if the section has a listPost type (set in section’s _index.md frontmatter) */}}
{{- $cascadingListPost := partial "get-param/list-post.html" . -}}
{{- /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -}}
{{ partial "list-title.html" . }}
{{- /* check if the section has a specific number for to paginate posts into (otherwise defaults to 10, ignoring number set in site config) */ -}}
{{- $paginateNumber := partial "get-param/paginate.html" . -}}
{{- /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -}}
{{- /* display any content found in _index.md of this section */ -}}
{{- if .Content }}
{{ partial "list-index-content.html" . }}
{{ partial "list/list-index-content.html" . }}
{{- else }}
{{- /* otherwise just display section/taxonomy title*/ -}}
{{ partial "list/list-title.html" . }}
{{- end }}
......@@ -26,82 +31,15 @@
{{- /* only display structure around posts if posts exist */ -}}
{{- if $posts }}
{{- /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -}}
{{- if eq $layout "blog" -}}
{{- /* If posts are set to groupPostsByDate, range over the posts and group by date */}}
{{- if eq .Site.Params.groupPostsByDate true -}}
{{- /* Group by year */}}
{{- range (.Paginate $posts).Pages.GroupByDate "2006" }}
<h2 class='year'>{{ .Key }}</h2>
{{- /* Group by month. */}}
{{- range .Pages.GroupByDate "January" }}
<h3 class='month'>{{ .Key }}</h3>
{{- /* Group by day */}}
{{- range .Pages.GroupByDate "02" }}
<h4 class='day'>{{ .Key }}</h4>
<ul class='posts'>
{{- range $index, $post := .Pages }}
{{- if eq $listShowImages true }}
{{- partial "photo-post.html" . }}
{{- else }}
{{- partial "post.html" . }}
{{- end }}
{{- end }}
</ul>
{{- end }}
{{- end }}
{{- end }}
{{- partial "paginator.html" . }}
{{- else }}
{{- /* If posts are not grouped, display posts in a simple list */ -}}
<ul class='posts'>
{{- range (.Paginate $posts).Pages }}
{{- if eq $listShowImages true }}
{{- partial "photo-post.html" . }}
{{- else }}
{{- partial "post.html" . }}
{{- end }}
{{- end }}
</ul>
{{- partial "paginator.html" . }}
{{- /* Display posts in a simple list */ -}}
{{- /* If the section has a cascading list post type, set that as a (plural) classname */}}
<ul class='posts{{- if $cascadingListPost }} {{ $cascadingListPost | pluralize }}{{- end }}'>
{{- range (.Paginate ($posts) $paginateNumber).Pages }}
{{- partial "post.html" . }}
{{- end }}
</ul>
{{- /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -}}
{{- else if eq $layout "photoBlog" -}}
<ul class='posts'>
{{- range (.Paginate $posts).Pages }}
{{- partial "photo-post.html" . }}
{{- end }}
</ul>
{{- partial "paginator.html" . }}
{{- /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ -}}
{{- else if eq $layout "pagedSite" -}}
<ul class='posts'>
{{- range (.Paginate $posts).Pages }}
{{- if eq $listShowImages true }}
{{- partial "photo-post.html" . }}
{{- else }}
{{- partial "post.html" . }}
{{- end }}
{{- end }}
</ul>
{{- end }}
{{- partial "paginator.html" . }}
{{- end }}
......
{{ define "main" }}
{{- $layout := partial "get-param/layout.html" . -}}
{{- $imageResource := partial "get-param/feature-image.html" . -}}
{{- /* template for single post/page */ -}}
{{- /* if a feature image is used, apply relevant classnames to the article element */ -}}
{{- if ne $imageResource false }}
{{- $imageWidth := $imageResource.Width }}
{{- $imageHeight := $imageResource.Height }}
{{- $orientation := partial "get-param/image-orientation.html" (dict "imageWidth" $imageWidth "imageHeight" $imageHeight) -}}
<article class='{{- partial "classnames/photo.html" ( dict "orientation" $orientation ) }} {{ partial "classnames/title.html" . }}'>
{{- partial "feature-image.html" . -}}
{{- else }}
<article>
{{- end }}
<article>
<h1 class='article-title {{ partial "classnames/title.html" . }}'>{{ .Title }}</h1>
......
{{- if (isset .Params "categories")}}
<p class='secondary categories'>{{ i18n "categorised" }}
{{- /* if the post has categories, range over those categories */}}
{{- range $index, $categories := .Params.categories -}}
{{- /* if there’s more than one tag, separate them with commas */}}
{{- if gt $index 0 }}, {{ end }}
<a href='{{ "categories/" | relURL }}{{ . | urlize }}'>{{ . }}</a>
{{- end }}.</p>
{{- if isset .Params "categories" }}
<p class='secondary categories'>{{ i18n "categorised" }}
{{- /* if the post has categories, range over those categories */}}
{{- range $index, $categories := .Params.categories -}}
{{- /* if there’s more than one tag, separate them with commas */}}
{{- if gt $index 0 }}, {{ end }}
<a href='{{ "categories/" | relURL }}{{ . | urlize }}'>{{ . }}</a>
{{- end }}.
</p>
{{- end }}
\ No newline at end of file
{{- /* set body classes depending on the following conditions */}}
{{- if .IsHome }}home {{ end -}}
{{- if .IsPage }}single {{ end -}}
{{- if .IsPage }}single {{ .Title | urlize }}{{ end -}}
{{- if .IsNode }}list {{ end -}}
{{- $layout := partial "get-param/layout.html" . -}}layout-{{ lower $layout }}
{{- $listShowImages := partial "get-param/list-images.html" . -}}
{{- if eq $listShowImages true }} with-list-images{{ else }} without-list-images{{ end -}}
\ No newline at end of file
{{- $bodyClasses := partial "get-param/body-classes.html" . }} {{ lower $bodyClasses -}}
\ No newline at end of file
{{- /* set post classes depending on the following conditions */ -}}
post
{{- $layout := partial "get-param/layout.html" . }} layout-{{ lower $layout }}
\ No newline at end of file
{{if gt (len .Title) 40}}long-title{{end}}
\ No newline at end of file
{{ if gt (len .Title) 30 }}long-title{{ end }}
\ No newline at end of file
{{- /* show date unless showDate is false in post frontmatter or site type is pagedSite */}}
{{- if or ( ne .Params.showDate false ) (and (or (eq .Site.Params.layout "pagedSite") (eq .Params.layout "pagedSite")) (eq .Params.showDate true)) }}
{{- /* show date unless showDate is false in post frontmatter */}}
{{- if ( ne .Params.showDate false ) }}
<p class='date'>
<time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
......
{{- $widths := partial "get-param/image-widths.html" . -}}
{{- $imageResource := partial "get-param/feature-image.html" . -}}
{{- with .Resources }}
{{- with .GetMatch "feature.svg" }}