Image import fixes

README.md

@@ -1,5 +1,7 @@
 # Pure Start
 
+[Demo](https://nmihalyov.tk/pure-start)
+
 **Pure Start** is a boilerplate that allows you to start working on a new project fast and easy. It provides you with a clean and flexible environment to create static applications and can be extended to create something more complex.
 
 ## Features
@@ -62,4 +64,25 @@ At the root there a some config files and script for creating components via CLI
 
 `scss` for global styles (don't write component specific styles here).
 
-`index.js` is entry point for youe JS/TS files.
+`index.js` is entry point for youe JS/TS files.
+
+## Importing images
+### Pug
+To import image in pug files use **require**. E.g.:
+
+`img(src=require("@/assets/images/static/logo.png"), alt="Logo")`
+
+### Scss
+To use images in scss you can simply do it as you did before. E.g.:
+
+`background-image: url('@/assets/images/icons/github-white.svg')`
+
+## Feedback
+
+E-mail: [nikita.mihalyov@gmail.com](mailto:nikita.mihalyov@gmail.com)
+
+Teleegram: [@nmihalyov](http://t.me/nmihalyov)
+
+Website: [nmihalyov.tk](https://nmihalyov.tk)
+
+[Write issue](https://github.com/nmihalyov/pure-start/issues/new)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pure-start",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Start your project with 'Pure Start' easily then ever!",
   "private": "true",
   "scripts": {

src/pug/pages/index.pug

@@ -7,15 +7,14 @@ include /components/_ui/radio/radio
 include /components/_ui/popup/popup
 
 block variables
-  - const title = 'Document'
+  - const title = 'Pure Start'
   - const description = 'Page description'
 
 block content
   section.container 
     .wrapper
       h1(style="margin: 35px 0") Pure Start 
-        sup(style="font-size: 12px") v2.0.0
-      //- img(src=require("@/assets/images/static/logo.png"), alt="")
+        sup(style="font-size: 12px") v2.0.1
       h3(style="margin-bottom: 25px") Components examples
 
       h4(style="margin-bottom: 10px") 1. Buttons

src/pug/utils/links.pug

@@ -1,8 +1,8 @@
 //- favicons
-link(rel="shortcut icon", href="@/assets/images/favicons/64x64.png", type="image/png")
-link(rel="icon", href="@/assets/images/favicons/152x152.png", type="image/png", sizes="152x152")
-link(rel="icon", href="@/assets/images/favicons/256x256.png", type="image/png", sizes="256x256")
-link(rel="icon", href="@/assets/images/favicons/512x512.png", type="image/png", sizes="512x512")
-link(rel="apple-touch-icon", href="@/assets/images/favicons/152x152.png", sizes="152x152")
-link(rel="apple-touch-icon", href="@/assets/images/favicons/256x256.png", sizes="256x256")
-link(rel="apple-touch-icon", href="@/assets/images/favicons/512x512.png", sizes="512x512")
+link(rel="shortcut icon", href=require("@/assets/images/favicons/64x64.png"), type="image/png")
+link(rel="icon", href=require("@/assets/images/favicons/152x152.png"), type="image/png", sizes="152x152")
+link(rel="icon", href=require("@/assets/images/favicons/256x256.png"), type="image/png", sizes="256x256")
+link(rel="icon", href=require("@/assets/images/favicons/512x512.png"), type="image/png", sizes="512x512")
+link(rel="apple-touch-icon", href=require("@/assets/images/favicons/152x152.png"), sizes="152x152")
+link(rel="apple-touch-icon", href=require("@/assets/images/favicons/256x256.png"), sizes="256x256")
+link(rel="apple-touch-icon", href=require("@/assets/images/favicons/512x512.png"), sizes="512x512")

src/pug/utils/metas.pug

@@ -19,19 +19,19 @@ meta(name="description", content="Page description")
 meta(name="keywords", content="page, keywords")
 
 //- web application theme color
-meta(name="theme-color", content="#000000")
+meta(name="theme-color", content="#202020")
 
 //- copyriht
 meta(name="copyright", content="Author")
 
 //- apple web application tags
 meta(name="apple-mobile-web-app-capable", content="yes")
-meta(name="apple-mobile-web-app-status-bar-style", content="#000000")
+meta(name="apple-mobile-web-app-status-bar-style", content="#202020")
 meta(name="apple-mobile-web-app-title", content="Application Name")
 
 //- windows web application tags
-meta(name="msapplication-TileImage", content="@/img/favicons/144x144.png")
-meta(name="msapplication-TileColor", content="#000000")
+meta(name="msapplication-TileImage", content=require("@/assets/images/favicons/144x144.png"))
+meta(name="msapplication-TileColor", content="#202020")
 
 //- disable phone number link
 meta(name="format-detection", content="telephone=no")

src/scss/utils/base.scss

@@ -13,6 +13,7 @@
   &:focus-visible:not([disabled]):not([readonly]) {
     outline: 2px solid $lightBlue;
     outline-offset: 0;
+    transition: outline 0s;
   }
 }
 
@@ -74,8 +75,8 @@ a {
 
   .container {
     .wrapper {
-      max-width: 320px;
-      padding: 0 10px;
+      max-width: 440px;
+      padding: 0 15px;
     }
   }
 }

webpack.config.js

@@ -1,7 +1,7 @@
 /*
- * Pure Start © 2017 – 2021, Nikita Mihalyov <nikita.mihalyov@gmail.com>
+ * Pure Start © 2017 – 2022, Nikita Mihalyov <nikita.mihalyov@gmail.com>
  * ISC Licensed
- * v2.0.0
+ * v2.0.1
  */
 
 const path = require('path');