diff options
Diffstat (limited to 'design/cards.html')
| -rw-r--r-- | design/cards.html | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/design/cards.html b/design/cards.html new file mode 100644 index 0000000..ec2873b --- /dev/null +++ b/design/cards.html @@ -0,0 +1,118 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Cards</title> + <meta charset="UTF-8"> + + <link rel="preconnect" href="https://fonts.gstatic.com"> + <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap"> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons+Round"> + <style> + * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Roboto", sans-serif; transition-timing-function: ease-in-out; } + html { + padding: .5in; + background: #eee; + /*filter: invert(1) hue-rotate(180deg);*/ + } + .card-shadow { + position: relative; + margin: 16px auto; + width: 5.5in; + border-radius: 24px; + box-shadow: 0 2px 16px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.1); + /*box-shadow: 0 0 1px #000;*/ + transition: box-shadow .2s; + } + .card-shadow:hover { + box-shadow: 0 2px 16px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.15); + } + .card { + padding-bottom: 16px; + border-radius: 24px; + background-color: #fff; + overflow: hidden; + color: rgba(0,0,0,.87); + } + h2 { + margin: 16px 24px 0; + font-size: 24px; + line-height: 36px; + font-weight: normal; + } + h3 { + margin: 1px 24px 0; + font-size: 14px; + line-height: 16px; + font-weight: 500; + letter-spacing: 0.1px; + color: rgba(0,0,0,.38); + } + h3 .material-icons-round { + font-size: 16px; + vertical-align: -3px; + } + p { + margin: 16px 24px 0; + font-size: 16px; + line-height: 24px; + letter-spacing: 0.5px; + } + .tags { + margin: 8px 20px 6px 24px; + text-align: right; + font-size: 14px; + line-height: 16px; + color: rgba(0,0,0,.38); + } + .tag { + display: inline-block; + margin: 0 3px; + } + .tags .material-icons-round { + font-size: 20px; + vertical-align: -5px; + } + .edit { + float: right; + margin: 20px; + color: rgba(0,0,0,.25); + } + .card img { + display: block; + width: 100%; + margin: 16px 0; + } + </style> + </head> + <body> + <div class="card-shadow" style="z-index:1"><div class="card"> + <div class="edit"><i class="material-icons-round">edit</i></div> + <h2>Example Note</h2> + <h3>Parent, Other Parent + <i class="material-icons-round">push_pin</i> + <i class="material-icons-round">public</i> + </h3> + <p>Meh <strong>bold</strong> <em>italic</em> meh whatever <del>lorem</del> ipsum dolor sit amet adispicing elit</p> + <p><span style="color:#1565C0">Foobar</span> <span style="color:#b00020">lipsum</span> <span style="background:#feefc3">yeet</span></p> + <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has <em>survived</em> not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> + <div class="tags"><span class="tag">#hash</span> <span class="tag">#tag</span> + <i class="material-icons-round">more_vert</i> + </div> + </div></div> + + <div class="card-shadow"><div class="card"> + <p>Short note</p> + </div></div> + + <div class="card-shadow"><div class="card"> + <h2>Note with a picture</h2> + <h3>Photography + <i class="material-icons-round">public</i> + </h3> + <img src="https://images.unsplash.com/photo-1608021413768-4c7529c82d7c?w=1024" alt="Meh"> + <div class="tags"><span class="tag">#nature</span> + <i class="material-icons-round">more_vert</i> + </div> + </div></div> + </body> +</html> |