From ad19dc44c377369b7290462cc5ff627f066bf7e6 Mon Sep 17 00:00:00 2001 From: Hazem Krimi Date: Thu, 16 Nov 2023 16:59:45 +0100 Subject: [PATCH] Finish table of contents and pagination --- assets/css/baseof.css | 18 ++--- assets/css/partials/card.css | 6 +- assets/css/partials/pagination.css | 41 ++++++++++++ assets/css/partials/table-of-contents.css | 30 ++++++++- assets/css/single.css | 73 +++++++++++++++------ assets/icons/calendar.svg | 6 ++ assets/icons/clock.svg | 4 ++ assets/icons/share.svg | 7 ++ assets/js/baseof.js | 6 ++ content/blog/another-post/index.md | 21 ++++++ content/blog/test-blog-post/index.md | 21 ++++++ content/blog/test-blog/index.md | 2 +- content/projects/react-weather-app/index.md | 2 +- hugo.toml | 3 + layouts/_default/list.html | 4 +- layouts/_default/single.html | 55 +++++++++------- layouts/partials/pagination.html | 32 +++++++++ layouts/partials/table-of-contents.html | 9 ++- 18 files changed, 273 insertions(+), 67 deletions(-) create mode 100644 assets/css/partials/pagination.css create mode 100644 assets/icons/calendar.svg create mode 100644 assets/icons/clock.svg create mode 100644 assets/icons/share.svg create mode 100644 content/blog/another-post/index.md create mode 100644 content/blog/test-blog-post/index.md create mode 100644 layouts/partials/pagination.html diff --git a/assets/css/baseof.css b/assets/css/baseof.css index dbfe1f2..5a01b05 100644 --- a/assets/css/baseof.css +++ b/assets/css/baseof.css @@ -16,12 +16,12 @@ /* Colors */ --black: #131314; --white: white; - --crimson: #BD1839; - --light-gray: #E7E7E7; + --crimson: #bd1839; + --light-gray: #e7e7e7; /* Background colors */ - --dark-background: #1D1B1B; - --light-background: #FBFBFB; + --dark-background: #1d1b1b; + --light-background: #fbfbfb; /* Radiuses */ --card-radius: 1.875rem; @@ -59,7 +59,10 @@ body { #links .mail, #nav-toggler svg path, .arrow, -.eye { +.eye, +.calendar, +.clock, +.share { stroke: var(--text); } @@ -81,7 +84,6 @@ picture, video, canvas, svg { - display: block; max-width: 100%; } @@ -109,10 +111,10 @@ a { .vertical-separator { border-left: 1px solid var(--text); height: 24px; - opacity: .25; + opacity: 0.25; } hr { color: var(--text); - opacity: .25; + opacity: 0.25; } diff --git a/assets/css/partials/card.css b/assets/css/partials/card.css index 7533873..de1c110 100644 --- a/assets/css/partials/card.css +++ b/assets/css/partials/card.css @@ -36,11 +36,7 @@ .card .demo { display: inline-flex; align-items: center; -} - -.card .read-more svg, -.card .demo svg { - margin-left: 0.25rem; + column-gap: 0.25rem; } .card .demo { diff --git a/assets/css/partials/pagination.css b/assets/css/partials/pagination.css new file mode 100644 index 0000000..6641826 --- /dev/null +++ b/assets/css/partials/pagination.css @@ -0,0 +1,41 @@ +.pagination { + display: flex; + justify-content: end; + align-items: center; +} + +.pagination { + display: flex; + column-gap: 1rem; +} + +.pagination .pagination ul, +.pagination li { + list-style: none; +} + +.pagination a { + border-radius: 0.5625rem; + background-color: #8b8b8b; + color: var(--white); + padding: 0.25rem 0.75rem; + display: inline-flex; + justify-content: center; + align-items: center; + text-decoration: none; +} + +.pagination a.first, +.pagination a.last { + background-color: #606060; +} + +.pagination a.active { + background-color: #232323; +} + +@media only screen and (max-width: 768px) { + .pagination { + justify-content: center; + } +} diff --git a/assets/css/partials/table-of-contents.css b/assets/css/partials/table-of-contents.css index 1a9c91c..20f7fe5 100644 --- a/assets/css/partials/table-of-contents.css +++ b/assets/css/partials/table-of-contents.css @@ -1,3 +1,27 @@ -#TableOfContents ul { - list-style-type: none; -} \ No newline at end of file +:root { + --toc-light-background: #f2f2f2; + --toc-dark-background: #131212; +} + +#table-of-contents { + margin-top: 3rem; + height: 30rem; + max-height: 20rem; + padding: 1.2rem 1.6rem; + border-radius: 1.875rem; + background-color: var(--toc-background); +} + +#table-of-contents h3 { + margin-bottom: 1rem; +} + +#table-of-contents nav ul { + list-style-type: none; + padding-inline-start: 2rem; + margin-bottom: 0rem; +} + +#table-of-contents nav > ul:first-of-type { + padding: 0rem; +} diff --git a/assets/css/single.css b/assets/css/single.css index c688ea3..1426e31 100644 --- a/assets/css/single.css +++ b/assets/css/single.css @@ -1,39 +1,70 @@ +main #container { + display: grid; + grid-template-columns: auto 15rem; + column-gap: 2rem; +} + main #metadata { - margin-bottom: 2rem; + margin-bottom: 2rem; } main #metadata h1 { - margin-bottom: 1rem; + font-size: 3rem; + margin-bottom: 1rem; } main #metadata div { - display: flex; - justify-content: space-between; + min-width: 100%; + display: flex; + column-gap: 2rem; +} + +main #metadata div span { + display: inline-flex; + align-items: center; + column-gap: 0.25rem; +} + +main #metadata div #share { + display: none; } main #metadata #share { - cursor: pointer; + cursor: pointer; } -main #content { - display: flex; - column-gap: 2rem; +main h2, +main h3, +main h4 { + margin-bottom: 1rem; } -main h2, main h3, main h4 { - margin-bottom: 1rem; -} - -main p, main ul, main ol { - margin-bottom: 2rem; +main p, +main ul, +main ol, +main img, +main figure { + margin-bottom: 2rem; } @media only screen and (max-width: 1024px) { - main #content { - display: block; - } + main #metadata h1 { + font-size: 2.5rem; + } - main #content #TableOfContents { - display: none; - } -} \ No newline at end of file + main #container { + display: block; + } + + main #container #table-of-contents { + display: none; + } + + main #metadata div { + column-gap: 1rem; + } + + main #metadata div #share { + display: inline-flex; + } +} diff --git a/assets/icons/calendar.svg b/assets/icons/calendar.svg new file mode 100644 index 0000000..12334c5 --- /dev/null +++ b/assets/icons/calendar.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/icons/clock.svg b/assets/icons/clock.svg new file mode 100644 index 0000000..fdb927f --- /dev/null +++ b/assets/icons/clock.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/share.svg b/assets/icons/share.svg new file mode 100644 index 0000000..74e1bc7 --- /dev/null +++ b/assets/icons/share.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/js/baseof.js b/assets/js/baseof.js index ccbee89..164809c 100644 --- a/assets/js/baseof.js +++ b/assets/js/baseof.js @@ -67,6 +67,12 @@ function loadTheme() { ? 'var(--card-light-background)' : 'var(--card-dark-background)' ); + root.style.setProperty( + '--toc-background', + theme === 'light' + ? 'var(--toc-light-background)' + : 'var(--toc-dark-background)' + ); root.style.setProperty( '--about-card-background', theme === 'light' diff --git a/content/blog/another-post/index.md b/content/blog/another-post/index.md new file mode 100644 index 0000000..3e4d88d --- /dev/null +++ b/content/blog/another-post/index.md @@ -0,0 +1,21 @@ +--- +title: "Another blog post" +description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." +date: 2023-10-18 +--- + +## Hi + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor nulla sed mi faucibus, non commodo nulla malesuada. Aliquam sem lectus, sodales sit amet cursus ac, auctor quis dolor. Pellentesque ac metus vulputate, scelerisque nunc id, mollis est. Duis nec nisi feugiat, sagittis enim vitae, tincidunt metus. Nulla vitae laoreet quam. Integer tortor erat, dictum vel placerat ultricies, eleifend eu risus. Nam sit amet finibus dui. Cras malesuada ligula a maximus sagittis. Proin sed tortor consectetur, vestibulum mauris at, auctor orci. Quisque blandit lectus sollicitudin hendrerit euismod. + +### Greetings + +Praesent efficitur diam laoreet lacus congue, vitae finibus purus blandit. Maecenas ex turpis, vehicula ac varius a, porttitor in sem. Nulla in suscipit elit. Vestibulum id leo eget odio convallis consectetur. Nullam ac diam lobortis, efficitur erat venenatis, tristique ligula. Mauris dui nisi, facilisis et malesuada id, scelerisque in urna. Curabitur egestas lobortis interdum. Etiam convallis mi eu lectus consectetur, feugiat imperdiet sem gravida. Proin eget malesuada ipsum. Maecenas congue scelerisque magna. + +### Hello + +Nunc molestie lorem velit, in efficitur risus dictum vel. Integer porta odio in odio posuere consequat. Etiam accumsan, enim ac scelerisque ultricies, lorem quam ultrices ex, ut ullamcorper mi ante quis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut ex feugiat, bibendum felis interdum, finibus nulla. Aenean accumsan bibendum massa. Aenean nec enim ligula. In a cursus orci. Etiam accumsan nisl quis velit porta pellentesque. Morbi dignissim mattis vestibulum. Morbi posuere velit nec augue interdum, facilisis congue augue auctor. Suspendisse nec elit sit amet velit ultrices porta. + +Duis molestie venenatis rhoncus. Phasellus pulvinar odio vel nulla accumsan pretium eget at nunc. Sed convallis, orci at laoreet consequat, odio leo tincidunt sapien, eget ultricies tortor nisl at metus. Integer pretium odio in ipsum iaculis, sit amet pretium lacus vehicula. Etiam vel ex id nisl hendrerit consequat iaculis id metus. Donec scelerisque justo augue, sed accumsan velit elementum finibus. Cras in viverra ex, in faucibus diam. Sed volutpat lacus vel suscipit aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum ligula lacinia consectetur interdum. + +Fusce ultricies ex et volutpat elementum. Curabitur finibus iaculis erat, et venenatis lectus facilisis nec. Donec sollicitudin, sapien quis bibendum auctor, arcu nunc interdum enim, scelerisque aliquet enim neque eu neque. Fusce in turpis felis. Curabitur sapien mi, lobortis at hendrerit sit amet, maximus in nisi. Sed ac purus suscipit, laoreet lacus quis, congue leo. Cras imperdiet massa rutrum est dictum, quis convallis purus sollicitudin. Nulla eu nibh vel nisl accumsan ultrices. diff --git a/content/blog/test-blog-post/index.md b/content/blog/test-blog-post/index.md new file mode 100644 index 0000000..1c29058 --- /dev/null +++ b/content/blog/test-blog-post/index.md @@ -0,0 +1,21 @@ +--- +title: "Test blog post" +description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." +date: 2023-10-18 +--- + +## Hi + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor nulla sed mi faucibus, non commodo nulla malesuada. Aliquam sem lectus, sodales sit amet cursus ac, auctor quis dolor. Pellentesque ac metus vulputate, scelerisque nunc id, mollis est. Duis nec nisi feugiat, sagittis enim vitae, tincidunt metus. Nulla vitae laoreet quam. Integer tortor erat, dictum vel placerat ultricies, eleifend eu risus. Nam sit amet finibus dui. Cras malesuada ligula a maximus sagittis. Proin sed tortor consectetur, vestibulum mauris at, auctor orci. Quisque blandit lectus sollicitudin hendrerit euismod. + +### Greetings + +Praesent efficitur diam laoreet lacus congue, vitae finibus purus blandit. Maecenas ex turpis, vehicula ac varius a, porttitor in sem. Nulla in suscipit elit. Vestibulum id leo eget odio convallis consectetur. Nullam ac diam lobortis, efficitur erat venenatis, tristique ligula. Mauris dui nisi, facilisis et malesuada id, scelerisque in urna. Curabitur egestas lobortis interdum. Etiam convallis mi eu lectus consectetur, feugiat imperdiet sem gravida. Proin eget malesuada ipsum. Maecenas congue scelerisque magna. + +### Hello + +Nunc molestie lorem velit, in efficitur risus dictum vel. Integer porta odio in odio posuere consequat. Etiam accumsan, enim ac scelerisque ultricies, lorem quam ultrices ex, ut ullamcorper mi ante quis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut ex feugiat, bibendum felis interdum, finibus nulla. Aenean accumsan bibendum massa. Aenean nec enim ligula. In a cursus orci. Etiam accumsan nisl quis velit porta pellentesque. Morbi dignissim mattis vestibulum. Morbi posuere velit nec augue interdum, facilisis congue augue auctor. Suspendisse nec elit sit amet velit ultrices porta. + +Duis molestie venenatis rhoncus. Phasellus pulvinar odio vel nulla accumsan pretium eget at nunc. Sed convallis, orci at laoreet consequat, odio leo tincidunt sapien, eget ultricies tortor nisl at metus. Integer pretium odio in ipsum iaculis, sit amet pretium lacus vehicula. Etiam vel ex id nisl hendrerit consequat iaculis id metus. Donec scelerisque justo augue, sed accumsan velit elementum finibus. Cras in viverra ex, in faucibus diam. Sed volutpat lacus vel suscipit aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum ligula lacinia consectetur interdum. + +Fusce ultricies ex et volutpat elementum. Curabitur finibus iaculis erat, et venenatis lectus facilisis nec. Donec sollicitudin, sapien quis bibendum auctor, arcu nunc interdum enim, scelerisque aliquet enim neque eu neque. Fusce in turpis felis. Curabitur sapien mi, lobortis at hendrerit sit amet, maximus in nisi. Sed ac purus suscipit, laoreet lacus quis, congue leo. Cras imperdiet massa rutrum est dictum, quis convallis purus sollicitudin. Nulla eu nibh vel nisl accumsan ultrices. diff --git a/content/blog/test-blog/index.md b/content/blog/test-blog/index.md index 75ff27a..0836438 100644 --- a/content/blog/test-blog/index.md +++ b/content/blog/test-blog/index.md @@ -12,7 +12,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor nulla sed mi Praesent efficitur diam laoreet lacus congue, vitae finibus purus blandit. Maecenas ex turpis, vehicula ac varius a, porttitor in sem. Nulla in suscipit elit. Vestibulum id leo eget odio convallis consectetur. Nullam ac diam lobortis, efficitur erat venenatis, tristique ligula. Mauris dui nisi, facilisis et malesuada id, scelerisque in urna. Curabitur egestas lobortis interdum. Etiam convallis mi eu lectus consectetur, feugiat imperdiet sem gravida. Proin eget malesuada ipsum. Maecenas congue scelerisque magna. -## Hello +### Hello Nunc molestie lorem velit, in efficitur risus dictum vel. Integer porta odio in odio posuere consequat. Etiam accumsan, enim ac scelerisque ultricies, lorem quam ultrices ex, ut ullamcorper mi ante quis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut ex feugiat, bibendum felis interdum, finibus nulla. Aenean accumsan bibendum massa. Aenean nec enim ligula. In a cursus orci. Etiam accumsan nisl quis velit porta pellentesque. Morbi dignissim mattis vestibulum. Morbi posuere velit nec augue interdum, facilisis congue augue auctor. Suspendisse nec elit sit amet velit ultrices porta. diff --git a/content/projects/react-weather-app/index.md b/content/projects/react-weather-app/index.md index e930b8b..dbd305c 100644 --- a/content/projects/react-weather-app/index.md +++ b/content/projects/react-weather-app/index.md @@ -18,4 +18,4 @@ This is a project that I made as a step in the interview process for my final ye ## Screenshots -![Desktop](https://res.cloudinary.com/dun9hhyz1/image/upload/v1643548378/personal-website/portfolio/react-weather-app/screenshot_ueu2a4.png) +{{< figure src="https://res.cloudinary.com/dun9hhyz1/image/upload/v1643548378/personal-website/portfolio/react-weather-app/screenshot_ueu2a4.png" >}} \ No newline at end of file diff --git a/hugo.toml b/hugo.toml index 58ae418..f171260 100644 --- a/hugo.toml +++ b/hugo.toml @@ -1,5 +1,8 @@ languageCode = 'en-us' title = 'Hazem Krimi' +paginate = 1 +[taxonomies] + tag = 'tags' [params] formSpreeURL = 'https://formspree.io/f/xoqpgyge' dateFormat = '02 January 2006' diff --git a/layouts/_default/list.html b/layouts/_default/list.html index c0f696f..a641fa4 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -10,8 +10,10 @@ {{ .Content }}
- {{ range .Pages }} + {{ range .Paginator.Pages }} {{ partial "card.html" . }} {{ end }}
+ + {{ partial "pagination.html" . }} {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 286eb55..de03552 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -5,33 +5,40 @@ {{ end }} {{ define "main" }} - {{ partial "breadcrumb.html" . }} +
+
+ {{ partial "breadcrumb.html" . }} + +
+

{{ .Title }}

+
+ {{ readFile "assets/icons/calendar.svg" | safeHTML }} {{ .Date.Format .Site.Params.dateFormat }} + {{ readFile "assets/icons/clock.svg" | safeHTML }} {{ printf "%d minute(s) read" .ReadingTime }} + + {{ readFile "assets/icons/share.svg" | safeHTML }} + Share + +
+
+ +
+
+ {{ .Content }} +
+ +

Contact

+ {{ partial "contact-form.html" }} +
+
-
-

{{ .Title }}

-
- {{ .Date.Format .Site.Params.dateFormat }} - {{ printf "%d minutes read" .ReadingTime }} - - Share - -
-
- -
-
- {{ .Content }} -
{{ partial "table-of-contents.html" . }} -
+
-

Contact

- {{ partial "contact-form.html" }}