From 4c8624ea780403bcc435c295731eb1177342e8a3 Mon Sep 17 00:00:00 2001 From: Alexander Avery Date: Sun, 13 Mar 2022 23:57:03 -0400 Subject: [PATCH] added scss and layouts --- LICENSE | 2 +- assets/sass/cards.scss | 81 ++++++++++++ assets/sass/code.scss | 22 ++++ assets/sass/colors.scss | 13 ++ assets/sass/main.scss | 130 +++++++++++++++++++ layouts/_default/baseof.html | 29 +++++ layouts/_default/list.html | 14 ++ layouts/_default/single.html | 29 +++++ layouts/_default/taxonomy.html | 12 ++ layouts/_default/terms.html | 12 ++ layouts/authors/list.html | 23 ++++ layouts/authors/terms.html | 9 ++ layouts/games/list.html | 33 +++++ layouts/partials/article-card-alternate.html | 12 ++ layouts/partials/article-card.html | 19 +++ layouts/partials/footer.html | 4 + layouts/partials/header.html | 12 ++ 17 files changed, 455 insertions(+), 1 deletion(-) create mode 100644 assets/sass/cards.scss create mode 100644 assets/sass/code.scss create mode 100644 assets/sass/colors.scss create mode 100644 assets/sass/main.scss create mode 100644 layouts/_default/baseof.html create mode 100644 layouts/_default/list.html create mode 100644 layouts/_default/single.html create mode 100644 layouts/_default/taxonomy.html create mode 100644 layouts/_default/terms.html create mode 100644 layouts/authors/list.html create mode 100644 layouts/authors/terms.html create mode 100644 layouts/games/list.html create mode 100644 layouts/partials/article-card-alternate.html create mode 100644 layouts/partials/article-card.html create mode 100644 layouts/partials/footer.html create mode 100644 layouts/partials/header.html diff --git a/LICENSE b/LICENSE index 6c9eef8..551c520 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -Copyright (c) . All rights reserved. +Copyright (c) 2022 Beet Box. All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: diff --git a/assets/sass/cards.scss b/assets/sass/cards.scss new file mode 100644 index 0000000..774532f --- /dev/null +++ b/assets/sass/cards.scss @@ -0,0 +1,81 @@ +@mixin shadow { + box-shadow: 0px 4px 8px black; +} + +.shadow { + @include shadow +} + +.float-on-hover { + transition: (all 0.25s cubic-bezier(0.2,0.1,0.47,1)); + &:hover { + transform: (translateY(-10px)); + } +} + +article { + display: flex; + background-color: $dark; + border-radius: 10px; +} + +article.card { + height: 420px; + flex: 1 1 305px; + flex-direction: column; + overflow: hidden; + + div.article-info-container, div.article-image { + overflow: hidden; + flex: 1; + } + + div.article-info { + box-sizing: border-box; + padding: 25px; + height: 200px; + display: flex; + flex-direction: column; + + a.article-title { + flex: 2; + display: flex; + justify-content: space-between; + flex-direction: column; + text-decoration: none; + color: $font-color; + } + } +} + +.circle { + border-radius: 50%; +} + +img.small-image { + width: 400px; +} + +.article-link { + text-decoration: none; + color: $font-color; +} + +article.card-alternate { + justify-content: space-evenly; + align-items: center; + flex-wrap: wrap; + gap: 40px; + + div { + padding: 16px; + } + img { + width: 250px; + height: 250px; + border-radius: 50%; + } + p { + max-width: 500px; + } +} diff --git a/assets/sass/code.scss b/assets/sass/code.scss new file mode 100644 index 0000000..010d79d --- /dev/null +++ b/assets/sass/code.scss @@ -0,0 +1,22 @@ +code { + background: $dark; + border-radius: .4rem; + margin: 0 .2rem; + padding: .2rem .5rem; + white-space: nowrap; +} + +pre { + background-color: $background-color !important; + max-width: 100%; + + & > code { + @include shadow; + display: block; + padding: 1rem 1.5rem; + white-space: pre; + max-width: 100%; + overflow-x: auto; + border-left: .3rem solid $beetbox-purple; + } +} diff --git a/assets/sass/colors.scss b/assets/sass/colors.scss new file mode 100644 index 0000000..906f6ba --- /dev/null +++ b/assets/sass/colors.scss @@ -0,0 +1,13 @@ +$background-color: #1f2835; +$font-color: #f8f8ff; +$top-bar: #f8f8ffcc; + +$beetbox-red: #9e0008; +$beetbox-pink: #d93370; +$beetbox-purple: #ac65cb; +$beetbox-green: #003f56; +$beetbox-blue: #5fcfd0; + +$dark: #111; +$visited-link: #e4cdef; + diff --git a/assets/sass/main.scss b/assets/sass/main.scss new file mode 100644 index 0000000..1850c7f --- /dev/null +++ b/assets/sass/main.scss @@ -0,0 +1,130 @@ +@import 'colors.scss'; +@import 'cards.scss'; +@import 'code.scss'; + +@mixin screen-max($max) { + @media (max-width: $max - 1) { + @content + } +} + +body { + background-color: $background-color; + color: $font-color; + margin: 0px; + overflow-y: scroll; +} + +header { + background-color: $top-bar; + box-shadow: 0px 5px 10px black; + .spread { + gap: 24px; + display: flex; + align-items: flex-end; + justify-content: space-between; + @include screen-max(1000px){justify-content: center;} + ul { + margin: 0px; + padding: 0px; + list-style-type: none; + a { + text-align: center; + margin: auto; + font-weight: bold; + text-decoration: none; + color: $background-color; + } + } + } + nav { + max-width: 1400px; + margin: 0px auto; + padding: 8px; + flex-wrap: wrap; + a { + @include screen-max(1000px){flex-basis: 100%;} + } + img { + max-width: 300px; + display: block; + @include screen-max(1000px){margin: auto; flex-basis: 100%;} + } + } +} + +a { + color: $beetbox-blue; +} + +a:visited, a:hover { + color: $visited-link; +} + +.content-wrapper, .article-meta { + max-width: 820px; + margin: auto; + padding: 4px; +} + +.center-text { + text-align: center; + flex-basis: 100%; +} + +.break { + flex-basis: 100%; + height: 0px; +} + +a, p, span, li, h2, code { + font-size: 1.25rem; +} + +p { + text-align: justify; +} + +img { + object-fit: cover; +} + +.small-text { + font-size: 1rem; +} + +.article-meta { + display: flex; + justify-content: center; + align-items: center; + gap: 4px 8px; + flex-wrap: wrap; + h1 { + font-size: 2rem; + } + img { + border-radius: 8px; + } + img.large-image { + width: 100%; + max-height: 500px; + } +} + +section { + max-width: 1000px; + margin: 16px auto; + padding: 8px; +} + +section.article-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 40px; +} + +.fill-wh { + width: 100%; + height: 100% +} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..4e005c8 --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,29 @@ + + + + + {{ with .OutputFormats.Get "rss" -}} + {{ printf `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} + {{ end -}} + + + + + {{ $style := resources.Get "/sass/main.scss" | resources.ToCSS }} + + + {{ block "title" . }} {{ .Site.Title }} {{ end }} + + + + {{ partial "header.html" . }} + {{ block "headline" . }} + {{ end }} + {{ block "main" . }} + {{ end }} + + {{ partial "footer.html" . }} + {{ block "footer" . }} + {{ end }} + + diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..859fe70 --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,14 @@ +{{ define "main" }} + {{if not .IsHome }} +

{{ .Title | markdownify | lower }}

+ {{ end }} + {{ .Content }} +
+ {{ $pages := .Pages }} + {{ if .IsHome }}{{ $pages = where .Site.RegularPages "Section" "not in" (default "[]" .Site.Params.excludedSections) }}{{ end }} + {{ range (where $pages "Section" "ne" "") }} + {{ partial "article-card.html" . }} + {{ end }} +
+{{ end }} + diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..1a2d1fa --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,29 @@ +{{ define "main" }} +
+

{{ .Title | markdownify }}

+{{ $authors := .Params.authors | default (slice .Site.Params.defaultAuthor) }} +

{{ index $authors 0 }}

 +{{ if .Params.date }}

{{ .Date.Format "Mon | Jan 2, 2006" }}

{{ end }} +{{ range (.GetTerms "tags") }} + {{ .LinkTitle }} +{{ end}} + {{ .Params.featured.alt }} +
+ +{{ if .Params.toc }} +{{ .TableOfContents }} +{{ end }} +
+
+ {{ .Content }} + {{ with .NextInSection }} +

Next: {{ .Title | markdownify }}

+ {{ end }} + {{ with .PrevInSection }} +

Previous: {{ .Title | markdownify }}

+ {{ end }} +
+ >> Home +
+
+{{ end }} diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html new file mode 100644 index 0000000..8aa95f1 --- /dev/null +++ b/layouts/_default/taxonomy.html @@ -0,0 +1,12 @@ +{{ define "main" }} +

