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",
|
||||
"dt": "replace"
|
||||
"dt": "replace(from=\"\", to=\"\")"
|
||||
},
|
||||
{
|
||||
"dd": "Escapes quoted strings",
|
||||
|
|
@ -46,11 +46,11 @@
|
|||
},
|
||||
{
|
||||
"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",
|
||||
"dt": "trim_end_matches"
|
||||
"dt": "trim_end_matches(pat=\"\")"
|
||||
},
|
||||
{
|
||||
"dd": "Truncates the string to the length specified",
|
||||
|
|
@ -78,11 +78,11 @@
|
|||
},
|
||||
{
|
||||
"dd": "Returns the nth element of an array",
|
||||
"dt": "nth"
|
||||
"dt": "nth(n=2)"
|
||||
},
|
||||
{
|
||||
"dd": "Joins an array with a delimeter",
|
||||
"dt": "join"
|
||||
"dt": "join(sep=\"\")"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"dt": "sort"
|
||||
"dt": "sort(attribute=\"fieldname.subname\")"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"dt": "slice"
|
||||
"dt": "slice(start=n, end=m)"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"dt": "filter"
|
||||
"dt": "filter(attribute=\"fieldname\", value=\"value\")"
|
||||
},
|
||||
{
|
||||
"dd": "Retrieves an attribute from each object in an array",
|
||||
"dt": "map"
|
||||
"dt": "map(attribute=\"fieldname\")"
|
||||
},
|
||||
{
|
||||
"dd": "Appends values to an array",
|
||||
"dt": "concat"
|
||||
"dt": "concat(with=otherarray)"
|
||||
},
|
||||
{
|
||||
"dd": "Performs classic (%-based) URL encoding",
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
},
|
||||
{
|
||||
"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",
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
},
|
||||
{
|
||||
"dd": "Parses a timestamp into a date(time) string",
|
||||
"dt": "date"
|
||||
"dt": "date(format=\"%Y-%m-%d\")"
|
||||
},
|
||||
{
|
||||
"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.",
|
||||
"dt": "get"
|
||||
"dt": "get(key=\"posts/content\")"
|
||||
},
|
||||
{
|
||||
"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.",
|
||||
|
|
@ -173,8 +173,8 @@
|
|||
"dt": "float"
|
||||
},
|
||||
{
|
||||
"dd": "Transforms a value into its JSON representation",
|
||||
"dt": "json_encode"
|
||||
"dd": "Transforms a value into its JSON representation. Argument is optional.",
|
||||
"dt": "json_encode(pretty=true)"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"dt": "default"
|
||||
"dt": "default(value=1)"
|
||||
},
|
||||
{
|
||||
"dd": "Converts the variable contents from markdown to HTML",
|
||||
"dt": "markdown"
|
||||
"dd": "Converts the variable contents from markdown to HTML. Argument is optional.",
|
||||
"dt": "markdown(inline=true)"
|
||||
},
|
||||
{
|
||||
"dd": "Encode the variable to base64",
|
||||
|
|
@ -197,8 +197,8 @@
|
|||
"dt": "base64_decode"
|
||||
},
|
||||
{
|
||||
"dd": "Format a number in a variety of ways",
|
||||
"dt": "num_format"
|
||||
"dd": "Format a number into its string representation. Argument is optional.",
|
||||
"dt": "num_format(locale=\"\")"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{ "dt": "even", "dd": " the given variable is an even number." },
|
||||
{ "dt": "string", "dd": " the given variable is a string." },
|
||||
{ "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",
|
||||
"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] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
|
|
@ -80,14 +81,6 @@ dfn {
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
@ -193,12 +186,6 @@ input:-moz-focusring {
|
|||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
legend {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -283,7 +270,8 @@ address {
|
|||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
dl,
|
||||
menu {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -375,7 +363,6 @@ table {
|
|||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #818a91;
|
||||
text-align: left;
|
||||
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 "design/definitions";
|
||||
@import "design/fonts/nunito";
|
||||
@import "design/fonts/sauna_mono";
|
||||
@import "design/typography";
|
||||
@import "design/_scales";
|
||||
@import "./base.scss";
|
||||
@import "components/code";
|
||||
|
||||
:root {
|
||||
font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
|
||||
font-size: var(--default-font-size);
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
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-weight: 400;
|
||||
}
|
||||
|
|
@ -26,9 +21,9 @@ header.navbar {
|
|||
background-color: var(--background-color, #ffffff);
|
||||
|
||||
.identity {
|
||||
margin-right: 1rem;
|
||||
font-size: 1.375rem;
|
||||
padding: 0.325rem 0 0.325rem 0;
|
||||
margin-right: var(--space-s);
|
||||
font-size: var(--step-2);
|
||||
padding: var(--space-3xs) 0 var(--space-3xs) 0;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
color: var(--text-color, #1f000d);
|
||||
|
|
@ -37,20 +32,21 @@ header.navbar {
|
|||
}
|
||||
|
||||
article.text-article {
|
||||
max-width: 30em;
|
||||
max-width: 32em;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-right: calc(clamp(0.5rem, -0.7rem + 5.3333vw, 2.5rem));
|
||||
padding-left: calc(clamp(0.5rem, -0.7rem + 5.3333vw, 2.5rem));
|
||||
padding: 0 var(--space-xs-m) 0 var(--space-xs-m);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// Left sidebar
|
||||
|
||||
.topic-list {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: var(--space-s);
|
||||
@media screen and (min-width: 541px) {
|
||||
margin-top: 3.5rem;
|
||||
margin-top: var(--space-l);
|
||||
}
|
||||
|
||||
> h2 {
|
||||
|
|
|
|||
|
|
@ -1,47 +1,21 @@
|
|||
{% extends "section.html" %}
|
||||
|
||||
{% block body %}
|
||||
{% set page_class = "docs list" %}
|
||||
{% endblock body %}
|
||||
|
||||
{% block header %}
|
||||
{% set current_section = "docs" %}
|
||||
{{ header::header(current_section=current_section)}}
|
||||
{% endblock header %}
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" href="{{ get_url(path="page.css") | safe }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="wrap container" role="document">
|
||||
<div class="content">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-12 col-lg-10 col-xxl-8">
|
||||
<article>
|
||||
<h1 class="text-center">{{ section.title }}</h1>
|
||||
<div class="text-center">{{ section.content | safe }}</div>
|
||||
<div class="card-list">
|
||||
{% set index_path = current_path ~ "_index.md" | trim_start_matches(pat="/") %}
|
||||
{% set index = get_section(path=index_path) %}
|
||||
{% for page in index.pages %}
|
||||
<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 class="container" role="document">
|
||||
<div class="main">
|
||||
<div class="notes-sidebar">
|
||||
Sidebar!
|
||||
</div>
|
||||
<article>
|
||||
<h1 class="text-center">{{ section.title }}</h1>
|
||||
<div class="text-center">{{ section.content | safe }}</div>
|
||||
</article>
|
||||
<div class="page-sidebar">
|
||||
Page!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue