[ADD] postCSS, navbar

main/tailwind/input.css

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-
-.btn-primary-spec {
-    @apply text-2xl;
-}
-
-
-.logo {
-    clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 0% 50%);
-}

main/tailwind/tailwind.config.js

-module.exports = {
-    content: ["../templates/**/*.html"],
-    theme: {
-        borderWidth: {
-            DEFAULT: '1px',
-            '0': '0',
-            '2': '2px',
-            '3': '3px',
-            '4': '4px',
-            '6': '6px',
-            '8': '8px',
-        },
-        extend: {
-            colors: {
-                lightGreen: '#4FC49F',
-                purple: '#7D337F'
-            },
-        },
-    },
-    plugins: [],
-}

main/tailwind/package-lock.json → main/ui-main/package-lock.json

@@ -345,7 +345,8 @@
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "dev": true
     },
     "node-releases": {
       "version": "2.0.6",
@@ -396,6 +397,7 @@
       "version": "8.4.16",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
       "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
+      "dev": true,
       "requires": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -515,7 +517,8 @@
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
     },
     "supports-preserve-symlinks-flag": {
       "version": "1.0.0",

main/tailwind/package.json → main/ui-main/package.json

@@ -4,15 +4,16 @@
   "description": "",
   "main": "tailwind.config.js",
   "dependencies": {
-    "autoprefixer": "^10.4.8",
-    "postcss": "^8.4.16"
+    "autoprefixer": "^10.4.8"
   },
   "devDependencies": {
+    "postcss": "^8.4.16",
+    "postcss-nested": "^5.0.6",
     "tailwindcss": "^3.1.8"
   },
   "scripts": {
-    "build": "tailwindcss -i ./input.css -o ../static/main/css/styles.css",
-    "watch": "tailwindcss -i ./input.css -o ../static/main/css/styles.css --watch"
+    "build": "tailwindcss -i ./src/css/style.pcss -o ./public/styles.css --postcss",
+    "watch": "tailwindcss -i ./src/css/style.pcss -o ./public/styles.css --postcss --watch"
   },
   "keywords": [],
   "author": "",

main/ui-main/postcss.config.js

+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': {},
+        tailwindcss: {},
+        autoprefixer: {},
+    }
+}