{{ .Title | markdownify | lower }} tag

+
+ {{ .Content }} +
+
+ {{ $pages := .Pages }} + {{ range (where $pages "Section" "ne" "") }} + {{ partial "article-card.html" . }} + {{ end }} +
+{{ end }} diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html new file mode 100644 index 0000000..c6b306d --- /dev/null +++ b/layouts/_default/terms.html @@ -0,0 +1,12 @@ +{{ define "main" }} +

{{ .Title | markdownify | lower }}

+
+ {{ .Content }} +
+
+ {{ $pages := .Pages }} + {{ range (where $pages "Section" "ne" "") }} + {{ partial "article-card.html" . }} + {{ end }} +
+{{ end }} diff --git a/layouts/authors/list.html b/layouts/authors/list.html new file mode 100644 index 0000000..7a9d4fd --- /dev/null +++ b/layouts/authors/list.html @@ -0,0 +1,23 @@ +{{ define "main" }} +
+ {{if not .IsHome }} +
+

{{ .Params.name }}

+

{{ .Params.bio }}

+ Projects + | + {{ .Params.email}} +
+ {{ .Params.alt }} +
+ {{ end }} + {{ .Content }} +

Posts:

+
+
+ {{ range .Data.Pages }} + {{ partial "article-card.html" . }} + {{ end }} +
+{{ end }} + diff --git a/layouts/authors/terms.html b/layouts/authors/terms.html new file mode 100644 index 0000000..fcfe3d3 --- /dev/null +++ b/layouts/authors/terms.html @@ -0,0 +1,9 @@ +{{ define "main" }} +

Authors

+ +
+ {{ range .Data.Pages }} + {{ partial "article-card-alternate.html" . }} + {{ end }} +
+{{ end }} diff --git a/layouts/games/list.html b/layouts/games/list.html new file mode 100644 index 0000000..b9cf487 --- /dev/null +++ b/layouts/games/list.html @@ -0,0 +1,33 @@ +{{ define "main" }} +
+

{{ .Title | markdownify }}

+{{ $authors := .Params.authors | default (slice .Site.Params.defaultAuthor) }} +

{{ index $authors 0 }}

 +{{ if .Params.date }}

{{ .Date.Format "Mon | Jan 2, 2006" }}

{{ end }} +{{ range (.GetTerms "tags") }} + {{ .LinkTitle }} +{{ end }} +
+

Platforms:

+ {{ delimit .Params.platforms " ยท " }} + {{ .Params.featured.alt }} +
+ +{{ if .Params.toc }} +{{ .TableOfContents }} +{{ end }} +
+
+ {{ .Content }} + {{ if gt (len .Data.Pages) 0 }} +

Devlogs:

+
+ {{ range .Data.Pages }} + {{ partial "article-card.html" . }} + {{ end }} +
+ {{ end }} + >> Home +
+
+{{ end }} diff --git a/layouts/partials/article-card-alternate.html b/layouts/partials/article-card-alternate.html new file mode 100644 index 0000000..981308c --- /dev/null +++ b/layouts/partials/article-card-alternate.html @@ -0,0 +1,12 @@ + +
+
+ {{ .Params.alt }} +
+
+

{{ .Params.name }}

+

{{ .Params.bio }}

+
+
+ + diff --git a/layouts/partials/article-card.html b/layouts/partials/article-card.html new file mode 100644 index 0000000..20783cf --- /dev/null +++ b/layouts/partials/article-card.html @@ -0,0 +1,19 @@ + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..0f77d8b --- /dev/null +++ b/layouts/partials/footer.html @@ -0,0 +1,4 @@ +
+
+

{{ $.Site.Copyright | safeHTML }}

+
diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..44b46f1 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,12 @@ +
+ +