brozek/website-theme
1
0
Fork 0
mirror of https://github.com/Brandon-Rozek/website-theme.git synced 2024-11-21 15:56:29 -05:00
Code Issues Projects Releases Packages Wiki Activity

Redid header style, wrapped content in main tag

Browse source
This commit is contained in:
Brandon Rozek 2022-05-08 16:11:05 -04:00
parent ddaa281397
commit 0824107def
10 changed files with 147 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
assets/css/style.css
View file

@ -1,10 +1,12 @@
/* General */ /*
** General
*/
body { body {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
min-height:100vh; min-height:100vh;
margin: 0; margin: 0;
padding: 20px; padding: 0;
box-sizing:border-box; box-sizing:border-box;
background-color: #EFEFEF; background-color: #EFEFEF;
color: #575757; color: #575757;
@ -15,11 +17,6 @@ body {
word-wrap: break-word; word-wrap: break-word;
} }
mark {
color: #707070;
font-weight: bold;
}
a:link { a:link {
color: #575757; color: #575757;
} }
@ -36,44 +33,98 @@ a:active {
color: #575757; color: #575757;
} }
/* Header */ .title {
header .avatar { font-family: 'Comfortaa';
position: relative; }
/*
** 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; 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; height: 250px;
} }
header .avatar img { .header-home .avatar img {
width: 250px;
position: absolute; position: absolute;
width: 100px;
margin: 0 auto; margin: 0 auto;
left: 0; left: 0;
right: 0; right: 0;
} }
.home .avatar img { .header-home .avatarMask {
width: 250px;
}
header .avatarMask {
clip-path: circle(48px at center);
-webkit-clip-path: circle(48px at center);
}
.home .avatarMask {
clip-path: circle(120px at center); clip-path: circle(120px at center);
-webkit-clip-path: circle(120px at center); -webkit-clip-path: circle(120px at center);
} }
/* Footer */ /* END HEADER */
footer {
font-size: 12px; main {
box-sizing:border-box; padding: 20px 10px;
} }
mark {
color: #707070;
font-weight: bold;
}
/* Top page */ /* Top page */
#profileContainer { #profileContainer {
min-height: calc(100vh - 100px); min-height: calc(100vh - 100px);
@ -226,14 +277,20 @@ nav li {
#contentBody { #contentBody {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 20px 0; /* padding: 20px 10px; */
text-align: left; text-align: left;
} }
.title {
font-family: 'Comfortaa';
}
#webmentions img { max-height: 1.2em; margin-right: -1ex; } #webmentions img { max-height: 1.2em; margin-right: -1ex; }
.date-updated { margin-top: -18px; } .date-updated { margin-top: -18px; }
/*
** Footer
*/
footer {
font-size: 12px;
box-sizing:border-box;
}

2
layouts/404.html
View file

@ -4,9 +4,11 @@
<body> <body>
<h1>404 Page Not Found</h1> <h1>404 Page Not Found</h1>
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main>
<div class="main"> <div class="main">
<p><a href="{{ .Site.BaseURL }}">Go Home</a></p> <p><a href="{{ .Site.BaseURL }}">Go Home</a></p>
</div> </div>
</main>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
</body> </body>
</html> </html>

3
layouts/_default/list.html
View file

@ -1,9 +1,10 @@
{{ define "main"}} {{ define "main"}}
<h1 class='title'>{{ .Title }}</h1>
{{ partial "header.html" . }} {{ partial "header.html" . }}
<!-- content --> <!-- content -->
<main>
<div id="contentBody"> <div id="contentBody">
{{ .Content }} {{ .Content }}
</div> </div>
</main>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
{{ end }} {{ end }}

3
layouts/_default/single.html
View file

