microlab
/
website
2
1
Fork 0
Code Pull Requests Releases Activity

Complete layout restructure

Browse Source 
This should help with visual separation of content.
master
Emil Miler 2 years ago
parent e3cb52787c
commit 7ffad10601
4 changed files with 124 additions and 46 deletions
Show Stats Download Patch File Download Diff File

2
content/_index.md
Unescape Escape View File

@ -1,4 +1,6 @@
+++ +++
[extra]
meetings_string = "Schůzky probíhají ve <strong>čtvrtek od 18:00</strong> v učebně <strong>R013H</strong>."
+++ +++
## Co je to microlab ## Co je to microlab

116
sass/style.scss
Unescape Escape View File

@ -2,12 +2,13 @@
$width-wrap: 960px; $width-wrap: 960px;
$width-narrow: ($width-wrap/3)*2; $width-narrow: $width-wrap*0.75;
$col-light: #e8e6e3;
$col-dark: #131516;
$col-gray: lighten($col-dark, 5);
$col-accent: #fc0; $col-accent: #fc0;
$col-dark: #131516;
$col-medium: lighten($col-dark, 4);
$col-light: lighten($col-dark, 18);
$col-white: #e8e6e3;
*, *:before, *:after { *, *:before, *:after {
@ -17,12 +18,13 @@ $col-accent: #fc0;
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem;
max-width: 60em; max-width: 60em;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
margin: 0 auto; margin: 0 auto;
background: $col-dark; background: $col-medium;
color: $col-light; color: $col-white;
font-family: open-sans, sans; font-family: open-sans, sans;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
@ -51,45 +53,95 @@ body>header {
@media only screen and (min-width: $width-narrow) { @media only screen and (min-width: $width-narrow) {
height: 10rem; height: 10rem;
background-position: 3em, center, center; background-position: 3rem, center, center;
} }
} }
}
body>nav { nav {
width: 100%; position: relative;
height: 3rem; width: 100%;
background: $col-gray; height: 3rem;
background: $col-dark;
display: flex;
justify-content: center;
align-items: stretch;
a {
display: flex; display: flex;
align-items: center; justify-content: center;
padding: 0 1em; align-items: stretch;
height: 100%;
&:after {
color: $col-accent; content: "";
text-decoration: none; display: block;
position: absolute;
&:hover, &.active { bottom: 0;
background: $col-dark; height: 2px;
width: 100%;
background: $col-light;
} }
@media only screen and (min-width: $width-narrow) { a {
padding: 0 1.5em; display: flex;
align-items: center;
padding: 0 1em;
height: 100%;
z-index: 1;
border-bottom: 2px solid $col-light;
color: $col-accent;
text-decoration: none;
&:hover, &.active {
background: $col-medium;
border-bottom: 2px solid $col-accent;
}
@media only screen and (min-width: $width-narrow) {
padding: 0 1.5em;
}
} }
} }
} }
body>main { body>main {
margin-top: 3em; display: flex;
padding: 0 1em; flex-direction: column;
gap: 1rem;
section {
padding: 1.5rem;
background: $col-dark;
h2:before {
content: "";
display: block;
width: 3em;
height: 1px;
margin-bottom: 1rem;
background: $col-accent;
}
@media only screen and (min-width: $width-wrap) { *:first-child {
margin-top: 0;
}
*:last-child {
margin-bottom: 0;
}
}
section.flex {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0; padding: 0;
background: inherit;
@media only screen and (min-width: $width-narrow) {
flex-direction: row;
}
div {
width: 100%;
background: $col-dark;
padding: 1.5rem;
}
} }
} }
@ -100,6 +152,6 @@ body>footer {
font-size: .8em; font-size: .8em;
@media only screen and (min-width: $width-wrap) { @media only screen and (min-width: $width-wrap) {
padding: 1em 0; padding: 1rem 0;
} }
} }

30
templates/base.html
Unescape Escape View File

@ -23,24 +23,26 @@
<body> <body>
<header> <header>
<a class="img" href="/"></a> <a class="img" href="/"></a>
<nav>
{% for item in config.extra.nav_items %}
<a href="{{ item.path }}"
{% if item.path == current_path and item.path != "/" %}
class="active"
{% endif %}
>{{ item.name }}</a>
{% endfor %}
</nav>
</header> </header>
<nav>
{% for item in config.extra.nav_items %}
<a href="{{ item.path }}"
{% if item.path == current_path and item.path != "/" %}
class="active"
{% endif %}
>{{ item.name }}</a>
{% endfor %}
</nav>
</body> </body>
<main> <main>
{% block content %} {% block content %}
{% if section %} <section>
{{ section.content | safe }} {% if section %}
{% elif page %} {{ section.content | safe }}
{{ page.content | safe }} {% elif page %}
{% endif %} {{ page.content | safe }}
{% endif %}
</section>
{% endblock content %} {% endblock content %}
</main> </main>
<footer> <footer>

22
templates/index.html
Unescape Escape View File

@ -1 +1,23 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %}
<section class="flex">
<div>
<h2>Schůzky</h2>
{% if section.extra.meetings_string %}
<p>{{ section.extra.meetings_string | safe }}</p>
{% endif %}
</div>
<div>
<h2>Plánované akce</h2>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.</p>
</div>
</section>
<section>
{% if section %}
{{ section.content | safe }}
{% elif page %}
{{ page.content | safe }}
{% endif %}
</section>
{% endblock content %}

Write Preview
Loading…
Cancel
Save