Skip to content

Instantly share code, notes, and snippets.

@gusbemacbe
Created January 16, 2024 12:56
Show Gist options
  • Save gusbemacbe/0db600ab4cc10fc85049cbbbef8f6579 to your computer and use it in GitHub Desktop.
Save gusbemacbe/0db600ab4cc10fc85049cbbbef8f6579 to your computer and use it in GitHub Desktop.
Latest transactions
<section>
<h1>Latest Transactions</h1>
<h2>Today</h2>
<details>
<summary>
<div>
<span style="background-color: #f2dcbb;">
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<path d="M192,120h27.05573a8,8,0,0,0,7.15542-4.42229l18.40439-36.80878a8,8,0,0,0-3.18631-10.52366L192,40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
<path d="M64,120H36.94427a8,8,0,0,1-7.15542-4.42229L11.38446,78.76893a8,8,0,0,1,3.18631-10.52366L64,40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
<path d="M160,40a32,32,0,0,1-64,0H64V208a8,8,0,0,0,8,8H184a8,8,0,0,0,8-8V40Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
</svg>
</span>
<h3>
<strong>American Eagle</strong>
<small>Clothes & Fashion</small>
</h3>
<span>-39.99 USD</span>
</div>
</summary>
<div>
<dl>
<div>
<dt>Time</dt>
<dd>4.27pm</dd>
</div>
<div>
<dt>Card used</dt>
<dd>•••• 6890</dd>
</div>
<div>
<dt>Reference ID</dt>
<dd>3125-568911</dd>
</div>
</dl>
</div>
</details>
<details>
<summary>
<div>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<rect x="32" y="80" width="192" height="48" rx="7.99999" stroke-width="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect>
<path d="M208,128v72a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
<line x1="128" y1="80" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
<path d="M173.25483,68.68629C161.94113,80,128,80,128,80s0-33.94113,11.31371-45.25483a24,24,0,0,1,33.94112,33.94112Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
<path d="M82.74517,68.68629C94.05887,80,128,80,128,80s0-33.94113-11.31371-45.25483A24,24,0,0,0,82.74517,68.68629Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
</svg>
</span>
<h3>
<strong>From Håvard Brynjulfsen</strong>
<small>Gift</small>
</h3>
<span class="plus">+50.00 USD</span>
</div>
</summary>
<div>
<dl>
<div>
<dt>Time</dt>
<dd>8.14am</dd>
</div>
<div>
<dt>Reference ID</dt>
<dd>3125-568912</dd>
</div>
</dl>
</div>
</details>
<details>
<summary>
<div>
<span style="background-color: #e0ece4;">
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<line x1="88" y1="24" x2="88" y2="56" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
<line x1="120" y1="24" x2="120" y2="56" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
<line x1="152" y1="24" x2="152" y2="56" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
<line x1="32" y1="216" x2="208" y2="216" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
<path d="M83.29651,216.0038A88.01441,88.01441,0,0,1,32,136V88H208v48a88.0144,88.0144,0,0,1-51.29712,80.00408" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
<path d="M208,88h0a32,32,0,0,1,32,32V128a32,32,0,0,1-32,32h-3.37846" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path>
</svg>
</span>
<h3>
<strong>Starbucks</strong>
<small>Food & Beverage</small>
</h3>
<span>-14.99 USD</span>
</div>
</summary>
<div>
<dl>
<div>
<dt>Time</dt>
<dd>7.49am</dd>
</div>
<div>
<dt>Card used</dt>
<dd>•••• 6890</dd>
</div>
<div>
<dt>Reference ID</dt>
<dd>3125-568913</dd>
</div>
</dl>
</div>
</details>
<details>
<summary>
<div>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#000000" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="128" r="96" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle><g><path d="M179.1333,108.32931a112.19069,112.19069,0,0,0-102.3584.04859" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M164.29541,136.71457a79.94058,79.94058,0,0,0-72.68359.04736" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><path d="M149.47217,165.07248a47.97816,47.97816,0,0,0-43.03662.04736" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></g></svg>
</span>
<h3>
<strong>Spotify</strong>
<small>Music & Entertainment</small>
</h3>
<span>-9.99 USD</span>
</div>
</summary>
<div>
<dl>
<div>
<dt>Time</dt>
<dd>1.00am</dd>
</div>
<div>
<dt>Card used</dt>
<dd>•••• 6890</dd>
</div>
<div>
<dt>Reference ID</dt>
<dd>3125-568915</dd>
</div>
</dl>
</div>
</details>
</section>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
line-height: 1.5;
min-height: 100vh;
padding: 5rem 0;
font-size: clamp(1rem, 2.5vw, 1.125rem);
}
section {
width: 90%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
& + section {
margin-top: 2.5em;
}
}
h1 {
font-weight: 700;
line-height: 1.125;
font-size: clamp(1.5rem, 2.5vw, 2.5rem);
}
h2 {
margin-top: .25em;
color: #999;
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
& + * {
margin-top: 1.5em;
}
}
summary {
background-color: #fff;
position: relative;
cursor: pointer;
padding: 1em .5em;
list-style: none; // Remove arrow
&::-webkit-details-marker {
display: none; // Remove arrow
}
&:hover {
background-color: #f2f5f9;
}
div {
display: flex;
align-items: center;
}
h3 {
display: flex;
flex-direction: column;
}
small {
color: #999;
font-size: .875em;
}
strong {
font-weight: 700;
}
span:first-child {
width: 4rem;
height: 4rem;
border-radius: 10px;
background-color: #f3e1e1;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
margin-right: 1.25em;
svg {
width: 2.25rem;
height: 2.25rem;
}
}
span:last-child {
font-weight: 700;
margin-left: auto;
}
&:focus {
outline: none;
}
.plus {
color: #289672;
}
}
details {
border-bottom: 1px solid #b5bfd9;
&[open] {
box-shadow: -3px 0 0 #b5bfd9;
}
&:first-of-type {
border-top: 1px solid #b5bfd9;
}
& > div {
padding: 2em 2em 0;
font-size: .875em;
}
}
dl {
display: flex;
flex-wrap: wrap;
dt {
font-weight: 700;
}
div {
margin-right: 4em;
margin-bottom: 2em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment