Skip to content

Instantly share code, notes, and snippets.

@curlpipe

curlpipe/stackbunch_example.html

Created August 24, 2021 23:27
Show Gist options
  • Save curlpipe/220447296476afd34eeced5b3ad0f3eb to your computer and use it in GitHub Desktop.
Save curlpipe/220447296476afd34eeced5b3ad0f3eb to your computer and use it in GitHub Desktop.
Download ZIP
The stackbunch library example
Raw
stackbunch_example.html
<html lang="en">
<head>
<meta charset="UTF-8">
<script defer src="stackbunch.js"></script>
</head>
<body mobile="500px" tablet="700px" desktop="1000px">
<stack>
<bunch class="titlebar">
<div class="logo">
<p>Cosmos Music</p>
</div>
<div class="search">
<input placeholder="Search">
<p class="search-icon">ᐳ</p>
</input>
</div>
<div></div>
</bunch>
<bunch on-mobile="stack" on-tablet="stack">
<div class="menu">
<stack class="options">
<a href="#">My Music</a>
<a href="#">Discover</a>
<a href="#">Radio</a>
<a href="#">Help</a>
<p>πŸ„― 2021</p>
</stack>
</div>
<div class="album">
<bunch class="main" on-tablet="stack" on-mobile="stack">
<stack class="album-info" on-tablet="bunch">
<div class="album-picture">
<img src="https://lastfm.freetls.fastly.net/i/u/770x0/7c1d40f52bca4dab8f702fd0918a134b.jpg" width="200px" />
</div>
<div class="text-container">
<div class="album-text">
<h3>My Life In The Bush Of Ghosts</h3>
<h5>Brian Eno & David Byrne</h5>
<p>1979</p>
</div>
</div>
</stack>
<stack class="album-tracks">
<a href="#">πŸ”ˆ America Is Waiting</a>
<a href="#">πŸ”ˆ Mea Culpa</a>
<a href="#">πŸ”ˆ Regiment</a>
<a href="#">πŸ”ˆ Help Me Somebody</a>
<a href="#">πŸ”ˆ The Jezebel Spirit</a>
<a href="#">πŸ”ˆ Very Very Hungry</a>
<a href="#">πŸ”ˆ Moonlight In Glory</a>
<a href="#">πŸ”ˆ The Carrier</a>
<a href="#">πŸ”ˆ A Secret Life</a>
<a href="#">πŸ”ˆ Come With Us</a>
<a href="#">πŸ”ˆ Mountain Of Needles</a>
<a href="#">πŸ”ˆ Pitch To Voltage</a>
<a href="#">πŸ”ˆ Two Against Three</a>
<a href="#">πŸ”ˆ Vocal Out-Takes</a>
<a href="#">πŸ”ˆ New Feet</a>
<a href="#">πŸ”ˆ Defiant</a>
<a href="#">πŸ”ˆ Number 8 Mix</a>
<a href="#">πŸ”ˆ Solo Guitar With Tin Foil</a>
</stack>
</bunch>
</div>
</bunch>
</stack>
</body>
</html>
<style>
body {
margin: 0;
background-color: #2D3047;
}
p, h3, h5 {
margin: 0;
color: white;
font-family: monospace;
}
a {
color: #1B998B;
text-decoration: none;
font-family: monospace;
}
.main {
padding: 20px;
}
.album-info {
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
padding: 20px;
}
.text-container {
display: flex;
justify-content: center;
align-self: center;
}
.album-tracks {
padding: 20px;
}
.album-tracks > a {
color: lightgrey;
padding: 7px;
margin-bottom: 2px;
background-color: #404464;
border: 3px solid #383B57;
border-radius: 5px;
font-size: 15px;
}
div.album-picture {
padding-bottom: 20px;
flex-basis: 0;
display: flex;
justify-content: center;
align-self: center;
}
.album-text > * {
margin-bottom: 5px;
}
.titlebar > * {
padding: 5px;
display: flex;
align-items: center;
background-color: #404464;
}
div.search > input {
width: 100%;
background-color: #50557C;
border: 0px;
padding: 3px;
margin-right: 5px;
border-radius: 7px;
color: white;
}
div.search > input::placeholder {
color: white;
}
.logo {
font-size: 20px;
}
.search-icon {
background-color: #1B998B;
font-size: 20px;
text-align: center;
height: 22px;
width: 22px;
}
.menu {
background-color: #383B57;
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
height: calc(100vh - 35px);
}
.options {
height: 200px;
padding: 20px;
}
.options > * {
font-size: 20px;
padding: 5px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment