build fixes, images

build/browsersync.js

@@ -15,7 +15,7 @@ bs.init({
       '/dist': 'tmp-dist',
       '/libs': 'static/libs',
       '/tmp-dist/img': 'img',
-      '/img-demo': 'static/img',
+      '/static': 'static/img',
       '/node_modules': 'node_modules',
     },
   },

package.json

@@ -6,10 +6,11 @@
   "scripts": {
     "start": "npm-run-all clean css-main js-compile-standalone --parallel browsersync watch",
     "start-incremental": "npm-run-all clean css-main js-compile-standalone --parallel browsersync watch-incremental",
-    "build": "BUNDLE=true npm-run-all clean-build html-build css-build js-compile-bundle js-libs-bundle assets-copy-build",
+    "build": "BUNDLE=true npm-run-all clean-build html-build css-build js-compile-bundle js-libs-bundle images-copy-build assets-copy-build",
     "bundlesize": "bundlesize",
     "browsersync": "node build/browsersync.js",
-    "assets-copy-build": "mkdir -p demo/dist && cp -R dist/* demo/dist/ && cp -R static/* demo/ && cp -R img/* dist/img/ ",
+    "images-copy-build": "cp -R img/* dist/img/",
+    "assets-copy-build": "mkdir -p demo/dist && cp -R dist/* demo/dist/ && mkdir -p demo/static && cp -R static/* demo/static/",
     "html-build": "JEKYLL_ENV=production bundle exec jekyll build --destination demo",
     "lint": "npm-run-all --parallel js-lint css-lint",
     "clean": "rm -rf tmp-dist && mkdir tmp-dist && mkdir tmp-dist/css && mkdir tmp-dist/js",

pages/_includes/cards/blog-single.html

@@ -31,7 +31,7 @@
    <div class="row row-0 flex-fill">
       <div class="col-md-3">
          <a href="#">
-            <img src="{{ site.base }}/img-demo/photos//{{ site.data.photos[article.image].file }}" class="w-100 h-100 object-cover" alt="Card side image">
+            <img src="{{ site.base }}/static/photos//{{ site.data.photos[article.image].file }}" class="w-100 h-100 object-cover" alt="Card side image">
          </a>
       </div>
       <div class="col">
@@ -43,7 +43,7 @@
    {% else %}
       {% if type == 'image' %}
       <a href="#">
-         <img class="card-img-top" src="{{ site.base }}/img-demo/photos//{{ site.data.photos[article.image].file }}" alt="{{ article.title | escape}}">
+         <img class="card-img-top" src="{{ site.base }}/static/photos//{{ site.data.photos[article.image].file }}" alt="{{ article.title | escape}}">
       </a>
       {% endif %}
       <div class="card-body d-flex flex-column">

pages/_includes/cards/card-image.html

@@ -1,7 +1,7 @@
 <div class="card">
    <div class="row row-0">
       <div class="col-md-3{% if include.right %} order-md-last{% endif %}">
-         <img src="{{ site.base }}/img-demo/photos/{{ include.img | default: '2854fd67ddbd6217.jpg' }}" class="w-100 h-100 object-cover" alt="{{ include.img-alt | default: 'Card side image' }}">
+         <img src="{{ site.base }}/static/photos/{{ include.img | default: '2854fd67ddbd6217.jpg' }}" class="w-100 h-100 object-cover" alt="{{ include.img-alt | default: 'Card side image' }}">
       </div>
       <div class="col">
          <div class="card-body">

pages/_includes/cards/card.html

@@ -8,7 +8,7 @@
    {% else %}
 
       {% if include.img-top %}
-      <img src="{{ site.base }}/img-demo/photos/9f36332564ca271d.jpg" class="card-img-top" alt="{{ include.img-top-alt | default: 'Card top image' }}">
+      <img src="{{ site.base }}/static/photos/9f36332564ca271d.jpg" class="card-img-top" alt="{{ include.img-top-alt | default: 'Card top image' }}">
       {% endif %}
 
       {% if include.status-top %}
@@ -104,7 +104,7 @@
       {% endif %}
 
       {% if include.img-bottom %}
-      <img src="{{ site.base }}/img-demo/photos/56614e12b2a7bd68.jpg" class="card-img-bottom"
+      <img src="{{ site.base }}/static/photos/56614e12b2a7bd68.jpg" class="card-img-bottom"
            alt="{{ include.img-bottom-alt | default: 'Card bottom image' }}">
       {% endif %}
 

pages/_includes/cards/feed-card.html

@@ -22,54 +22,54 @@
 			{% if include.feed == 1 %}
 			<div class="col-6 mb-2">
 				<div class="media media-2x1 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[0].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[0].file }})"></a>
 				</div>
 			</div>
 			<div class="col-6 mb-2">
 				<div class="media media-2x1 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[1].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[1].file }})"></a>
 				</div>
 			</div>
 			<div class="col-4">
 				<div class="media media-4x3 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[2].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[2].file }})"></a>
 				</div>
 			</div>
 			<div class="col-4">
 				<div class="media media-4x3 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[3].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[3].file }})"></a>
 				</div>
 			</div>
 			<div class="col-4">
 				<div class="media media-4x3 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[4].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[4].file }})"></a>
 				</div>
 			</div>
 			{% elsif include.feed == 2 %}
 			<div class="col-12">
 				<div class="media media-2x1 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[5].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[5].file }})"></a>
 				</div>
 			</div>
 			{% elsif include.feed == 3 %}
 			<div class="col-6 d-flex">
 				<div class="media flex-fill rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[6].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[6].file }})"></a>
 				</div>
 			</div>
 			<div class="col-6">
 				<div class="media media-2x1 mb-2 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[7].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[7].file }})"></a>
 				</div>
 				<div class="row row-xs">
 					<div class="col-6">
 						<div class="media rounded">
-							<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[8].file }})"></a>
+							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></a>
 						</div>
 					</div>
 					<div class="col-6">
 						<div class="media rounded">
