0.9.3

Author: EvgenyOrekhov

README.md

@@ -38,7 +38,7 @@ See form example: [Bootstrap](https://jsfiddle.net/z16aknfh/3/) vs
 ## Quick Start
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.2" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.3" />
 ```
 
 ## Browser compatibility

dist/holiday.css

@@ -283,6 +283,274 @@ Add the correct display in Chrome and Safari.
 summary {
 	display: list-item;
 }
+html {
+  height: 100%;
+  line-height: 1.4;
+}
+
+h1,
+h2,
+h3 {
+  line-height: 1.15;
+}
+
+body {
+  min-height: 100%;
+  overflow-wrap: break-word;
+}
+
+main {
+  flex-grow: 1;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100vh;
+}
+
+table {
+  display: block;
+  overflow-x: auto;
+}
+
+pre {
+  padding: 1rem;
+  overflow-x: auto;
+  line-height: 1.15;
+}
+
+code {
+  padding: 0.25rem;
+}
+
+pre code {
+  padding: unset;
+}
+
+kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  max-width: calc(100% - 0.1rem * 2);
+  min-height: 1.5rem;
+  padding: 0 0.25rem;
+  margin: 0 0.1rem;
+  overflow: hidden;
+}
+
+kbd kbd {
+  min-width: unset;
+  min-height: unset;
+  padding: 0;
+  margin: 0;
+}
+
+kbd kbd:not(:first-child) {
+  padding-left: 0.25rem;
+}
+
+kbd kbd:not(:last-child) {
+  padding-right: 0.25rem;
+}
+
+iframe {
+  width: 100%;
+  border: none;
+}
+
+dialog {
+  max-height: calc(100% - 1rem);
+  overflow-y: auto;
+  border: none;
+}
+
+audio,
+video,
+embed,
+object {
+  width: 100%;
+}
+
+[type="range"],
+meter,
+progress {
+  display: block;
+  width: 100%;
+  height: 2.25rem;
+}
+
+[type="color"] {
+  height: 2.25rem;
+  vertical-align: top;
+}
+
+td,
+th,
+details,
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  padding: 0.5rem;
+}
+
+input:not([type]),
+[type="email"],
+[type="hidden"],
+[type="number"],
+[type="password"],
+[type="search"],
+[type="tel"],
+[type="text"],
+[type="url"] {
+  display: block;
+  width: 100%;
+  height: 2.25rem;
+  padding: 0.5rem;
+}
+
+[type="file"] {
+  display: block;
+  width: 100%;
+  height: 2.25rem;
+
+  /* Works in Chrome (but poorly), doesn't work in Firefox */
+  padding-top: 0.35rem;
+}
+
+[type="date"],
+[type="datetime-local"],
+[type="time"],
+[type="month"],
+[type="week"] {
+  display: block;
+  width: 100%;
+  height: 2.25rem;
+
+  /* 0.4rem is a hack for mobile Chrome */
+  padding: 0.4rem 0.5rem;
+}
+
+output {
+  display: block;
+  width: 100%;
+}
+
+textarea {
+  display: block;
+  width: 100%;
+  min-height: 8em;
+  padding: 0.5rem;
+}
+
+select {
+  display: block;
+  width: 100%;
+  min-height: 2.25rem;
+
+  /* "padding: 0.5rem;" messes up the height of selects */
+  padding: 0.45rem 0.5rem;
+}
+
+summary {
+  padding: 0.5rem;
+  margin: -0.5rem;
+}
+
+[type="image"] {
+  vertical-align: bottom;
+}
+
+fieldset {
+  padding: 0.75rem;
+}
+
+label > [type="color"] {
+  margin-left: 0.25rem;
+}
+
+label {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  margin-top: 1rem;
+}
+
+legend + label {
+  margin-top: 0;
+}
+
+[type="checkbox"] + label,
+[type="radio"] + label {
+  display: inline-flex;
+  width: unset;
+  vertical-align: text-bottom;
+}
+
+/* stylelint-disable-next-line plugin/stylelint-group-selectors */
+blockquote > p:first-child,
+fieldset > label:first-child {
+  margin-top: 0;
+}
+
+label > [type="checkbox"],
+label > [type="radio"] {
+  min-height: 1rem;
+  margin-right: 0.25rem;
+}
+
+blockquote {
+  padding: 1rem 2rem;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+blockquote > p:last-child {
+  margin-bottom: 0;
+}
+
+footer {
+  margin-top: 1rem;
+}
+
+figure > figcaption {
+  text-align: center;
+}
+
+body > footer {
+  padding-bottom: 1rem;
+}
+
+figure {
+  margin-right: 0;
+  margin-left: 0;
+  text-align: center;
+}
+
+/* stylelint-disable-next-line selector-max-universal */
+figure > * {
+  text-align: initial;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1rem;
+}
+
+li {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+picture {
+  display: block;
+  text-align: center;
+}
 abbr {
   cursor: help;
 }
@@ -374,7 +642,7 @@ kbd {
   align-items: center;
   justify-content: center;
   min-width: 1.5rem;
-  max-width: 100%;
+  max-width: calc(100% - 0.1rem * 2);
   min-height: 1.5rem;
   padding: 0 0.25rem;
   margin: 0 0.1rem;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "holiday.css",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "A classless CSS theme",
   "main": "dist/holiday.css",
   "style": "dist/holiday.css",

package.json

@@ -22,7 +22,7 @@ Or you can use it as a base and build upon it.
 Just add this to your `<head>`:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.2" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.3" />
 ```
 
 ## What makes holiday.css different

site/README.md

@@ -8,7 +8,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.2"
+      href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.3"
     />
     <link
       rel="stylesheet"

site/_includes/layout.liquid

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.2"
+      href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.3"
     />
   </head>
 

site/template.html

@@ -8,7 +8,7 @@ layout: layout
 Have an existing web page? Add this to your `<head>`:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.2" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.3" />
 ```
 
 Starting afresh? Use [Quickstart Template]({{ "/template/" | url }}).