diff --git a/templates/base.twig b/templates/base.twig
index 21162c6dbf4b6f616e8c21fb0da9bc0702896cb0..6f5e7bced81ef0570df4ef4b162015cdb50776ff 100644
--- a/templates/base.twig
+++ b/templates/base.twig
@@ -5,11 +5,9 @@
<meta name="viewport" content="initial-scale=1.0">
<title>{{ pagetitle }}</title>
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/pure-min.css">
- <link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/src/side-menu.css">
- <link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/selectize.default.css" />
- <link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/font-awesome/css/font-awesome.css" />
+ <link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/selectize.default.css">
+ <link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="/{{ baseurlpath }}assets/css/src/default.css">
-
<link rel="icon" type="image/icon" href="/{{ baseurlpath }}resources/icons/favicon.ico">
{% if jquery and jquery.css %}
<link rel="stylesheet" media="screen" type="text/css" href="/{{ baseurlpath }}resources/uitheme1.8/jquery-ui.css" />
diff --git a/www/assets/css/src/default.css b/www/assets/css/src/default.css
index 9dfc764e5541e54ebb71157b52c6c1c952fa831c..dc01460996ccb3dd558507a46c5c1f659ec4c8fd 100644
--- a/www/assets/css/src/default.css
+++ b/www/assets/css/src/default.css
@@ -131,6 +131,165 @@ a.pure-button-red {
overflow: hidden;
}
+/* ***********************************************************
+SLIDING SIDE-MENU FOR SMALL SCREENS
+************************************************************ */
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout,
+#menu,
+#foot,
+.menu-link {
+ -webkit-transition: all 0.2s ease-out;
+ -moz-transition: all 0.2s ease-out;
+ -ms-transition: all 0.2s ease-out;
+ -o-transition: all 0.2s ease-out;
+ transition: all 0.2s ease-out;
+}
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout.active #menu {
+ right: 11em;
+ width: 11em;
+}
+#layout.active .menu-link {
+ right: 11em;
+}
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+#menu {
+ margin-right: -11em; /* "#menu" width */
+ width: 11em;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1000; /* so the menu or its navicon stays above all content */
+ background: #E8410C;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+/*
+All anchors inside the menu should be styled like this.
+*/
+#menu a {
+ color: #ffffff;
+ border: none;
+ padding: 0.6em 0em 0.6em 0.6em;
+}
+
+/*
+Remove all background/borders, since we are applying them to #menu.
+*/
+#menu .pure-menu,
+#menu .pure-menu ul {
+ border: none;
+ background: transparent;
+}
+
+/*
+Add that light border to separate items into groups.
+*/
+#menu .pure-menu ul,
+#menu .pure-menu .menu-item-divided {
+ border-top: 1px solid #db0100;
+}
+/*
+Change color of the anchor links on hover/focus.
+*/
+#menu .pure-menu li a:hover,
+#menu .pure-menu li a:focus {
+ background: #db0100;
+}
+
+/*
+This styles the selected menu item `<li>`.
+*/
+#menu .pure-menu-selected,
+#menu .pure-menu-heading {
+ background: #ffa86f;
+ color: black;
+}
+
+/*
+This styles a link within a selected menu item `<li>`.
+*/
+#menu .pure-menu-selected a {
+ color: #fff;
+}
+
+/*
+This styles the menu heading.
+*/
+#menu .pure-menu-heading {
+ font-size: 110%;
+ color: #fff;
+ margin: 0;
+}
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
+/*
+The button to open/close the Menu is custom-made and not part of Pure. Here's
+how it works:
+*/
+
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link {
+ position: relative;
+ display: block; /* show this only on small screens */
+ top: 0;
+ right: 0; /* "#menu width" */
+ background: transparent;
+ z-index: 10;
+ height: 2rem;
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ text-decoration: none;
+}
+.menu-link span:hover,
+.menu-link span:focus {
+ color: rgba(1,1,1,0.8);
+}
+.menu-link span {
+ position: relative;
+ display: block;
+ color: #FFFFFF;
+}
+.menu-link span,
+.menu-link span:before,
+.menu-link span:after {
+ background-color: transparent;
+}
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+@media screen and (max-width: 63.9375em) {
+ #layout.active {
+ position: relative;
+ right: 11em;
+ /* moves to right as many ems as the one used by the menu */
+ }
+ #menuLink.menu-link.active {
+ position: fixed;
+ right: 13em;
+ }
+ #foot.active {
+ margin-right: 11em;
+ }
+}
+
+
/* ***********************************************************
HEADER
************************************************************ */
diff --git a/www/assets/css/src/side-menu.css b/www/assets/css/src/side-menu.css
deleted file mode 100644
index 488ea9aa94471715ab1cad4a077cb4c35fab616b..0000000000000000000000000000000000000000
--- a/www/assets/css/src/side-menu.css
+++ /dev/null
@@ -1,160 +0,0 @@
-/*
-Add transition to containers so they can push in and out.
-*/
-#layout,
-#menu,
-#foot,
-.menu-link {
- -webkit-transition: all 0.2s ease-out;
- -moz-transition: all 0.2s ease-out;
- -ms-transition: all 0.2s ease-out;
- -o-transition: all 0.2s ease-out;
- transition: all 0.2s ease-out;
-}
-
-/*
-This is the parent `<div>` that contains the menu and the content area.
-*/
-
-#layout.active #menu {
- right: 11em;
- width: 11em;
-}
-#layout.active .menu-link {
- right: 11em;
-}
-
-/*
-The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
-appears on the left side of the page.
-*/
-
-#menu {
- margin-right: -11em; /* "#menu" width */
- width: 11em;
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- z-index: 1000; /* so the menu or its navicon stays above all content */
- background: #E8410C;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
-}
-/*
-All anchors inside the menu should be styled like this.
-*/
-#menu a {
- color: #ffffff;
- border: none;
- padding: 0.6em 0em 0.6em 0.6em;
-}
-
-/*
-Remove all background/borders, since we are applying them to #menu.
-*/
-#menu .pure-menu,
-#menu .pure-menu ul {
- border: none;
- background: transparent;
-}
-
-/*
-Add that light border to separate items into groups.
-*/
-#menu .pure-menu ul,
-#menu .pure-menu .menu-item-divided {
- border-top: 1px solid #db0100;
-}
-/*
-Change color of the anchor links on hover/focus.
-*/
-#menu .pure-menu li a:hover,
-#menu .pure-menu li a:focus {
- background: #db0100;
-}
-
-/*
-This styles the selected menu item `<li>`.
-*/
-#menu .pure-menu-selected,
-#menu .pure-menu-heading {
- background: #ffa86f;
- color: black;
-}
-/*
-This styles a link within a selected menu item `<li>`.
-*/
-#menu .pure-menu-selected a {
- color: #fff;
-}
-
-/*
-This styles the menu heading.
-*/
-#menu .pure-menu-heading {
- font-size: 110%;
- color: #fff;
- margin: 0;
-}
-
-/* -- Dynamic Button For Responsive Menu -------------------------------------*/
-
-/*
-The button to open/close the Menu is custom-made and not part of Pure. Here's
-how it works:
-*/
-
-/*
-`.menu-link` represents the responsive menu toggle that shows/hides on
-small screens.
-*/
-.menu-link {
- position: relative;
- display: block; /* show this only on small screens */
- top: 0;
- right: 0; /* "#menu width" */
- background: transparent;
- z-index: 10;
- height: 2rem;
- padding-top: 2rem;
- padding-bottom: 2rem;
- text-decoration: none;
-}
-
-.menu-link span:hover,
-.menu-link span:focus {
- color: rgba(1,1,1,0.8);
-}
-
-.menu-link span {
- position: relative;
- display: block;
- color: #FFFFFF;
-}
-
-.menu-link span,
-.menu-link span:before,
-.menu-link span:after {
- background-color: transparent;
-
-}
-
-
-/* -- Responsive Styles (Media Queries) ------------------------------------- */
-
-
-@media screen and (max-width: 63.9375em) {
- #layout.active {
- position: relative;
- right: 11em;
- /* moves to right as many ems as the one used by the menu */
- }
- #menuLink.menu-link.active {
- position: fixed;
- right: 13em;
- }
- #foot.active {
- margin-right: 11em;
- }
-}