Skip to content
Snippets Groups Projects
Commit 05b48b1a 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 9e671a06
No related branches found
No related tags found
2 merge requests!11Změny vzhledu,!9WIP: Zárodek uživatelské části webu a submitování
This commit is part of merge request !11. Comments created here will be created in the context of that merge request.
......@@ -3,11 +3,20 @@
<head>
<title>Odevzdávací systém MO</title>
<link rel=stylesheet href="{{ url_for('static', filename='bootstrap.min.css') }}" type='text/css' media=all>
<link rel=stylesheet href="{{ url_for('static', filename='mo.css') }}?v=2" type='text/css' media=all>
<link rel=stylesheet href="{{ url_for('static', filename='mo.css') }}?v=3" type='text/css' media=all>
{% 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>
static/img/mo.jpg

28.5 KiB

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,13 +69,12 @@ 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;
font-size: 1em;
......@@ -48,20 +82,20 @@ nav#main-menu a, nav#main-menu input[type=submit] {
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 {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment