mirror of
https://github.com/Brandon-Rozek/website-theme.git
synced 2024-11-09 10:50:34 -05:00
Redid header style, wrapped content in main tag
This commit is contained in:
parent
ddaa281397
commit
0824107def
10 changed files with 147 additions and 48 deletions
|
@ -1,10 +1,12 @@
|
|||
/* General */
|
||||
/*
|
||||
** General
|
||||
*/
|
||||
body {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
min-height:100vh;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
padding: 0;
|
||||
box-sizing:border-box;
|
||||
background-color: #EFEFEF;
|
||||
color: #575757;
|
||||
|
@ -15,11 +17,6 @@ body {
|
|||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
mark {
|
||||
color: #707070;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #575757;
|
||||
}
|
||||
|
@ -36,44 +33,98 @@ a:active {
|
|||
color: #575757;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header .avatar {
|
||||
position: relative;
|
||||
.title {
|
||||
font-family: 'Comfortaa';
|
||||
}
|
||||
|
||||
/*
|
||||
** HEADER
|
||||
*/
|
||||
|
||||
.avatarMask {
|
||||
clip-path: circle(48px at center);
|
||||
-webkit-clip-path: circle(48px at center);
|
||||
}
|
||||
|
||||
/* Topbar Header */
|
||||
|
||||
.header-top {
|
||||
padding: 20px;
|
||||
color: black;
|
||||
background-color: #f2f2f2;
|
||||
margin-bottom: 2.75rem;
|
||||
border-bottom: 1px solid black;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.header-top a { color: black !important;}
|
||||
|
||||
.header-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.header-top .title { margin-right: 1rem; }
|
||||
|
||||
.header-top .h-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap-reverse;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.header-top .h-card .u-photo {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.home .avatar {
|
||||
@media (max-width: 550px) {
|
||||
.header-top {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.header-top .title { margin-right: 0; }
|
||||
.header-flex { flex-direction: column; }
|
||||
.header-top .h-card {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
/* Homepage Header */
|
||||
|
||||
.header-home .avatar {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
header .avatar img {
|
||||
.header-home .avatar img {
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.home .avatar img {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
header .avatarMask {
|
||||
clip-path: circle(48px at center);
|
||||
-webkit-clip-path: circle(48px at center);
|
||||
}
|
||||
|
||||
.home .avatarMask {
|
||||
.header-home .avatarMask {
|
||||
clip-path: circle(120px at center);
|
||||
-webkit-clip-path: circle(120px at center);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
font-size: 12px;
|
||||
box-sizing:border-box;
|
||||
/* END HEADER */
|
||||
|
||||
main {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
mark {
|
||||
color: #707070;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/* Top page */
|
||||
#profileContainer {
|
||||
min-height: calc(100vh - 100px);
|
||||
|
@ -226,14 +277,20 @@ nav li {
|
|||
#contentBody {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
/* padding: 20px 10px; */
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Comfortaa';
|
||||
}
|
||||
|
||||
|
||||
#webmentions img { max-height: 1.2em; margin-right: -1ex; }
|
||||
|
||||
.date-updated { margin-top: -18px; }
|
||||
|
||||
/*
|
||||
** Footer
|
||||
*/
|
||||
footer {
|
||||
font-size: 12px;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
|
|
@ -4,9 +4,11 @@
|
|||
<body>
|
||||
<h1>404 Page Not Found</h1>
|
||||
{{ partial "header.html" . }}
|
||||
<main>
|
||||
<div class="main">
|
||||
<p><a href="{{ .Site.BaseURL }}">Go Home</a></p>
|
||||
</div>
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
{{ define "main"}}
|
||||
<h1 class='title'>{{ .Title }}</h1>
|
||||
{{ partial "header.html" . }}
|
||||
<!-- content -->
|
||||
<main>
|
||||
<div id="contentBody">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ end }}
|
|
@ -1,6 +1,6 @@
|
|||
{{ define "main"}}
|
||||
<h1 class='title'>{{ .Title }}</h1>
|
||||
{{ partial "header.html" . }}
|
||||
<main>
|
||||
{{ if not .Date.IsZero }}
|
||||
<!-- date -->
|
||||
{{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
|
||||
|
@ -21,5 +21,6 @@
|
|||
<div id="contentBody">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ end }}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
{{ define "main"}}
|
||||
{{ partial "header.html" . }}
|
||||
<main>
|
||||
<!-- search box -->
|
||||
<div id="searchBox">
|
||||
<input type="text" id="searchBoxInput" placeholder="Search..." />
|
||||
|
@ -28,6 +29,7 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
|
||||
{{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
|
||||
|
|
|
@ -1,7 +1,11 @@
|
|||
{{ define "main"}}
|
||||
<article class="h-entry">
|
||||
<h1 class='title p-name'>{{ .Title }}</h1>
|
||||
{{ .Scratch.Set "customTitleHeaderSet" true }}
|
||||
{{ .Scratch.Set "customTitleHeader" "Blog" }}
|
||||
{{ .Scratch.Set "customTitleHeaderLink" "/blog" }}
|
||||
{{ partial "header.html" . }}
|
||||
<main>
|
||||
<h1 class='title'>{{ .Title }}</h1>
|
||||
<a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
|
||||
<!-- date -->
|
||||
{{ if not .Date.IsZero }}
|
||||
|
@ -46,6 +50,7 @@
|
|||
<input type="hidden" name="target" value="{{ .Permalink }}">
|
||||
<button type="submit">Ping!</button>
|
||||
</form>
|
||||
</main>
|
||||
{{ $webmentionjs := resources.Get "js/webmention.min.js" }}
|
||||
<script src="{{ $webmentionjs.Permalink }}" async></script>
|
||||
<!-- Metadata -->
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
{{ define "main"}}
|
||||
{{ partial "header.html" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ partial "header.html" . }}
|
||||
<main>
|
||||
<!-- tags -->
|
||||
<div id="tags">
|
||||
<ul>
|
||||
|
@ -9,5 +10,6 @@
|
|||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ end }}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{{ define "main"}}
|
||||
<h1 class='title p-name'>{{ .Title }}</h1>
|
||||
{{ partial "header.html" . }}
|
||||
<main>
|
||||
<!-- search box -->
|
||||
<div id="searchBox">
|
||||
<input type="text" id="searchBoxInput" placeholder="Search..." />
|
||||
|
@ -28,6 +28,7 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
|
||||
{{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
|
||||
|
|
|
@ -2,9 +2,10 @@
|
|||
<html>
|
||||
{{- partial "head.html" . -}}
|
||||
<body>
|
||||
<main>
|
||||
<div id="profileContainer">
|
||||
<div id="profile" class="h-card">
|
||||
<header class="home">
|
||||
<header class="header-home">
|
||||
<!-- avator -->
|
||||
<div class="avatar">
|
||||
<img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="avatar">
|
||||
|
@ -37,6 +38,7 @@
|
|||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{{- partial "footer.html" . -}}
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
|
|
|
@ -1,14 +1,40 @@
|
|||
<header class="h-card p-author">
|
||||
<!-- avator -->
|
||||
<div class="avatar">
|
||||
<img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="{{ .Site.Params.avatarDescription }}">
|
||||
<a href="{{ .Site.BaseURL }}"><img class="avatar-border" src="{{ .Site.BaseURL }}/img/avatar-border.svg" alt=""></a>
|
||||
</div>
|
||||
<!-- author -->
|
||||
<header class="header-top">
|
||||
<div class="header-flex">
|
||||
|
||||
{{ $headerTitle := .Scratch.Get "customTitleHeader" }}
|
||||
{{ $headerLink := .Scratch.Get "customTitleHeaderLink" }}
|
||||
|
||||
{{ if (.Scratch.Get "customTitleHeaderSet") }}
|
||||
{{ if eq $headerTitle ""}}
|
||||
<div></div>
|
||||
{{ else }}
|
||||
<h1 class='title'>
|
||||
{{ if $headerLink }}
|
||||
<a href="{{ $headerLink }}">
|
||||
{{ $headerTitle }}
|
||||
</a>
|
||||
{{ else }}
|
||||
{{ $headerTitle }}
|
||||
{{ end }}
|
||||
</h1>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<h1 class="title">{{ .Title }}</h1>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<div class="h-card p-author">
|
||||
<h2 class="p-name"><a class="author u-url" rel="me" href="{{ .Site.BaseURL }}">{{ .Site.Params.Author }}</a></h2>
|
||||
<img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="{{ .Site.Params.avatarDescription }}">
|
||||
<div style="display: none">
|
||||
<!-- email / description (for h-card) -->
|
||||
<a style="display: none" class="u-email" href="mailto://{{ .Site.Params.email }}"></a>
|
||||
<p style="display: none" class="p-note">
|
||||
<a class="u-email" href="mailto://{{ .Site.Params.email }}"></a>
|
||||
<p class="p-note">
|
||||
{{ .Site.Params.description | safeHTML }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
|
Loading…
Reference in a new issue