tagcloud + using uikit 2.27.4 + wip tag-filtering navbar buttons

static/css/main.css

@@ -1,3 +1,16 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 800;
+  src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'), url(../fonts/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Oswald Regular'), local('Oswald-Regular'), url(../fonts/Y_TKV6o8WovbUd3m_X9aAA.ttf) format('truetype');
+}
+
 html, h1, h2, h3 {
   font-family: "Oswald", "Helvetica Neue",Helvetica,Arial,sans-serif; }
 html {
@@ -72,10 +85,14 @@ a {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
 
+
 .mg-header {
-  padding: 1em 0;
   background-color: #39B39D; }
 
+.mg-header-content {
+  display: flex;
+  justify-content: space-between; }
+
 .mg-brand {
   font-family: "Open Sans", sans-serif;
   font-style: italic;
@@ -94,11 +111,33 @@ a {
 .mg-tagline {
   font-family: "Open Sans", sans-serif;
   font-weight: 800;
-  padding: 1em 0 0;
   color: white; }
-  @media (min-width: 1220px) {
+
-    .mg-tagline {
+.mg-tag-filters {
-      padding-left: 0 !important; } }
+  flex: 1;
+  display: flex;
+  justify-content: flex-end; }
+.mg-tag-filter {
+  background-color: transparent;
+  border: 1px solid white;
+  overflow: visible;
+  color: inherit;
+  font: inherit;
+  padding: .5rem 1.5rem;
+  margin: .5rem 1rem;
+  text-transform: uppercase; }
+.mg-tag-filter:hover {
+  border-color: #b2b2b2;
+  text-decoration: none;}
+.mg-tag-filter:hover {
+  text-decoration: none; }
+.mg-tag-filter:not(:disabled) {
+  cursor: pointer; }
+
+.mg-nav-small {
+  width: 100% }
+.mg-nav-menu-toggle-small {
+  flex: 1; }
 
 .mg-main {
   margin-top: 4em;
@@ -207,3 +246,29 @@ a {
   color: #000;
   padding: 0.2em 0; }
 
+
+.mg-tagcloud {
+  list-style: none;
+  padding: 0;
+  width: 80%;
+  text-align: center; }
+
+.mg-cloud-tag {
+  display: inline-block;
+  padding: .2rem;
+  line-height: 110%; }
+
+.mg-cloud-tag-size-5 {
+  font-size: 140%; }
+.mg-cloud-tag-size-4 {
+  font-size: 180%; }
+.mg-cloud-tag-size-3 {
+  font-size: 220%; }
+.mg-cloud-tag-size-2 {
+  font-size: 260%; }
+.mg-cloud-tag-size-1 {
+  font-size: 300%; }
+
+.mg-cloud-tag-badge {
+  color: #FF6600; }
+

static/css/uikit-2.27.4-search.min.css

@@ -0,0 +1,2 @@
+/*! UIkit 2.27.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+.uk-search{display:inline-block;position:relative;margin:0}.uk-search:before{content:"\f002";position:absolute;top:0;left:0;width:30px;line-height:30px;text-align:center;font-family:FontAwesome;font-size:14px;color:rgba(0,0,0,.2)}.uk-search-field::-moz-focus-inner{border:0;padding:0}.uk-search-field::-webkit-search-cancel-button,.uk-search-field::-webkit-search-decoration{-webkit-appearance:none}.uk-search-field::-ms-clear{display:none}.uk-search-field::-moz-placeholder{opacity:1}.uk-search-field{box-sizing:border-box;margin:0;border-radius:0;font:inherit;color:#444;-webkit-appearance:none;width:120px;height:30px;padding:0 0 0 30px;border:1px solid transparent;background:rgba(0,0,0,0);-webkit-transition:all .2s linear;transition:all .2s linear;vertical-align:middle}.uk-search-field:-ms-input-placeholder{color:#999!important}.uk-search-field::-moz-placeholder{color:#999}.uk-search-field::-webkit-input-placeholder{color:#999}.uk-search-field:focus{outline:0}.uk-search-field:focus,.uk-search.uk-active .uk-search-field{width:180px}.uk-dropdown-search{width:300px;margin-top:0;background:#f5f5f5;color:#444}.uk-open>.uk-dropdown-search{-webkit-animation:uk-slide-top-fixed .2s ease-in-out;animation:uk-slide-top-fixed .2s ease-in-out}.uk-navbar-flip .uk-dropdown-search{margin-top:5px;margin-right:-15px}.uk-nav-search>li>a{color:#444}.uk-nav-search>li.uk-active>a{background:#00a8e6;color:#fff;outline:0}.uk-nav-search .uk-nav-header{color:#999}.uk-nav-search .uk-nav-divider{border-top:1px solid #ddd}.uk-nav-search ul a{color:#07D}.uk-nav-search ul a:hover{color:#059}.uk-offcanvas .uk-search{display:block;margin:20px 15px}.uk-offcanvas .uk-search:before{color:#777}.uk-offcanvas .uk-search-field{width:100%;border-color:transparent;background:#1a1a1a;color:#ccc}.uk-offcanvas .uk-search-field:-ms-input-placeholder{color:#777!important}.uk-offcanvas .uk-search-field::-moz-placeholder{color:#777}.uk-offcanvas .uk-search-field::-webkit-input-placeholder{color:#777}

static/js/uikit-2.23.0-search.min.js

@@ -1,2 +0,0 @@
-/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
-!function(e){var s;window.UIkit&&(s=e(UIkit)),"function"==typeof define&&define.amd&&define("uikit-search",["uikit"],function(){return s||e(UIkit)})}(function(e){"use strict";e.component("search",{defaults:{msgResultsHeader:"Search Results",msgMoreResults:"More Results",msgNoResults:"No results found",template:'<ul class="uk-nav uk-nav-search uk-autocomplete-results">                                      {{#msgResultsHeader}}<li class="uk-nav-header uk-skip">{{msgResultsHeader}}</li>{{/msgResultsHeader}}                                      {{#items && items.length}}                                          {{~items}}                                          <li data-url="{{!$item.url}}">                                              <a href="{{!$item.url}}">                                                  {{{$item.title}}}                                                  {{#$item.text}}<div>{{{$item.text}}}</div>{{/$item.text}}                                              </a>                                          </li>                                          {{/items}}                                          {{#msgMoreResults}}                                              <li class="uk-nav-divider uk-skip"></li>                                              <li class="uk-search-moreresults" data-moreresults="true"><a href="#" onclick="jQuery(this).closest(\'form\').submit();">{{msgMoreResults}}</a></li>                                          {{/msgMoreResults}}                                      {{/end}}                                      {{^items.length}}                                        {{#msgNoResults}}<li class="uk-skip"><a>{{msgNoResults}}</a></li>{{/msgNoResults}}                                      {{/end}}                                  </ul>',renderer:function(e){var s=this.options;this.dropdown.append(this.template({items:e.results||[],msgResultsHeader:s.msgResultsHeader,msgMoreResults:s.msgMoreResults,msgNoResults:s.msgNoResults})),this.show()}},boot:function(){e.$html.on("focus.search.uikit","[data-uk-search]",function(){var s=e.$(this);s.data("search")||e.search(s,e.Utils.options(s.attr("data-uk-search")))})},init:function(){var s=this;this.autocomplete=e.autocomplete(this.element,this.options),this.autocomplete.dropdown.addClass("uk-dropdown-search"),this.autocomplete.input.on("keyup",function(){s.element[s.autocomplete.input.val()?"addClass":"removeClass"]("uk-active")}).closest("form").on("reset",function(){s.value="",s.element.removeClass("uk-active")}),this.on("selectitem.uk.autocomplete",function(e,t){t.url?location.href=t.url:t.moreresults&&s.autocomplete.input.closest("form").submit()}),this.element.data("search",this)}})});

static/js/uikit-2.27.4-search.min.js

@@ -0,0 +1,2 @@
+/*! UIkit 2.27.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+!function(e){var s;window.UIkit2&&(s=e(UIkit2)),"function"==typeof define&&define.amd&&define("uikit-search",["uikit"],function(){return s||e(UIkit2)})}(function(e){"use strict";e.component("search",{defaults:{msgResultsHeader:"Search Results",msgMoreResults:"More Results",msgNoResults:"No results found",template:'<ul class="uk-nav uk-nav-search uk-autocomplete-results">                                      {{#msgResultsHeader}}<li class="uk-nav-header uk-skip">{{msgResultsHeader}}</li>{{/msgResultsHeader}}                                      {{#items && items.length}}                                          {{~items}}                                          <li data-url="{{!$item.url}}">                                              <a href="{{!$item.url}}">                                                  {{{$item.title}}}                                                  {{#$item.text}}<div>{{{$item.text}}}</div>{{/$item.text}}                                              </a>                                          </li>                                          {{/items}}                                          {{#msgMoreResults}}                                              <li class="uk-nav-divider uk-skip"></li>                                              <li class="uk-search-moreresults" data-moreresults="true"><a href="#" onclick="jQuery(this).closest(\'form\').submit();">{{msgMoreResults}}</a></li>                                          {{/msgMoreResults}}                                      {{/end}}                                      {{^items.length}}                                        {{#msgNoResults}}<li class="uk-skip"><a>{{msgNoResults}}</a></li>{{/msgNoResults}}                                      {{/end}}                                  </ul>',renderer:function(e){var s=this.options;this.dropdown.append(this.template({items:e.results||[],msgResultsHeader:s.msgResultsHeader,msgMoreResults:s.msgMoreResults,msgNoResults:s.msgNoResults})),this.show()}},boot:function(){e.$html.on("focus.search.uikit","[data-uk-search]",function(){var s=e.$(this);s.data("search")||e.search(s,e.Utils.options(s.attr("data-uk-search")))})},init:function(){var s=this;this.autocomplete=e.autocomplete(this.element,this.options),this.autocomplete.dropdown.addClass("uk-dropdown-search"),this.autocomplete.input.on("keyup",function(){s.element[s.autocomplete.input.val()?"addClass":"removeClass"]("uk-active")}).closest("form").on("reset",function(){s.value="",s.element.removeClass("uk-active")}),this.on("selectitem.uk.autocomplete",function(e,t){t.url?location.href=t.url:t.moreresults&&s.autocomplete.input.closest("form").submit()}),this.element.data("search",this)}})});

templates/base.html

@@ -47,14 +47,12 @@
 {% endif %}
 {% endblock %}
 <link href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed"/>
-<link href='//fonts.googleapis.com/css?family=Open+Sans:800italic' rel='stylesheet' type='text/css'>
+<link href='{{ SITEURL }}/theme/css/uikit-2.27.4.min.css' rel='stylesheet' type='text/css'>
-<link href='//fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/css/uikit.min.css">
 {% if not DISABLE_SEARCH %}
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/uikit/2.23.0/css/components/search.min.css">
+<link href='{{ SITEURL }}/theme/css/uikit-2.27.4-search.min.css' rel='stylesheet' type='text/css'>
 <link rel="stylesheet" href="{{ SITEURL }}/theme/css/tipuesearch.css">
 {% endif %}
-<link rel="stylesheet" href="{{ SITEURL }}/theme/css/solarized.css">
+<link rel="stylesheet" href="{{ SITEURL }}/theme/css/solarized-highlight.css">
 <link rel="stylesheet" href="{{ SITEURL }}/theme/css/main.css">
 
 <script src="{{ SITEURL }}/theme/js/html5shiv-3.7.2.min.js"></script>
@@ -66,12 +64,25 @@
 
 <header class="mg-header uk-navbar uk-navbar-attached">
 
-    <div class="uk-container uk-container-center">
+    <div class="mg-header-content uk-container uk-container-center">
 
-        <a class="mg-brand uk-navbar-brand uk-hidden-small" href="{{ SITEURL }}">{% if ALT_NAME %}{{ ALT_NAME }}{% else %}{{ SITENAME }}{% endif %}</a>
+        <div class="uk-hidden-small">
-        <div class="mg-tagline uk-navbar-content uk-hidden-small">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</div>
+            <a class="mg-brand uk-navbar-brand" href="{{ SITEURL }}">{% if ALT_NAME %}{{ ALT_NAME }}{% else %}{{ SITENAME }}{% endif %}</a>
-        <a class="uk-navbar-toggle uk-visible-small" href="#mg-offcanvas" data-uk-offcanvas></a>
+            <div class="mg-tagline uk-navbar-content">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</div>
-        <a class="mg-brand uk-navbar-brand uk-navbar-center uk-visible-small" href="{{ SITEURL }}">{% if ALT_NAME %}{{ ALT_NAME }}{% else %}{{ SITENAME }}{% endif %}</a>
+        </div>
+
+        {% if MG_FILTER_TAGS %}
+        <div class="mg-tag-filters uk-hidden-small">
+            {% for filter_tag in MG_FILTER_TAGS %}
+            <button class="mg-tag-filter">{{ filter_tag.replace('lang:', '') }}</button>
+            {% endfor %}
+        </div>
+        {% endif %}
+
+        <div class="mg-nav-small uk-visible-small">
+            <a class="mg-nav-menu-toggle-small uk-navbar-toggle" href="#mg-offcanvas" data-uk-offcanvas></a>
+            <a class="mg-brand uk-navbar-brand uk-navbar-center" href="{{ SITEURL }}">{% if ALT_NAME %}{{ ALT_NAME }}{% else %}{{ SITENAME }}{% endif %}</a>
+        </div>
 
     </div>
 </header>
@@ -241,9 +252,9 @@
 
 <script src="{{ SITEURL }}/theme/js/jquery-1.10.2.min.js"></script>
 <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
-<script src="{{ SITEURL }}/theme/js/uikit-2.23.0.min.js"></script>
+<script src="{{ SITEURL }}/theme/js/uikit-2.27.4.min.js"></script>
 {% if not DISABLE_SEARCH %}
-<script src="{{ SITEURL }}/theme/js/uikit-2.23.0-search.min.js"></script>
+<script src="{{ SITEURL }}/theme/js/uikit-2.27.4-search.min.js"></script>
 <script src="{{ SITEURL }}/theme/js/tipuesearch_set.js"></script>
 <script src="{{ SITEURL }}/theme/js/tipuesearch.js"></script>
 {% endif %}

templates/tagcloud.html

@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+{% block title %}Tag cloud{% endblock %}
+{% block description %}{% endblock %}
+
+{% block content %}
+<ul class="mg-tagcloud">
+    {% for tag in tag_cloud if not tag.0.name.startswith('lang:') %}
+        <li class="mg-cloud-tag mg-cloud-tag-size-{{ tag.1 }}">
+            <a href="{{ SITEURL }}/{{ tag.0.url }}">
+            {{ tag.0 }}
+            {% if TAG_CLOUD_BADGE %}
+            <span class="mg-cloud-tag-badge">({{ tag.2 }})</span>
+            {% endif %}
+            </a>
+        </li>
+    {% endfor %}
+</ul>
+{% endblock %}
+