main/ui-main/public/images/logo-full-black.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="172" height="55.25" viewBox="0 0 172 55.25">
+  <defs>
+    <path id="a" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#b)" d="M24.691 7.159c-5.866 0-11.384 2.289-15.542 6.438-4.147 4.149-6.435 9.669-6.435 15.535 0 5.876 2.287 11.396 6.435 15.539 4.158 4.147 9.675 6.429 15.542 6.429 5.87 0 11.384-2.281 15.531-6.429 4.158-4.144 6.44-9.663 6.44-15.539 0-5.866-2.282-11.386-6.44-15.535-4.146-4.15-9.66-6.438-15.531-6.438m0 41.857c-10.965 0-19.885-8.915-19.885-19.884 0-10.962 8.919-19.88 19.885-19.88 10.961 0 19.883 8.918 19.883 19.88.001 10.969-8.922 19.884-19.883 19.884"/>
+  <path clip-path="url(#b)" d="M18.068 16.063v-3.077h-1.921v3.552c-1.301.401-2.056.815-1.932 1.069.431-.118 1.115-.169 1.932-.121v18.495c-1.962 3.833.861 9.698.861 9.698s-2.124-6.299 2.6-9.272c4.337-2.732 19.302-1.451 19.246-9.894-.065-11.962-13.868-11.891-20.786-10.45m6.177 11.597c-.673 3.185-4.147 4.845-6.177 6.224V17.779c3.459.83 7.525 3.489 6.177 9.881M59.936 9.602c-1.753 0-3.416.112-4.987.344v16.436h4.42v-5.167c.393.042.884.066 1.474.066 2.222 0 3.912-.517 5.071-1.554 1.153-1.033 1.733-2.559 1.733-4.569 0-3.702-2.571-5.556-7.711-5.556m2.722 7.709c-.529.455-1.288.682-2.268.682-.379 0-.718-.021-1.021-.068v-4.804c.346-.079.688-.114 1.021-.114 2.04 0 3.061.794 3.061 2.38 0 .827-.264 1.474-.793 1.924"/>
+  <path d="M69.733 9.832h4.987v16.55h-4.987z"/>
+  <defs>
+    <path id="c" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="d">
+    <use xlink:href="#c" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#d)" d="M86.441 26.381h4.648l-1.63-4.536c-.272-.734-.561-1.307-.863-1.708-.3-.398-.682-.729-1.135-.986v-.045c.938-.348 1.704-.932 2.295-1.744.588-.819.885-1.704.885-2.654 0-3.401-2.269-5.104-6.805-5.104-1.967 0-3.933.114-5.897.342v16.435h4.423v-5.778h1.019c.423 0 .765.114 1.022.337.257.229.467.603.634 1.136l1.404 4.305zM83.61 17.31h-1.248v-4.188c.344-.078.761-.112 1.248-.112 1.658 0 2.494.717 2.494 2.153 0 .662-.225 1.186-.669 1.574-.449.383-1.058.573-1.825.573"/>
+  <path d="M97.507 23.208h4.603l.772 3.174h4.806l-5.441-16.553h-4.76l-5.441 16.553h4.714l.747-3.174zm2.29-9.523h.046l1.474 6.125h-2.993l1.473-6.125zM104.399 4.385h-4.988l-2.267 4.088h3.626M111.863 26.382h4.625v-12.81h4.487v-3.74H107.37v3.74h4.493"/>
+  <defs>
+    <path id="e" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="f">
+    <use xlink:href="#e" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#f)" d="M128.277 23.097c-.756 0-1.586-.152-2.482-.458-.898-.302-1.734-.717-2.506-1.24l-1.021 3.508c.668.486 1.555.893 2.668 1.215 1.109.327 2.148.486 3.117.486 2.309 0 4.041-.43 5.189-1.301 1.148-.87 1.725-2.133 1.725-3.798 0-1.377-.484-2.506-1.455-3.39-.965-.885-2.635-1.644-5.008-2.278-.982-.27-1.475-.726-1.475-1.36 0-.411.184-.735.547-.989.365-.249.898-.371 1.605-.371 1.574 0 3.125.38 4.65 1.13l.793-3.51c-1.541-.758-3.426-1.138-5.666-1.138-2.088 0-3.705.442-4.854 1.316-1.15.877-1.723 2.064-1.723 3.562 0 1.36.467 2.487 1.406 3.379.936.891 2.508 1.653 4.715 2.288 1.211.348 1.814.837 1.814 1.475.002.98-.679 1.474-2.039 1.474"/>
+  <path d="M151.451 9.832h-5.215l-4.265 7.029h-.043V9.832h-4.537v16.55h4.537v-7.708h.043l4.492 7.708h5.213l-5.44-8.616M164.762 4.385h-4.991l-2.269 4.088h3.631M162.607 9.832h-4.76l-5.445 16.55h4.715l.75-3.174h4.602l.771 3.174h4.809l-5.442-16.55zm-3.925 9.976l1.475-6.125h.045l1.475 6.125h-2.995z"/>
+  <g>
+    <defs>
+      <path id="g" d="M2.716 4.385h165.333V51.1H2.716z"/>
+    </defs>
+    <clipPath id="h">
+      <use xlink:href="#g" overflow="visible"/>
+    </clipPath>
+    <path clip-path="url(#h)" d="M60.617 38.221c-.982-.27-1.476-.726-1.476-1.36 0-.407.184-.733.545-.987.363-.249.901-.372 1.608-.372 1.575 0 3.122.378 4.651 1.129l.792-3.508c-1.541-.76-3.43-1.14-5.667-1.14-2.085 0-3.707.442-4.851 1.319-1.151.876-1.724 2.062-1.724 3.559 0 1.36.467 2.487 1.406 3.38.937.892 2.509 1.652 4.716 2.287 1.207.349 1.812.839 1.812 1.474 0 .986-.678 1.476-2.038 1.476-.756 0-1.583-.148-2.483-.456-.9-.304-1.735-.715-2.507-1.242l-1.019 3.509c.665.486 1.553.891 2.665 1.215 1.111.327 2.149.489 3.118.489 2.31 0 4.042-.432 5.19-1.303 1.15-.871 1.726-2.135 1.726-3.798 0-1.375-.485-2.507-1.454-3.392-.966-.888-2.638-1.642-5.01-2.279"/>
+  </g>
+  <path d="M68.483 35.953h4.495v12.81h4.625v-12.81h4.486v-3.74H68.483"/>
+  <g>
+    <defs>
+      <path id="i" d="M2.716 4.385h165.333V51.1H2.716z"/>
+    </defs>
+    <clipPath id="j">
+      <use xlink:href="#i" overflow="visible"/>
+    </clipPath>
+    <path clip-path="url(#j)" d="M95.178 42.517c-.304-.398-.684-.73-1.141-.984v-.046c.939-.345 1.703-.93 2.291-1.745.592-.816.885-1.701.885-2.652 0-3.403-2.266-5.104-6.801-5.104-1.967 0-3.929.113-5.896.345v16.435h4.422v-5.779h1.021c.422 0 .765.112 1.02.338.257.227.469.604.636 1.134l1.405 4.308h4.646l-1.631-4.537c-.27-.741-.559-1.312-.857-1.713m-3.17-3.4c-.44.388-1.051.576-1.824.576h-1.246v-4.192c.347-.08.762-.113 1.246-.113 1.662 0 2.497.717 2.497 2.152 0 .664-.224 1.192-.673 1.577"/>
+  </g>
+  <path d="M104.287 32.213l-5.439 16.55h4.713l.748-3.174h4.605l.772 3.174h4.8l-5.438-16.55h-4.761zm.838 9.975l1.475-6.123h.047l1.475 6.123h-2.997zM125.762 41.282h-.049l-4.942-9.071h-4.421v16.553h4.421v-9.073h.047l4.944 9.073h4.42V32.211h-4.42M137.484 32.213l-5.443 16.55h4.717l.75-3.174h4.596l.773 3.174h4.812l-5.441-16.55h-4.764zm.838 9.975l1.473-6.123h.043l1.475 6.123h-2.991z"/>
+</svg>

