Added navigation menu

zombeats · Sep 20, 2015 · ab9e572 · ab9e572
1 parent 2a63ae5
commit ab9e572
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 97 deletions.
diff --git a/assets/images/logo.gif b/assets/images/logo.gif
diff --git a/assets/scss/global.scss b/assets/scss/global.scss
@@ -177,6 +177,8 @@ h6 a {
     letter-spacing: 0;
 
     color: #fff;
+    display: inline-block;
+    padding: .5rem 2rem;
 
     @include breakpoint(500px) {
       font-size: 1.8rem;
@@ -185,6 +187,7 @@ h6 a {
       font-size: 2.2rem;
     }
     @include breakpoint(850px) {
+      margin: 96px 96px 96px 56px;
       font-size: 2.6rem;
     }
   }
@@ -1063,8 +1066,7 @@ h6 a {
   position: relative;
 
   width: 80%;
-  padding-top: 6rem;
-  padding-bottom: 6rem;
+  padding: 3rem 0;
   margin: 0 auto;
 }
 
@@ -1074,7 +1076,7 @@ h6 a {
   font-family: "Open Sans", sans-serif;
   font-size: 1.1rem;
 
-  content: "Read This Next";
+  content: "Siguiente Publicación";
   transition: all .5s ease;
   text-transform: uppercase;
 
@@ -1083,17 +1085,17 @@ h6 a {
   border-radius: 4px;
 }
 .read-next-story.prev .post:before {
-  content: "You Might Enjoy";
+  content: "Tal vez te interese";
 }
 
 .read-next-story h2 {
-  margin-top: 1rem;
+  margin-top: 3rem;
 
   color: #fff;
 }
 
 .read-next-story p {
-  margin: 5px 0 0 0;
+  margin: 3rem 0 0 0;
 
   font-weight: 200;
   line-height: 1.4em;
@@ -1264,3 +1266,38 @@ pre[class*="language-"] {
     background-color: rgba($orange, .7);
   }
 }
+
+a.ghost-logo.animated-logo {
+  background: url('/assets/images/logo.png');
+  left: 7px;
+  top: 7px;
+  width: 30px;
+  background-size: 30px, cover;
+  background-repeat: no-repeat;
+  display: none;
+
+  @include breakpoint(660px) {
+    display: inline;
+    }
+}
+
+.ghost-logo {
+  &:before {
+    content: '';
+  }
+  &:after {
+    content: "CWMarMenor";
+    font-size: 1.6rem;
+    margin-left: 10px;
+  }
+}
+
+#global-footer .poweredby a {
+  text-decoration: underline;
+}
+
+.global-header {
+  min-height: 30px;
+}
+
+// signup
diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
@@ -1,7 +1,17 @@
+::selection {
+ background: lighten($orange, 36%);
+}
+::-moz-selection {
+ background: lighten($orange, 36%);
+}
+
 .button-green,
 .button-add,
 .button-add[type="submit"] {
-  background-color: $green;
+  transition: all 0.5s ease;
+  background: white;
+  border: 4px solid $green;
+  color: $green;
 }
 
 .button-green:not(.button-loading):hover,
@@ -12,9 +22,23 @@
 .button-add[type="submit"]:not(.button-loading):hover,
 .ghost-pro-ad:hover [type="submit"].button-add:not(.button-loading),
 .button-add[type="submit"]:not(.button-loading):focus {
-  background: darken($green, 10%);
+  background: $green;
+  color: white;
 }
 
 .modal-close {
   color: $red;
 }
+
+.button-save, .button-blue, button[type="submit"], input[type="submit"] {
+  background: $blue;
+  box-shadow: none;
+}
+
+.button-save:not(.button-loading):hover, .button-save:not(.button-loading):focus, .button-blue:not(.button-loading):hover, .button-blue:not(.button-loading):focus, button[type="submit"]:not(.button-loading):hover, button[type="submit"]:not(.button-loading):focus, input[type="submit"]:not(.button-loading):hover, input[type="submit"]:not(.button-loading):focus {
+  background: darken($blue, 10%);
+}
+
+.blog-header h1 {
+  background-color: rgba(#8BC34A, .7);
+}
diff --git a/default.hbs b/default.hbs
@@ -1,17 +1,14 @@
 <!DOCTYPE html>
 <html>
-<head>
+  <head>
     {{! Document Settings }}
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
     {{! Page Meta }}
     <title>{{meta_title}}</title>
     <meta name="description" content="{{meta_description}}" />
-
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <link rel="apple-touch-icon" sizes="57x57" href="assets/images/apple-touch-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="assets/images/apple-touch-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png">
@@ -32,105 +29,59 @@
     <meta name="msapplication-TileImage" content="assets/images/mstile-144x144.png">
     <meta name="msapplication-config" content="assets/images/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
-
     {{! Styles'n'Scripts }}
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:700,400,200" />
-    <link rel="stylesheet" type="text/css" href="{{asset "css/application.css"}}" media="all" />
+    <link rel="stylesheet" href="https://ghost.org/assets/application-53c891abfa2c2305e65de0c84c76e9e1.css" media="all" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="{{asset "css/itch.css"}}" />
-
     {{ghost_head}}
-</head>
-<body class="{{body_class}}">
+  </head>
+  <body class="{{body_class}}">
     <div id="fb-root"></div>
     <aside class="subscribe-banner">
-        ¿Te gustaría recibir el contenido en tu correo semanalmente? &nbsp;<a class="button" data-toggle="modal" data-target="#blogsubscribe">Subscríbete</a>
+      ¿Te gustaría recibir el contenido en tu correo semanalmente? &nbsp;<a class="button" data-toggle="modal" data-target="#blogsubscribe">Subscríbete</a>
     </aside>
     <header id="global-header" class="global-header navbar">
-       <nav role="navigation">
-           <div class="wrapper">
-               <a class="ghost-logo" href="https://ghost.org/"><span>Ghost</span></a>
-               <button type="button" class="mobile-menu" data-toggle="closed" data-target=".nav-collapse">
-               <span class="hidden">Menu</span>
-               </button>
-               <ul id="main-menu" class="nav-collapse closed">
-                   <li><a href="//ghost.org/features/">Features</a></li>
-                   <li><a href="//ghost.org/about/">About</a></li>
-                   <li><a href="//marketplace.ghost.org">Marketplace</a></li>
-                   <li><a href="//ghost.org/forum/">Forum</a></li>
-                   <li class="current extra"><a href="//blog.ghost.org">Blog</a></li>
-                   <li><a class="signup" href="//ghost.org/signup/">Sign Up</a></li>
-                   <li><a class="login" href="//ghost.org/login/">Log in</a></li>
-               </ul>
-           </div>
-        </nav>
+      {{navigation}}
     </header>
-
     <main role="main">
-        <div class="page-wrapper">
-            {{{body}}}
-            <div class="clearfix"></div>
-        </div>
+      <div class="page-wrapper">
+        {{{body}}}
+        <div class="clearfix"></div>
+      </div>
     </main>
-
     <div class="modal fade" id="blogsubscribe" tabindex="-1" role="dialog" aria-labelledby="Email subscription modal" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <header class="modal-header">
-                    <h4 class="modal-title">Una vez a la semana, recibe lo último.</h4>
-                    <a class="modal-close" data-dismiss="modal" aria-hidden="true" href="#"><span class="hidden">Close</span></a>
-                </header>
-                <div class="modal-body">
-                    <form action="{{! populated via code injection}}" method="post">
-                        <input id="fieldEmail" name="{{! populated via code injection}}" type="email" placeholder="Tu correo electrónico" required />
-                        <button class="button-add wide" type="submit">Subscribirse</button>
-                        <p><strong>Política de Privacidad:</strong> No spam ni publicidad. Desunscríbete en cualquier momento.</p>
-                    </form>
-                </div>
-            </div>
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <header class="modal-header">
+            <h4 class="modal-title">Una vez a la semana, recibe lo último.</h4>
+            <a class="modal-close" data-dismiss="modal" aria-hidden="true" href="#"><span class="hidden">Close</span></a>
+          </header>
+          <div class="modal-body">
+            <form action="{{! populated via code injection}}" method="post">
+              <input id="fieldEmail" name="{{! populated via code injection}}" type="email" placeholder="Tu correo electrónico" required />
+              <button class="button-add wide" type="submit">Subscribirse</button>
+              <p><strong>Política de Privacidad:</strong> No spam ni publicidad. Desunscríbete en cualquier momento.</p>
+            </form>
+          </div>
         </div>
+      </div>
     </div>
-
     <div class="clearfix"></div>
-
     <footer id="global-footer">
-        <nav id="footer-nav" role="navigation">
-            <ul id="footer-menu">
-                <li class="logo"><a href="/"><img alt="Ghost" src="https://ghost.org/assets/logo-minighost-0f5476cf6a52adff2f2a67e4f16d3e29.png"></a></li>
-                <li><a class="" href="//ghost.org/about/">About</a></li>
-                <li><a href="http://status.ghost.org">Status</a></li>
-                <li><a class="" href="//ghost.org/pricing/">Pricing</a></li>
-                <li><a href="http://blog.ghost.org">Blog</a></li>
-                <li><a class="" href="//ghost.org/about/terms/">Terms</a></li>
-                <li><a class="" href="//ghost.org/about/privacy/">Privacy</a></li>
-                <li><a class="" href="//ghost.org/about/contact/">Contact</a></li>
-            </ul>
-            <div class="clearfix"></div>
-
-            <span class="poweredby"><img alt="Ghost" src="https://ghost.org/assets/logo-minidigitalocean-1bb39c0755ac79befc56ca39d7889eb5.png"> Powered <em>by</em> <a href="https://digitalocean.com" target="_blank">DigitalOcean</a></span>
-
-            <ul id="social-menu">
-                <li class="twitter"><a href="https://twitter.com/CWMarMenor"><span class="hidden">Twitter</span></a></li>
-                <li class="facebook"><a href="https://www.facebook.com/CWMarMenor"><span class="hidden">Facebook</span></a></li>
-            </ul>
-
-        </nav>
+      <nav id="footer-nav" role="navigation">
         <div class="clearfix"></div>
-    </footer>
+        <span class="poweredby"> © 2015. Todos los derechos reservados. Construido con <a href="https://github.com/Kikobeats/Itch" target="_blank">Itch</a> usando <a href="https://ghost.org/" target="_blank">Ghost</a>.</span>
 
+        <ul id="social-menu">
+          <li class="twitter"><a href="https://twitter.com/CWMarMenor"><span class="hidden">Twitter</span></a></li>
+          <li class="facebook"><a href="https://www.facebook.com/CWMarMenor"><span class="hidden">Facebook</span></a></li>
+        </ul>
+      </nav>
+      <div class="clearfix"></div>
+    </footer>
     {{ghost_foot}}
-
-    <script type="text/javascript">
-      function replaceHeader (content) {
-        $(document).ready(function() {
-          $("#global-header > nav > .wrapper").replaceWith(content);
-          $("#global-header > nav > .wrapper").fadeIn();
-        });
-      }
-    </script>
-    <script src="https://ghost.org/navigation/"></script>
     <script type="text/javascript" src="{{asset "js/application.js"}}"></script>
     <script type="text/javascript" src="{{asset "js/itch.js"}}"></script>
-
     {{! Twitter buttons }}
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
     {{! Facebook buttons }}
@@ -140,8 +91,9 @@
       js = d.createElement(s); js.id = id;
       js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=596756540369391";
       fjs.parentNode.insertBefore(js, fjs);
-    }(document, 'script', 'facebook-jssdk'));</script>
+      }(document, 'script', 'facebook-jssdk'));
+    </script>
     {{! Google+ buttons }}
     <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
-</body>
+  </body>
 </html>
diff --git a/index.hbs b/index.hbs
@@ -26,7 +26,7 @@
                 <p>{{excerpt words="55"}}&hellip;</p>
             </section>
             <footer class="more-links">
-                <a class="read-more button-save" href="{{url}}">Read More</a>
+                <a class="read-more button-save" href="{{url}}">Leer Más</a>
                 <div class="right">
                     <a href="https://twitter.com/share" class="twitter-share-button" data-url="{{url absolute="true"}}" data-text="{{title}}" data-via="TryGhost" data-related="TryGhost">Tweet</a>
                     <div class="fb-like" data-href="{{url absolute="true"}}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

diff --git a/partials/navigation.hbs b/partials/navigation.hbs
@@ -0,0 +1,18 @@
+<nav role="navigation">
+  <div class="wrapper">
+    <a class="ghost-logo animated-logo" href="/" >
+      <span>CWMarMenor</span>
+    </a>
+    <button type="button" class="mobile-menu" data-toggle="collapse" data-target=".navbar-collapse">
+      <span class="hidden">Menu</span>
+    </button>
+
+    <ul id="main-menu" class="navbar-collapse collapse">
+      {{#foreach navigation}}
+      <li class="nav-{{slug}} {{#if current}} nav-current{{/if}}">
+        <a href="{{this.url}}">{{label}}</a>
+      </li>
+      {{/foreach}}
+    </ul>
+  </div>
+</nav>
diff --git a/partials/pagination.hbs b/partials/pagination.hbs
@@ -0,0 +1,9 @@
+<nav class="pagination" role="navigation">
+  {{#if prev}}
+    <a class="newer-posts" href="{{page_url prev}}">&larr; Publicaciones Recientes</a>
+  {{/if}}
+  <span class="page-number">Página {{page}} de {{pages}}</span>
+  {{#if next}}
+    <a class="older-posts" href="{{page_url next}}">Publicaciones Anteriores &rarr;</a>
+  {{/if}}
+</nav>
diff --git a/post.hbs b/post.hbs
@@ -6,15 +6,15 @@
         <article class="{{post_class}}">
         {{#post}}
 
-            <a class="post-meta" href="{{@blog.url}}">&larr; Back to the front page</a>
+            <a class="post-meta" href="{{@blog.url}}">&larr; Volver a la Portada</a>
 
             <h1 class="post-title">{{{title}}}</h1>
             <section class="post-meta">
                 <img class="author-img" src="{{author.image}}" alt="Author image" nopin="nopin" />
                 <span class="author-name">{{author}}</span>
                 on the
-                <time datetime="{{date format='YYYY-MM-DD'}}">{{date format="Do of MMMM YYYY"}}</time>
-                <span class="tags">{{tags prefix="in " separator=" "}}</span>
+                <time datetime="{{date format='YYYY-MM-DD'}}">{{date format="Do el MMMM YYYY"}}</time>
+                <span class="tags">{{tags prefix="• " separator=" "}}</span>
             </section>
 
             <section class="post-content">
@@ -73,7 +73,7 @@
                     {{/next_post}}
                 </section>
 
-                <a class="button-add large wide" data-toggle="modal" data-target="#blogsubscribe">Subscribe to Weekly Posts</a>
+                <a class="button-add large wide" data-toggle="modal" data-target="#blogsubscribe">Subscríbete y recíbelo en tu correo</a>
 
             </footer>