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

add margin for better display

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

3
styles/card.css
Unescape View File

@ -6,6 +6,7 @@
height: 10rem; height: 10rem;
width: 20rem; width: 20rem;
padding: 3em; padding: 3em;
margin: 1.7rem; /* for better display */
border: 0.3em solid black; border: 0.3em solid black;
border-radius: 2em; border-radius: 2em;
background-color: white; background-color: white;
@ -13,8 +14,6 @@
.item { .item {
margin: 1rem; margin: 1rem;
/* height: calc(10rem - 6em);
width: calc(20rem - 6em); */
} }
#main { #main {

20
views/cards.html
Unescape View File

@ -77,7 +77,7 @@
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <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" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use> <use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18" "></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
@ -105,8 +105,8 @@
<div class="card"> <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use> <use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use> <use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
@ -115,24 +115,22 @@
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use> <use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg> </svg>
</div> </div>
<div class="card"> <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use> <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use> <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg> </svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0101" mask="url(#mask-stripe)"></use> <use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0101" fill="none" stroke-width="18"></use> <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg> </svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <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" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use> <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>

Write Preview
Loading…
Cancel
Save