diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/README.md b/README.md index a30dd7e..750095c 100644 --- a/README.md +++ b/README.md @@ -4,161 +4,111 @@ My circular fly-out CSS navigation menu component, built with CSS3. [View the de ![Circle fly out menu](css-circle-menu-featured.png) -## Component Configuration & Compilation +## Usage -The component makes heavy use of Sass, and also some Compass math helper functions. Sass is compiled via Gulp, and using Sass makes the component easily configurable. The menu items fly out along a quarter-circle with a given spread radius, so basic trigonometry and polar-to-cartesian math make calculating positions much easier, hence the use of Compass helpers. The general workflow for the compilation of the CSS is this: - -1. Ruby Sass with Compass gets used via Gulp for pre-processing and helper functions. -2. Compiled CSS gets auto-prefixed via the Gulp autoprefixer post-processor module. -3. Re-compiled CSS gets saved, and a separate minified version also gets saved. - -## Component Customisation - -Using the Gulp workflow is hugely beneficial, because it makes the component much easier to work with and customise. If you're not using Gulp to compile the Sass, you will still need to leverage Compass to make use of the math helper functions. The following 11 variables are configurable in the Sass up front, and their defaults are written out for you to look at: - -```scss -// $nav-item-radius: 48px; [1] -// $num-items: 5; [2] -// $nav-theme-color: rgb(255, 40, 60); [3] -// $spread-radius: 144px; [4] -// $delay-increment: 0.1s; [5] -// $nav-position: "bottom-right"; [6] -// $mq-height: 480px; [7] -// $mq-width: 480px; [8] -// $button-bar-height: 4px; [9] -// $button-bar-spacing: 4px; [10] -// $button-lr-padding: 10px; [11] -``` - -You can edit these as you see fit. Here's the breakdown of these 11 configuration options: - -1. Set up the initial navigation item radius. -2. Decalare how many items our nav will contain. -3. Set up a theme colour. -4. The spread radius, which is how far the nav items spread from the origin. -5. The delay increment, which is how much delay there is between each nav item leaving from / returning to the origin. -6. The position of the nav, chosen from one of four values: - 1. `bottom-right` - bottom right corner (this is the default) - 2. `bottom-left` - bottom left corner - 3. `top-left` - top left corner - 4. `top-right` - top right corner -7. Minimum height at which nav increases size. -8. Minimum width at which nav increases size. -9. The height of a bar in the toggle button. -10. The spacing between bars in the toggle button. -11. The padding between the left and right of the toggle button container and the bars. - -Other variables will have to be customised further down in the Sass with your own discretion. - -## Example Markup - -You'll have to markup the menu like this: +To use, include the CSS and JavaScript in your app. Markup your menu like this: ```html - ``` -Be sure to change up the Sass variable that defines the number of navigation items. - -## Activation With JavaScript - -A simple click event is used to activate the menu. This is handled via JavaScript, and just runs a simple check for the existence of an `is-active` class on the elements. A mask is also created via JavaScript, and faded in and out over the content depending on whether the menu is active or not. Here's the JavaScript: - -```javascript -(function() { - - "use strict"; - - /** - * Cache variables - */ - var menu = document.querySelector("#c-circle-nav"); - var toggle = document.querySelector("#c-circle-nav__toggle"); - var mask = document.createElement("div"); - var activeClass = "is-active"; - - /** - * Create mask - */ - mask.classList.add("c-mask"); - document.body.appendChild(mask); - - /** - * Listen for clicks on the toggle - */ - toggle.addEventListener("click", function(e) { - e.preventDefault(); - toggle.classList.contains(activeClass) ? deactivateMenu() : activateMenu(); - }); - - /** - * Listen for clicks on the mask, which should close the menu - */ - mask.addEventListener("click", function() { - deactivateMenu(); - console.log('click'); - }); - - /** - * Activate the menu - */ - function activateMenu() { - menu.classList.add(activeClass); - toggle.classList.add(activeClass); - mask.classList.add(activeClass); - } - - /** - * Deactivate the menu - */ - function deactivateMenu() { - menu.classList.remove(activeClass); - toggle.classList.remove(activeClass); - mask.classList.remove(activeClass); - } - -})(); +Then, include your script like this: + +```html + +``` + +Finally, you can initialize the menu like this: + +```html + ``` -The styles for the mask are already included in the Sass, so we're only interested in creating it and appending it to the body. I'm also using the modern `classList` function for class checking, adding, and removing, so if older browsers are on your radar, you'll have to work with some kind of fallback. +The default number of menu items is 5. To use a different number of items, you'll have to [configure and build with Sass and Gulp.](#configuring-and-building-with-sass-and-gulp) -## Using Out Of The Box +### Out of the box usage -If you're not using Gulp and Sass, fear not. You can get the compiled CSS in the `css/` directory, and use it out of the box. By default, it's positioned in the bottom right corner, and has a theme colour of pink. You can customise values here, but certain things like the positioning will be difficult, as they are calculated via trigonometric functions directly in Sass via Compass helpers. Changing the number of menu items will also be difficult, as item position is directly related to the number of items. Nonetheless, you'll be able to tweak colours and positioning fairly easily to suit your needs. +You can use this component out of the box by downloading the uncompressed or compressed files from the `css/` directory. -## Use As A Bower Package +### Use as a Bower component The component is available as a bower package, and you can import it by running the following command: -```bash +``` bower install css-circle-menu ``` -The required JavaScript and Sass files are included in the bower package too. +## Configuring and Building with Sass and Gulp + +The component is built with Sass (SCSS) and uses a JavaScript module as well to handle events. Everything gets compiled and built with Gulp. To develop and compile from gulp, just run: + +``` +npm install +gulp +``` + +To watch files during development, run + +``` +gulp watch +``` + +Using the Gulp workflow is hugely beneficial, because it makes the component much easier to work with and customise. If you're not using Gulp to compile the Sass, you will still need to leverage Compass to make use of the math helper functions. The following 11 variables are configurable in the Sass up front, and their defaults are written out for you to look at: + +```scss +// $menu-item-radius: 48px; [1] +// $num-items: 5; [2] +// $menu-theme-color: rgb(255, 40, 60); [3] +// $spread-radius: 144px; [4] +// $delay-increment: 0.1s; [5] +// $menu-position: "bottom-right"; [6] +// $mq-height: 480px; [7] +// $mq-width: 480px; [8] +// $button-bar-height: 4px; [9] +// $button-bar-spacing: 4px; [10] +// $button-lr-padding: 10px; [11] +``` -## Resources Used +You can edit these as you see fit. Here's the breakdown of these 11 configuration options: -The following resources were leveraged in the making of this component: +1. Set up the initial menu item radius. +2. Decalare how many items our menu will contain. +3. Set up a theme colour. +4. The spread radius, which is how far the menu items spread from the origin. +5. The delay increment, which is how much delay there is between each menu + item leaving from / returning to the origin. +6. The position of the menu, chosen from one of four values: + `bottom-right` - bottom right corner (this is the default) + `bottom-left` - bottom left corner + `top-left` - top left corner + `top-right` - top right corner +7. Minimum height at which menu increases size. +8. Minimum width at which menu increases size. +9. The height of a bar in the toggle button. +10. The spacing between bars in the toggle button. +11. The padding between the left and right of the toggle button container and + the bars. -* [GulpJS](http://gulpjs.com) for task running -* [Sass](http://sass-lang.com/) & [Compass](http://compass-style.org/) for CSS pre-processing and helper functions -* My [CSS animating hamburger icons component](http://callmenick.com/_development/css-hamburger-menu-icons/) for the CSS-only toggle icon -* [Fontawesome](http://fortawesome.github.io/Font-Awesome/) for some nice aesthetics +Other variables will have to be customised further down in the Sass with your own discretion. Be sure to change up the Sass variable that defines the number of navigation items. ## License & Copyright Licensed under the [MIT license.](http://www.opensource.org/licenses/mit-license.php) -Copyright 2014, [Call Me Nick.](http://callmenick.com) \ No newline at end of file +Copyright 2016, [Call Me Nick.](http://callmenick.com) diff --git a/bower.json b/bower.json index 76b07f5..280ba8f 100644 --- a/bower.json +++ b/bower.json @@ -1,32 +1,21 @@ { "name": "css-circle-menu", - "version": "1.0.1", + "version": "2.0.0", "homepage": "https://github.com/callmenick/CSS-Circle-Menu", "authors": [ "Nick Salloum " ], "description": "Circular fly-out navigation menu with CSS", - "main": "css/circle-nav.css", + "main": "gulpfile.js", "ignore": [ - "css/common.css", - "css/common.min.css", - "css/font-awesome.css", - "css/font-awesome.min.css", - "fonts", - "js/src", - "js/dist/carbonad.js", - "js/dist/githubicons.js", - "sass/_variables.scss", - "sass/common.scss", - "node_modules", - "bower_components", - ".gitignore", - "bower.json", - "css-circle-menu-featured.png", - "gulpfile.js", - "index.html", - "package.json", - "README.md" + "*", + "!css/circle-menu.css", + "!css/circle-menu.min.css", + "!gulpfile.js", + "!js/src/circleMenu.js", + "!js/dist/circleMenu.min.js", + "!sass/circle-menu.scss", + "!sass/_circle-menu-helpers.scss" ], "keywords": [ "CSS", diff --git a/css/circle-menu.css b/css/circle-menu.css index 491ef07..bd9d5e8 100644 --- a/css/circle-menu.css +++ b/css/circle-menu.css @@ -1,32 +1,32 @@ /* ----------------------------------------------------------------------------- - CIRCLE NAV COMPONENT + Circle Menu Component ----------------------------------------------------------------------------- */ /** - * This is the actual nav component. It consists of a nav element with an - * unordered list inside, and also a button to toggle the actual navigation. + * This is the actual menu component. It consists of a menu element with an + * unordered list inside, and also a button to toggle the actual menu. * It's fixed to the bottom-right of the screen, and each of the items are - * positioned absolutely inside the parent nav tag. The default set up above is - * 5 navigation items. Because all the transforms and such are calculated wrt + * positioned absolutely inside the parent menu tag. The default set up above is + * 5 menu items. Because all the transforms and such are calculated wrt * this number, you'll need to edit it accordingly depending on how many items * you decide to put in the markup. - * + * * Example markup: * - * + * */ -.c-circle-nav { +.c-circle-menu { position: fixed; bottom: 12px; right: 12px; @@ -35,24 +35,25 @@ height: 48px; border-radius: 24px; } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav { + .c-circle-menu { width: 96px; height: 96px; border-radius: 48px; } } -.c-circle-nav__items { +.c-circle-menu__items { display: block; list-style: none; position: absolute; - z-index: 90; + z-index: 2; margin: 0; padding: 0; } -.c-circle-nav__item { +.c-circle-menu__item { display: block; position: absolute; top: 0; @@ -61,15 +62,18 @@ height: 48px; border-radius: 24px; opacity: 0; - -webkit-transition-property: -webkit-transform, opacity; - transition-property: transform, opacity; + -webkit-transition: opacity, -webkit-transform; + transition: opacity, -webkit-transform; + transition: transform, opacity; + transition: transform, opacity, -webkit-transform; -webkit-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-timing-function: cubic-bezier(0.35, -0.59, 0.47, 0.97); transition-timing-function: cubic-bezier(0.35, -0.59, 0.47, 0.97); } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav__item { + .c-circle-menu__item { width: 96px; height: 96px; border-radius: 48px; @@ -79,114 +83,109 @@ /** * Transisition delays at the default state. */ -.c-circle-nav__item:nth-child(1) { +.c-circle-menu__item:nth-child(1) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } -.c-circle-nav__item:nth-child(2) { +.c-circle-menu__item:nth-child(2) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } -.c-circle-nav__item:nth-child(3) { +.c-circle-menu__item:nth-child(3) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } -.c-circle-nav__item:nth-child(4) { +.c-circle-menu__item:nth-child(4) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } -.c-circle-nav__item:nth-child(5) { +.c-circle-menu__item:nth-child(5) { -webkit-transition-delay: 0s; transition-delay: 0s; } /** - * We're using the .is-active class, which is added to the nav via JavaScript. - * Once the nav is active, the items inherit the properties below. We will + * We're using the .is-active class, which is added to the menu via JavaScript. + * Once the menu is active, the items inherit the properties below. We will * manually write out the transform properties for first and last items, as we * already know their position. For all items in between though, we'll use some * polar-to-cartesian math and some Sass functions to get the positioning. */ -.c-circle-nav.is-active .c-circle-nav__item { +.c-circle-menu.is-active .c-circle-menu__item { -webkit-transition-timing-function: cubic-bezier(0.35, 0.03, 0.47, 1.59); transition-timing-function: cubic-bezier(0.35, 0.03, 0.47, 1.59); } -.c-circle-nav.is-active .c-circle-nav__item:nth-child(1) { +.c-circle-menu.is-active .c-circle-menu__item:nth-child(1) { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate(-144px, 0); - -ms-transform: translate(-144px, 0); transform: translate(-144px, 0); } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav.is-active .c-circle-nav__item:nth-child(1) { + .c-circle-menu.is-active .c-circle-menu__item:nth-child(1) { -webkit-transform: translate(-288px, 0); - -ms-transform: translate(-288px, 0); transform: translate(-288px, 0); } } -.c-circle-nav.is-active .c-circle-nav__item:nth-child(2) { +.c-circle-menu.is-active .c-circle-menu__item:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transform: translate(-134px, -56px); - -ms-transform: translate(-134px, -56px); transform: translate(-134px, -56px); } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav.is-active .c-circle-nav__item:nth-child(2) { + .c-circle-menu.is-active .c-circle-menu__item:nth-child(2) { -webkit-transform: translate(-267px, -111px); - -ms-transform: translate(-267px, -111px); transform: translate(-267px, -111px); } } -.c-circle-nav.is-active .c-circle-nav__item:nth-child(3) { +.c-circle-menu.is-active .c-circle-menu__item:nth-child(3) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: translate(-102px, -102px); - -ms-transform: translate(-102px, -102px); transform: translate(-102px, -102px); } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav.is-active .c-circle-nav__item:nth-child(3) { + .c-circle-menu.is-active .c-circle-menu__item:nth-child(3) { -webkit-transform: translate(-204px, -204px); - -ms-transform: translate(-204px, -204px); transform: translate(-204px, -204px); } } -.c-circle-nav.is-active .c-circle-nav__item:nth-child(4) { +.c-circle-menu.is-active .c-circle-menu__item:nth-child(4) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transform: translate(-56px, -134px); - -ms-transform: translate(-56px, -134px); transform: translate(-56px, -134px); } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav.is-active .c-circle-nav__item:nth-child(4) { + .c-circle-menu.is-active .c-circle-menu__item:nth-child(4) { -webkit-transform: translate(-111px, -267px); - -ms-transform: translate(-111px, -267px); transform: translate(-111px, -267px); } } -.c-circle-nav.is-active .c-circle-nav__item:nth-child(5) { +.c-circle-menu.is-active .c-circle-menu__item:nth-child(5) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: translate(0, -144px); - -ms-transform: translate(0, -144px); transform: translate(0, -144px); } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav.is-active .c-circle-nav__item:nth-child(5) { + .c-circle-menu.is-active .c-circle-menu__item:nth-child(5) { -webkit-transform: translate(0, -288px); - -ms-transform: translate(0, -288px); transform: translate(0, -288px); } } @@ -195,7 +194,7 @@ * Apart from the transform properties, we'll also make sure the items get * the correct opacity. */ -.c-circle-nav.is-active .c-circle-nav__item { +.c-circle-menu.is-active .c-circle-menu__item { opacity: 1; } @@ -204,32 +203,33 @@ * you'll probably want to change up the icons to match your needs. In any case, * we'll do it here for the sake of completion. */ -.c-circle-nav__link { +.c-circle-menu__link { display: block; width: 100%; height: 100%; border-radius: 24px; box-shadow: inset 0 0 0 2px #fff; } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav__link { + .c-circle-menu__link { border-radius: 48px; } } -.c-circle-nav__link img { +.c-circle-menu__link img { display: block; max-width: 100%; height: auto; } -.c-circle-nav__link:hover { +.c-circle-menu__link:hover { box-shadow: inset 0 0 0 2px #ff283c; } /* ----------------------------------------------------------------------------- - THE TOGGLE COMPONENT + The Toggle Component ----------------------------------------------------------------------------- */ /** @@ -238,7 +238,7 @@ * CSS animating hamburger menu icons demo, which can be found at this url: * https://github.com/callmenick/Animating-Hamburger-Icons */ -.c-circle-nav__toggle { +.c-circle-menu__toggle { display: block; position: absolute; z-index: 100; @@ -252,7 +252,7 @@ text-indent: -9999px; border-radius: 24px; -webkit-transition: background 0.3s; - transition: background 0.3s; + transition: background 0.3s; /* reset some browser defaults */ cursor: pointer; border: none; @@ -261,56 +261,59 @@ appearance: none; box-shadow: none; } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav__toggle { + .c-circle-menu__toggle { width: 96px; height: 96px; border-radius: 48px; } } -.c-circle-nav__toggle:hover, -.c-circle-nav__toggle:focus, -.c-circle-nav__toggle.is-active { +.c-circle-menu__toggle:hover, +.c-circle-menu__toggle:focus, +.c-circle-menu__toggle.is-active { outline: none; background-color: #c10012; } -.c-circle-nav__toggle span, -.c-circle-nav__toggle span::before, -.c-circle-nav__toggle span::after { +.c-circle-menu__toggle span, +.c-circle-menu__toggle span::before, +.c-circle-menu__toggle span::after { display: block; position: absolute; height: 4px; background: #fff; border-radius: 1px; } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav__toggle span, - .c-circle-nav__toggle span::before, - .c-circle-nav__toggle span::after { + .c-circle-menu__toggle span, + .c-circle-menu__toggle span::before, + .c-circle-menu__toggle span::after { height: 8px; border-radius: 2px; } } -.c-circle-nav__toggle span { +.c-circle-menu__toggle span { top: 22px; left: 10px; right: 10px; -webkit-transition: background 0.3s; - transition: background 0.3s; + transition: background 0.3s; } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav__toggle span { + .c-circle-menu__toggle span { top: 44px; left: 20px; right: 20px; } } -.c-circle-nav__toggle span::before, -.c-circle-nav__toggle span::after { +.c-circle-menu__toggle span::before, +.c-circle-menu__toggle span::after { left: 0; width: 100%; content: ""; @@ -320,46 +323,50 @@ transition-delay: 0.3s, 0s; } -.c-circle-nav__toggle span::before { +.c-circle-menu__toggle span::before { top: -8px; -webkit-transition-property: top, -webkit-transform; - transition-property: top, transform; + transition-property: top, -webkit-transform; + transition-property: top, transform; + transition-property: top, transform, -webkit-transform; } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav__toggle span::before { + .c-circle-menu__toggle span::before { top: -16px; } } -.c-circle-nav__toggle span::after { +.c-circle-menu__toggle span::after { bottom: -8px; -webkit-transition-property: bottom, -webkit-transform; - transition-property: bottom, transform; + transition-property: bottom, -webkit-transform; + transition-property: bottom, transform; + transition-property: bottom, transform, -webkit-transform; } + @media (min-width: 480px) and (min-height: 480px) { - .c-circle-nav__toggle span::after { + .c-circle-menu__toggle span::after { bottom: -16px; } } /* button active state */ -.c-circle-nav__toggle.is-active span { +.c-circle-menu__toggle.is-active span { background: none; } -.c-circle-nav__toggle.is-active span::before { +.c-circle-menu__toggle.is-active span::before { top: 0; -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0s, 0.3s; transition-delay: 0s, 0.3s; } -.c-circle-nav__toggle.is-active span::after { +.c-circle-menu__toggle.is-active span::after { bottom: 0; -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition-delay: 0s, 0.3s; transition-delay: 0s, 0.3s; @@ -367,29 +374,29 @@ /* ----------------------------------------------------------------------------- - THE MASK COMPONENT + The Mask Component ----------------------------------------------------------------------------- */ /** - * Here's the mask component, which actually gets created and inserted to the - * DOM via JavaScript. It simply acts as an overlay to draw attention to the - * navigation when it is active. It also uses the .is-acvite state class. + * Here's the mask component, which actually gets created and inserted to the + * DOM via JavaScript. It simply acts as an overlay to draw attention to the + * menu when it is active. It also uses the .is-acvite state class. */ -.c-mask { +.c-circle-menu__mask { position: fixed; top: 0; left: 0; - z-index: 900; + z-index: 1; visibility: hidden; opacity: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); -webkit-transition: opacity 0.3s, visibility 0.3s; - transition: opacity 0.3s, visibility 0.3s; + transition: opacity 0.3s, visibility 0.3s; } -.c-mask.is-active { +.c-circle-menu__mask.is-active { opacity: 1; visibility: visible; } diff --git a/css/circle-menu.min.css b/css/circle-menu.min.css index 7060a98..0fcebdd 100644 --- a/css/circle-menu.min.css +++ b/css/circle-menu.min.css @@ -1 +1 @@ -.c-circle-nav__toggle,.c-circle-nav__toggle span{transition:background .3s;-webkit-transition:background .3s}.c-circle-nav{position:fixed;bottom:12px;right:12px;z-index:1000;width:48px;height:48px;border-radius:24px}@media (min-width:480px)and (min-height:480px){.c-circle-nav{width:96px;height:96px;border-radius:48px}}.c-circle-nav__items{display:block;list-style:none;position:absolute;z-index:90;margin:0;padding:0}.c-circle-nav__item{display:block;position:absolute;top:0;left:0;width:48px;height:48px;border-radius:24px;opacity:0;-webkit-transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-timing-function:cubic-bezier(.35,-.59,.47,.97);transition-timing-function:cubic-bezier(.35,-.59,.47,.97)}.c-circle-nav__item:nth-child(1){-webkit-transition-delay:.4s;transition-delay:.4s}.c-circle-nav__item:nth-child(2){-webkit-transition-delay:.3s;transition-delay:.3s}.c-circle-nav__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s}.c-circle-nav__item:nth-child(4){-webkit-transition-delay:.1s;transition-delay:.1s}.c-circle-nav__item:nth-child(5){-webkit-transition-delay:0s;transition-delay:0s}.c-circle-nav.is-active .c-circle-nav__item{-webkit-transition-timing-function:cubic-bezier(.35,.03,.47,1.59);transition-timing-function:cubic-bezier(.35,.03,.47,1.59);opacity:1}.c-circle-nav.is-active .c-circle-nav__item:nth-child(1){-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translate(-144px,0);-ms-transform:translate(-144px,0);transform:translate(-144px,0)}@media (min-width:480px)and (min-height:480px){.c-circle-nav__item{width:96px;height:96px;border-radius:48px}.c-circle-nav.is-active .c-circle-nav__item:nth-child(1){-webkit-transform:translate(-288px,0);-ms-transform:translate(-288px,0);transform:translate(-288px,0)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(2){-webkit-transition-delay:.1s;transition-delay:.1s;-webkit-transform:translate(-134px,-56px);-ms-transform:translate(-134px,-56px);transform:translate(-134px,-56px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(2){-webkit-transform:translate(-267px,-111px);-ms-transform:translate(-267px,-111px);transform:translate(-267px,-111px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s;-webkit-transform:translate(-102px,-102px);-ms-transform:translate(-102px,-102px);transform:translate(-102px,-102px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(3){-webkit-transform:translate(-204px,-204px);-ms-transform:translate(-204px,-204px);transform:translate(-204px,-204px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(4){-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translate(-56px,-134px);-ms-transform:translate(-56px,-134px);transform:translate(-56px,-134px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(4){-webkit-transform:translate(-111px,-267px);-ms-transform:translate(-111px,-267px);transform:translate(-111px,-267px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(5){-webkit-transition-delay:.4s;transition-delay:.4s;-webkit-transform:translate(0,-144px);-ms-transform:translate(0,-144px);transform:translate(0,-144px)}.c-circle-nav__link{display:block;width:100%;height:100%;border-radius:24px;box-shadow:inset 0 0 0 2px #fff}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(5){-webkit-transform:translate(0,-288px);-ms-transform:translate(0,-288px);transform:translate(0,-288px)}.c-circle-nav__link{border-radius:48px}}.c-circle-nav__link img{display:block;max-width:100%;height:auto}.c-circle-nav__link:hover{box-shadow:inset 0 0 0 2px #ff283c}.c-circle-nav__toggle{display:block;position:absolute;z-index:100;margin:0;padding:0;width:48px;height:48px;background-color:#ff283c;font:inherit;font-size:0;text-indent:-9999px;border-radius:24px;cursor:pointer;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle{width:96px;height:96px;border-radius:48px}}.c-circle-nav__toggle.is-active,.c-circle-nav__toggle:focus,.c-circle-nav__toggle:hover{outline:0;background-color:#c10012}.c-circle-nav__toggle span,.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{display:block;position:absolute;height:4px;background:#fff;border-radius:1px}.c-circle-nav__toggle span{top:22px;left:10px;right:10px}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle span,.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{height:8px;border-radius:2px}.c-circle-nav__toggle span{top:44px;left:20px;right:20px}}.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{left:0;width:100%;content:"";-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s}.c-circle-nav__toggle span::before{top:-8px;-webkit-transition-property:top,-webkit-transform;transition-property:top,transform}.c-circle-nav__toggle span::after{bottom:-8px;-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,transform}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle span::before{top:-16px}.c-circle-nav__toggle span::after{bottom:-16px}}.c-circle-nav__toggle.is-active span{background:0 0}.c-circle-nav__toggle.is-active span::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-circle-nav__toggle.is-active span::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-mask{position:fixed;top:0;left:0;z-index:900;visibility:hidden;opacity:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s}.c-mask.is-active{opacity:1;visibility:visible} \ No newline at end of file +.c-circle-menu{position:fixed;bottom:12px;right:12px;z-index:1000;width:48px;height:48px;border-radius:24px}@media (min-width:480px) and (min-height:480px){.c-circle-menu{width:96px;height:96px;border-radius:48px}}.c-circle-menu__items{display:block;list-style:none;position:absolute;z-index:2;margin:0;padding:0}.c-circle-menu__item{display:block;position:absolute;top:0;left:0;width:48px;height:48px;border-radius:24px;opacity:0;-webkit-transition:opacity,-webkit-transform;transition:opacity,-webkit-transform;transition:transform,opacity;transition:transform,opacity,-webkit-transform;-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-timing-function:cubic-bezier(.35,-.59,.47,.97);transition-timing-function:cubic-bezier(.35,-.59,.47,.97)}.c-circle-menu__item:nth-child(1){-webkit-transition-delay:.4s;transition-delay:.4s}.c-circle-menu__item:nth-child(2){-webkit-transition-delay:.3s;transition-delay:.3s}.c-circle-menu__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s}.c-circle-menu__item:nth-child(4){-webkit-transition-delay:.1s;transition-delay:.1s}.c-circle-menu__item:nth-child(5){-webkit-transition-delay:0s;transition-delay:0s}.c-circle-menu.is-active .c-circle-menu__item{-webkit-transition-timing-function:cubic-bezier(.35,.03,.47,1.59);transition-timing-function:cubic-bezier(.35,.03,.47,1.59);opacity:1}.c-circle-menu.is-active .c-circle-menu__item:nth-child(1){-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translate(-144px,0);transform:translate(-144px,0)}@media (min-width:480px) and (min-height:480px){.c-circle-menu__item{width:96px;height:96px;border-radius:48px}.c-circle-menu.is-active .c-circle-menu__item:nth-child(1){-webkit-transform:translate(-288px,0);transform:translate(-288px,0)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(2){-webkit-transition-delay:.1s;transition-delay:.1s;-webkit-transform:translate(-134px,-56px);transform:translate(-134px,-56px)}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(2){-webkit-transform:translate(-267px,-111px);transform:translate(-267px,-111px)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s;-webkit-transform:translate(-102px,-102px);transform:translate(-102px,-102px)}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(3){-webkit-transform:translate(-204px,-204px);transform:translate(-204px,-204px)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(4){-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translate(-56px,-134px);transform:translate(-56px,-134px)}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(4){-webkit-transform:translate(-111px,-267px);transform:translate(-111px,-267px)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(5){-webkit-transition-delay:.4s;transition-delay:.4s;-webkit-transform:translate(0,-144px);transform:translate(0,-144px)}.c-circle-menu__link{display:block;width:100%;height:100%;border-radius:24px;box-shadow:inset 0 0 0 2px #fff}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(5){-webkit-transform:translate(0,-288px);transform:translate(0,-288px)}.c-circle-menu__link{border-radius:48px}}.c-circle-menu__link img{display:block;max-width:100%;height:auto}.c-circle-menu__link:hover{box-shadow:inset 0 0 0 2px #ff283c}.c-circle-menu__toggle{display:block;position:absolute;z-index:100;margin:0;padding:0;width:48px;height:48px;background-color:#ff283c;font:inherit;font-size:0;text-indent:-9999px;border-radius:24px;-webkit-transition:background .3s;transition:background .3s;cursor:pointer;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none}@media (min-width:480px) and (min-height:480px){.c-circle-menu__toggle{width:96px;height:96px;border-radius:48px}}.c-circle-menu__toggle.is-active,.c-circle-menu__toggle:focus,.c-circle-menu__toggle:hover{outline:0;background-color:#c10012}.c-circle-menu__toggle span,.c-circle-menu__toggle span::after,.c-circle-menu__toggle span::before{display:block;position:absolute;height:4px;background:#fff;border-radius:1px}.c-circle-menu__toggle span{top:22px;left:10px;right:10px;-webkit-transition:background .3s;transition:background .3s}@media (min-width:480px) and (min-height:480px){.c-circle-menu__toggle span,.c-circle-menu__toggle span::after,.c-circle-menu__toggle span::before{height:8px;border-radius:2px}.c-circle-menu__toggle span{top:44px;left:20px;right:20px}}.c-circle-menu__toggle span::after,.c-circle-menu__toggle span::before{left:0;width:100%;content:"";-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s}.c-circle-menu__toggle span::before{top:-8px;-webkit-transition-property:top,-webkit-transform;transition-property:top,-webkit-transform;transition-property:top,transform;transition-property:top,transform,-webkit-transform}.c-circle-menu__toggle span::after{bottom:-8px;-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,-webkit-transform;transition-property:bottom,transform;transition-property:bottom,transform,-webkit-transform}@media (min-width:480px) and (min-height:480px){.c-circle-menu__toggle span::before{top:-16px}.c-circle-menu__toggle span::after{bottom:-16px}}.c-circle-menu__toggle.is-active span{background:0 0}.c-circle-menu__toggle.is-active span::before{top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-circle-menu__toggle.is-active span::after{bottom:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-circle-menu__mask{position:fixed;top:0;left:0;z-index:1;visibility:hidden;opacity:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s}.c-circle-menu__mask.is-active{opacity:1;visibility:visible} \ No newline at end of file diff --git a/css/common.css b/css/common.css index cf0d656..f0ccd71 100755 --- a/css/common.css +++ b/css/common.css @@ -1,6 +1,6 @@ /* ----------------------------------------------------------------------------- - FONTS + Fonts ----------------------------------------------------------------------------- */ @font-face { @@ -10,6 +10,7 @@ src: url("../fonts/oxygen/oxygen-v5-latin-300.eot"); src: local("Oxygen Light"), local("Oxygen-Light"), url("../fonts/oxygen/oxygen-v5-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/oxygen/oxygen-v5-latin-300.woff2") format("woff2"), url("../fonts/oxygen/oxygen-v5-latin-300.woff") format("woff"), url("../fonts/oxygen/oxygen-v5-latin-300.ttf") format("truetype"), url("../fonts/oxygen/oxygen-v5-latin-300.svg#Oxygen") format("svg"); } + @font-face { font-family: 'Oxygen'; font-style: normal; @@ -17,6 +18,7 @@ src: url("../fonts/oxygen/oxygen-v5-latin-regular.eot"); src: local("Oxygen"), local("Oxygen-Regular"), url("../fonts/oxygen/oxygen-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/oxygen/oxygen-v5-latin-regular.woff2") format("woff2"), url("../fonts/oxygen/oxygen-v5-latin-regular.woff") format("woff"), url("../fonts/oxygen/oxygen-v5-latin-regular.ttf") format("truetype"), url("../fonts/oxygen/oxygen-v5-latin-regular.svg#Oxygen") format("svg"); } + @font-face { font-family: 'Oxygen'; font-style: normal; @@ -24,9 +26,10 @@ src: url("../fonts/oxygen/oxygen-v5-latin-700.eot"); src: local("Oxygen Bold"), local("Oxygen-Bold"), url("../fonts/oxygen/oxygen-v5-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/oxygen/oxygen-v5-latin-700.woff2") format("woff2"), url("../fonts/oxygen/oxygen-v5-latin-700.woff") format("woff"), url("../fonts/oxygen/oxygen-v5-latin-700.ttf") format("truetype"), url("../fonts/oxygen/oxygen-v5-latin-700.svg#Oxygen") format("svg"); } + /* ----------------------------------------------------------------------------- - ROOT + Root ----------------------------------------------------------------------------- */ *, @@ -56,7 +59,7 @@ body { /* ----------------------------------------------------------------------------- - HEADINGS + Headings ----------------------------------------------------------------------------- */ h1, @@ -72,7 +75,7 @@ h6 { /* ----------------------------------------------------------------------------- - LINKS + Links ----------------------------------------------------------------------------- */ a { @@ -85,8 +88,8 @@ a:hover { } /* ----------------------------------------------------------------------------- - - TEXT STUFFS + + Text Stuff ----------------------------------------------------------------------------- */ b, @@ -100,8 +103,8 @@ em { } /* ----------------------------------------------------------------------------- - - EMBEDDED CONTENT + + Embedded Content ----------------------------------------------------------------------------- */ img { @@ -110,8 +113,8 @@ img { } /* ----------------------------------------------------------------------------- - - PRIMARY LAYOUT STUFF + + Primary Layout ----------------------------------------------------------------------------- */ .container { @@ -125,14 +128,16 @@ img { padding: 0 24px; } } + @media all and (min-width: 720px) { .container { padding: 0 48px; } } + /* ----------------------------------------------------------------------------- - - DEMO HEADER + + Demo Header ----------------------------------------------------------------------------- */ .demo-header { @@ -142,11 +147,9 @@ img { .demo-header-nav { 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; background-color: #ff2850; @@ -177,9 +180,10 @@ img { font-size: 42px; } } + /* ----------------------------------------------------------------------------- - DEMO CONTENT + Demo Content ----------------------------------------------------------------------------- */ .leader-text { @@ -193,9 +197,10 @@ img { font-size: 22px; } } + /* ----------------------------------------------------------------------------- - DEMO CONTENT NAVIGATION + Demo Sub Nav ----------------------------------------------------------------------------- */ .demo-sub-nav { @@ -205,14 +210,11 @@ img { .demo-sub-nav__items { display: -webkit-box; - display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-flow: row wrap; - -ms-flex-flow: row wrap; - flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; list-style: none; @@ -243,9 +245,10 @@ img { margin: 0 0 48px 0; } } + /* ----------------------------------------------------------------------------- - DEMO FOOTER + Demo Footer ----------------------------------------------------------------------------- */ .demo-footer { @@ -258,15 +261,17 @@ img { padding: 24px 0; } } + @media all and (min-width: 720px) { .demo-footer { padding: 48px 0; } } + /* ----------------------------------------------------------------------------- - CARBON AD - + Carbon Ad + ----------------------------------------------------------------------------- */ #carbonads { position: fixed; diff --git a/css/common.min.css b/css/common.min.css old mode 100644 new mode 100755 index eed8a71..03695d9 --- a/css/common.min.css +++ b/css/common.min.css @@ -1 +1 @@ -.carbon-poweredby,em,i{font-style:italic}@font-face{font-family:Oxygen;font-style:normal;font-weight:300;src:url(../fonts/oxygen/oxygen-v5-latin-300.eot);src:local("Oxygen Light"),local("Oxygen-Light"),url(../fonts/oxygen/oxygen-v5-latin-300.eot?#iefix)format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-300.woff2)format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-300.woff)format("woff"),url(../fonts/oxygen/oxygen-v5-latin-300.ttf)format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-300.svg#Oxygen)format("svg")}@font-face{font-family:Oxygen;font-style:normal;font-weight:400;src:url(../fonts/oxygen/oxygen-v5-latin-regular.eot);src:local("Oxygen"),local("Oxygen-Regular"),url(../fonts/oxygen/oxygen-v5-latin-regular.eot?#iefix)format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-regular.woff2)format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-regular.woff)format("woff"),url(../fonts/oxygen/oxygen-v5-latin-regular.ttf)format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-regular.svg#Oxygen)format("svg")}@font-face{font-family:Oxygen;font-style:normal;font-weight:700;src:url(../fonts/oxygen/oxygen-v5-latin-700.eot);src:local("Oxygen Bold"),local("Oxygen-Bold"),url(../fonts/oxygen/oxygen-v5-latin-700.eot?#iefix)format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-700.woff2)format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-700.woff)format("woff"),url(../fonts/oxygen/oxygen-v5-latin-700.ttf)format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-700.svg#Oxygen)format("svg")}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box}body,html{margin:0;padding:0;height:100%}body{color:#6d6d6d;background-color:#272727;font-family:Oxygen,Helvetica,sans-serif;font-size:14px;line-height:1.8}h1,h2,h3,h4,h5,h6{color:#3b3b3b;font-weight:700;line-height:1.2}a{color:#ff2850;text-decoration:none}a:hover{color:#c10024}b,strong{font-weight:700}img{max-width:100%;height:auto}.container{margin:0 auto;padding:0 24px;max-width:960px}@media all and (min-width:480px){.container{padding:0 24px}}@media all and (min-width:720px){.container{padding:0 48px}}.demo-header{margin:0;padding:0}.demo-header-nav{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;background-color:#ff2850}.demo-header-nav__link{padding:12px;color:#fff}.demo-header-nav__link:hover{color:#fff;background-color:#c10024}.demo-header__title{margin:24px;padding:0;color:#fff;font-size:28px;font-weight:300;text-align:center}@media all and (min-width:480px){.demo-header__title{margin:36px;font-size:42px}}.leader-text{color:#b3b3b3;font-size:18px;font-weight:300}.demo-sub-nav{margin:0 0 24px;padding:0}.demo-sub-nav__items{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;list-style:none;margin:0;padding:0}.demo-sub-nav__item{margin:0;padding:4px}.demo-sub-nav__link{display:block;margin:0;padding:4px 24px;border:2px solid #ff2850}.demo-sub-nav__item.active .demo-sub-nav__link,.demo-sub-nav__link:hover{color:#fff;background-color:#ff2850}.demo-footer{padding:12px 0;text-align:center}@media all and (min-width:480px){.leader-text{font-size:22px}.demo-footer{padding:24px 0}}@media all and (min-width:720px){.demo-sub-nav{margin:0 0 48px}.demo-footer{padding:48px 0}}#carbonads{position:fixed;bottom:12px;left:12px;z-index:1000;padding:24px 12px 12px;width:154px;background-color:#fff;line-height:1.1;border:1px solid #e7e7e7}.carbon-wrap{display:block;margin:0 0 4px}.carbon-img{display:block;margin:0 0 4px;padding:0;width:130px;height:100px}.carbon-text{color:#818181;font-size:12px}.carbon-poweredby{font-size:10px}.carbonad__close{display:block;position:absolute;top:0;left:12px;height:24px;font-size:11px;line-height:24px}@media all and (max-width:660px){#carbonads{display:none}} \ No newline at end of file +.carbon-poweredby,em,i{font-style:italic}@font-face{font-family:Oxygen;font-style:normal;font-weight:300;src:url(../fonts/oxygen/oxygen-v5-latin-300.eot);src:local("Oxygen Light"),local("Oxygen-Light"),url(../fonts/oxygen/oxygen-v5-latin-300.eot?#iefix) format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-300.woff2) format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-300.woff) format("woff"),url(../fonts/oxygen/oxygen-v5-latin-300.ttf) format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-300.svg#Oxygen) format("svg")}@font-face{font-family:Oxygen;font-style:normal;font-weight:400;src:url(../fonts/oxygen/oxygen-v5-latin-regular.eot);src:local("Oxygen"),local("Oxygen-Regular"),url(../fonts/oxygen/oxygen-v5-latin-regular.eot?#iefix) format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-regular.woff2) format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-regular.woff) format("woff"),url(../fonts/oxygen/oxygen-v5-latin-regular.ttf) format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-regular.svg#Oxygen) format("svg")}@font-face{font-family:Oxygen;font-style:normal;font-weight:700;src:url(../fonts/oxygen/oxygen-v5-latin-700.eot);src:local("Oxygen Bold"),local("Oxygen-Bold"),url(../fonts/oxygen/oxygen-v5-latin-700.eot?#iefix) format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-700.woff2) format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-700.woff) format("woff"),url(../fonts/oxygen/oxygen-v5-latin-700.ttf) format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-700.svg#Oxygen) format("svg")}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box}body,html{margin:0;padding:0;height:100%}body{color:#6d6d6d;background-color:#272727;font-family:Oxygen,Helvetica,sans-serif;font-size:14px;line-height:1.8}h1,h2,h3,h4,h5,h6{color:#3b3b3b;font-weight:700;line-height:1.2}a{color:#ff2850;text-decoration:none}a:hover{color:#c10024}b,strong{font-weight:700}img{max-width:100%;height:auto}.container{margin:0 auto;padding:0 24px;max-width:960px}@media all and (min-width:480px){.container{padding:0 24px}}@media all and (min-width:720px){.container{padding:0 48px}}.demo-header{margin:0;padding:0}.demo-header-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background-color:#ff2850}.demo-header-nav__link{padding:12px;color:#fff}.demo-header-nav__link:hover{color:#fff;background-color:#c10024}.demo-header__title{margin:24px;padding:0;color:#fff;font-size:28px;font-weight:300;text-align:center}@media all and (min-width:480px){.demo-header__title{margin:36px;font-size:42px}}.leader-text{color:#b3b3b3;font-size:18px;font-weight:300}.demo-sub-nav{margin:0 0 24px;padding:0}.demo-sub-nav__items{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;list-style:none;margin:0;padding:0}.demo-sub-nav__item{margin:0;padding:4px}.demo-sub-nav__link{display:block;margin:0;padding:4px 24px;border:2px solid #ff2850}.demo-sub-nav__item.active .demo-sub-nav__link,.demo-sub-nav__link:hover{color:#fff;background-color:#ff2850}@media all and (min-width:720px){.demo-sub-nav{margin:0 0 48px}}.carbon-img,.carbon-wrap{margin:0 0 4px;display:block}.demo-footer{padding:12px 0;text-align:center}@media all and (min-width:480px){.leader-text{font-size:22px}.demo-footer{padding:24px 0}}@media all and (min-width:720px){.demo-footer{padding:48px 0}}#carbonads{position:fixed;bottom:12px;left:12px;z-index:1000;padding:24px 12px 12px;width:154px;background-color:#fff;line-height:1.1;border:1px solid #e7e7e7}.carbon-img{padding:0;width:130px;height:100px}.carbon-text{color:#818181;font-size:12px}.carbon-poweredby{font-size:10px}.carbonad__close{display:block;position:absolute;top:0;left:12px;height:24px;font-size:11px;line-height:24px}@media all and (max-width:660px){#carbonads{display:none}} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 41716a9..ffeddcd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -10,34 +10,26 @@ var notifier = require('node-notifier'); var notify = require('gulp-notify'); var plumber = require('gulp-plumber'); var rename = require('gulp-rename'); -var sass = require('gulp-ruby-sass'); +var sass = require('gulp-sass'); var uglify = require('gulp-uglify'); // js task gulp.task('js', function() { - return gulp.src('./js/circleMenu.js') - .pipe(uglify()) + return gulp.src('./js/src/**/*.js') + .pipe(uglify().on('error', function(err) { + console.log('Uglify error:', err); + this.emit('end'); + })) .pipe(rename({ suffix: '.min' })) - .pipe(gulp.dest('./js/')); + .pipe(gulp.dest('./js/dist/')); }); // styles task gulp.task('styles', function() { - return sass('./sass', { - style: 'expanded', - compass: true, - noCache: true - }) - .on('error', function(err) { - gutil.beep(); - notifier.notify({ - 'title': 'Error', - 'message': 'Error compiling sass. Check the console.' - }); - console.log(err); - }) + return gulp.src('./sass/**/*.scss') + .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) .pipe(autoprefixer()) .pipe(gulp.dest('./css/')) .pipe(cssmin()) @@ -48,10 +40,10 @@ gulp.task('styles', function() { }); // default task -gulp.task('default', ['js', 'styles', 'watch']); +gulp.task('default', ['js', 'styles']); -// watcher -gulp.task('watch', function() { +// watch task +gulp.task('watch', ['js', 'styles'], function() { gulp.watch('./js/src/**/*.js', ['js']); gulp.watch('./sass/*.scss', ['styles']); -}); \ No newline at end of file +}); diff --git a/index.html b/index.html index 02e74fd..ad29e38 100644 --- a/index.html +++ b/index.html @@ -8,9 +8,10 @@ + - +