diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d01360f --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/dist/ +/misc/ diff --git a/.htmlhintrc b/.htmlhintrc new file mode 100644 index 0000000..da0391e --- /dev/null +++ b/.htmlhintrc @@ -0,0 +1,9 @@ +{ + "tagname-lowercase": true, + "doctype-first": false, + "tag-pair": true, + "attr-value-double-quotes": true, + "attr-value-not-empty": true, + "attr-no-duplication": true, + "space-tab-mixed-disabled": "false" +} diff --git a/archetypes/default.md b/archetypes/default.md deleted file mode 100644 index 66c45a4..0000000 --- a/archetypes/default.md +++ /dev/null @@ -1,6 +0,0 @@ -+++ -Description = "" -Keywords = [] -Tags = [] -Categories = [] -+++ diff --git a/assets/.gitignore b/assets/.gitignore new file mode 100644 index 0000000..b7ef9bf --- /dev/null +++ b/assets/.gitignore @@ -0,0 +1 @@ +/media/ diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..08aab88 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,5 @@ +/* picture captions */ +.lg-sub-html { + font-size: 2em; + font-weight: bold; +} diff --git a/assets/css/gallery/style.css b/assets/css/gallery/style.css new file mode 100644 index 0000000..b0cd12c --- /dev/null +++ b/assets/css/gallery/style.css @@ -0,0 +1,64 @@ +#galleries a { + display: inline-block; +} +#galleries .meta { + font-size: 0.9em; + width: 100%; + margin: 0.5em 0; + color: #666; + line-height: 1.2em; +} +#galleries > li { + display: inline-block; + margin-right: 2em; + margin-bottom: 3em; +} +#galleries .grid { + width: 200px; +} +#galleries .grid li { + float: left; + padding: 0 0.2em 0.2em 0; + width: 50%; +} +#galleries .grid img { + display: block; + width: 100%; +} +#media { + margin-bottom: 3em; +} +#media li { + display: inline-block; + margin-right: 0.2em; + margin-bottom: 0.2em; + position: relative; +} +#media li .video-overlay { + left: 50%; + height: 48px; + margin-left: -24px; + margin-top: -24px; + position: absolute; + top: 50%; + width: 48px; +} +#lg-gallery .lg-slide .object { + transition-duration: 0.3s; +} +#lg-gallery .video { + height: 100%; + left: 0; + padding-bottom: 100px; + position: absolute; + top: 0; + width: 100%; +} +#lg-gallery video { + max-width: 100%; +} +/* captions */ +.lg-sub-html { + bottom: 100px; + /* always display above the thumbnails */ +} diff --git a/assets/css/gallery/video-js.css b/assets/css/gallery/video-js.css new file mode 100644 index 0000000..059f1e6 --- /dev/null +++ b/assets/css/gallery/video-js.css @@ -0,0 +1,5 @@ +/*! +Video.js Default Styles (http://videojs.com) +Version 4.12.15 +Create your own skin at http://designer.videojs.com +*/.vjs-default-skin{color:#ccc}@font-face{font-family:VideoJS;src:url(../f/3/vjs.eot);src:url(../f/3/vjs.eot?#iefix) format('embedded-opentype'),url(../f/3/vjs.woff) format('woff'),url(../f/3/vjs.ttf) format('truetype'),url(../f/3/vjs.svg#icomoon) format('svg');font-weight:400;font-style:normal}.vjs-default-skin .vjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#333;background-color:rgba(51,51,51,.9)}.vjs-default-skin .vjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.vjs-default-skin .vjs-slider-handle{position:absolute;left:0;top:0}.vjs-default-skin .vjs-slider-handle:before{content:"\e009";font-family:VideoJS;font-size:1em;line-height:1;text-align:center;text-shadow:0 0 1em #fff;position:absolute;top:0;left:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.vjs-default-skin .vjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3em;background-color:#07141e;background-color:rgba(7,20,30,.7)}.vjs-default-skin.vjs-has-started .vjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.vjs-default-skin.vjs-controls-disabled .vjs-control-bar{display:none}.vjs-default-skin.vjs-using-native-controls .vjs-control-bar{display:none}.vjs-default-skin.vjs-error .vjs-control-bar{display:none}.vjs-audio.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:1;visibility:visible}@media \0screen{.vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before{content:""}}.vjs-default-skin .vjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.vjs-default-skin .vjs-control:before{font-family:VideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.vjs-default-skin .vjs-control:focus:before,.vjs-default-skin .vjs-control:hover:before{text-shadow:0 0 1em #fff}.vjs-default-skin .vjs-control:focus{}.vjs-default-skin .vjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.vjs-default-skin .vjs-play-control{width:5em;cursor:pointer}.vjs-default-skin .vjs-play-control:before{content:"\e001"}.vjs-default-skin.vjs-playing .vjs-play-control:before{content:"\e002"}.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value{font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.vjs-default-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content{width:4em;left:-2em;list-style:none}.vjs-default-skin .vjs-mute-control,.vjs-default-skin .vjs-volume-menu-button{cursor:pointer;float:right}.vjs-default-skin .vjs-mute-control:before,.vjs-default-skin .vjs-volume-menu-button:before{content:"\e006"}.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before{content:"\e003"}.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before{content:"\e004"}.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before{content:"\e005"}.vjs-default-skin .vjs-volume-control{width:5em;float:right}.vjs-default-skin .vjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.vjs-default-skin .vjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat}.vjs-default-skin .vjs-volume-bar .vjs-volume-handle{width:.5em;height:.5em;left:4.5em}.vjs-default-skin .vjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.vjs-default-skin .vjs-volume-menu-button .vjs-menu{display:block;width:0;height:0;border-top-color:transparent}.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content{height:0;width:0}.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu,.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing{border-top-color:rgba(7,40,50,.5)}.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu .vjs-menu-content,.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing .vjs-menu-content{height:2.9em;width:10em}.vjs-default-skin .vjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.vjs-default-skin:hover .vjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.vjs-default-skin .vjs-progress-holder{height:100%}.vjs-default-skin .vjs-progress-holder .vjs-play-progress,.vjs-default-skin .vjs-progress-holder .vjs-load-progress,.vjs-default-skin .vjs-progress-holder .vjs-load-progress div{position:absolute;display:block;height:100%;margin:0;padding:0;width:0;left:0;top:0}.vjs-default-skin .vjs-play-progress{background:#66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat}.vjs-default-skin .vjs-load-progress{background:#646464;background:rgba(255,255,255,.2)}.vjs-default-skin .vjs-load-progress div{background:#787878;background:rgba(255,255,255,.1)}.vjs-default-skin .vjs-seek-handle{width:1.5em;height:100%}.vjs-default-skin .vjs-seek-handle:before{padding-top:.1em}.vjs-default-skin.vjs-live .vjs-time-controls,.vjs-default-skin.vjs-live .vjs-time-divider,.vjs-default-skin.vjs-live .vjs-progress-control{display:none}.vjs-default-skin.vjs-live .vjs-live-display{display:block}.vjs-default-skin .vjs-live-display{display:none;font-size:1em;line-height:3em}.vjs-default-skin .vjs-time-controls{font-size:1em;line-height:3em}.vjs-default-skin .vjs-current-time{float:left}.vjs-default-skin .vjs-duration{float:left}.vjs-default-skin .vjs-remaining-time{display:none;float:left}.vjs-time-divider{float:left;line-height:3em}.vjs-default-skin .vjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.vjs-default-skin .vjs-fullscreen-control:before{content:"\e000"}.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before{content:"\e00b"}.vjs-default-skin .vjs-big-play-button{left:.5em;top:.5em;font-size:3em;display:block;z-index:2;position:absolute;width:4em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#07141e;background-color:rgba(7,20,30,.7);border:.1em solid #3b4249;-webkit-border-radius:.8em;-moz-border-radius:.8em;border-radius:.8em;-webkit-box-shadow:0 0 1em rgba(255,255,255,.25);-moz-box-shadow:0 0 1em rgba(255,255,255,.25);box-shadow:0 0 1em rgba(255,255,255,.25);-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button{left:50%;margin-left:-2.1em;top:50%;margin-top:-1.4000000000000001em}.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button{display:none}.vjs-default-skin.vjs-has-started .vjs-big-play-button{display:none}.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button{display:none}.vjs-default-skin:hover .vjs-big-play-button,.vjs-default-skin .vjs-big-play-button:focus{outline:0;border-color:#fff;background-color:#505050;background-color:rgba(50,50,50,.75);-webkit-box-shadow:0 0 3em #fff;-moz-box-shadow:0 0 3em #fff;box-shadow:0 0 3em #fff;-webkit-transition:all 0s;-moz-transition:all 0s;-o-transition:all 0s;transition:all 0s}.vjs-default-skin .vjs-big-play-button:before{content:"\e001";font-family:VideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.vjs-error .vjs-big-play-button{display:none}.vjs-error-display{display:none}.vjs-error .vjs-error-display{display:block;position:absolute;left:0;top:0;width:100%;height:100%}.vjs-error .vjs-error-display:before{content:'X';font-family:Arial;font-size:4em;color:#666;line-height:1;text-shadow:.05em .05em .1em #000;text-align:center;vertical-align:middle;position:absolute;left:0;top:50%;margin-top:-.5em;width:100%}.vjs-error-display div{position:absolute;bottom:1em;right:0;left:0;font-size:1.4em;text-align:center;padding:3px;background:#000;background:rgba(0,0,0,.5)}.vjs-error-display a,.vjs-error-display a:visited{color:#F4A460}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75}.vjs-waiting .vjs-loading-spinner,.vjs-seeking .vjs-loading-spinner{display:block;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.vjs-error .vjs-loading-spinner{display:none;-webkit-animation:none;-moz-animation:none;-o-animation:none;animation:none}.vjs-default-skin .vjs-loading-spinner:before{content:"\e01e";font-family:VideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.vjs-default-skin .vjs-menu-button{float:right;cursor:pointer}.vjs-default-skin .vjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.vjs-default-skin .vjs-menu-button:hover .vjs-control-content .vjs-menu,.vjs-default-skin .vjs-control-content .vjs-menu.vjs-lock-showing{display:block}.vjs-default-skin.vjs-scrubbing .vjs-menu-button:hover .vjs-control-content .vjs-menu{display:none}.vjs-default-skin .vjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.vjs-default-skin .vjs-menu-button ul li.vjs-selected{background-color:#000}.vjs-default-skin .vjs-menu-button ul li:focus,.vjs-default-skin .vjs-menu-button ul li:hover,.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover{outline:0;color:#111;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.vjs-default-skin .vjs-subtitles-button:before{content:"\e00c"}.vjs-default-skin .vjs-captions-button:before{content:"\e008"}.vjs-default-skin .vjs-chapters-button:before{content:"\e00c"}.vjs-default-skin .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content{width:24em;left:-12em}.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.video-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:400;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.video-js .vjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.video-js:-moz-full-screen{position:absolute}body.vjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.video-js.vjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;_position:absolute}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#000;cursor:pointer;margin:0;padding:0;position:absolute;top:0;right:0;bottom:0;left:0}.vjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.video-js.vjs-has-started .vjs-poster{display:none}.video-js.vjs-audio.vjs-has-started .vjs-poster{display:block}.video-js.vjs-controls-disabled .vjs-poster{display:none}.video-js.vjs-using-native-controls .vjs-poster{display:none}.video-js .vjs-text-track-display{position:absolute;top:0;left:0;bottom:3em;right:0;pointer-events:none}.vjs-caption-settings{position:relative;top:1em;background-color:#000;opacity:.75;color:#FFF;margin:0 auto;padding:.5em;height:15em;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:40em}.vjs-caption-settings .vjs-tracksettings{top:0;bottom:2em;left:0;right:0;position:absolute;overflow:auto}.vjs-caption-settings .vjs-tracksettings-colors,.vjs-caption-settings .vjs-tracksettings-font{float:left}.vjs-caption-settings .vjs-tracksettings-colors:after,.vjs-caption-settings .vjs-tracksettings-font:after,.vjs-caption-settings .vjs-tracksettings-controls:after{clear:both}.vjs-caption-settings .vjs-tracksettings-controls{position:absolute;bottom:1em;right:1em}.vjs-caption-settings .vjs-tracksetting{margin:5px;padding:3px;min-height:40px}.vjs-caption-settings .vjs-tracksetting label{display:block;width:100px;margin-bottom:5px}.vjs-caption-settings .vjs-tracksetting span{display:inline;margin-left:5px}.vjs-caption-settings .vjs-tracksetting>div{margin-bottom:5px;min-height:20px}.vjs-caption-settings .vjs-tracksetting>div:last-child{margin-bottom:0;padding-bottom:0;min-height:0}.vjs-caption-settings label>input{margin-right:10px}.vjs-caption-settings input[type=button]{width:40px;height:40px}.vjs-hidden{display:none!important}.vjs-lock-showing{display:block!important;opacity:1;visibility:visible}.vjs-no-js{padding:2em;color:#ccc;background-color:#333;font-size:1.8em;font-family:Arial,sans-serif;text-align:center;width:30em;height:15em;margin:0 auto}.vjs-no-js a,.vjs-no-js a:visited{color:#F4A460} \ No newline at end of file diff --git a/assets/css/gallery/viewer.css b/assets/css/gallery/viewer.css new file mode 100644 index 0000000..562a353 --- /dev/null +++ b/assets/css/gallery/viewer.css @@ -0,0 +1,28 @@ +/* +----------------------------------- + Photo and video viewer + This is shared by all templates +----------------------------------- +*/ + +#lg-gallery .lg-slide .object { + transition-duration: 0.3s; +} + +#lg-gallery .video { + height: 100%; + left: 0; + padding-bottom: 100px; + position: absolute; + top: 0; + width: 100%; +} + +#lg-gallery video { + max-width: 100%; +} + +/* always display captions above the thumbnails */ +.lg-sub-html { + bottom: 100px; +} diff --git a/assets/css/navbar.css b/assets/css/navbar.css new file mode 100644 index 0000000..f6eea9d --- /dev/null +++ b/assets/css/navbar.css @@ -0,0 +1,164 @@ + +/*body, p, h1, h2, h3, h4, ul, li { + margin: 0; + padding: 0; +}*/ + +/*body { + max-height: 100vh; +}*/ + +#nav-container > nav > ul { + list-style-type: none; +} + +/* NAVIGATION */ +#nav-background { + position: fixed; + top: 0; + z-index: 9000; + width: 100%; + background-color: white; + border-bottom: 1px solid #ddd; + /* + box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); + */ +} + +#nav-container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + max-width: 1000px; + margin: 0 auto; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + font-family: Arial, Helvetica, sans-serif; +} + +#nav-header { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +#nav-logo { + color: #444; + text-decoration: none; +} +#nav-logo:hover { + color: #666; +} + +.nav-ul { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + max-width: 700px; +} + +.nav-ul > li { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.nav-link { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + color: #444; + text-decoration: none; + font-weight: 600; + font-size: 1.2rem; + -webkit-transition: 200ms; + transition: 200ms; +} + +.nav-link:hover { + background-color: #f1f1f1; +} + +.active-link { + background-color: #f1f1f1; +} + +/* END NAVIGATION */ + + +/* MOBILE MENU */ +@media screen and (max-width: 700px) { + + #nav-container { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; + } + + #nav-menu-button { + padding: 1rem; + background-color: #f1f1f1; + cursor: pointer; + } + + .nav-ul { + display: block; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow-y: scroll; + direction: rtl; + max-height: 80vh; + } + + .hide-ul { + max-height: 0vh; + } + + .nav-link { + padding: 1rem 0; + font-size: 1.3rem; + border-bottom: 1px solid #f4f4f4; + } +} +/* END MOBILE MENU */ + +/* DESKTOP MENU */ +@media screen and (min-width: 701px) { + + #nav-menu-button { + display: none; + } + + .nav-link { + padding: 1rem 1.5rem; + } +} + +/* This moves the logo so that it's not touching the left side */ +@media screen and (max-width: 1040px) { + #nav-logo { + margin-left: 1rem; + } +} +/* END DESKTOP MENU */ diff --git a/assets/css/page.css b/assets/css/page.css new file mode 100644 index 0000000..f282c7e --- /dev/null +++ b/assets/css/page.css @@ -0,0 +1,469 @@ +/*------------- + General +-------------*/ + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html{ + font: normal 16px sans-serif; + color: #555; +} + +ul, nav{ + list-style: none; +} + +a{ + text-decoration: none; + color: inherit; + cursor: pointer; + + opacity: 0.9; +} + +a:hover{ + opacity: 1; +} + +a.btn{ + color: #fff; + border-radius: 4px; + text-transform: uppercase; + background-color: #2196F3; + font-weight: 800; + text-align: center; +} + +hr{ + width: 150px; + height: 2px; + background-color: #2196F3; + border: 0; + margin-bottom: 80px; +} + +.divider { + width: 400px; + border-top: 1px solid #f8f8f8; + border-bottom: 1px solid rgba(0,0,0,0.2); +} + +section{ + display: flex; + flex-direction: column; + align-items: center; + + padding: 125px 100px; +} + +@media (max-width: 1000px){ + + section{ + padding: 100px 50px; + } + +} + +@media (max-width: 600px){ + + section{ + padding: 80px 30px; + } + +} + +section h3.title{ + color: #414a4f; + text-transform: capitalize; + font: bold 32px 'Open Sans', sans-serif; + margin-bottom: 35px; + text-align: center; +} + +section p{ + max-width: 800px; + text-align: center; + margin-bottom: 35px; + padding: 0 20px; + line-height: 2; +} + +ul.grid{ + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + + +/*------------- + Header +------------- + +header{ + position: absolute; + top: 0; + left: 0; + z-index: 10; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + color: #fff; + padding: 35px 100px 0; +} + +header h2{ + font-family: 'Quicksand', sans-serif; +} + +header nav{ + display: flex; +} + +header nav li{ + margin: 0 15px; +} + +header nav li:first-child{ + margin-left: 0; +} + +header nav li:last-child{ + margin-right: 0; +} + + + +@media (max-width: 1000px){ + header{ + padding: 20px 50px; + } +} + + +@media (max-width: 700px){ + header{ + flex-direction: column; + } + + header h2{ + margin-bottom: 15px; + } +} + +*/ + +/*---------------- + Hero Section +----------------*/ + +.hero{ + /*position: relative;*/ + justify-content: center; + min-height: 100vh; + color: #fff; + text-align: center; + padding-top: 10%; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ + padding-bottom: 10%; + text-align: center; + background-size: contain; +} + +.hero .background-image{ + background-image: url("../images/intro.jpg") no-repeat center center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: cover; + background-color: #2196F3; + z-index: -1; +} + +.hero .background-image:after{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #414a4f; + opacity: 0.75; +} + +.hero h1{ + font: bold 60px 'Open Sans', sans-serif; + margin-bottom: 15px; +} + +.hero h3{ + font: normal 28px 'Open Sans', sans-serif; + margin-bottom: 40px; +} + +.hero a.btn{ + padding: 20px 46px; +} + +@media (max-width: 800px){ + + .hero{ + min-height: 600px; + } + + .hero h1{ + font-size: 48px; + } + + .hero h3{ + font-size: 24px; + } + + .hero a.btn{ + padding: 15px 40px; + } + +} + + + +/*-------------------- + Our Work Section +---------------------*/ + +.оur-work{ + background-color: #fff; +} + +.our-work .grid li{ + padding: 20px; + height: 350px; + border-radius: 3px; + + background-clip: content-box; + background-size: cover; + background-position: center; + background-color: #333; +} + +.our-work .grid li.small{ + flex-basis: 40%; +} + +.our-work .grid li.large{ + flex-basis: 60%; +} + + +@media (max-width: 1000px){ + + .our-work .grid li.small, + .our-work .grid li.large{ + flex-basis: 100%; + } + +} + + + +/*---------------------- + Features Section +----------------------*/ + +.features{ + background-color: #f7f7f7; +} + +.features .grid li{ + padding: 0 30px; + flex-basis: 33%; + text-align: center; +} + +.features .grid li i{ + font-size: 50px; + color: #2196F3; + margin-bottom: 25px; +} + +.features .grid li h4{ + color: #555; + font-size: 20px; + margin-bottom: 25px; +} + +.features .grid li p{ + margin: 0; +} + +@media (max-width: 1000px){ + + .features .grid li{ + flex-basis: 70%; + margin-bottom: 65px; + } + + .features .grid li:last-child{ + margin-bottom: 0; + } + +} + + +@media (max-width: 600px){ + + .features .grid li{ + flex-basis: 100%; + } + +} + + + +/*-------------------- + Reviews Section +--------------------*/ + +.reviews{ + background-color: #fff; +} + +.reviews .quote{ + text-align: center; + width: 80%; + font-size: 22px; + font-weight: 300; + line-height: 1.5; + margin-bottom: 20px; + padding: 0; +} + +.reviews .author{ + font-size: 18px; + margin-bottom: 50px; +} + +.reviews .author:last-child{ + margin-bottom: 0; +} + +@media (max-width: 1000px){ + + .reviews .quote{ + font-size: 20px; + } + + .reviews .author{ + font-size: 16px; + } + +} + + + +/*--------------------- + Contact Section +---------------------*/ + +.contact{ + background-color: #f7f7f7; +} + +.contact form{ + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + + max-width: 800px; + width: 80%; +} + +.contact form input{ + padding: 15px; + flex: 1; + margin-right: 30px; + font-size: 18px; + color: #555; +} + +.contact form .btn{ + padding: 18px 42px; +} + + +@media (max-width: 800px){ + + .contact form input{ + flex-basis: 100%; + margin: 0 0 20px 0; + } + +} + + + + +/*------------- + Footer +-------------*/ + +footer{ + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + color: #fff; + background-color: #414a4f; + padding: 60px 0; +} + +footer ul{ + display: flex; + margin-bottom: 25px; + font-size: 32px; +} + +footer ul li{ + margin: 0 8px; +} + +footer ul li:first-child{ + margin-left: 0; +} + +footer ul li:last-child{ + margin-right: 0; +} + +footer p{ + text-transform: uppercase; + font-size: 14px; + color: rgba(255,255,255,0.6); + margin-bottom: 10px; +} + +footer p a{ + color: #fff; +} + +@media (max-width: 700px){ + + footer{ + padding: 80px 15px; + } + +} + + +/* -- Demo ads -- */ + +@media (max-width: 1200px) { + #bsaHolder{ display:none;} +} diff --git a/assets/css/singlepage.css b/assets/css/singlepage.css new file mode 100644 index 0000000..f7045eb --- /dev/null +++ b/assets/css/singlepage.css @@ -0,0 +1,199 @@ +/* + */ + +body, +html { + width: 100%; + height: 100%; +} + +body,h1,h2,h3,h4,h5,h6 { + font-family: Roboto,Helvetica,Arial,sans-serif; + font-weight: 700; +} + +/* section tag */ +section { + +} + +.navbar { + background-color: white; + } + +.navbar-header div a , .navbar-nav > li > a { + color: black; + text-decoration: none; +} + +#intro { + height: 100%; + padding-top: 10%; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ + padding-bottom: 10%; + text-align: center; + /*background-image: url("../images/intro.jpg") no-repeat center center; + background-size: contain;*/ +} + + #intro, #intro h1, #intro h2, #intro h3, #intro h4, #intro p { + color: white; + } + + .intro-text { + position: relative; + padding-top: 20%; + padding-bottom: 20%; + } + + .intro-text > h1 { + margin: 0; + text-shadow: 5px 5px 5px rgba(0,0,0,0.6); + font-size: 6em; + } + + .intro-text > h2 { + text-shadow: 2px 2px 3px rgba(0,0,0,0.6); + font-size: 4em; + } + + .intro-text > h3 { + font-size: 2em; + } + + .intro-divider { + width: 400px; + border-top: 1px solid #f8f8f8; + border-bottom: 1px solid rgba(0,0,0,0.2); + } + + /*section class*/ + + .section { + padding: 50px 0; + border-top: 2px solid black; + } + + .section-heading { + margin-bottom: 30px; + } + + .section-heading-spacer { + float: left; + width: 200px; + border-top: 3px solid #e7e7e7; + } + + +.section-odd { + color: black; + background-color: white; +} + +.section-even { + color: white; + background-color: dimgrey; +} + + + + + + + + + +@media(max-width:767px) { + + #intro { + background-image: url(./imgs/intro-phone.jpg); + } + + .intro-text { + padding-bottom: 15%; + } + + .intro-text > h1 { + font-size: 3em; + } + + ul.intro-social-buttons > li { + display: block; + margin-bottom: 20px; + padding: 0; + } + + ul.intro-social-buttons > li:last-child { + margin-bottom: 0; + } + + .intro-divider { + width: 100%; + } +} + + + + +.contact { + padding: 100px 0; + color: #f8f8f8; + background: url(../img/intro.jpg) no-repeat center center; + background-size: cover; +} + +.contact h2 { + margin: 0; + text-shadow: 2px 2px 3px rgba(0,0,0,0.6); + font-size: 3em; +} + +.contact ul { + margin-bottom: 0; +} + +.contact-social-buttons { + float: right; + margin-top: 0; +} + +@media(max-width:1199px) { + ul.contact-social-buttons { + float: left; + margin-top: 15px; + } +} + +@media(max-width:767px) { + .contact h2 { + margin: 0; + text-shadow: 2px 2px 3px rgba(0,0,0,0.6); + font-size: 3em; + } + + ul.contact-social-buttons > li { + display: block; + margin-bottom: 20px; + padding: 0; + } + + ul.contact-social-buttons > li:last-child { + margin-bottom: 0; + } +} + +footer { + padding: 50px 0; + font-size: 1.1em; + background-color: slategray; + color: white; +} + +footer a, a:visited { + color: white; + text-decoration: none; +} + +footer a:hover { + color: black; + text-decoration: none; +} diff --git a/static/fonts/glyphicons-halflings-regular.eot b/assets/fonts/glyphicons-halflings-regular.eot similarity index 100% rename from static/fonts/glyphicons-halflings-regular.eot rename to assets/fonts/glyphicons-halflings-regular.eot diff --git a/static/fonts/glyphicons-halflings-regular.svg b/assets/fonts/glyphicons-halflings-regular.svg similarity index 100% rename from static/fonts/glyphicons-halflings-regular.svg rename to assets/fonts/glyphicons-halflings-regular.svg diff --git a/static/fonts/glyphicons-halflings-regular.ttf b/assets/fonts/glyphicons-halflings-regular.ttf similarity index 100% rename from static/fonts/glyphicons-halflings-regular.ttf rename to assets/fonts/glyphicons-halflings-regular.ttf diff --git a/static/fonts/glyphicons-halflings-regular.woff b/assets/fonts/glyphicons-halflings-regular.woff similarity index 100% rename from static/fonts/glyphicons-halflings-regular.woff rename to assets/fonts/glyphicons-halflings-regular.woff diff --git a/static/img/front-view.jpg b/assets/images/intro-phone.jpg similarity index 100% rename from static/img/front-view.jpg rename to assets/images/intro-phone.jpg diff --git a/assets/images/intro.jpg b/assets/images/intro.jpg new file mode 100644 index 0000000..3f864ba Binary files /dev/null and b/assets/images/intro.jpg differ diff --git a/assets/js/analytics.js b/assets/js/analytics.js new file mode 100644 index 0000000..88b5577 --- /dev/null +++ b/assets/js/analytics.js @@ -0,0 +1,15 @@ + (function (i, s, o, g, r, a, m) { + i['GoogleAnalyticsObject'] = r; + i[r] = i[r] || function () { + (i[r].q = i[r].q || []).push(arguments) + }, i[r].l = 1 * new + Date(); + a = s.createElement(o), + m = s.getElementsByTagName(o)[0]; + a.async = 1; + a.src = g; + m.parentNode.insertBefore(a, m) + })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); + + ga('create', '{{ .Site.Params.googleAnalytics }}', 'auto'); + ga('send', 'pageview'); diff --git a/assets/js/docready.js b/assets/js/docready.js new file mode 100644 index 0000000..91dca76 --- /dev/null +++ b/assets/js/docready.js @@ -0,0 +1,12 @@ +// requires jquery +$(document).ready(function () { + $("#media").lightGallery({ + thumbnail: true, + thumbWidth: 80, + controls: true, + loop: false, + download: true, + counter: true, + // videojs: true + }); +}); diff --git a/assets/js/navbar.js b/assets/js/navbar.js new file mode 100644 index 0000000..6fa3abd --- /dev/null +++ b/assets/js/navbar.js @@ -0,0 +1,12 @@ +(function () { + + var navButton = document.getElementById("nav-menu-button"), + navUl = document.getElementsByClassName("nav-ul"); + + function toggleMobileMenu() { + navUl[0].style.transition = "max-height 0.5s"; + navUl[0].classList.toggle("hide-ul"); + } + + navButton.onclick = toggleMobileMenu; +}()); diff --git a/assets/js/scroll.js b/assets/js/scroll.js new file mode 100644 index 0000000..58f3899 --- /dev/null +++ b/assets/js/scroll.js @@ -0,0 +1,13 @@ +// requires jquery +$('a[href*="#"]:not([href="#"])').click(function () { + if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { + var target = $(this.hash); + target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); + if (target.length) { + $('html, body').animate({ + scrollTop: target.offset().top + }, 1000); + return false; + } + } +}); diff --git a/config.toml b/config.toml index c7b05e8..4cdcca7 100644 --- a/config.toml +++ b/config.toml @@ -1,16 +1,51 @@ baseurl = "" -# theme = "landing-page-hugo" languageCode = "en-us" title = "For Sale: 4005 Rock Way, Central Point, OR" canonifyUrls = "true" +staticDir ="assets" +publishDir = "dist" [params] - city_state = "Central Point, Oregon" - address = "4005 Rock Way" - announce = "For Sale" - custom_css = ["css/local.css"] - navbar_text="For Sale by Owner" - intro_bg_img="front-view.jpg" + custom_css = ["css/custom.css"] + # font = "Pridi" # a valid google font name, default Roboto + +[params.navbar] + text = "For Sale by Owner" # default is to use the page title + font = "Baloo" + color = "green" + bg_color = "blue" + +[params.intro] + # img = "intro.jpg" + # img_medium = "intro-medium.jpg" # min 1024 + # img_small "intro-small.jpg" + # font = "Indie Flower" # a valid google font name, default Roboto + color = "purple" + headline = "For Sale" + # font_headline = "Lato" # a valid google font name, defaults to intro font + # color_headline = "red" + subheadline = "4005 Rock Way" + # color_subheadline = "red" + subsubheadline = "Central Point, Oregon" + # color_subsubheadline = "blue" + lines = ["A Rambler Style House","Close to Schools"] + # color_lines = "blue" + divider = false + + # for background image in static/imgs + # put intro.jpg and intro-phone.jpg for background images. + # intro-phone.jpg should be suitable for small devices + +# [params.sections] +# # font = "Lato" +# # font_headline = "Lato" +# [params.sections.odd] +# # color = "" +# # bg_color = "" +# [params.sections.even] +# # color = "" +# # bg_color = "" + [[params.social]] title = "email" diff --git a/content/photos.md b/content/photos.md index a36a850..3b48c83 100644 --- a/content/photos.md +++ b/content/photos.md @@ -4,4 +4,4 @@ title = "Photo Gallery" link_text = "Photos" weight = 2 +++ -Photo Show using shortcode +{{% gallery %}} diff --git a/layouts/index.html b/layouts/index.html index 93dcaa8..a7431ae 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,6 +1,5 @@ {{ partial "head.html" . }} {{ partial "navbar.html" . }} -{{ partial "intro.html" . }} +{{ partial "hero.html" . }} {{ partial "sections.html" . }} -{{ partial "contact.html" . }} {{ partial "footer.html" . }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 69f3709..d00f6ef 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -23,7 +23,7 @@ {{ end }} --> -
{{ .Title }}
+{{ .Title }}