html.css - npm Package Compare versions

Comparing version 0.6.7 to 0.7.8

dist/html.css

@@ -17,10 +17,7 @@ /**
 }
-html {
+html,
+body {
   margin: 0;
   padding: 0;
 }
-body {
-  margin: 0 auto;
-  padding: 2rem 1rem;
-}
 ul,
@@ -70,12 +67,31 @@ ol {
 img,
+canvas svg,
+progress,
+audio,
+video {
+  display: inline-block;
+}
+img,
 canvas,
-svg,
-embed,
-object,
 audio,
 video {
-  display: inline-block;
+  max-width: 100%;
+}
+img,
+canvas,
+video {
   height: auto;
+}
+svg {
   max-width: 100%;
+  height: 100%;
 }
+embed,
+object,
+iframe {
+  max-width: 100%;
+  max-height: 75vw;
+  border: 0;
+  margin-bottom: 1rem;
+}
 figure {
@@ -87,14 +103,9 @@ text-align: center;
   font-family: Georgia, serif;
-  color: #676a7a;
+  color: #737687;
 }
-iframe {
-  max-width: 100%;
-  max-height: 75vw;
-  border: 0;
-  margin-bottom: 1rem;
-}
 body {
+  margin-right: auto;
+  margin-left: auto;
+  padding: 2rem 1rem 3rem;
   max-width: 900px;
-}
-body {
   display: -ms-flexbox;
@@ -115,4 +126,4 @@ display: flex;
       flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -ms-flex-preferred-size: calc(70% - 1rem);
@@ -127,4 +138,4 @@ flex-basis: calc(70% - 1rem);
       flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -ms-flex-preferred-size: calc(30% - 1rem);
@@ -151,3 +162,3 @@ flex-basis: calc(30% - 1rem);
 tbody tr {
-  border-bottom: 1px solid #d4d4d4;
+  border-bottom: 1px solid #d3d3d8;
 }
@@ -206,3 +217,3 @@ th,
   border-left: 2px solid #0275d8;
-  color: #676a7a;
+  color: #737687;
 }
@@ -225,18 +236,14 @@ blockquote p:last-child {
 }
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+}
 mark {
   background-color: #fde965;
   color: #50525e;
-  padding: 1px 4px;
+  padding: 0 4px;
 }
-u {
-  text-decoration: none;
-  border-bottom: 2px solid;
-}
-ins {
-  text-decoration: none;
-  border-bottom: 2px solid;
-}
 del {
-  text-decoration: line-through;
-  color: #676a7a;
+  color: #737687;
 }
@@ -249,3 +256,3 @@ dt {
   margin-bottom: 1rem;
-  border-top: 1px solid #d4d4d4;
+  border-top: 1px solid #d3d3d8;
 }
@@ -259,5 +266,20 @@ a {
 a:focus {
-  border-bottom: 2px solid #0275d8;
+  text-decoration: underline;
 }
+code,
+kbd,
+samp,
 pre {
+  font-family: monospace;
+}
+code,
+kbd,
+samp {
+  color: #0275d8;
+  font-size: 95%;
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+  background: #eeeef0;
+}
+pre {
   margin-top: 0;
@@ -269,57 +291,67 @@ margin-bottom: 1rem;
        tab-size: 2;
-  font-family: monospace;
   font-size: 1rem;
   text-align: left;
+  color: #50525e;
   border-radius: 3px;
-  background-color: #eeeeef;
+  background-color: #eeeef0;
 }
-pre,
 pre code {
-  color: #50525e;
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+  background-color: transparent;
 }
-kbd,
-code,
-samp {
-  font-family: monospace;
-  color: #DD4A68;
-}
 fieldset {
   margin: 0 0 1rem 0;
   padding: 1rem;
-  border: 1px solid #d4d4d4;
+  border: 1px solid #d3d3d8;
   border-radius: 3px;
 }
-input[type='text'],
-input[type='password'],
-input[type='url'],
-input[type='email'],
-input[type='tel'],
-input[type='search'],
-input[type='number'],
-input[type='date'],
-input[type='month'],
-input[type='week'],
-input[type='datetime'],
-input[type='datetime-local'],
+label {
+  padding-right: 0.5rem;
+  vertical-align: top;
+  height: 37.2px;
+  line-height: 37.2px;
+}
+label:hover {
+  cursor: pointer;
+}
+input[type="date"],
+input[type="time"],
+input[type="week"],
+input[type="month"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="url"],
+input[type="file"],
 select,
 select[multiple],
 textarea {
-  font-size: 1rem;
-  border: 1px solid #d4d4d4;
+  padding: 0.5rem 1rem;
+  min-height: 37.2px;
+  border: 1px solid #d3d3d8;
   border-radius: 3px;
-  padding: 0.5rem 1rem;
   outline: none;
+  font-size: 1rem;
 }
-input[type='text']:focus,
-input[type='password']:focus,
-input[type='url']:focus,
-input[type='email']:focus,
-input[type='tel']:focus,
-input[type='search']:focus,
-input[type='number']:focus,
-input[type='date']:focus,
-input[type='month']:focus,
-input[type='week']:focus,
-input[type='datetime']:focus,
-input[type='datetime-local']:focus,
+input[type="date"]:focus,
+input[type="time"]:focus,
+input[type="week"]:focus,
+input[type="month"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="text"]:focus,
+input[type="url"]:focus,
+input[type="file"]:focus,
 select:focus,
@@ -338,5 +370,8 @@ select[multiple]:focus,
 }
-select[multiple] optgroup option {
-  padding: 5px;
+input[type="file"]:hover {
+  cursor: pointer;
 }
+input[type="search"] {
+  -webkit-appearance: none;
+}
 textarea {
@@ -347,30 +382,25 @@ padding: 1rem;
 }
-form label {
+label {
   display: block;
   width: 100%;
-  padding-top: 5px;
-  padding-right: 0.5rem;
-  padding-bottom: 0.5rem;
-  vertical-align: top;
 }
-form label:hover {
-  cursor: pointer;
-}
-form input[type='text'],
-form input[type='password'],
-form input[type='url'],
-form input[type='email'],
-form input[type='tel'],
-form input[type='search'],
-form input[type='number'],
-form input[type='color'],
-form input[type='range'],
-form input[type='date'],
-form input[type='month'],
-form input[type='week'],
-form input[type='datetime'],
-form input[type='datetime-local'],
-form select,
-form select[multiple],
-form textarea {
+input[type="date"],
+input[type="time"],
+input[type="week"],
+input[type="month"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="url"],
+input[type="file"],
+input[type="range"],
+input[type="color"],
+select,
+select[multiple],
+textarea {
   display: block;
@@ -380,3 +410,3 @@ width: 100%;
 @media (min-width: 768px) {
-  form label {
+  label {
     display: inline-block;
@@ -386,19 +416,21 @@ width: auto;
   }
-  form input[type='text'],
-  form input[type='password'],
-  form input[type='url'],
-  form input[type='email'],
-  form input[type='tel'],
-  form input[type='search'],
-  form input[type='number'],
-  form input[type='color'],
-  form input[type='range'],
-  form input[type='date'],
-  form input[type='month'],
-  form input[type='week'],
-  form input[type='datetime'],
-  form input[type='datetime-local'],
-  form select,
-  form select[multiple],
-  form textarea {
+  input[type="date"],
+  input[type="time"],
+  input[type="week"],
+  input[type="month"],
+  input[type="datetime"],
+  input[type="datetime-local"],
+  input[type="email"],
+  input[type="number"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="text"],
+  input[type="url"],
+  input[type="file"],
+  input[type="range"],
+  input[type="color"],
+  select,
+  select[multiple],
+  textarea {
     display: inline-block;
@@ -408,28 +440,28 @@ width: calc(77%);
 }
-input[type=submit],
 input[type=button],
 input[type=reset],
+input[type=submit],
 button {
   display: inline-block;
-  padding: 0.5rem 1rem;
+  padding: 8px 16px;
+  border-radius: 3px;
+  border: 1px solid #d4d4d4;
   vertical-align: middle;
-  font-size: 0.8rem;
+  font-size: 12.8px;
   line-height: 1.5;
   cursor: pointer;
-  border-radius: 3px;
-  border: 1px solid #d4d4d4;
   background-color: #ebebeb;
   background-image: linear-gradient(#f4f4f4, #ebebeb);
 }
-input[type=submit]:hover:not([disabled]),
 input[type=button]:hover:not([disabled]),
 input[type=reset]:hover:not([disabled]),
+input[type=submit]:hover:not([disabled]),
 button:hover:not([disabled]),
-input[type=submit]:focus:not([disabled]),
 input[type=button]:focus:not([disabled]),
 input[type=reset]:focus:not([disabled]),
+input[type=submit]:focus:not([disabled]),
 button:focus:not([disabled]),
-input[type=submit]:active:not([disabled]),
 input[type=button]:active:not([disabled]),
 input[type=reset]:active:not([disabled]),
+input[type=submit]:active:not([disabled]),
 button:active:not([disabled]) {
@@ -442,9 +474,9 @@ border-color: #0267bf;
 }
-input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
+input[type=submit][disabled],
 button[disabled] {
-  color: #676a7a;
+  color: #737687;
   cursor: not-allowed;
   opacity: 0.7;
 }

dist/html.min.css

@@ -7,2 +7,2 @@ /**
  */
