Trying to get a more Django-traditional template
More like, trying to get a more Django-traditional template for my semantic layout, and going for a modern, Flex-based holy-grail layout for the style. It's not quite coming together. This isn't a skill I use often, so I'm having a headache figuring out all of the nuances.
This commit is contained in:
parent
18aacee501
commit
5517b77fad
|
@ -18,7 +18,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Takes two strings as arguments, replaces the first with the second",
|
"dd": "Takes two strings as arguments, replaces the first with the second",
|
||||||
"dt": "replace"
|
"dt": "replace(from=\"\", to=\"\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Escapes quoted strings",
|
"dd": "Escapes quoted strings",
|
||||||
|
@ -46,11 +46,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Removes leading characters that match a pattern",
|
"dd": "Removes leading characters that match a pattern",
|
||||||
"dt": "trim_start_matches"
|
"dt": "trim_start_matches(pat=\"\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Removes trailing characters that match a pattern",
|
"dd": "Removes trailing characters that match a pattern",
|
||||||
"dt": "trim_end_matches"
|
"dt": "trim_end_matches(pat=\"\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Truncates the string to the length specified",
|
"dd": "Truncates the string to the length specified",
|
||||||
|
@ -78,11 +78,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Returns the nth element of an array",
|
"dd": "Returns the nth element of an array",
|
||||||
"dt": "nth"
|
"dt": "nth(n=2)"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Joins an array with a delimeter",
|
"dd": "Joins an array with a delimeter",
|
||||||
"dt": "join"
|
"dt": "join(sep=\"\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Returns the length of an array, an object, or a string",
|
"dd": "Returns the length of an array, an object, or a string",
|
||||||
|
@ -94,31 +94,31 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Sorts an array into ascending order. You can sort objects by providing a fieldname argument",
|
"dd": "Sorts an array into ascending order. You can sort objects by providing a fieldname argument",
|
||||||
"dt": "sort"
|
"dt": "sort(attribute=\"fieldname.subname\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Removes duplicate items from an array. You can filter objects by providing a fieldname argument",
|
"dd": "Removes duplicate items from an array. You can filter objects by providing a fieldname argument",
|
||||||
"dt": "unique"
|
"dt": "unique(attribute=\"fieldname\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Slices an array by the given start and end parameter",
|
"dd": "Slices an array by the given start and end parameter",
|
||||||
"dt": "slice"
|
"dt": "slice(start=n, end=m)"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Groups an array using the required attribute argument",
|
"dd": "Groups an array using the required attribute argument",
|
||||||
"dt": "group_by"
|
"dt": "group_by(attribute=\"fieldname\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Filters the array values, returning objects whose attribute is equal to the argument",
|
"dd": "Filters the array values, returning objects whose attribute is equal to the argument",
|
||||||
"dt": "filter"
|
"dt": "filter(attribute=\"fieldname\", value=\"value\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Retrieves an attribute from each object in an array",
|
"dd": "Retrieves an attribute from each object in an array",
|
||||||
"dt": "map"
|
"dt": "map(attribute=\"fieldname\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Appends values to an array",
|
"dd": "Appends values to an array",
|
||||||
"dt": "concat"
|
"dt": "concat(with=otherarray)"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Performs classic (%-based) URL encoding",
|
"dd": "Performs classic (%-based) URL encoding",
|
||||||
|
@ -130,7 +130,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Can return an alternative text if the argument is greater than one",
|
"dd": "Can return an alternative text if the argument is greater than one",
|
||||||
"dt": "pluralize"
|
"dt": "pluralize(singular=\"y\", plural=\"ies\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Returns a number rounded",
|
"dd": "Returns a number rounded",
|
||||||
|
@ -142,7 +142,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Parses a timestamp into a date(time) string",
|
"dd": "Parses a timestamp into a date(time) string",
|
||||||
"dt": "date"
|
"dt": "date(format=\"%Y-%m-%d\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Escapes a string's HTML",
|
"dd": "Escapes a string's HTML",
|
||||||
|
@ -158,11 +158,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Accesses a value from an object when the key is not a valid identifier.",
|
"dd": "Accesses a value from an object when the key is not a valid identifier.",
|
||||||
"dt": "get"
|
"dt": "get(key=\"posts/content\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Splits a string into an array of strings, separated by a pattern.",
|
"dd": "Splits a string into an array of strings, separated by a pattern.",
|
||||||
"dt": "split"
|
"dt": "split(pat=\"\")"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Converts a value into an integer.",
|
"dd": "Converts a value into an integer.",
|
||||||
|
@ -173,8 +173,8 @@
|
||||||
"dt": "float"
|
"dt": "float"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Transforms a value into its JSON representation",
|
"dd": "Transforms a value into its JSON representation. Argument is optional.",
|
||||||
"dt": "json_encode"
|
"dt": "json_encode(pretty=true)"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Returns a string representation of the value.",
|
"dd": "Returns a string representation of the value.",
|
||||||
|
@ -182,11 +182,11 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Provides a default value if the name is not present in the context",
|
"dd": "Provides a default value if the name is not present in the context",
|
||||||
"dt": "default"
|
"dt": "default(value=1)"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Converts the variable contents from markdown to HTML",
|
"dd": "Converts the variable contents from markdown to HTML. Argument is optional.",
|
||||||
"dt": "markdown"
|
"dt": "markdown(inline=true)"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Encode the variable to base64",
|
"dd": "Encode the variable to base64",
|
||||||
|
@ -197,8 +197,8 @@
|
||||||
"dt": "base64_decode"
|
"dt": "base64_decode"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"dd": "Format a number in a variety of ways",
|
"dd": "Format a number into its string representation. Argument is optional.",
|
||||||
"dt": "num_format"
|
"dt": "num_format(locale=\"\")"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
{ "dt": "even", "dd": " the given variable is an even number." },
|
{ "dt": "even", "dd": " the given variable is an even number." },
|
||||||
{ "dt": "string", "dd": " the given variable is a string." },
|
{ "dt": "string", "dd": " the given variable is a string." },
|
||||||
{ "dt": "number", "dd": " the given variable is a number." },
|
{ "dt": "number", "dd": " the given variable is a number." },
|
||||||
{ "dt": "divisibleby", "dd": " the given expression is divisible by the arg given." },
|
{ "dt": "divisibleby(num)", "dd": " the given expression is divisible by the arg given." },
|
||||||
{
|
{
|
||||||
"dt": "iterable",
|
"dt": "iterable",
|
||||||
"dd": " Returns true if the given variable can be iterated over in Tera (i.e. is an array/tuple or an object)."
|
"dd": " Returns true if the given variable can be iterated over in Tera (i.e. is an array/tuple or an object)."
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
@import "design/_normalize";
|
||||||
|
@import "design/_scales";
|
||||||
|
@import "design/_typography";
|
||||||
|
@import "design/fonts/_nunito";
|
||||||
|
@import "design/fonts/_sauna_mono";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--default-font-size: var(--step-0);
|
||||||
|
--background-color: #ffffff;
|
||||||
|
--text-color: #1f000d;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -55,6 +55,7 @@ template,
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:active,
|
a:active,
|
||||||
a:hover {
|
a:hover {
|
||||||
outline-width: 0;
|
outline-width: 0;
|
||||||
|
@ -80,14 +81,6 @@ dfn {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
@ -193,12 +186,6 @@ input:-moz-focusring {
|
||||||
outline: 1px dotted ButtonText;
|
outline: 1px dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border: 1px solid #c0c0c0;
|
|
||||||
margin: 0 2px;
|
|
||||||
padding: 0.35em 0.625em 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -283,7 +270,8 @@ address {
|
||||||
|
|
||||||
ol,
|
ol,
|
||||||
ul,
|
ul,
|
||||||
dl {
|
dl,
|
||||||
|
menu {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
@ -375,7 +363,6 @@ table {
|
||||||
caption {
|
caption {
|
||||||
padding-top: 0.75rem;
|
padding-top: 0.75rem;
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.75rem;
|
||||||
color: #818a91;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
caption-side: bottom;
|
caption-side: bottom;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,59 @@
|
||||||
|
:root {
|
||||||
|
--inner-border-color: hsl(275, 15%, 92%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
@mixin sidebar-gap {
|
||||||
|
position: sticky;
|
||||||
|
top: var(--space-xl);
|
||||||
|
height: calc(100vh - var(--space-xl));
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes-sidebar {
|
||||||
|
order: 2;
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
@include sidebar-gap;
|
||||||
|
flex: 0 0 31.25%;
|
||||||
|
order: 0;
|
||||||
|
border-right: 1px solid var(--inner-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width: 992px) {
|
||||||
|
flex: 0 1 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-sidebar {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@media screen and (min-width: 992px) {
|
||||||
|
display: block;
|
||||||
|
order: 2;
|
||||||
|
flex: 0 0 18.75%;
|
||||||
|
border-left: 1px solid var(--inner-border-color);
|
||||||
|
@include sidebar-gap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
order: 1;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
flex: 0 0 68.75%;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 992px) {
|
||||||
|
flex: 0 1 56.25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,19 +1,14 @@
|
||||||
@import "design/normalize";
|
@import "./base.scss";
|
||||||
@import "design/definitions";
|
|
||||||
@import "design/fonts/nunito";
|
|
||||||
@import "design/fonts/sauna_mono";
|
|
||||||
@import "design/typography";
|
|
||||||
@import "design/_scales";
|
|
||||||
@import "components/code";
|
@import "components/code";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
|
font-size: var(--default-font-size);
|
||||||
font-family: "Nunito", sans-serif;
|
font-family: "Nunito", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
padding-top: 3.625rem;
|
padding-top: 3.625rem;
|
||||||
font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
|
font-size: var(--default-font-size);
|
||||||
font-family: "Nunito", sans-serif;
|
font-family: "Nunito", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
@ -26,9 +21,9 @@ header.navbar {
|
||||||
background-color: var(--background-color, #ffffff);
|
background-color: var(--background-color, #ffffff);
|
||||||
|
|
||||||
.identity {
|
.identity {
|
||||||
margin-right: 1rem;
|
margin-right: var(--space-s);
|
||||||
font-size: 1.375rem;
|
font-size: var(--step-2);
|
||||||
padding: 0.325rem 0 0.325rem 0;
|
padding: var(--space-3xs) 0 var(--space-3xs) 0;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: var(--text-color, #1f000d);
|
color: var(--text-color, #1f000d);
|
||||||
|
@ -37,20 +32,21 @@ header.navbar {
|
||||||
}
|
}
|
||||||
|
|
||||||
article.text-article {
|
article.text-article {
|
||||||
max-width: 30em;
|
max-width: 32em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding-right: calc(clamp(0.5rem, -0.7rem + 5.3333vw, 2.5rem));
|
padding: 0 var(--space-xs-m) 0 var(--space-xs-m);
|
||||||
padding-left: calc(clamp(0.5rem, -0.7rem + 5.3333vw, 2.5rem));
|
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Left sidebar
|
||||||
|
|
||||||
.topic-list {
|
.topic-list {
|
||||||
margin-top: 1.5rem;
|
margin-top: var(--space-s);
|
||||||
@media screen and (min-width: 541px) {
|
@media screen and (min-width: 541px) {
|
||||||
margin-top: 3.5rem;
|
margin-top: var(--space-l);
|
||||||
}
|
}
|
||||||
|
|
||||||
> h2 {
|
> h2 {
|
||||||
|
|
|
@ -1,47 +1,21 @@
|
||||||
{% extends "section.html" %}
|
{% extends "section.html" %}
|
||||||
|
|
||||||
{% block body %}
|
{% block stylesheets %}
|
||||||
{% set page_class = "docs list" %}
|
<link rel="stylesheet" href="{{ get_url(path="page.css") | safe }}">
|
||||||
{% endblock body %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block header %}
|
|
||||||
{% set current_section = "docs" %}
|
|
||||||
{{ header::header(current_section=current_section)}}
|
|
||||||
{% endblock header %}
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="wrap container" role="document">
|
<div class="container" role="document">
|
||||||
<div class="content">
|
<div class="main">
|
||||||
<div class="row justify-content-center">
|
<div class="notes-sidebar">
|
||||||
<div class="col-md-12 col-lg-10 col-xxl-8">
|
Sidebar!
|
||||||
<article>
|
</div>
|
||||||
<h1 class="text-center">{{ section.title }}</h1>
|
<article>
|
||||||
<div class="text-center">{{ section.content | safe }}</div>
|
<h1 class="text-center">{{ section.title }}</h1>
|
||||||
<div class="card-list">
|
<div class="text-center">{{ section.content | safe }}</div>
|
||||||
{% set index_path = current_path ~ "_index.md" | trim_start_matches(pat="/") %}
|
</article>
|
||||||
{% set index = get_section(path=index_path) %}
|
<div class="page-sidebar">
|
||||||
{% for page in index.pages %}
|
Page!
|
||||||
<div class="card my-3">
|
|
||||||
<div class="card-body">
|
|
||||||
<a class="stretched-link" href="{{ page.permalink }}">{{ page.title }} →</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
{% for s in index.subsections %}
|
|
||||||
{% set subsection = get_section(path=s) %}
|
|
||||||
{% if subsection.pages %}
|
|
||||||
{% for page in subsection.pages %}
|
|
||||||
<div class="card my-3">
|
|
||||||
<div class="card-body">
|
|
||||||
<a class="stretched-link" href="{{ page.permalink }}">{{ page.title }} →</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue