Permalink
Browse files

Initial commit

  • Loading branch information...
1 parent a6143ac commit 3e11906016c6df0b2fb67efd13b26650923f0b83 @viljamis viljamis committed Mar 1, 2014
View
@@ -0,0 +1,302 @@
+/* ------------------------------------------
+ RESET
+--------------------------------------------- */
+
+body, div,
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
+fieldset, form, label, legend, th, td,
+article, aside, figure, footer, header, hgroup, menu, nav, section,
+summary, hgroup {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+@-webkit-viewport { width: device-width; }
+@-moz-viewport { width: device-width; }
+@-ms-viewport { width: device-width; }
+@-o-viewport { width: device-width; }
+@viewport { width: device-width; }
+
+
+/* ------------------------------------------
+ RESPONSIVE NAV STYLES
+--------------------------------------------- */
+
+.nav-collapse ul {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ display: block;
+ list-style: none;
+}
+
+.nav-collapse li {
+ width: 100%;
+ display: block;
+}
+
+.js .nav-collapse {
+ clip: rect(0 0 0 0);
+ max-height: 0;
+ position: absolute;
+ display: block;
+ overflow: hidden;
+ zoom: 1;
+}
+
+.nav-collapse.opened {
+ max-height: 9999px;
+}
+
+.disable-pointer-events {
+ pointer-events: none !important;
+}
+
+.nav-toggle {
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+@media screen and (min-width: 40em) {
+ .js .nav-collapse {
+ position: relative;
+ }
+ .js .nav-collapse.closed {
+ max-height: none;
+ }
+ .nav-toggle {
+ display: none;
+ }
+}
+
+
+/* ------------------------------------------
+ DEMO STYLES
+--------------------------------------------- */
+
+body {
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ text-size-adjust: 100%;
+ color: #37302a;
+ background: #fff;
+ font: normal 100%/1.4 sans-serif;
+}
+
+section {
+ border-bottom: 1px solid #999;
+ padding: 100px 0 0;
+ height: 800px;
+ width: 100%;
+}
+
+h1 {
+ text-align: center;
+}
+
+
+/* ------------------------------------------
+ FIXED HEADER
+--------------------------------------------- */
+
+header {
+ background: #f4421a;
+ position: fixed;
+ z-index: 3;
+ width: 100%;
+ left: 0;
+ top: 0;
+}
+
+.logo {
+ text-decoration: none;
+ font-weight: bold;
+ line-height: 55px;
+ padding: 0 20px;
+ color: #fff;
+ float: left;
+}
+
+
+/* ------------------------------------------
+ MASK
+--------------------------------------------- */
+
+.mask {
+ -webkit-transition: opacity 300ms;
+ -moz-transition: opacity 300ms;
+ transition: opacity 300ms;
+ background: rgba(0,0,0, .5);
+ visibility: hidden;
+ position: fixed;
+ opacity: 0;
+ z-index: 2;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ top: 0;
+}
+
+.android .mask {
+ -webkit-transition: none;
+ transition: none;
+}
+
+.js-nav-active .mask {
+ visibility: visible;
+ opacity: 1;
+}
+
+@media screen and (min-width: 40em) {
+ .mask {
+ display: none !important;
+ opacity: 0 !important;
+ }
+}
+
+
+/* ------------------------------------------
+ NAVIGATION STYLES
+ (+ responsive-nav.css file is loaded in the <head>)
+--------------------------------------------- */
+
+.fixed {
+ position: fixed;
+ width: 100%;
+ left: 0;
+ top: 0;
+}
+
+.nav-collapse,
+.nav-collapse * {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.nav-collapse,
+.nav-collapse ul {
+ list-style: none;
+ width: 100%;
+ float: left;
+}
+
+@media screen and (min-width: 40em) {
+ .nav-collapse {
+ float: right;
+ width: auto;
+ }
+}
+
+.nav-collapse li {
+ float: left;
+ width: 100%;
+}
+
+@media screen and (min-width: 40em) {
+ .nav-collapse li {
+ width: auto;
+ }
+}
+
+.nav-collapse a {
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ border-top: 1px solid white;
+ text-decoration: none;
+ background: #f4421a;
+ padding: 0.7em 1em;
+ color: #fff;
+ width: 100%;
+ float: left;
+}
+
+.nav-collapse a:active,
+.nav-collapse .active a {
+ background: #b73214;
+}
+
+@media screen and (min-width: 40em) {
+ .nav-collapse a {
+ border-left: 1px solid white;
+ padding: 1.02em 2em;
+ text-align: center;
+ border-top: 0;
+ float: left;
+ margin: 0;
+ }
+}
+
+.nav-collapse ul ul a {
+ background: #ca3716;
+ padding-left: 2em;
+}
+
+@media screen and (min-width: 40em) {
+ .nav-collapse ul ul a {
+ display: none;
+ }
+}
+
+
+/* ------------------------------------------
+ NAV TOGGLE STYLES
+--------------------------------------------- */
+
+@font-face {
+ font-family: "responsivenav";
+ src:url("../icons/responsivenav.eot");
+ src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
+ url("../icons/responsivenav.ttf") format("truetype"),
+ url("../icons/responsivenav.woff") format("woff"),
+ url("../icons/responsivenav.svg#responsivenav") format("svg");
+ font-weight: normal;
+ font-style: normal;
+}
+
+.nav-toggle {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-decoration: none;
+ text-indent: -300px;
+ position: relative;
+ overflow: hidden;
+ width: 60px;
+ height: 55px;
+ float: right;
+}
+
+.nav-toggle:before {
+ color: #fff; /* Edit this to change the icon color */
+ font: normal 28px/55px "responsivenav";
+ text-transform: none;
+ text-align: center;
+ position: absolute;
+ content: "\2261";
+ text-indent: 0;
+ speak: none;
+ width: 100%;
+ left: 0;
+ top: 0;
+}
+
+.nav-toggle.active:before {
+ font-size: 24px;
+ content: "\78";
+}
+
+
+
+
+
Binary file not shown.
@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="responsivenav" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#x78;" d="M443.904 366.016c6.24-6.208 6.24-16.416 0-22.624l-124.448-124.512c-6.176-6.208-6.176-16.416 0-22.656l124.384-124.544c6.24-6.208 6.24-16.416 0-22.624l-45.312-45.216c-6.176-6.208-16.384-6.208-22.624 0l-124.32 124.544c-6.208 6.208-16.416 6.208-22.624 0l-124.448-124.448c-6.208-6.24-16.416-6.24-22.624 0l-45.248 45.312c-6.208 6.176-6.208 16.384 0 22.624l124.48 124.448c6.208 6.208 6.208 16.416 0 22.656l-124.384 124.512c-6.208 6.24-6.208 16.416 0 22.624l45.28 45.248c6.208 6.208 16.416 6.208 22.624 0l124.32-124.512c6.208-6.24 16.416-6.24 22.624-0.032l124.416 124.48c6.24 6.176 16.448 6.176 22.624 0l45.28-45.28z" />
+<glyph unicode="&#x2261;" d="M438.857 91.428v-36.572q0-7.428-5.428-12.857t-12.857-5.428h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.428h402.286q7.428 0 12.857-5.428t5.428-12.857zM438.857 237.714v-36.572q0-7.428-5.428-12.857t-12.857-5.428h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.429h402.286q7.428 0 12.857-5.428t5.428-12.857zM438.857 384v-36.572q0-7.428-5.428-12.857t-12.857-5.429h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.571q0 7.429 5.428 12.857t12.857 5.428h402.286q7.428 0 12.857-5.428t5.428-12.857z" horiz-adv-x="439" />
+</font></defs></svg>
Binary file not shown.
Binary file not shown.
View
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Adtile.Me Fixed Nav Demo</title>
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <link rel="stylesheet" href="css/styles.css">
+ <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+ <script src="js/responsive-nav.js"></script>
+ </head>
+ <body>
+
+ <header>
+ <a href="#home" class="logo scroll">Fixed Nav</a>
+ <nav class="nav-collapse">
+ <ul>
+ <li class="active"><a href="#home" class="scroll">Home</a></li>
+ <li><a href="#about" class="scroll">About</a></li>
+ <li><a href="#projects" class="scroll">Projects</a></li>
+ <li><a href="#blog" class="scroll">Blog</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <section id="home">
+ <h1>Home</h1>
+ </section>
+
+ <section id="about">
+ <h1>About</h1>
+ </section>
+
+ <section id="projects">
+ <h1>Projects</h1>
+ </section>
+
+ <section id="blog">
+ <h1>Blog</h1>
+ </section>
+
+ <script src="js/fastclick.js"></script>
+ <script src="js/scroll.js"></script>
+ <script src="js/fixed-responsive-nav.js"></script>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit 3e11906

Please sign in to comment.