update theme fonts and colors, layout changes, update index
This commit is contained in:
parent
5eef7f70e4
commit
f8eeb0f218
10
config.yaml
10
config.yaml
|
|
@ -3,7 +3,7 @@ languageCode: en-us
|
||||||
title: yequari.com
|
title: yequari.com
|
||||||
theme: dreamcast
|
theme: dreamcast
|
||||||
params:
|
params:
|
||||||
about: "I write code and occasionally blog posts."
|
# about: "I write code and occasionally blog posts."
|
||||||
webmentions: https://webmention.io/yequari.com/webmention
|
webmentions: https://webmention.io/yequari.com/webmention
|
||||||
pingbacks: https://webmention.io/yequari.com/xmlrpc
|
pingbacks: https://webmention.io/yequari.com/xmlrpc
|
||||||
taxonomies:
|
taxonomies:
|
||||||
|
|
@ -36,27 +36,27 @@ menu:
|
||||||
pageRef: /links
|
pageRef: /links
|
||||||
weight: 60
|
weight: 60
|
||||||
social:
|
social:
|
||||||
- name: yequari@retro.pizza
|
- name: Mastodon
|
||||||
params:
|
params:
|
||||||
rel: external
|
rel: external
|
||||||
icon: aero-mastodon.svg
|
icon: aero-mastodon.svg
|
||||||
class: masto
|
class: masto
|
||||||
url: https://retro.pizza/@yequari
|
url: https://retro.pizza/@yequari
|
||||||
weight: 10
|
weight: 10
|
||||||
- name: rss feed
|
- name: RSS
|
||||||
params:
|
params:
|
||||||
icon: aero-rss.svg
|
icon: aero-rss.svg
|
||||||
class: rss
|
class: rss
|
||||||
url: /blog/index.xml
|
url: /blog/index.xml
|
||||||
weight: 5
|
weight: 5
|
||||||
- name: yequari@32bit.cafe
|
- name: Email
|
||||||
params:
|
params:
|
||||||
icon: aero-email-2.svg
|
icon: aero-email-2.svg
|
||||||
rel: external
|
rel: external
|
||||||
class: email
|
class: email
|
||||||
url: mailto:yequari@32bit.cafe
|
url: mailto:yequari@32bit.cafe
|
||||||
weight: 30
|
weight: 30
|
||||||
- name: yequari@ cardgameson.motorcycles
|
- name: XMPP
|
||||||
params:
|
params:
|
||||||
rel: external
|
rel: external
|
||||||
icon: aero-chat.svg
|
icon: aero-chat.svg
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
<h1>{{ .Title }}</h1>
|
||||||
|
<section class="content posts h-feed hfeed">
|
||||||
|
{{ range .Paginator.Pages.ByPublishDate.Reverse }}
|
||||||
|
<article class="h-entry">
|
||||||
|
<h2><a class="title u-url p-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||||
|
{{ partial "post-header.html" .}}
|
||||||
|
{{ if .Params.Subtitle }}<p class="subtitle">{{ .Params.Subtitle }}</p>{{ end }}
|
||||||
|
<p class="summary">
|
||||||
|
{{ .Summary }}{{ if .Truncated }}...{{ end }}
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
{{ end }}
|
||||||
|
</section>
|
||||||
|
{{ template "_internal/pagination.html" . }}
|
||||||
|
{{ end }}
|
||||||
|
{{ define "sidebar" }}
|
||||||
|
<!-- {{- partial "blog-sidebar.html" . -}} -->
|
||||||
|
<!-- <h3>See Posts From</h3> -->
|
||||||
|
<!-- {{- partial "posts-by-year.html" . -}} -->
|
||||||
|
<!-- {{- partial "sidebar.html" . -}} -->
|
||||||
|
{{ end }}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
<div class="index-wrapper">
|
||||||
|
<div class="box index-status">
|
||||||
|
</div>
|
||||||
|
<div class="box index-content">
|
||||||
|
{{ .Content }}
|
||||||
|
</div>
|
||||||
|
<div class="box index-blog">
|
||||||
|
<h3>Latest Blog Posts</h3>
|
||||||
|
<ul>
|
||||||
|
{{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
|
||||||
|
<li><a class="title u-url p-name" href="{{ .RelPermalink }}">{{ .Title }}</a></li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="box index-social">
|
||||||
|
<h3>Social</h3>
|
||||||
|
{{- partial "social.html" . -}}
|
||||||
|
</div>
|
||||||
|
<div class="box index-banners">
|
||||||
|
<h3>Check Out These Sites</h3>
|
||||||
|
<a href="/links">More Links</a>
|
||||||
|
</div>
|
||||||
|
<div class="box index-recent">
|
||||||
|
<h3>What I'm Up To</h3>
|
||||||
|
<a href="/now">See More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
@ -13,3 +13,5 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
{{ define "sidebar" }}
|
||||||
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{{ .Content }}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -9,5 +9,5 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<span class="gloss"></span>
|
<span class="gloss"></span>
|
||||||
<img class="u-photo" width="100px" src="/images/avatar.jpg">
|
<img class="u-photo avatar" src="/images/avatar.jpg">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<section class="sidebar">
|
||||||
|
<h3> See Posts From </h3>
|
||||||
|
{{- partial "posts-by-year.html" . -}}
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<div class="profile h-card">
|
||||||
|
<a class="sitetitle u-url" rel="me" href="{{ .Site.BaseURL }}"><h1><span class="p-name">{{ .Site.Title }}</span></h1></a>
|
||||||
|
{{- partial "avatar.html" . -}}
|
||||||
|
</div>
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
|
<section class="sidebar">
|
||||||
<section>
|
<section>
|
||||||
<!-- <div id="avatar-frame" class="online"> -->
|
<!-- <div id="avatar-frame" class="online"> -->
|
||||||
<!-- <span class="gloss"></span> -->
|
<!-- <span class="gloss"></span> -->
|
||||||
<!-- <img class="u-photo" width="100px" src="/images/avatar.jpg"> -->
|
<!-- <img class="u-photo" width="100px" src="/images/avatar.jpg"> -->
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
{{ partial "avatar.html" . }}
|
{{ partial "avatar.html" . }}
|
||||||
<p class="about-me">
|
<!-- <p class="about-me"> -->
|
||||||
I'm yequari. I like programming, tabletop games, and the Transformers.
|
<!-- I'm yequari. I like programming, tabletop games, and the Transformers. -->
|
||||||
</p>
|
<!-- </p> -->
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<!-- <div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=yequari" defer></script> -->
|
<!-- <div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=yequari" defer></script> -->
|
||||||
|
|
@ -14,21 +15,7 @@
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<!-- <h1>Social</h1> -->
|
<!-- <h1>Social</h1> -->
|
||||||
<ul class="social">
|
{{ partial "social.html" .}}
|
||||||
{{ range site.Menus.social }}
|
|
||||||
<li class="social">
|
|
||||||
<img class="social" src="/icons/{{.Params.icon}}">
|
|
||||||
{{ if .URL }}
|
|
||||||
<a rel="me" href="{{ .URL | safeURL }}">
|
|
||||||
{{ .Name }}
|
|
||||||
<!-- <span class="social {{.Params.class}}"></span> -->
|
|
||||||
</a>
|
|
||||||
{{ else }}
|
|
||||||
{{ .Name }}
|
|
||||||
{{ end }}
|
|
||||||
</li>
|
|
||||||
{{ end }}
|
|
||||||
</ul>
|
|
||||||
</section>
|
</section>
|
||||||
<!-- <section> -->
|
<!-- <section> -->
|
||||||
<!-- <h1>Quote of the Day</h1> -->
|
<!-- <h1>Quote of the Day</h1> -->
|
||||||
|
|
@ -36,3 +23,4 @@
|
||||||
<!-- <p id="subtitle">.</p> -->
|
<!-- <p id="subtitle">.</p> -->
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
<!-- </section> -->
|
<!-- </section> -->
|
||||||
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<ul class="social">
|
||||||
|
{{ range site.Menus.social }}
|
||||||
|
<li class="social">
|
||||||
|
<img class="social" src="/icons/{{.Params.icon}}">
|
||||||
|
{{ if .URL }}
|
||||||
|
<a rel="me" href="{{ .URL | safeURL }}">
|
||||||
|
{{ .Name }}
|
||||||
|
<!-- <span class="social {{.Params.class}}"></span> -->
|
||||||
|
</a>
|
||||||
|
{{ else }}
|
||||||
|
{{ .Name }}
|
||||||
|
{{ end }}
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
|
@ -4,8 +4,225 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.notes-tag {
|
.notes-tag {
|
||||||
flex: 1 3 300px;
|
flex: 1 3 250px;
|
||||||
border: 1px dotted gray;
|
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
/**/
|
||||||
|
/* .notes-tag h2 { */
|
||||||
|
/* background: white; */
|
||||||
|
/* margin: 0; */
|
||||||
|
/* padding: 0.3rem 0.5rem; */
|
||||||
|
/* } */
|
||||||
|
/**/
|
||||||
|
.notes-tag ul {
|
||||||
|
padding-bottom: 2em;
|
||||||
|
list-style-type: disc;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/**/
|
||||||
|
/* .notes-tag ul li { */
|
||||||
|
/* padding-top: 0.3em; */
|
||||||
|
/* } */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--avatar-width: 50px;
|
||||||
|
--avatar-padding: calc(var(--avatar-width) / 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
#avatar-frame {
|
||||||
|
width: fit-content;
|
||||||
|
max-height: var(--avatar-width);
|
||||||
|
margin: 0.5vh 0;
|
||||||
|
padding: var(--avatar-padding);
|
||||||
|
border: 1px solid #cccccf;
|
||||||
|
border-radius: 15%/23%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#avatar-frame img {
|
||||||
|
max-width: var(--avatar-width);
|
||||||
|
border: 1px solid grey;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online {
|
||||||
|
background: linear-gradient(#D6FFDB00 0%, #D6FFDB 30%, #66FF00 100%);
|
||||||
|
box-shadow: 0 5px 10px #66FF00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.busy {
|
||||||
|
background: linear-gradient(#FF9A0000 0%, #D8820055 30%, #fca30d 100%);
|
||||||
|
box-shadow: 0 5px 10px #fca30d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gloss {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* background: red; */
|
||||||
|
background: radial-gradient(ellipse 200% 120% at 50% 0%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 50%,
|
||||||
|
rgba(255,255,255,0) 51%);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 10;
|
||||||
|
border-radius: 15%/23%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-wrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 20% [col-start]);
|
||||||
|
grid-template-rows: repeat(5, 33% [row-start]);
|
||||||
|
column-gap: 0.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
/* border: 1px dotted black; */
|
||||||
|
padding: 2vh;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-content {
|
||||||
|
grid-row: 1 / 2;
|
||||||
|
grid-column: 2 / 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .index-status { */
|
||||||
|
/* margin-top: -15vh; */
|
||||||
|
/* grid-row: 1 / 2; */
|
||||||
|
/* grid-column: 1 / 2; */
|
||||||
|
/* } */
|
||||||
|
|
||||||
|
.index-social {
|
||||||
|
grid-row: 2 / 3;
|
||||||
|
grid-column: 5 / 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-blog {
|
||||||
|
grid-row: 2 / 3;
|
||||||
|
grid-column: 3 / 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-banners {
|
||||||
|
grid-row: 2 / 3;
|
||||||
|
grid-column: 1 / 3
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 700px) {
|
||||||
|
.index-content {
|
||||||
|
grid-row: 1 / 2;
|
||||||
|
grid-column: 1 / 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-status {
|
||||||
|
grid-row: 2 / 3;
|
||||||
|
grid-column: 1 / 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-social {
|
||||||
|
grid-row: 3 / 4;
|
||||||
|
grid-column: 1 / 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-blog {
|
||||||
|
grid-row: 4 / 5;
|
||||||
|
grid-column: 1 / 6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#statuscafe {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
}
|
||||||
|
|
||||||
|
#statuscafe p {
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 5px 0;
|
||||||
|
color: var(--secondary-text);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#statuscafe #statuscafe-timeago {
|
||||||
|
flex: 1 1 50%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#statuscafe #statuscafe-username {
|
||||||
|
flex: 1 1 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#statuscafe #statuscafe-content {
|
||||||
|
flex: 1 1 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Links page
|
||||||
|
*/
|
||||||
|
|
||||||
|
#links-main {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links-main ul {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links-main li {
|
||||||
|
padding: 7px 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-list details {
|
||||||
|
border: 1px dotted var(--pewter-blue);
|
||||||
|
padding: 0.7em 0.7em;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-list details[open] {
|
||||||
|
/* padding: 0.5em; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-list details[open] summary {
|
||||||
|
border-bottom: 1px dotted var(--pewter-blue);
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-list summary p {
|
||||||
|
line-height: 1;
|
||||||
|
/* margin: -0.5em -0.5em 0; */
|
||||||
|
/* padding: 0.5em; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.links-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1 3 20%;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links-column h2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* webmention box */
|
||||||
|
|
||||||
|
.send-webmention {
|
||||||
|
margin: 55px 25px;
|
||||||
|
max-width: fit-content;
|
||||||
|
border: 1px dotted var(--primary-text);
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-webmention p {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#webmentions img { max-height: 1.2em; margin-right: -1ex; }
|
||||||
|
|
|
||||||
|
|
@ -10,15 +10,14 @@
|
||||||
{{- partial "nav.html" . -}}
|
{{- partial "nav.html" . -}}
|
||||||
</nav>
|
</nav>
|
||||||
<div class="main-sidebar">
|
<div class="main-sidebar">
|
||||||
<section class="sidebar">
|
{{- block "sidebar" . }}
|
||||||
{{- partial "sidebar.html" . -}}
|
{{ end }}
|
||||||
</section>
|
|
||||||
<main>
|
<main>
|
||||||
{{- block "main" . }}{{- end }}
|
{{- block "main" . }}{{- end }}
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<!-- <footer> -->
|
||||||
{{- partial "footer.html" . -}}
|
<!-- {{- partial "footer.html" . -}} -->
|
||||||
</footer>
|
<!-- </footer> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -12,3 +12,5 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
{{ define "sidebar" }}
|
||||||
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
{{ define "sidebar" }}
|
||||||
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,4 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</section>
|
</section>
|
||||||
{{ template "_internal/pagination.html" . }}
|
{{ template "_internal/pagination.html" . }}
|
||||||
<h3>See Posts From</h3>
|
|
||||||
{{- partial "posts-by-year.html" . -}}
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -13,3 +13,5 @@
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
{{ define "sidebar" }}
|
||||||
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -7,3 +7,6 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
{{ define "sidebar" }}
|
||||||
|
{{- partial "sidebar.html" . -}}
|
||||||
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
|
<ul>
|
||||||
{{ range $index,$element := .Site.Taxonomies.year -}}
|
{{ range $index,$element := .Site.Taxonomies.year -}}
|
||||||
{{if ne $index "2022"}},{{end}}
|
<!-- {{if ne $index "2022"}},{{end}} -->
|
||||||
<a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
|
<li><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a></li>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,86 +1,43 @@
|
||||||
@import url(https://fonts.bunny.net/css?family=ibm-plex-mono:400|noto-sans:400,500,600,700|m-plus-1:400,500,600,700|audiowide:400);
|
@import url(https://fonts.bunny.net/css?family=ibm-plex-mono:400|noto-sans:400,500,600,700|m-plus-1:400,500,600,700|audiowide:400|koulen:400|catamaran:400,700);
|
||||||
/* CSS HEX */
|
/* CSS HEX */
|
||||||
:root {
|
:root {
|
||||||
--jet: #353535ff;
|
|
||||||
--chinese-red: #aa3322ff;
|
|
||||||
--pale-silver: #c4bbafff;
|
|
||||||
--space-cadet: #292640ff;
|
|
||||||
--xiketic: #0f101aff;
|
|
||||||
--blue-ryb: #4056f4ff;
|
|
||||||
--raisin-black: #241e1edd;
|
|
||||||
--dim-gray: #756b6bff;
|
|
||||||
--pewter-blue: #93A8ACff;
|
|
||||||
|
|
||||||
--celestial-blue: #5299D3;
|
|
||||||
--white-smoke: #F1EDEE;
|
|
||||||
--midnight-blue: #18206F;
|
|
||||||
--penn-blue: #17255A;
|
|
||||||
--eerie-black: #172121;
|
|
||||||
--vista-blue: #8EA4D2;
|
|
||||||
|
|
||||||
--dark-purple: #331832;
|
|
||||||
--fairy-tale: #FFC6D9;
|
|
||||||
--english-violet: #694D75;
|
|
||||||
--platinum: #D0DDD7;
|
|
||||||
--non-photo-blue: #8AC6D0;
|
|
||||||
|
|
||||||
--night: #121113;
|
|
||||||
--tea-green: #E2F1AF;
|
|
||||||
--anti-flash-white: #EEF0F2;
|
|
||||||
--zaffre: #0D21A1;
|
|
||||||
--saffron: #EEC643;
|
|
||||||
--purple: #7B1E7A;
|
|
||||||
--raspberry-rose: #B33F62;
|
|
||||||
--tufts-blue: #3C91E6;
|
|
||||||
--pale-purple: #F3E0EC;
|
|
||||||
--timberwolf: #DDCECD;
|
|
||||||
--isabelline: #EEE5E5;
|
--isabelline: #EEE5E5;
|
||||||
--verdigris: #28AFB0;
|
|
||||||
--fandango: #AF4D98;
|
|
||||||
--risd-blue: #4242FF;
|
|
||||||
|
|
||||||
--charcoal: #364958;
|
--bg: #0046de;
|
||||||
--cornflower-blue: #758BFD;
|
--brown: #896D2E;
|
||||||
--tropical-indigo: #9D8DF1;
|
--orange: #DE9B00;
|
||||||
|
--blue-gray: #2F3E5E;
|
||||||
|
--blue: #284D9E;
|
||||||
|
--black: #342F23;
|
||||||
|
|
||||||
/* solarized dark colors */
|
--main-bg: var(--bg);
|
||||||
--base00: #657b83;
|
|
||||||
--base01: #586e75;
|
|
||||||
--base02: #073642;
|
|
||||||
--base03: #002b36;
|
|
||||||
--base0: #839496;
|
|
||||||
--base1: #93a1a1;
|
|
||||||
--base2: #eee8d5;
|
|
||||||
--base3: #fdf6e3;
|
|
||||||
|
|
||||||
--yellow: #b58900;
|
|
||||||
--orange: #cb4b16;
|
|
||||||
--red: #dc322f;
|
|
||||||
--magenta: #d33682;
|
|
||||||
--violet: #6c71c4;
|
|
||||||
--blue: #268bd2;
|
|
||||||
--cyan: #2aa198;
|
|
||||||
--green: #859900;
|
|
||||||
|
|
||||||
--main-bg: var(--dark-purple);
|
|
||||||
--content-bg: var(--isabelline);
|
--content-bg: var(--isabelline);
|
||||||
--primary-text: var(--night);
|
--primary-text: var(--black);
|
||||||
--secondary-text: var(--charcoal);
|
--secondary-text: var(--blue-gray);
|
||||||
--nav-link: var(--fairy-tale);
|
--header: var(--orange);
|
||||||
--primary-link: var(--risd-blue);
|
--nav-link: var(--orange);
|
||||||
--primary-link-hover: var(--chinese-red);
|
--primary-link: var(--brown);
|
||||||
--secondary-link: var(--verdigris);
|
--primary-link-hover: var(--blue);
|
||||||
--secondary-link-hover: var(--tropical-indigo);
|
--secondary-link: var(--blue);
|
||||||
--ternary-link: var(--zaffre);
|
--secondary-link-hover: var(--brown);
|
||||||
--ternary-link-hover: var(--chinese-red);
|
--ternary-link: var(--blue);
|
||||||
|
--ternary-link-hover: var(--brown);
|
||||||
|
--shadow: #2F3E5E55;
|
||||||
|
|
||||||
|
--heading-1: 2.75rem;
|
||||||
|
--heading-2: 2.25rem;
|
||||||
|
--heading-3: 1.75rem;
|
||||||
|
--heading-4: 1.25rem;
|
||||||
|
--heading-5: 0.75rem;
|
||||||
|
--heading-6: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: fixed no-repeat url('/images/waves.svg') #00c2f6;
|
background: fixed no-repeat url('/images/waves.svg') var(--main-bg);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
color: var(--primary-text);
|
color: var(--primary-text);
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
font-family: 'Noto Sans', sans-serif;
|
font-family: 'Catamaran', serif;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -92,20 +49,43 @@ body::-webkit-scrollbar {
|
||||||
|
|
||||||
h1,h2,h3,h4,h5,h6 {
|
h1,h2,h3,h4,h5,h6 {
|
||||||
color: var(--secondary-text);
|
color: var(--secondary-text);
|
||||||
font-family: 'M PLUS 1', sans-serif;
|
font-family: 'Koulen', sans-serif;
|
||||||
text-transform: capitalize;
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: var(--heading-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: var(--heading-2);
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: var(--heading-3);
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: var(--heading-5);
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
font-size: var(--heading-6);
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
font-size: 1.1rem;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
p.subtitle {
|
p.subtitle {
|
||||||
color: var(--secondary-text);
|
color: var(--secondary-text);
|
||||||
font-size: 1.1rem;
|
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin-top: -10px;
|
}
|
||||||
margin-bottom: -5px;
|
|
||||||
|
p.about {
|
||||||
|
line-height: 0;
|
||||||
|
color: var(--fairy-tale);
|
||||||
|
}
|
||||||
|
|
||||||
|
p.context {
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:link, a:visited {
|
a:link, a:visited {
|
||||||
|
|
@ -117,21 +97,30 @@ a:hover, a:active {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.tag {
|
article a.title:link, article a.title:visited {
|
||||||
color: var(--secondary-link);
|
color: var(--secondary-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
article a.title:hover, article a.title:active {
|
||||||
|
color: var(--secondary-link-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
a.tag {
|
||||||
|
color: var(--primary-link);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.tag:hover, a.tag:active {
|
a.tag:hover, a.tag:active {
|
||||||
|
color: var(--primary-link-hover);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.category {
|
a.category {
|
||||||
color: var(--ternary-link)
|
color: var(--primary-link)
|
||||||
}
|
}
|
||||||
|
|
||||||
a.category:hover, a.category:active {
|
a.category:hover, a.category:active {
|
||||||
color: var(--ternary-link-hover)
|
color: var(--primary-link-hover)
|
||||||
}
|
}
|
||||||
|
|
||||||
a.permalink {
|
a.permalink {
|
||||||
|
|
@ -145,7 +134,7 @@ a.summary {
|
||||||
header h1 {
|
header h1 {
|
||||||
font-family: 'Audiowide', display;
|
font-family: 'Audiowide', display;
|
||||||
/* font-size: 1rem; */
|
/* font-size: 1rem; */
|
||||||
color: var(--fairy-tale);
|
color: var(--header);
|
||||||
display: inline;
|
display: inline;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
@ -164,6 +153,10 @@ img.social {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
font-family: 'Noto Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
header a.sitetitle {
|
header a.sitetitle {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
@ -173,20 +166,14 @@ header .profile {
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
text-shadow: 3px 3px 5px var(--blue-gray);
|
||||||
}
|
}
|
||||||
|
|
||||||
header .profile img {
|
header .profile img {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
p.about {
|
|
||||||
line-height: 0;
|
|
||||||
color: var(--fairy-tale);
|
|
||||||
}
|
|
||||||
|
|
||||||
p.context {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
max-width: 1024px;
|
max-width: 1024px;
|
||||||
|
|
@ -197,11 +184,12 @@ nav {
|
||||||
/* From https://css.glass */
|
/* From https://css.glass */
|
||||||
background: rgba(255, 255, 255, 0.13);
|
background: rgba(255, 255, 255, 0.13);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
box-shadow: 3px 3px 5px var(--shadow);
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
-webkit-backdrop-filter: blur(5px);
|
-webkit-backdrop-filter: blur(5px);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
font-family: 'Noto Sans', sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
|
@ -264,15 +252,15 @@ nav li a:hover, nav li a:active {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
box-shadow: 10px 5px 5px #00000066;
|
box-shadow: 3px 3px 5px var(--shadow);
|
||||||
padding: 30px 0 0 0;
|
padding: 0;
|
||||||
margin-bottom: 100px;
|
margin-bottom: 10vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
flex: 0 1 20%;
|
flex: 0 1 20%;
|
||||||
border-right: 1px solid black;
|
border-right: 1px solid #c7c7c7;
|
||||||
padding: 0 25px;
|
padding: 30px 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar h1 {
|
.sidebar h1 {
|
||||||
|
|
@ -284,86 +272,18 @@ nav li a:hover, nav li a:active {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar #avatar-frame {
|
|
||||||
width: fit-content;
|
|
||||||
height: 100px;
|
|
||||||
margin: 0 auto 25px auto;
|
|
||||||
padding: 8px 8px;
|
|
||||||
border: 1px solid #cccccf;
|
|
||||||
border-radius: 16px/24px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar #avatar-frame img {
|
|
||||||
max-width: 100px;
|
|
||||||
border: 1px solid grey;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#statuscafe {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
/* border: 1px solid #CCCCCC; */
|
|
||||||
}
|
|
||||||
|
|
||||||
#statuscafe p {
|
|
||||||
line-height: 1.5;
|
|
||||||
margin: 5px 0;
|
|
||||||
color: var(--secondary-text);
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
#statuscafe #statuscafe-timeago {
|
|
||||||
flex: 1 1 50%;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#statuscafe #statuscafe-username {
|
|
||||||
flex: 1 1 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#statuscafe #statuscafe-content {
|
|
||||||
flex: 1 1 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.online {
|
|
||||||
background: linear-gradient(#D6FFDB00 0%, #D6FFDB 30%, #66FF00 100%);
|
|
||||||
box-shadow: 0 5px 10px #66FF00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.busy {
|
|
||||||
background: linear-gradient(#FF9A0000 0%, #D8820055 30%, #fca30d 100%);
|
|
||||||
box-shadow: 0 5px 10px #fca30d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gloss {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
/* background: red; */
|
|
||||||
background: radial-gradient(ellipse 200px 140px at 50% 0%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 50%,
|
|
||||||
rgba(255,255,255,0) 51%);
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 10;
|
|
||||||
border-radius: 16px/24px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
flex: 1 3 70%;
|
flex: 1 3 70%;
|
||||||
padding: 0 25px;
|
padding: 2vh 4vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
main li {
|
main li {
|
||||||
padding: 0.2em 0;
|
padding: 0.2em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
article p.context {
|
article p.context {
|
||||||
margin-top: -25px;
|
margin-top: 0;
|
||||||
padding-left: 25px;
|
padding-left: 1vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
article p {
|
article p {
|
||||||
|
|
@ -399,21 +319,10 @@ blockquote {
|
||||||
border-left: 3px solid #ccc;
|
border-left: 3px solid #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
|
||||||
background-color: black;
|
|
||||||
overflow-x: scroll;
|
|
||||||
padding: 0 5px;
|
|
||||||
color: white;
|
|
||||||
font-family: 'IBM Plex Mono', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
}
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
pre code{
|
padding: 1vh 2vw;
|
||||||
padding: 15px;
|
|
||||||
display: block;
|
|
||||||
max-width: 640px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.pagination {
|
ul.pagination {
|
||||||
|
|
@ -436,17 +345,9 @@ footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: 30px;
|
margin-top: 1vh;
|
||||||
margin-bottom: -15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h3.index {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
/* margin: 10px 0; */
|
|
||||||
}
|
|
||||||
|
|
||||||
#webmentions img { max-height: 1.2em; margin-right: -1ex; }
|
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -459,91 +360,8 @@ h3.index {
|
||||||
text-transform: lowercase;
|
text-transform: lowercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Index page blog posts */
|
|
||||||
.title-date {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Links page
|
|
||||||
*/
|
|
||||||
|
|
||||||
#links-main {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#links-main ul {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#links-main li {
|
|
||||||
padding: 7px 0;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-list details {
|
|
||||||
border: 1px dotted var(--pewter-blue);
|
|
||||||
padding: 0.7em 0.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-list details[open] {
|
|
||||||
/* padding: 0.5em; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-list details[open] summary {
|
|
||||||
border-bottom: 1px dotted var(--pewter-blue);
|
|
||||||
padding-bottom: 0.5em;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-list summary p {
|
|
||||||
line-height: 1;
|
|
||||||
/* margin: -0.5em -0.5em 0; */
|
|
||||||
/* padding: 0.5em; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.links-column {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1 3 20%;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.links-column h2 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* webmention box */
|
|
||||||
|
|
||||||
.send-webmention {
|
|
||||||
margin: 55px 25px;
|
|
||||||
max-width: fit-content;
|
|
||||||
border: 1px dotted var(--primary-text);
|
|
||||||
padding: 0 20px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.send-webmention p {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 700px) {
|
@media only screen and (max-width: 700px) {
|
||||||
.sidebar {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
article img {
|
article img {
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-sidebar {
|
|
||||||
flex-flow: row wrap-reverse;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue