diff --git a/README.md b/README.md index 9102441..2591062 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 d9fe76d..cf55384 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 ed5befc..79e48a8 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 0000000..79a1185 --- /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 5bb3ed2..304e5f6 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 9769b29..477b4f2 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 0000000..5915c75 --- /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 bda2613..a6e84a5 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 6d2e8fa..64ed2fd 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 6194c54..25482c9 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 fd30dc0..b9dd2ce 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 a48794f..0fdaba4 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 ff6cb0a..f7bbb0f 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 5378fb3..fc189c2 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 64010bf..30e93e3 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 e2e01c5..42e5e62 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 0000000..cef76c7 --- /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 0000000..68026ac --- /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 9e5125a..598ed8c 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 7379cf7..b4ac3a8 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 168a80c..0000000 --- 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 facb826..9dfad10 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 9f3913b..7f7333f 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 4e9c324..7cec6b3 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 8698001..4f02fa5 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 43d2cf7..4edb704 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 e29ef2e..4c04b58 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 @@
+ {% endmacro content %} diff --git a/templates/macros/format_date.html b/templates/macros/format_date.html deleted file mode 100644 index 33f930e..0000000 --- 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 5ed7928..e10f52f 100644 --- a/templates/macros/list_posts.html +++ b/templates/macros/list_posts.html @@ -1,38 +1,55 @@ -{% macro list_posts(pages) %} +{% macro list_posts(posts, max) %} +
- {% for page in pages %} -
-
- {{ page.title }} -
- -
- {% if page.date %} - {{ macros_format_date::format_date(date=page.date) }} - {% endif %} - -
- {{ page.reading_time }} min read - {% if page.draft %} - DRAFT - {% endif %} -
- -
-
- {% if page.description %} - {{ page.description }} - {% elif page.summary %} - {{ page.summary | safe }}… + {% for post in posts %} + {% if loop.index <= max %} + {% if loop.index == max %} +
+ {% elif loop.last %} +
{% else %} - {% set hide_read_more = true %} +
{% endif %} -
- {% if not hide_read_more %} - Read more ⟶ + {% if post.date %} +
+ {{ post.date | date(format=config.extra.date_format | default (value="%d %B %Y")) }} +
+ {% endif %} + +
+
+ {{ post.title }} +
+ + {% 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 e0d4ae1..0000000 --- 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 d35fbf1..2449145 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 6e71fc7..e0a19bd 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 0000000..7e01af6 --- /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 c91ffaf..364635a 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 071651e..dc989d7 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 ef35922..868e78c 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 37a61e0..68e73d9 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 88b281a..78a695a 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 a2cc00c..f3f95dd 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_page_header::page_header(title=section.title) }} +
- {{ macros_list_posts::list_posts(pages=show_pages) }} + {%- 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 02dc0e3..1ed99f7 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 841ff41..b1f7ef8 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 %}