Last active
June 30, 2026 22:01
-
-
Save ramsesoriginal/fd78176933206f71838dbcdc4a6b64be to your computer and use it in GitHub Desktop.
Lorenzo Sketch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Lorenzo Sketch | |
| */ | |
| @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=National+Park:wght@200..800&display=swap'); | |
| html { | |
| /* CSS HEX */ | |
| --white-smoke: #f5f5f5ff; | |
| --school-bus-yellow: #fbc429ff; | |
| --tropical-teal: #75abadff; | |
| --jet-black: #303942ff; | |
| --tiger-flame: #fe5722ff; | |
| /* CSS HSL */ | |
| --white-smoke: hsla(0, 0%, 96%, 1); | |
| --school-bus-yellow: hsla(44, 96%, 57%, 1); | |
| --tropical-teal: hsla(182, 25%, 57%, 1); | |
| --jet-black: hsla(210, 16%, 22%, 1); | |
| --tiger-flame: hsla(14, 99%, 56%, 1); | |
| --main-bg: var(--white-smoke); | |
| --main-bg: var(--school-bus-yellow); | |
| --main-bg: var(--tropical-teal); | |
| --main-bg: var(--tiger-flame); | |
| --main-bg: var(--jet-black); | |
| --main-color: var(--white-smoke); | |
| --main-highlight-color: var(--tiger-flame); | |
| --main-opacity: 0.75; | |
| --main-darken-amount: 10%; | |
| --main-concave-amount: 5%; | |
| --main-distance: 1.25rem; | |
| --main-blur: 2.5rem; | |
| --main-radius: 2.5rem; | |
| --main-transition-time: 0.5s; | |
| font-size: 10px; | |
| font-family: "National Park", sans-serif; | |
| font-optical-sizing: auto; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| min-height: 100%; | |
| } | |
| body { | |
| background: var(--main-bg); | |
| color: var(--main-color); | |
| font-size: 1.4rem; | |
| } | |
| .lorenzo a, | |
| .lorenzo a:link, | |
| .lorenzo a:visited, | |
| .lorenzo a:hover, | |
| .lorenzo a:focus, | |
| .lorenzo a:active, | |
| .lorenzo button, | |
| .lorenzo button:focus, | |
| .lorenzo button:active { | |
| color: var(--main-color); | |
| background: transparent; | |
| text-decoration: none; | |
| padding-top: calc(0.5 * var(--radius)); | |
| padding-bottom: calc(0.5 * var(--radius)); | |
| box-sizing: border-box; | |
| border: 0; | |
| outline: 0; | |
| --distance: 0.25em; | |
| --blur: 0.5em; | |
| --radius: 1em; | |
| --darken-amount: 5%; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: "Black Ops One", system-ui; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| .lorenzo ul, | |
| .lorenzo ol, | |
| .lorenzo li { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .lorenzo { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| box-sizing: border-box; | |
| transition: all var(--main-transition-time) ease-in-out; | |
| } | |
| .lorenzo.yard { | |
| display: flex; | |
| gap: 6rem; | |
| height: 100vh; | |
| width: 100vw; | |
| padding: 6rem; | |
| background: var(--main-bg); | |
| } | |
| .lorenzo.container { | |
| --bgcolor: var(--main-bg); | |
| --opacity: var(--main-opacity); | |
| --darken-amount: var(--main-darken-amount); | |
| --concave-amount: var(--main-concave-amount); | |
| --distance: var(--main-distance); | |
| --blur: var(--main-blur); | |
| --radius: var(--main-radius); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: stretch; | |
| width: 30em; | |
| } | |
| .lorenzo.orange { | |
| --highlight-color: var(--tiger-flame); | |
| } | |
| .lorenzo.yellow { | |
| --highlight-color: var(--school-bus-yellow); | |
| } | |
| .lorenzo.teal { | |
| --highlight-color: var(--tropical-teal); | |
| } | |
| .lorenzo.container:hover, | |
| .lorenzo button:hover, | |
| .lorenzo .button:hover, | |
| .lorenzo button:focus, | |
| .lorenzo .button:focus { | |
| --darken-amount: calc(1.5 * var(--main-darken-amount)); | |
| } | |
| .lorenzo.container:hover h1, | |
| .lorenzo.container:hover h2, | |
| .lorenzo.container:hover h3, | |
| .lorenzo.container:hover h4 { | |
| color: var(--highlight-color); | |
| } | |
| .lorenzo.raised, | |
| button, | |
| .button, | |
| .lorenzo.content-list-item:hover { | |
| border-radius: var(--radius); | |
| padding: var(--radius); | |
| box-shadow: var(--distance) var(--distance) var(--blur) color-mix(in srgb, | |
| rgba(0,0,0,0) calc(100% - var(--darken-amount)), | |
| black var(--darken-amount)), | |
| calc(-1 * var(--distance)) calc(-1 * var(--distance)) var(--blur) color-mix(in srgb, | |
| rgba(0,0,0,0) calc(100% - var(--darken-amount)), | |
| white var(--darken-amount)); | |
| } | |
| .lorenzo.pressed, | |
| .lorenzo.container-header::after, | |
| .lorenzo.container-footer::before, | |
| button:active, | |
| .button:active { | |
| box-shadow: inset var(--distance) var(--distance) var(--blur) color-mix(in srgb, | |
| rgba(0,0,0,0) calc(100% - var(--darken-amount)), | |
| black var(--darken-amount)), | |
| inset calc(-1 * var(--distance)) calc(-1 * var(--distance)) var(--blur) color-mix(in srgb, | |
| rgba(0,0,0,0) calc(100% - var(--darken-amount)), | |
| white var(--darken-amount)); | |
| } | |
| .lorenzo.flat { | |
| background: var(--bgcolor); | |
| } | |
| .lorenzo.concave, | |
| .lorenzo .button, | |
| .lorenzo .button:link, | |
| .lorenzo .button:visited, | |
| .lorenzo button { | |
| background: linear-gradient(145deg, | |
| color-mix(in srgb, | |
| var(--bgcolor) calc(100% - var(--concave-amount)), | |
| black var(--concave-amount)), | |
| color-mix(in srgb, | |
| var(--bgcolor) calc(100% - var(--concave-amount)), | |
| white var(--concave-amount))); | |
| } | |
| .lorenzo.convex { | |
| background: linear-gradient(145deg, | |
| color-mix(in srgb, | |
| var(--bgcolor) calc(100% - var(--concave-amount)), | |
| white var(--concave-amount)), | |
| color-mix(in srgb, | |
| var(--bgcolor) calc(100% - var(--concave-amount)), | |
| black var(--concave-amount))); | |
| } | |
| .lorenzo.container .lorenzo.container-header, | |
| .lorenzo.container .lorenzo.container-footer { | |
| --distance: 0.5rem; | |
| --blur: 0.5rem; | |
| --darken-amount: var(--main-darken-amount); | |
| margin-bottom: var(--distance); | |
| flex: 0; | |
| } | |
| .lorenzo.container .lorenzo.container-header::after, | |
| .lorenzo.container-footer::before { | |
| border-radius: var(--distance); | |
| content: '\00a0\00a0'; | |
| display: block; | |
| width: 100%; | |
| margin-top: var(--distance); | |
| height: var(--distance); | |
| } | |
| .lorenzo.content-list { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| align-items: stretch; | |
| --distance: 0.5rem; | |
| --radius: 1rem; | |
| --blur: 0.5rem; | |
| --darken-amount: calc(0.5 * var(--main-darken-amount)); | |
| } | |
| .lorenzo.content-list .lorenzo.content-list-item { | |
| display: flex; | |
| justify-content: space-between; | |
| height: 3em; | |
| align-items: center; | |
| padding: 0 calc(2 * var(--distance)); | |
| border-radius: var(--radius); | |
| } | |
| .lorenzo.content-list .lorenzo.content-list-item:hover { | |
| background-color: var(--highlight-color); | |
| } | |
| .lorenzo.content-list-item .title, | |
| .lorenzo.content-list-item .metadata { | |
| display: flex; | |
| justify-content: left; | |
| } | |
| .lorenzo.content-list-item .title { | |
| flex-wrap: nowrap; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| } | |
| .lorenzo.content-list-item .metadata { | |
| } | |
| .lorenzo.container-footer .lorenzo.worth, | |
| .lorenzo .lorenzo.prop { | |
| display: flex; | |
| justify-content: right; | |
| align-items: flex-end; | |
| padding: 0; | |
| } | |
| .lorenzo.content-list-item .metadata .prop { | |
| width: 3em; | |
| } | |
| .lorenzo.worth .lorenzo{ | |
| overflow: hidden; | |
| display: block; | |
| } | |
| .lorenzo.content-list-item .metadata .lorenzo.worth { | |
| width: 8em; | |
| } | |
| .lorenzo.worth .lorenzo::after { | |
| } | |
| .lorenzo.amount::after { content: '×';} | |
| .lorenzo.weight::after { content: 'kg';} | |
| .lorenzo.amount::after, | |
| .lorenzo.weight::after { margin-left: 0.1em;} | |
| .lorenzo.worth .pp::after { content:'❂'; color: #E5E4E2; } | |
| .lorenzo.worth .gp::after { content:'✪'; color: #FFD700; } | |
| .lorenzo.worth .ep::after { content:'◎'; color: #DB7093; } | |
| .lorenzo.worth .sp::after { content:'◉'; color: #C0C0C0; } | |
| .lorenzo.worth .cp::after { content:'⊛'; color: #B87333; } | |
| .lorenzo.content-list-item .metadata .lorenzo.remove { | |
| position: relative; | |
| width: 1em; | |
| overflow: hidden; | |
| text-indent: -8.75em; | |
| } | |
| .lorenzo .lorenzo.remove::after { | |
| content: '🗑'; | |
| position: relative; | |
| left: 8em; | |
| display: inline-block; | |
| } | |
| .lorenzo.container-footer::before { | |
| position: absolute; | |
| top: -3rem; | |
| } | |
| .lorenzo.container-footer { | |
| display: flex; | |
| position: relative; | |
| align-items: stretch; | |
| justify-content: space-around; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <form> | |
| <section class="lorenzo yard"> | |
| <article class="lorenzo container raised flat orange"> | |
| <header class="lorenzo container-header"> | |
| <h1 class="lorenzo title">Flat Orange</h1> | |
| </header> | |
| <ul class="lorenzo content-list"> | |
| <li class="lorenzo content-list-item"> | |
| <div class="lorenzo title"><a class="lorenzo prop">Item 1</a></div> | |
| <div class="lorenzo metadata"> | |
| <span class="lorenzo prop amount">5</span> | |
| <span class="lorenzo prop weight">12</span> | |
| <span class="lorenzo prop worth"><span class="lorenzo gp">5</span> <span class="lorenzo sp">7</span></span> | |
| <a class="lorenzo prop remove">remove</a> | |
| </div> | |
| </li> | |
| <li class="lorenzo content-list-item"> | |
| <div class="lorenzo title"><a class="lorenzo prop">Item 2</a></div> | |
| <div class="lorenzo metadata"> | |
| <span class="lorenzo prop amount">1</span> | |
| <span class="lorenzo prop weight">4</span> | |
| <span class="lorenzo prop worth"><span class="lorenzo cp">1</span></span> | |
| <a class="lorenzo prop remove">remove</a> | |
| </div> | |
| </li> | |
| <li class="lorenzo content-list-item"> | |
| <div class="lorenzo title"><a class="lorenzo prop">Item 3</a></div> | |
| <div class="lorenzo metadata"> | |
| <span class="lorenzo prop amount">11</span> | |
| <span class="lorenzo prop weight">0.5</span> | |
| <span class="lorenzo prop worth"><span class="lorenzo pp">4</span> <span class="lorenzo gp">17</span> <span class="lorenzo ep">2</span> <span class="lorenzo sp">7</span> <span class="lorenzo cp">8</span></span> | |
| <a class="lorenzo prop remove">remove</a> | |
| </div> | |
| </li> | |
| <li class="lorenzo content-list-item"> | |
| <div class="lorenzo title"><a class="lorenzo prop">Item 4 Item 4 Item 4 Item 4 Item 4 Item 4 Item 4 Item 4 Item 4 </a></div> | |
| <div class="lorenzo metadata"> | |
| <a class="lorenzo prop remove">remove</a> | |
| </div> | |
| </li> | |
| </ul> | |
| <footer class="lorenzo container-footer"> | |
| <aside class="lorenzo total weight"> | |
| 112.57 | |
| </aside> | |
| <aside class="lorenzo total worth"> | |
| <span class="lorenzo pp">5</span> <span class="lorenzo gp">127</span> <span class="lorenzo ep">32</span> <span class="lorenzo sp">17</span> <span class="lorenzo cp">2</span> | |
| </aside> | |
| </footer> | |
| </article> | |
| <article class="lorenzo container raised pressed flat teal"> | |
| <header class="lorenzo container-header"> | |
| <h1 class="lorenzo title">Pressed Teal</h1> | |
| </header> | |
| <ul class="lorenzo content-list"> <li class="lorenzo content-list-item"> <div class="lorenzo title"><a class="lorenzo prop">Item 1</a></div> <div class="lorenzo metadata"> <span class="lorenzo prop amount">5</span> <span class="lorenzo prop weight">12</span> <span class="lorenzo prop worth"><span class="lorenzo gp">5</span> <span class="lorenzo sp">7</span></span> <a class="lorenzo prop remove">remove</a> </div> </li> <li class="lorenzo content-list-item"> <div class="lorenzo title"><a class="lorenzo prop">Item 2</a></div> <div class="lorenzo metadata"> <span class="lorenzo prop amount">1</span> <span class="lorenzo prop weight">4</span> <span class="lorenzo prop worth"><span class="lorenzo cp">1</span></span> <a class="lorenzo prop remove">remove</a> </div> </li> <li class="lorenzo content-list-item"> <div class="lorenzo title"><a class="lorenzo prop">Item 3</a></div> <div class="lorenzo metadata"> <span class="lorenzo prop amount">11</span> <span class="lorenzo prop weight">0.5</span> <span class="lorenzo prop worth"><span class="lorenzo pp">4</span> <span class="lorenzo gp">17</span> <span class="lorenzo ep">2</span> <span class="lorenzo sp">7</span> <span class="lorenzo cp">8</span></span> <a class="lorenzo prop remove">remove</a> </div> </li> <li class="lorenzo content-list-item"> <div class="lorenzo title"><a class="lorenzo prop">Item 3</a></div> <div class="lorenzo metadata"> <a class="lorenzo prop remove">remove</a> </div> </li> </ul> | |
| <footer class="lorenzo container-footer"> | |
| <aside class="lorenzo total weight"> 112.57 </aside> <aside class="lorenzo total worth"> <span class="lorenzo pp">5</span> <span class="lorenzo gp">127</span> <span class="lorenzo ep">32</span> <span class="lorenzo sp">17</span> <span class="lorenzo cp">2</span> </aside> | |
| </footer> | |
| </article> | |
| <article class="lorenzo container raised concave yellow"> | |
| <header class="lorenzo container-header"> | |
| <h1 class="lorenzo title">Concave Yellow</h1> | |
| </header> | |
| <ul class="lorenzo content-list"> <li class="lorenzo content-list-item"> <div class="lorenzo title"><a class="lorenzo prop">Item 1</a></div> <div class="lorenzo metadata"> <span class="lorenzo prop amount">5</span> <span class="lorenzo prop weight">12</span> <span class="lorenzo prop worth"><span class="lorenzo gp">5</span> <span class="lorenzo sp">7</span></span> <a class="lorenzo prop remove">remove</a> </div> </li> <li class="lorenzo content-list-item"> <div class="lorenzo title"><a class="lorenzo prop">Item 2</a></div> <div class="lorenzo metadata"> <span class="lorenzo prop amount">1</span> <span class="lorenzo prop weight">4</span> <span class="lorenzo prop worth"><span class="lorenzo cp">1</span></span> <a class="lorenzo prop remove">remove</a> </div> </li> <li class="lorenzo content-list-item"> <div class="lorenzo title"><a class="lorenzo prop">Item 3</a></div> <div class="lorenzo metadata"> <span class="lorenzo prop amount">11</span> <span class="lorenzo prop weight">0.5</span> <span class="lorenzo prop worth"><span class="lorenzo pp">4</span> <span class="lorenzo gp">17</span> <span class="lorenzo ep">2</span> <span class="lorenzo sp">7</span> <span class="lorenzo cp">8</span></span> <a class="lorenzo prop remove">remove</a> </div> </li> <li class="lorenzo content-list-item"> <div class="lorenzo title"><a class="lorenzo prop">Item 3</a></div> <div class="lorenzo metadata"> <a class="lorenzo prop remove">remove</a> </div> </li> </ul> | |
| <footer class="lorenzo container-footer"> | |
| <aside class="lorenzo total weight"> 112.57 </aside> <aside class="lorenzo total worth"> <span class="lorenzo pp">5</span> <span class="lorenzo gp">127</span> <span class="lorenzo ep">32</span> <span class="lorenzo sp">17</span> <span class="lorenzo cp">2</span> </aside> | |
| </footer> | |
| </article> | |
| </section> | |
| </form> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment