Header Logo Menu with animated links to hack.pledge and hack.summit

pskb_website/static/css/base.css

@@ -7,6 +7,108 @@ body {
   letter-spacing: -.015em;
 }
 
+/* Logo-menu and effects */
+
+.hack-links {
+    margin: 0;
+    padding: 0;
+}
+
+.hack-links a {
+    display: block;
+    padding: 0;
+}
+
+.navbar-brand {
+    z-index: 99999;
+    position: relative;
+}
+
+.navbar-brand img {
+    display: inline-block;
+}
+
+.navbar .navbar-brand {
+    background-color: #fff;
+}
+
+.navbar-inverse .navbar-brand {
+    background-color: #222;
+}
+
+.hack-links-plus-icon {
+    z-index: 99999;
+    padding: 0;
+    margin-top: 8px;
+    cursor: pointer;
+
+    -moz-transform: rotate(0);
+    -ms-transform: rotate(0);
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+
+    -moz-transition: -moz-transform 0.4s cubic-bezier(0.08, 1.09, 0.64, 1.12);
+    -o-transition: -o-transform 0.4s cubic-bezier(0.08, 1.09, 0.64, 1.12);
+    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.08, 1.09, 0.64, 1.12);
+    transition: transform 0.4s cubic-bezier(0.08, 1.09, 0.64, 1.12);
+}
+
+.hack-links:hover .hack-links-plus-icon, .hack-links:focus .hack-links-plus-icon, .hack-links:active .hack-links-plus-icon {
+    -moz-transform: rotate(225deg);
+    -ms-transform: rotate(225deg);
+    -webkit-transform: rotate(225deg);
+    transform: rotate(225deg);
+}
+
+.external-hack-links img {
+    width: 200px;
+}
+
+.hack-links .external-hack-links {
+    z-index: 88888;
+    position: absolute;
+    width: 240px;
+    height: 110px;
+    top: -160px;
+    left: 0;
+    padding: 10px 0;
+    opacity: 0;
+
+    -webkit-transition: -webkit-transform 0.2s cubic-bezier(.08,1.09,.64,1.12);
+    -moz-transition: -moz-transform 0.2s cubic-bezier(.08,1.09,.64,1.12);
+    -o-transition: -o-transform 0.2s cubic-bezier(.08,1.09,.64,1.12);
+    transition: transform 0.2s cubic-bezier(.08,1.09,.64,1.12);
+}
+
+.hack-links:hover .external-hack-links {
+    transform: translateY(200px);
+    padding-bottom: 0;
+    opacity: 1;
+}
+
+.navbar .hack-links:hover .external-hack-links {
+    background-color: #fff;
+    border: 1px solid #eee;
+    border-top: 0;
+}
+
+.navbar .hack-links:hover .external-hack-links img {
+    filter: invert(100%);
+    -webkit-filter: invert(100%);
+}
+
+.navbar-inverse .hack-links:hover .external-hack-links {
+    background-color: #222;
+    border: 1px solid #111;
+    border-top: 0;
+}
+
+.navbar-inverse .hack-links:hover .external-hack-links img {
+    filter: invert(0%);
+    -webkit-filter: invert(0%);
+}
+
+
 /* Default color of Pluralsight buttons */
 .btn-primary,
 .btn-primary:focus,

pskb_website/static/css/vendor/editor/design.css

@@ -165,7 +165,7 @@
 }
 
 .body-fs .editor-preview-wrapper {
-    z-index: 10000;
+    z-index: 9999990;
     position: fixed !important;
     height: auto !important;
     min-height: 100%;
@@ -184,7 +184,7 @@
 }
 
 .body-fs .preview-column {
-    z-index: 10002;
+    z-index: 9999992;
 }
 
 .body-fs #editor-wrapper {
@@ -224,7 +224,7 @@
 }
 
 .body-fs .editor-footer, .body-fs .preview-footer2 {
-    z-index: 10001;
+    z-index: 9999991;
     position: absolute;
     bottom: 0;
     left: 0;

pskb_website/templates/nav_links.html

@@ -1,11 +1,27 @@
                     <div class="navbar-header">
-                        <a class="navbar-brand" href="{{url_for('index')}}">
-                            {% if g.header_white %}
-                            <img src="{{url_for('static', filename='img/light-logo.png')}}" width="200" height="40" alt="hack.guides()">
-                            {% else %}
-                            <img src="{{url_for('static', filename='img/dark-logo.png')}}" width="200" height="41" alt="hack.guides()">
-                            {% endif %}
-                        </a>
+                        <div class="hack-links">
+                            <a class="navbar-brand" href="{{url_for('index')}}">
+                                {% if g.header_white %}
+                                <img src="{{url_for('static', filename='img/logos/hackguides-470x80.png')}}" width="200" height="43" alt="hack.guides()">
+                                {% else %}
+                                <img src="{{url_for('static', filename='img/logos/hackguides-470x80.png')}}" width="200" height="43" alt="hack.guides()">
+                                {% endif %}
+                            </a>
+                            <a class="navbar-brand" href="#">
+                                <svg class="hack-links-plus-icon" width='20px', height='20px', viewbox='0 0 51 50', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', xmlns:sketch='http://www.bohemiancoding.com/sketch/ns'>
+                                    <g stroke='none', stroke-width='1', fill-rule='evenodd', fill='#8A8B87'>
+                                    <path d='M25.033,0 C11.226,0 0.033,11.19 0.033,25 C0.033,38.81 11.226,50 25.033,50 C38.841,50 50.033,38.81 50.033,25 C50.033,11.19 38.841,0 25.033,0 L25.033,0 Z M25.033,1.6 C37.936,1.6 48.434,12.1 48.434,25 C48.434,37.9 37.936,48.4 25.033,48.4 C12.131,48.4 1.633,37.9 1.633,25 C1.633,12.1 12.131,1.6 25.033,1.6 L25.033,1.6 Z'></path>
+                                    <path d='M26.033,24 L26.033,10 L24.033,10 L24.033,24 L10.033,24 L10.033,26 L24.033,26 L24.033,40 L26.033,40 L26.033,26 L40.033,26 L40.033,24 L26.033,24 Z'></path>
+                                    </g>
+                                </svg>
+                            </a>
+
+                            <div class="external-hack-links">
+                                <a class="hacksummit" href="http://hacksummit.org"><img src="{{ url_for('static', filename='img/logos/hacksummit-470x80.png') }}" alt="hack.summit()" width="200" height="43"></a>
+
+                                <a class="hackpledge" href="http://hackpledge.org"><img src="{{ url_for('static', filename='img/logos/hackpledge-470x80.png') }}" alt="hack.pledge()" width="200" height="43"></a>
+                            </div>
+                        </div>
 
                         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                             <span class="sr-only">Toggle navigation</span>