diff --git a/css/sustainable.css b/css/sustainable.css index dd94f30..7b94f63 100644 --- a/css/sustainable.css +++ b/css/sustainable.css @@ -1,6 +1,9 @@ /*! - * Sustainable CSS v0.0.4 (https://github.com/pdelboca/sustainable-css/) + * Sustainable CSS v0.0.5 (https://github.com/pdelboca/sustainable-css/) * Copyright 2023 - Licensed under MIT + * + * Sustainable CSS reuses system colors: + * https://drafts.csswg.org/css-color-4/#css-system-colors */ :root { @@ -35,7 +38,7 @@ fieldset, input, select, textarea, button { } fieldset, input:not([type=submit]), select, textarea { - border: 1px solid var(--theme-color); + border: 1px solid; } button, input[type=submit], input[type=reset] { @@ -52,10 +55,17 @@ header > nav > * > a, header > nav > a { margin: 0 0.5em; } +details > summary { + cursor: pointer; +} + /* Branding and colors */ h1, h2, h3, h4, h5, h6 { color: var(--theme-color); } +a { + color: canvastext; +} a:hover { font-weight: bold; } diff --git a/demo.html b/demo.html index e751580..214ac57 100644 --- a/demo.html +++ b/demo.html @@ -33,15 +33,15 @@

Paragraph

Details

Click to expand -

Good enough.

+

I just added cursor: pointer; to the summary element. Good enough.

Forms

Forms layout are always customized and the styling is highly coupled with the layout. Example: margins of labels are - highly coupled with the decision on puting them above the input or besides it. That's why Sustainable.css do not add a lot of CSS to - inputs and labels. + highly coupled with the decision on puting them above the input or besides it. That's why Sustainable.css do not add + a lot of CSS to inputs and labels.

We focus on giving a small styling to the inputs elements and let the user define how to layout it and further customize it. @@ -96,11 +96,12 @@

Forms

+

Mark

-

This is a highlighted text.

+

This is a highlighted text.

Articles

I add a border and align to the right the footer.

@@ -108,7 +109,7 @@

Articles

Main Article Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum veritatis doloremque eum omnis corporis mollitia - tenetur! Provident quasi praesentium vel, alias saepe quisquam quae hic debitis expedita totam eum libero?

+ tenetur! Provident quasi praesentium vel, alias saepe quisquam quae hic debitis expedita totam eum libero?