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:
Elf M. Sternberg 2022-05-19 18:22:51 -07:00
parent 18aacee501
commit 5517b77fad
8 changed files with 126 additions and 96 deletions

View File

@ -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=\"\")"
}
]
}

View File

@ -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)."

14
sass/base.scss Normal file
View File

@ -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;
}

View File

@ -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;
}

59
sass/layouts/page.scss Normal file
View File

@ -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%;
}
}
}

View File

@ -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 {

View File

@ -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">
<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>
<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 }} &rarr;</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 }} &rarr;</a>
</div>
</div>
{% endfor %}
{% endif %}
{% endfor %}
</div>
</article>
</div>
<div class="page-sidebar">
Page!
</div>
</div>
</div>