diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 0deffba..1c59a2b 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -93,6 +93,7 @@ .tc-l { text-align: center; } + // Centering the header logo #headerlogo { display: block; @@ -249,3 +250,194 @@ h5 { font-weight: 600; margin-bottom: 0.75rem; } + +// Container styles for blog listing +.blog-listing { + display: flex; + flex-direction: column; + align-items: center; + margin: 2rem auto; + padding: 1rem; + max-width: 1000px; + + // Responsive padding and spacing + @media (min-width: 768px) { + padding: 2rem; + } +} + +// Section title styling +.blog-title { + font-size: 2rem; + font-weight: 700; + color: #333; + margin-bottom: 1.5rem; + text-align: center; + + @media (min-width: 768px) { + font-size: 2.5rem; + } +} + +// Main article content +.blog-content { + font-size: 1.125rem; + line-height: 1.6; + color: #555; + text-align: center; + margin-bottom: 2rem; + max-width: 700px; +} + +// Post card styling +.post-card { + width: 100%; + max-width: 800px; + margin-bottom: 1.5rem; + background-color: #fff; + border: 1px solid #e2e2e2; + border-radius: 10px; + transition: all 0.3s ease; + + &:hover { + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + transform: translateY(-3px); + } + + .post-card-inner { + padding: 1rem; + + @media (min-width: 768px) { + padding: 1.5rem; + } + } + + // Title within each post card + h3 { + font-size: 1.25rem; + font-weight: 600; + color: #0070f3; + margin-bottom: 0.75rem; + + &:hover { + color: #0056b3; + } + + @media (min-width: 768px) { + font-size: 1.5rem; + } + } + + // Excerpt or content preview + p { + font-size: 1rem; + color: #555; + line-height: 1.6; + margin-bottom: 1rem; + + @media (min-width: 768px) { + font-size: 1.125rem; + } + } + + // Button to read more + .read-more { + display: inline-block; + margin-top: 1rem; + padding: 0.5rem 1rem; + font-size: 0.9rem; + font-weight: 500; + color: #fff; + background-color: #0070f3; + border-radius: 5px; + transition: all 0.2s ease; + + &:hover { + background-color: #0056b3; + } + } +} + +// Pagination section +.pagination { + display: flex; + justify-content: center; + margin-top: 2rem; + + a { + padding: 0.5rem 1rem; + margin: 0 0.5rem; + font-size: 1rem; + font-weight: 500; + color: #0070f3; + background-color: #fff; + border: 1px solid #0070f3; + border-radius: 5px; + transition: all 0.2s ease; + + &:hover { + color: #fff; + background-color: #0070f3; + } + } +} + +/* taxonomy-terms.scss */ + +/* Styles for the taxonomy listing */ +.taxonomy-listing { + .taxonomy-description { + text-align: center; + } + + .term-header { + text-align: center; + margin-top: 2rem; + } + + .taxonomy-terms__container { + margin-bottom: 2rem; + } + + .term-post { + background-color: #f9f9f9; /* Background color for articles */ + border-radius: 8px; /* Rounded corners */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */ + padding: 1.5rem; /* Padding for content */ + transition: box-shadow 0.2s ease; /* Smooth transition for hover effects */ + + /* Change shadow on hover */ + &:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Darker shadow on hover */ + } + + /* Title and summary styles */ + h1 { + font-size: 1.5rem; /* Title size */ + color: #333; /* Title color */ + } + + a { + color: inherit; /* Inherit color from parent */ + text-decoration: none; /* Remove underline */ + &:hover { + text-decoration: underline; /* Underline on hover */ + } + } + + /* Styling for section label */ + span { + font-weight: bold; /* Make section label bold */ + color: #777; /* Grey color for section label */ + display: block; /* Make section label block */ + margin-bottom: 0.5rem; /* Margin for spacing */ + } + + /* Additional link styling */ + .nested-links { + margin-top: 0.5rem; /* Margin for spacing */ + font-size: 0.95rem; /* Font size for nested links */ + line-height: 1.6; /* Line height for readability */ + } + } +} diff --git a/i18n/en.toml b/i18n/en.toml index 4e5638d..dcb8d1c 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -35,7 +35,7 @@ other = "An email address is required." other = "Send" [taxonomyPageList] -other = "Below you will find pages that utilize the taxonomy term “{{ .Title }}”" +other = "Articles tagged with “{{ .Title }}”" [readingTime] one = "One minute read" diff --git a/i18n/fr.toml b/i18n/fr.toml index d1c9bcc..256225c 100644 --- a/i18n/fr.toml +++ b/i18n/fr.toml @@ -35,7 +35,7 @@ other = "Une adresse e-mail est requise." other = "Envoyer" [taxonomyPageList] -other = "Ci-dessous se trouvent les pages utilisant le terme taxonomique “{{ .Title }}”" +other = "Les articles étiquettés “{{ .Title }}”" [readingTime] one = "Une minute de lecture" diff --git a/layouts/index.html b/layouts/index.html index fea5ab8..e829632 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,6 +1,5 @@ {{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define "main" }} -
{{ .Params.synopsis | markdownify }}
@@ -54,5 +53,4 @@