diff --git a/db-snapshots/db-snapshot.sql b/db-snapshots/db-snapshot.sql index 5f548a36..143e5bf6 100644 --- a/db-snapshots/db-snapshot.sql +++ b/db-snapshots/db-snapshot.sql @@ -407,4 +407,4 @@ UNLOCK TABLES; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; /*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */; --- Dump completed on 2025-11-28 16:10:45 +-- Dump completed on 2025-11-28 16:12:52 diff --git a/wp-content/themes/homeproz/404.php b/wp-content/themes/homeproz/404.php new file mode 100644 index 00000000..394997a2 --- /dev/null +++ b/wp-content/themes/homeproz/404.php @@ -0,0 +1,43 @@ + + +
+
+
+
+

404

+

Page Not Found

+
+ +
+

The page you're looking for doesn't exist or has been moved.

+

Let's get you back on track:

+ + +
+ + +
+
+
+ +*:first-child{margin-top:0}.entry-content>*:last-child{margin-bottom:0}.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{margin-top:2rem}.entry-content ul,.entry-content ol{margin-bottom:1rem;padding-left:1.5rem}.entry-content ul li,.entry-content ol li{margin-bottom:.5rem}.entry-content blockquote{margin:1.5rem 0;padding:1rem 1.5rem;border-left:4px solid var(--color-accent);background-color:var(--color-bg-card)}.entry-content blockquote p:last-child{margin-bottom:0}.entry-content table{width:100%;margin-bottom:1rem;border-collapse:collapse}.entry-content table th,.entry-content table td{padding:.75rem;border:1px solid var(--color-border);text-align:left}.entry-content table th{background-color:var(--color-bg-card);font-weight:600;color:var(--color-text)}.entry-content img{max-width:100%;height:auto;border-radius:.25rem}.entry-content code{padding:.125rem .375rem;background-color:var(--color-bg-card);border-radius:.25rem;font-size:.875em}.entry-content pre{margin-bottom:1rem;padding:1rem;background-color:var(--color-bg-card);border-radius:.25rem;overflow-x:auto}.entry-content pre code{padding:0;background:none}.page-links{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--color-border);font-weight:500}.page-links .page-numbers{display:inline-block;padding:.25rem .5rem;margin:0 .25rem;background-color:var(--color-bg-card);border-radius:.25rem;color:var(--color-text-muted);text-decoration:none}.page-links .page-numbers.current,.page-links .page-numbers:hover{background-color:var(--color-accent);color:#fff}.archive-header{margin-bottom:2rem;padding:2rem 0;border-bottom:1px solid var(--color-border)}.archive-title{margin-bottom:0}.posts-grid{display:grid;grid-template-columns:1fr;gap:2rem;padding:2rem 0}@media (min-width: 768px){.posts-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.posts-grid{grid-template-columns:repeat(3,1fr)}}.post-card{display:flex;flex-direction:column}.post-card-image{display:block;aspect-ratio:16/10;overflow:hidden}.post-card-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.post-card-content{display:flex;flex-direction:column;flex-grow:1;padding:1.25rem}.post-card-header{margin-bottom:.75rem}.post-card-meta{margin-bottom:.5rem}.post-card-meta time{font-size:.8125rem;color:var(--color-text-muted)}.post-card-title{font-family:var(--font-body);font-size:1.125rem;font-weight:600;line-height:1.4;margin-bottom:0}.post-card-title a{color:var(--color-text);text-decoration:none}.post-card-title a:hover{color:var(--color-accent-light)}.post-card-excerpt{flex-grow:1;margin-bottom:1rem}.post-card-excerpt p{font-size:.9375rem;color:var(--color-text-muted);margin-bottom:0;line-height:1.6}.post-card-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:var(--color-accent-light);text-decoration:none}.post-card-link:hover{color:var(--color-accent-hover)}.post-card-link svg{width:16px;height:16px}.pagination,.nav-links{display:flex;justify-content:center;align-items:center;gap:.5rem;padding:2rem 0;flex-wrap:wrap}.pagination .page-numbers,.nav-links .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .75rem;background-color:var(--color-bg-card);border-radius:.25rem;color:var(--color-text-muted);text-decoration:none;font-size:.875rem;font-weight:500}.pagination .page-numbers.current,.nav-links .page-numbers.current{background-color:var(--color-accent);color:#fff}.pagination .page-numbers:hover:not(.current):not(.dots),.nav-links .page-numbers:hover:not(.current):not(.dots){background-color:var(--color-border);color:var(--color-text)}.pagination .page-numbers.dots,.nav-links .page-numbers.dots{background:none;cursor:default}.pagination .prev,.pagination .next,.nav-links .prev,.nav-links .next{padding:0 1rem}.no-posts{text-align:center;padding:4rem 0;color:var(--color-text-muted)}.single-post{padding:2rem 0 4rem;max-width:800px}.post-header{margin-bottom:2rem}.post-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.875rem;color:var(--color-text-muted)}.post-meta time{color:var(--color-text-muted)}.post-meta .meta-separator{color:var(--color-border)}.post-meta .post-categories a{color:var(--color-accent-light);text-decoration:none}.post-meta .post-categories a:hover{color:var(--color-accent-hover)}.post-title{font-size:2.5rem;margin-bottom:0}@media (max-width: 768px){.post-title{font-size:2rem}}.post-featured-image{margin-bottom:2rem;border-radius:.5rem;overflow:hidden}.post-featured-image img{width:100%;height:auto;display:block}.post-footer{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--color-border)}.post-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.post-tags .tags-label{font-size:.875rem;font-weight:500;color:var(--color-text-muted)}.post-tags .tag-link{display:inline-block;padding:.25rem .75rem;background-color:var(--color-bg-card);border-radius:.25rem;font-size:.8125rem;color:var(--color-text-muted);text-decoration:none}.post-tags .tag-link:hover{background-color:var(--color-accent);color:#fff}.post-navigation{margin-top:3rem;padding:1.5rem 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.post-navigation .nav-links{display:grid;grid-template-columns:1fr;gap:1.5rem}@media (min-width: 640px){.post-navigation .nav-links{grid-template-columns:1fr 1fr}}.post-navigation .nav-previous a,.post-navigation .nav-next a{display:block;text-decoration:none}.post-navigation .nav-next{text-align:right}.post-navigation .nav-subtitle{display:block;font-size:.8125rem;color:var(--color-text-muted);margin-bottom:.25rem}.post-navigation .nav-title{display:block;font-size:1rem;font-weight:500;color:var(--color-text);line-height:1.4}.post-navigation a:hover .nav-title{color:var(--color-accent-light)}.comments-area{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--color-border)}.comments-title{margin-bottom:1.5rem}.comment-list{list-style:none;margin:0;padding:0}.comment-list .comment{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--color-border)}.comment-list .comment:last-child{border-bottom:none}.comment-list .comment-body{display:flex;gap:1rem}.comment-list .comment-author{flex-shrink:0}.comment-list .comment-author img{border-radius:50%}.comment-list .comment-content{flex-grow:1}.comment-list .fn{font-weight:600;color:var(--color-text)}.comment-list .comment-metadata{margin-bottom:.5rem;font-size:.8125rem;color:var(--color-text-muted)}.comment-list .comment-metadata a{color:var(--color-text-muted);text-decoration:none}.comment-list .comment-metadata a:hover{color:var(--color-accent-light)}.comment-respond{margin-top:2rem}.comment-reply-title{margin-bottom:1rem}.comment-form label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--color-text)}.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{margin-bottom:1rem}.comment-form .form-submit{margin-top:1rem}.error-404{text-align:center;padding:4rem 0;max-width:600px;margin:0 auto}.error-header{margin-bottom:2rem}.error-title{font-size:8rem;line-height:1;color:var(--color-accent);margin-bottom:.5rem}@media (max-width: 640px){.error-title{font-size:5rem}}.error-subtitle{font-size:1.5rem;font-weight:500;color:var(--color-text);margin-bottom:0}.error-content{margin-bottom:2rem}.error-content p{font-size:1rem;color:var(--color-text-muted)}.error-actions{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}.error-search{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--color-border)}.error-search p{margin-bottom:1rem;color:var(--color-text-muted)}.search-form{display:flex;max-width:400px;margin:0 auto}.search-form .search-field{flex-grow:1;border-radius:.25rem 0 0 .25rem}.search-form .search-submit{flex-shrink:0;padding:.75rem 1.25rem;background-color:var(--color-accent);color:#fff;border:none;border-radius:0 .25rem .25rem 0;font-weight:600;cursor:pointer}.search-form .search-submit:hover{background-color:var(--color-accent-hover)}:root{--color-bg-dark: #0A0A0A;--color-bg-card: #161616;--color-accent: #9F3730;--color-accent-hover: #C8473F;--color-accent-light: #BF524B;--color-text: #F5F5F5;--color-text-muted: #B0B0B0;--color-border: #2A2A2A;--color-success: #2E7D32;--color-warning: #F9A825;--color-sold: #757575;--font-display: "Abril Fatface", Georgia, serif;--font-body: "Inter", "Droid Sans", Arial, sans-serif;--container-max: 1200px;--container-padding: 1.5rem;--transition-fast: .15s ease}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--color-bg-dark);color:var(--color-text-muted);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--color-text);font-weight:400;line-height:1.2;margin-bottom:1rem}h1{font-size:3rem}h2{font-size:2.25rem}h3{font-size:1.875rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1.125rem}p{margin-bottom:1rem}a{color:var(--color-accent-light);text-decoration:none}a:hover{color:var(--color-accent-hover)}.container{max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding)}.site-main{min-height:50vh;padding:2rem 0}.btn,.comment-form .form-submit input[type=submit]{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;font-family:var(--font-body);font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;border-radius:.25rem;border:none;cursor:pointer}.btn-primary,.comment-form .form-submit input[type=submit]{background-color:var(--color-accent);color:#fff}.btn-primary:hover,.comment-form .form-submit input[type=submit]:hover{background-color:var(--color-accent-hover);color:#fff}.btn-secondary{background-color:transparent;border:2px solid var(--color-accent);color:var(--color-accent)}.btn-secondary:hover{background-color:var(--color-accent);color:#fff}.badge{display:inline-block;padding:.25rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-radius:.25rem}.badge-success{background-color:var(--color-success);color:#fff}.badge-warning{background-color:var(--color-warning);color:#000}.badge-muted{background-color:var(--color-sold);color:#fff}.card{background-color:var(--color-bg-card);border-radius:.5rem;overflow:hidden}input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],textarea,select{width:100%;padding:.75rem 1rem;background-color:var(--color-bg-card);border:1px solid var(--color-border);border-radius:.25rem;color:var(--color-text);font-family:var(--font-body);font-size:1rem}input[type=text]::-moz-placeholder,input[type=email]::-moz-placeholder,input[type=tel]::-moz-placeholder,input[type=number]::-moz-placeholder,input[type=search]::-moz-placeholder,textarea::-moz-placeholder,select::-moz-placeholder{color:var(--color-sold)}input[type=text]::placeholder,input[type=email]::placeholder,input[type=tel]::placeholder,input[type=number]::placeholder,input[type=search]::placeholder,textarea::placeholder,select::placeholder{color:var(--color-sold)}input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=number]:focus,input[type=search]:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-accent)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-0{margin-top:0}.mb-0{margin-bottom:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.alignwide{max-width:calc(var(--container-max) + 200px)}.alignfull{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}.wp-block-image img{max-width:100%;height:auto}@media (max-width: 768px){:root{--container-padding: 1rem}h1{font-size:2.25rem}h2{font-size:1.875rem}h3{font-size:1.5rem}} diff --git a/wp-content/themes/homeproz/index.php b/wp-content/themes/homeproz/index.php index 4ba9642f..b5fad66a 100644 --- a/wp-content/themes/homeproz/index.php +++ b/wp-content/themes/homeproz/index.php @@ -2,38 +2,48 @@ /** * Main template file * - * This is the most generic template file in a WordPress theme - * and one of the two required files for a theme (the other being style.css). + * This is the most generic template file in a WordPress theme. + * Used for blog archive and as a fallback for other templates. * * @package HomeProz */ +// Prevent direct access +if (!defined('ABSPATH')) { + exit; +} + get_header(); ?>
- -
> -
- ', ''); ?> -
+
+ +
+

+
+ -
- -
-
- -

- + +
+ +
+ + '← Previous', + 'next_text' => 'Next →', + 'mid_size' => 2, + )); ?> + + +

