diff options
| author | Alexis Hovorka <[email protected]> | 2024-02-13 23:12:22 -0700 |
|---|---|---|
| committer | Alexis Hovorka <[email protected]> | 2024-02-13 23:12:22 -0700 |
| commit | 8588e9096e5bd2986bd6aa254b706d1331855dbc (patch) | |
| tree | 676c9e4e68da56b30d9b606d81c116feed8754a0 | |
| parent | 70d3a32ae766dc15fd6c21e382068f44dbaff8b8 (diff) | |
[style] Tweak design mockups
| -rw-r--r-- | design/cards.html | 80 | ||||
| -rw-r--r-- | design/test.html | 2 | ||||
| -rw-r--r-- | design/toolbar.html | 2 |
3 files changed, 77 insertions, 7 deletions
diff --git a/design/cards.html b/design/cards.html index ec2873b..d6d2a7c 100644 --- a/design/cards.html +++ b/design/cards.html @@ -34,13 +34,16 @@ color: rgba(0,0,0,.87); } h2 { - margin: 16px 24px 0; + margin: 0 24px 0; font-size: 24px; line-height: 36px; font-weight: normal; } + h2:first-child { + margin-top: 18px; + } h3 { - margin: 1px 24px 0; + margin: 22px 24px 0; font-size: 14px; line-height: 16px; font-weight: 500; @@ -57,6 +60,22 @@ line-height: 24px; letter-spacing: 0.5px; } + pre { + margin: 16px 0 0; + padding: 16px 24px; + font: 14px/1.3em "Hack", monospace; + background: rgba(0,0,0,.04); + } + pre:first-child { + margin: 0; + padding-top: 18px; + } + pre:last-child { + padding-bottom: 18px; + } + pre:has(+.tags) { + margin-bottom: 16px; + } .tags { margin: 8px 20px 6px 24px; text-align: right; @@ -82,19 +101,33 @@ width: 100%; margin: 16px 0; } + .card img:first-child { + margin-top: 0; + } + .card img:last-child { + margin-bottom: 0; + } + .card:has(pre:last-child), + .card:has(img:last-child) { + padding-bottom: 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> + <h2>Example Note</h2> <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> + <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.</p> + <pre>function test() { + return 42; +}</pre> + <p>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> @@ -105,14 +138,51 @@ </div></div> <div class="card-shadow"><div class="card"> - <h2>Note with a picture</h2> + <h2>Parentless Note</h2> + <p>Content, words, et cetera.</p> + <div class="tags"> + <i class="material-icons-round">more_vert</i> + </div> + </div></div> + + <div class="card-shadow"><div class="card"> + <h3> + <i class="material-icons-round">push_pin</i> + </h3> + <h2>Pinned Note</h2> + <p>More content? Huh, weird.</p> + <div class="tags"> + <i class="material-icons-round">more_vert</i> + </div> + </div></div> + + <div class="card-shadow"><div class="card"> + <pre>function codeCard() { + return "Yay!"; +}</pre> + </div></div> + + <div class="card-shadow"><div class="card"> + <pre>codeCard2();</pre> + <p>Intermission 1</p> + <pre>secondAct(omg);</pre> + <p>Intermission 2</p> + <pre>finale(applause);</pre> + </div></div> + + <div class="card-shadow"><div class="card"> <h3>Photography <i class="material-icons-round">public</i> </h3> + <h2>Note with a picture</h2> <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> + + <div class="card-shadow"><div class="card"> + <img src="https://images.unsplash.com/photo-1608021413768-4c7529c82d7c?w=1024" alt="Meh"> + </div></div> </body> </html> diff --git a/design/test.html b/design/test.html index 6fea07f..e26788f 100644 --- a/design/test.html +++ b/design/test.html @@ -36,6 +36,6 @@ <div style="height:56px;width:56px;border-radius:100%;border:1px solid #000"> <i class="material-icons-round">add</i> </div> - <p style="font-family:Roboto Mono">2020 1220 1346 <i class="material-icons-round">share</i></p> + <p style="font-family:Roboto Mono;word-spacing:-.3em">2020 1220 1346 <i class="material-icons-round">share</i></p> </body> </html> diff --git a/design/toolbar.html b/design/toolbar.html index 34270f6..40995b4 100644 --- a/design/toolbar.html +++ b/design/toolbar.html @@ -94,7 +94,7 @@ } @media (hover:hover) and (min-width:481px) { - body { padding: 0 80px 16px; } + body { padding: 8px 80px 16px; } #toolbar { top: 16px; left: 50%; transform: translate(-50%,0); width: 100%; max-width: calc(7in + 16px); pointer-events: none; } #toolbar > * { pointer-events: auto; } .toolbar-fab { height: 48px; width: 48px; } |