Merge branch 'development'

BPanchenko · Jan 26, 2020 · 8d2e8f3 · 8d2e8f3
2 parents 28d3a59 + d068de8
commit 8d2e8f3
Show file tree

Hide file tree

Showing 16 changed files with 205 additions and 198 deletions.
diff --git a/assets/critical.css b/assets/critical.css
diff --git a/assets/uikit.css b/assets/uikit.css
diff --git a/assets/uikit.js b/assets/uikit.js
diff --git a/assets/uikit.js.map b/assets/uikit.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "protosite.uikit",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "Front-end framework for developing web interfaces using BEMIT",
   "author": "Boris Panchenko <hello@bpanchenko.ru>",
   "main": "./assets/uikit.js",
@@ -20,23 +20,23 @@
     "url": "https://github.com/BPanchenko/protosite.uikit/issues"
   },
   "devDependencies": {
-    "autoprefixer": "^9.7.1",
-    "cssnano": "^4.1.8",
+    "autoprefixer": "^9.7.4",
+    "cssnano": "^4.1.10",
     "fancy-log": "^1.3.3",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-cli": "^2.2.0",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^2.0.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^7.0.21",
-    "postcss-cli": "^6.1.3",
+    "postcss": "^7.0.26",
+    "postcss-cli": "^7.1.0",
     "postcss-color-function": "^4.1.0",
-    "postcss-custom-properties": "^8.0.11",
+    "postcss-custom-properties": "^9.0.2",
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
-    "webpack": "^4.41.2",
+    "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
     "webpack-stream": "^5.2.1"
   },

