greystate

/**
 * Andy's breakout button
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

body {

greystate

/**
 * Button style
 */

html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
font-size: 160%;
}

greystate

<?xml version="1.0" encoding="UTF-8"?>
<SiteSettings environment="local">
  <Settings for="development">
    <!-- ... -->
  </Settings>

  <Settings for="live">
    <!-- ... -->
  </Settings>
</SiteSettings>

greystate

/**
 * Dot with underlay
 */
.dot {
  transition: max-width 0.7s ease-out;
  box-sizing: border-box;
  position: relative;
  border-radius: 17px;
  padding: 7px 17px 7px 7px;
  background-color: rgba(0, 0, 0, 0.5);

greystate

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background:
   linear-gradient(to bottom, #f06, #f06 5px, yellow 0, yellow 57px, #f06 0) no-repeat;
height: 62px;

greystate

/**
 * 2DScroller Spike
 */
 
 body { --value: 100; }
 
.item1, .item2 { box-sizing: border-box; }

section {
	position: relative;

greystate

/**
 * "Screens"
 */
* {margin: 0; padding: 0;}

main {
	font-size: 130%;
	display: grid;
	grid-auto-rows: minmax(100vh, min-content);
	background: #efefef;

greystate

/**
 * img::after exploration
 */

body {
	
}

img {
	background: maroon;

greystate

/**
 * Keep the "New card" button top right, however many columns & rows there are.
 * Resize the viewport...
 */

body {
	background: #dedede;
	color: #999;
	font: 2rem sans-serif;
}

greystate

/**
 * Keep the "New card" button top right, however many columns & rows there are.
 * Resize the viewport...
 */

body {
	background: #dedede;
	color: #999;
	font: 2rem sans-serif;
}