+ +
+ +
+
+ +
+
+ + + +
+
+ '← Previous%title', + 'next_text' => 'Next →%title', + )); + + // Comments + if (comments_open() || get_comments_number()) : + comments_template(); + endif; + endwhile; + ?> +
+
+ + + +
> + + + 'lazy')); ?> + + + +
+
+ +
+ +
+ + + ', ''); ?> +
+ +
+ +
+ + + Read More + + +
+
diff --git a/wp-content/themes/homeproz/template-parts/content/content-card.scss b/wp-content/themes/homeproz/template-parts/content/content-card.scss new file mode 100644 index 00000000..b406cedd --- /dev/null +++ b/wp-content/themes/homeproz/template-parts/content/content-card.scss @@ -0,0 +1,171 @@ +/** + * Post Card Styles + * + * @package HomeProz + */ + +// Archive Header +.archive-header { + margin-bottom: 2rem; + padding: 2rem 0; + border-bottom: 1px solid var(--color-border); +} + +.archive-title { + margin-bottom: 0; +} + +// Posts Grid +.posts-grid { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; + padding: 2rem 0; + + @media (min-width: 768px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (min-width: 1024px) { + grid-template-columns: repeat(3, 1fr); + } +} + +// Post Card +.post-card { + display: flex; + flex-direction: column; +} + +.post-card-image { + display: block; + aspect-ratio: 16 / 10; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } +} + +.post-card-content { + display: flex; + flex-direction: column; + flex-grow: 1; + padding: 1.25rem; +} + +.post-card-header { + margin-bottom: 0.75rem; +} + +.post-card-meta { + margin-bottom: 0.5rem; + + time { + font-size: 0.8125rem; + color: var(--color-text-muted); + } +} + +.post-card-title { + font-family: var(--font-body); + font-size: 1.125rem; + font-weight: 600; + line-height: 1.4; + margin-bottom: 0; + + a { + color: var(--color-text); + text-decoration: none; + + &:hover { + color: var(--color-accent-light); + } + } +} + +.post-card-excerpt { + flex-grow: 1; + margin-bottom: 1rem; + + p { + font-size: 0.9375rem; + color: var(--color-text-muted); + margin-bottom: 0; + line-height: 1.6; + } +} + +.post-card-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-accent-light); + text-decoration: none; + + &:hover { + color: var(--color-accent-hover); + } + + svg { + width: 16px; + height: 16px; + } +} + +// Pagination +.pagination, +.nav-links { + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; + padding: 2rem 0; + flex-wrap: wrap; + + .page-numbers { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 40px; + height: 40px; + padding: 0 0.75rem; + background-color: var(--color-bg-card); + border-radius: 0.25rem; + color: var(--color-text-muted); + text-decoration: none; + font-size: 0.875rem; + font-weight: 500; + + &.current { + background-color: var(--color-accent); + color: white; + } + + &:hover:not(.current):not(.dots) { + background-color: var(--color-border); + color: var(--color-text); + } + + &.dots { + background: none; + cursor: default; + } + } + + .prev, + .next { + padding: 0 1rem; + } +} + +// No posts message +.no-posts { + text-align: center; + padding: 4rem 0; + color: var(--color-text-muted); +} diff --git a/wp-content/themes/homeproz/template-parts/content/content-page.php b/wp-content/themes/homeproz/template-parts/content/content-page.php new file mode 100644 index 00000000..321d5f8b --- /dev/null +++ b/wp-content/themes/homeproz/template-parts/content/content-page.php @@ -0,0 +1,29 @@ + + +
> + + +
+ '', + )); + ?> +
+
diff --git a/wp-content/themes/homeproz/template-parts/content/content-page.scss b/wp-content/themes/homeproz/template-parts/content/content-page.scss new file mode 100644 index 00000000..97948242 --- /dev/null +++ b/wp-content/themes/homeproz/template-parts/content/content-page.scss @@ -0,0 +1,129 @@ +/** + * Page Content Styles + * + * @package HomeProz + */ + +.page-content { + padding: 2rem 0 4rem; +} + +.page-header { + margin-bottom: 2rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--color-border); +} + +.page-title { + margin-bottom: 0; +} + +.entry-content { + max-width: 800px; + + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + + // Headings within content + h2, h3, h4, h5, h6 { + margin-top: 2rem; + } + + // Lists + ul, ol { + margin-bottom: 1rem; + padding-left: 1.5rem; + + li { + margin-bottom: 0.5rem; + } + } + + // Blockquotes + blockquote { + margin: 1.5rem 0; + padding: 1rem 1.5rem; + border-left: 4px solid var(--color-accent); + background-color: var(--color-bg-card); + + p:last-child { + margin-bottom: 0; + } + } + + // Tables + table { + width: 100%; + margin-bottom: 1rem; + border-collapse: collapse; + + th, td { + padding: 0.75rem; + border: 1px solid var(--color-border); + text-align: left; + } + + th { + background-color: var(--color-bg-card); + font-weight: 600; + color: var(--color-text); + } + } + + // Images + img { + max-width: 100%; + height: auto; + border-radius: 0.25rem; + } + + // Code + code { + padding: 0.125rem 0.375rem; + background-color: var(--color-bg-card); + border-radius: 0.25rem; + font-size: 0.875em; + } + + pre { + margin-bottom: 1rem; + padding: 1rem; + background-color: var(--color-bg-card); + border-radius: 0.25rem; + overflow-x: auto; + + code { + padding: 0; + background: none; + } + } +} + +// Page links (for paginated content) +.page-links { + margin-top: 2rem; + padding-top: 1rem; + border-top: 1px solid var(--color-border); + font-weight: 500; + + .page-numbers { + display: inline-block; + padding: 0.25rem 0.5rem; + margin: 0 0.25rem; + background-color: var(--color-bg-card); + border-radius: 0.25rem; + color: var(--color-text-muted); + text-decoration: none; + + &.current, + &:hover { + background-color: var(--color-accent); + color: white; + } + } +} diff --git a/wp-content/themes/homeproz/template-parts/content/content-single.php b/wp-content/themes/homeproz/template-parts/content/content-single.php new file mode 100644 index 00000000..652ab501 --- /dev/null +++ b/wp-content/themes/homeproz/template-parts/content/content-single.php @@ -0,0 +1,72 @@ + + +
> +
+ + + ', ''); ?> +
+ + +
+ +
+ + +
+ '', + )); + ?> +
+ + +
diff --git a/wp-content/themes/homeproz/template-parts/content/content-single.scss b/wp-content/themes/homeproz/template-parts/content/content-single.scss new file mode 100644 index 00000000..b15296ac --- /dev/null +++ b/wp-content/themes/homeproz/template-parts/content/content-single.scss @@ -0,0 +1,248 @@ +/** + * Single Post Styles + * + * @package HomeProz + */ + +.single-post { + padding: 2rem 0 4rem; + max-width: 800px; +} + +// Post Header +.post-header { + margin-bottom: 2rem; +} + +.post-meta { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 1rem; + font-size: 0.875rem; + color: var(--color-text-muted); + + time { + color: var(--color-text-muted); + } + + .meta-separator { + color: var(--color-border); + } + + .post-categories a { + color: var(--color-accent-light); + text-decoration: none; + + &:hover { + color: var(--color-accent-hover); + } + } +} + +.post-title { + font-size: 2.5rem; + margin-bottom: 0; + + @media (max-width: 768px) { + font-size: 2rem; + } +} + +// Featured Image +.post-featured-image { + margin-bottom: 2rem; + border-radius: 0.5rem; + overflow: hidden; + + img { + width: 100%; + height: auto; + display: block; + } +} + +// Post Footer +.post-footer { + margin-top: 3rem; + padding-top: 1.5rem; + border-top: 1px solid var(--color-border); +} + +.post-tags { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem; + + .tags-label { + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-muted); + } + + .tag-link { + display: inline-block; + padding: 0.25rem 0.75rem; + background-color: var(--color-bg-card); + border-radius: 0.25rem; + font-size: 0.8125rem; + color: var(--color-text-muted); + text-decoration: none; + + &:hover { + background-color: var(--color-accent); + color: white; + } + } +} + +// Post Navigation +.post-navigation { + margin-top: 3rem; + padding: 1.5rem 0; + border-top: 1px solid var(--color-border); + border-bottom: 1px solid var(--color-border); + + .nav-links { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; + + @media (min-width: 640px) { + grid-template-columns: 1fr 1fr; + } + } + + .nav-previous, + .nav-next { + a { + display: block; + text-decoration: none; + } + } + + .nav-next { + text-align: right; + } + + .nav-subtitle { + display: block; + font-size: 0.8125rem; + color: var(--color-text-muted); + margin-bottom: 0.25rem; + } + + .nav-title { + display: block; + font-size: 1rem; + font-weight: 500; + color: var(--color-text); + line-height: 1.4; + } + + a:hover { + .nav-title { + color: var(--color-accent-light); + } + } +} + +// Comments area +.comments-area { + margin-top: 3rem; + padding-top: 2rem; + border-top: 1px solid var(--color-border); +} + +.comments-title { + margin-bottom: 1.5rem; +} + +.comment-list { + list-style: none; + margin: 0; + padding: 0; + + .comment { + margin-bottom: 1.5rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--color-border); + + &:last-child { + border-bottom: none; + } + } + + .comment-body { + display: flex; + gap: 1rem; + } + + .comment-author { + flex-shrink: 0; + + img { + border-radius: 50%; + } + } + + .comment-content { + flex-grow: 1; + } + + .fn { + font-weight: 600; + color: var(--color-text); + } + + .comment-metadata { + margin-bottom: 0.5rem; + font-size: 0.8125rem; + color: var(--color-text-muted); + + a { + color: var(--color-text-muted); + text-decoration: none; + + &:hover { + color: var(--color-accent-light); + } + } + } +} + +// Comment form +.comment-respond { + margin-top: 2rem; +} + +.comment-reply-title { + margin-bottom: 1rem; +} + +.comment-form { + label { + display: block; + margin-bottom: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text); + } + + input[type="text"], + input[type="email"], + input[type="url"], + textarea { + margin-bottom: 1rem; + } + + .form-submit { + margin-top: 1rem; + + input[type="submit"] { + @extend .btn; + @extend .btn-primary; + } + } +}