From daabf744069d5615dc32196688f4b3ac448db288 Mon Sep 17 00:00:00 2001
From: Starbeamrainbowlabs <sbrl@starbeamrainbowlabs.com>
Date: Fri, 17 Jul 2015 21:04:24 +0100
Subject: [PATCH] organisation of theme css & more menu implementation

---
 core.php              |  6 ++++--
 index.php             | 27 +++++++++++++++++++++------
 settings.fragment.php | 21 +++++++++++++++++----
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/core.php b/core.php
index 9bfdae1..d3769ad 100644
--- a/core.php
+++ b/core.php
@@ -464,8 +464,10 @@ class page_renderer
 						break;
 					
 					case "menu":
-						$result .= "<span class='inflexible nav-more'>More...</span>";
-						// todo Add the submenu with $nav_links_extra
+						$result .= "<span class='inflexible nav-more'><label for='more-menu-toggler'>More...</label>
+<input type='checkbox' class='off-screen' id='more-menu-toggler' />";
+						$result .= page_renderer::render_navigation_bar($nav_links_extra, [], "nav-more-menu");
+						$result .= "</span>";
 						break;
 					
 					// It isn't a keyword, so just output it directly
diff --git a/index.php b/index.php
index d123ec7..3977efa 100644
--- a/index.php
+++ b/index.php
@@ -130,22 +130,35 @@ $settings->nav_links_bottom = [
 // inside a <style> tag. This may also be a url - urls will be referenced via a
 // <link rel='stylesheet' /> tag.
 $settings->css = "body { margin: 2rem 0; font-family: sans-serif; color: #111111; background: #eee8f2; }
+
+nav { display: flex; background-color: #8a62a7; color: #ffa74d;  }
 nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); }
 nav.bottom { position: absolute; left: 0; right: 0; box-shadow: inset 0 0.8rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); }
-nav { display: flex; background-color: #8a62a7; color: #ffa74d;  }
+
 nav > span { flex: 1; text-align: center; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; border-left: 3px solid #442772; border-right: 3px solid #442772; }
-nav a { text-decoration: none; font-weight: bolder; color: inherit; }
+nav:not(.nav-more-menu) a { text-decoration: none; font-weight: bolder; color: inherit; }
 .nav-divider { color: transparent; }
-.nav-more { background-color: #442772; }
+
+.nav-more { position: relative; background-color: #442772; }
+.nav-more label { cursor: pointer; }
+.nav-more-menu { display: none; position: absolute; flex-direction: column; top: 2.6rem; right: -0.2rem; background-color: #8a62a7; border-top: 3px solid #442772; border-bottom: 3px solid #442772;}
+input[type=checkbox]:checked ~ .nav-more-menu { display: block; box-shadow: 0.4rem 0.4rem 1rem 0 rgba(50, 50, 50, 0.5); }
+.nav-more-menu span { min-width: 8rem; }
+
 .inflexible { flex: none; }
+.off-screen { position: absolute; top: -1000px; left: -1000px;}
+
 input[type=search] { width: 14rem; padding: 0.3rem 0.4rem; font-size: 1rem; color: white; background: rgba(255, 255, 255, 0.4); border: 0; border-radius: 0.3rem; }
 input[type=search]::-webkit-input-placeholder { color : rgba(255, 255, 255, 0.75); }
+input[type=button], input[type=submit] { cursor: pointer; }
+
 h1 { text-align: center; }
 .sitename { margin-top: 5rem; margin-bottom: 3rem; font-size: 2.5rem; }
 main { padding: 2rem; background: #faf8fb; box-shadow: 0 0.1rem 1rem 0.3rem rgba(50, 50, 50, 0.5); }
+
 textarea { width: 100%; min-height: 35rem; }
 textarea ~ input[type=submit] { width: calc(100% + 0.5rem); padding: 0.5rem; font-weight: bolder; }
-input[type=button], input[type=submit] { cursor: pointer; }
+
 footer { padding: 2rem; }
 ";
 
@@ -653,8 +666,10 @@ class page_renderer
 						break;
 					
 					case "menu":
-						$result .= "<span class='inflexible nav-more'>More...</span>";
-						// todo Add the submenu with $nav_links_extra
+						$result .= "<span class='inflexible nav-more'><label for='more-menu-toggler'>More...</label>
+<input type='checkbox' class='off-screen' id='more-menu-toggler' />";
+						$result .= page_renderer::render_navigation_bar($nav_links_extra, [], "nav-more-menu");
+						$result .= "</span>";
 						break;
 					
 					// It isn't a keyword, so just output it directly
diff --git a/settings.fragment.php b/settings.fragment.php
index 6ac5566..934dc68 100644
--- a/settings.fragment.php
+++ b/settings.fragment.php
@@ -127,22 +127,35 @@ $settings->nav_links_bottom = [
 // inside a <style> tag. This may also be a url - urls will be referenced via a
 // <link rel='stylesheet' /> tag.
 $settings->css = "body { margin: 2rem 0; font-family: sans-serif; color: #111111; background: #eee8f2; }
+
+nav { display: flex; background-color: #8a62a7; color: #ffa74d;  }
 nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); }
 nav.bottom { position: absolute; left: 0; right: 0; box-shadow: inset 0 0.8rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); }
-nav { display: flex; background-color: #8a62a7; color: #ffa74d;  }
+
 nav > span { flex: 1; text-align: center; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; border-left: 3px solid #442772; border-right: 3px solid #442772; }
-nav a { text-decoration: none; font-weight: bolder; color: inherit; }
+nav:not(.nav-more-menu) a { text-decoration: none; font-weight: bolder; color: inherit; }
 .nav-divider { color: transparent; }
-.nav-more { background-color: #442772; }
+
+.nav-more { position: relative; background-color: #442772; }
+.nav-more label { cursor: pointer; }
+.nav-more-menu { display: none; position: absolute; flex-direction: column; top: 2.6rem; right: -0.2rem; background-color: #8a62a7; border-top: 3px solid #442772; border-bottom: 3px solid #442772;}
+input[type=checkbox]:checked ~ .nav-more-menu { display: block; box-shadow: 0.4rem 0.4rem 1rem 0 rgba(50, 50, 50, 0.5); }
+.nav-more-menu span { min-width: 8rem; }
+
 .inflexible { flex: none; }
+.off-screen { position: absolute; top: -1000px; left: -1000px;}
+
 input[type=search] { width: 14rem; padding: 0.3rem 0.4rem; font-size: 1rem; color: white; background: rgba(255, 255, 255, 0.4); border: 0; border-radius: 0.3rem; }
 input[type=search]::-webkit-input-placeholder { color : rgba(255, 255, 255, 0.75); }
+input[type=button], input[type=submit] { cursor: pointer; }
+
 h1 { text-align: center; }
 .sitename { margin-top: 5rem; margin-bottom: 3rem; font-size: 2.5rem; }
 main { padding: 2rem; background: #faf8fb; box-shadow: 0 0.1rem 1rem 0.3rem rgba(50, 50, 50, 0.5); }
+
 textarea { width: 100%; min-height: 35rem; }
 textarea ~ input[type=submit] { width: calc(100% + 0.5rem); padding: 0.5rem; font-weight: bolder; }
-input[type=button], input[type=submit] { cursor: pointer; }
+
 footer { padding: 2rem; }
 ";