Implement hero layout, better content layouts (#1)

Implement hero layout, better content layouts
This commit is contained in:
James 2018-01-06 01:54:19 +11:00 committed by Flame Sage
parent d4433a4244
commit b0192b2ec2
6 changed files with 61 additions and 28 deletions

View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="{{ .Site.Params.languageCode | default " en-us " }}">
<html lang="{{ .Site.Params.languageCode | default " en-us " }}"
{{- if not .IsHome }}class="has-navbar-fixed-top"{{- end }}>
<head>
<meta charset="utf-8">
@ -18,36 +19,43 @@
<title>{{- if not .IsHome }}{{ .Title }} - {{ .Site.Title }}{{- else }}{{ .Site.Title }} - {{ .Site.Params.Tagline }}{{- end}}</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu|Dosis" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="{{ .Site.BaseURL }}/css/style.css" /> {{ if eq (getenv "HUGO_ENV") "PRD" }}
<meta name="robots" content="noindex,nofollow" /> {{ else }}
<meta name="robots" content="noindex,nofollow" /> {{ end }}
</head>
<body>
{{- if .IsHome }}
{{ partial "header_homepage" . }}
{{- else }}
{{ partial "navbar" . }}
{{- if .IsHome }} {{ partial "header_homepage" . }} {{- end }}
{{- end }}
<div class="container" style="background-color: white;">
<div class="container">
<section class="section">
<div class="columns">
<div class="column is-3">
{{ partial "sidebar" . }}
</div>
<div class="column is-9">
<div class="column is-8">
{{ block "main" . }}{{ end }}
</div>
<div class="column is-4">
{{ partial "sidebar" . }}
</div>
</div>
</section>
</div>
<footer class="footer container has-text-centered">
Copyright © {{ now.Format "2006" }} {{ .Site.Params.ProjectName }}
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
Copyright &copy; {{ now.Format "2006" }} {{ .Site.Params.ProjectName }}
</div>
</div>
</footer>
<script src="{{ .Site.BaseURL }}/js/script.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script> {{- block "scripts" . }}{{- end }}
{{- block "scripts" . }}{{- end }}
</body>
</html>

View file

@ -1,3 +1,9 @@
{{ define "main" }}
{{ .Content }}
{{ end }}
<div class="box">
<h1 class="title">{{ .Title }}</h1>
<h2 class="subtitle">{{ .Date.Format "January 02 2006" }}</h2>
<div class="content">
{{ .Content }}
</div>
</div>
{{ end }}

View file

@ -0,0 +1,23 @@
<a href="{{ .Permalink }}">
<div class="card">
<div class="card-image">
<figure class="image is-2by1">
<img src="{{ .Site.BaseURL }}/images/banners/{{ .Params.Banner | default (print .File.BaseFileName ".png") }}"
alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">{{ .Title }}</p>
<p class="subtitle is-6">{{ .Date.Format "January 02 2006" }}</p>
</div>
</div>
<div class="content">
{{ .Summary }}
</div>
</div>
</div>
</a>
<br />

View file

@ -1,3 +1,9 @@
{{ define "main" }}
<p>No articles have been written yet, check back soon!</p>
{{ $paginator := .Paginate (where .Data.Pages "Section" "entry") 3 }}
{{ range $paginator.Pages }}
{{ .Render "summary" }}
{{ end }}
{{ partial "pagination" . }}
{{ end }}

View file

@ -0,0 +1 @@
<code>Cannot find override file: `./layouts/partials/nav_contents.html`</code>

View file

@ -1,14 +1,3 @@
<nav class="navbar is-transparent is-size-6" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="{{ .Site.BaseURL }}">
<img src="{{ .Site.BaseURL }}/images/menu.png" alt="{{ .Site.Title }} {{ .Site.Params.Tagline }}" width="112" height="28">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<!-- TODO: Navbar goes here -->
</div>
</div>
</div>
</nav>
<nav class="navbar is-light is-size-6 is-fixed-top" role="navigation" aria-label="main navigation">
{{ partial "nav_contents" . }}
</nav>