From cb58a95577c5e5811ec1216197c70911cd4ff4e7 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Wed, 11 Sep 2024 01:21:26 +0200
Subject: [PATCH] feat: card support

---
 index.html                 | 92 +++++++++++++++++++++++---------------
 src/components/_cards.scss | 27 +++++++++++
 2 files changed, 83 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index 6c915eb..33c1181 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,26 @@
     <p>Lorem ipsum dolor sit amet, <mark>consectetur adipiscing elit</mark>, sed do. </p>
     <hr />
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem <a href="#">ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p>
+    
+
+    <div class="card">
+        <h2 class="header">Test</h2>
+        <div class="section">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu vero, inquam, ducas licet, si sequetur; Expectoque quid ad id, quod quaerebam, respondeas. Quare attende, quaeso. Cui Tubuli nomen odio non est? Sedulo, inquam, faciam. </p>
+        </div>
+        <div class="section">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu vero, inquam, ducas licet, si sequetur; Expectoque quid ad id, quod quaerebam, respondeas. Quare attende, quaeso. Cui Tubuli nomen odio non est? Sedulo, inquam, faciam. </p>
+        </div>
+        <div class="section">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu vero, inquam, ducas licet, si sequetur; Expectoque quid ad id, quod quaerebam, respondeas. Quare attende, quaeso. Cui Tubuli nomen odio non est? Sedulo, inquam, faciam. </p>
+        </div>
+        <ul class="menu">
+            <li><a href="#">Home</a></li>
+            <li><a href="#">Mouette</a></li>
+            <li><span class="active">Exemple</span></li>
+        </ul>
+    </div>
+    
     <p>
         <button>Bouton</button>
         <a href="#" class="button">Bouton lien</a>
@@ -153,42 +173,42 @@
             </p>
           </details>
     </div>
