Skip to content
Snippets Groups Projects
Commit acd93070 authored by Jiří Setnička's avatar Jiří Setnička
Browse files

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
parent e5445f8a
No related branches found
No related tags found
No related merge requests found
...@@ -7,7 +7,16 @@ ...@@ -7,7 +7,16 @@
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
<body> <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() %} {% for item in get_menu() %}
<a {% if item.classes %}class="{{ " ".join(item.classes) }}"{% endif %} href="{{ item.url }}">{{ item.name }}</a> <a {% if item.classes %}class="{{ " ".join(item.classes) }}"{% endif %} href="{{ item.url }}">{{ item.name }}</a>
{% endfor %} {% endfor %}
...@@ -15,7 +24,8 @@ ...@@ -15,7 +24,8 @@
<form method=POST action='{{ url_for('logout') }}'><input type=submit value='Logout'></form> <form method=POST action='{{ url_for('logout') }}'><input type=submit value='Logout'></form>
{% endif %} {% endif %}
</nav> </nav>
<h1>Odevzdávací systém Matematické olympiády</h1> </div>
<main>
{% with messages = get_flashed_messages(with_categories=true) %} {% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %} {% if messages %}
{% for category, message in messages %} {% for category, message in messages %}
...@@ -30,7 +40,12 @@ ...@@ -30,7 +40,12 @@
{% endif %} {% endif %}
{% endwith %} {% endwith %}
{% block body %}{% endblock %} {% block body %}{% endblock %}
</main>
<footer>
<hr> <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>. <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> </body>
</html> </html>
static/img/mo.jpg

28.5 KiB

body { body {
display: flex;
flex-direction: column;
background-color: white; background-color: white;
color: black; color: black;
margin: 0; margin: 0;
margin-left: auto; min-height: 100vh;
margin-right: auto; }
.content, main {
display: block;
margin: 0 auto;
padding: 0 1em;
max-width: 800px; 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 { .error {
...@@ -34,34 +69,33 @@ table.data tr td, table.data tr th { ...@@ -34,34 +69,33 @@ table.data tr td, table.data tr th {
nav#main-menu { nav#main-menu {
display: flex; display: flex;
background-color: #333; flex-wrap: wrap;
} }
nav#main-menu a, nav#main-menu input[type=submit] { nav#main-menu a, nav#main-menu input[type=submit] {
background: none; background: none;
border: none; border: none;
border-left:1px solid #bbb;
margin: 0px; margin: 0px;
color: white; color: #999;
font-size: 1em; font-size: 1em;
text-align: center; text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
} }
nav#main-menu a:first-child {
border-left: none;
}
/* Only the first item with .right class does the margin trick */ /* Only the first item with .right class does the margin trick */
nav#main-menu > .right { margin-left: auto; } nav#main-menu > .right { margin-left: auto; }
nav#main-menu > .right ~ .right { margin-left: 0px; } nav#main-menu > .right ~ .right { margin-left: 0px; }
nav#main-menu a:hover:not(.active), nav#main-menu input[type=submit]:hover { nav#main-menu a:hover:not(.active), nav#main-menu input[type=submit]:hover {
cursor: pointer; cursor: pointer;
background-color: #111; background-color: #555;
color: white;
} }
nav#main-menu a.active { nav#main-menu a.active {
background-color: #4CAF50; background-color: #ddd;
color: black;
} }
.form-group.required .control-label:after { .form-group.required .control-label:after {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment