Begin overhaul

themes/marcriera/static/css/theme.css

@@ -107,6 +107,46 @@ hr {
 
 
 
+/* Main menu */
+
+nav {
+  clear: both;
+  text-align: right;
+}
+
+nav ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+nav ul.first > li {
+  display: block;
+  text-align: center;
+}
+
+nav ul li a {
+  display: block;
+  font-size: 90%;
+}
+
+
+
+/* Language selector */
+
+.language-selector {
+  list-style-type: none;
+  font-size: 90%;
+  text-align: center;
+}
+
+.language-selector li {
+  display: inline;
+  margin: .5em;
+  text-align: center;
+}
+
+
+
 /* Main container */
 
 #container {
@@ -118,35 +158,28 @@ hr {
 }
 
 
+
 /* Header */
 
-#header {
+#header-left,
+#header-right {
   padding-top: 15px;
-  display: block;
-  float: none;
-  width: 100%;
-  text-align: center;
 }
 
 #site-logo {
-  max-width:100%;
-  max-height:100%;
-  display: block;
-  margin-left: 20px;
-  margin-right: 20px;
+  height: 100px;
+  width: 100px;
+  padding: 0 20px 15px 20px;
 }
 
 #site-title {
   padding: 10px 20px 0 20px;
   font-weight: 600;
   font-size: 220%;
-  display: block;
-  float: none;
-  margin: auto;
 }
 
 #site-slogan {
-  padding: 0px 5px;
+  padding: 0 20px 10px 20px;
 }
 
 
@@ -165,9 +198,7 @@ hr {
 
 #page-title {
   padding: 10px 20px 10px 20px;
-  background: #3E3E3E;
-  border-top: 1px solid #444444;
-  border-bottom: 1px solid #444444;
+  background: #9E4B5A;
 }
 
 #page-title h1 {
@@ -205,3 +236,186 @@ hr {
   color: #CCCCCC;
 }
 
+
+
+@media (min-width: 780px) {
+
+/* Main menu */
+
+.burger-button {
+  display: none;
+}
+
+nav {
+  padding-right: 1.25em;
+}
+
+nav ul.first > li {
+  display: inline-block;
+  position: relative;
+  background: #9E4B5A;
+  padding: 10px 10px 10px 10px;
+}
+
+nav ul.second,
+nav ul.third {
+  display: none;
+  position: absolute;
+  background: #000000;
+  width: 160px;
+  box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25);
+}
+
+nav ul.first li:hover ul.second,
+nav ul.second li:hover ul.third {
+  display: block;
+}
+
+nav ul.second li a,
+nav ul.third li a {
+  padding: 0.75em 1em;
+}
+
+nav ul.second {
+  z-index: 2;
+}
+
+nav ul.third {
+  z-index: 3;
+}
+
+nav ul.second li {
+  position: relative;
+}
+  
+nav ul.third {
+  left: 212px;
+  top: -1px;
+}
+
+
+/* Language selector */
+
+.language-selector {
+  float: right;
+  margin-right: 30px;
+}
+
+
+/* Main container */
+
+#container {
+  max-width: 1200px;
+}
+
+
+/* Header */
+
+#header-left {
+  float: left;
+  width: 65%;
+}
+
+#header-right {
+  float: right;
+  width: 35%;
+}
+
+#site-logo {
+  float: left;
+}
+
+}
+
+
+
+@media screen and (max-width: 779px) {
+
+/* Main menu */
+
+.burger-button {
+  display: block;
+  background: #3E3E3E;
+  font-size: 100%;
+  padding: 5px 20px 5px 20px;
+  margin-top: 20px;
+  cursor: pointer;
+}
+
+.burger-button:hover {
+  color: #DDDDDD;
+  background: #208DCC;
+}
+
+#menu-entries {
+  display: none;
+}
+
+.burger-toggle:checked ~ #menu-entries {
+  display: block;
+}
+
+.burger-toggle:checked ~ .burger-button {
+  color: #DDDDDD;
+  background: #208DCC;
+}
+
+nav {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+nav ul.first > li a,
+nav ul.second > li a {
+  display: block;
+  padding: 5px 20px 5px 20px;
+  background: #3E3E3E;
+}
+
+nav ul.first > li a:hover,
+nav ul.second > li a:hover {
+  color: #DDDDDD;
+  background: #208DCC;
+}
+
+nav ul.first {
+  margin-top: 0px;
+}
+
+nav ul.second > li a {
+  padding-left: 40px;
+}
+
+
+/* Language selector */
+
+.language-selector {
+  float: none;
+  margin: auto;
+  padding: 0;
+}
+
+
+/* Header */
+
+#header-left,
+#header-right {
+  display: block;
+  float: none;
+  width: 100%;
+  text-align: center;
+}
+
+#site-logo,
+#site-title {
+  display: block;
+  float: none;
+  margin: auto;
+}
+
+#site-title,
+#site-slogan {
+  padding: 0px 5px;
+}
+
+}