kazhnuz/mouette
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

feat: card support

Browse source
This commit is contained in:
Kazhnuz 2024-09-11 01:21:26 +02:00
parent 944982c78e
commit cb58a95577
2 changed files with 83 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
index.html
View file

@ -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,8 +173,8 @@
</p>
</details>
</div>
<div class="tabs">
<div class="card">
<div class="tabs section">
<details open name="tabs">
<summary>Tab 1</summary>
<div class="content">
@ -181,7 +201,6 @@
<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>
@ -190,6 +209,7 @@
</div>
</details>
</div>
</div>
<img src="https://via.placeholder.com/800x600/" alt="">
<nav>
<ul class="menu">

27
src/components/_cards.scss
View file

@ -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);
}
}