diff --git a/sass/style.scss b/sass/style.scss
index ca547d55074596bbdfbdfdeda0eea68fe7f13c23..54cdd7e03060e6d06b885032ef4aa0b3954ab28f 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -14,6 +14,11 @@ $link-color: color("light-blue", "darken-1");
@import "materialize.scss";
+/* overall page look */
+#content, .container.nav-wrapper {
+ width: 86%;
+}
+
/* Article list style */
.block.article {
overflow: hidden;
@@ -49,20 +54,9 @@ footer.page-footer {
overflow-y: hidden;
min-height: 100vh;
}
-#content {
- width: 86%;
- /*margin-left: 7%;
- margin-right: 7%;
- @media #{$medium-and-down} {
- margin-left: 5%;
- margin-right: 5%;
- width: 90%;
- }*/
-}
#content, #search {
margin-bottom: 90px;
margin-top: 104px;
-
}
html, body {
min-height: 100vh;
@@ -111,34 +105,70 @@ html, body {
}
/* top navigation */
+nav {
+ line-height: 64px;
+}
+@media #{$medium-and-down} {
+ nav {
+ line-height: 56px;
+ }
+}
+
nav.subnav {
- margin-top: 24px;
+ margin-top: -16px;
transition: 0.3s;
height: 40px;
+ position: absolute;
}
.show-subnav1 nav.subnav1, .show-subnav2 nav.subnav2 {
transition: 0.3s;
margin-top: 64px;
+ z-index: 4;
}
-
-
nav.subnav li {
height: 40px;
line-height: 40px;
}
-nav input[type="search"] {
- margin: 0;
+
+
+.toplinks > a, .menu-icon {
+ display: block;
+ padding: 0 15px;
}
-.brand-logo {
- height:64px;
+.toplinks > a:hover, .menu-icon:hover {
+ background-color: rgba(0, 0, 0, 0.1);
}
.toplinks {
- z-index: 3; position: absolute; right: 0;
- div {
- padding: 0 15px;
+ z-index: 3;
+ position: absolute;
+ right: 0;
+}
+
+.search-icon svg, .menu-icon svg {
+ height: 64px;
+ width: 30px;
+}
+.search-icon, .menu-icon {
+ height: 64px;
+}
+@media #{$small-and-down} {
+ .search-icon svg, .menu-icon svg {
+ height: 56px;
+ }
+ .search-icon, .menu-icon {
+ height: 56px;
+ }
+}
+
+.hide-on-small-and-up {
+ display: none;
+}
+@media only screen and (max-width: 330px) {
+ .hide-on-ultra-small {
+ display: none;
}
- div.input-field {
- padding: 0;
+ .hide-on-small-and-up {
+ display: block;
}
}
@@ -165,11 +195,11 @@ h2#title {
margin-bottom: 1rem;
}
-.article {
- max-width: 800px;
- article {
- text-align: justify;
- }
+.type-article .container {
+ max-width: 1024px;
+}
+.article article {
+ text-align: justify;
}
th {
padding: 5px 5px 0px 5px;
diff --git a/static/theme/icon56.png b/static/theme/icon56.png
new file mode 100644
index 0000000000000000000000000000000000000000..17681d3aec3600e1773eeed727462336c40f8d4d
Binary files /dev/null and b/static/theme/icon56.png differ
diff --git a/templates/partials/header.html.nunjucks b/templates/partials/header.html.nunjucks
index e7b0460f34088d1f7fd4e49a033691cd98aeed82..4bafb5c1264814414165b199b0c26099363cf5cb 100644
--- a/templates/partials/header.html.nunjucks
+++ b/templates/partials/header.html.nunjucks
@@ -38,34 +38,58 @@
{{ metadata.headerextra | safe }}
</head>
{% set subnav1 = (file == "clanek/2008/podporuji-nas" or file == "clanek/2008/o-radioklubu" or file == "clanek/2008/krouzek-mladeze" or file == "clanek/2008/podporuji-nas" or file == "clanek/2016/pro-cleny-rk") %}
-<body class="{{ "show-subnav1" if subnav1 else "show-subnav2" }}">
+<body {{ "class=type-article" if type=="article" }}>
{% import "partials/svgs" as svgs %}
<div id="all">
<!-- Top nav -->
- <nav class="light-blue supernav" role="navigation" style="z-index:2;position:absolute;">
+ <nav class="light-blue supernav" role="navigation" style="z-index:5;position:absolute;">
<div class="nav-wrapper container">
- <a href="#" data-activates="nav-mobile" class="button-collapse" style="margin-top: .5rem;">
- {{ svgs.menu("#fff",2,"rem") }}
+ <a data-activates="nav-mobile" class="menu-icon hide-on-large-only" style="float:left">
+ {{ svgs.menu("#fff",false) }}
</a>
<div style="z-index: 2" class="brand-logo">
<a id="logo-container" href="{{ config.baseurl }}/" >
- <img class="hide-on-med-and-up" src="{{ config.baseurl }}/theme/logo56.png">
+ <img class="hide-on-small-and-up" src="{{ config.baseurl }}/theme/icon56.png">
+ <img class="hide-on-med-and-up hide-on-ultra-small" src="{{ config.baseurl }}/theme/logo56.png">
<img class="hide-on-small-only" src="{{ config.baseurl }}/theme/logo64.png">
</a>
</div>
- <div style="" class="toplinks">
- <div class="hide-on-med-and-down left {{ "light-blue lighten-1" if subnav1 else "" }}">
- <a href="{{ config.baseurl }}/clanek/2008/o-radioklubu">Informace</a>
- </div>
- <div class="hide-on-med-and-down left {{ "" if subnav1 else "light-blue lighten-1" }}">
- <a href="{{ config.baseurl }}/tag/clanek">Články</a>
- </div>
- <div class="search-icon left" style="padding-top: .5rem">
- {{ svgs.search("#fff",2,"rem") }}
- </div>
+ <div class="toplinks">
+ <a class="hide-on-med-and-down left" id="o-nas">
+ O nás
+ </a>
+ <a class="hide-on-med-and-down left" id="clanky">
+ Články
+ </a>
+ <a class="search-icon left">
+ {{ svgs.search("#fff",false) }}
+ </a>
</div>
</div>
</nav>
+ <script>
+ $("#o-nas").click(function() {
+ var body = $("body");
+ body.removeClass("show-subnav2");
+ if(body.hasClass("show-subnav1"))
+ body.removeClass("show-subnav1");
+ else
+ body.addClass("show-subnav1")
+ });
+ $("#clanky").click(function() {
+ var body = $("body");
+ body.removeClass("show-subnav1");
+ if(body.hasClass("show-subnav2"))
+ body.removeClass("show-subnav2");
+ else
+ body.addClass("show-subnav2")
+ });
+ $("body").click(function(e) {
+ if(!($(e.target).parents("a").length || $(e.target).is("a"))) {
+ $("body").removeClass("show-subnav2").removeClass("show-subnav1");
+ }
+ });
+ </script>
<!-- Side nav -->
<ul id="nav-mobile" class="side-nav collapsible">
<li class="no-padding">
@@ -78,11 +102,11 @@
</ul></div>
</li>
<li class="no-padding">
- <a class="collapsible-header {{ "active" if not subnav1 }} waves-effect waves-teal">Články</a>
+ <a class="collapsible-header {{ "active" if not subnav1 }} waves-effect waves-teal">O nás</a>
<div class="collapsible-body"><ul>
- <li><a href="{{ config.baseurl }}/tag/zavody">Akce a závody</a></li>
+ <li><a href="{{ config.baseurl }}/tag/clanek">VÅ¡echny Älánky</a></li>
+ <li><a href="{{ config.baseurl }}/tag/zavody">Závody</a></li>
<li><a href="{{ config.baseurl }}/tag/zacinajicim">ZaÄÃnajÃcÃm</a></li>
- <li><a href="{{ config.baseurl }}/tag/ham-konstrukce">HAM konstrukce</a></li>
<li><a href="{{ config.baseurl }}/tag/bastleni">BastlenÃ</a></li>
<li><a href="{{ config.baseurl }}/tag/programovani">ProgramovánÃ</a></li>
</ul></div>
@@ -90,7 +114,7 @@
</ul>
<!-- Bottom nav -->
- <nav class="light-blue lighten-1 subnav subnav1 hide-on-med-and-down" role="navigation" style="z-index:1;position:absolute;">
+ <nav class="light-blue lighten-1 subnav subnav1 hide-on-med-and-down" role="navigation">
<div class="nav-wrapper container">
<ul class="right">
<li {{ "class='lighten-2 light-blue'" | safe if (file == "clanek/2008/o-radioklubu") }}><a href="{{ config.baseurl }}/clanek/2008/o-radioklubu">O Radioklubu</a></li>
@@ -101,12 +125,12 @@
</div>
</nav>
<!-- Bottom nav 2 -->
- <nav class="light-blue lighten-1 subnav subnav2 hide-on-med-and-down hidden" role="navigation" style="z-index:1;position:absolute;">
+ <nav class="light-blue lighten-1 subnav subnav2 hide-on-med-and-down hidden" role="navigation">
<div class="nav-wrapper container">
<ul class="right">
- <li><a href="{{ config.baseurl }}/tag/zavody">Akce a závody</a></li>
- <li><a href="{{ config.baseurl }}/tag/zacinajicim">ZaÄÃnajÃcÃm radioamatérům</a></li>
- <li><a href="{{ config.baseurl }}/tag/ham-konstrukce">HAM konstrukce</a></li>
+ <li><a href="{{ config.baseurl }}/tag/clanek">VÅ¡echny Älánky</a></li>
+ <li><a href="{{ config.baseurl }}/tag/zavody">Závody</a></li>
+ <li><a href="{{ config.baseurl }}/tag/zacinajicim">ZaÄÃnajÃcÃm</a></li>
<li><a href="{{ config.baseurl }}/tag/bastleni">BastlenÃ</a></li>
<li><a href="{{ config.baseurl }}/tag/programovani">ProgramovánÃ</a></li>
</ul>
diff --git a/templates/partials/search.html.nunjucks b/templates/partials/search.html.nunjucks
index 4f7e1c15930ac1335a0b6db0a7832f48efc22e2c..4a931d68b1e4dc9c4d7b6c7d85795202b91cf799 100644
--- a/templates/partials/search.html.nunjucks
+++ b/templates/partials/search.html.nunjucks
@@ -1,4 +1,4 @@
-<div class="hidden" id="search">
+<div class="hidden" id="search" style="display:none">
<div><div><div><div style="background-color: white">
<div id="searchbox" style="padding: 0 10px;">
<form>
@@ -57,7 +57,6 @@
(function() {
var searchHeight = $('#search').height();
var adjustHeight = function() {
- console.log("adjH");
var newh = $('#search').height();
if(newh != searchHeight) {
searchHeight = newh;
@@ -67,10 +66,13 @@
}
}
}
- $("#search").bind('DOMSubtreeModified', adjustHeight);
+ // Resize page on searching
+ $("#search > div").bind('DOMSubtreeModified', adjustHeight);
+ // Search showing
$(".search-icon").on("click", function() {
- var doer = function() {
+ $("#search").show();
+ setTimeout(function() {
$("#search").removeClass("hidden");
$("body").append('');
$("#search-overlay").show().addClass("shown");
@@ -78,18 +80,17 @@
setTimeout(function() {
$("#searchbox input").focus();
}, 320);
- };
- if(window.requestAnimationFrame)
- window.requestAnimationFrame(doer);
- else
- doer();
+ },0);
+ });
+ // Search hiding on search overlay click
+ $("#search-overlay").click(function() {
+ $("#search-overlay").removeClass("shown");
+ $("#search").addClass("hidden");
+ setTimeout(function() {
+ adjustHeight();
+ $("#search").hide();
+ },320);
});
})();
- $("#search-overlay").click(function() {
- $("#search-overlay").removeClass("shown");
- $("#search").addClass("hidden");
- setTimeout(function() {
- adjustHeight();
- },320);
- });
+
</script>
diff --git a/templates/partials/svgs.html.nunjucks b/templates/partials/svgs.html.nunjucks
index 25ad0b12c61f3f1bc6c27901b8b356c13fb2236e..d03b66ba0cee75ef598cc803b68de6ec1cbe2671 100644
--- a/templates/partials/svgs.html.nunjucks
+++ b/templates/partials/svgs.html.nunjucks
@@ -1,5 +1,5 @@
{% macro symbol(color, size, unit, d) %}
- <svg style="margin-top:auto;margin-bottom:auto;display:block;width:{{ size }}{{unit}};height:{{ size }}{{unit}}; display:inline-block" viewBox="0 0 24 24">
+ <svg style="margin-top:auto;margin-bottom:auto;display:block;{% if size %}width:{{ size }}{{unit}};height:{{ size }}{{unit}};{% endif %}display:inline-block" viewBox="0 0 24 24">
<path {% if color %}fill="{{ color }}"{% endif %} d="{{ d }}" />
</svg>
{% endmacro %}