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
|
||||
theme: dreamcast
|
||||
params:
|
||||
about: "I write code and occasionally blog posts."
|
||||
# about: "I write code and occasionally blog posts."
|
||||
webmentions: https://webmention.io/yequari.com/webmention
|
||||
pingbacks: https://webmention.io/yequari.com/xmlrpc
|
||||
taxonomies:
|
||||
|
|
@ -36,27 +36,27 @@ menu:
|
|||
pageRef: /links
|
||||
weight: 60
|
||||
social:
|
||||
- name: yequari@retro.pizza
|
||||
- name: Mastodon
|
||||
params:
|
||||
rel: external
|
||||
icon: aero-mastodon.svg
|
||||
class: masto
|
||||
url: https://retro.pizza/@yequari
|
||||
weight: 10
|
||||
- name: rss feed
|
||||
- name: RSS
|
||||
params:
|
||||
icon: aero-rss.svg
|
||||
class: rss
|
||||
url: /blog/index.xml
|
||||
weight: 5
|
||||
- name: yequari@32bit.cafe
|
||||
- name: Email
|
||||
params:
|
||||
icon: aero-email-2.svg
|
||||
rel: external
|
||||
class: email
|
||||
url: mailto:yequari@32bit.cafe
|
||||
weight: 30
|
||||
- name: yequari@ cardgameson.motorcycles
|
||||
- name: XMPP
|
||||
params:
|
||||
rel: external
|
||||
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>
|
||||
{{ end }}
|
||||
{{ define "sidebar" }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
{{ .Content }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -9,5 +9,5 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
<span class="gloss"></span>
|
||||
<img class="u-photo" width="100px" src="/images/avatar.jpg">
|
||||
<img class="u-photo avatar" src="/images/avatar.jpg">
|
||||
</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,38 +1,26 @@
|
|||
<section>
|
||||
<!-- <div id="avatar-frame" class="online"> -->
|
||||
<!-- <span class="gloss"></span> -->
|
||||
<!-- <img class="u-photo" width="100px" src="/images/avatar.jpg"> -->
|
||||
<!-- </div> -->
|
||||
{{ partial "avatar.html" . }}
|
||||
<p class="about-me">
|
||||
I'm yequari. I like programming, tabletop games, and the Transformers.
|
||||
</p>
|
||||
<section class="sidebar">
|
||||
<section>
|
||||
<!-- <div id="avatar-frame" class="online"> -->
|
||||
<!-- <span class="gloss"></span> -->
|
||||
<!-- <img class="u-photo" width="100px" src="/images/avatar.jpg"> -->
|
||||
<!-- </div> -->
|
||||
{{ partial "avatar.html" . }}
|
||||
<!-- <p class="about-me"> -->
|
||||
<!-- I'm yequari. I like programming, tabletop games, and the Transformers. -->
|
||||
<!-- </p> -->
|
||||
</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> -->
|
||||
{{ partial "statuscafe.html" .}}
|
||||
</section>
|
||||
<section>
|
||||
<!-- <h1>Social</h1> -->
|
||||
{{ partial "social.html" .}}
|
||||
</section>
|
||||
<!-- <section> -->
|
||||
<!-- <h1>Quote of the Day</h1> -->
|
||||
<!-- <div id="quote"> -->
|
||||
<!-- <p id="subtitle">.</p> -->
|
||||
<!-- </div> -->
|
||||
<!-- </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> -->
|
||||
{{ partial "statuscafe.html" .}}
|
||||
</section>
|
||||
<section>
|
||||
<!-- <h1>Social</h1> -->
|
||||
<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>
|
||||
</section>
|
||||
<!-- <section> -->
|
||||
<!-- <h1>Quote of the Day</h1> -->
|
||||
<!-- <div id="quote"> -->
|
||||
<!-- <p id="subtitle">.</p> -->
|
||||
<!-- </div> -->
|
||||
<!-- </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>
|
||||
|
|
@ -1,11 +1,228 @@
|
|||
.notes-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.notes-tag {
|
||||
flex: 1 3 300px;
|
||||
border: 1px dotted gray;
|
||||
margin: 10px;
|
||||
padding: 0 10px;
|
||||
flex: 1 3 250px;
|
||||
margin: 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" . -}}
|
||||
</nav>
|
||||
<div class="main-sidebar">
|
||||
<section class="sidebar">
|
||||
{{- partial "sidebar.html" . -}}
|
||||
</section>
|
||||
{{- block "sidebar" . }}
|
||||
{{ end }}
|
||||
<main>
|
||||
{{- block "main" . }}{{- end }}
|
||||
</main>
|
||||
<footer>
|
||||
{{- partial "footer.html" . -}}
|
||||
</footer>
|
||||
<!-- <footer> -->
|
||||
<!-- {{- partial "footer.html" . -}} -->
|
||||
<!-- </footer> -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -12,3 +12,5 @@
|
|||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ define "sidebar" }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
{{ define "sidebar" }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,4 @@
|
|||
{{ end }}
|
||||
</section>
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
<h3>See Posts From</h3>
|
||||
{{- partial "posts-by-year.html" . -}}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -13,3 +13,5 @@
|
|||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ define "sidebar" }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -7,3 +7,6 @@
|
|||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
{{ define "sidebar" }}
|
||||
{{- partial "sidebar.html" . -}}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<ul>
|
||||
{{ range $index,$element := .Site.Taxonomies.year -}}
|
||||
{{if ne $index "2022"}},{{end}}
|
||||
<a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
|
||||
<!-- {{if ne $index "2022"}},{{end}} -->
|
||||
<li><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a></li>
|
||||
{{- 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 */
|
||||
: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;
|
||||
--verdigris: #28AFB0;
|
||||
--fandango: #AF4D98;
|
||||
--risd-blue: #4242FF;
|
||||
|
||||
--charcoal: #364958;
|
||||
--cornflower-blue: #758BFD;
|
||||
--tropical-indigo: #9D8DF1;
|
||||
--bg: #0046de;
|
||||
--brown: #896D2E;
|
||||
--orange: #DE9B00;
|
||||
--blue-gray: #2F3E5E;
|
||||
--blue: #284D9E;
|
||||
--black: #342F23;
|
||||
|
||||
/* solarized dark colors */
|
||||
--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);
|
||||
--main-bg: var(--bg);
|
||||
--content-bg: var(--isabelline);
|
||||
--primary-text: var(--night);
|
||||
--secondary-text: var(--charcoal);
|
||||
--nav-link: var(--fairy-tale);
|
||||
--primary-link: var(--risd-blue);
|
||||
--primary-link-hover: var(--chinese-red);
|
||||
--secondary-link: var(--verdigris);
|
||||
--secondary-link-hover: var(--tropical-indigo);
|
||||
--ternary-link: var(--zaffre);
|
||||
--ternary-link-hover: var(--chinese-red);
|
||||
--primary-text: var(--black);
|
||||
--secondary-text: var(--blue-gray);
|
||||
--header: var(--orange);
|
||||
--nav-link: var(--orange);
|
||||
--primary-link: var(--brown);
|
||||
--primary-link-hover: var(--blue);
|
||||
--secondary-link: var(--blue);
|
||||
--secondary-link-hover: var(--brown);
|
||||
--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 {
|
||||
background: fixed no-repeat url('/images/waves.svg') #00c2f6;
|
||||
background: fixed no-repeat url('/images/waves.svg') var(--main-bg);
|
||||
background-size: cover;
|
||||
color: var(--primary-text);
|
||||
font-size: medium;
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
font-family: 'Catamaran', serif;
|
||||
scrollbar-width: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -92,20 +49,43 @@ body::-webkit-scrollbar {
|
|||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: var(--secondary-text);
|
||||
font-family: 'M PLUS 1', sans-serif;
|
||||
text-transform: capitalize;
|
||||
font-family: 'Koulen', sans-serif;
|
||||
}
|
||||
|
||||
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 {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
p.subtitle {
|
||||
color: var(--secondary-text);
|
||||
font-size: 1.1rem;
|
||||
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 {
|
||||
|
|
@ -117,21 +97,30 @@ a:hover, a:active {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.tag {
|
||||
article a.title:link, article a.title:visited {
|
||||
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;
|
||||
}
|
||||
|
||||
a.tag:hover, a.tag:active {
|
||||
color: var(--primary-link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.category {
|
||||
color: var(--ternary-link)
|
||||
color: var(--primary-link)
|
||||
}
|
||||
|
||||
a.category:hover, a.category:active {
|
||||
color: var(--ternary-link-hover)
|
||||
color: var(--primary-link-hover)
|
||||
}
|
||||
|
||||
a.permalink {
|
||||
|
|
@ -145,7 +134,7 @@ a.summary {
|
|||
header h1 {
|
||||
font-family: 'Audiowide', display;
|
||||
/* font-size: 1rem; */
|
||||
color: var(--fairy-tale);
|
||||
color: var(--header);
|
||||
display: inline;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -164,6 +153,10 @@ img.social {
|
|||
width: 16px;
|
||||
}
|
||||
|
||||
header {
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
}
|
||||
|
||||
header a.sitetitle {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -173,20 +166,14 @@ header .profile {
|
|||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
margin: 10px;
|
||||
text-shadow: 3px 3px 5px var(--blue-gray);
|
||||
}
|
||||
|
||||
header .profile img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p.about {
|
||||
line-height: 0;
|
||||
color: var(--fairy-tale);
|
||||
}
|
||||
|
||||
p.context {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 1024px;
|
||||
|
|
@ -197,11 +184,12 @@ nav {
|
|||
/* From https://css.glass */
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
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);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
border-radius: 15px;
|
||||
|
|
@ -264,15 +252,15 @@ nav li a:hover, nav li a:active {
|
|||
z-index: 1;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
box-shadow: 10px 5px 5px #00000066;
|
||||
padding: 30px 0 0 0;
|
||||
margin-bottom: 100px;
|
||||
box-shadow: 3px 3px 5px var(--shadow);
|
||||
padding: 0;
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex: 0 1 20%;
|
||||
border-right: 1px solid black;
|
||||
padding: 0 25px;
|
||||
border-right: 1px solid #c7c7c7;
|
||||
padding: 30px 25px;
|
||||
}
|
||||
|
||||
.sidebar h1 {
|
||||
|
|
@ -284,86 +272,18 @@ nav li a:hover, nav li a:active {
|
|||
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 {
|
||||
flex: 1 3 70%;
|
||||
padding: 0 25px;
|
||||
padding: 2vh 4vw;
|
||||
}
|
||||
|
||||
main li {
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
|
||||
article p.context {
|
||||
margin-top: -25px;
|
||||
padding-left: 25px;
|
||||
margin-top: 0;
|
||||
padding-left: 1vw;
|
||||
}
|
||||
|
||||
article p {
|
||||
|
|
@ -399,21 +319,10 @@ blockquote {
|
|||
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 code{
|
||||
padding: 15px;
|
||||
display: block;
|
||||
max-width: 640px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
padding: 1vh 2vw;
|
||||
}
|
||||
|
||||
ul.pagination {
|
||||
|
|
@ -436,17 +345,9 @@ footer {
|
|||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 30px;
|
||||
margin-bottom: -15px;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
h3.index {
|
||||
margin-bottom: 10px;
|
||||
/* margin: 10px 0; */
|
||||
}
|
||||
|
||||
#webmentions img { max-height: 1.2em; margin-right: -1ex; }
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -459,91 +360,8 @@ h3.index {
|
|||
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) {
|
||||
.sidebar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
article img {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.main-sidebar {
|
||||
flex-flow: row wrap-reverse;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue