Skip to content

Instantly share code, notes, and snippets.

@greystate

greystate/dabblet.css

Last active July 29, 2024 11:23
Show Gist options
  • Save greystate/b5a67a25811326e87c7de1e074506819 to your computer and use it in GitHub Desktop.
Save greystate/b5a67a25811326e87c7de1e074506819 to your computer and use it in GitHub Desktop.
Download ZIP
Sections and modules test
Raw
dabblet.css
/**
* Sections and modules test
*/
html {
background: #e9e9e9;
min-height: 100%;
}
body { margin:0; }
section {
padding-block: 4rem;
border: px dashed blue;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
&.bg1 {
background-color: white;
}
&.bg2 {
background-color: red;
}
}
section + section {
border-block-start: 1px dashed #000;
}
section:not([class*="bg"]) + section:not([class*="bg"]) {
padding-block-start: 0;
}
article {
background: rgba(0, 0, 200, 0.3);
block-size: 2rem;
inline-size: 100%;
max-inline-size: 800px;
&.tall { block-size: 5rem; }
&.half { max-inline-size: 400px; margin-inline-end: 400px; }
&.offset { margin-inline-start: 400px; margin-inline-end: 0; }
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<section>
<article></article>
<article class="half offset tall"></article>
</section>
<section>
<article></article>
<article></article>
</section>
<section class="bg1">
<article></article>
<article class="half tall"></article>
<article></article>
</section>
<section class="bg2">
<article class="half"></article>
<article></article>
</section>
<section>
<article></article>
<article class="offset half"></article>
<article></article>
</section>
<section>
<article></article>
<article></article>
</section>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"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