new layout concept
This commit is contained in:
parent
af599da0bf
commit
aaee901c53
|
|
@ -2,6 +2,8 @@
|
|||
<html>
|
||||
{{- partial "head.html" . -}}
|
||||
<body>
|
||||
<div class="big">
|
||||
{{- partial "sidebar.html" . -}}
|
||||
<div class="column">
|
||||
{{- partial "header.html" . -}}
|
||||
<main>
|
||||
|
|
@ -9,5 +11,6 @@
|
|||
</main>
|
||||
{{- partial "footer.html" . -}}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
{{ define "main" }}
|
||||
<div id="sidebar"></div>
|
||||
<article class="posts h-feed hfeed">
|
||||
<section class="content posts h-feed hfeed">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<ul>
|
||||
{{ range .Pages }}
|
||||
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
|
||||
<article class="h-entry">
|
||||
<h2><a class="title u-url p-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
<time class="dt-published" datetime="{{ .PublishDate }}">{{ .PublishDate.Format "Mon, Jan 2, 2006" }}</time>
|
||||
{{ partial "tags.html" .}}
|
||||
<p class="summary">
|
||||
{{ .Summary }}
|
||||
</p>
|
||||
{{ if .Truncated }}
|
||||
<div>
|
||||
<a href="{{ .RelPermalink }}">Read More...</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</article>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{ define "main" }}
|
||||
<section class="content posts h-feed hfeed">
|
||||
{{ range .Paginator.Pages.ByPublishDate.Reverse }}
|
||||
<p class="h-entry">
|
||||
<article class="h-entry">
|
||||
<h2><a class="title u-url p-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
<time class="dt-published" datetime="{{ .PublishDate }}">{{ .PublishDate.Format "Mon, Jan 2, 2006" }}</time>
|
||||
{{ partial "tags.html" .}}
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<a href="{{ .RelPermalink }}">Read More...</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</p>
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{{ define "main" }}
|
||||
<section class="content">
|
||||
<article class="h-entry">
|
||||
<article class="h-entry content">
|
||||
<h1 class="p-name">{{ .Title }}</h1>
|
||||
<a class="p-author h-card hidden" href="https://yequari.com">yequari</a>
|
||||
<time class="dt-published" datetime={{.PublishDate }}>{{ .PublishDate.Format "Mon, Jan 02, 2006" }}</time>
|
||||
|
|
@ -11,5 +10,4 @@
|
|||
</div>
|
||||
</article>
|
||||
<div id="webmentions"></div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -10,4 +10,7 @@
|
|||
<link rel="webmention" href="https://webmention.io/yequari.com/webmention" />
|
||||
<link rel="pingback" href="https://webmention.io/yequari.com/xmlrpc" />
|
||||
<script src="/js/webmention.js" async></script>
|
||||
{{ range .AlternativeOutputFormats -}}
|
||||
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
|
||||
{{ end -}}
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,3 @@
|
|||
<header>
|
||||
<a class="sitetitle" href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
|
||||
<nav>
|
||||
<ul>
|
||||
{{ range site.Menus.main }}
|
||||
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<nav>
|
||||
<ul>
|
||||
{{ range site.Menus.main }}
|
||||
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -44,6 +44,7 @@
|
|||
--primary-link: var(--magenta);
|
||||
--primary-link-hover: var(--red);
|
||||
--secondary-link: var(--blue);
|
||||
--ternary-link: var(--yellow);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -67,9 +68,13 @@ body::-webkit-scrollbar {
|
|||
display: none;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: var(--primary-text);
|
||||
font-family: 'Lalezar', display;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 2;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a:link, a:visited {
|
||||
|
|
@ -81,14 +86,24 @@ a:hover, a:active {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: var(--primary-text);
|
||||
font-family: 'Lalezar', display;
|
||||
|
||||
a.tag {
|
||||
color: var(--secondary-link);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
a.permalink {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
a.summary {
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
.big {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0 auto;
|
||||
padding-top: 100px;
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.column {
|
||||
|
|
@ -97,16 +112,15 @@ h1,h2,h3,h4,h5,h6 {
|
|||
gap: 10px;
|
||||
max-width: 1000px;
|
||||
margin: 10px auto;
|
||||
background-color: rgba(23,33,33,0.7);
|
||||
padding: 0 20px;
|
||||
min-height: 800px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
flex-shrink: 0;
|
||||
margin: 10px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
|
|
@ -115,20 +129,26 @@ header h1 {
|
|||
color: var(--pewter-blue);
|
||||
}
|
||||
|
||||
header a.sitetitle {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
flex: 1;
|
||||
flex: 0 0 100px;
|
||||
width: fit-content;
|
||||
text-align: right;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav li {
|
||||
/*nav li {
|
||||
display: inline;
|
||||
}
|
||||
}*/
|
||||
|
||||
nav li a {
|
||||
display: inline-block;
|
||||
|
|
@ -141,13 +161,19 @@ nav li a {
|
|||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
nav li a:link, nav li a:visited {
|
||||
color: var(--ternary-link);
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
background-color: rgba(23,33,33,0.7);
|
||||
padding: 0 25px;
|
||||
flex-flow: row wrap;
|
||||
/* gap: 20px; */
|
||||
z-index: 1;
|
||||
margin: 0 0.1rem;
|
||||
/* margin: 0 0.1rem; */
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
|
@ -159,16 +185,50 @@ main {
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
section.content {
|
||||
.content {
|
||||
flex: 8 1;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
section p {
|
||||
article p {
|
||||
text-indent: 1rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
section.posts ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
article time {
|
||||
color: var(--secondary-text);
|
||||
}
|
||||
|
||||
article a.title {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: black;
|
||||
padding: 10px;
|
||||
overflow-x: scroll;
|
||||
color: white;
|
||||
}
|
||||
|
||||
pre code{
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.pagination {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li.page-item {
|
||||
display: inline;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -182,10 +242,6 @@ footer div {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
a.sitetitle {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer ul.social {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
|
@ -203,58 +259,16 @@ footer li.social a {
|
|||
color: var(--secondary-link);
|
||||
}
|
||||
|
||||
a.tag {
|
||||
color: var(--secondary-link);
|
||||
}
|
||||
|
||||
a.permalink {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
a.summary {
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
time.dt-published {
|
||||
color: var(--secondary-text);
|
||||
}
|
||||
|
||||
ul.posts {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: black;
|
||||
padding: 10px;
|
||||
overflow-x: scroll;
|
||||
color: white;
|
||||
}
|
||||
|
||||
pre code{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#webmentions img { max-height: 1.2em; margin-right: -1ex; }
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.pagination {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
li.page-item {
|
||||
display: inline;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Links page
|
||||
*/
|
||||
|
|
@ -276,7 +290,11 @@ li.page-item {
|
|||
|
||||
.hover-links {
|
||||
position: relative;
|
||||
border-bottom: 1px dotted var(--chinese-red);
|
||||
border-bottom: 1px dotted var(--secondary-link);
|
||||
}
|
||||
|
||||
a.hover-links:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hover-links:before {
|
||||
|
|
@ -285,13 +303,13 @@ li.page-item {
|
|||
opacity: 0;
|
||||
max-width: 340px;
|
||||
min-width: 200px;
|
||||
background-color: var(--xiketic);
|
||||
color: var(--pewter-blue);
|
||||
background-color: var(--main-bg);
|
||||
color: var(--primary-text);
|
||||
text-align: center;
|
||||
border: 4px double var(--dim-gray);
|
||||
border: 4px double var(--primary-text);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
transition: opacity 1s ease-in-out;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: -50px;
|
||||
|
|
@ -299,7 +317,7 @@ li.page-item {
|
|||
}
|
||||
|
||||
.hover-links:hover:before {
|
||||
opacity: 1;
|
||||
opacity: 0.8;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
|
@ -312,6 +330,11 @@ li.page-item {
|
|||
background-color: var(--content-bg);
|
||||
}
|
||||
|
||||
.big {
|
||||
flex-direction: column;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.column {
|
||||
border: none;
|
||||
background: none;
|
||||
|
|
|
|||
Loading…
Reference in New Issue