Skip to content
This repository was archived by the owner on Jan 21, 2021. It is now read-only.

Commit bccc49c

Browse files
author
Thimy
authored
Merge pull request #101 from etalab/new-elements
add tile element and style to hr and dl/dt/dd
2 parents 869e598 + 1d74556 commit bccc49c

11 files changed

Lines changed: 123 additions & 35 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,18 @@
22

33
## v1.2.1
44

5+
#### Features
6+
7+
- Added tile element
8+
59
#### Enhancements
610

711
- Added a `required` class to `labels` to inform about _required_ fields
812
- Change padding unit on inputs
913
- Reworked the way cards and panels are spaced
1014
- Removed `.form__container`; use `.container__small` instead
1115
- Removed box shadow from buttons
16+
- Styled hr and dl/dt/dd elements
1217

1318
#### Bug fixes
1419

@@ -19,11 +24,12 @@
1924

2025
#### Enhancements
2126

22-
- Add a changelog!
27+
- Added a changelog!
2328
- Rework file structure for easier deployment
2429
- Simplify documentation navigation
2530
- Improve margins and paddings consistency
2631
- Improve links for better accessibility
2732

2833
#### Bug fixes
34+
2935
- Fixed path to fonts and images

‎images/icons/external/heart.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎images/icons/external/map-white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎images/icons/external/pen-white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎images/icons/external/store.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎images/icons/external/trees.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎images/icons/external/user-white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎index.html‎

Lines changed: 64 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -606,47 +606,79 @@ <h3>Dota 2 hero classification</h3>
606606
</div>
607607
</div>
608608

609-
<section class="section section-grey cards">
609+
<section class="section section-grey">
610610
<div class="container">
611-
<div class="row">
612-
<div class="card">
613-
<div class="card__cover">
614-
<img src="images/template/shiba.jpg" alt="Shiba Inu" />
611+
<div class="tiles">
612+
<h1>Tuiles</h1>
613+
<div class="grid">
614+
<div class="tile">
615+
<img class="tile__icon" src="images/icons/external/heart.svg" class="navbar__gouvfr" alt="Coeur" />
616+
<h3>Santé</h3>
615617
</div>
616-
<div class="card__content">
617-
<h3>Shiba Inu</h3>
618-
<div class="card__meta"><time>12 avril 2018</time><span>Juna</span></div>
619-
<p>The Shiba Inu (柴犬) is the smallest of the six original and distinct spitz breeds of dog from Japan.</p>
618+
<div class="tile tile-colored">
619+
<img class="tile__icon" src="images/icons/external/pen-white.svg" alt="Stylo" />
620+
<h3>Éducation</h3>
620621
</div>
621-
<div class="card__extra">
622-
<div class="label label--active">shiba inu</div>
623-
<div class="label label--inactive"><a href="#">dog</a></div>
624-
<div class="label">japan</div>
625-
<div class="label"><a href="#">wow</a></div>
622+
<div class="tile">
623+
<img class="tile__icon" src="images/icons/external/store.svg" alt="Boutique" />
624+
<h3>Emplois</h3>
626625
</div>
627-
</div>
628-
<div class="card">
629-
<div class="card__cover">
630-
<img src="images/template/french.jpg" alt="French Bulldog" />
626+
<div class="tile tile-colored">
627+
<img class="tile__icon" src="images/icons/external/map-white.svg" alt="Carte" />
628+
<h3>Géographie</h3>
631629
</div>
632-
<div class="card__content">
633-
<h3>French Bulldog</h3>
634-
<div class="card__meta"><time>12 avril 2018</time><span>Tama</span></div>
635-
<p>The French Bulldog, also known as the Frenchie, is a small breed of domestic dog. Frenchies were the result in the 1800s of a cross between bulldog ancestors imported from England and local ratters in Paris (France).
636-
</p>
630+
<div class="tile">
631+
<img class="tile__icon" src="images/icons/external/trees.svg" alt="Arbre" />
632+
<h3>Écologie</h3>
637633
</div>
638-
<div class="card__extra">
639-
<div class="label"><a href="#">stick in the mouth</a></div>
634+
<div class="tile tile-colored">
635+
<img class="tile__icon" src="images/icons/external/user-white.svg" alt="Personne" />
636+
<h3>Démographie</h3>
640637
</div>
641638
</div>
642-
<div class="card">
643-
<div class="card__cover">
644-
<img src="images/template/corgi.jpg" alt="Corgi" />
639+
</div>
640+
<div class="cards">
641+
<h1>Cartes</h1>
642+
<div class="row">
643+
<div class="card">
644+
<div class="card__cover">
645+
<img src="images/template/shiba.jpg" alt="Shiba Inu" />
646+
</div>
647+
<div class="card__content">
648+
<h3>Shiba Inu</h3>
649+
<div class="card__meta"><time>12 avril 2018</time><span>Juna</span></div>
650+
<p>The Shiba Inu (柴犬) is the smallest of the six original and distinct spitz breeds of dog from Japan.</p>
651+
</div>
652+
<div class="card__extra">
653+
<div class="label label--active">shiba inu</div>
654+
<div class="label label--inactive"><a href="#">dog</a></div>
655+
<div class="label">japan</div>
656+
<div class="label"><a href="#">wow</a></div>
657+
</div>
658+
</div>
659+
<div class="card">
660+
<div class="card__cover">
661+
<img src="images/template/french.jpg" alt="French Bulldog" />
662+
</div>
663+
<div class="card__content">
664+
<h3>French Bulldog</h3>
665+
<div class="card__meta"><time>12 avril 2018</time><span>Tama</span></div>
666+
<p>The French Bulldog, also known as the Frenchie, is a small breed of domestic dog. Frenchies were the result in the 1800s of a cross between bulldog ancestors imported from England and local ratters in Paris (France).
667+
</p>
668+
</div>
669+
<div class="card__extra">
670+
<div class="label"><a href="#">stick in the mouth</a></div>
671+
</div>
645672
</div>
646-
<div class="card__content">
647-
<h3>Corgi</h3>
648-
<div class="card__meta"><time>12 avril 2018</time><span>Nova</span></div>
649-
<p>The Welsh Corgi, sometimes known as just a Corgi (/ˈkɔːrɡi/, Welsh for "dwarf dog"; plural "corgis" or occasionally the etymologically consistent "corgwn" (/ˈkɔːrɡuːn/)), is a small type of herding dog that originated in Wales.</p>
673+
<div class="card">
674+
<div class="card__cover">
675+
<img src="images/template/corgi.jpg" alt="Corgi" />
676+
</div>
677+
<div class="card__content">
678+
<h3>Corgi</h3>
679+
<div class="card__meta"><time>12 avril 2018</time><span>Nova</span></div>
680+
<p>The Welsh Corgi, sometimes known as just a Corgi (/ˈkɔːrɡi/, Welsh for "dwarf dog"; plural "corgis" or occasionally the etymologically consistent "corgwn" (/ˈkɔːrɡuːn/)), is a small type of herding dog that originated in Wales.</p>
681+
</div>
650682
</div>
651683
</div>
652684
</div>

‎src/css/base/main.css‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,21 @@ small {
3939
font-size: 0.875em;
4040
}
4141

42-
.modals .button {
43-
margin: auto;
42+
hr {
43+
border-top: 0;
44+
border-bottom: var(--theme-border-lighter);
45+
margin: var(--space-l) 0;
46+
}
47+
48+
dt {
49+
display: block;
50+
color: var(--darker-grey);
51+
}
52+
53+
dd {
54+
margin: 0;
55+
}
56+
57+
dd + dt {
58+
margin-top: var(--space-xs);
4459
}

‎src/css/components/tile.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.tile {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: center;
5+
align-items: center;
6+
background-color: var(--theme-background-white);
7+
width: 100%;
8+
padding: var(--space-s);
9+
transform: none;
10+
transition: all 0.1s ease-in;
11+
}
12+
13+
.tile:hover {
14+
transform: scale(1.03);
15+
}
16+
17+
.tile-colored {
18+
background-color: var(--theme-background-color);
19+
color: var(--theme-light-text);
20+
}
21+
22+
.tile h3 {
23+
margin: 0;
24+
}
25+
26+
.tile__icon {
27+
height: var(--space-l);
28+
}

0 commit comments

Comments
 (0)