From 95a7c08d2e0f4e7eb85b9b5a6c422b5ad483af3a Mon Sep 17 00:00:00 2001 From: David Kebler Date: Sat, 4 Mar 2017 20:02:56 -0800 Subject: [PATCH] fully working page -yea! --- assets/css/gallery/video-js.css | 5 - assets/css/gallery/viewer.css | 28 --- assets/css/navbar.css | 59 +---- assets/css/page.css | 220 ++++++------------ assets/css/singlepage.css | 199 ---------------- .../css/{gallery/style.css => thumbsup.css} | 0 assets/images/{intro.jpg => 4005front.jpg} | Bin assets/js/docready.js | 5 + assets/js/lorem.js | 141 +++++++++++ assets/js/navbar.js | 12 - assets/js/page.js | 38 +++ assets/js/scroll.js | 13 -- config.toml | 65 +++--- content/about.md | 6 +- content/details.md | 22 +- content/video.md | 5 +- layouts/partials/head/css.html | 9 +- layouts/partials/head/fonts.html | 5 +- layouts/partials/head/styles.html | 76 +++++- layouts/partials/hero.html | 9 +- layouts/partials/js.html | 10 +- layouts/partials/navbar.html | 5 +- layouts/partials/sections.html | 11 +- layouts/shortcodes/list.html | 10 + layouts/shortcodes/lorem.html | 8 +- layouts/shortcodes/params.html | 1 - layouts/shortcodes/youtube.html | 3 + 27 files changed, 427 insertions(+), 538 deletions(-) delete mode 100644 assets/css/gallery/video-js.css delete mode 100644 assets/css/gallery/viewer.css delete mode 100644 assets/css/singlepage.css rename assets/css/{gallery/style.css => thumbsup.css} (100%) rename assets/images/{intro.jpg => 4005front.jpg} (100%) create mode 100644 assets/js/lorem.js delete mode 100644 assets/js/navbar.js create mode 100644 assets/js/page.js delete mode 100644 assets/js/scroll.js create mode 100644 layouts/shortcodes/list.html delete mode 100755 layouts/shortcodes/params.html create mode 100644 layouts/shortcodes/youtube.html diff --git a/assets/css/gallery/video-js.css b/assets/css/gallery/video-js.css deleted file mode 100644 index 059f1e6..0000000 --- a/assets/css/gallery/video-js.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -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 deleted file mode 100644 index 562a353..0000000 --- a/assets/css/gallery/viewer.css +++ /dev/null @@ -1,28 +0,0 @@ -/* ------------------------------------ - 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 index f6eea9d..f5712a5 100644 --- a/assets/css/navbar.css +++ b/assets/css/navbar.css @@ -1,13 +1,3 @@ - -/*body, p, h1, h2, h3, h4, ul, li { - margin: 0; - padding: 0; -}*/ - -/*body { - max-height: 100vh; -}*/ - #nav-container > nav > ul { list-style-type: none; } @@ -16,7 +6,7 @@ #nav-background { position: fixed; top: 0; - z-index: 9000; + z-index: 1000; width: 100%; background-color: white; border-bottom: 1px solid #ddd; @@ -26,67 +16,42 @@ } #nav-container { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - max-width: 1000px; + max-width: 1200px; 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; + font-size: 1em; + font-weight: bold; } #nav-logo:hover { - color: #666; + /*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; + color: black; text-decoration: none; font-weight: 600; font-size: 1.2rem; - -webkit-transition: 200ms; transition: 200ms; } @@ -102,13 +67,9 @@ /* MOBILE MENU */ -@media screen and (max-width: 700px) { +@media screen and (max-width: 899px) { #nav-container { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; text-align: center; } @@ -121,10 +82,6 @@ .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; @@ -144,7 +101,7 @@ /* END MOBILE MENU */ /* DESKTOP MENU */ -@media screen and (min-width: 701px) { +@media screen and (min-width: 900px) { #nav-menu-button { display: none; diff --git a/assets/css/page.css b/assets/css/page.css index f282c7e..fc32e88 100644 --- a/assets/css/page.css +++ b/assets/css/page.css @@ -9,20 +9,27 @@ } html{ - font: normal 16px sans-serif; - color: #555; + font-family: 'Roboto', sans-serif; + font-size: 1em; + color: black; } ul, nav{ list-style: none; } +ul.grid{ + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + a{ text-decoration: none; color: inherit; cursor: pointer; - - opacity: 0.9; + opacity: 0.7; } a:hover{ @@ -38,201 +45,122 @@ a.btn{ text-align: center; } -hr{ - width: 150px; - height: 2px; - background-color: #2196F3; - border: 0; - margin-bottom: 80px; +hr { + margin: 4px auto 4px auto; + height:0px; + width:50%; + border-style: solid; + border-width : 2px; + border-top-color: white; + border-bottom-color: rgba(0,0,0,0.2); } -.divider { - width: 400px; - border-top: 1px solid #f8f8f8; - border-bottom: 1px solid rgba(0,0,0,0.2); -} +/*---------------- + Common Section Styling +----------------*/ section{ display: flex; flex-direction: column; align-items: center; - - padding: 125px 100px; + padding: 20px 50px; } -@media (max-width: 1000px){ - - section{ - padding: 100px 50px; - } - +.section-even { + color: white; + background-color: silver; } -@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 h1{ + font-size: 1.25em; } 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; -} +@media (min-width: 600px){ - -/*------------- - 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; + section{ + padding: 60px 60px; } - header h2{ - margin-bottom: 15px; + section h1{ + font-size: 2em; } + } -*/ +@media (min-width: 1000px){ + + section{ + padding: 80px 125px; + } + + section h1{ + font-size: 2.5em; + } + +} + + + + /*---------------- 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: url("../images/hero.jpg"); + background-size:cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; } -.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 .text { + text-align:center; + width:auto; + color:white; + font-weight: bold; + font-size: 1em; } -.hero .background-image:after{ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #414a4f; - opacity: 0.75; +/* #hero h1, #hero h2, #hero h3, #hero h4, #hero p { color:white; }*/ + +#hero h1{ + font-size: 5em; } -.hero h1{ - font: bold 60px 'Open Sans', sans-serif; - margin-bottom: 15px; +#hero h2{ + font-size: 3em; } -.hero h3{ - font: normal 28px 'Open Sans', sans-serif; - margin-bottom: 40px; +#hero h3{ + font-size: 2em; } -.hero a.btn{ +#hero a.btn{ padding: 20px 46px; } @media (max-width: 800px){ - .hero{ - min-height: 600px; - } - - .hero h1{ + #hero h1{ font-size: 48px; } - .hero h3{ + #hero h3{ font-size: 24px; } - .hero a.btn{ + #hero a.btn{ padding: 15px 40px; } } - /*-------------------- Our Work Section ---------------------*/ diff --git a/assets/css/singlepage.css b/assets/css/singlepage.css deleted file mode 100644 index f7045eb..0000000 --- a/assets/css/singlepage.css +++ /dev/null @@ -1,199 +0,0 @@ -/* - */ - -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/assets/css/gallery/style.css b/assets/css/thumbsup.css similarity index 100% rename from assets/css/gallery/style.css rename to assets/css/thumbsup.css diff --git a/assets/images/intro.jpg b/assets/images/4005front.jpg similarity index 100% rename from assets/images/intro.jpg rename to assets/images/4005front.jpg diff --git a/assets/js/docready.js b/assets/js/docready.js index 91dca76..fd2db34 100644 --- a/assets/js/docready.js +++ b/assets/js/docready.js @@ -9,4 +9,9 @@ $(document).ready(function () { counter: true, // videojs: true }); + hero() // size the hero section initially + // Resize event will run hero function. + $(window).resize(function () { + hero(); + }); }); diff --git a/assets/js/lorem.js b/assets/js/lorem.js new file mode 100644 index 0000000..39479c6 --- /dev/null +++ b/assets/js/lorem.js @@ -0,0 +1,141 @@ +var Lorem; +(function() { + + //Create a class named Lorem and constructor + Lorem = function() { + //Default values. + this.type = null; + this.query = null; + this.data = null; + }; + //Static variables + Lorem.IMAGE = 1; + Lorem.TEXT = 2; + Lorem.TYPE = { + PARAGRAPH: 1, + SENTENCE: 2, + WORD: 3 + }; + //Words to create lorem ipsum text. + Lorem.WORDS = [ + "lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "ut", "aliquam,", "purus", "sit", "amet", "luctus", "venenatis,", "lectus", "magna", "fringilla", "urna,", "porttitor", "rhoncus", "dolor", "purus", "non", "enim", "praesent", "elementum", "facilisis", "leo,", "vel", "fringilla", "est", "ullamcorper", "eget", "nulla", "facilisi", "etiam", "dignissim", "diam", "quis", "enim", "lobortis", "scelerisque", "fermentum", "dui", "faucibus", "in", "ornare", "quam", "viverra", "orci", "sagittis", "eu", "volutpat", "odio", "facilisis", "mauris", "sit", "amet", "massa", "vitae", "tortor", "condimentum", "lacinia", "quis", "vel", "eros", "donec", "ac", "odio", "tempor", "orci", "dapibus", "ultrices", "in", "iaculis", "nunc", "sed", "augue", "lacus,", "viverra", "vitae", "congue", "eu,", "consequat", "ac", "felis", "donec", "et", "odio", "pellentesque", "diam", "volutpat", "commodo", "sed", "egestas", "egestas", "fringilla", "phasellus", "faucibus", "scelerisque", "eleifend", "donec", "pretium", "vulputate", "sapien", "nec", "sagittis", "aliquam", "malesuada", "bibendum", "arcu", "vitae", "elementum", + "curabitur", "vitae", "nunc", "sed", "velit", "dignissim", "sodales", "ut", "eu", "sem", "integer", "vitae", "justo", "eget", "magna", "fermentum", "iaculis", "eu", "non", "diam", "phasellus", "vestibulum", "lorem", "sed", "risus", "ultricies", "tristique", "nulla", "aliquet", "enim", "tortor,", "at", "auctor", "urna", "nunc", "id", "cursus", "metus", "aliquam", "eleifend", "mi", "in", "nulla", "posuere", "sollicitudin", "aliquam", "ultrices", "sagittis", "orci,", "a", "scelerisque", "purus", "semper", "eget", "duis", "at", "tellus", "at", "urna", "condimentum", "mattis", "pellentesque", "id", "nibh", "tortor,", "id", "aliquet", "lectus", "proin", "nibh", "nisl,", "condimentum", "id", "venenatis", "a,", "condimentum", "vitae", "sapien", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "sed", "tempus,", "urna", "et", "pharetra", "pharetra,", "massa", "massa", "ultricies", "mi,", "quis", "hendrerit", "dolor", "magna", "eget", "est", "lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "integer", "eget", "aliquet", "nibh", "praesent", "tristique", "magna", "sit", "amet", "purus", "gravida", "quis", "blandit", "turpis", "cursus", "in", "hac", "habitasse", "platea", "dictumst", "quisque", "sagittis,", "purus", "sit", "amet", "volutpat", "consequat,", "mauris", "nunc", "congue", "nisi,", "vitae", "suscipit", "tellus", "mauris", "a", "diam", + "maecenas", "sed", "enim", "ut", "sem", "viverra", "aliquet", "eget", "sit", "amet", "tellus", "cras", "adipiscing", "enim", "eu", "turpis", "egestas", "pretium", "aenean", "pharetra,", "magna", "ac", "placerat", "vestibulum,", "lectus", "mauris", "ultrices", "eros,", "in", "cursus", "turpis", "massa", "tincidunt", "dui", "ut", "ornare", "lectus", "sit", "amet", "est", "placerat", "in", "egestas", "erat", "imperdiet", "sed", "euismod", "nisi", "porta", "lorem", "mollis", "aliquam", "ut", "porttitor", "leo", "a", "diam", "sollicitudin", "tempor", "id", "eu", "nisl", "nunc", "mi", "ipsum,", "faucibus", "vitae", "aliquet", "nec,", "ullamcorper", "sit", "amet", "risus", "nullam", "eget", "felis", "eget", "nunc", "lobortis", "mattis", "aliquam", "faucibus", "purus", "in", "massa", "tempor", "nec", "feugiat", "nisl", "pretium", "fusce", "id", "velit", "ut", "tortor", "pretium", "viverra", "suspendisse", "potenti", "nullam", "ac", "tortor", "vitae", "purus", "faucibus", "ornare", "suspendisse", "sed", "nisi", "lacus,", "sed", "viverra", "tellus", "in", "hac", "habitasse", "platea", "dictumst", "vestibulum", "rhoncus", "est", "pellentesque", "elit", "ullamcorper", "dignissim", "cras", "tincidunt", "lobortis", "feugiat", "vivamus", "at", "augue", "eget", "arcu", "dictum", "varius", "duis", "at", "consectetur", "lorem", + "donec", "massa", "sapien,", "faucibus", "et", "molestie", "ac,", "feugiat", "sed", "lectus", "vestibulum", "mattis", "ullamcorper", "velit", "sed", "ullamcorper", "morbi", "tincidunt", "ornare", "massa,", "eget", "egestas", "purus", "viverra", "accumsan", "in", "nisl", "nisi,", "scelerisque", "eu", "ultrices", "vitae,", "auctor", "eu", "augue", "ut", "lectus", "arcu,", "bibendum", "at", "varius", "vel,", "pharetra", "vel", "turpis", "nunc", "eget", "lorem", "dolor,", "sed", "viverra", "ipsum", "nunc", "aliquet", "bibendum", "enim,", "facilisis", "gravida", "neque", "convallis", "a", "cras", "semper", "auctor", "neque,", "vitae", "tempus", "quam", "pellentesque", "nec", "nam", "aliquam", "sem", "et", "tortor", "consequat", "id", "porta", "nibh", "venenatis", "cras", "sed", "felis", "eget", "velit", "aliquet", "sagittis", "id", "consectetur", "purus", "ut", "faucibus", "pulvinar", "elementum", "integer", "enim", "neque,", "volutpat", "ac", "tincidunt", "vitae,", "semper", "quis", "lectus", "nulla", "at", "volutpat", "diam", "ut", "venenatis", "tellus", "in", "metus", "vulputate", "eu", "scelerisque", "felis", "imperdiet", "proin", "fermentum", "leo", "vel", "orci", "porta", "non", "pulvinar", "neque", "laoreet", "suspendisse", "interdum", "consectetur", "libero,", "id", "faucibus", "nisl", "tincidunt", "eget", "nullam", "non", "nisi", "est,", "sit", "amet", "facilisis", "magna", + "etiam", "tempor,", "orci", "eu", "lobortis", "elementum,", "nibh", "tellus", "molestie", "nunc,", "non", "blandit", "massa", "enim", "nec", "dui", "nunc", "mattis", "enim", "ut", "tellus", "elementum", "sagittis", "vitae", "et", "leo", "duis", "ut", "diam", "quam", "nulla", "porttitor", "massa", "id", "neque", "aliquam", "vestibulum", "morbi", "blandit", "cursus", "risus,", "at", "ultrices", "mi", "tempus", "imperdiet", "nulla", "malesuada", "pellentesque", "elit", "eget", "gravida", "cum", "sociis", "natoque", "penatibus", "et", "magnis", "dis", "parturient", "montes,", "nascetur", "ridiculus", "mus", "mauris", "vitae", "ultricies", "leo", "integer", "malesuada", "nunc", "vel", "risus", "commodo", "viverra", "maecenas", "accumsan,", "lacus", "vel", "facilisis", "volutpat,", "est", "velit", "egestas", "dui,", "id", "ornare", "arcu", "odio", "ut", "sem", "nulla", "pharetra", "diam", "sit", "amet", "nisl", "suscipit", "adipiscing", "bibendum", "est", "ultricies", "integer", "quis", "auctor", "elit", + "sed", "vulputate", "mi", "sit", "amet", "mauris", "commodo", "quis", "imperdiet", "massa", "tincidunt", "nunc", "pulvinar", "sapien", "et", "ligula", "ullamcorper", "malesuada", "proin", "libero", "nunc,", "consequat", "interdum", "varius", "sit", "amet,", "mattis", "vulputate", "enim", "nulla", "aliquet", "porttitor", "lacus,", "luctus", "accumsan", "tortor", "posuere", "ac", "ut", "consequat", "semper", "viverra", "nam", "libero", "justo,", "laoreet", "sit", "amet", "cursus", "sit", "amet,", "dictum", "sit", "amet", "justo", "donec", "enim", "diam,", "vulputate", "ut", "pharetra", "sit", "amet,", "aliquam", "id", "diam", "maecenas", "ultricies", "mi", "eget", "mauris", "pharetra", "et", "ultrices", "neque", "ornare", "aenean", "euismod", "elementum", "nisi,", "quis", "eleifend", "quam", "adipiscing", "vitae", "proin", "sagittis,", "nisl", "rhoncus", "mattis", "rhoncus,", "urna", "neque", "viverra", "justo,", "nec", "ultrices", "dui", "sapien", "eget", "mi", "proin", "sed", "libero", "enim,", "sed", "faucibus", "turpis", "in", "eu", "mi", "bibendum", "neque", "egestas", "congue", "quisque", "egestas", "diam", "in", "arcu", "cursus", "euismod", "quis", "viverra", "nibh", "cras", "pulvinar", "mattis", "nunc,", "sed", "blandit", "libero", "volutpat", "sed", "cras", "ornare", "arcu", "dui", "vivamus", "arcu", "felis,", "bibendum", "ut", "tristique", "et,", "egestas", "quis", "ipsum", "suspendisse", "ultrices", "gravida", "dictum", + "fusce", "ut", "placerat", "orci", "nulla", "pellentesque", "dignissim", "enim,", "sit", "amet", "venenatis", "urna", "cursus", "eget", "nunc", "scelerisque", "viverra", "mauris,", "in", "aliquam", "sem", "fringilla", "ut", "morbi", "tincidunt", "augue", "interdum", "velit", "euismod", "in", "pellentesque", "massa", "placerat", "duis", "ultricies", "lacus", "sed", "turpis", "tincidunt", "id", "aliquet", "risus", "feugiat", "in", "ante", "metus,", "dictum", "at", "tempor", "commodo,", "ullamcorper", "a", "lacus", "vestibulum", "sed", "arcu", "non", "odio", "euismod", "lacinia", "at", "quis", "risus", "sed", "vulputate", "odio", "ut", "enim", "blandit", "volutpat", "maecenas", "volutpat", "blandit", "aliquam", "etiam", "erat", "velit,", "scelerisque", "in", "dictum", "non,", "consectetur", "a", "erat", "nam", "at", "lectus", "urna", "duis", "convallis", "convallis", "tellus,", "id", "interdum", "velit", "laoreet", "id", "donec", "ultrices", "tincidunt", "arcu,", "non", "sodales", "neque", "sodales", "ut", "etiam", "sit", "amet", "nisl", "purus,", "in", "mollis", "nunc", + "sed", "id", "semper", "risus", "in", "hendrerit", "gravida", "rutrum", "quisque", "non", "tellus", "orci,", "ac", "auctor", "augue", "mauris", "augue", "neque,", "gravida", "in", "fermentum", "et,", "sollicitudin", "ac", "orci", "phasellus", "egestas", "tellus", "rutrum", "tellus", "pellentesque", "eu", "tincidunt", "tortor", "aliquam", "nulla", "facilisi", "cras", "fermentum,", "odio", "eu", "feugiat", "pretium,", "nibh", "ipsum", "consequat", "nisl,", "vel", "pretium", "lectus", "quam", "id", "leo", "in", "vitae", "turpis", "massa", "sed", "elementum", "tempus", "egestas", "sed", "sed", "risus", "pretium", "quam", "vulputate", "dignissim", "suspendisse", "in", "est", "ante", "in", "nibh", "mauris,", "cursus", "mattis", "molestie", "a,", "iaculis", "at", "erat", + "pellentesque", "adipiscing", "commodo", "elit,", "at", "imperdiet", "dui", "accumsan", "sit", "amet", "nulla", "facilisi", "morbi", "tempus", "iaculis", "urna,", "id", "volutpat", "lacus", "laoreet", "non", "curabitur", "gravida", "arcu", "ac", "tortor", "dignissim", "convallis", "aenean", "et", "tortor", "at", "risus", "viverra", "adipiscing", "at", "in", "tellus", "integer", "feugiat", "scelerisque", "varius", "morbi", "enim", "nunc,", "faucibus", "a", "pellentesque", "sit", "amet,", "porttitor", "eget", "dolor", "morbi", "non", "arcu", "risus,", "quis", "varius", "quam", "quisque", "id", "diam", "vel", "quam", "elementum", "pulvinar", "etiam", "non", "quam", "lacus", "suspendisse", "faucibus", "interdum", "posuere", "lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "duis", "tristique", "sollicitudin", "nibh", "sit", "amet", "commodo", "nulla", "facilisi", + "nullam", "vehicula", "ipsum", "a", "arcu", "cursus", "vitae", "congue", "mauris", "rhoncus", "aenean", "vel", "elit", "scelerisque", "mauris", "pellentesque", "pulvinar", "pellentesque", "habitant", "morbi", "tristique", "senectus", "et", "netus", "et", "malesuada", "fames", "ac", "turpis", "egestas", "maecenas", "pharetra", "convallis", "posuere", "morbi", "leo", "urna,", "molestie", "at", "elementum", "eu,", "facilisis", "sed", "odio", "morbi", "quis", "commodo", "odio", "aenean", "sed", "adipiscing", "diam", "donec", "adipiscing", "tristique", "risus", "nec", "feugiat", "in", "fermentum", "posuere", "urna", "nec", "tincidunt", "praesent", "semper", "feugiat", "nibh", "sed", "pulvinar", "proin", "gravida", "hendrerit", "lectus", "a", "molestie" + ]; + //random integer method. + Lorem.prototype.randomInt = function (min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + }; + //text creator method with parameters: how many, what + Lorem.prototype.createText = function(count, type) { + switch (type) { + //paragraphs are loads of sentences. + case Lorem.TYPE.PARAGRAPH: + var paragraphs = new Array; + for (var i = 0; i < count; i++) { + var paragraphLength = this.randomInt(10, 20); + var paragraph = this.createText(paragraphLength, Lorem.TYPE.SENTENCE); + paragraphs.push('