-
-    <div class="tabs">
-        <details open name="tabs">
-            <summary>Tab 1</summary>
-            <div class="content">
-                <p>Ceci est un test d'onglet voir s'ils marchent.</p>
-                <details>
-                    <summary>Details dans le tab</summary>
-                    <p>Test test test test test test test test test test test test test test test test test test test test</p>
-                </details>
-                <p>Code basé sur ce codepen : <a href="https://codepen.io/RYJASM/pen/eYoYeRg">Cliquez ici</a></p>
-            </div>
-        </details>
-        <details name="tabs">
-            <summary>Tab 2</summary>
-            <div class="content">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc omni virtuti vitium contrario nomine opponitur. Falli igitur possumus. Res enim concurrent contrariae. Primum quid tu dicis breve? Bork Quis est tam dissimile homini. </p>
-                <p>Duo Reges: constructio interrete. At eum nihili facit; Quorum sine causa fieri nihil putandum est. Cur iustitia laudatur? Ergo, si semel tristior effectus est, hilara vita amissa est? Immo alio genere; </p>
-                <blockquote cite='http://loripsum.net'>
-                    Ex quo intellegi debet homini id esse in bonis ultimum, secundum naturam vivere, quod ita interpretemur: vivere ex hominis natura undique perfecta et nihil requirente.
-                </blockquote>
-                <p>Sed fac ista esse non inportuna; Quae ista amicitia est? Invidiosum nomen est, infame, suspectum. Quid ergo? Graece donan, Latine voluptatem vocant. Sed ne, dum huic obsequor, vobis molestus sim. </p>
-                <p>Nescio quo modo praetervolavit oratio. Beatus sibi videtur esse moriens. Vide, quantum, inquam, fallare, Torquate. </p>
-            </div>
-        </details>
-        <details name="tabs">
-            <summary>Tab 3</summary>
-            <div class="content">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu vero, inquam, ducas licet, si sequetur; Expectoque quid ad id, quod quaerebam, respondeas. Quare attende, quaeso. Cui Tubuli nomen odio non est? Sedulo, inquam, faciam. </p>
-                <p>Conferam tecum, quam cuique verso rem subicias; Ego vero volo in virtute vim esse quam maximam; Sed ego in hoc resisto; Tamen a proposito, inquam, aberramus. </p>
-                <p>Occultum facinus esse potuerit, gaudebit; Verum hoc idem saepe faciamus. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. Itaque ad tempus ad Pisonem omnes. Apparet statim, quae sint officia, quae actiones. Quodsi ipsam honestatem undique pertectam atque absolutam. </p>
-                <p>Duo Reges: constructio interrete. Animum autem reliquis rebus ita perfecit, ut corpus; Aliter enim explicari, quod quaeritur, non potest. Quid autem habent admirationis, cum prope accesseris? Negare non possum. Quid censes in Latino fore? </p>
-                <p>Non laboro, inquit, de nomine. Memini vero, inquam; Hunc vos beatum; Optime, inquam. </p>
-                <p>Restinguet citius, si ardentem acceperit. Cyrenaici quidem non recusant; Tecum optime, deinde etiam cum mediocri amico. Cave putes quicquam esse verius. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Non semper, inquam; Gerendus est mos, modo recte sentiat. </p>
-            </div>
-        </details>
+    <div class="card">
+        <div class="tabs section">
+            <details open name="tabs">
+                <summary>Tab 1</summary>
+                <div class="content">
+                    <p>Ceci est un test d'onglet voir s'ils marchent.</p>
+                    <details>
+                        <summary>Details dans le tab</summary>
+                        <p>Test test test test test test test test test test test test test test test test test test test test</p>
+                    </details>
+                    <p>Code basé sur ce codepen : <a href="https://codepen.io/RYJASM/pen/eYoYeRg">Cliquez ici</a></p>
+                </div>
+            </details>
+            <details name="tabs">
+                <summary>Tab 2</summary>
+                <div class="content">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc omni virtuti vitium contrario nomine opponitur. Falli igitur possumus. Res enim concurrent contrariae. Primum quid tu dicis breve? Bork Quis est tam dissimile homini. </p>
+                    <p>Duo Reges: constructio interrete. At eum nihili facit; Quorum sine causa fieri nihil putandum est. Cur iustitia laudatur? Ergo, si semel tristior effectus est, hilara vita amissa est? Immo alio genere; </p>
+                    <blockquote cite='http://loripsum.net'>
+                        Ex quo intellegi debet homini id esse in bonis ultimum, secundum naturam vivere, quod ita interpretemur: vivere ex hominis natura undique perfecta et nihil requirente.
+                    </blockquote>
+                    <p>Sed fac ista esse non inportuna; Quae ista amicitia est? Invidiosum nomen est, infame, suspectum. Quid ergo? Graece donan, Latine voluptatem vocant. Sed ne, dum huic obsequor, vobis molestus sim. </p>
+                    <p>Nescio quo modo praetervolavit oratio. Beatus sibi videtur esse moriens. Vide, quantum, inquam, fallare, Torquate. </p>
+                </div>
+            </details>
+            <details name="tabs">
+                <summary>Tab 3</summary>
+                <div class="content">
+                    <p>Conferam tecum, quam cuique verso rem subicias; Ego vero volo in virtute vim esse quam maximam; Sed ego in hoc resisto; Tamen a proposito, inquam, aberramus. </p>
+                    <p>Occultum facinus esse potuerit, gaudebit; Verum hoc idem saepe faciamus. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. Itaque ad tempus ad Pisonem omnes. Apparet statim, quae sint officia, quae actiones. Quodsi ipsam honestatem undique pertectam atque absolutam. </p>
+                    <p>Duo Reges: constructio interrete. Animum autem reliquis rebus ita perfecit, ut corpus; Aliter enim explicari, quod quaeritur, non potest. Quid autem habent admirationis, cum prope accesseris? Negare non possum. Quid censes in Latino fore? </p>
+                    <p>Non laboro, inquit, de nomine. Memini vero, inquam; Hunc vos beatum; Optime, inquam. </p>
+                    <p>Restinguet citius, si ardentem acceperit. Cyrenaici quidem non recusant; Tecum optime, deinde etiam cum mediocri amico. Cave putes quicquam esse verius. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Non semper, inquam; Gerendus est mos, modo recte sentiat. </p>
+                </div>
+            </details>
+        </div>
     </div>
     <img src="https://via.placeholder.com/800x600/" alt="">
     <nav>
diff --git a/src/components/_cards.scss b/src/components/_cards.scss
index e8d2cd4..f077ea2 100644
--- a/src/components/_cards.scss
+++ b/src/components/_cards.scss
@@ -1,3 +1,30 @@
 .card {
     border-radius: var(--card-radius);
+    background-color: var(--color-card);
+    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.25);
+    margin: 0 0 1rem 0;
+    overflow:hidden;
+
+    .section, .header {
+        padding: .75rem;
+        margin:0;
+    }
+
+    .menu {
+        margin:0;
+        background: transparent;
+        border-radius: 0;
+    }
+
+    .section ~ .section, .menu ~ .section, .section ~ .menu {
+        border-top: 1px solid var(--color-hr);
+    }
+
+    .header {
+        font-size: 1em;
+        line-height: 1em;
+        font-weight: bold;
+        background-color: var(--color-accent);
+        color: var(--color-contrast-accent);
+    }
 }
\ No newline at end of file