greystate

/**
 * Using currentcolor to style referenced SVG
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

#logobox {

greystate

/**
 * Text over image w/ CSS Grid
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

.heroic {

greystate

/**
 * Clip Path Exploration
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

img {

greystate

/**
 * The first commented line is your dabblet’s title
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
box-shadow: 0 0 0 20px green inset;
padding: 20px;
box-sizing: border-box;

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;