diff --git a/avatar.jpg b/avatar.jpg new file mode 100644 index 0000000..30c33c4 Binary files /dev/null and b/avatar.jpg differ diff --git a/render/templates/base.tmpl b/render/templates/base.tmpl index 5bbf31d..51089a9 100644 --- a/render/templates/base.tmpl +++ b/render/templates/base.tmpl @@ -12,57 +12,33 @@ + - {{ .SiteConfig.HtmlHeadExtra }} -
-
- {{ if .SiteConfig.AvatarUrl }} -
- -
- {{ end }} +
+ {{ if .SiteConfig.AvatarUrl }} + + {{ end }} -
-

{{ .SiteConfig.Title }}

-
{{ .SiteConfig.SubTitle }}
-
- -
    - {{ range $me := .SiteConfig.Me }} -
  • {{$me.Name}} -
    • - {{ end }} -
-
-
-
+ {{ end }} + +
{{template "main" .Data}} @@ -80,16 +56,12 @@
  • {{ $link.Title }}
    • {{ end }} {{ end }} +
  • Editor
    • - {{ .SiteConfig.FooterExtra}} - - - +
    + {{ .SiteConfig.FooterExtra}} +
    diff --git a/render/templates/views/entry.tmpl b/render/templates/views/entry.tmpl index bb35505..5f293c2 100644 --- a/render/templates/views/entry.tmpl +++ b/render/templates/views/entry.tmpl @@ -89,7 +89,7 @@
    -
    +
    Edit
    diff --git a/testbed.html b/testbed.html new file mode 100644 index 0000000..bb97e73 --- /dev/null +++ b/testbed.html @@ -0,0 +1,451 @@ + + + + + + + Stylesheet Test + + + + + +
    + Page Logo +
    +

    Page Title

    +

    Short description of waht the blog is about. Catchy phrase to remember the blog by!

    +
    + +
    + +
    + +

    Structure

    + +
    Footer
    + +

    Text

    + +

    Headings

    + +

    Heading 1

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor + convallis. + Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu + lobortis. + Nam et turpis a leo commodo imperdiet. +

    + +

    Heading 2

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor + convallis. + Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu + lobortis. + Nam et turpis a leo commodo imperdiet. +

    + +

    Heading 3

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor + convallis. + Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu + lobortis. + Nam et turpis a leo commodo imperdiet. +

    + +

    Heading 4

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor + convallis. + Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu + lobortis. + Nam et turpis a leo commodo imperdiet. +

    + +
    Heading 5
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor + convallis. + Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu + lobortis. + Nam et turpis a leo commodo imperdiet. +

    + +
    Heading 6
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor + convallis. + Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu + lobortis. + Nam et turpis a leo commodo imperdiet. +

    + +

    Inline text elements

    +

    + Link<a> +

    +

    + Abbr.<abbr> +

    +

    + Bold + <strong> + <b> +

    +

    + Italic + <i> + <em> + <cite> +

    +

    + Deleted + <del> +

    +

    + Inserted + <ins> +

    +

    + Ctrl + S + <kbd> +

    +

    + Highlighted + <mark> +

    +

    + Strikethrough + <s> +

    +

    + Small + <small> +

    +

    + Text Sub + <sub> +

    +

    + Text Sup + <sup> +

    +

    + Underline + <u> +

    +

    + Code + <code> +

    + +

    List

    + +

    Unordered List

    + +
      +
    • Unordered List 1
      • +
        +
      • Sub List 1
        • +
      • Sub List 2
        • +
      • Sub List 3
        • +
      • Sub List 4
        • +
          +
        • Sub Sub List 1
          • +
        • Sub Sub List 2
          • +
        • Sub Sub List 3
          • +
        • Sub Sub List 4
          • +
        +
      +
    • Unordered List 2
      • +
    • Unordered List 3
      • +
    • Unordered List 4
      • +
    + +

    Ordered List

    + +
      +
    1. Ordered List 1
      2. +
        +
      1. Sub List 1
        2. +
      2. Sub List 2
        3. +
      3. Sub List 3
        4. +
      4. Sub List 4
        5. +
          +
        1. Sub Sub List 1
          2. +
        2. Sub Sub List 2
          3. +
        3. Sub Sub List 3
          4. +
        4. Sub Sub List 4
          5. +
        +
      +
    2. Ordered List 2
      3. +
    3. Ordered List 3
      4. +
    4. Ordered List 4
      5. +
    + +

    Quote

    + +
    + “Design is a funny word. Some people think + design means how it looks. But of course, if + you dig deeper, it's really how it works.” +
    + — Steve Jobs +
    +
    + +

    Horizontal rule

    + +
    + +

    Table

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Column 1Column 2Column 3Column 4Column 5
    Cell 1Cell 2Cell 3Cell 4Cell 5
    Cell 1Cell 2Cell 3Cell 4Cell 5
    Cell 1Cell 2Cell 3Cell 4Cell 5
    Cell 1Cell 2Cell 3Cell 4Cell 5
    Cell 1Cell 2Cell 3Cell 4Cell 5
    Cell 1Cell 2Cell 3Cell 4Cell 5
    Cell 1Cell 2Cell 3Cell 4Cell 5
    Cell 1Cell 2Cell 3Cell 4Cell 5
    Cell 1Cell 2Cell 3Cell 4Cell 5
    + +

    Buttons

    + + + +

    Classes for buttons

    + + + + + +

    + + + + + + +

    Forms

    + +

    Inputs

    + +

    Inputs

    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +

    Inline Inputs

    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    + +

    Navigation

    + + + +

    Detail

    + +
    + Summary +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor + convallis. + Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu + lobortis. + Nam et turpis a leo commodo imperdiet.

    +
    + +

    Pre

    + 
    +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis.
+Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arculobortis.
+Nam et turpis a leo commodo imperdiet.
+
    + + +
    + + + + \ No newline at end of file diff --git a/web/static/owl.css b/web/static/owl.css new file mode 100644 index 0000000..7e539a7 --- /dev/null +++ b/web/static/owl.css @@ -0,0 +1,470 @@ +:root { + /* font sizes (fs) */ + /* + 0 base + lX large + sX small + */ + --fs-scale: 1.125; + --fs0: 1rem; + + --fsl1: calc(var(--fs0) * var(--fs-scale)); + --fsl2: calc(var(--fsl1) * var(--fs-scale)); + --fsl3: calc(var(--fsl2) * var(--fs-scale)); + --fsl4: calc(var(--fsl3) * var(--fs-scale)); + + --fss1: calc(var(--fs0) / var(--fs-scale)); + --fss2: calc(var(--fss1) / var(--fs-scale)); + --fss3: calc(var(--fss2) / var(--fs-scale)); + --fss4: calc(var(--fss3) / var(--fs-scale)); + + /* font weight */ + --fw: 400; + --fwb: 700; + --fwl: 100; + + /* font color */ + /* fonts */ + --font: Arial, Helvetica, sans-serif; + --font-h: 'Courier New', Courier, monospace; + --font-code: 'Courier New', Courier, monospace; + + + /* spacings */ + --spacing-scale: 1.5; + --max-spacing: 4rem; + --s5: var(--max-spacing); + --s4: calc(var(--s5) / var(--spacing-scale)); + --s3: calc(var(--s4) / var(--spacing-scale)); + --s2: calc(var(--s3) / var(--spacing-scale)); + --s1: calc(var(--s2) / var(--spacing-scale)); + --s0: calc(var(--s1) / var(--spacing-scale)); + + /* content-width */ + --cw: 620px; + + /* colors */ + --text: hsl(0, 0%, 17%); + + --primary: hsl(200, 25%, 50%); + --primary-l1: color-mix(in srgb, var(--primary), #fff 20%); + --primary-l2: color-mix(in srgb, var(--primary), #fff 40%); + --primary-l3: color-mix(in srgb, var(--primary), #fff 60%); + --primary-l4: color-mix(in srgb, var(--primary), #fff 80%); + --primary-d1: color-mix(in srgb, var(--primary), #000 20%); + --primary-d2: color-mix(in srgb, var(--primary), #000 40%); + --primary-d3: color-mix(in srgb, var(--primary), #000 60%); + --primary-d4: color-mix(in srgb, var(--primary), #000 80%); + + --secondary: color-mix(in hsl longer hue, var(--primary), var(--primary) 50%); + --secondary-l1: color-mix(in srgb, var(--secondary), #fff 20%); + --secondary-l2: color-mix(in srgb, var(--secondary), #fff 40%); + --secondary-l3: color-mix(in srgb, var(--secondary), #fff 60%); + --secondary-l4: color-mix(in srgb, var(--secondary), #fff 80%); + --secondary-d1: color-mix(in srgb, var(--secondary), #000 20%); + --secondary-d2: color-mix(in srgb, var(--secondary), #000 40%); + --secondary-d3: color-mix(in srgb, var(--secondary), #000 60%); + --secondary-d4: color-mix(in srgb, var(--secondary), #000 80%); + + --text-primary: color-mix(in srgb, var(--primary), #fff 90%); + --text-secondary: color-mix(in srgb, var(--secondary), #fff 90%); +} + +/* Styling of main page elements */ + +* { + /* global properties*/ + font-family: var(--font); + color: var(--text); +} + +body { + display: flex; + flex-direction: column; + margin: 0; + min-height: 100vh; +} + +html { + margin: 0; + min-height: 100vh; +} + +main { + flex: 1; + max-width: var(--cw); + margin: 0 auto; +} + +:is(h1, h2, h3, h4, h5, h6) { + font-family: var(--font-h); + margin-top: var(--s4); + margin-bottom: var(--s0); +} + +h1 { + font-size: var(--fsl4); +} + +h2 { + font-size: var(--fsl3); +} + +h3 { + font-size: var(--fsl2); +} + +h4 { + font-size: var(--fsl1); +} + +h5 { + font-size: var(--fs0); + font-weight: var(--fwb); +} + +h6 { + font-size: var(--fsl4); +} + +hr { + color: var(--primary); + border-style: dashed; + border-bottom: none; + border-width: 3px; +} + +pre { + font-family: var(--font-code); + background-color: var(--primary-l4); + padding: var(--s0); + white-space: pre-wrap; +} + +main img { + max-width: 100%; +} + +/* inline elements */ +a { + text-decoration: none; + color: var(--primary); +} + +a:hover { + text-decoration: underline; + color: var(--primary-d2); +} + +abbr[title] { + border-bottom: 1px dashed; + text-decoration: none; + cursor: help; +} + +kbd { + background-color: var(--primary-d3); + color: var(--text-primary); + padding: 0 var(--s0); + border-radius: var(--s0); +} + +mark { + background-color: var(--secondary-l3); +} + +code { + font-family: var(--font-code); + background-color: var(--primary-l4); + padding: 0 var(--s0); + border-radius: 2px; +} + +/* lists */ + +ul, +ol { + padding-left: var(--s3); +} + +li { + padding-bottom: var(--s0); +} + +ul li { + list-style: square; +} + +/* Quote */ + +blockquote { + margin-left: 0; + padding-left: var(--s4); + border-left: solid var(--primary) 3px; +} + +blockquote>footer { + width: initial; + margin: initial; + background-color: initial; + color: initial; + padding-bottom: initial; +} + +/* Table */ + +:where(table) { + border-collapse: collapse; + border-spacing: 0; + text-indent: 0; +} + +table { + width: 100%; +} + +th { + text-align: inherit; + padding: var(--s0); + border-bottom: solid var(--primary) 1px; +} + +tr:nth-child(2n) { + background: var(--primary-l4); +} + +td { + margin: 0; + padding: var(--s0); + border-bottom: solid var(--primary-l3) 1px; +} + +/* buttons */ +a[role='button'] { + display: inline-block; + box-sizing: border-box; + text-align: center; +} + +a[role='button']:hover { + text-decoration: none; +} + +button, +input[type='button'], +input[type='submit'], +a[role='button'] { + background-color: var(--primary); + color: var(--text-primary); + padding: var(--s1); + border: none; + border-radius: var(--s0); + font-size: var(--fs0); +} + +button:hover, +input[type='button']:hover, +input[type='submit']:hover, +a[role='button']:hover { + background-color: var(--primary-d1); +} + +button:disabled, +input[type='button']:disabled, +input[type='submit']:disabled, +a[role='button']:disabled { + background-color: var(--primary-l2); +} + +input[type=checkbox]:checked, +input[type=radio]:checked, +input[type=range] { + accent-color: var(--primary); +} + +/* forms */ + +label { + display: inline-block; + padding-bottom: var(--s0); +} + +input, +textarea { + display: inline-block; + width: 100%; + vertical-align: middle; + margin-bottom: var(--s3); + padding: var(--s1); + box-sizing: border-box; + border: solid var(--primary-l2) 1px; + border-radius: var(--s0); +} + +input[type='color'] { + padding: 0; + background-color: #fff; +} + +label { + width: 100%; +} + +label>input { + display: inherit; + width: initial; + margin-left: var(--s1); + margin-top: 0; + margin-bottom: 0; +} + +label>input[type='color'] { + min-width: 170px; +} + +/* button classes */ + +button.secondary, +input[type='button'].secondary, +input[type='submit'].secondary { + background-color: var(--secondary); + color: var(--text-secondary); +} + +button.secondary:hover, +input[type='button'].secondary:hover, +input[type='submit'].secondary:hover { + background-color: var(--secondary-d1); +} + +button.secondary:disabled, +input[type='button'].secondary:disabled, +input[type='submit'].secondary:disabled { + background-color: var(--secondary-l2); +} + + +/* Header specific styling */ + +header { + width: 100vw; + margin: 0; + margin-bottom: var(--s4); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + background-color: var(--primary); + color: var(--text-primary); +} + +header img { + max-height: var(--s5); + margin-right: var(--s1); + margin-left: var(--s1); +} + +header>hgroup { + flex: 1; + min-width: calc(var(--cw) / 2); + margin-right: var(--s5); +} + +header>hgroup>h1 { + margin-top: var(--s0); + margin-bottom: var(--s0); + color: var(--text-primary); +} + +header>hgroup>h1>a { + color: var(--text-primary); +} + +header>hgroup>h1>a:hover { + color: var(--text-primary); +} + +header>hgroup>p { + font-size: var(--fsl1); + margin-top: var(--s0); + margin-bottom: var(--s0); + font-family: var(--font); + color: var(--text-primary); +} + +header>nav>ul { + display: flex; + list-style-type: none; + margin: 0; + padding-left: 0; + padding-top: var(--s1); + padding-bottom: var(--s1); + align-items: center; +} + +header>nav>ul>li { + float: left; + margin-right: var(--s1); + padding: var(--s1); + color: var(--text-primary); + list-style-type: none; + +} + +header>nav>ul>li>a { + color: var(--text-primary); +} + +header>nav>ul>li>a:hover { + color: var(--text-primary); +} + +/* Footer specific styling */ + +footer { + width: 100vw; + margin: 0; + background-color: var(--primary); + color: var(--text-primary); + padding-bottom: var(--s5); +} + +footer>div { + max-width: var(--cw); + margin: 0 auto; + color: var(--text-primary); + text-align: center; +} + +footer>nav { + margin: 0 auto; + color: var(--text-primary); +} + +footer>nav>ul { + display: flex; + justify-content: center; + list-style-type: none; + margin: 0; + padding-left: 0; + padding-top: var(--s1); + padding-bottom: var(--s1); + align-items: center; +} + +footer>nav>ul>li { + float: left; + margin-right: var(--s1); + padding: var(--s1); + color: var(--text-primary); + list-style-type: none; + +} + +footer>nav>ul>li>a { + color: var(--text-primary); +} + +footer>nav>ul>li>a:hover { + color: var(--text-primary); +} \ No newline at end of file diff --git a/web/static/style.css b/web/static/style.css index f91e38f..274bd1d 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -1,162 +1,3 @@ -body { - font-family: sans-serif; - max-width: 800px; - margin: 0 auto 0 auto; -} - -header { - padding: 1rem; - background-color: var(--background); - /* background: linear-gradient(180deg, var(--background) 0%, rgba(255, 255, 255, 0) 100%); */ - - padding-bottom: 1rem !important; - margin-bottom: 2rem; -} - -footer { - border-top: dashed 2px; - border-color: #ccc; - padding-bottom: 5rem; -} - -label { - display: inline-block; - padding-bottom: 0.25rem; -} - -input, textarea, a[role='button'] { - display: inline-block; - width: 100%; - vertical-align: middle; - margin-bottom: 0.75rem; - padding: 0.25rem; - box-sizing: border-box; -} - -input[type='submit'], a[role='button'] { - background-color: var(--primary); - color: #fff; - border: none; - border-radius: 2px; - font-size: 1rem; - text-align: center; - height: 2rem; -} - -input[type='submit']:hover, a[role='button']:hover { - background-color: var(--primary-hover); - color: #fff; -} - -input[type='submit']:focus, a[role='button']:focus { - background-color: var(--primary-focus); - color: #fff; -} - -input[type='submit'].secondary { - background-color: #5d6b89; -} - -input[type='submit'].secondary:hover { - background-color: #48536b; -} - -input[type='submit'].secondary:focus { - background-color: rgba(93, 107, 137, 0.25); -} - -/* for checkboxes */ -label > input { - display: inherit; - width: initial; -} - -/* from pico.css */ -mark { - padding: 0.125rem 0.25rem; - background-color: #fde7c0; - vertical-align: baseline; -} - -main img { - max-width: 100%; - margin: auto; - text-align: center; - display: block; -} - - -a { - color: var(--primary); - text-decoration: none; -} - -a:hover { - color: var(--primary-hover); -} - -a:focus { - color: var(--primary-focus); -} - -nav > ul { - list-style-type: none; - margin: 0; - padding-left: 0; - padding-top: 1rem; - padding-bottom: 1rem; -} - -nav > ul > li { - float: left; - padding-right: 2rem; -} - -hr { - margin: 3rem -} -h1 { - font-size: 1.5rem; -} -h2 { - font-size: 1.25rem; -} -h3 { - font-size: 1.125rem; -} -h4, h5, h6 { - font-size: 1.0rem; -} - -pre { - background-color: #eee; - padding: 0.5rem; - white-space: pre-wrap; -} - -table { - width: 100%; -} - -th { - border-bottom: solid #888 1px; -} - -tr:nth-child(2n) { - background: #f0f0f1; -} - -.header { - display: flex; - flex-flow: row; -} - -.header-profile { - padding-right: 0.5rem; - display: flex; - justify-content: center; - align-items: center; -} .row { display: flex; @@ -194,18 +35,18 @@ nav.row { } .action-tile { - border: 1px solid var(--background-dark); + border: 1px solid var(--primary-l1); padding: 20px; flex: 1 1 0px; margin: 6px; min-width: 20%; text-align: center; - background: var(--background); + background: var(--primary-l4); border-radius: 4px; } .action-tile:hover { - background: var(--background-light); + background: var(--primary-l3); } .danger { @@ -260,28 +101,4 @@ nav.row { border-width: 4px; border-color: #ff3e3e; animation: border-pulsate-error 1s 2; -} - -.avatar { - float: left; - margin-right: 1rem; - border-radius: 50%; -} - -.photo-grid { - display: flex; - flex-wrap: wrap; - padding: 0 4px; -} - -.photo-grid-item { - flex: 1 0 25%; - padding: 4px; -} - -.photo-grid-item img { - width: 100%; - height: 100%; - aspect-ratio: 1 / 1; - object-fit: cover; -} +} \ No newline at end of file