diff --git a/config.yaml b/config.yaml index 3163a6d..d35d91b 100644 --- a/config.yaml +++ b/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 diff --git a/layouts/blog/list.html b/layouts/blog/list.html new file mode 100644 index 0000000..9992ed7 --- /dev/null +++ b/layouts/blog/list.html @@ -0,0 +1,22 @@ +{{ define "main" }} +

{{ .Title }}

+
+ {{ range .Paginator.Pages.ByPublishDate.Reverse }} +
+

{{ .Title }}

+ {{ partial "post-header.html" .}} + {{ if .Params.Subtitle }}

{{ .Params.Subtitle }}

{{ end }} +

+ {{ .Summary }}{{ if .Truncated }}...{{ end }} +

+
+ {{ end }} +
+{{ template "_internal/pagination.html" . }} +{{ end }} +{{ define "sidebar" }} + + + + +{{ end }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..fad2158 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,29 @@ +{{ define "main" }} +
+
+
+
+ {{ .Content }} +
+
+

Latest Blog Posts

+ +
+
+

Social

+ {{- partial "social.html" . -}} +
+
+

Check Out These Sites

+ More Links +
+
+

What I'm Up To

+ See More +
+
+{{ end }} diff --git a/layouts/links/list.html b/layouts/links/list.html index 183b6ec..b0d7882 100644 --- a/layouts/links/list.html +++ b/layouts/links/list.html @@ -13,3 +13,5 @@ {{ end }} +{{ define "sidebar" }} +{{ end }} diff --git a/layouts/pages/desertrock.html b/layouts/pages/desertrock.html new file mode 100644 index 0000000..6144a25 --- /dev/null +++ b/layouts/pages/desertrock.html @@ -0,0 +1,8 @@ + + + + + +{{ .Content }} + + diff --git a/layouts/partials/avatar.html b/layouts/partials/avatar.html index bfc2183..e17da76 100644 --- a/layouts/partials/avatar.html +++ b/layouts/partials/avatar.html @@ -9,5 +9,5 @@ {{ end }} {{ end }} - + diff --git a/layouts/partials/blog-sidebar.html b/layouts/partials/blog-sidebar.html new file mode 100644 index 0000000..8795ec1 --- /dev/null +++ b/layouts/partials/blog-sidebar.html @@ -0,0 +1,4 @@ +
+

See Posts From

+ {{- partial "posts-by-year.html" . -}} +
diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..09b5ed8 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,4 @@ +
+

{{ .Site.Title }}

 + {{- partial "avatar.html" . -}} +
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 0bcbedf..746440f 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -1,38 +1,26 @@ -
- - - - - {{ partial "avatar.html" . }} -

- I'm yequari. I like programming, tabletop games, and the Transformers. -

+
+
+ + + + + {{ partial "avatar.html" . }} + + + +
+
+ + {{ partial "statuscafe.html" .}} +
+
+ + {{ partial "social.html" .}} +
+ + + + + +
-
- - {{ partial "statuscafe.html" .}} -
-
- - -
- - - - - - diff --git a/layouts/partials/social.html b/layouts/partials/social.html new file mode 100644 index 0000000..2ec2048 --- /dev/null +++ b/layouts/partials/social.html @@ -0,0 +1,15 @@ + diff --git a/static/css/custom.css b/static/css/custom.css index 280651a..0740436 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -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; } diff --git a/themes/dreamcast/layouts/_default/baseof.html b/themes/dreamcast/layouts/_default/baseof.html index 1532889..29fc71b 100644 --- a/themes/dreamcast/layouts/_default/baseof.html +++ b/themes/dreamcast/layouts/_default/baseof.html @@ -10,15 +10,14 @@ {{- partial "nav.html" . -}}
-
- {{- partial "sidebar.html" . -}} -
+ {{- block "sidebar" . }} + {{ end }}
{{- block "main" . }}{{- end }}
-
- {{- partial "footer.html" . -}} -
+ + +
diff --git a/themes/dreamcast/layouts/_default/list.html b/themes/dreamcast/layouts/_default/list.html index 982600c..6799204 100644 --- a/themes/dreamcast/layouts/_default/list.html +++ b/themes/dreamcast/layouts/_default/list.html @@ -12,3 +12,5 @@ {{ end }}
{{ end }} +{{ define "sidebar" }} +{{ end }} diff --git a/themes/dreamcast/layouts/_default/single.html b/themes/dreamcast/layouts/_default/single.html index 9983b08..3418cd3 100644 --- a/themes/dreamcast/layouts/_default/single.html +++ b/themes/dreamcast/layouts/_default/single.html @@ -1,3 +1,5 @@ {{ define "main" }} {{ .Content }} {{ end }} +{{ define "sidebar" }} +{{ end }} diff --git a/themes/dreamcast/layouts/blog/list.html b/themes/dreamcast/layouts/blog/list.html index 006dbc4..6c5a5c5 100644 --- a/themes/dreamcast/layouts/blog/list.html +++ b/themes/dreamcast/layouts/blog/list.html @@ -13,6 +13,4 @@ {{ end }} {{ template "_internal/pagination.html" . }} -

See Posts From

-{{- partial "posts-by-year.html" . -}} {{ end }} diff --git a/themes/dreamcast/layouts/blog/single.html b/themes/dreamcast/layouts/blog/single.html index fa996f5..1fb19a6 100644 --- a/themes/dreamcast/layouts/blog/single.html +++ b/themes/dreamcast/layouts/blog/single.html @@ -13,3 +13,5 @@ {{ end }} +{{ define "sidebar" }} +{{ end }} diff --git a/themes/dreamcast/layouts/index.html b/themes/dreamcast/layouts/index.html index 50546c0..51bb901 100644 --- a/themes/dreamcast/layouts/index.html +++ b/themes/dreamcast/layouts/index.html @@ -7,3 +7,6 @@ {{ end }} {{ end }} +{{ define "sidebar" }} + {{- partial "sidebar.html" . -}} +{{ end }} diff --git a/themes/dreamcast/layouts/partials/posts-by-year.html b/themes/dreamcast/layouts/partials/posts-by-year.html index 28cb5e5..4a4544f 100644 --- a/themes/dreamcast/layouts/partials/posts-by-year.html +++ b/themes/dreamcast/layouts/partials/posts-by-year.html @@ -1,4 +1,6 @@ + diff --git a/themes/dreamcast/static/css/main.css b/themes/dreamcast/static/css/main.css index 6f86e61..ef7f24f 100644 --- a/themes/dreamcast/static/css/main.css +++ b/themes/dreamcast/static/css/main.css @@ -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; - } }