Merge pull request #24 from xames3/refactor/xames3-headshots

[Refactor] Fix the CSS alignments

coeus_sphinx_theme/extensions/headshots.py

@@ -4,7 +4,7 @@
 
 Author: Akshay Mestry <xa@mes3.dev>
 Created on: Tuesday, August 27 2024
-Last updated on: Saturday, August 31 2024
+Last updated on: Saturday, November 23 2024
 
 This module provides a custom directive for the Coeus Sphinx Theme,
 that allows authors and contributors to add information about themselves
@@ -39,6 +39,7 @@
 
 from __future__ import annotations
 
+import os.path as p
 import typing as t
 
 import docutils.nodes as nodes
@@ -102,13 +103,14 @@ def run(self) -> list[nodes.Node]:
                 "name": content[idx],
                 "about": content[idx + 1],
                 "headshot": content[idx + 2],
-                "information": content[idx + 3],
             }
-            for idx in range(0, len(content), 4)
+            for idx in range(0, len(content), 3)
         ]
         if "sorted" in self.options:
             people = sorted(people, key=lambda x: x["name"])
+        cols = self.options.get("columns", 2)
         (container := nodes.container())["classes"].append("headshots-grid")
+        container["style"] = f"grid-template-columns: repeat({cols}, 1fr);"
         for person in people:
             individual = nodes.container()
             individual["classes"].append("headshot-card")
@@ -117,25 +119,25 @@ def run(self) -> list[nodes.Node]:
             title = nodes.container()
             title["classes"].append("headshot-title-card")
             image = nodes.image(uri=person["headshot"])
+            raw = p.join("..", "_images", p.basename(person["headshot"]))
             image["classes"].append("headshot-img")
+            individual["style"] = (
+                "background-image: linear-gradient(to right, "
+                "rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0.7)), url("
+                f'"{raw}");'
+            )
             name = nodes.paragraph(text=person["name"])
             name["classes"].append("headshot-name")
             about_node = nodes.container()
             about_lines = stm.StringList([person["about"]])
             self.state.nested_parse(about_lines, 0, about_node)
             about = about_node[0]
             about["classes"].append("headshot-about")
-            information_node = nodes.container()
-            info_lines = stm.StringList([person["information"]])
-            self.state.nested_parse(info_lines, 0, information_node)
-            information = information_node[0]
-            information["classes"].append("headshot-information")
             identity.append(image)
             title.append(name)
             title.append(about)
             identity.append(title)
             individual.append(identity)
-            individual.append(information)
             container.append(individual)
         return [container]
 
@@ -153,4 +155,5 @@ def depart(self: HTMLTranslator, node: node) -> None:
 directive.has_content = True
 directive.option_spec = {
     "sorted": rst.directives.flag,
+    "columns": rst.directives.unchanged,
 }

coeus_sphinx_theme/static/coeus.css

@@ -3779,25 +3779,25 @@ details.sd-dropdown .sd-summary-content .sd-tab-set {
 
 .headshots-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    padding-inline: 0rem !important;
     gap: 1.25rem;
-    padding: 1rem;
-    background-color: var(--main-code-background);
     margin-bottom: 2.5rem;
     border-radius: var(--main-rounded-corner-radius);
 }
 
 .headshot-card {
-    background: white;
-    padding: 2rem;
+    padding: 1rem;
+    padding-inline: 1.5rem;
+    border: 1px solid var(--main-page-border-color);
     border-radius: var(--main-rounded-corner-radius);
-    box-shadow: 0 2px 5px #0000001a;
+    background-repeat: no-repeat;
+    background-position: right;
 }
 
 .headshot-identity-card {
     display: flex;
     padding: 0;
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
     align-items: center;
 }
 
@@ -3808,34 +3808,30 @@ details.sd-dropdown .sd-summary-content .sd-tab-set {
 }
 
 .headshot-img {
-    border-radius: 50%;
-    max-width: 4.5rem;
-    max-height: 4.5rem;
+    border-radius: 50% !important;
+    max-width: 5rem;
+    max-height: 5rem;
     width: max-content;
     object-fit: cover;
     margin: 0 !important;
 }
 
 .headshot-title-card .headshot-name,
 .headshot-title-card .sd-card-text:first-of-type {
-    font-size: 1.05rem;
     font-weight: 600;
-    line-height: 1.5;
     margin-bottom: 0 !important;
 }
 
 .headshot-title-card .headshot-about,
 .headshot-title-card .sd-card-text:nth-of-type(2) {
-    font-size: 0.95rem;
+    font-size: 0.85rem;
     color: #909090;
-    line-height: 1.5;
     margin-bottom: 0 !important;
 }
 
 .headshot-card .headshot-information,
 .headshot-card .sd-card-text:first-of-type {
     margin-bottom: 0;
-    font-size: 1rem;
 }
 
 .status-badge {