yequari
/
yequari.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new layout concept

This commit is contained in:
yequari 2023-09-12 16:48:39 -07:00
parent af599da0bf
commit aaee901c53
8 changed files with 128 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
themes/saturn/layouts/_default/baseof.html
View File

@ -2,6 +2,8 @@
<html> <html>
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
<div class="big">
{{- partial "sidebar.html" . -}}
<div class="column"> <div class="column">
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
<main> <main>
@ -9,5 +11,6 @@
</main> </main>
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
</div> </div>
</div>
</body> </body>
</html> </html>

21
themes/saturn/layouts/_default/list.html
View File

@ -1,11 +1,20 @@
{{ define "main" }} {{ define "main" }}
<div id="sidebar"></div> <section class="content posts h-feed hfeed">
<article class="posts h-feed hfeed">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
<ul>
{{ range .Pages }} {{ 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 }} {{ end }}
</ul> </article>
</article> {{ end }}
</section>
{{ end }} {{ end }}

4
themes/saturn/layouts/blog/list.html
View File

@ -1,7 +1,7 @@
{{ define "main" }} {{ define "main" }}
<section class="content posts h-feed hfeed"> <section class="content posts h-feed hfeed">
{{ range .Paginator.Pages.ByPublishDate.Reverse }} {{ 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> <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> <time class="dt-published" datetime="{{ .PublishDate }}">{{ .PublishDate.Format "Mon, Jan 2, 2006" }}</time>
{{ partial "tags.html" .}} {{ partial "tags.html" .}}
@ -13,7 +13,7 @@
<a href="{{ .RelPermalink }}">Read More...</a> <a href="{{ .RelPermalink }}">Read More...</a>
</div> </div>
{{ end }} {{ end }}
</p> </article>
{{ end }} {{ end }}
{{ template "_internal/pagination.html" . }} {{ template "_internal/pagination.html" . }}
</section> </section>

4
themes/saturn/layouts/blog/single.html
View File

@ -1,6 +1,5 @@
{{ define "main" }} {{ define "main" }}
<section class="content"> <article class="h-entry content">
<article class="h-entry">
<h1 class="p-name">{{ .Title }}</h1> <h1 class="p-name">{{ .Title }}</h1>
<a class="p-author h-card hidden" href="https://yequari.com">yequari</a> <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> <time class="dt-published" datetime={{.PublishDate }}>{{ .PublishDate.Format "Mon, Jan 02, 2006" }}</time>
@ -11,5 +10,4 @@
</div> </div>
</article> </article>
<div id="webmentions"></div> <div id="webmentions"></div>
</section>
{{ end }} {{ end }}

3
themes/saturn/layouts/partials/head.html
View File

@ -10,4 +10,7 @@
<link rel="webmention" href="https://webmention.io/yequari.com/webmention" /> <link rel="webmention" href="https://webmention.io/yequari.com/webmention" />
<link rel="pingback" href="https://webmention.io/yequari.com/xmlrpc" /> <link rel="pingback" href="https://webmention.io/yequari.com/xmlrpc" />
<script src="/js/webmention.js" async></script> <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> </head>

7
themes/saturn/layouts/partials/header.html
View File

@ -1,10 +1,3 @@
<header> <header>
<a class="sitetitle" href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> <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> </header>

7
themes/saturn/layouts/partials/sidebar.html Normal file
View File

@ -0,0 +1,7 @@
<nav>
<ul>
{{ range site.Menus.main }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</nav>

171
themes/saturn/static/css/main.css
View File

@ -44,6 +44,7 @@
--primary-link: var(--magenta); --primary-link: var(--magenta);
--primary-link-hover: var(--red); --primary-link-hover: var(--red);
--secondary-link: var(--blue); --secondary-link: var(--blue);
--ternary-link: var(--yellow);
} }
@font-face { @font-face {
@ -67,9 +68,13 @@ body::-webkit-scrollbar {
display: none; display: none;
} }
h1,h2,h3,h4,h5,h6 {
color: var(--primary-text);
font-family: 'Lalezar', display;
}
p { p {
font-size: 1.1rem; line-height: 1.5;
line-height: 2;
} }
a:link, a:visited { a:link, a:visited {
@ -81,14 +86,24 @@ a:hover, a:active {
text-decoration: underline; text-decoration: underline;
} }
h1,h2,h3,h4,h5,h6 { a.tag {
color: var(--primary-text); color: var(--secondary-link);
font-family: 'Lalezar', display;
} }
.hidden { a.permalink {
display: none; padding: 0 5px;
}
a.summary {
color: var(--primary-text);
}
.big {
display: flex;
flex-direction: row;
margin: 0 auto;
padding-top: 100px;
width: 40rem;
} }
.column { .column {
@ -97,16 +112,15 @@ h1,h2,h3,h4,h5,h6 {
gap: 10px; gap: 10px;
max-width: 1000px; max-width: 1000px;
margin: 10px auto; margin: 10px auto;
background-color: rgba(23,33,33,0.7);
padding: 0 20px;
min-height: 800px; min-height: 800px;
flex: 1;
} }
header { header {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
flex-shrink: 0; flex-shrink: 0;
margin: 10px; margin: 10px auto;
} }
header h1 { header h1 {
@ -115,20 +129,26 @@ header h1 {
color: var(--pewter-blue); color: var(--pewter-blue);
} }
header a.sitetitle {
text-decoration: none;
}
nav { nav {
flex: 1; flex: 0 0 100px;
width: fit-content;
text-align: right;
padding-top: 100px;
} }
nav ul { nav ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
text-align: center;
} }
nav li { /*nav li {
display: inline; display: inline;
} }*/
nav li a { nav li a {
display: inline-block; display: inline-block;
@ -141,13 +161,19 @@ nav li a {
font-size: 0.9em; font-size: 0.9em;
} }
nav li a:link, nav li a:visited {
color: var(--ternary-link);
}
main { main {
flex: 1; flex: 1;
display: flex; display: flex;
background-color: rgba(23,33,33,0.7);
padding: 0 25px;
flex-flow: row wrap; flex-flow: row wrap;
/* gap: 20px; */ /* gap: 20px; */
z-index: 1; z-index: 1;
margin: 0 0.1rem; /* margin: 0 0.1rem; */
} }
.sidebar { .sidebar {
@ -159,16 +185,50 @@ main {
line-height: 1; line-height: 1;
} }
section.content { .content {
flex: 8 1; flex: 8 1;
padding: 0 1rem; padding: 0 1rem;
} }
section p { article p {
text-indent: 1rem; text-indent: 1rem;
text-align: justify; 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 { footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -182,10 +242,6 @@ footer div {
flex: 1; flex: 1;
} }
a.sitetitle {
text-decoration: none;
}
footer ul.social { footer ul.social {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -203,58 +259,16 @@ footer li.social a {
color: var(--secondary-link); 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; } #webmentions img { max-height: 1.2em; margin-right: -1ex; }
.hidden {
display: none;
}
.center { .center {
text-align: center; text-align: center;
} }
ul.pagination {
list-style: none;
text-align: center;
}
li.page-item {
display: inline;
padding: 0.3rem;
}
/* /*
* Links page * Links page
*/ */
@ -276,7 +290,11 @@ li.page-item {
.hover-links { .hover-links {
position: relative; 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 { .hover-links:before {
@ -285,13 +303,13 @@ li.page-item {
opacity: 0; opacity: 0;
max-width: 340px; max-width: 340px;
min-width: 200px; min-width: 200px;
background-color: var(--xiketic); background-color: var(--main-bg);
color: var(--pewter-blue); color: var(--primary-text);
text-align: center; text-align: center;
border: 4px double var(--dim-gray); border: 4px double var(--primary-text);
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
transition: opacity 1s ease-in-out; transition: opacity 0.3s ease-in-out;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
left: -50px; left: -50px;
@ -299,7 +317,7 @@ li.page-item {
} }
.hover-links:hover:before { .hover-links:hover:before {
opacity: 1; opacity: 0.8;
visibility: visible; visibility: visible;
} }
@ -312,6 +330,11 @@ li.page-item {
background-color: var(--content-bg); background-color: var(--content-bg);
} }
.big {
flex-direction: column;
width: unset;
}
.column { .column {
border: none; border: none;
background: none; background: none;