Skip to content

Instantly share code, notes, and snippets.

@alexjj
Created May 20, 2022 22:22
Show Gist options
  • Save alexjj/b0f2b05d87845a1ca78bd169f712f74f to your computer and use it in GitHub Desktop.
Save alexjj/b0f2b05d87845a1ca78bd169f712f74f to your computer and use it in GitHub Desktop.
Grid Experiment No. 6
<link href="https://fonts.googleapis.com/css?family=Homemade+Apple|Old+Standard+TT:700|Share+Tech+Mono" rel="stylesheet">
<div class="background">
<div class="check">
<h1>GuestCheck™</h1>
<div class="meta">
<div class="meta-item">
<h2 class="meta-item-label" h2>Date</h2>
</div>
<div class="meta-item">
<h2 class="meta-item-label" 2>Table</h2>
</div>
<div class="meta-item">
<h2 class="meta-item-label">Guests</h2>
</div>
<div class="meta-item">
<h2 class="meta-item-label">Server</h2>
</div>
<div class="meta-item">
<h2 class="check-number">46126</h2>
</div>
</div>
<h3 class="item-types">
appt-soup/sal-entree-veg/pot-dessert-bev
</h3>
<div class="order-list-container">
<div class="order-list writing">
<h3 class="tax">Tax</h3>
<h3 class="total">Total</h3>
<h3 class="thank-you">Thank you</h3>
<h3 class="ordered-item c">C</h3>
<h3 class="ordered-item c-price">2.99</h3>
<h3 class="ordered-item smgf">sm gf</h3>
<h3 class="ordered-item smgf-price">2.19</h3>
<h3 class="ordered-item tea">tea</h3>
<h3 class="ordered-item tea-price">3.09</h3>
<h3 class="ordered-item relleno">1 relleno</h3>
<h3 class="ordered-item relleno-price">12.75</h3>
<h3 class="ordered-item green-ranch">1 green ranch</h3>
<h3 class="ordered-item green-price">11.35</h3>
<h3 class="ordered-item bisc">bisc</h3>
<h3 class="ordered-item bisc-price">2.99</h3>
<h3 class="ordered-item tax-writing">2.48</h3>
<h3 class="ordered-item total-writing">37.84</h3>
</div>
<div class="order-list grid-lines">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</div>
<div class="company-info">
<h4>525</h4>
<h4 class="small-caps">GuestCheck™</h4>
<h4>nationalchecking.com</h4>
<h4 class="small-caps usa">made in the USA</h4>
</div>
<div class="perforation"></div>
<h4 class="guest-receipt">Guest Receipt</h4>
<div class="guest-receipt-meta">
<div class="meta-item">
<h2 class="meta-item-label" h2>Date</h2>
</div>
<div class="meta-item">
<h2 class="meta-item-label">Amount</h2>
</div>
<div class="meta-item">
<h2 class="meta-item-label">Guests</h2>
</div>
<div class="meta-item">
<h2 class="check-number">46126</h2>
</div>
</div>
</div>
</div>
:root {
--gray: #413f4f;
}
body {
background-color: #76e5b3;
}
.background {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
min-width: 100vw;
}
.check {
width: 350px;
height: 615px;
background-color: white;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.34);
margin: 16px 0;
}
h1 {
font-family: "Old Standard TT", serif;
font-variant: small-caps;
text-align: center;
font-size: 42px;
color: var(--gray);
margin: 10px 0 2px;
letter-spacing: -1px;
}
.meta {
margin: 0 16px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
}
.guest-receipt-meta {
margin: 4px 16px 0 16px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
.meta-item {
border-top: 1px solid var(--gray);
border-left: 1px solid var(--gray);
border-bottom: 1px solid var(--gray);
}
.meta-item:nth-last-child(1) {
border-right: 1px solid var(--gray);
}
.meta-item-label {
font-size: 10px;
text-align: center;
font-family: arial;
color: var(--gray);
padding: 2px 0 18px;
}
.check-number {
color: #ff5d5d;
font-family: "share tech mono", menlo;
font-size: 24px;
text-align: center;
padding-top: 2px;
opacity: 0.8;
}
.item-types {
font-family: arial;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
color: var(--gray);
margin: 4px 0 -1px;
}
.order-list {
display: grid;
grid-template-columns: 1fr 4fr 1fr 1fr;
grid-template-rows: repeat(18, 23px);
}
.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3),
.grid-item:nth-child(4) {
border-top: 2px solid var(--gray);
}
.grid-item:nth-child(4n + 1) {
border-bottom: 1px solid var(--gray);
border-right: 1px solid var(--gray);
}
.grid-item:nth-child(4n + 2) {
border-bottom: 1px solid var(--gray);
border-right: 1px solid var(--gray);
}
.grid-item:nth-child(4n + 3) {
border-bottom: 1px solid var(--gray);
border-right: 1px solid var(--gray);
}
.grid-item:nth-child(4n) {
border-bottom: 1px solid var(--gray);
}
.grid-item:nth-last-child(1),
.grid-item:nth-last-child(2),
.grid-item:nth-last-child(3),
.grid-item:nth-last-child(4) {
border-bottom: 2px solid var(--gray);
}
.company-info {
display: flex;
justify-content: space-between;
font-size: 11px;
padding: 2px 16px;
}
.small-caps {
font-variant: small-caps;
}
.usa {
font-family: arial;
font-weight: bold;
font-style: italic;
color: var(--gray);
}
.perforation {
border-top: 1px dashed #b0b5b8;
margin: 8px 0;
}
.guest-receipt {
font-family: arial;
font-size: 12px;
font-weight: bold;
font-style: italic;
color: var(--gray);
margin: 12px 16px 0 16px;
}
.order-list-container {
background-color: #e3faf0;
position: relative;
padding: 4px 16px 2px 16px;
}
.writing {
position: absolute;
z-index: 2;
width: 318px;
font-family: arial;
color: var(--gray);
opacity: 0.8;
}
.tax {
grid-column: 2/3;
grid-row: 17/18;
text-align: right;
font-size: 12px;
align-self: end;
padding: 4px 6px;
}
.total {
grid-column: 2/3;
grid-row: 18/19;
text-align: right;
font-size: 13px;
align-self: end;
font-weight: bold;
padding: 4px 6px;
}
.thank-you {
grid-column: 2/3;
grid-row: 18/19;
text-align: left;
font-size: 13px;
align-self: end;
font-weight: bold;
padding: 4px 6px;
}
.ordered-item {
font-family: "homemade apple";
font-size: 24px;
}
.c {
grid-column: 3/4;
padding-top: 10px;
transform: scale(1.02);
}
.c-price {
grid-column: 4/5;
padding-top: 6px;
transform: scale(1.3) skewy(-3deg);
}
.smgf {
grid-row: 3/4;
grid-column: 2/4;
text-align: right;
padding-right: 18px;
transform: skew(-5deg) scale(1.1);
}
.smgf-price {
grid-row: 3/4;
grid-column: 4/5;
transform: scale(1.08) skewy(-3deg);
}
.tea {
grid-row: 4/5;
grid-column: 2/4;
text-align: right;
padding-right: 27px;
padding-top: 9px;
}
.tea-price {
grid-row: 4/5;
grid-column: 4/5;
padding-top: 10px;
transform: scale(1.1) skewy(-2deg);
}
.relleno {
grid-column: 2/3;
grid-row: 6/7;
padding-top: 4px;
padding-left: 12px;
transform: scale(1.2) skewy(-2deg) skewx(8deg) translatey(2px);
}
.relleno-price {
grid-column: 3/5;
grid-row: 6/7;
padding-top: 4px;
text-align: right;
padding-right: 7px;
}
.green-ranch {
grid-column: 2/4;
grid-row: 8/9;
padding-top: 4px;
padding-left: 6px;
transform: scale(1.08) skewy(-3deg);
}
.green-price {
grid-column: 4/5;
grid-row: 8/9;
transform: scale(1.2) skewy(-7deg) skewx(-5deg);
}
.bisc {
grid-column: 2/3;
grid-row: 11/12;
padding-top: 7px;
padding-right: 3px;
text-align: right;
}
.bisc-price {
grid-column: 4/5;
grid-row: 11/12;
padding-top: 9px;
}
.tax-writing {
grid-column: 4/5;
grid-row: 17/18;
transform: scale(1.3) skewy(-6deg) translateY(-5px);
}
.total-writing {
grid-column: 4/5;
grid-row: 18/19;
transform: scale(1.5) skewy(-4deg) translateX(-12px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment