learn-javascript-the-hard-way
/
bandolier2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First example from openprops.

Browse Source
main
Zed A. Shaw 9 months ago
parent c96e2dd5e2
commit 069a30bc5b
2 changed files with 107 additions and 21 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 127
      static/index.html
  2. 1
      static/normalize.min.css

127
static/index.html
Unescape View File

@ -1,37 +1,122 @@
<!doctype html> <!doctype html>
<html> <html lang="en" dir="ltr">
<head> <head>
<meta charset="utf-8">
<script src="/alpine.js"></script> <script src="/alpine.js"></script>
<title>Bandolier2</title> <title>Bandolier2</title>
<style> <style>
@import "/open-props.min.css"; @import "/open-props.min.css";
@import "/normalize.min.css";
body {
display: flex;
flex-direction: column;
}
section {
min-width: 1080px;
align-self: center;
}
header {
display: grid;
align-items: center;
grid-template-columns: 1fr 1fr;
background: var(--grape-0);
}
blockquote { .hero {
--_accent-1: var(--lime-5); padding: var(--size-10);
--_accent-2: var(--lime-4); display: grid;
--_bg: var(--surface-2); gap: var(--size-5);
--_ink: var(--text-1); }
.hero-message {
display: grid;
grid-template-columns: max-content;
color: var(--gray-9);
line-height: var(--font-lineheight-0);
}
.hero-message > div:last-child {
color: var(--indigo-7);
}
.under-hero {
color: var(--gray-7);
font-size: var(--font-size-4);
margin-block-end: var(--size-3);
}
color: var(--_ink); .button-list {
border-color: var(--_accent-2); display: flex;
background-color: var(--_bg); gap: var(--size-3);
justify-self: flex-start;
} }
button {
background: white;
color: var(--indigo-8);
font-size: var(--font-size-3);
padding-inline: var(--size-8);
padding-block: var(--size-3);
border-radius: var(--radius-2);
box-shadow: var(--shadow-2);
}
button.primary {
background: var(--indigo-8);
text-shadow: 0 1px 0 var(--indigo-9);
color: white;
}
button.primary:hover {
background: var(--indigo-7);
}
.promo-art {
align-self: stretch;
}
.promo-art > img {
block-size: 100%;
object-fit: cover;
}
</style> </style>
<head> <head>
<body> <body>
<h1>Test!</h1> <header>
<div x-data="{ open: false }"> <section class="hero">
<button @click="open = !open">Expand</button> <h1 class="hero-message">
<span x-show="open"> <div>Hero layout with</div>
Content... <div>Open Props</div>
</span> </h1>
</div> <p class="under-hero">Lorem ipsum dolor sit amet consectetu adipisicing elit. Nemo in doloremque quam, voluptatibus eum voluptatum.</p>
<div class="button-list">
<blockquote> <button class="primary">Get started</button>
One day I will learn how to run without falling. <button>Live demo</button>
</blockquote> </div>
</section>
<picture class="promo-art">
<img src="https://doodleipsum.com/700x700/outline?bg=3b5bdb" height="800" width="800" alt="a random doodle">
</picture>
</header>
<section>
<h1>Test!</h1>
<div x-data="{ open: false }">
<button @click="open = !open">Expand</button>
<span x-show="open">
Content...
</span>
</div>
<blockquote>
One day I will learn how to run without falling.
</blockquote>
</section>
</body> </body>
</html> </html>

1
static/normalize.min.css vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save