'+paragraph+'

'); + } + return paragraphs.join('\n'); + break; + //sentences are loads of words. + case Lorem.TYPE.SENTENCE: + var sentences = new Array; + for (var i = 0; i < count; i++) { + var sentenceLength = this.randomInt(5, 10); + var words = this.createText(sentenceLength, Lorem.TYPE.WORD).split(' '); + words[0] = words[0].substr(0, 1).toUpperCase() + words[0].substr(1); + var sentence = words.join(' '); + + sentences.push(sentence); + } + return (sentences.join('. ') + '.').replace(/(\.\,|\,\.)/g, '.'); + break; + //words are words + case Lorem.TYPE.WORD: + var wordIndex = this.randomInt(0, Lorem.WORDS.length - count - 1); + + return Lorem.WORDS.slice(wordIndex, wordIndex + count).join(' ').replace(/\.|\,/g, ''); + break; + } + }; + Lorem.prototype.createLorem = function(element) { + + var lorem = new Array; + var count; + + if (/\d+-\d+[psw]/.test(this.query)){ + var range = this.query.replace(/[a-z]/,'').split("-"); + count = Math.floor(Math.random() * parseInt(range[1])) + parseInt(range[0]); + }else{ + count = parseInt(this.query); + } + + if (/\d+p/.test(this.query)) { + var type = Lorem.TYPE.PARAGRAPH; + } + else if (/\d+s/.test(this.query)) { + var type = Lorem.TYPE.SENTENCE; + } + else if (/\d+w/.test(this.query)) { + var type = Lorem.TYPE.WORD; + } + + lorem.push(this.createText(count, type)); + lorem = lorem.join(' '); + + if (element) { + if (this.type == Lorem.TEXT) + element.innerHTML += lorem; + else if (this.type == Lorem.IMAGE) { + //TODO: for now, using lorempixum. + var path = ''; + var options = this.query.split(' '); + if (options[0] == 'gray') { + path += '/g'; + options[0] = ''; + } + if (element.getAttribute('width')) + path += '/' + element.getAttribute('width'); + + if (element.getAttribute('height')) + path += '/' + element.getAttribute('height'); + + path += '/' + options.join(' ').replace(/(^\s+|\s+$)/, ''); + element.src = 'http://lorempixum.com'+path.replace(/\/\//, '/'); + } + } + + if (element == null) + return lorem; + }; + + //Register as jQuery + if (typeof jQuery != 'undefined') { + (function($) { + $.fn.lorem = function() { + $(this).each(function() { + var lorem = new Lorem; + lorem.type = $(this).is('img') ? Lorem.IMAGE : Lorem.TEXT; + //data-lorem can be taken with data function (thanks to http://forrst.com/people/webking) + lorem.query = $(this).data('lorem'); + lorem.createLorem(this); + }) + }; + + //If developer run this javascript, then we can run the lorem.js + $(document).ready(function() { + $('[data-lorem]').lorem(); + }); + })(jQuery); + } + +})(); \ No newline at end of file diff --git a/assets/js/navbar.js b/assets/js/navbar.js deleted file mode 100644 index 6fa3abd..0000000 --- a/assets/js/navbar.js +++ /dev/null @@ -1,12 +0,0 @@ -(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/page.js b/assets/js/page.js new file mode 100644 index 0000000..7d20b43 --- /dev/null +++ b/assets/js/page.js @@ -0,0 +1,38 @@ +// hero resizer +function hero() { + jQuery('#hero').css({ + width: jQuery(window).width(), + height: jQuery(window).height() + }); +} + +// Smooth Scroll Register click handler for ID anchors +$('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; + } + } +}); + +// navbar - preload +(function navbar() { + + // var navButton = document.getElementById("nav-menu-button"), + // var navButton = document.getElementById("nav-container"), + // navUl = document.getElementsByClassName("nav-ul"); + + function toggleMobileMenu() { + $('.nav-ul')[0].style.transition = "max-height 0.5s"; + $('.nav-ul')[0].classList.toggle("hide-ul"); + } + // navLink.onclick = toggleMobileMenu; + // navButton.onclick = toggleMobileMenu; + $('#nav-menu-button, nav a').click(toggleMobileMenu) + +}()); diff --git a/assets/js/scroll.js b/assets/js/scroll.js deleted file mode 100644 index 58f3899..0000000 --- a/assets/js/scroll.js +++ /dev/null @@ -1,13 +0,0 @@ -// 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 4cdcca7..dc112c7 100644 --- a/config.toml +++ b/config.toml @@ -1,4 +1,4 @@ -baseurl = "" +baseurl = "4005.kebler.net" languageCode = "en-us" title = "For Sale: 4005 Rock Way, Central Point, OR" canonifyUrls = "true" @@ -7,44 +7,51 @@ publishDir = "dist" [params] custom_css = ["css/custom.css"] - # font = "Pridi" # a valid google font name, default Roboto + font = "Baloo" # a valid google font name, default Roboto + +# For List of html colors +# http://www.quackit.com/css/color/charts/css_color_names_chart.cfm [params.navbar] - text = "For Sale by Owner" # default is to use the page title - font = "Baloo" - color = "green" - bg_color = "blue" + # text = "For Sale By Owner: 4005 Rock Way" # default is to use the page title + text_size="1" # unit is em, 1em is default + # font = "Ranga" + color = "white" + bg_color = "seagreen" -[params.intro] - # img = "intro.jpg" +[params.hero] + img = "../images/4005front.jpg" # default is images/hero.jpg, must provide the full path or url # img_medium = "intro-medium.jpg" # min 1024 # img_small "intro-small.jpg" - # font = "Indie Flower" # a valid google font name, default Roboto - color = "purple" + font = "Acme" # a valid google font name, default Roboto for all hero text + # color = "green" + # font_headline = "Gloria Hallelujah" # a valid google font name, defaults to intro font headline = "For Sale" - # font_headline = "Lato" # a valid google font name, defaults to intro font - # color_headline = "red" + headline_color = "red" + # headline_size = "10" subheadline = "4005 Rock Way" - # color_subheadline = "red" + # subheadline_color = "pink" + # subheadline_size = "1" subsubheadline = "Central Point, Oregon" - # color_subsubheadline = "blue" + # subsubheadline_color = "brown" + # subsubheadline_size = "1" lines = ["A Rambler Style House","Close to Schools"] - # color_lines = "blue" - divider = false + # lines_color = "purple" + lines_size = "1.5" + divider = true + divider_color = "seagreen" + # divider_thickness = "3" - # 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.sections] + font = "Lato" + headline_font = "Lato" + headline_size = "3" + [params.sections.odd] + # color = "" + # bg_color = "" + [params.sections.even] + # color = "" + # bg_color = "" [[params.social]] diff --git a/content/about.md b/content/about.md index aa1923f..c4a00f8 100644 --- a/content/about.md +++ b/content/about.md @@ -6,4 +6,8 @@ title = "About This House" link_text = "About" anchor="about" +++ -This House was Built in 1977 +{{% lorem 1s %}} +{{% lorem 1s %}} +{{% lorem 1s %}} +{{% lorem 1s %}} +{{% lorem 1s %}} diff --git a/content/details.md b/content/details.md index 21c3c6b..eb97da9 100644 --- a/content/details.md +++ b/content/details.md @@ -5,21 +5,7 @@ title = "Details" link_text = "Details" weight = 4 +++ -* Item 1 -* Item 2 -* Item 3 -* Item 1 -* Item 2 -* Item 3 -* Item 1 -* Item 2 -* Item 3 -* Item 1 -* Item 2 -* Item 3 -* Item 1 -* Item 2 -* Item 3 -* Item 1 -* Item 2 -* Item 3 +* Man Cave +* Shop +* Shed +* Hot Tub diff --git a/content/video.md b/content/video.md index 50b7d71..57457fb 100644 --- a/content/video.md +++ b/content/video.md @@ -1,6 +1,7 @@ +++ draft = false -title = "Video" +title = "Video Walk Through" weight = 3 +link_text = "Video" +++ -video player here shortcode +{{% youtube ZhF0fkGRgSo %}} diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html index 4a55f76..9b71d66 100644 --- a/layouts/partials/head/css.html +++ b/layouts/partials/head/css.html @@ -1,6 +1,7 @@ - + + @@ -8,11 +9,11 @@ - - {{ partial "head/styles.html" . }} + + - {{ partial "head/gallery.html" . }} + {{ partial "head/styles.html" . }} {{ range .Site.Params.custom_css }} diff --git a/layouts/partials/head/fonts.html b/layouts/partials/head/fonts.html index d6efa4f..7101c18 100644 --- a/layouts/partials/head/fonts.html +++ b/layouts/partials/head/fonts.html @@ -10,16 +10,15 @@ {{ end }} - {{ with .navbar.font }} {{ end }} - {{ with .intro.font }} + {{ with .hero.font }} {{ end }} - {{ with .intro.font_headline }} + {{ with .hero.font_headline }} {{ end }} diff --git a/layouts/partials/head/styles.html b/layouts/partials/head/styles.html index cb53051..57b0c8d 100644 --- a/layouts/partials/head/styles.html +++ b/layouts/partials/head/styles.html @@ -1,7 +1,7 @@ diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html index 8fb4c1c..3f81cac 100644 --- a/layouts/partials/hero.html +++ b/layouts/partials/hero.html @@ -1,12 +1,13 @@ -
-
- {{ with .Site.Params.intro }} +
+
+ {{ with .Site.Params.hero }} {{ with .headline }}

{{ . }}

{{ end }} {{ with .subheadline }}

{{ . }}

{{ end }} {{ with .subsubheadline }}

{{ . }}

{{ end }} - {{ with .divider }}
{{ end }} + {{ with .divider }}
{{ end }} {{ range .lines }}

{{ . }}

{{ end }} {{ end }} +
diff --git a/layouts/partials/js.html b/layouts/partials/js.html index 3440cf1..b5b243e 100644 --- a/layouts/partials/js.html +++ b/layouts/partials/js.html @@ -4,15 +4,15 @@ - - - - - + + {{ if isset .Site.Params "googleAnalytics" }} {{ end }} + + + diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index d35a0df..59b0411 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -2,9 +2,8 @@