cco/hugo-theme-cybercards
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

full refactoring, using up-to-date bootstrap + bootswatch theme

Browse source
This commit is contained in:
Helmut Merz 2020-06-14 09:04:20 +02:00
parent 5979be2db6
commit e8318fc7a0
15 changed files with 503 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
archetypes/default.md
View file

@ -6,7 +6,7 @@ domains: []
topics: []
date: {{ .Date }}
author:
draft: true
draft: false
weight: 10
---

255
assets/sass/_bootswatch.scss Normal file
View file

@ -0,0 +1,255 @@
// Litera 4.5.0
// Bootswatch
// Variables ===================================================================
$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !default;
// Navbar ======================================================================
.navbar {
font-size: $font-size-sm;
&.bg-dark {
background-color: $success !important;
}
&.bg-light {
background-color: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.1);
&.navbar-fixed-top {
border-width: 0 0 1px 0;
}
&.navbar-fixed-bottom {
border-width: 1px 0 0 0;
}
}
}
// Buttons =====================================================================
.btn {
border-radius: 1.078em;
&-lg {
border-radius: 2.688em;
}
&-sm {
border-radius: 0.844em;
}
}
// Typography ==================================================================
p {
font-family: $font-family-serif;
}
blockquote {
font-style: italic;
}
footer {
font-size: $font-size-sm;
}
.lead {
color: $gray-600;
font-family: $font-family-sans-serif;
}
// Tables ======================================================================
table,
.table {
font-size: $font-size-sm;
&-primary,
&-secondary,
&-success,
&-info,
&-warning,
&-danger {
color: #fff;
}
}
.table {
&-primary {
&, > th, > td {
background-color: $primary;
}
}
&-secondary {
&, > th, > td {
background-color: $secondary;
}
}
&-light {
&, > th, > td {
background-color: $light;
}
}
&-dark {
&, > th, > td {
background-color: $dark;
}
}
&-success {
&, > th, > td {
background-color: $success;
}
}
&-info {
&, > th, > td {
background-color: $info;
}
}
&-danger {
&, > th, > td {
background-color: $danger;
}
}
&-warning {
&, > th, > td {
background-color: $warning;
}
}
&-active {
&, > th, > td {
background-color: $table-active-bg;
}
}
&-hover {
.table-primary:hover {
&, > th, > td {
background-color: darken($primary, 5%);
}
}
.table-secondary:hover {
&, > th, > td {
background-color: darken($secondary, 5%);
}
}
.table-light:hover {
&, > th, > td {
background-color: darken($light, 5%);
}
}
.table-dark:hover {
&, > th, > td {
background-color: darken($dark, 5%);
}
}
.table-success:hover {
&, > th, > td {
background-color: darken($success, 5%);
}
}
.table-info:hover {
&, > th, > td {
background-color: darken($info, 5%);
}
}
.table-danger:hover {
&, > th, > td {
background-color: darken($danger, 5%);
}
}
.table-warning:hover {
&, > th, > td {
background-color: darken($warning, 5%);
}
}
.table-active:hover {
&, > th, > td {
background-color: $table-active-bg;
}
}
}
}
// Forms =======================================================================
// Navs ========================================================================
.nav,
.breadcrumb,
.pagination {
font-size: $font-size-sm;
}
.dropdown-menu {
font-size: $font-size-sm;
}
// Indicators ==================================================================
.alert {
color: $white;
font-size: $font-size-sm;
&, p {
font-family: $font-family-sans-serif;
}
a, .alert-link {
color: #fff;
font-weight: normal;
text-decoration: underline;
}
@each $color, $value in $theme-colors {
&-#{$color} {
@if $enable-gradients {
background: $value linear-gradient(0deg, mix($body-bg, $value, 15%), $value) repeat-x;
} @else {
background-color: $value;
}
}
}
&-light {
&,
& a,
& .alert-link {
color: $body-color;
}
}
}
.badge {
vertical-align: bottom;
}
// Progress bars ===============================================================
// Containers ==================================================================
.list-group {
font-size: $font-size-sm;
}

19
assets/sass/_custom.scss
View file

@ -3,22 +3,3 @@
justify-content: center;
}
.post-title {
text-decoration: none;
}
.sb-box ul {
list-style: none;
padding: 0;
text-align: justify;
}
.sb-box {
padding: 0 15px 0 15px;
border: 1px solid $grey-color-light;
}
.sb-box h3 {
margin-top: 10px;
}

94
assets/sass/_litera.scss Executable file
View file

