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

116
sass/style.scss
Unescape Escape View File

@ -2,12 +2,13 @@
$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-dark: #131516;
$col-medium: lighten($col-dark, 4);
$col-light: lighten($col-dark, 18);
$col-white: #e8e6e3;
*, *:before, *:after {
@ -17,12 +18,13 @@ $col-accent: #fc0;
body {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 60em;
width: 100%;
min-height: 100vh;
margin: 0 auto;
background: $col-dark;
color: $col-light;
background: $col-medium;
color: $col-white;
font-family: open-sans, sans;
text-rendering: optimizeLegibility;
}
@ -51,45 +53,95 @@ body>header {
@media only screen and (min-width: $width-narrow) {
height: 10rem;
background-position: 3em, center, center;
background-position: 3rem, center, center;
}
}
}
body>nav {
width: 100%;
height: 3rem;
background: $col-gray;
display: flex;
justify-content: center;
align-items: stretch;
nav {
position: relative;
width: 100%;
height: 3rem;
background: $col-dark;
a {
display: flex;
align-items: center;
padding: 0 1em;
height: 100%;
color: $col-accent;
text-decoration: none;
&:hover, &.active {
background: $col-dark;
justify-content: center;
align-items: stretch;
&:after {
content: "";
display: block;
position: absolute;
bottom: 0;
height: 2px;
width: 100%;
background: $col-light;
}
@media only screen and (min-width: $width-narrow) {
padding: 0 1.5em;
a {
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 {
margin-top: 3em;
padding: 0 1em;
display: flex;
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;
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;
@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>
<header>
<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>
<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>
<main>
{% block content %}
{% if section %}
{{ section.content | safe }}
{% elif page %}
{{ page.content | safe }}
{% endif %}
<section>
{% if section %}
{{ section.content | safe }}
{% elif page %}
{{ page.content | safe }}
{% endif %}
</section>
{% endblock content %}
</main>
<footer>

22
templates/index.html
Unescape Escape View File

@ -1 +1,23 @@
{% 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