HyperSet
/
hyper-set
6
3
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases Wiki Activity

change color + add main div + flex wrap -> better display

Browse Source
pull/32/head
remrem 2 years ago
parent 4a6ca2c18d
commit 93d2c943ed
2 changed files with 93 additions and 85 deletions
Show Stats Download Patch File Download Diff File

6
styles/card.css
Unescape View File

@ -15,4 +15,10 @@
margin: 1rem;
/* height: calc(10rem - 6em);
width: calc(20rem - 6em); */
}
#main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

172
views/cards.html
Unescape View File

@ -51,91 +51,93 @@
</defs>
</svg>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<div id="main">
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
</div>
</div>
</body>

Write Preview
Loading…
Cancel
Save