@ -0,0 +1,94 @@
// Litera 4.5.0
// Bootswatch
//
// Color system
//
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #ddd !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$blue: #4582EC !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #d9534f !default;
$orange: #fd7e14 !default;
$yellow: #f0ad4e !default;
$green: #02B875 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$primary: $blue !default;
$secondary: $gray-500 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
$yiq-contrasted-threshold: 190 !default;
// Body
$body-color: $gray-800 !default;
// Fonts
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-size-base: 1.063rem !default;
$headings-font-weight: 700 !default;
// Tables
$table-border-color: rgba(0,0,0,0.1) !default;
// Buttons
$input-btn-padding-y: 0.5rem !default;
$input-btn-padding-x: 1.1rem !default;
$btn-font-family: $font-family-sans-serif !default;
$btn-font-size: 0.875rem !default;
$btn-font-size-sm: 0.688rem !default;
// Forms
$input-border-color: rgba(0,0,0,.1) !default;
$input-group-addon-bg: $gray-200 !default !default;
// Navbar
$navbar-dark-color: rgba($white,.6) !default;
$navbar-dark-hover-color: $white !default;
$navbar-light-hover-color: $body-color !default;
$navbar-light-active-color: $body-color !default;
// Tooltips
$tooltip-font-size: 11px !default;
// Badges
$badge-font-weight: normal !default;
$badge-padding-y: 0.6em !default;
$badge-padding-x: 1.2em !default;
// Alerts
$alert-border-width: 0 !default;

45
assets/sass/main.scss
View file

@ -1,49 +1,10 @@
@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
// Our variables
$base-font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
$base-font-size: 16px;
$base-font-weight: 400;
$small-font-size: $base-font-size * 0.875;
$base-line-height: 1.5;
$spacing-unit: 30px;
$text-color: #111;
$background-color: #fdfdfd;
$brand-color: #2a7ae2;
$grey-color: #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark: darken($grey-color, 25%);
// Width of the content area
$content-width: 800px;
$on-palm: 600px;
$on-laptop: 800px;
// Use media queries like this:
// @include media-query($on-palm) {
// .wrapper {
// padding-right: $spacing-unit / 2;
// padding-left: $spacing-unit / 2;
// }
// }
@mixin media-query($device) {
@media screen and (max-width: $device) {
@content;
}
}
// Import partials from `sass_dir` (defaults to `_sass`)
@import
"bootstrap-readable",
"layout",
"litera",
"../../../node_modules/bootstrap/scss/bootstrap",
"bootswatch",
"custom",
"syntax-highlighting"
;

16
layouts/_default/baseof.html
View file

@ -1,7 +1,17 @@
<!DOCTYPE html>
<html>
{{ partial "head.html" .}}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Title}}{{if .IsPage}} - {{.Site.Title}}{{ end }}</title>
{{ $main := resources.Get "sass/main.scss" | toCSS | minify }}
<link rel="stylesheet" href="{{ $main.RelPermalink }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
@ -15,8 +25,8 @@
{{ partial "footer.html" . }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{ .Site.BaseURL }}/js/bootstrap.min.js"></script>
</body>
</html>
</html>

17
layouts/_default/list.html
View file

@ -3,17 +3,24 @@
<div class="home">
<div class="row">
Front Matter
<div class="col-md-12 mt-3 mb-3">
<div class="card mt-3 mb-3">
<div class="card-header">
<h2 class="card-title">{{ .Title }}</h2>
</div>
<div class="card-body">
<p class="card-text">{{ .Content }}</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="row">
{{ $paginator := .Paginate (where .Site.RegularPages "Section" "posts") }}
{{ range $paginator.Pages }}
{{ partial "card.html" . }}
{{ end }}
</div>
</div>
<div class="row">
{{ partial "pagination.html" . }}

49
layouts/_default/single.html
View file

@ -1,36 +1,47 @@
{{ define "main" }}
<div class="row">
<div class="col-md-8">
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<article class="card mt-3 mb-3"
itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">{{ .Title }}</h1>
<p class="post-meta"><time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}' itemprop="datePublished">{{ .Date.Format (i18n "dateFormat") }}</time>{{ with .Params.Author }} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ . }}</span></span>{{ end }}</p>
</header>
<header class="post-header card-header">
<h2 class="post-title" itemprop="name headline">{{ .Title }}</h2>
<p class="post-meta">
<time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'
itemprop="datePublished">{{ .Date.Format (i18n "dateFormat") }}</time>
{{ with .Params.Author }} •
<span itemprop="author" itemscope
itemtype="http://schema.org/Person">
<span itemprop="name">{{ . }}</span></span>
{{ end }}
</p>
</header>
<div class="post-content" itemprop="articleBody">
{{ .Content }}
</div>
<div class="post-content card-body" itemprop="articleBody">
{{ .Content }}
</div>
</article>
<div class="row">
<ul class="pager">
{{ with .NextPage }}
<li><a class="next" href="{{ .Permalink }}">&laquo; {{ .Title }}</a></li>
{{ end }}
{{ with .PrevPage }}
<li><a class="previous" href="{{ .Permalink }}">{{ .Title }} &raquo;</a></li>
{{ end }}
</ul>
<div class="col-md-12">
<ul class="pagination">
{{ with .NextPage }}
<li class="page-item page-link">
<a class="next" href="{{ .Permalink }}">&laquo; {{ .Title }}</a></li>
{{ end }}
{{ with .PrevPage }}
<li class="page-item">
<a class="previous page-link"
href="{{ .Permalink }}">{{ .Title }} &raquo;</a></li>
{{ end }}
</ul>
</div>
</div>
</div>
{{ partial "sidebar.html" . }}
</div>
{{ end }}