-							<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[9].file }})"></a>
+							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[9].file }})"></a>
 							<a class="media-overlay active bg-dark-overlay"><small class="text-white mx-auto">9+</small></a>
 						</div>
 					</div>
@@ -78,56 +78,56 @@
 			{% elsif include.feed == 4 %}
 			<div class="col-6">
 				<div class="media media-2x1 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[10].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[10].file }})"></a>
 				</div>
 			</div>
 			<div class="col-6">
 				<div class="media media-2x1 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[11].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[11].file }})"></a>
 				</div>
 			</div>
 			{% elsif include.feed == 5 %}
 			<div class="col-4">
 				<div class="media media-4x3 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[12].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[12].file }})"></a>
 				</div>
 			</div>
 			<div class="col-4">
 				<div class="media media-4x3 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[13].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[13].file }})"></a>
 				</div>
 			</div>
 			<div class="col-4">
 				<div class="media media-4x3 rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[14].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[14].file }})"></a>
 				</div>
 			</div>
 			{% elsif include.feed == 6 %}
 			<div class="col-6 d-flex">
 				<div class="media flex-fill rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[15].file }});"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[15].file }});"></a>
 				</div>
 			</div>
 			<div class="col-6">
 				<div class="row row-xs">
 					<div class="col-6">
 						<div class="media mb-2 rounded">
-							<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[16].file }})"></a>
+							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[16].file }})"></a>
 						</div>
 					</div>
 					<div class="col-6">
 						<div class="media mb-2 rounded">
-							<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[17].file }})"></a>
+							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[17].file }})"></a>
 						</div>
 					</div>
 					<div class="col-6">
 						<div class="media rounded">
-							<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[18].file }})"></a>
+							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[18].file }})"></a>
 						</div>
 					</div>
 					<div class="col-6">
 						<div class="media rounded">
-							<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[19].file }})"></a>
+							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[19].file }})"></a>
 						</div>
 					</div>
 				</div>
@@ -136,36 +136,36 @@
 			{% elsif include.feed == 7 %}
 			<div class="col-3 d-flex">
 				<div class="media flex-fill rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[20].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[20].file }})"></a>
 				</div>
 			</div>
 			<div class="col-6">
 				<div class="row row-xs">
 					<div class="col-6">
 						<div class="media mb-2 rounded">
-							<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[21].file }})"></a>
+							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[21].file }})"></a>
 						</div>
 					</div>
 					<div class="col-6">
 						<div class="media mb-2 rounded">
-							<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[22].file }})"></a>
+							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[22].file }})"></a>
 						</div>
 					</div>
 					<div class="col-6">
 						<div class="media rounded">
-							<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[23].file }})"></a>
+							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[23].file }})"></a>
 						</div>
 					</div>
 					<div class="col-6">
 						<div class="media rounded">
-							<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[24].file }})"></a>
+							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[24].file }})"></a>
 						</div>
 					</div>
 				</div>
 			</div>
 			<div class="col-3 d-flex">
 				<div class="media flex-fill rounded">
