greystate

/**
 * Testing @property for animating an angle value
 */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 45deg;
}

:root {

greystate

/**
 * Image with blurred background
 */
:root {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100dvh;
}

figure {

greystate

/**
 * Image with blurred background
 */
:root {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100dvh;
}

figure {

greystate

/**
 * Sections and modules test
 */

html {
	background: #e9e9e9;
	min-height: 100%;
}

body { margin:0; }

greystate

/**
 * Pure CSS Reveal?
 */

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

greystate

/**
 * Overriding defaults with a layer
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

/* These are "Unlayered Styles" */

greystate

/**
 * Image Cloud
 */

html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
--pos-x: 48;
--pos-y: 320;

greystate

/**
 * CSS hyphenation test (none, manual & auto)
 */

.cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border: 2px solid; padding: 1em; }
.card { padding: 10px; border: 3px outset orange; hyphens: auto; }

.no-hyphens { hyphens: none; background: rgba(200, 0, 0, 0.5); }
.manual-hyphens { hyphens: manual; background: rgba(240, 120, 0, 0.5); }

greystate

using System.Collections.Generic;
using System.Linq;
using Umbraco.Community.Contentment.DataEditors;
using Umbraco.Core.PropertyEditors;
using Umbraco.Web;

namespace MyWebsite.DataSources
{
    public class PropertyDataDataSource : IDataListSource
    {

greystate

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

svg circle {