BeetBox
/
neon-harvest
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

added scss and layouts

master
Alexander Avery 3 years ago
parent
25f1e1d110
commit
4c8624ea78
17 changed files with 455 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      LICENSE
  2. 81
      assets/sass/cards.scss
  3. 22
      assets/sass/code.scss
  4. 13
      assets/sass/colors.scss
  5. 130
      assets/sass/main.scss
  6. 29
      layouts/_default/baseof.html
  7. 14
      layouts/_default/list.html
  8. 29
      layouts/_default/single.html
  9. 12
      layouts/_default/taxonomy.html
  10. 12
      layouts/_default/terms.html
  11. 23
      layouts/authors/list.html
  12. 9
      layouts/authors/terms.html
  13. 33
      layouts/games/list.html
  14. 12
      layouts/partials/article-card-alternate.html
  15. 19
      layouts/partials/article-card.html
  16. 4
      layouts/partials/footer.html
  17. 12
      layouts/partials/header.html

2
LICENSE
View File

@ -1,4 +1,4 @@
Copyright (c) <year> <owner>. 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:

81
assets/sass/cards.scss
View File

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

22
assets/sass/code.scss
View File

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

13
assets/sass/colors.scss
View File

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

130
assets/sass/main.scss
View File

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

29
layouts/_default/baseof.html
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<head>
<link rel="shortcut icon" href="/images/favicon.ico"/>
{{ with .OutputFormats.Get "rss" -}}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
{{ $style := resources.Get "/sass/main.scss" | resources.ToCSS }}
<link rel="stylesheet" href="{{ $style.Permalink }}" />
<title>
{{ block "title" . }} {{ .Site.Title }} {{ end }}
</title>
</head>
<body>
{{ partial "header.html" . }}
{{ block "headline" . }}
{{ end }}
{{ block "main" . }}
{{ end }}
{{ partial "footer.html" . }}
{{ block "footer" . }}
{{ end }}
</body>
</html>

14
layouts/_default/list.html
View File

@ -0,0 +1,14 @@
{{ define "main" }}
{{if not .IsHome }}
<h1 class="center-text">{{ .Title | markdownify | lower }}</h1>
{{ end }}
{{ .Content }}
<section class="article-list">
{{ $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 }}
</section>
{{ end }}

29
layouts/_default/single.html
View File

@ -0,0 +1,29 @@
{{ define "main" }}
<div class="article-meta">
<h1 class="center-text">{{ .Title | markdownify }}</h1>
{{ $authors := .Params.authors | default (slice .Site.Params.defaultAuthor) }}
<a class="center-text" href={{ printf "/%s/%s" "authors" (index $authors 0 | urlize) }}><h2 class="center-text">{{ index $authors 0 }}</h2></a>
{{ if .Params.date }}<h2 class="small-text">{{ .Date.Format "Mon | Jan 2, 2006" }}</h2>{{ end }}
{{ range (.GetTerms "tags") }}
<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{ end}}
<img class="shadow large-image" srcset="{{ .Params.featured.srcset }}" src="{{ .Params.featured.url }}" alt="{{ .Params.featured.alt }}"/>
</div>
{{ if .Params.toc }}
{{ .TableOfContents }}
{{ end }}
<div class="content-wrapper">
<main>
{{ .Content }}
{{ with .NextInSection }}
<p>Next: <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></p>
{{ end }}
{{ with .PrevInSection }}
<p>Previous: <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></p>
{{ end }}
<br>
<a href="/"> >> Home</a>
</main>
</div>
{{ end }}

12
layouts/_default/taxonomy.html
View File

@ -0,0 +1,12 @@
{{ define "main" }}
<h1 class="center-text">{{ .Title | markdownify | lower }} tag</h1>
<div class="content-wrapper">
{{ .Content }}
</div>
<section class="article-list">
{{ $pages := .Pages }}
{{ range (where $pages "Section" "ne" "") }}
{{ partial "article-card.html" . }}
{{ end }}
</section>
{{ end }}

12
layouts/_default/terms.html
View File

@ -0,0 +1,12 @@
{{ define "main" }}
<h1 class="center-text">{{ .Title | markdownify | lower }}</h1>
<div class="content-wrapper">
{{ .Content }}
</div>
<section class="article-list">
{{ $pages := .Pages }}
{{ range (where $pages "Section" "ne" "") }}
{{ partial "article-card.html" . }}
{{ end }}
</section>
{{ end }}

23
layouts/authors/list.html
View File

