diff --git a/README.md b/README.md index 9102441d3..25910628d 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ zola serve This theme was inspired by: - [shadharon](https://github.com/syedzayyan/shadharon). tabi started as a fork of [syedzayyan](https://github.com/syedzayyan)'s theme. -- [Alfonso García's site](https://alfoncode.com/) +- [tailwind-nextjs-starter-blog](https://github.com/timlrx/tailwind-nextjs-starter-blog) - [tale-zola](https://github.com/aaranxu/tale-zola) - [internetVin's blog](https://internetvin.ghost.io) diff --git a/config.toml b/config.toml index d9fe76df9..cf5538474 100644 --- a/config.toml +++ b/config.toml @@ -16,9 +16,8 @@ highlight_code = true highlight_theme = "css" [extra] -use_cdn = false - -date_format = "" # If unset, uses format: "1st January 2049" +# If unset, uses format: "6 July 2049" ("%d %B %Y"). Don't leave it empty or dates won't appear. Either use a proper format or comment out the line. +# date_format = "%d %B %Y" # Custom separator used in title tag and posts metadata (between date, time to read, and tags). separator = "•" @@ -31,7 +30,7 @@ headerImage = "" # The icon is display besides the menu text but is not necessary. It needs to be placed under "menu_icon" in the static "folder" menu = [ - { name = "home", url = "$BASE_URL/" }, + { name = "blog", url = "$BASE_URL/blog" }, { name = "archive", url = "$BASE_URL/archive" }, { name = "tags", url = "$BASE_URL/tags" }, { name = "projects", url = "$BASE_URL/projects" }, diff --git a/content/_index.md b/content/_index.md index ed5befca2..79e48a8e4 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,12 +1,13 @@ +++ -paginate_by = 4 path = "/" -title = "Posts" +title = "Latest posts" sort_by = "date" template = "section.html" [extra] header = {title = "Hello! I'm tabi~", img = "$BASE_URL/img/main.webp" } +section_path = "blog/_index.md" +max_posts = 4 +++ Tabi is a simple theme for [Zola](https://www.getzola.org/). It aims to be a personal page and home to blog posts. It features responsive design, dark and light modes, and high performance. diff --git a/content/blog/_index.md b/content/blog/_index.md new file mode 100644 index 000000000..79a1185c2 --- /dev/null +++ b/content/blog/_index.md @@ -0,0 +1,8 @@ ++++ +paginate_by = 5 +path = "/blog" +title = "Blog" +sort_by = "date" +template = "section.html" +insert_anchor_links = "left" ++++ diff --git a/content/almost-no-js.md b/content/blog/almost-no-js.md similarity index 77% rename from content/almost-no-js.md rename to content/blog/almost-no-js.md index 5bb3ed2b3..304e5f6dd 100644 --- a/content/almost-no-js.md +++ b/content/blog/almost-no-js.md @@ -1,6 +1,8 @@ +++ title = "Almost no JavaScript" -date = "2023-01-06" +date = 2023-01-06 +description = "JavaScript is only used when HTML and CSS aren't enough." + [taxonomies] tags = ["showcase"] +++ diff --git a/content/markdown.md b/content/blog/markdown.md similarity index 82% rename from content/markdown.md rename to content/blog/markdown.md index 9769b294e..477b4f238 100644 --- a/content/markdown.md +++ b/content/blog/markdown.md @@ -1,6 +1,9 @@ +++ title = "Markdown examples" -date = "2023-01-31" +date = 2023-01-31 +updated = 2023-03-01 +description = "This post showcases some examples of Markdown formatting, including a table, code blocks and tags, quotes, tables, and footnotes." + [taxonomies] tags = ["markdown", "showcase"] +++ diff --git a/content/blog/one_more.md b/content/blog/one_more.md new file mode 100644 index 000000000..5915c751f --- /dev/null +++ b/content/blog/one_more.md @@ -0,0 +1,9 @@ ++++ +title = "One more post" +date = 2021-05-30 +description = "The only reason this post exists is to show the pagination in the blog section." ++++ + +> ‘Look at you,’ she said, not without affection. ‘Sitting there like an owl. Melancholy bloody gargoyle. You mawkish bugger. You don’t get any insight, you know, just because it’s night. Just because some buildings have their lights on.’ +> +> — China Miéville, The City & the City diff --git a/content/security.md b/content/blog/security.md similarity index 89% rename from content/security.md rename to content/blog/security.md index bda261395..a6e84a588 100644 --- a/content/security.md +++ b/content/blog/security.md @@ -1,6 +1,8 @@ +++ title = "Secure by default" -date = "2023-02-22" +date = 2023-02-22 +description = "tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory." + [taxonomies] tags = ["security", "showcase"] +++ diff --git a/content/shortcodes.md b/content/blog/shortcodes.md similarity index 90% rename from content/shortcodes.md rename to content/blog/shortcodes.md index 6d2e8fa63..64ed2fd09 100644 --- a/content/shortcodes.md +++ b/content/blog/shortcodes.md @@ -2,6 +2,8 @@ title = "Custom shortcodes" date = 2023-02-19 updated = 2023-02-27 +description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered." + [taxonomies] tags = ["showcase", "shortcodes"] +++ diff --git a/content/toc.md b/content/blog/toc.md similarity index 97% rename from content/toc.md rename to content/blog/toc.md index 6194c54b6..25482c9ac 100644 --- a/content/toc.md +++ b/content/blog/toc.md @@ -1,6 +1,8 @@ +++ title = "Table of Contents" -date = "2022-11-01" +date = 2022-11-01 +description = "A post showcasing the optional Table of Contents." + [taxonomies] tags = ["showcase", "markdown"] @@ -13,14 +15,14 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue ## Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -### Heading 3 +### Heading 3.1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4 +#### Heading 4.1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4 +#### Heading 4.2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -### Heading 3 +### Heading 3.2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. #### Heading 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. @@ -31,16 +33,16 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue ## Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -### Heading 3 +### Heading 3.1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4 +#### Heading 4.1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4 +#### Heading 4.2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -### Heading 3 +### Heading 3.2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4 +#### Heading 4.1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4 +#### Heading 4.1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. diff --git a/sass/main.scss b/sass/main.scss index fd30dc0e3..b9dd2ce64 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -32,7 +32,9 @@ @import 'parts/home-banner.scss'; @import 'parts/footer.scss'; @import 'parts/theme-switch.scss'; +@import 'parts/posts_list.scss'; @import 'parts/tags.scss'; +@import 'parts/pagination.scss'; @import 'syntax/syntax-ayu-dark.scss'; :root { @@ -54,13 +56,13 @@ --bg-2: #fefefe; --hover-color: white; --primary-color: #91D8E4; - --secondary-color: rgb(158, 158, 158); + --secondary-color: #d7d7d7; --links: #78cfcb; --text-color: #222226; --text-color-2: #45454b; + --text-color-high-contrast: #151516; --quote-color: #355f62; --border-color: rgb(114, 114, 114); - --light-border-color: rgba(255, 255, 255, 0.1); --meta-color: #757575; --accent-color: #087E96; --table-header-color: #BFEAF5; @@ -71,15 +73,13 @@ --bg-1: rgba(133, 133, 133, 0.5); --bg-2: rgba(23, 23, 23, 100%); --primary-color: #7cc4d1; - --hover-color: white; - --secondary-color: #696969; + --secondary-color: #4a4a4a; --links: #8fdfe5; --text-color: #eae9e9; --text-color-2: #c7c7c7; + --text-color-high-contrast: #f8f8f8; --quote-color: #a9c5c7; - --code: #ef476f; --border-color: rgb(0, 0, 0); - --light-border-color: rgba(255, 255, 255, 0.1); --meta-color: #BBBBBB; --accent-color: #91e0ee; --table-header-color: #b7e4e4; @@ -130,6 +130,7 @@ article{ margin-left: 0; margin-right: 0; font-weight: 550; + color: var(--text-color-high-contrast); } h1 { @@ -205,18 +206,12 @@ p { max-width: var(--small-layout-width); } } -@media all and (min-width: 640px) { +@media all and (min-width: 600px) { html { font-size: 16.5px; } } -@media all and (min-width: 720px) { - html { - font-size: 17px; - } -} - @media all and (min-width: 960px) { html { font-size: 20px; diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss index a48794f32..0fdaba448 100644 --- a/sass/parts/_archive.scss +++ b/sass/parts/_archive.scss @@ -1,7 +1,7 @@ .archive { .listing-title { font-size: 1.5rem; - opacity: 0.8; + opacity: 0.9; margin-bottom: 1rem; } @@ -12,7 +12,7 @@ .post-time { width: 4rem; .date { - opacity: 0.4; + opacity: 0.5; } } } diff --git a/sass/parts/_cards.scss b/sass/parts/_cards.scss index ff6cb0a86..f7bbb0f7c 100644 --- a/sass/parts/_cards.scss +++ b/sass/parts/_cards.scss @@ -41,44 +41,3 @@ gap: 18px; } } - -.bloglist-title{ - display: block; - font-size: 1.2em; - margin-top: 1.2em; - margin-bottom: 0.83em; - margin-left: 0; - margin-right: 0; - font-weight: bold; -} - -.bloglist-table-row { - padding: 2%; - background-color: var(--navbar-color); - transition: 300ms; - width: 28%; - margin-right: 1%; - margin-top: 1%; -} -.bloglist-container { - display: flex; - flex-wrap: wrap; - padding-bottom: 1rem; -} -.bloglist-table-row:hover { - box-shadow: 0.5rem 0.5rem 0 var(--border-color); -} -.bloglist-links { - text-decoration: none; -} -.bloglist-table-row-data { - padding: 10px; -} -.bloglist-table-row-date { - font-size: 12px; -} -@media only screen and (max-width: 600px) { - .bloglist-table-row { - width: 100%; - } -} diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index 5378fb33a..fc189c2fd 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -56,13 +56,13 @@ header { justify-content: right; color: var(--text-color); padding: 0.66rem; - transition: 100ms; } .home-title { font-size: 1.7em; font-weight: 450; - padding-right: 0.33rem; + padding: 0.12rem; + margin-left: -0.12rem; border: none; color: var(--accent-color); text-decoration: none; @@ -77,18 +77,18 @@ header { padding-top: 0.7vmin; padding-bottom: 3vmin; line-height: 1.4rem; -} - -.meta a { + + a { color: var(--meta-color); text-decoration-color: none; font-weight: inherit; text-decoration: none; -} + } -.meta ul, li{ - list-style-type: none; - display: inline; + ul, li { + list-style-type: none; + display: inline; + } } .card-meta { diff --git a/sass/parts/_home-banner.scss b/sass/parts/_home-banner.scss index 64010bf6f..30e93e3e4 100644 --- a/sass/parts/_home-banner.scss +++ b/sass/parts/_home-banner.scss @@ -24,7 +24,7 @@ .home-banner-header { margin-bottom: 1rem; font-size: 2.8rem; - font-weight: 600; + font-weight: 550; } #banner-home-subtitle { @@ -36,7 +36,7 @@ } #banner-home-subtitle p { - font-family: 'Inter', Arial, Helvetica, sans-serif; + font-family: var(--sans-serif-font); font-size: 1rem; } diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss index e2e01c5ac..42e5e62f0 100644 --- a/sass/parts/_misc.scss +++ b/sass/parts/_misc.scss @@ -31,6 +31,30 @@ iframe { margin-bottom: 3vmin; } +.zola-anchor { + font-size: 1rem; + position: absolute; + margin-left: -1.9em; + padding-right: 0.45em; + padding-left: 0.4em; + opacity: 0; +} + +h1:hover .zola-anchor, +h2:hover .zola-anchor, +h3:hover .zola-anchor, +h4:hover .zola-anchor, +h5:hover .zola-anchor, +h6:hover .zola-anchor { + opacity: 1; +} + +h1, h2, h3, h4, h5, h6 { + a:hover { + background-color: transparent; + } +} + ul { margin-top: 0; } @@ -40,10 +64,13 @@ ul { } .title-container { - border-bottom: var(--secondary-color) solid 0.5px; padding-bottom: 15px; } +.bottom-divider { + border-bottom: var(--secondary-color) solid 0.5px; +} + ::-moz-selection { background: var(--primary-color); color: var(--hover-color); @@ -77,21 +104,33 @@ blockquote { } a { - color: var(--text-color); - text-decoration-color: var(--links); - font-weight: 580; -} - -p a { color: var(--accent-color); text-decoration: inherit; font-weight: inherit; + position: relative; } a:hover { background-color: var(--primary-color); color: var(--hover-color); } + +a:not(.no-hover-padding, .zola-anchor)::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: -0.15em; + right: -0.15em; + z-index: -1; + background-color: var(--primary-color); + opacity: 0; +} + +a:not(.no-hover-padding):hover::before { + opacity: 1; +} + /* Remove post list padding */ @media screen and (max-width: 600px) { .list > ul { diff --git a/sass/parts/_pagination.scss b/sass/parts/_pagination.scss new file mode 100644 index 000000000..cef76c73f --- /dev/null +++ b/sass/parts/_pagination.scss @@ -0,0 +1,19 @@ +.pagination { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 2rem; + font-size: 1em; + list-style: none; + padding: 0; + + .page-item .disabled { + opacity: 0.5; + pointer-events: none; + } + + .page-numbers { + font-size: 0.9rem; + color: var(--meta-color); + } +} diff --git a/sass/parts/_posts_list.scss b/sass/parts/_posts_list.scss new file mode 100644 index 000000000..68026acf6 --- /dev/null +++ b/sass/parts/_posts_list.scss @@ -0,0 +1,79 @@ +.bloglist-container { + display: grid; + grid-template-columns: 1fr; +} + +.bloglist-row { + background-color: var(--navbar-color); + display: flex; + align-items: flex-start; + padding: 2.5rem 0; + + .date { + font-size: 0.85rem; + font-weight: 300; + color: var(--meta-color); + width: 14.5rem; + } + + .bloglist-tags { + margin-top: -0.5rem; + + .tag { + margin-right: 0.7rem; + font-size: 0.7rem; + font-weight: 400; + text-transform: uppercase; + } + } + + .bloglist-content { + flex: 1; + + + .bloglist-title { + font-size: 1.2em; + font-weight: bold; + + a { + color: var(--text-color-high-contrast); + font-weight: 550; + + &:hover { + color: var(--hover-color); + } + } + } + + .description { + margin: 0.5rem 0 1rem; + color: var(--text-color); + font-family: var(--sans-serif-font); + font-size: 0.9rem; + font-weight: 250; + line-height: 1.5rem; + } + } +} + +.all-posts { + font-size: 1.3rem; + font-weight: 350; +} + +@media only screen and (max-width: 1100px) { + .bloglist-row { + flex-direction: column; + align-items: flex-start; + padding: 2rem 0; + } + + .date { + margin-bottom: 0; + width: 100%; + } + + .bloglist-content { + width: 100%; + } +} diff --git a/sass/parts/_tags.scss b/sass/parts/_tags.scss index 9e5125a33..598ed8c78 100644 --- a/sass/parts/_tags.scss +++ b/sass/parts/_tags.scss @@ -6,7 +6,6 @@ .taglist-table-row { padding: 2%; background-color: var(--navbar-color); - transition: 300ms; width: 28%; margin-right: 1%; margin-top: 1%; @@ -52,3 +51,16 @@ margin: 0 } } + +.tag-cloud { + margin-top: 4vmin; + + ul { + list-style: none; + padding: 0; + margin: 0; + } + .tags-item { + margin-top: 1rem; + } +} diff --git a/sass/parts/_theme-switch.scss b/sass/parts/_theme-switch.scss index 7379cf7a4..b4ac3a85c 100644 --- a/sass/parts/_theme-switch.scss +++ b/sass/parts/_theme-switch.scss @@ -11,7 +11,6 @@ height: 1rem; position: absolute; left: 0px; - transition: all 0.3s ease-in-out; display: flex; justify-content: center; align-items: center; @@ -19,7 +18,6 @@ width: 100%; height: auto; position: absolute; - transition: all 0.2s ease-in-out; border: none; } .sun { diff --git a/templates/403.html b/templates/403.html deleted file mode 100644 index 168a80cc1..000000000 --- a/templates/403.html +++ /dev/null @@ -1,8 +0,0 @@ -{% extends "page.html" %} - -{% block main_content %} -
- {{ macros_page_header::page_header(title="403")}} - forbidden -
-{% endblock main_content %} diff --git a/templates/404.html b/templates/404.html index facb826e3..9dfad1025 100644 --- a/templates/404.html +++ b/templates/404.html @@ -1,8 +1,10 @@ {% extends "page.html" %} {% block main_content %} +
{{ macros_page_header::page_header(title="404")}} not found
+ {% endblock main_content %} diff --git a/templates/archive.html b/templates/archive.html index 9f3913b75..7f7333f35 100644 --- a/templates/archive.html +++ b/templates/archive.html @@ -1,10 +1,12 @@ -{% extends "base.html" %} {% block main_content %} +{% extends "base.html" %} + +{% block main_content %} {{ macros_page_header::page_header(title=section.title) }}
+ {% endblock main_content %} diff --git a/templates/base.html b/templates/base.html index 4e9c3246c..7cec6b3dc 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,12 +1,10 @@ {% import "macros/list_posts.html" as macros_list_posts %} -{% import "macros/format_date.html" as macros_format_date %} {% import "macros/page_header.html" as macros_page_header %} {% import "macros/page_desc.html" as macros_page_desc %} {% import "macros/content.html" as macros_content %} {% import "macros/cards_posts.html" as macros_cards_posts %} -{% import "macros/list_title.html" as macros_list_title %} {% import "macros/set_title.html" as macros_set_title %} - +{% import "macros/paginate.html" as macros_paginate %} diff --git a/templates/cards.html b/templates/cards.html index 86980011d..4f02fa55b 100644 --- a/templates/cards.html +++ b/templates/cards.html @@ -18,18 +18,6 @@ {% if paginator %} - + {{ macros_paginate::paginate() }} {% endif %} {% endblock main_content %} diff --git a/templates/macros/cards_posts.html b/templates/macros/cards_posts.html index 43d2cf7d0..4edb704ec 100644 --- a/templates/macros/cards_posts.html +++ b/templates/macros/cards_posts.html @@ -1,4 +1,5 @@ {% macro cards_posts(pages) %} +
{%- for page in pages %}
@@ -21,7 +22,7 @@

{%- if page.date %} - {{ macros_format_date::format_date(date=page.date) }} + {{ page.date | date(format=config.extra.date_format | default (value="%d %B %Y")) }} {% endif -%} {% if page.draft %} DRAFT @@ -38,4 +39,5 @@

{% endfor -%}

+ {% endmacro cards_posts %} diff --git a/templates/macros/content.html b/templates/macros/content.html index e29ef2e18..4c04b58d3 100644 --- a/templates/macros/content.html +++ b/templates/macros/content.html @@ -1,4 +1,5 @@ {% macro content(page) %} + {% set separator = config.extra.separator | default(value="•") %}
@@ -13,7 +14,7 @@ {% endif %} {% if page.date %} - {{ macros_format_date::format_date(date=page.date) }} + {{ page.date | date(format=config.extra.date_format | default (value="%d %B %Y")) }} {{ separator }} {% endif %} @@ -30,7 +31,7 @@ {% endif %} {% if page.updated %} -
Last updated on {{ macros_format_date::format_date(date=page.updated) }} +
Last updated on {{ page.updated | date(format=config.extra.date_format | default (value="%d %B %Y")) }} {% endif %} @@ -81,4 +82,5 @@

Table of Contents

+ {% endmacro content %} diff --git a/templates/macros/format_date.html b/templates/macros/format_date.html deleted file mode 100644 index 33f930e21..000000000 --- a/templates/macros/format_date.html +++ /dev/null @@ -1,22 +0,0 @@ -{% macro format_date(date) %} -{% if config.extra.date_format %} - {{ date | date(format=config.extra.date_format) }} -{% else %} - {% set day = date | date(format='%-d') | int %} - {% if day in [11, 12, 13] %} - {% set suffix = "th" %} - {% else %} - {% set last_digit = day % 10 %} - {% if last_digit == 1 %} - {% set suffix = "st" %} - {% elif last_digit == 2 %} - {% set suffix = "nd" %} - {% elif last_digit == 3 %} - {% set suffix = "rd" %} - {% else %} - {% set suffix = "th" %} - {% endif %} - {% endif %} - {{ date | date(format="%-d") }}{{ suffix }} {{ date | date(format="%B %Y") }} -{% endif %} -{% endmacro %} diff --git a/templates/macros/list_posts.html b/templates/macros/list_posts.html index 5ed79287d..e10f52fa9 100644 --- a/templates/macros/list_posts.html +++ b/templates/macros/list_posts.html @@ -1,38 +1,55 @@ -{% macro list_posts(pages) %} -
- {% for page in pages %} -
-
- {{ page.title }} -
+{% macro list_posts(posts, max) %} -
- {% if page.date %} - {{ macros_format_date::format_date(date=page.date) }} +
+ {% for post in posts %} + {% if loop.index <= max %} + {% if loop.index == max %} +
+ {% elif loop.last %} +
+ {% else %} +
{% endif %} -
- {{ page.reading_time }} min read - {% if page.draft %} - DRAFT + {% if post.date %} +
+ {{ post.date | date(format=config.extra.date_format | default (value="%d %B %Y")) }} +
{% endif %} -
-
-
- {% if page.description %} - {{ page.description }} - {% elif page.summary %} - {{ page.summary | safe }}… - {% else %} - {% set hide_read_more = true %} - {% endif %} -
+
+
+ {{ post.title }} +
- {% if not hide_read_more %} - Read more ⟶ + {% if post.taxonomies.tags %} +
+ {% for tag in post.taxonomies.tags %} + {{ tag }} + {% endfor %} +
+ {% endif %} + +
+ {% if post.description %} + {{ post.description }} + {% elif post.summary %} + {{ post.summary | safe }}… + {% endif %} +
+ + Read more → +
+
+ {% endif %} + {% if not loop.last %} + {% if loop.index == max %} +
+ All posts ⟶ +
+ {% endif %} {% endif %} - {% endfor %}
+ {% endmacro %} diff --git a/templates/macros/list_title.html b/templates/macros/list_title.html deleted file mode 100644 index e0d4ae1cb..000000000 --- a/templates/macros/list_title.html +++ /dev/null @@ -1,16 +0,0 @@ -{% macro list_title(pages, tag_name=false) %} -{% if tag_name %} -
Tag {{ term.name }}
-{% else %} -

All articles

-{% endif %} - - -{% endmacro list_title %} diff --git a/templates/macros/page_desc.html b/templates/macros/page_desc.html index d35fbf19b..2449145a8 100644 --- a/templates/macros/page_desc.html +++ b/templates/macros/page_desc.html @@ -1,4 +1,5 @@ {% macro page_desc(desc, page) %} + + {% endmacro %} diff --git a/templates/macros/page_header.html b/templates/macros/page_header.html index 6e71fc7f9..e0a19bde3 100644 --- a/templates/macros/page_header.html +++ b/templates/macros/page_header.html @@ -1,5 +1,7 @@ {% macro page_header(title) %} -
+ +
{{ title }}
+ {% endmacro page_header %} diff --git a/templates/macros/paginate.html b/templates/macros/paginate.html new file mode 100644 index 000000000..7e01af6f1 --- /dev/null +++ b/templates/macros/paginate.html @@ -0,0 +1,31 @@ +{% macro paginate() %} + +{% if paginator %} +
    + {% if paginator.previous %} +
  • + ← Prev +
    • + {% else %} +
  • + ← Prev +
    • + {% endif %} + +
  • + {{ paginator.current_index }} of {{ paginator.number_pagers }} +
    • + + {% if paginator.next %} +
  • + Next → +
    • + {% else %} +
  • + Next → +
    • + {% endif %} +
+{% endif %} + +{% endmacro paginate %} diff --git a/templates/macros/set_title.html b/templates/macros/set_title.html index c91ffaff1..364635a93 100644 --- a/templates/macros/set_title.html +++ b/templates/macros/set_title.html @@ -16,7 +16,7 @@ {% set suffix = page.title %} {% elif term.name %} {# Individual tags. #} - {% set suffix = term.name ~ " tag" %} + {% set suffix = term.name %} {% elif taxonomy.name %} {# List of tags. #} {% set suffix = taxonomy.name | capitalize %} diff --git a/templates/page.html b/templates/page.html index 071651e8b..dc989d7d3 100644 --- a/templates/page.html +++ b/templates/page.html @@ -1,5 +1,7 @@ {% extends "base.html" %} {% block main_content %} + {{ macros_content::content(page=page)}} + {% endblock main_content %} diff --git a/templates/partials/footer.html b/templates/partials/footer.html index ef3592252..868e78cf1 100644 --- a/templates/partials/footer.html +++ b/templates/partials/footer.html @@ -1,14 +1,14 @@
- +
diff --git a/templates/partials/header.html b/templates/partials/header.html index 37a61e0fc..68e73d9ae 100644 --- a/templates/partials/header.html +++ b/templates/partials/header.html @@ -8,7 +8,7 @@ {# Favicon #} {% if config.extra.favicon %} - + {% endif %} {# RSS #} @@ -17,16 +17,16 @@ {% if config.extra.stylesheets %} - {% for stylesheet in config.extra.stylesheets %} - - {% endfor %} + {% for stylesheet in config.extra.stylesheets %} + + {% endfor %} {% endif %} {% if is_404 %} - + {% else %} - + {% endif %} diff --git a/templates/partials/nav.html b/templates/partials/nav.html index 88b281a73..78a695a8b 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -1,26 +1,26 @@
-
+ + diff --git a/templates/section.html b/templates/section.html index a2cc00c6e..f3f95dd98 100644 --- a/templates/section.html +++ b/templates/section.html @@ -1,40 +1,32 @@ {% extends "base.html" %} {% block main_content %} + {% if section.extra.section_path -%} -{% set section = get_section(path=section.extra.section_path) %} + {% set extra_section = get_section(path=section.extra.section_path) %} {% endif -%} {%- if section.extra.header %} - {{ macros_page_desc::page_desc(desc=section.extra.header, page=section) }} + {{ macros_page_desc::page_desc(desc=section.extra.header, page=section) }} {% endif -%}
-
- {{ macros_page_header::page_header(title=section.title) }} -
- {%- if paginator %} - {%- set show_pages = paginator.pages -%} - {% else %} - {%- set show_pages = section.pages -%} - {% endif -%} - - {{ macros_list_posts::list_posts(pages=show_pages) }} +
+ {{ macros_page_header::page_header(title=section.title) }} +
+ + {%- if paginator %} + {%- set pages = paginator.pages -%} + {% else %} + {%- set pages = extra_section.pages -%} + {% endif -%} + + {% set max = section.extra.max_posts | default(value=999999) %} + {{ macros_list_posts::list_posts(posts=pages, max=max) }}
{% if paginator %} - + {{ macros_paginate::paginate() }} {% endif %} + {% endblock main_content %} diff --git a/templates/tags/list.html b/templates/tags/list.html index 02dc0e354..1ed99f74c 100644 --- a/templates/tags/list.html +++ b/templates/tags/list.html @@ -2,20 +2,19 @@ {% block main_content %} -{{ macros_page_header::page_header(title="Tags") }} +{{ macros_page_header::page_header(title="All tags")}} -
    - {% for term in terms -%} -
    -
    - {{ term.name }} +
    +
      + {% for term in terms %} +
      +
    • + {{ term.name }} + – {{ term.pages | length }} post{{ term.pages | length | pluralize }} +
      • - -
      - {{ term.pages | length }} post{{ term.pages | length | pluralize }} -
      -
    - {% endfor %} -
+ {% endfor %} + +
{% endblock main_content %} diff --git a/templates/tags/single.html b/templates/tags/single.html index 841ff4174..b1f7ef864 100644 --- a/templates/tags/single.html +++ b/templates/tags/single.html @@ -2,6 +2,15 @@ {% block main_content %} -{{ macros_list_title::list_title(pages=term.pages, tag_name=term.name) }} +{{ macros_page_header::page_header(title=term.name | title) }} + +{% set max = section.extra.max_posts | default(value=999999) %} +{{ macros_list_posts::list_posts(posts=term.pages, max=max) }} + + {% endblock main_content %}