feat: Add post-content styles and improve breadcrumb and link styles

This commit is contained in:
kbe
2025-08-19 12:05:46 +02:00
parent 78c41cc071
commit e662c7cda4
12 changed files with 103 additions and 10885 deletions

View File

@@ -29,24 +29,18 @@
&:not(:last-child) { &:not(:last-child) {
margin-right: 0.5rem; margin-right: 0.5rem;
&::after { // &::after {
content: ""; // content: "/";
display: inline-block; // display: inline-block;
width: 0; // color: #6c757d;
height: 0; // margin-left: 0.75rem;
border-left: 4px solid #6c757d; // opacity: 0.7;
border-top: 3px solid transparent; // font-weight: 500;
border-bottom: 3px solid transparent;
margin-left: 0.75rem;
opacity: 0.7;
@media (max-width: 576px) { // @media (max-width: 576px) {
margin-left: 0.5rem; // margin-left: 0.5rem;
border-left-width: 3px; // }
border-top-width: 2px; // }
border-bottom-width: 2px;
}
}
} }
a { a {
@@ -122,8 +116,8 @@
.breadcrumb { .breadcrumb {
.breadcrumb-item { .breadcrumb-item {
&:not(:last-child)::after { &:not(:last-child):not(:only-child)::after {
border-left-color: #adb5bd; color: #adb5bd;
} }
a { a {

View File

@@ -1,15 +1,15 @@
// //
// Button styles // // Button styles //
// //
a { // a {
color: get-color("dark", 0.9); // color: get-color("dark", 0.9);
text-decoration: none; // text-decoration: none;
@include transition(linear 0.1s); // @include transition(linear 0.1s);
&:hover { // &:hover {
color: get-color("dark"); // color: get-color("dark");
text-decoration: none; // text-decoration: none;
} // }
} // }
button { button {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;

View File

@@ -0,0 +1,5 @@
.post-content {
p {
line-height: 2rem;
}
}

View File

@@ -1,6 +1,31 @@
// //
// Text Link Styles // // Text Link Styles //
// //
a {
// color: #007bff;
// color: get-color("dark", 0.8);
color: #000;
text-decoration: none;
&:hover {
color: #0056b3;
text-decoration: none;
}
}
.post-content {
a {
// color: #007bff;
color: get-color("dark", 0.8);
text-decoration: underline;
&:hover {
color: #0056b3;
text-decoration: none;
}
}
}
*[class*='text-link-'] { *[class*='text-link-'] {
color: get-color("dark", 0.9); color: get-color("dark", 0.9);
&:hover, &:focus { &:hover, &:focus {

View File

@@ -40,6 +40,7 @@
@import "elements/testimonial"; @import "elements/testimonial";
@import "elements/text-link"; @import "elements/text-link";
@import "elements/timeline"; @import "elements/timeline";
@import "elements/post-content";
// //
// Import Components // // Import Components //

File diff suppressed because it is too large Load Diff

View File

@@ -14,8 +14,6 @@
{{ range . }} {{ range . }}
<li><a href="/categories/{{ . | urlize }}">{{ . }}</a></li> <li><a href="/categories/{{ . | urlize }}">{{ . }}</a></li>
{{ end }} {{ end }}
{{ else }}
<li><a href="/categories/non-classe">Non classé</a></li>
{{ end }} {{ end }}
<li><a href="#">{{ .Date.Format "Jan 2, 2006" }}</a></li> <li><a href="#">{{ .Date.Format "Jan 2, 2006" }}</a></li>
</ul> </ul>

View File

@@ -9,7 +9,6 @@
<!-- Home/Accueil with SEO --> <!-- Home/Accueil with SEO -->
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="{{ "/" | relLangURL }}" itemprop="item" title="{{ i18n "home" | default "Accueil" }}"> <a href="{{ "/" | relLangURL }}" itemprop="item" title="{{ i18n "home" | default "Accueil" }}">
<i class="fas fa-home" aria-hidden="true"></i>
<span itemprop="name">{{ i18n "home" | default "Accueil" }}</span> <span itemprop="name">{{ i18n "home" | default "Accueil" }}</span>
</a> </a>
<meta itemprop="position" content="1" /> <meta itemprop="position" content="1" />

View File

@@ -18,4 +18,4 @@
"devDependencies": { "devDependencies": {
"sass": "^1.69.5" "sass": "^1.69.5"
} }
} }

View File

@@ -54,14 +54,20 @@ function generateContent() {
// Decode HTML entities in the content and clean up HTML tags // Decode HTML entities in the content and clean up HTML tags
let contentHtml = he.decode(post.content.rendered); let contentHtml = he.decode(post.content.rendered);
// Convert absolute URLs in a href to relative URLs // Convert absolute URLs in a href to relative URLs (only for wp.mistergeek.net)
contentHtml = contentHtml.replace(/<a\s+[^>]*href="([^"]+)"[^>]*>/g, (match, href) => { contentHtml = contentHtml.replace(/<a\s+[^>]*href="([^"]+)"[^>]*>/g, (match, href) => {
// Check if the href is an absolute URL (starts with http:// or https://) // Check if the href is an absolute URL containing wp.mistergeek.net
if (href.startsWith('http://') || href.startsWith('https://')) { if (href.startsWith('http://') || href.startsWith('https://')) {
// Extract the path part of the URL try {
const url = new URL(href); const url = new URL(href);
// Return the modified a tag with relative URL if (url.hostname === 'wp.mistergeek.net' || url.hostname === 'www.wp.mistergeek.net') {
return match.replace(href, url.pathname); // Only convert wp.mistergeek.net URLs to relative paths
return match.replace(href, url.pathname);
}
} catch (error) {
// If URL parsing fails, return the original href
console.warn('Failed to parse URL:', href, error);
}
} }
return match; return match;
}); });
@@ -105,14 +111,20 @@ ${contentHtml.trim()}`;
// Decode HTML entities in the content and clean up HTML tags // Decode HTML entities in the content and clean up HTML tags
let contentHtml = he.decode(page.content.rendered); let contentHtml = he.decode(page.content.rendered);
// Convert absolute URLs in a href to relative URLs // Convert absolute URLs in a href to relative URLs (only for wp.mistergeek.net)
contentHtml = contentHtml.replace(/<a\s+[^>]*href="([^"]+)"[^>]*>/g, (match, href) => { contentHtml = contentHtml.replace(/<a\s+[^>]*href="([^"]+)"[^>]*>/g, (match, href) => {
// Check if the href is an absolute URL (starts with http:// or https://) // Check if the href is an absolute URL containing wp.mistergeek.net
if (href.startsWith('http://') || href.startsWith('https://')) { if (href.startsWith('http://') || href.startsWith('https://')) {
// Extract the path part of the URL try {
const url = new URL(href); const url = new URL(href);
// Return the modified a tag with relative URL if (url.hostname === 'wp.mistergeek.net' || url.hostname === 'www.wp.mistergeek.net') {
return match.replace(href, url.pathname); // Only convert wp.mistergeek.net URLs to relative paths
return match.replace(href, url.pathname);
}
} catch (error) {
// If URL parsing fails, return the original href
console.warn('Failed to parse URL:', href, error);
}
} }
return match; return match;
}); });

View File

@@ -1884,17 +1884,6 @@ i {
overflow: hidden; overflow: hidden;
} }
a {
color: rgba(18, 21, 24, 0.9);
text-decoration: none;
-webkit-transition: linear 0.1s;
transition: linear 0.1s;
}
a:hover {
color: rgb(18, 21, 24);
text-decoration: none;
}
button { button {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
@@ -5383,6 +5372,24 @@ button.mfp-close:hover {
border-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2);
} }
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #0056b3;
text-decoration: none;
}
.post-content a {
color: rgba(18, 21, 24, 0.8);
text-decoration: underline;
}
.post-content a:hover {
color: #0056b3;
text-decoration: none;
}
*[class*=text-link-] { *[class*=text-link-] {
color: rgba(18, 21, 24, 0.9); color: rgba(18, 21, 24, 0.9);
} }
@@ -5861,6 +5868,10 @@ button.mfp-close:hover {
background: white; background: white;
} }
.post-content p {
line-height: 2rem;
}
.blog-card-wrapper { .blog-card-wrapper {
position: relative; position: relative;
background-position: center center; background-position: center center;
@@ -7098,25 +7109,6 @@ button.mfp-close:hover {
.breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child) { .breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child) {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child)::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid #6c757d;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
margin-left: 0.75rem;
opacity: 0.7;
}
@media (max-width: 576px) {
.breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child)::after {
margin-left: 0.5rem;
border-left-width: 3px;
border-top-width: 2px;
border-bottom-width: 2px;
}
}
.breadcrumb-wrapper .breadcrumb .breadcrumb-item a { .breadcrumb-wrapper .breadcrumb .breadcrumb-item a {
color: #495057; color: #495057;
text-decoration: none; text-decoration: none;
@@ -7179,8 +7171,8 @@ button.mfp-close:hover {
background: linear-gradient(135deg, #343a40 0%, #495057 100%); background: linear-gradient(135deg, #343a40 0%, #495057 100%);
border-bottom-color: #6c757d; border-bottom-color: #6c757d;
} }
.breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child)::after { .breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child):not(:only-child)::after {
border-left-color: #adb5bd; color: #adb5bd;
} }
.breadcrumb-wrapper .breadcrumb .breadcrumb-item a { .breadcrumb-wrapper .breadcrumb .breadcrumb-item a {
color: #dee2e6; color: #dee2e6;

File diff suppressed because one or more lines are too long