CSS: Změna základního layoutu + přidáno logo MO

* Přidáno logo (skryje se při skrolování) * Menu roztaženo po celé šířce (sticky při skrolování) * Top level elementy se třídou .content se zobrazují jen ve střední části stránky Vršek stránky vizuálně a barevně sjednocen s tím, co je na matematickaolympiada.cz Solve #21

CSS: Změna základního layoutu + přidáno logo MO
acd93070 · Jiří Setnička · e5445f8a · acd93070 · acd93070 · acd93070
Commit acd93070 authored 4 years ago by Jiří Setnička
--- a/mo/web/templates/base.html
+++ b/mo/web/templates/base.html
@@ -7,7 +7,16 @@
 {% block head %}{% endblock %}
 </head>
 <body>
-<nav id="main-menu">
+<header>
+	<div class="content">
+		<a href="http://www.matematickaolympiada.cz/" title="Na stránky MO">
+			<img src="{{ url_for('static', filename='img/mo.jpg') }}" alt="Matematická olympiáda">
+		</a>
+		<h1><b>O</b>devzdávací <b>S</b>ystém <b>M</b>atematické <b>O</b>lympiády</h1>
+	</div>
+</header>
+<div id="nav-wrapper">
+	<nav id="main-menu" class="content">
 		{% for item in get_menu() %}
 			<a {% if item.classes %}class="{{ " ".join(item.classes) }}"{% endif %} href="{{ item.url }}">{{ item.name }}</a>
 		{% endfor %}
@@ -15,7 +24,8 @@
 			<form method=POST action='{{ url_for('logout') }}'><input type=submit value='Logout'></form>
 		{% endif %}
 	</nav>
-<h1>Odevzdávací systém Matematické olympiády</h1>
+</div>
+<main>
 {% with messages = get_flashed_messages(with_categories=true) %}
 {% if messages %}
 	{% for category, message in messages %}
@@ -30,7 +40,12 @@
 {% endif %}
 {% endwith %}
 {% block body %}{% endblock %}
+</main>
+<footer>
 	<hr>
+	<div class="content">
 		<p>V případě problémů napište správci na adresu <a href='mailto:osmo@mo.mff.cuni.cz'>osmo@mo.mff.cuni.cz</a>.
+	</div>
+</footer>
 </body>
 </html>
--- a/static/img/mo.jpg
+++ b/static/img/mo.jpg
--- a/static/mo.css
+++ b/static/mo.css
 body {
+	display: flex;
+	flex-direction: column;
 	background-color: white;
 	color: black;
 	margin: 0;
-	margin-left: auto;
-	margin-right: auto;
+	min-height: 100vh;
+}
+
+.content, main {
+	display: block;
+	margin: 0 auto;
+	padding: 0 1em;
 	max-width: 800px;
+	width: 100%;
+}
+
+header {
+	margin: 10px 0px;
+}
+
+main {
+	padding: 1em;
+}
+
+header .content {
+	display: flex;
+}
+
+header img { height: 60px; }
+
+header h1 { margin: auto 20px 0px; color: #222; }
+
+#nav-wrapper {
+	position: sticky;
+	top: 0;
+	background-color: #222;
+	border: 1px #222 solid;
+}
+
+footer {
+	margin-top: auto;
 }

 .error {
@@ -34,34 +69,33 @@ table.data tr td, table.data tr th {

 nav#main-menu {
 	display: flex;
-	background-color: #333;
+	flex-wrap: wrap;
 }

 nav#main-menu a, nav#main-menu input[type=submit] {
 	background: none;
 	border: none;
-	border-left:1px solid #bbb;
 	margin: 0px;
-	color: white;
+	color: #999;
 	font-size: 1em;
 	text-align: center;
 	padding: 14px 16px;
 	text-decoration: none;
 }
-nav#main-menu a:first-child {
-	border-left: none;
-}
+
 /* Only the first item with .right class does the margin trick */
 nav#main-menu > .right { margin-left: auto; }
 nav#main-menu > .right ~ .right { margin-left: 0px; }

 nav#main-menu a:hover:not(.active), nav#main-menu input[type=submit]:hover {
 	cursor: pointer;
-	background-color: #111;
+	background-color: #555;
+	color: white;
 }

 nav#main-menu a.active {
-	background-color: #4CAF50;
+	background-color: #ddd;
+	color: black;
 }

 .form-group.required .control-label:after {