-					<a class="media-content" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[25].file }})"></a>
+					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[25].file }})"></a>
 				</div>
 			</div>
 			{% endif %}

pages/_includes/cards/gallery.html

@@ -1,6 +1,6 @@
 <div class="card card-sm">
   <div class="card-body">
-    <a href="#" class="mb-3 d-block"><img src="{{ site.base }}/img-demo/photos/{{ photo.file }}" class="rounded"></a>
+    <a href="#" class="mb-3 d-block"><img src="{{ site.base }}/static/photos/{{ photo.file }}" class="rounded"></a>
     <div class="d-flex align-items-center">
       {% include ui/avatar.html person=include.person class="mr-3 rounded" %}
       <div class="lh-sm">

pages/_includes/cards/music/track-info.html

@@ -3,7 +3,7 @@
 <div class="card">
 	<div class="row row-0">
 		<div class="col-auto">
-			<img src="{{ site.base }}/img-demo/tracks/{{ track.album.images[1].path }}" class="rounded-left" alt="{{ track.name | escape }}" width="88" height="88">
+			<img src="{{ site.base }}/static/tracks/{{ track.album.images[1].path }}" class="rounded-left" alt="{{ track.name | escape }}" width="88" height="88">
 		</div>
 		<div class="col">
 			<div class="card-body">

pages/_includes/cards/music/tracks-list.html

@@ -7,7 +7,7 @@
 					{{ forloop.index }}
 				</div>
 				<div class="col-auto">
-					<img src="{{ site.base }}/img-demo/tracks/{{ track.album.images[1].path }}" class="rounded" alt="{{ track.name | escape }}" width="48" height="48">
+					<img src="{{ site.base }}/static/tracks/{{ track.album.images[1].path }}" class="rounded" alt="{{ track.name | escape }}" width="48" height="48">
 				</div>
 				<div class="col">
 					{{ track.name }}

pages/_includes/cards/profile.html

@@ -1,5 +1,5 @@
 <div class="card card-profile">
-   <div class="card-header" style="background-image: url({{ site.base }}/img-demo/photos/{{ site.data.photos[22].file }});"></div>
+   <div class="card-header" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[22].file }});"></div>
    <div class="card-body text-center">
       <img class="card-profile-img" src="{{ site.data.people[4].photo }}">
 

pages/_includes/layout/navbar-logo.html

@@ -1,6 +1,6 @@
 {% assign prefix = include.prefix | default: 'navbar' %}
 
 <a href="{{ site.base }}" class="{{ prefix }}-brand{% if include.class %} {{ include.class }}{% endif %}">
-	<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-lg">
-	<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
+	<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-lg">
+	<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
 </a>

pages/_includes/parts/input-image.html

@@ -7,7 +7,7 @@
 			<label class="imagecheck mb-2">
 				<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4  or forloop.index == 7 %} checked{% endif %}/>
 				<span class="imagecheck-figure">
-					<img src="{{ site.base }}/img-demo/photos/{{ photo.file }}" alt="" class="imagecheck-image">
+					<img src="{{ site.base }}/static/photos/{{ photo.file }}" alt="" class="imagecheck-image">
 				</span>
 			</label>
 		</div>

pages/_includes/ui/carousel.html

@@ -13,7 +13,7 @@
    <div class="carousel-inner">
       {% for photo in photos limit: limit offset: offset %}
       <div class="carousel-item{% if forloop.first %} active{% endif %}">
-         <img class="d-block w-100" alt="" src="{{ site.base }}/img-demo/photos/{{ photo.file }}" data-holder-rendered="true">
+         <img class="d-block w-100" alt="" src="{{ site.base }}/static/photos/{{ photo.file }}" data-holder-rendered="true">
 
          {% if include.show-captions %}
          <div class="carousel-item-background d-none d-md-block"></div>

pages/_includes/ui/illustration.html

@@ -1 +1 @@
-<img src="{{ site.base }}/img-demo/illustrations/{{ include.image }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="">
+<img src="{{ site.base }}/static/illustrations/{{ include.image }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="">

pages/_includes/ui/image.html

@@ -1 +1 @@
-{% assign image-id = include.id | default: 0 %}{% assign image = site.data.photos[image-id] %}{{ site.base }}/img-demo/photos/{{ image.file }}
+{% assign image-id = include.id | default: 0 %}{% assign image = site.data.photos[image-id] %}{{ site.base }}/static/photos/{{ image.file }}