X-Git-Url: https://git.bts.cx/garden.git/blobdiff_plain/436d73d6aa63f88d4392be022e1dd7d337724bf1..HEAD:/templates/style/screen.css?ds=inline

diff --git a/templates/style/screen.css b/templates/style/screen.css
index e69de29..b6a243e 100644
--- a/templates/style/screen.css
+++ b/templates/style/screen.css
@@ -0,0 +1,613 @@
+html {
+    line-height: 1.15;
+    -webkit-text-size-adjust:100%
+}
+
+body {
+    margin:0
+}
+
+h1 {
+    font-size: 2em;
+    margin:.67em 0
+}
+
+hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow:visible
+}
+
+pre {
+    font-size:1em
+}
+
+a {
+    background-color:rgba(0, 0, 0, 0)
+}
+
+abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    text-decoration:underline dotted
+}
+
+b, strong {
+    font-weight:bolder
+}
+
+code, kbd, samp {
+    font-size:1em
+}
+
+small {
+    font-size:80%
+}
+
+sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align:baseline
+}
+
+sub {
+    bottom:-0.25em
+}
+
+sup {
+    top:-0.5em
+}
+
+img {
+    border-style:none
+}
+
+button, input, optgroup, select, textarea {
+    font-size: 100%;
+    line-height: 1.15;
+    margin:0
+}
+
+button, input {
+    overflow:visible
+}
+
+button, select {
+    text-transform:none
+}
+
+button, [type=button], [type=reset], [type=submit] {
+    -webkit-appearance:button
+}
+
+button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
+    border-style: none;
+    padding:0
+}
+
+button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
+    outline:1px dotted ButtonText
+}
+
+fieldset {
+    padding:.35em .75em .625em
+}
+
+legend {
+    box-sizing: border-box;
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    padding: 0;
+    white-space:normal
+}
+
+progress {
+    vertical-align:baseline
+}
+
+textarea {
+    overflow:auto
+}
+
+[type=checkbox], [type=radio] {
+    box-sizing: border-box;
+    padding:0
+}
+
+[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
+    height:auto
+}
+
+[type=search] {
+    -webkit-appearance: textfield;
+    outline-offset:-2px
+}
+
+[type=search]::-webkit-search-decoration {
+    -webkit-appearance:none
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font:inherit
+}
+
+details {
+    display:block
+}
+
+summary {
+    display:list-item
+}
+
+template {
+    display:none
+}
+
+[hidden] {
+    display:none
+}
+
+.highlight {
+    background: #f8f8f8;
+    padding: 1px 1em;
+    border-radius: 3px;
+    font-size: 1em;
+    font-size: .9em;
+    overflow: auto;
+    margin:1em -1em
+}
+
+.highlight code {
+    padding:0
+}
+
+div.highlight {
+    display:grid
+}
+
+.highlight .c {
+    color: #998;
+    font-style:italic
+}
+
+.highlight .err {
+    color: #a61717;
+    background-color:#e3d2d2
+}
+
+.highlight .k {
+    font-weight:bold
+}
+
+.highlight .o {
+    font-weight:bold
+}
+
+.highlight .cm {
+    color: #998;
+    font-style:italic
+}
+
+.highlight .cp {
+    color: #999;
+    font-weight:bold
+}
+
+.highlight .c1 {
+    color: #998;
+    font-style:italic
+}
+
+.highlight .cs {
+    color: #999;
+    font-weight: bold;
+    font-style:italic
+}
+
+.highlight .gd {
+    color: #000;
+    background-color:#fdd
+}
+
+.highlight .gd .x {
+    color: #000;
+    background-color:#faa
+}
+
+.highlight .ge {
+    font-style:italic
+}
+
+.highlight .gr {
+    color:#a00
+}
+
+.highlight .gh {
+    color:#999
+}
+
+.highlight .gi {
+    color: #000;
+    background-color:#dfd
+}
+
+.highlight .gi .x {
+    color: #000;
+    background-color:#afa
+}
+
+.highlight .go {
+    color:#888
+}
+
+.highlight .gp {
+    color:#555
+}
+
+.highlight .gs {
+    font-weight:bold
+}
+
+.highlight .gu {
+    color:#aaa
+}
+
+.highlight .gt {
+    color:#a00
+}
+
+.highlight .kc {
+    font-weight:bold
+}
+
+.highlight .kd {
+    font-weight:bold
+}
+
+.highlight .kp {
+    font-weight:bold
+}
+
+.highlight .kr {
+    font-weight:bold
+}
+
+.highlight .kt {
+    color: #458;
+    font-weight:bold
+}
+
+.highlight .m {
+    color:#099
+}
+
+.highlight .s {
+    color:#d14
+}
+
+.highlight .na {
+    color:teal
+}
+
+.highlight .nb {
+    color:#0086b3
+}
+
+.highlight .nc {
+    color: #458;
+    font-weight:bold
+}
+
+.highlight .no {
+    color:teal
+}
+
+.highlight .ni {
+    color:purple
+}
+
+.highlight .ne {
+    color: #900;
+    font-weight:bold
+}
+
+.highlight .nf {
+    color: #900;
+    font-weight:bold
+}
+
+.highlight .nn {
+    color:#555
+}
+
+.highlight .nt {
+    color:navy
+}
+
+.highlight .nv {
+    color:teal
+}
+
+.highlight .ow {
+    font-weight:bold
+}
+
+.highlight .w {
+    color:#bbb
+}
+
+.highlight .mf {
+    color:#099
+}
+
+.highlight .mh {
+    color:#099
+}
+
+.highlight .mi {
+    color:#099
+}
+
+.highlight .mo {
+    color:#099
+}
+
+.highlight .sb {
+    color:#d14
+}
+
+.highlight .sc {
+    color:#d14
+}
+
+.highlight .sd {
+    color:#d14
+}
+
+.highlight .s2 {
+    color:#d14
+}
+
+.highlight .se {
+    color:#d14
+}
+
+.highlight .sh {
+    color:#d14
+}
+
+.highlight .si {
+    color:#d14
+}
+
+.highlight .sx {
+    color:#d14
+}
+
+.highlight .sr {
+    color:#009926
+}
+
+.highlight .s1 {
+    color:#d14
+}
+
+.highlight .dl {
+    color:#d14
+}
+
+.highlight .ss {
+    color:#990073
+}
+
+.highlight .bp {
+    color:#999
+}
+
+.highlight .vc {
+    color:teal
+}
+
+.highlight .vg {
+    color:teal
+}
+
+.highlight .vi {
+    color:teal
+}
+
+.highlight .il {
+    color:#099
+}
+
+body {
+    box-sizing: content-box;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    margin: 0 auto;
+    line-height: 1.7;
+    padding: 4vh 6vw;
+    overflow-x: hidden;
+    color: #333;
+    font-size: 1rem;
+    max-width:63em
+}
+
+@media (min-width: 820px) {
+    body {
+        font-size:1.2rem
+    }
+}
+
+time {
+    display: block;
+    color: hsl(0, 0%, 30%);
+    margin:.5em 0 1em
+}
+
+footer {
+    margin: 2em 0;
+    font-size: .8em;
+    color: hsl(0, 0%, 36%);
+    padding-top:1em
+}
+
+img {
+    max-width: 100%;
+    margin: 0 auto;
+    max-height: 75vh;
+    border-radius:4px
+}
+
+blockquote {
+    padding: 1.5em;
+    margin: 0;
+    font-size: .88em;
+    background: hsl(0, 0%, 96.4%);
+    border-radius:4px
+}
+
+blockquote p {
+    margin:0
+}
+
+hr {
+    width: 100%;
+    border: 0;
+    height: 1px;
+    margin: 1.5em 0;
+    background:hsl(0, 0%, 85%)
+}
+
+h1, h2, h3, h4, h5, h6 {
+    line-height: 1.3;
+    margin-bottom: 0;
+    padding-bottom:0
+}
+
+a {
+    transition: background 300ms;
+    padding: 0 .1em;
+    text-decoration: none;
+    border-bottom: 1px solid hsl(0, 0%, 85%);
+    color:hsl(0, 0%, 10%)
+}
+
+a:hover {
+    color: #000 !important;
+    background:#fffaf1
+}
+
+a:after {
+    position: relative;
+    top: -0.5em;
+    font-size: .7em;
+    content: "↗";
+    color:#aaa
+}
+
+a.internal-link:after, a.footnote:after, a.reversefootnote:after {
+    content: ""
+}
+
+*:focus {
+    background: #ffe8bc !important;
+    color:#000 !important
+}
+
+nav {
+    margin:1em 0 3em
+}
+
+#notes-entry-container {
+    display: grid;
+    grid-gap: 2em;
+    grid-template-areas: "content" "side"
+}
+
+@media (min-width: 700px) {
+    #notes-entry-container {
+        grid-template-columns: 3fr 1fr;
+        grid-template-areas: "content side"
+    }
+}
+
+.backlink-box {
+    background: hsl(0, 0%, 96.4%);
+    padding: 1em;
+    border-radius:4px
+}
+
+code {
+    background: #f5f5f5;
+    padding: .1em .2em;
+    border-radius:4px
+}
+
+.invalid-link {
+    color: #444;
+    cursor: help;
+    background: #fafafa;
+    padding:0 .1em
+}
+
+.invalid-link-brackets {
+    color: #ccc;
+    cursor: help
+}
+
+body {
+    background: #5fcde4;
+    background-image: url(../assets/bg.png);
+    padding: 0;
+}
+
+.container {
+  display: grid;
+  grid-template:
+    [header-left] "head head" auto [header-right]
+    [main-left] "nav main" auto [main-right]
+    [footer-left] "nav foot" auto [footer-right]
+    / 300px auto;
+    
+    margin: 0 auto;
+    min-height: 100%;
+
+    padding: 0;
+    background-color: rgba(255.0, 255.0, 255.0, 0.8);
+}
+
+header {
+  grid-area: head;
+}
+
+nav {
+  grid-area: nav;
+  padding: 15px !important;
+  background-color: rgba(255.0, 255.0, 255.0, 0.8);
+  margin: 0;
+}
+
+nav > ul {
+    margin: 0 !important;
+    padding: 0;
+    list-style: none;
+}
+
+main {
+  grid-area: main;
+}
+
+footer {
+    margin: 20px 0 10px 0;
+    padding: 20px;
+    font-size: 0.6em;
+    text-align: right;
+  grid-area: foot;
+}
+
+.container > * {
+    padding: 0 30px;
+}