Skip to content

Commit

Permalink
Chore: Use figures for the mask examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@NotWoods
NotWoods committed Mar 6, 2020
1 parent 83fd72b commit d1bc89e
Showing 1 changed file with 73 additions and 58 deletions.
131 changes: 73 additions & 58 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,13 +115,14 @@
flex-wrap: wrap;
}

.icons > div {
.icons > figure {
text-align: left;
margin: 0;
padding: 10px;
width: 188px;
}

.icons > div > img {
.icons > figure > img {
width: 188px;
height: 188px;
min-width: 188px;
Expand Down Expand Up @@ -2758,81 +2759,95 @@ <h2 class="icon-title">
Icons with "maskable" purpose
</h2>
<div class="icons">
<div>
<figure>
<img src="images/icon-plain.svg" alt=
"An icon over a checkerboard background">
<div class="icon-title">
Image
</div>
<div>
The base image with transparent background
</div>
</div>
<div>
<figcaption>
<div class="icon-title">
Image
</div>
<div>
The base image with transparent background
</div>
</figcaption>
</figure>
<figure>
<img src="images/icon-safe-zone.svg" alt=
"An icon in a purple circle (40% of the size) over a yellow background">
<div class="icon-title">
Safe zone
</div>
<div>
Circle with radius 2/5 (40%) of the icon size
</div>
</div>
<figcaption>
<div class="icon-title">
Safe zone
</div>
<div>
Circle with radius 2/5 (40%) of the icon size
</div>
</figcaption>
</figure>
</div>
<h2 class="icon-title">
Mask examples
</h2>
<div class="icons">
<div>
<figure>
<img src="images/icon-mask-android-roundsquare.svg" alt=
"An icon inside a rounded yellow square on a purple background">
<div class="icon-title">
Rounded square
</div>
<div>
Android
</div>
</div>
<div>
<figcaption>
<div class="icon-title">
Rounded square
</div>
<div>
Android
</div>
</figcaption>
</figure>
<figure>
<img src="images/icon-mask-android-squircle.svg" alt=
"An icon inside an extremely rounded yellow square on a purple background">
<div class="icon-title">
Squircle
</div>
<div>
Android
</div>
</div>
<div>
<figcaption>
<div class="icon-title">
Squircle
</div>
<div>
Android
</div>
</figcaption>
</figure>
<figure>
<img src="images/icon-mask-android-circle.svg" alt=
"An icon inside a rounded yellow circle on a purple background">
<div class="icon-title">
Circle
</div>
<div>
Android
</div>
</div>
<div>
<figcaption>
<div class="icon-title">
Circle
</div>
<div>
Android
</div>
</figcaption>
</figure>
<figure>
<img src="images/icon-mask-ios.svg" alt=
"An icon inside a somewhat rounded yellow square on a purple background">
<div class="icon-title">
Rounded square
</div>
<div>
iOS
</div>
</div>
<div>
<figcaption>
<div class="icon-title">
Rounded square
</div>
<div>
iOS
</div>
</figcaption>
</figure>
<figure>
<img src="images/icon-mask-windows.svg" alt=
"An icon on a yellow background">
<div class="icon-title">
Fullbleed
</div>
<div>
Windows
</div>
</div>
<figcaption>
<div class="icon-title">
Fullbleed
</div>
<div>
Windows
</div>
</figcaption>
</figure>
</div>
</section>
</section>
Expand Down

0 comments on commit d1bc89e

Please sign in to comment.