40
layouts/partials/card.html
View file

@ -1,22 +1,24 @@
<div class="col-md-4">
<a href="{{ .Permalink }}" class="index-anchor">
<div class="panel panel-default">
{{ if .Params.img }}
<img width="100%" src="{{ .Site.BaseURL }}img/{{ .Params.img }}" alt="{{ .Title }}">
{{ else if .Site.Params.defaultImage }}
<img width="100%" src="{{ .Site.BaseURL }}img/{{ .Site.Params.defaultImage }}" alt="{{ .Site.Title }}">
{{ end }}
<div class="card mb-3">
<a href="{{ .Permalink }}" class="index-anchor">
{{ if .Params.img }}
<img width="100%"
src="{{ .Site.BaseURL }}img/{{ .Params.img }}" alt="{{ .Title }}">
{{ else if .Site.Params.defaultImage }}
<img width="100%"
src="{{ .Site.BaseURL }}img/{{ .Site.Params.defaultImage }}"
alt="{{ .Site.Title }}">
{{ end }}
<div class="panel-body">
<h3 class="panel-title pull-left">{{ .Title | truncate 25 }}</h3><span class="post-meta pull-right"><small>{{ .Date.Format (i18n "dateFormat") }}</small></span>
</div>
<div class="panel-body"><small>
{{ .Summary | plainify | truncate 100 }}</small>
</div>
</div>
</a>
<div class="card-body">
<span class="card-title h4">{{ .Title | truncate 25 }}</span>
<span class="post-meta pull-right">
<small>{{ .Date.Format (i18n "dateFormat") }}</small></span>
</div>
<div class="card-body">
<p class="card-text">{{ .Summary | plainify | truncate 100 }}</p>
</div>
</a>
</div>
</div>

17
layouts/partials/footer.html
View file

@ -1,29 +1,32 @@
<footer>
<div class="container">
<div class="container mt-3">
<div class="row p10">
{{ with .Site.Params.copyright }}
<div class="col-md-4 text-left mt25">
<div class="col-md-4 text-left">
<span class="fa fa-copyright"></span>
<a target="_blank" href="{{.link}}">{{ .name }}</a>
</div>
{{ end }}
<div class="col-md-4 text-center mt25" >
<div class="col-md-4 text-center" >
{{ with .Site.Params.builtBy }}
<a target="_blank" href="{{.link}}"><img src="/{{.Site.BaseURL}}img/{{.image}}" alt="{{.name}}"></a>
{{ end }}
</div>
<ul class="col-md-4 text-right mt25">
<ul class="col-md-4 text-right list-inline">
{{with .Site.Params.github }}
<a target="_blank" title="GitHub" href="{{.}}" title="GitHub"><li class="social github"><i class="fa fa-github-square"></i></li></a>
<li class="social github list-inline-item">
<a target="_blank" title="GitHub" href="{{.}}" title="GitHub"><i class="fa fa-github-square"></i></a></li>
{{ end }}
{{with .Site.Params.sourcehut }}
<a target="_blank" title="sourcehut git" href="{{.}}"><li class="social sourcehut"><i class="fa fa-git-square"></i></li></a>
<li class="social sourcehut list-inline-item">
<a target="_blank" title="sourcehut git" href="{{.}}"><i class="fa fa-git-square"></i></a></li>
{{ end }}
{{ with .Site.Params.email }}
<a target="_blank" title="Email" href="mailto:{{.}}"><li class="social email"><i class="fa fa-envelope"></i></li></a>
<li class="social email list-inline-item">
<a target="_blank" title="Email" href="mailto:{{.}}"><i class="fa fa-envelope"></i></a></li>
{{ end }}
</ul>

11
layouts/partials/head.html
View file

@ -1,11 +0,0 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Title}}{{if .IsPage}} - {{.Site.Title}}{{ end }}</title>
{{ $main := resources.Get "sass/main.scss" | toCSS | minify }}
<link rel="stylesheet" href="{{ $main.RelPermalink }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

