From aa9df3c1ad1ef7eec69be1b6aaa65fc4b476fe4b Mon Sep 17 00:00:00 2001 From: serg Date: Tue, 4 Feb 2020 22:14:03 +0200 Subject: migrate on building the assets via Hugo --- README.md | 4 +- assets/js/app.js | 72 +++++ assets/scss/app.scss | 299 +++++++++++++++++++++ ...p.scss_cf77da1f4ca537338a3eb28dc8a2d96c.content | 1 + .../app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.json | 1 + layouts/_default/baseof.html | 4 +- layouts/partials/head-includes.html | 7 +- layouts/partials/scripts.html | 8 +- static/app.css | 2 - static/app.js | 1 - static/vendor.js | 1 - theme.toml | 2 +- 12 files changed, 390 insertions(+), 12 deletions(-) create mode 100644 assets/js/app.js create mode 100644 assets/scss/app.scss create mode 100644 exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.content create mode 100644 exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.json delete mode 100644 static/app.css delete mode 100644 static/app.js delete mode 100644 static/vendor.js diff --git a/README.md b/README.md index 5c81d5b..0e535ad 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,9 @@ Super simple and responsive theme for your personal website on Hugo framework. ![Yourfolio screenshot](https://bit.ly/2LhW4Xo) ## Installation -Before start you already need to have a Hugo on your machine. You can install it by following [these instructions](https://gohugo.io/getting-started/installing/). +Before start you already need to have a Hugo on your machine. +**Please note:** you need to have the extended version of Hugo v0.48 or above. +You can install it by following [these instructions](https://gohugo.io/getting-started/installing/). Create the Hugo website template if you are starting from scratch: diff --git a/assets/js/app.js b/assets/js/app.js new file mode 100644 index 0000000..e5ab88d --- /dev/null +++ b/assets/js/app.js @@ -0,0 +1,72 @@ +"use strict"; + +var App = { + init: function() { + this.initBurgerHandler(); + this.stickyNavigationHandler(); + var projects = document.querySelectorAll('.project'); + + if (projects.length) { + this.initFadeInProjects(projects); + } + }, + initFadeInProjects: function(projects) { + for (var i = 0; i < projects.length; i++) { + projects[i].classList.add('transparent'); + } + + var updateProjectsView = function() { + var viewportTop = window.pageYOffset || document.documentElement.scrollTop; + var viewportBottom = viewportTop + window.innerHeight; + + for(var i = 0; i < projects.length; i++) { + var project = projects[i]; + var projectTopOffset = project.getBoundingClientRect().top + viewportTop; + + if (projectTopOffset <= viewportBottom) { + var projectClasses = project.classList; + projectClasses.remove('transparent'); + projectClasses.add('animated'); + projectClasses.add('fadeInUp'); + } + } + }; + + updateProjectsView(); + window.addEventListener('scroll', updateProjectsView); + }, + initBurgerHandler: function() { + var navContainer = document.querySelector('.nav-container'); + var burger = document.querySelector('.burger'); + + burger.addEventListener('click', function() { + navContainer.classList.toggle('BurgerMenu--active'); + }); + }, + stickyNavigationHandler: function() { + var scrollPosition = 0; + var mainContainer = document.querySelector('.main-container'); + var navContainer = document.querySelector('.nav-container'); + + var updateNavigationView = function() { + var currentScrollPos = window.pageYOffset || document.documentElement.scrollTop; + var isUpDirection = (currentScrollPos && currentScrollPos < scrollPosition); + + if (isUpDirection) { + mainContainer.classList.add('stickyNavigation'); + } else { + mainContainer.classList.remove('stickyNavigation'); + } + + if (currentScrollPos > scrollPosition) { + navContainer.classList.remove('BurgerMenu--active'); + } + + scrollPosition = currentScrollPos; + }; + + window.addEventListener('scroll', updateNavigationView); + } +}; + +App.init(); diff --git a/assets/scss/app.scss b/assets/scss/app.scss new file mode 100644 index 0000000..6d4f6a6 --- /dev/null +++ b/assets/scss/app.scss @@ -0,0 +1,299 @@ +.burger-wrap { + float: right; + height: 100%; + + &:before { + display: inline-block; + vertical-align: middle; + content: ''; + height: 100%; + width: 0; + } +} + +.burger { + position: relative; + width: 2.5em; + height: 1.8em; + display: inline-block; + vertical-align: middle; + cursor: pointer; + + & > div { + position: absolute; + left: 0; + right: 0; + background: #171616; + height: .2em; + } + + .top { + top: 0; + transition: transform 0.5s, top 0.2s; + } + + .middle { + top: .8em; + transition: transform 0.5s ease 0.2s, top 0.2s; + } + + .bottom { + top: 1.6em; + transition: all 0.5s ease 0.1s; + } +} + +.BurgerMenu--active { + .burger { + .top { + top: .8em; + transform: rotate(135deg); + } + + .middle { + transform: rotate(-135deg); + } + + .bottom { + top: 0.8em; + opacity: 0; + transform: rotate(180deg); + } + } + + .links { + visibility: visible; + opacity: 1; + } +} + +.projects { + margin-top: 4.5em; + margin-bottom: 3.5em; + + & .project { + margin-bottom: 2em; + } + + & a { + position: relative; + display: block; + } + + & a:hover{ + & .project-hover { + background: #224afa; + color: #fff; + opacity: 0.9; + -webkit-transition: opacity 200ms linear; + -moz-transition: opacity 200ms linear; + -ms-transition: opacity 200ms linear; + -o-transition: opacity 200ms linear; + transition: opacity 200ms linear; + } + } + + & .image-item { + display: block; + max-width: 100%; + height: auto; + } + + & .project-hover { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + opacity: 0; + -webkit-transition: all 200ms linear 300ms; + -moz-transition: all 200ms linear 300ms; + -ms-transition: all 200ms linear 300ms; + -o-transition: all 200ms linear 300ms; + transition: all 200ms linear 300ms; + } +} + +.project-caption { + padding: 1.5em; + line-height: 1.2; + + & .project-title { + max-height: 3.5em; + font-size: 2.8em; + font-weight: bold; + overflow: hidden; + } + + & .project-type { + margin-top: .5em; + font-size: 1.4em; + text-transform: uppercase; + } +} + +.line::before { + content: ""; + display: block; + height: 1px; + background: #ebebeb; + margin-top: 4.2em; + margin-bottom: 4.2em; +} + +.bottom-space { + margin-bottom: 4.2em; +} + +.stickyNavigation { + .nav-container { + position: fixed; + z-index: 10; + width: 100%; + padding-bottom: 1.5em; + -webkit-box-shadow: 0 5px 7px 0 rgba(1,1,1,.1); + box-shadow: 0 5px 7px 0 rgba(1,1,1,.1); + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + } + + .navbar { + height: 5em; + padding-top: 1.5em; + } + + .logo img { + max-height: 5em; + } + + .header { + padding-top: 9.1em; + } +} + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 60px, 0); + transform: translate3d(0, 60px, 0); + } + + 40% { + opacity: 0; + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 60px, 0); + transform: translate3d(0, 60px, 0); + } + + 40% { + opacity: 0; + } + + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInUp { + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; +} + +//361 +@media only screen and (min-width: 22.5625em) { + .projects { + margin-top: 7.5em; + margin-bottom: 6em; + } +} + +//446 +@media only screen and (min-width: 27.875em) { + .project-caption { + & .project-title { + font-size: 3.5em; + } + + & .project-type { + font-size: 1.6em; + } + } +} + +//741 +@media only screen and (min-width: 46.3125em) { + .projects { + margin-top: 10em; + + & .project { + float: left; + } + + & .short-col { + width: 32.21238%; + } + + & .wide-col { + width: 66.01769%; + } + + & .project:nth-child(2n) { + margin-right: 1.7699%; + } + } + + .project-caption { + padding: 3.7em 2.5em 3.7em 3em; + + & .project-title { + font-size: 4em; + max-height: 4.8em; + } + } +} + +//936 +@media only screen and (min-width: 58.5em) { + .project-caption { + & .project-title { + font-size: 4.6em; + } + } +} diff --git a/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.content b/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.content new file mode 100644 index 0000000..945f0b4 --- /dev/null +++ b/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.content @@ -0,0 +1 @@ +.burger-wrap{float:right;height:100%}.burger-wrap:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.burger{position:relative;width:2.5em;height:1.8em;display:inline-block;vertical-align:middle;cursor:pointer}.burger>div{position:absolute;left:0;right:0;background:#171616;height:.2em}.burger .top{top:0;transition:transform .5s,top .2s}.burger .middle{top:.8em;transition:transform .5s ease .2s,top .2s}.burger .bottom{top:1.6em;transition:all .5s ease .1s}.BurgerMenu--active .burger .top{top:.8em;transform:rotate(135deg)}.BurgerMenu--active .burger .middle{transform:rotate(-135deg)}.BurgerMenu--active .burger .bottom{top:.8em;opacity:0;transform:rotate(180deg)}.BurgerMenu--active .links{visibility:visible;opacity:1}.projects{margin-top:4.5em;margin-bottom:3.5em}.projects .project{margin-bottom:2em}.projects a{position:relative;display:block}.projects a:hover .project-hover{background:#224afa;color:#fff;opacity:.9;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-ms-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;transition:opacity 200ms linear}.projects .image-item{display:block;max-width:100%;height:auto}.projects .project-hover{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;-webkit-transition:all 200ms linear 300ms;-moz-transition:all 200ms linear 300ms;-ms-transition:all 200ms linear 300ms;-o-transition:all 200ms linear 300ms;transition:all 200ms linear 300ms}.project-caption{padding:1.5em;line-height:1.2}.project-caption .project-title{max-height:3.5em;font-size:2.8em;font-weight:700;overflow:hidden}.project-caption .project-type{margin-top:.5em;font-size:1.4em;text-transform:uppercase}.line::before{content:"";display:block;height:1px;background:#ebebeb;margin-top:4.2em;margin-bottom:4.2em}.bottom-space{margin-bottom:4.2em}.stickyNavigation .nav-container{position:fixed;z-index:10;width:100%;padding-bottom:1.5em;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,.1);box-shadow:0 5px 7px 0 rgba(1,1,1,.1);-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:.3s;animation-duration:.3s}.stickyNavigation .navbar{height:5em;padding-top:1.5em}.stickyNavigation .logo img{max-height:5em}.stickyNavigation .header{padding-top:9.1em}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,60px,0);transform:translate3d(0,60px,0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,60px,0);transform:translate3d(0,60px,0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@media only screen and (min-width:22.5625em){.projects{margin-top:7.5em;margin-bottom:6em}}@media only screen and (min-width:27.875em){.project-caption .project-title{font-size:3.5em}.project-caption .project-type{font-size:1.6em}}@media only screen and (min-width:46.3125em){.projects{margin-top:10em}.projects .project{float:left}.projects .short-col{width:32.21238%}.projects .wide-col{width:66.01769%}.projects .project:nth-child(2n){margin-right:1.7699%}.project-caption{padding:3.7em 2.5em 3.7em 3em}.project-caption .project-title{font-size:4em;max-height:4.8em}}@media only screen and (min-width:58.5em){.project-caption .project-title{font-size:4.6em}} \ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.json b/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.json new file mode 100644 index 0000000..f8ed2a2 --- /dev/null +++ b/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.json @@ -0,0 +1 @@ +{"Target":"css/app.min.e830e49d7ab589b0cc0d3552f3e42bef631fc1211d9020a05bad0e083e41a6e2.css","MediaType":"text/css","Data":{"Integrity":"sha256-6DDknXq1ibDMDTVS8+Qr72MfwSEdkCCgW60OCD5BpuI="}} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 64ec7cd..f01d93a 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,7 +6,7 @@ {{ block "title" . }}{{ with .Title }}{{ . }} - {{ end }}{{ .Site.Title }}{{ end }} - {{- if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production") -}} + {{- if (eq hugo.Environment "production") | or (eq .Site.Params.env "production") -}} {{- else -}} @@ -29,7 +29,7 @@ {{- block "scripts" . -}} {{- partial "scripts.html" . -}} {{- end -}} - {{- if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production") | and .Site.GoogleAnalytics -}} + {{- if (eq hugo.Environment "production") | or (eq .Site.Params.env "production") | and .Site.GoogleAnalytics -}} {{- template "_internal/google_analytics_async.html" . -}} {{- end -}} diff --git a/layouts/partials/head-includes.html b/layouts/partials/head-includes.html index 5fff50f..d5c872c 100644 --- a/layouts/partials/head-includes.html +++ b/layouts/partials/head-includes.html @@ -323,7 +323,12 @@ } - - +{{$js := resources.Get "js/app.js"}} +{{if eq (hugo.Environment) "production" | or (eq .Site.Params.env "production")}} +{{$js = $js | minify | fingerprint}} +{{end}} + diff --git a/static/app.css b/static/app.css deleted file mode 100644 index 26a5a60..0000000 --- a/static/app.css +++ /dev/null @@ -1,2 +0,0 @@ -.burger-wrap{float:right;height:100%}.burger-wrap:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.burger{position:relative;width:2.5em;height:1.8em;display:inline-block;vertical-align:middle;cursor:pointer}.burger>div{position:absolute;left:0;right:0;background:#171616;height:.2em}.burger .top{top:0;transition:transform 0.5s, top 0.2s}.burger .middle{top:.8em;transition:transform 0.5s ease 0.2s, top 0.2s}.burger .bottom{top:1.6em;transition:all 0.5s ease 0.1s}.BurgerMenu--active .burger .top{top:.8em;transform:rotate(135deg)}.BurgerMenu--active .burger .middle{transform:rotate(-135deg)}.BurgerMenu--active .burger .bottom{top:0.8em;opacity:0;transform:rotate(180deg)}.BurgerMenu--active .links{visibility:visible;opacity:1}.projects{margin-top:4.5em;margin-bottom:3.5em}.projects .project{margin-bottom:2em}.projects a{position:relative;display:block}.projects a:hover .project-hover{background:#224afa;color:#fff;opacity:0.9;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-ms-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;transition:opacity 200ms linear}.projects .image-item{display:block;max-width:100%;height:auto}.projects .project-hover{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;-webkit-transition:all 200ms linear 300ms;-moz-transition:all 200ms linear 300ms;-ms-transition:all 200ms linear 300ms;-o-transition:all 200ms linear 300ms;transition:all 200ms linear 300ms}.project-caption{padding:1.5em;line-height:1.2}.project-caption .project-title{max-height:3.5em;font-size:2.8em;font-weight:bold;overflow:hidden}.project-caption .project-type{margin-top:.5em;font-size:1.4em;text-transform:uppercase}.line::before{content:"";display:block;height:1px;background:#ebebeb;margin-top:4.2em;margin-bottom:4.2em}.bottom-space{margin-bottom:4.2em}.stickyNavigation .nav-container{position:fixed;z-index:10;width:100%;padding-bottom:1.5em;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,0.1);box-shadow:0 5px 7px 0 rgba(1,1,1,0.1);-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:0.3s;animation-duration:0.3s}.stickyNavigation .navbar{height:5em;padding-top:1.5em}.stickyNavigation .logo img{max-height:5em}.stickyNavigation .header{padding-top:9.1em}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 60px, 0);transform:translate3d(0, 60px, 0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 60px, 0);transform:translate3d(0, 60px, 0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@media only screen and (min-width: 22.5625em){.projects{margin-top:7.5em;margin-bottom:6em}}@media only screen and (min-width: 27.875em){.project-caption .project-title{font-size:3.5em}.project-caption .project-type{font-size:1.6em}}@media only screen and (min-width: 46.3125em){.projects{margin-top:10em}.projects .project{float:left}.projects .short-col{width:32.21238%}.projects .wide-col{width:66.01769%}.projects .project:nth-child(2n){margin-right:1.7699%}.project-caption{padding:3.7em 2.5em 3.7em 3em}.project-caption .project-title{font-size:4em;max-height:4.8em}}@media only screen and (min-width: 58.5em){.project-caption .project-title{font-size:4.6em}} - diff --git a/static/app.js b/static/app.js deleted file mode 100644 index 45c056c..0000000 --- a/static/app.js +++ /dev/null @@ -1 +0,0 @@ -!function(){"use strict";var e="undefined"==typeof global?self:global;if("function"!=typeof e.require){var n={},r={},t={},i={}.hasOwnProperty,o=/^\.\.?(\/|$)/,a=function(e,n){for(var r,t=[],i=(o.test(n)?e+"/"+n:n).split("/"),a=0,c=i.length;ae&&r.classList.remove("BurgerMenu--active"),e=t};window.addEventListener("scroll",t)}};r.exports=t}),require.register("___globals___",function(e,n,r){})}(),require("___globals___"); \ No newline at end of file diff --git a/static/vendor.js b/static/vendor.js deleted file mode 100644 index dea3542..0000000 --- a/static/vendor.js +++ /dev/null @@ -1 +0,0 @@ -!function(){"use strict";var e="undefined"==typeof global?self:global;if("function"!=typeof e.require){var t={},n={},r={},o={}.hasOwnProperty,i=/^\.\.?(\/|$)/,s=function(e,t){for(var n,r=[],o=(i.test(t)?e+"/"+t:t).split("/"),s=0,a=o.length;sc;c++)if(v=e[c],h=L.style[v],f(v,"-")&&(v=m(v)),L.style[v]!==n){if(i||r(o,"undefined"))return s(),"pfx"!=t||v;try{L.style[v]=o}catch(A){}if(L.style[v]!=h)return s(),"pfx"!=t||v}return s(),!1}function h(e,t){return function(){return e.apply(t,arguments)}}function g(e,t,n){var o;for(var i in e)if(e[i]in t)return n===!1?e[i]:(o=t[e[i]],r(o,"function")?h(o,n||t):o);return!1}function A(e,t,n,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+j.join(s+" ")+s).split(" ");return r(t,"string")||r(t,"undefined")?v(a,t,o,i):(a=(e+" "+E.join(s+" ")+s).split(" "),g(a,t,n))}function y(e,t,r){return A(e,n,n,t,r)}var w=[],b={_version:"3.5.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,t){var n=this;setTimeout(function(){t(n[e])},0)},addTest:function(e,t,n){w.push({name:e,fn:t,options:n})},addAsyncTest:function(e){w.push({name:null,fn:e})}},C=function(){};C.prototype=b,C=new C;var _=[],x=t.documentElement,S="svg"===x.nodeName.toLowerCase(),T="Moz O ms Webkit",E=b._config.usePrefixes?T.toLowerCase().split(" "):[];b._domPrefixes=E;var P=b._config.usePrefixes?" -webkit- -moz- -o- -ms- ".split(" "):["",""];b._prefixes=P;var k;!function(){var e={}.hasOwnProperty;k=r(e,"undefined")||r(e.call,"undefined")?function(e,t){return t in e&&r(e.constructor.prototype[t],"undefined")}:function(t,n){return e.call(t,n)}}(),b._l={},b.on=function(e,t){this._l[e]||(this._l[e]=[]),this._l[e].push(t),C.hasOwnProperty(e)&&setTimeout(function(){C._trigger(e,C[e])},0)},b._trigger=function(e,t){if(this._l[e]){var n=this._l[e];setTimeout(function(){var e,r;for(e=0;e