Add columns widget and enhance responsiveness
This commit is contained in:
parent
5df4a41f98
commit
75fd671b84
|
@ -0,0 +1,46 @@
|
|||
.widget-menu {
|
||||
font-weight: bold;
|
||||
> a { margin: 0 1rem; } // Spacing entries
|
||||
padding: 0.5rem; // Leaving background space around entries
|
||||
}
|
||||
|
||||
.widget-columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
// TODO: could be site theming instead?
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.widget-columns-column {
|
||||
// For mobile view
|
||||
width: 95vw;
|
||||
margin: auto;
|
||||
|
||||
// For wide screens
|
||||
@media (min-width: 48em) {
|
||||
max-width: 500px;
|
||||
width: 30vw;
|
||||
}
|
||||
> img:first-child, > i:first-child {
|
||||
// For images
|
||||
max-height: 4rem;
|
||||
height: 4rem;
|
||||
// For text
|
||||
font-size: 4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
a { font-weight: bold; }
|
||||
> p:first-child { height: 4rem; }
|
||||
> h1 { font-size: 2rem; }
|
||||
}
|
||||
|
||||
// For images we need to introduce additional padding
|
||||
// on mobile view otherwise it gets clogged. Only apply
|
||||
// to images because <i>text</i> already has nice layout
|
||||
@media (max-width: 48em) {
|
||||
.widget-columns-column:not(first-child) > img:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
|
@ -1,11 +1,21 @@
|
|||
@import 'widgets';
|
||||
|
||||
// Override water.css
|
||||
body {
|
||||
max-width: none; // Override water.css
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
font-weight: bold;
|
||||
> a { margin: 0 1rem; } // Spacing entries
|
||||
padding: 0.5rem; // Leaving background space around entries
|
||||
@media (max-width: 48em) {
|
||||
// water.css applies padding to the whole page, i think
|
||||
// it's fine but only on mobile view, and should apply to
|
||||
// individual blocks rather than whole page
|
||||
main {
|
||||
padding: 0 10px;
|
||||
}
|
||||
// Reduce main title sizes on mobile view
|
||||
h1 { font-size: 1.8rem; line-height: 1.2; }
|
||||
}
|
||||
|
||||
header {
|
||||
|
@ -16,7 +26,7 @@ header {
|
|||
article > div:first-child > h1, section > h1:first-child {
|
||||
text-align: center;
|
||||
font-size: 2.6em;
|
||||
@media screen and (max-width: 64em) {
|
||||
@media screen and (max-width: 48em) {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
@ -53,3 +63,9 @@ main {
|
|||
pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 0.5rem 0;
|
||||
// WTF water.css doesn't have good contrast here?
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
|
|
@ -6,23 +6,14 @@ Provide the widget with a content page
|
|||
|
||||
{{ widgets::menu(content="_common/menus/main.md") }}
|
||||
|
||||
If the content page has a translation, it will be
|
||||
automatically loaded in the current language, as long as
|
||||
your parent template has a `lang` variable set, like so:
|
||||
|
||||
{% set lang = section.lang | default(value=page.lang) %}
|
||||
|
||||
Separate entries with a thematic break:
|
||||
either ---, ~~~, ___ or <hr />
|
||||
|
||||
An entry can be either text, a link, or
|
||||
a submenu. A submenu is an actual list
|
||||
defined using Markdown or HTML.
|
||||
|
||||
You cannot use <p> tags in the menu.
|
||||
That's because we can't access raw markdown
|
||||
######################################}
|
||||
{% macro menu(path) %}
|
||||
<nav class="nav-menu" role="navigation">
|
||||
<nav class="widget-menu" role="navigation">
|
||||
{%- set source = self::i18n_content(path=path) -%}
|
||||
{% set entries = source | split(pat="<hr />") %}
|
||||
{#- fetch page content and divide it with separator -#}
|
||||
|
@ -33,6 +24,20 @@ a submenu. A submenu is an actual list
|
|||
</nav>
|
||||
{% endmacro menu %}
|
||||
|
||||
{% macro columns(path) %}
|
||||
<div class="widget-columns">
|
||||
{%- set source = self::i18n_content(path=path) -%}
|
||||
{% set entries = source | split(pat="<hr />") %}
|
||||
{#- fetch page content and divide it with separator -#}
|
||||
{%- for entry in entries %}
|
||||
<div class="widget-columns-column">
|
||||
{{ entry | trim | replace(from="<p>", to="") | replace(from="</p>", to="") | safe }}
|
||||
{# strip paragraph tags away for nicer markup #}
|
||||
</div>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
{% endmacro columns %}
|
||||
|
||||
{%- macro i18n_path(path) -%}
|
||||
{% if lang == config.default_language %}{{ path }}
|
||||
{%- else -%}
|
||||
|
|
Loading…
Reference in New Issue