43
layouts/partials/header.html
View file

@ -1,25 +1,26 @@
<header class="site-header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{{ .Site.BaseURL }}"><img src="{{.Site.BaseURL}}img/{{.Site.Params.logo}}" alt="{{.Site.Title}}"></a>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{{ .Site.BaseURL }}"><img src="{{.Site.BaseURL}}img/{{.Site.Params.logo}}" alt="{{.Site.Title}}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarColor03" aria-controls="navbarColor03"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto pull-right">
<li class="nav-item">
<a class="nav-link"
href="{{ .Site.BaseURL }}pages/about/">{{i18n "about"}}</a></li>
<li class="nav-item">
<a class="nav-link"
href="{{ .Site.BaseURL }}topics/">{{i18n "topics"}}</a></li>
<li class="nav-item">
<a class="nav-link"
href="{{ .Site.BaseURL }}pages/contact/">{{i18n "contact"}}</a></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="{{ .Site.BaseURL }}pages/about/">{{i18n "about"}}</a></li>
<li><a href="{{ .Site.BaseURL }}topics/">{{i18n "topics"}}</a></li>
<li><a href="{{ .Site.BaseURL }}pages/contact/">{{i18n "contact"}}</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>

56
layouts/partials/sidebar.html
View file

@ -1,38 +1,48 @@
<div class="col-md-4 mt20">
<div class="post-img">
<div class="card mt-3 mb-3">
{{ if .Params.img }}
<img width="600" src="{{ .Site.BaseURL}}img/{{ .Params.img }}" alt="{{ .Params.title }}">
<img width="100%"
src="{{ .Site.BaseURL}}img/{{ .Params.img }}" alt="{{ .Params.title }}">
{{ else }}
<img width="600" src="{{ .Site.BaseURL }}img/{{ .Site.Params.defaultImage }}" alt="matrix">
<img width="100%"
src="{{ .Site.BaseURL }}img/{{ .Site.Params.defaultImage }}" alt="dummy">
{{ end }}
</div>
</div>
{{ $taxo := "topics" }}
{{ if .Param $taxo }}
<div class="mt10 sb-box">
<h3>{{i18n "topics"}}</h3>
<ul id="{{ $taxo }}">
{{ range .Param $taxo }}
{{ $name := . }}
{{ with $.Site.GetPage (printf "/%s/%s" $taxo ($name | urlize)) }}
<li><a href="{{ .Permalink }}">{{ $name }}</a></li>
<div class="card mb-3">
<div class="card-header">
<h4>{{i18n "topics"}}</h4>
</div>
<div class="card-body">
<ul id="{{ $taxo }}" class="list-inline">
{{ range .Param $taxo }}
{{ $name := . }}
{{ with $.Site.GetPage (printf "/%s/%s" $taxo ($name | urlize)) }}
<li><a href="{{ .Permalink }}">{{ $name }}</a></li>
{{ end }}
{{ end }}
{{ end }}
</ul>
</ul>
</div>
</div>
{{ end }}
<div class="mt10 sb-box">
<h3>{{i18n "recentArticles"}}</h3>
<ul>
{{ range first 3 (where .Site.RegularPages "Section" "posts") }}
<li>
<a href="{{ .Permalink }}">{{ .Title }}</a><small>&nbsp;&nbsp;{{ .Date.Format (i18n "dateFormat") }}</small>
</li>
{{ end }}
</ul>
<div class="card mb-3">
<div class="card-header">
<h4>{{i18n "recentArticles"}}</h4>
</div>
<div class="card-body">
<ul class="list-inline">
{{ range first 3 (where .Site.RegularPages "Section" "posts") }}
<li>
<a href="{{ .Permalink }}">{{ .Title }}</a>
<small>&nbsp;&nbsp;{{ .Date.Format (i18n "dateFormat") }}</small>
</li>
{{ end }}
</ul>
</div>
</div>
</div>

7
layouts/taxonomy/list.html
View file

@ -3,17 +3,16 @@
<div class="home">
<div class="row">
<h1 class="site-title">{{i18n "topic"}}: {{.Title | title}}</h1>
<br />
<div class="col-md-12 mt-3 mb-3">
<h2 class="site-title">{{i18n "topic"}}: {{.Title | title}}</h2>
</div>
</div>
<div class="row">
{{ $paginator := .Paginate (.Data.Pages) }}
{{ range $paginator.Pages }}
{{ partial "card.html" . }}
{{ end }}
</div>
<div class="row">

12
static/js/bootstrap.min.js vendored
View file

File diff suppressed because one or more lines are too long