-body>*,iframe,table{max-width:100%}article :last-child,aside :last-child,blockquote p:last-child,figcaption :last-child,figure :last-child,footer :last-child,header :last-child,main :last-child,nav :last-child,section :last-child{margin-bottom:0}a,abbr[title],ins,u{text-decoration:none}a,blockquote cite{color:#0275d8}ol,p,pre,ul{margin-top:0}html,mark,pre,pre code{color:#50525e}body>*,form label{padding-right:.5rem}form input[type=text],form input[type=password],form input[type=datetime],form input[type=datetime-local],form input[type=color],form input[type=range],form input[type=url],form input[type=email],form input[type=tel],form input[type=search],form input[type=number],form input[type=date],form input[type=month],form input[type=week],form label,form select,form select[multiple],form textarea{display:block;width:100%}blockquote,del,figcaption{color:#676a7a}html{box-sizing:border-box;margin:0;padding:0}*,::after,::before{box-sizing:inherit}body{margin:0 auto;padding:2rem 1rem;max-width:900px;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center}ol,ul{margin-bottom:1rem;padding-left:1.1rem}ol li>ol,ol li>ul,ul li>ol,ul li>ul{padding-left:1rem;margin-bottom:0}h1,h2,h3,h4,h5,h6,hr,iframe,p,pre,table{margin-bottom:1rem}dd{margin-left:1rem}article,aside,figcaption,figure,footer,header,main,nav,section{display:block;margin-bottom:1rem}blockquote,fieldset,figure{margin:0 0 1rem}mark,time{display:inline-block}audio,canvas,embed,img,object,svg,video{display:inline-block;height:auto;max-width:100%}figure{text-align:center}figcaption{font-family:Georgia,serif}iframe{max-height:75vw;border:0}body *{min-width:0}body>*{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:calc(70% - 1rem);flex-basis:calc(70% - 1rem);padding-left:.5rem}body>aside{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:calc(30% - 1rem);flex-basis:calc(30% - 1rem);min-width:calc(260.4px - 5%)}table{display:block;overflow-x:auto;white-space:nowrap;border-collapse:collapse;border-spacing:0}table caption,td,th{padding:.5rem 1rem;text-align:left}a:active,a:focus,a:hover,thead{border-bottom:2px solid #0275d8}tbody tr{border-bottom:1px solid #d4d4d4}html{font-size:16px;font-family:sans-serif;line-height:1.5}h1,h2,h3,h4,h5,h6{margin-top:0;color:#42444e}h1{font-size:2rem}h2{font-size:1.8rem}h3{font-size:1.6rem}h4{font-size:1.4rem}h5{font-size:1.2rem}h6{font-size:1rem}p b:only-child{font-weight:300;font-size:1.4rem;line-height:1.4}blockquote{padding:.5rem 1.5rem;border-left:2px solid #0275d8}address,blockquote,cite,var{font-family:Georgia,serif}code,kbd,pre,samp{font-family:monospace}abbr[title]{border-bottom:1px dotted}mark{background-color:#fde965;padding:1px 4px}ins,u{border-bottom:2px solid}del{text-decoration:line-through}dt{font-weight:700}hr{margin-top:1rem;border-top:1px solid #d4d4d4}pre{padding:1rem 1.5rem;overflow-x:scroll;-moz-tab-size:2;tab-size:2;font-size:1rem;text-align:left;border-radius:3px;background-color:#eeeeef}code,kbd,samp{color:#DD4A68}fieldset{padding:1rem;border:1px solid #d4d4d4;border-radius:3px}input[type=text],input[type=password],input[type=datetime],input[type=datetime-local],input[type=url],input[type=email],input[type=tel],input[type=search],input[type=number],input[type=date],input[type=month],input[type=week],select,select[multiple],textarea{font-size:1rem;border:1px solid #d4d4d4;border-radius:3px;padding:.5rem 1rem;outline:0}input[type=text]:focus,input[type=password]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=url]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=search]:focus,input[type=number]:focus,input[type=date]:focus,input[type=month]:focus,input[type=week]:focus,select:focus,select[multiple]:focus,textarea:focus{border-color:#0275d8}input[type=color],select:not([multiple]){height:2.2rem}input[type=range]{margin:0;height:2rem}select[multiple] optgroup option{padding:5px}textarea{padding:1rem;height:auto;font-family:inherit}form label{padding-top:5px;padding-bottom:.5rem;vertical-align:top}form label:hover{cursor:pointer}@media (min-width:768px){form label{display:inline-block;width:auto;min-width:22%}form input[type=text],form input[type=password],form input[type=datetime],form input[type=datetime-local],form input[type=color],form input[type=range],form input[type=url],form input[type=email],form input[type=tel],form input[type=search],form input[type=number],form input[type=date],form input[type=month],form input[type=week],form select,form select[multiple],form textarea{display:inline-block;width:calc(77%)}}button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;padding:.5rem 1rem;vertical-align:middle;font-size:.8rem;line-height:1.5;cursor:pointer;border-radius:3px;border:1px solid #d4d4d4;background-color:#ebebeb;background-image:linear-gradient(#f4f4f4,#ebebeb)}button:active:not([disabled]),button:focus:not([disabled]),button:hover:not([disabled]),input[type=button]:active:not([disabled]),input[type=button]:focus:not([disabled]),input[type=button]:hover:not([disabled]),input[type=reset]:active:not([disabled]),input[type=reset]:focus:not([disabled]),input[type=reset]:hover:not([disabled]),input[type=submit]:active:not([disabled]),input[type=submit]:focus:not([disabled]),input[type=submit]:hover:not([disabled]){border-color:#0267bf;text-shadow:-1px -1px 0 rgba(0,0,0,.3);color:#fff;background-color:#0275d8;background-image:linear-gradient(#108ffd,#0275d8)}button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{color:#676a7a;cursor:not-allowed;opacity:.7}
+audio,body>*,canvas,img,svg,table,video{max-width:100%}article :last-child,aside :last-child,blockquote p:last-child,figcaption :last-child,figure :last-child,footer :last-child,header :last-child,main :last-child,nav :last-child,section :last-child{margin-bottom:0}a,abbr[title]{text-decoration:none}a,blockquote cite,code,kbd,samp{color:#0275d8}ol,p,pre,ul{margin-top:0}html,mark,pre{color:#50525e}body>*,label{padding-right:.5rem}canvas,img,textarea,video{height:auto}blockquote,del,figcaption{color:#737687}*,::after,::before{box-sizing:inherit}body,html{margin:0;padding:0}ol,ul{margin-bottom:1rem;padding-left:1.1rem}ol li>ol,ol li>ul,ul li>ol,ul li>ul{padding-left:1rem;margin-bottom:0}embed,h1,h2,h3,h4,h5,h6,hr,iframe,object,p,pre,table{margin-bottom:1rem}dd{margin-left:1rem}article,aside,figcaption,figure,footer,header,main,nav,section{display:block;margin-bottom:1rem}blockquote,fieldset,figure{margin:0 0 1rem}audio,canvas svg,img,mark,progress,time,video{display:inline-block}svg{height:100%}embed,iframe,object{max-width:100%;max-height:75vw;border:0}code,kbd,pre,samp{border-radius:3px}figure{text-align:center}figcaption{font-family:Georgia,serif}body{margin-right:auto;margin-left:auto;padding:2rem 1rem 3rem;max-width:900px;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center}body *{min-width:0}body>*{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:calc(70% - 1rem);flex-basis:calc(70% - 1rem);padding-left:.5rem}body>aside{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:calc(30% - 1rem);flex-basis:calc(30% - 1rem);min-width:calc(260.4px - 5%)}table{display:block;overflow-x:auto;white-space:nowrap;border-collapse:collapse;border-spacing:0}table caption,td,th{padding:.5rem 1rem;text-align:left}thead{border-bottom:2px solid #0275d8}tbody tr{border-bottom:1px solid #d3d3d8}html{box-sizing:border-box;font-size:16px;font-family:sans-serif;line-height:1.5}h1,h2,h3,h4,h5,h6{margin-top:0;color:#42444e}h1{font-size:2rem}h2{font-size:1.8rem}h3{font-size:1.6rem}h4{font-size:1.4rem}h5{font-size:1.2rem}h6{font-size:1rem}p b:only-child{font-weight:300;font-size:1.4rem;line-height:1.4}blockquote{padding:.5rem 1.5rem;border-left:2px solid #0275d8}address,blockquote,cite,var{font-family:Georgia,serif}abbr[title]{border-bottom:1px dotted}sub,sup{font-size:75%;line-height:0}mark{background-color:#fde965;padding:0 4px}dt{font-weight:700}hr{margin-top:1rem;border-top:1px solid #d3d3d8}a:active,a:focus,a:hover{text-decoration:underline}code,kbd,pre,samp{font-family:monospace}code,kbd,samp{font-size:95%;padding:.1em .3em;background:#eeeef0}pre{padding:1rem 1.5rem;overflow-x:scroll;-moz-tab-size:2;tab-size:2;font-size:1rem;text-align:left;background-color:#eeeef0}pre code{padding:0;color:inherit;font-size:inherit;background-color:transparent}fieldset{padding:1rem;border:1px solid #d3d3d8;border-radius:3px}label{vertical-align:top;height:37.2px;line-height:37.2px}input[type=file]:hover,label:hover{cursor:pointer}input[type=date],input[type=time],input[type=tel],input[type=text],input[type=url],input[type=file],input[type=week],input[type=month],input[type=datetime],input[type=datetime-local],input[type=email],input[type=number],input[type=password],input[type=search],select,select[multiple],textarea{padding:.5rem 1rem;min-height:37.2px;border:1px solid #d3d3d8;border-radius:3px;outline:0;font-size:1rem}input[type=date]:focus,input[type=time]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,input[type=file]:focus,input[type=week]:focus,input[type=month]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,select:focus,select[multiple]:focus,textarea:focus{border-color:#0275d8}input[type=color],select:not([multiple]){height:2.2rem}input[type=range]{margin:0;height:2rem}input[type=search]{-webkit-appearance:none}textarea{padding:1rem;font-family:inherit}input[type=date],input[type=time],input[type=tel],input[type=text],input[type=url],input[type=file],input[type=color],input[type=range],input[type=week],input[type=month],input[type=datetime],input[type=datetime-local],input[type=email],input[type=number],input[type=password],input[type=search],label,select,select[multiple],textarea{display:block;width:100%}@media (min-width:768px){label{display:inline-block;width:auto;min-width:22%}input[type=date],input[type=time],input[type=tel],input[type=text],input[type=url],input[type=file],input[type=color],input[type=range],input[type=week],input[type=month],input[type=datetime],input[type=datetime-local],input[type=email],input[type=number],input[type=password],input[type=search],select,select[multiple],textarea{display:inline-block;width:calc(77%)}}button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;padding:8px 16px;border-radius:3px;border:1px solid #d4d4d4;vertical-align:middle;font-size:12.8px;line-height:1.5;cursor:pointer;background-color:#ebebeb;background-image:linear-gradient(#f4f4f4,#ebebeb)}button:active:not([disabled]),button:focus:not([disabled]),button:hover:not([disabled]),input[type=button]:active:not([disabled]),input[type=button]:focus:not([disabled]),input[type=button]:hover:not([disabled]),input[type=reset]:active:not([disabled]),input[type=reset]:focus:not([disabled]),input[type=reset]:hover:not([disabled]),input[type=submit]:active:not([disabled]),input[type=submit]:focus:not([disabled]),input[type=submit]:hover:not([disabled]){border-color:#0267bf;text-shadow:-1px -1px 0 rgba(0,0,0,.3);color:#fff;background-color:#0275d8;background-image:linear-gradient(#108ffd,#0275d8)}button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{color:#737687;cursor:not-allowed;opacity:.7}

package.json

 {
   "name": "html.css",
-  "version": "0.6.7",
+  "version": "0.7.8",
   "description": "CSS library without classes",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -9,4 +9,4 @@ # html.css
 
-- 😱 Open issue, describe bug, suggest solution
-- 😊 Fork repository, make changes, send pull request
+- 😱 [Open issue](../../issues/), describe bug, suggest solution
+- 😊 [Fork](https://guides.github.com/activities/forking/), clone, edit, push, send pull request
 - ❤️ [Support active development](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=MAURFPVLDCF64)
@@ -13,0 +13,0 @@

src/less/buttons.less

@@ -1,13 +0,13 @@
-input[type=submit],
 input[type=button],
 input[type=reset],
+input[type=submit],
 button {
   display: inline-block;
-  padding: 0.5rem 1rem;
+  padding: @button-padding-y @button-padding-x;
+  border-radius: @radius-default;
+  border: @button-border-width solid #d4d4d4;
   vertical-align: middle;
-  font-size: 0.8rem;
-  line-height: 1.5;
+  font-size: @button-font-size;
+  line-height: @button-line-height;
   cursor: pointer;
-  border-radius: @radius-default;
-  border: 1px solid #d4d4d4;
   background-color: #ebebeb;
@@ -14,0 +14,0 @@ background-image: linear-gradient(#f4f4f4, #ebebeb);

src/less/code.less

@@ -0,1 +1,21 @@
+// all code
+code,
+kbd,
+samp,
+pre, {
+  font-family: @font-family-mono-space;
+}
+
+// inline
+code,
+kbd,
+samp {
+  color: @color-primary;
+  font-size: 95%;
+  padding: 0.1em 0.3em;
+  border-radius: @radius-default;
+  background: @color-gray-light;
+}
+
+// blocks
 pre {
@@ -5,17 +25,18 @@ margin-top: 0;
   padding: 1rem 1.5rem;
+
   overflow-x: scroll;
   tab-size: 2;
-  font-family: @font-family-mono-space;
+
   font-size: 1rem;
   text-align: left;
+  color: @color-paragraph;
+
   border-radius: @radius-default;
-  background-color: #eeeeef;
-  &, code {
-    color: @color-paragraph;
+  background-color: @color-gray-light;
+  code {
+    padding: 0;
+    color: inherit;
+    font-size: inherit;
+    background-color: transparent;
   }
 }
-
-kbd, code, samp {
-  font-family: @font-family-mono-space;
-  color: @color-secondary;
-}

src/less/forms.less

@@ -8,22 +8,36 @@ fieldset {
 
-input[type='text'],
-input[type='password'],
-input[type='url'],
-input[type='email'],
-input[type='tel'],
-input[type='search'],
-input[type='number'],
-input[type='date'],
-input[type='month'],
-input[type='week'],
-input[type='datetime'],
-input[type='datetime-local'],
+label {
+  padding-right: 0.5rem;
+  vertical-align: top;
+  height:      @button-computed-height;
+  line-height: @button-computed-height;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+// boxed inputs
+input[type="date"],
+input[type="time"],
+input[type="week"],
+input[type="month"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="url"],
+input[type="file"],
 select,
 select[multiple],
 textarea {
-  font-size: 1rem;
+  padding: 0.5rem 1rem;
+  min-height: @button-computed-height;
   border: 1px solid @color-gray;
   border-radius: @radius-default;
-  padding: 0.5rem 1rem;
   outline: none;
+  font-size: 1rem;
   &:focus {
@@ -34,3 +48,3 @@ border-color: @color-primary;
 
-// inputs that should look similar to text inputs
+// complex controls
 select:not([multiple]),
@@ -44,11 +58,8 @@ input[type="color"] {
 }
-
-select[multiple] {
-  optgroup {
-    option {
-      padding: 5px;
-    }
-  }
+input[type="file"]:hover {
+  cursor: pointer;
 }
-
+input[type="search"] {
+  -webkit-appearance: none;
+}
 textarea {
@@ -61,63 +72,64 @@ padding: 1rem;
 // form layout
-form {
-  // small screens -> full width blocks
+// ---------------
+// small screens -> full width blocks
+label {
+  display: block;
+  width: 100%;
+}
+input[type="date"],
+input[type="time"],
+input[type="week"],
+input[type="month"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="url"],
+input[type="file"],
+
+input[type="range"],
+input[type="color"],
+
+select,
+select[multiple],
+textarea {
+  display: block;
+  width: 100%;
+}
+
+// medium screens and up -> inline justified
+@media (min-width: @breakpoint-sm) {
   label {
-    display: block;
-    width: 100%;
-    padding-top: 5px;
-    padding-right: 0.5rem;
-    padding-bottom: 0.5rem;
-    vertical-align: top;
-    &:hover {
-      cursor: pointer;
-    }
+    display: inline-block;
+    width: auto;
+    min-width: 22%;
   }
-  input[type='text'],
-  input[type='password'],
-  input[type='url'],
-  input[type='email'],
-  input[type='tel'],
-  input[type='search'],
-  input[type='number'],
-  input[type='color'],
-  input[type='range'],
-  input[type='date'],
-  input[type='month'],
-  input[type='week'],
-  input[type='datetime'],
-  input[type='datetime-local'],
+  input[type="date"],
+  input[type="time"],
+  input[type="week"],
+  input[type="month"],
+  input[type="datetime"],
+  input[type="datetime-local"],
+  input[type="email"],
+  input[type="number"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="text"],
+  input[type="url"],
+  input[type="file"],
+
+  input[type="range"],
+  input[type="color"],
+
   select,
   select[multiple],
   textarea {
-    display: block;
-    width: 100%;
+    display: inline-block;
+    width: calc(78% - 1%); // substract border width and text space
   }
-  // medium screens and up -> inline justified
-  @media (min-width: @breakpoint-sm) {
-    label {
-      display: inline-block;
-      width: auto;
-      min-width: 22%;
-    }
-    input[type='text'],
-    input[type='password'],
-    input[type='url'],
-    input[type='email'],
-    input[type='tel'],
-    input[type='search'],
-    input[type='number'],
-    input[type='color'],
-    input[type='range'],
-    input[type='date'],
-    input[type='month'],
-    input[type='week'],
-    input[type='datetime'],
-    input[type='datetime-local'],
-    select,
-    select[multiple],
-    textarea {
-      display: inline-block;
-      width: calc(78% - 1%); // substract border width and text space
-    }
-  } // end of media query
-}
+} // end of media query

src/less/layout.less

@@ -1,6 +0,7 @@
-body {
+@{container} {
+  margin-right: auto;
+  margin-left: auto;
+  padding: 2rem 1rem 3rem;
   max-width: @container-width;
-}
 
-body {
   display: flex; // flexbox container
@@ -15,4 +16,4 @@ flex-flow: row wrap; // make children wrap when shrinked to min-width
     flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: calc(@column-basis-width ~"-" (@column-padding * 2)); // $fix: substract padding width for IE11
+    flex-shrink: 0;
+    flex-basis: calc(@column-basis-width ~"-" (@column-padding * 2)); // $fix: substract padding
     padding-right: @column-padding;
@@ -23,6 +24,5 @@ padding-left: @column-padding;
 
-  // sidebar
-  > aside {
+  > @{sidebar} {
     flex-grow: 1;
-    flex-shrink: 1;
+    flex-shrink: 0;
     flex-basis: calc(@sidebar-basis-width ~"-" (@column-padding * 2)); // $fix: substract padding width for IE11
@@ -33,4 +33,4 @@ min-width: calc(@sidebar-basis-width-px ~"-" 5%); // wrap column if it shrinks more than 5% of its width
 
-// $fix: substract column padding
+// $fix: substract padding
 // because IE11 counts padding as part of the width
 // leading to misscalculation of total width

src/less/scaffolding.less

@@ -12,3 +12,4 @@ html {
 
-html {
+html,
+body {
   margin: 0;
@@ -18,7 +19,2 @@ padding: 0;
 
-body {
-  margin: 0 auto;
-  padding: 2rem 1rem;
-}
-
 ul, ol {
@@ -55,2 +51,3 @@ margin-top: 0;
 }
+
 // inline semantic elements
@@ -62,15 +59,41 @@ time,
 
+img,
+canvas
+svg,
+progress,
+audio,
+video {
+  display: inline-block;
+}
 
-// responsive inline media
 img,
 canvas,
-svg,
-embed,
-object,
 audio,
 video {
-  display: inline-block;
+  max-width: 100%;
+}
+
+img,
+canvas,
+video {
   height: auto;
+}
+
+// embedded documents
+svg {
+  // conditional responsive
+  // requires attributes: [width="a"], [height="b"], [viewBox="0 0 a b"], [preserveAspectRatio="xMinYMin"]
   max-width: 100%;
+  height: 100%;
 }
+embed,
+object,
+iframe {
+  // pseudo responsive
+  // will resize, will not maintaining aspect ratio
+  max-width: 100%; // fluid width limit
+  max-height: 75vw; // safety height limit
+  border: 0;
+  margin-bottom: 1rem;
+}
 
@@ -85,9 +108,1 @@ figure {
 }
-
-// responsive iframe
-iframe {
-  max-width: 100%;
-  max-height: 75vw;
-  border: 0;
-  margin-bottom: 1rem;
-}

src/less/tables.less

 table {
   // make it responsive
-  display: block; // display:block cancels width:100%, so table can't look full width, but is necessary to make it responsive
+  display: block; // block instead of table for overflow to scroll
   max-width: 100%;
@@ -5,0 +5,0 @@ overflow-x: auto;

src/less/typography.less

@@ -5,3 +5,3 @@ html {
   color: @color-paragraph;
-  line-height: @line-height;
+  line-height: @line-height-base;
 }
@@ -37,3 +37,3 @@
   font-size: @font-size-lead;
-  line-height: @line-height - 0.1;
+  line-height: @line-height-base - 0.1;
 }
@@ -71,20 +71,16 @@
 
+sub,
+sup {
+  // prevent `sub` and `sup` from affecting the line height
+  font-size: 75%;
+  line-height: 0;
+}
+
 mark {
   background-color: @color-yellow;
   color: @color-paragraph;
-  padding: 1px 4px;
+  padding: 0 4px;
 }
 
-u {
-  text-decoration: none;
-  border-bottom: @border-width-default solid;
-}
-
-ins {
-  text-decoration: none;
-  border-bottom: @border-width-default solid;
-}
-
 del {
-  text-decoration: line-through;
   color: @color-muted;
@@ -109,4 +105,4 @@ }
   &:focus {
-    border-bottom: @border-width-default solid @color-primary;
+    text-decoration: underline;
   }
 }

src/less/variables.less

 // variables
 // --------------------
-@color-primary:   #0275d8;
-@color-secondary: #DD4A68;
-@color-gray:      #d4d4d4;
-@color-yellow:    #fde965;
-@color-heading:   #42444e;
-@color-paragraph: #50525e;
-@color-muted:     lighten(@color-paragraph, 10%);
+@color-primary:    #0275d8;
+@color-gray:       #d3d3d8;
+@color-gray-light: lighten(@color-gray, 10%);
+@color-yellow:     #fde965;
+@color-heading:    #42444e;
+@color-paragraph:  #50525e;
+@color-muted:      lighten(@color-paragraph, 15%);
 
@@ -26,3 +26,3 @@ @radius-default: 3px;
 
-@line-height: 1.5;
+@line-height-base: 1.5;
 
@@ -33,4 +33,16 @@ @font-family-sans-serif: sans-serif;
 
+// buttons
+// --------------------
+@button-font-size: @rem-base * 0.8;
+@button-line-height: 1.5;
+@button-padding-x: @rem-base;
+@button-padding-y: (@rem-base / 2);
+@button-border-width: 1px;
+@button-computed-height: (@button-font-size * @button-line-height) + (@button-padding-y * 2) + (@button-border-width * 2);
+
 // layout
 // --------------------
+@container: body;
+@sidebar: aside;
+
 @container-width: 900px;
@@ -37,0 +49,0 @@ @container-padding: 1rem;

No alert changes

Improved metrics

Total package byte prevSize

27998

5.49%

Lines of code

512

6.67%

No dependency changes