main/ui-main/public/index.html

+<!doctype html>
+
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Homepage</title>
+    <link rel="icon" href="images/favicon.ico">
+
+    <link rel="stylesheet" href="styles.css?v=1.0">
+
+</head>
+
+<body>
+<!-- Navbar -->
+<nav class="navbar text-white transition duration-200">
+    <!-- Flex container -->
+    <div class="navbar__content">
+        <!-- Brand -->
+        <div class="navbar__brand">
+            <img src="images/logo-full-black.svg" alt="Pirátská strana" class="w-36"/>
+        </div>
+        <!-- Main -->
+        <div class="navbar__main">
+            <ul class="navbar--menu">
+                <li class="navbar-menu__item">
+                    <a href="#" class="navbar-menu__link">Jak pracujeme</a>
+                </li>
+                <li class="navbar-menu__item">
+                    <a href="#" class="navbar-menu__link">Program</a>
+                </li>
+                <li class="navbar-menu__item">
+                    <a href="#" class="navbar-menu__link">O nás</a>
+                </li>
+                <li class="navbar-menu__item">
+                    <a href="#" class="navbar-menu__link">Naloď se</a>
+                </li>
+                <li class="navbar-menu__item">
+                    <a href="#" class="navbar-menu__link">Kontakty</a>
+                </li>
+            </ul>
+        </div>
+        <!-- Social & Related -->
+        <div class="navbar-actions">
+            <div class="socials">
+                <a href="">
+                    <i class="ico--facebook"></i>
+                </a>
+                <a href="">
+                    <i class="ico--twitter"></i>
+                </a>
+                <a href="">
+                    <i class="ico--instagram"></i>
+                </a>
+            </div>
+            <a href="#" class="px-12 py-3 bg-lightGreen mr-2">
+                Dary
+            </a>
+            <a href="#" class="px-12 py-3 text-blue-100 bg-purple mr-2">
+                Nalodění
+            </a>
+        </div>
+    </div>
+</nav>
+</body>
+</html>