diff --git a/src/css/base/document.css b/src/css/base/document.css
@@ -1,21 +1,35 @@
+@import "../settings/palette.css";
+@import "../settings/typography.css";
 
 /* ========================================================================
-Document style
-========================================================================== */
-
-@import "../settings/_import.css";
+    Document style
+ ========================================================================== */
 
 html {
     height: 100%;
     font-size: 62.5%;
 }
 
 body {
+    min-height: 100vh;
     margin: 0;
     background-color: var(--clr-grey-200);
     font-family: var(--font-primary);
-    font-size: var(--text-md);
+    font-size: var(--text-md, 14px);
+    line-height: 1.2;
     color: var(--text-color);
+    scroll-behavior: smooth;
+    text-rendering: optimizeSpeed;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+article > * + * {
+    margin-top: 1em;
 }
 
 article,
@@ -44,6 +58,8 @@ video {
 }
 
 img {
+    max-width: 100%;
+    display: block;
     border: 0;
 }
 
@@ -61,7 +77,7 @@ template {
 }
 
 /* Selection
-    ========================================================================== */
+ ========================================================================== */
 
 :root {
     --selection-color: var(--clr-white);
@@ -84,17 +100,17 @@ template {
 
 
 /* Horizontal rule
-    ========================================================================== */
+ ========================================================================== */
 
 hr {
     display: block;
     box-sizing: content-box;
     height: 0;
     border: 0;
-    color: var(--clr-grey-400);
+    color: var(--clr-grey-400, currentColor);
     border-top: 1px solid currentColor;
-    border-bottom: 1px solid var(--clr-white);
-    margin: var(--unit) 0;
+    border-bottom: 1px solid var(--clr-white, white);
+    margin: var(--unit, 16px) 0;
     padding: 0;
 }
 
@@ -104,19 +120,22 @@ hr {
 
 
 /* Block base
-    ========================================================================== */
+ ========================================================================== */
 
 p,
 ul,
 ol,
 dl,
+dd,
 blockquote,
 pre,
 address,
 fieldset,
-figure {
-    margin: 0 0 .3rem 0;
+figure,
+figcaption {
+    margin: 0;
 }
+
 * + p,
 * + ul,
 * + ol,
@@ -126,12 +145,12 @@ figure {
 * + address,
 * + fieldset,
 * + figure {
-    margin-top: calc(var(--unit) / 2);
+    margin-top: var(--space-xs, 8px);
 }
 
 
 /* Forms
-    ========================================================================== */
+ ========================================================================== */
 
 label {
     cursor: pointer;
@@ -217,7 +236,7 @@ optgroup {
 
 
 /* Tables
-    ========================================================================== */
+ ========================================================================== */
 
 table {
     border-collapse: collapse;

diff --git a/src/css/base/headings.css b/src/css/base/headings.css
@@ -1,62 +1,62 @@
+@import "../settings/space.css";
 
-/* Headings
- ========================================================================== */
+/* ========================================================================
+    Headings
+========================================================================== */
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-    color: var(--caption-color);
+    font-family: var(--font-secondary, system-ui);
+    margin: 0;
+    color: var(--caption-color, black);
 }
 
 h1 {
-    font: var(--h1-font);
-    margin: var(--h1-margin);
-    text-transform: var(--h1-text-transform);
+    font-size: 3.6rem;
+    font-weight: 700;
+    line-height: 4rem;
 }
+
 h2 {
-    font: var(--h2-font);
-    margin: var(--h2-margin);
-    text-transform: var(--h2-text-transform);
+    font-size: 2.8rem;
+    font-weight: 600;
+    line-height: 3.2rem;
 }
+
 h3 {
-    font: var(--h3-font);
-    margin: var(--h3-margin);
-    text-transform: var(--h3-text-transform);
+    font-size: 2rem;
+    font-weight: 600;
+    line-height: 2.4rem;
 }
+
 h4 {
-    font: var(--h4-font);
-    margin: var(--h4-margin);
-    text-transform: var(--h4-text-transform);
+    font-size: 1.6rem;
+    font-weight: 600;
+    line-height: 1.8rem;
 }
+
 h5 {
-    font: var(--h5-font);
-    margin: var(--h5-margin);
-    text-transform: var(--h5-text-transform);
+    font-size: 1.4rem;
+    font-weight: 500;
+    line-height: 1.6rem;
+    text-transform: uppercase;
 }
+
 h6 {
-    font: var(--h6-font);
-    margin: var(--h6-margin);
-    text-transform: var(--h6-text-transform);
-}
-
-h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6,
-h2 + h1, h2 + h3, h2 + h4, h2 + h5, h2 + h6,
-h3 + h1, h3 + h2, h3 + h4, h3 + h5, h3 + h6,
-h4 + h1, h4 + h2, h4 + h3, h4 + h5, h4 + h6,
-h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h6,
-h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5
-{
-    margin-top: var(--space-sm);
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
-    color: var(--caption-color);
+    font-size: 1.1rem;
+    font-weight: 600;
+    line-height: 1.6rem;
+    text-transform: uppercase;
+}
+
+* + :matches(h1, h2, h3, h4, h5, h6) {
+    margin-top: var(--space-md, 16px);
+}
+
+:matches(h1, h2, h3, h4, h5, h6) a {
+    color: var(--caption-color, black);
 }
diff --git a/src/css/base/list.css b/src/css/base/list.css
@@ -1,17 +1,11 @@
 
-@import "../settings/images.css";
-
-/**
- * Elements:        ul, ol
- * Description:     Defines styles for ordered and unordered lists
- * 
- ========================================================================== */
+/* ========================================================================
+    Ordered and Unordered lists
+========================================================================== */
 
+ol,
 ul {
-    --li-background: var(--svg-circle) no-repeat .8rem .5em;
-    --li-background-size: .3rem .3rem;
-    --li-margin-vertical: .8rem;
-    --li-padding-left: 1.6rem;
+    --li-margin-vertical: 0.8rem;
     --li-nested-margin-vertical: 0;
 }
 
@@ -24,23 +18,17 @@ ul {
 	list-style: none;
 }
 
-
-/*
- * List item
- */
-
 ul > li {
-	padding-left: var(--li-padding-left);
+	padding-left: 0.5rem;
 	margin-top: var(--li-margin-vertical);
 	margin-bottom: var(--li-margin-vertical);
-	background: var(--li-background);
-	background-size: var(--li-background-size);
-}
 
-
-/*
- * Nested list
- */
+	&::before {
+		content: '•';
+		display: inline-block;
+		margin-right: 0.8rem;
+	}
+}
 
 ul > li > ul {
     margin: 0;
@@ -60,6 +48,7 @@ ol {
 	list-style: decimal;
 	padding-left: 2.4rem;
 }
+
 ol > li {
 	background: none;
 	padding-left: 0;
@@ -70,7 +59,18 @@ ol > li {
 ol > li > ol {
 	list-style: lower-alpha;
 }
+
 ol > li > ol > li {
 	margin-top: var(--li-nested-margin-vertical);
 	margin-bottom: var(--li-nested-margin-vertical);
-}
+}
+
+/* Remove list styles on ul, ol elements with a class attribute
+ ========================================================================== */
+
+ol[class],
+ul[class] {
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}