@ -0,0 +1,23 @@
{{ define "main" }}
<section>
{{if not .IsHome }}
<div class="article-meta">
<h1 class="center-text">{{ .Params.name }}</h1>
<p class="center-text">{{ .Params.bio }}</p>
<a class="small-text" href={{ .Params.projects}}>Projects</a>
<span> | </span>
<a class="small-text" href="mailto:{{ .Params.email }}">{{ .Params.email}}</a>
<div class="break"></div>
<img class="shadow small-image" src="{{ .Params.avatar }}" alt="{{ .Params.alt }}"/>
</div>
{{ end }}
{{ .Content }}
<h2>Posts:</h2>
</section>
<section class="article-list">
{{ range .Data.Pages }}
{{ partial "article-card.html" . }}
{{ end }}
</section>
{{ end }}

9
layouts/authors/terms.html
View File

@ -0,0 +1,9 @@
{{ define "main" }}
<h1 class="center-text">Authors</h1>
<section>
{{ range .Data.Pages }}
{{ partial "article-card-alternate.html" . }}
{{ end }}
</section>
{{ end }}

33
layouts/games/list.html
View File

@ -0,0 +1,33 @@
{{ define "main" }}
<div class="article-meta">
<h1 class="center-text">{{ .Title | markdownify }}</h1>
{{ $authors := .Params.authors | default (slice .Site.Params.defaultAuthor) }}
<a class="center-text" href={{ printf "/%s/%s" "authors" (index $authors 0 | urlize) }}><h2 class="center-text">{{ index $authors 0 }}</h2></a>
{{ if .Params.date }}<h2 class="small-text">{{ .Date.Format "Mon | Jan 2, 2006" }}</h2>{{ end }}
{{ range (.GetTerms "tags") }}
<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{ end }}
<div class="break"></div>
<h2 class="small-text">Platforms:</h2>
<span class="margin small-text">{{ delimit .Params.platforms " · " }}</span>
<img class="shadow" srcset="{{ .Params.featured.srcset }}" src="{{ .Params.featured.url }}" alt="{{ .Params.featured.alt }}"/>
</div>
{{ if .Params.toc }}
{{ .TableOfContents }}
{{ end }}
<div class="content-wrapper">
<main>
{{ .Content }}
{{ if gt (len .Data.Pages) 0 }}
<h2>Devlogs:</h2>
<section class="article-list">
{{ range .Data.Pages }}
{{ partial "article-card.html" . }}
{{ end }}
</section>
{{ end }}
<a href="/"> >> Home</a>
</main>
</div>
{{ end }}

12
layouts/partials/article-card-alternate.html
View File

@ -0,0 +1,12 @@
<a class="article-link" href={{ printf "/%s/%s" "authors" (.Params.name | urlize) }}>
<article class="card-alternate shadow float-on-hover">
<div>
<img class="shadow" src="{{ .Params.avatar }}" alt="{{ .Params.alt }}"/>
</div>
<div>
<h2>{{ .Params.name }}</h2>
<p>{{ .Params.bio }}</p>
</div>
</article>
</a>

19
layouts/partials/article-card.html
View File

@ -0,0 +1,19 @@
<article class="shadow float-on-hover card">
<div class="article-image">
<a href=" {{ .Permalink }}">
<img class="fill-wh" src="{{ .Params.featured.url }}" alt="{{ .Params.featured.alt }}"/></a>
</div>
<div class="article-info-container">
<div class="article-info">
{{ range first 1 (.GetTerms "tags") }}
<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{ end }}
<a href="{{ .Permalink }}" class="article-title fill-wh">
<h2>{{ .Title | markdownify }}</h2>
{{ if ne .Kind "term"}}
<span class="date">{{ .Date.Format "2006/01/02" }}</span>
{{ end }}
</a>
</div>
</div>
</article>

4
layouts/partials/footer.html
View File

@ -0,0 +1,4 @@
<footer>
<hr/>
<p class="center-text small-text">{{ $.Site.Copyright | safeHTML }}</p>
</footer>

12
layouts/partials/header.html
View File

@ -0,0 +1,12 @@
<header>
<nav class="spread">
<a href="/"><img src="/images/logo.svg"/></a>
<ul class="spread">
<li><a href="https://gitea.beetbox.io/BeetBox" title="Gitea Repositories">Gitea</a></li>
<li><a href="https://odysee.com/@BeetBox:f" title="Odysee Channel">Odysee</a></li>
<li><a href="/games" title="Games">Games</a></li>
<li><a href="/authors" title="Authors">Authors</a></li>
<li>{{ printf `<a href="/index.xml" title="%s">RSS</a>` $.Site.Title | safeHTML }}</li>
</ul>
</nav>
</header>
Write Preview
Loading…
Cancel
Save