main/ui-main/src/css/atoms/container.pcss

+.container {
+}
+
+.container--default {
+  @apply max-w-screen-xl;
+}
+
+.container--wide {
+  max-width: 1430px;
+}
+
+
+@responsive {
+  /* Removes default container padding from the element. */
+  /* @note: needs to be kept in sync with tailwind configuration */
+  .container-padding--zero {
+    margin-left: -1rem;
+    margin-right: -1rem;
+
+    @screen xl {
+      margin-left: -2rem;
+      margin-right: -2rem;
+    }
+  }
+
+  .container-padding--auto {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}

main/ui-main/src/css/atoms/icons.pcss

+
+@font-face {
+  font-family: 'pirati-ui';
+  src:  url('../src/icons/fonts/pirati-ui.eot?6717e187d2f4434e2e72b8d582d69efa');
+  src:  url('../src/icons/fonts/pirati-ui.eot?6717e187d2f4434e2e72b8d582d69efa#iefix') format('embedded-opentype'),
+    url('../src/icons/fonts/pirati-ui.ttf?6717e187d2f4434e2e72b8d582d69efa') format('truetype'),
+    url('../src/icons/fonts/pirati-ui.woff?6717e187d2f4434e2e72b8d582d69efa') format('woff'),
+    url('../src/icons/fonts/pirati-ui.svg?6717e187d2f4434e2e72b8d582d69efa#pirati-ui') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="ico--"], [class*=" ico--"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'pirati-ui' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ico--dots-three-vertical:before { content: "\e940"; }
+.ico--dots-three-horizontal:before { content: "\e941"; }
+.ico--log-out:before { content: "\e942"; }
+.ico--envelope:before { content: "\e908"; }
+.ico--pin:before { content: "\e943"; }
+.ico--at:before { content: "\e905"; }
+.ico--strategy:before { content: "\e932"; }
+.ico--pig:before { content: "\e928"; }
+.ico--thermometer:before { content: "\e90a"; }
+.ico--menu:before { content: "\e933"; }
+.ico--chevron-right:before { content: "\e923"; }
+.ico--chevron-left:before { content: "\e924"; }
+.ico--chevron-down:before { content: "\e925"; }
+.ico--chevron-up:before { content: "\e926"; }
+.ico--link-horizontal:before { content: "\e910"; }
+.ico--beer:before { content: "\e909"; }
+.ico--pirati:before { content: "\e90d"; }
+.ico--jitsi:before { content: "\e90f"; }
+.ico--open-source:before { content: "\e90e"; }
+.ico--thumbs-down:before { content: "\e93d"; }
+.ico--thumbs-up:before { content: "\e93e"; }
+.ico--anchor:before { content: "\e92d"; }
+.ico--paw:before { content: "\e90b"; }
+.ico--checkmark:before { content: "\e965"; }
+.ico--info:before { content: "\e901"; }
+.ico--question:before { content: "\e904"; }
+.ico--warning:before { content: "\e93f"; }
+.ico--code:before { content: "\e94a"; }
+.ico--checkbox-unchecked:before { content: "\e94e"; }
+.ico--star-full:before { content: "\e94f"; }
+.ico--star-empty:before { content: "\e950"; }
+.ico--bookmark:before { content: "\e951"; }
+.ico--cog:before { content: "\e952"; }
+.ico--key:before { content: "\e953"; }
+.ico--zoom-in:before { content: "\e954"; }
+.ico--zoom-out:before { content: "\e955"; }
+.ico--shrink:before { content: "\e956"; }
+.ico--printer:before { content: "\e957"; }
+.ico--file-openoffice:before { content: "\e958"; }
+.ico--user:before { content: "\e959"; }
+.ico--file-excel:before { content: "\e95a"; }
+.ico--file-word:before { content: "\e95b"; }
+.ico--file-pdf:before { content: "\e95c"; }
+.ico--file-picture:before { content: "\e95d"; }
+.ico--file-blank:before { content: "\e95e"; }
+.ico--folder-upload:before { content: "\e95f"; }
+.ico--upload:before { content: "\e960"; }
+.ico--cloud-upload:before { content: "\e961"; }
+.ico--folder-download:before { content: "\e962"; }
+.ico--download:before { content: "\e963"; }
+.ico--cloud-download:before { content: "\e964"; }
+.ico--alarm:before { content: "\e900"; }
+.ico--calculator:before { content: "\e911"; }
+.ico--facebook-full:before { content: "\e913"; }
+.ico--feed:before { content: "\e927"; }
+.ico--library:before { content: "\e929"; }
+.ico--office:before { content: "\e92a"; }
+.ico--attachment:before { content: "\e92b"; }
+.ico--enlarge:before { content: "\e92c"; }
+.ico--eye-off:before { content: "\e92e"; }
+.ico--eye:before { content: "\e92f"; }
+.ico--share:before { content: "\e931"; }
+.ico--search:before { content: "\e939"; }
+.ico--pencil:before { content: "\e93c"; }
+.ico--lock-open:before { content: "\e947"; }
+.ico--lock:before { content: "\e948"; }
+.ico--equalizer:before { content: "\e949"; }
+.ico--switch:before { content: "\e94b"; }
+.ico--loop:before { content: "\e94c"; }
+.ico--refresh:before { content: "\e94d"; }
+.ico--bullhorn:before { content: "\e944"; }
+.ico--bin:before { content: "\e945"; }
+.ico--cross:before { content: "\e937"; }
+.ico--checkbox-checked:before { content: "\e938"; }
+.ico--globe:before { content: "\e93a"; }
+.ico--wikipedia:before { content: "\e93b"; }
+.ico--youtube:before { content: "\e936"; }
+.ico--users:before { content: "\e934"; }
+.ico--book:before { content: "\e935"; }
+.ico--bubbles:before { content: "\e930"; }
+.ico--map:before { content: "\e914"; }
+.ico--compass:before { content: "\e915"; }
+.ico--folder-open:before { content: "\e916"; }
+.ico--folder:before { content: "\e917"; }
+.ico--drawer:before { content: "\e918"; }
+.ico--stop:before { content: "\e919"; }
+.ico--github:before { content: "\e91a"; }
+.ico--clock:before { content: "\e91b"; }
+.ico--calendar:before { content: "\e91c"; }
+.ico--flickr:before { content: "\e91d"; }
+.ico--instagram:before { content: "\e91e"; }
+.ico--twitter:before { content: "\e91f"; }
+.ico--newspaper:before { content: "\e920"; }
+.ico--cart:before { content: "\e921"; }
+.ico--home:before { content: "\e922"; }
+.ico--link:before { content: "\e912"; }
+.ico--power:before { content: "\e90c"; }
+.ico--rocket:before { content: "\e946"; }
+.ico--location:before { content: "\e906"; }
+.ico--phone:before { content: "\e907"; }
+.ico--linkedin:before { content: "\e903"; }
+.ico--facebook:before { content: "\e902"; }

main/ui-main/src/css/organisms/navbar.pcss

+.navbar-menu__link {
+  @apply text-lg font-condensed uppercase leading-loose cursor-pointer;
+}
+
+.navbar-actions a,
+.navbar-actions a:hover,
+.navbar-menu__link,
+.navbar-menu__link:hover {
+  @apply no-underline;
+}
+
+.navbar-actions {
+  grid-area: actions;
+}
+
+.navbar__brand {
+  grid-area: brand;
+}
+
+.navbar__main {
+  grid-area: main;
+}
+
+@screen lg {
+  .navbar {
+    @apply bg-grey-700 text-white py-8;
+  }
+
+  .navbar-actions {
+    @apply flex items-center;
+
+    .socials a {
+      @apply mr-3;
+    }
+  }
+
+  .navbar__brand {
+    @apply bg-white flex px-12 h-16 w-80;
+    clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 0% 50%);
+  }
+
+  .navbar__content {
+    @apply grid items-center font-alt;
+
+    grid-template-areas: "brand main actions";
+    grid-template-columns: 28rem 1fr auto;
+  }
+
+  .navbar-menu__item {
+    @apply relative inline-block mr-10;
+  }
+}

main/ui-main/src/css/style.pcss

+@import url('https://gfonts.pirati.cz/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');
+
+/* Icons */
+@import "./atoms/icons.pcss";
+
+/**
+* This injects Tailwind's base styles and any base styles registered by
+* plugins.
+*/
+@import "tailwindcss/base";
+
+/**
+* This injects Tailwind's component classes and any component classes
+* registered by plugins.
+*/
+@import "tailwindcss/components";
+
+/**
+ * Custom components
+ */
+@import "./atoms/container.pcss";
+@import "./atoms/icons.pcss";
+
+
+@import "./organisms/navbar.pcss";
+
+
+/**
+* This injects Tailwind's utility classes and any utility classes registered
+* by plugins.
+*/
+@import "tailwindcss/utilities";
+
+::-moz-selection {
+  color: theme("colors.white");
+  background: theme("colors.cyan.300");
+}
+
+::selection {
+  color: theme("colors.white");
+  background: theme("colors.cyan.300");
+}
+
+:root {
+  font-size: 16px;
+}
+
+body {
+  @apply font-body font-normal leading-none antialiased;
+  font-size: 1rem;
+}
+
+a:hover {
+  @apply underline;
+}
+
+a.icon-link:hover {
+  @apply no-underline;
+
+  span {
+    @apply underline;
+  }
+}
+
+/* Hide vue templates before rendering */
+[v-cloak] {
+  @apply hidden;
+}
+
+.copyleft {
+  transform: matrix(-1, 0, 0, 1, 0, 0) !important;
+}
+
+.inline-block-nogap {
+  /* Avoid gaps between inline-block elements */
+  font-size: 0;
+}
+
+/* auto-size iframe according to aspect ratio while keeping the 100% height */
+.iframe-container {
+  @apply relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+}
+
+.iframe-container iframe {
+  @apply absolute top-0 left-0 w-full h-full;
+}

main/ui-main/src/icons/Read Me.txt

+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

main/ui-main/src/icons/demo-files/demo.css

+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: .66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl, .mal {
+  margin-top: 1.5em;
+}
+.mbl, .mal {
+  margin-bottom: 1.5em;
+}
+.mal, .mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: .25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs, .pvs {
+  padding-bottom: .25em;
+}
+.pvs, .pts {
+  padding-top: .25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 20px;
+}
+.fs2 {
+  font-size: 32px;
+}
+.fs3 {
+  font-size: 24px;
+}
+.fs4 {
+  font-size: 32px;
+}
+.fs5 {
+  font-size: 28px;
+}
+.fs6 {
+  font-size: 32px;
+}

main/ui-main/src/icons/demo-files/demo.js

+if (!('boxShadow' in document.body.style)) {
+    document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener("click", function(e) {
+    var target = e.target;
+    if (target.tagName === "INPUT" &&
+        target.getAttribute('class').indexOf('liga') === -1) {
+        target.select();
+    }
+});
+
+(function() {
+    var fontSize = document.getElementById('fontSize'),
+        testDrive = document.getElementById('testDrive'),
+        testText = document.getElementById('testText');
+    function updateTest() {
+        testDrive.innerHTML = testText.value || String.fromCharCode(160);
+        if (window.icomoonLiga) {
+            window.icomoonLiga(testDrive);
+        }
+    }
+    function updateSize() {
+        testDrive.style.fontSize = fontSize.value + 'px';
+    }
+    fontSize.addEventListener('change', updateSize, false);
+    testText.addEventListener('input', updateTest, false);
+    testText.addEventListener('change', updateTest, false);
+    updateSize();
+}());