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 {
-      padding-left: 0 !important; } }
+
+.mg-tag-filters {
+  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}