@ -1,6 +1,6 @@
{{ define "main"}} {{ define "main"}}
<h1 class='title'>{{ .Title }}</h1>
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main>
{{ if not .Date.IsZero }} {{ if not .Date.IsZero }}
<!-- date --> <!-- date -->
{{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}} {{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
@ -21,5 +21,6 @@
<div id="contentBody"> <div id="contentBody">
{{ .Content }} {{ .Content }}
</div> </div>
</main>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
{{ end }} {{ end }}

2
layouts/blog/list.html
View file

@ -1,5 +1,6 @@
{{ define "main"}} {{ define "main"}}
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main>
<!-- search box --> <!-- search box -->
<div id="searchBox"> <div id="searchBox">
<input type="text" id="searchBoxInput" placeholder="Search..." /> <input type="text" id="searchBoxInput" placeholder="Search..." />
@ -28,6 +29,7 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>
</main>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
{{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }} {{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
{{ $mark := resources.Get "js/jquery.mark.es6.min.js" }} {{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}

7
layouts/blog/single.html
View file

@ -1,7 +1,11 @@
{{ define "main"}} {{ define "main"}}
<article class="h-entry"> <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" . }} {{ partial "header.html" . }}
<main>
<h1 class='title'>{{ .Title }}</h1>
<a style="display: none" class="u-url" href="{{ .Permalink }}"></a> <a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
<!-- date --> <!-- date -->
{{ if not .Date.IsZero }} {{ if not .Date.IsZero }}
@ -46,6 +50,7 @@
<input type="hidden" name="target" value="{{ .Permalink }}"> <input type="hidden" name="target" value="{{ .Permalink }}">
<button type="submit">Ping!</button> <button type="submit">Ping!</button>
</form> </form>
</main>
{{ $webmentionjs := resources.Get "js/webmention.min.js" }} {{ $webmentionjs := resources.Get "js/webmention.min.js" }}
<script src="{{ $webmentionjs.Permalink }}" async></script> <script src="{{ $webmentionjs.Permalink }}" async></script>
<!-- Metadata --> <!-- Metadata -->

4
layouts/blog/terms.html
View file

@ -1,6 +1,7 @@
{{ define "main"}} {{ define "main"}}
{{ partial "header.html" }}
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ partial "header.html" . }} <main>
<!-- tags --> <!-- tags -->
<div id="tags"> <div id="tags">
<ul> <ul>
@ -9,5 +10,6 @@
{{ end }} {{ end }}
</ul> </ul>
</div> </div>
</main>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
{{ end }} {{ end }}

3
layouts/feed/list.html
View file

@ -1,6 +1,6 @@
{{ define "main"}} {{ define "main"}}
<h1 class='title p-name'>{{ .Title }}</h1>
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main>
<!-- search box --> <!-- search box -->
<div id="searchBox"> <div id="searchBox">
<input type="text" id="searchBoxInput" placeholder="Search..." /> <input type="text" id="searchBoxInput" placeholder="Search..." />
@ -28,6 +28,7 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>
</main>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
{{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }} {{ $jquery := resources.Get "js/jquery-3.5.1.min.js" }}
{{ $mark := resources.Get "js/jquery.mark.es6.min.js" }} {{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}

4
layouts/index.html
View file

@ -2,9 +2,10 @@
<html> <html>
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
<main>
<div id="profileContainer"> <div id="profileContainer">
<div id="profile" class="h-card"> <div id="profile" class="h-card">
<header class="home"> <header class="header-home">
<!-- avator --> <!-- avator -->
<div class="avatar"> <div class="avatar">
<img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="avatar"> <img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="avatar">
@ -37,6 +38,7 @@
</nav> </nav>
</div> </div>
</div> </div>
</main>
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
<script type="application/ld+json"> <script type="application/ld+json">
{ {

44
layouts/partials/header.html
View file

@ -1,14 +1,40 @@
<header class="h-card p-author"> <header class="header-top">
<!-- avator --> <div class="header-flex">
<div class="avatar">
<img class="avatarMask u-photo" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}" alt="{{ .Site.Params.avatarDescription }}"> {{ $headerTitle := .Scratch.Get "customTitleHeader" }}
<a href="{{ .Site.BaseURL }}"><img class="avatar-border" src="{{ .Site.BaseURL }}/img/avatar-border.svg" alt=""></a> {{ $headerLink := .Scratch.Get "customTitleHeaderLink" }}
</div>
<!-- author --> {{ 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> <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) --> <!-- email / description (for h-card) -->
<a style="display: none" class="u-email" href="mailto://{{ .Site.Params.email }}"></a> <a class="u-email" href="mailto://{{ .Site.Params.email }}"></a>
<p style="display: none" class="p-note"> <p class="p-note">
{{ .Site.Params.description | safeHTML }} {{ .Site.Params.description | safeHTML }}
</p> </p>
</div>
</div>
</div>
</header> </header>