hugo/panaetius-theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updating latest

Browse Source
This commit is contained in:
Daniel Tomlinson
2020-06-11 02:13:06 +01:00
parent 5312ff8f52
commit 4c6e97ff5e
7 changed files with 140 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
data/panaetius-theme/assets.json
View File

@@ -9,7 +9,7 @@
"js": "2.lazyload.1168fc21175de558d316.min.js" "js": "2.lazyload.1168fc21175de558d316.min.js"
}, },
"main": { "main": {
"css": "main.fe1e79a2ceb1a3e11a99.min.css", "css": "main.cdd48a316d2fd0c38b94.min.css",
"js": "main.48637aff6f96e597ae05.min.js" "js": "main.48637aff6f96e597ae05.min.js"
}, },
"vendors~app": { "vendors~app": {

70
layouts/index.html
View File

@@ -1,42 +1,52 @@
{{ define "main" }} {{ define "main" }}
<img src="/images/front-wallpaper.svg" class="front-background"> <img src="/images/front-wallpaper.svg" class="front-background">
<main class="homepage container py-6"> <main class="homepage py-6">
<div class="hero row pt-3 pt-md-6"> <div class="container">
<div class="col-12 col-md-6 d-flex flex-column justify-content-center text-center text-md-left"> <div class="hero row pt-3 pt-md-6">
<div> <div class="col-12 col-md-6 d-flex flex-column justify-content-center text-center text-md-left">
<h1 class="display-4">{{ .Site.Title }}</h1> <div>
{{- with .Site.Params.description -}} <h1 class="display-4">{{ .Site.Title }}</h1>
</div> </div>
<div> {{- with .Site.Params.homepageImage -}}
<h3 class="font-weight-normal">{{ . | safeHTML }}</h3> <div class="homepage-image d-xs-block d-md-none pb-4">
<img data-src="{{ . | relURL }}" class="img-fluid">
</div>
{{- end -}} {{- end -}}
<div>
{{- with .Site.Params.description -}}
<h3 class="font-weight-normal">{{ . | safeHTML }}</h3>
{{- end -}}
</div>
</div>
<div class="col-12 col-md-6 d-flex">
{{- with .Site.Params.homepageImage -}}
<div class="homepage-image d-none d-sm-block">
<img data-src="{{ . | relURL }}" class="img-fluid">
</div>
{{- end -}}
</div> </div>
</div> </div>
<div class="col-0 col-md-6 d-flex"> <div class="row">
{{- with .Site.Params.homepageImage -}}
{{/* <div class="homepage-image" data-aos="zoom-in"> */}} <!-- Latest article -->
<div class="homepage-image d-none d-sm-block"> {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
<img data-src="{{ . | relURL }}" class="img-fluid">
<div class="latest row py-lg-5">
{{ .Render "card-large" }}
</div> </div>
{{- end -}} {{- end -}}
</div> </div>
</div> </div>
<div class="row"> <!-- <div class="container-fluid" style="padding-left: 15%; padding-right: 15%;"> -->
<div class="container">
<!-- Latest article --> <div class="row d-flex justify-content-center justify-content-md-between align-content-between">
{{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}} {{ range first 1 (after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) }}
<!-- <div class="latest row py-lg-5"> --> {{ .Render "card" }}
<div class="latest row py-lg-5"> {{ end }}
{{ .Render "card-large" }} {{ range first 2 (after 2 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) }}
</div> {{ .Render "card" }}
{{- end -}}
<!-- Articles -->
<div class="articles row row-cols-1 row-cols-lg-3">
{{ range after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
<div class="col mb-3" data-aos="zoom-in">
{{ .Render "card" }}
</div>
{{ end }} {{ end }}
</div> </div>
</div> </div>

3
layouts/partials/header.html
View File

@@ -15,7 +15,8 @@
<li class="nav-item{{ if or (eq $current.URL .URL) ($current.HasMenuCurrent "main" .) }} active{{ end }}"><a class="nav-link" href="{{ .URL | relLangURL }}">{{ .Name }}</a></li> <li class="nav-item{{ if or (eq $current.URL .URL) ($current.HasMenuCurrent "main" .) }} active{{ end }}"><a class="nav-link" href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
{{ end }} {{ end }}
{{ end }} {{ end }}
<li class="nav-item d-none d-md-block" id="nav-search"> <li class="nav-item" id="nav-search">
<!-- <li class="nav-item d-none d-md-block" id="nav-search"> -->
<form id="search-form" method="get" action="/search" method="POST" class="form-inline"> <form id="search-form" method="get" action="/search" method="POST" class="form-inline">
<input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search"> <input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
<div class="input-group "> <div class="input-group ">

4
layouts/post/card-large.html
View File

@@ -16,10 +16,10 @@
<h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5> <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
<p class="text-muted">{{ $page.ReadingTime }} min read</p> <p class="text-muted">{{ $page.ReadingTime }} min read</p>
</div> </div>
<h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2> <h2><a class="card-title-gray" href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
<div class="content"> <div class="content">
{{ $page.Summary }} {{ $page.Summary | truncate 200 }}
</div> </div>
<div> <div>
{{- with $page.Params.tags -}} {{- with $page.Params.tags -}}

17
layouts/post/card-start.html Normal file
View File

@@ -0,0 +1,17 @@
<div class="d-flex flex-column card-regular col-md-3 my-2 my-md-5 px-0" style="height: 500px; overflow: hidden;">
{{ $page := . }}
{{- with .Resources.Match "images/banner.svg" -}}
{{ range . }}
{{- $image := . -}}
<div style="height: 60%; overflow: hidden;">
<div class="ma-0 pa-0" style="background-image: url('{{ $image.RelPermalink }}'); background-position: center; background-size: cover; height: 250%;">
</div>
</div>
{{- end -}}
{{- end -}}
<div class="mx-3 my-3">
<h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
<p class="text-muted">{{ $page.ReadingTime }} min read</p>
</div>
</div>

25
layouts/post/card.html
View File

@@ -1,12 +1,31 @@
<div class="d-flex"> <div class="d-flex flex-column card-regular card-regular-width my-2 my-md-5 px-0">
{{ $page := . }} {{ $page := . }}
{{- with .Resources.Match "images/banner.svg" -}} {{- with .Resources.Match "images/banner.svg" -}}
{{ range . }} {{ range . }}
{{- $image := . -}} {{- $image := . -}}
<div class="card-large-image" style="background-image: url('{{ $image.RelPermalink }}');"> <div class="card-regular-image-parent">
<div style="background-image: url('{{ $image.RelPermalink }}')"> <div class="ma-0 pa-0 card-regular-image" style="background-image: url('{{ $image.RelPermalink }}');">
</div> </div>
</div> </div>
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
<div class="mx-3 my-3">
<h5 class="created text-muted text-uppercase font-weight-bold mb-0">{{ $page.Date.Format "January 2, 2006" }}</h5>
<p class="text-muted">{{ $page.ReadingTime }} min read</p>
<h2><a class="card-title-gray" href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
<p>{{ $page.Summary | truncate 200 }}</p>
<div>
{{- with $page.Params.tags -}}
<div class="d-flex justify-content-start">
<div class="tags">
{{- range . -}}
<a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">
<i class="fas fa-tag mr-2"></i>{{ . }}
</a>
{{- end -}}
</div>
</div>
{{- end -}}
</div>
</div>
</div> </div>

70
src/scss/cards.scss
View File

@@ -1,4 +1,10 @@
.card-large, .card-regular { @mixin image-zoom {
background-position: center;
background-size: cover;
overflow: hidden;
}
@mixin card-border {
background-color: white; background-color: white;
z-index: 1; z-index: 1;
border: 1px solid rgb(204, 18, 18); border: 1px solid rgb(204, 18, 18);
@@ -24,28 +30,64 @@
border-top-right-radius: 0.45rem; border-top-right-radius: 0.45rem;
border-bottom-right-radius: 0.45rem; border-bottom-right-radius: 0.45rem;
border-bottom-left-radius: 0.45rem; border-bottom-left-radius: 0.45rem;
-webkit-box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79); -webkit-box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
-moz-box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79); -moz-box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79); box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
transition-property: all; transition-property: all;
transition-duration: 1s; transition-duration: 1s;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
-moz-transform: translate(-2px, -2px); -moz-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px); -ms-transform: translate(-2px, -2px);
-o-transform: translate(-2px, -2px); -o-transform: translate(-2px, -2px);
-webkit-transform: translate(-2px, -2px); -webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px); transform: translate(-2px, -2px);
} }
}
.card-title-gray {
color: $text-gray !important;
}
.card-large {
@include card-border;
& .card-large-image { & .card-large-image {
height: 250%; height: 250%;
background-position: center; @include image-zoom;
background-size: cover; }
}
.card-regular {
@include card-border;
min-height: 600px;
& .card-regular-image {
@include image-zoom;
height: 150%;
background-size: initial;
}
& .card-regular-image-parent {
height: 40%;
overflow: hidden; overflow: hidden;
} }
} }
@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
.card-regular-width {
width: 30%;
}
}
@media only screen and (max-width: map-get($grid-breakpoints, "md")) {
.card-regular-width {
width: 80%
}
}