Glitch theme

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
This commit is contained in:
Marcus Noble 2022-05-02 14:29:27 +01:00
parent f99cd77e20
commit 186bdde093
Signed by: AverageMarcus
GPG Key ID: B8F2DB8A7AEBAF78
16 changed files with 436 additions and 406 deletions

6
app.js
View File

@ -55,6 +55,12 @@ app.get("/healthz", function(req, res) {
var md = markdown({html: true}); var md = markdown({html: true});
md.parser.use(emoji); md.parser.use(emoji);
const proxy = (tokens, idx, options, env, self) => self.renderToken(tokens, idx, options);
const defaultTableOpenRenderer = md.parser.renderer.rules.table_open || proxy;
md.parser.renderer.rules.table_open = function(tokens, idx, options, env, self) {
tokens[idx].attrJoin("role", "grid");
return defaultTableOpenRenderer(tokens, idx, options, env, self)
};
Handlebars.registerHelper('markdown', function(text) { Handlebars.registerHelper('markdown', function(text) {
if(!text) return; if(!text) return;

98
src/css/_glitch.scss Normal file
View File

@ -0,0 +1,98 @@
.glitch-image {
animation: shift 3s ease-in-out infinite alternate;
}
.glitch, a:hover {
position: relative;
text-shadow: 0.05em 0 0 var(--primary-hover), -0.03em -0.04em 0 var(--primary), 0.025em 0.04em 0 var(--primary-inverse);
animation: glitch 2s ease alternate infinite, shift 2s ease alternate infinite;
&::before, &::after {
position: absolute;
top: 0;
left: 0;
}
&::before {
animation: glitch 1s infinite;
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
transform: translate(-0.04em, -0.03em);
opacity: 0.75;
}
&::after {
animation: glitch .5s infinite;
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
transform: translate(0.04em, 0.03em);
opacity: 0.75;
}
}
@keyframes glitch {
0% {
text-shadow: 0.05em 0 0 var(--primary-hover), -0.03em -0.04em 0 var(--primary),
0.025em 0.04em 0 var(--primary-inverse);
}
15% {
text-shadow: 0.05em 0 0 var(--primary-hover), -0.03em -0.04em 0 var(--primary),
0.025em 0.04em 0 var(--primary-inverse);
}
16% {
text-shadow: -0.05em -0.025em 0 var(--primary-hover), 0.025em 0.035em 0 var(--primary),
-0.05em -0.05em 0 var(--primary-inverse);
}
49% {
text-shadow: -0.05em -0.025em 0 var(--primary-hover), 0.025em 0.035em 0 var(--primary),
-0.05em -0.05em 0 var(--primary-inverse);
}
50% {
text-shadow: 0.05em 0.035em 0 var(--primary-hover), 0.03em 0 0 var(--primary),
0 -0.04em 0 var(--primary-inverse);
}
99% {
text-shadow: 0.05em 0.035em 0 var(--primary-hover), 0.03em 0 0 var(--primary),
0 -0.04em 0 var(--primary-inverse);
}
100% {
text-shadow: -0.05em 0 0 var(--primary-hover), -0.025em -0.04em 0 var(--primary),
-0.04em -0.025em 0 var(--primary-inverse);
}
}
@keyframes shift {
0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
transform: skewX(0deg);
filter: invert(0%);
fill: var(--text-color);
}
41% {
transform: skewX(50deg);
fill: var(--primary);
}
42% {
transform: skewX(-20deg);
filter: invert(40%);
}
59% {
transform: skewX(50deg);
fill: var(--primary-hover);
}
60% {
transform: skewX(-40deg);
filter: invert(10%);
}
63% {
transform: skewX(10deg);
filter: invert(30%);
fill: var(--primary-hover);
}
70% {
transform: skewX(-30deg);
fill: var(--primary);
}
71% {
transform: skewX(15deg);
filter: invert(100%);
}
}

View File

@ -1,64 +0,0 @@
@mixin textShadowToCropUnderline($color) {
text-shadow:
.01em 0 $color,
-.01em 0 $color,
0 .01em $color,
0 -.01em $color,
.06em 0 $color,
-.06em 0 $color,
.09em 0 $color,
-.09em 0 $color,
.12em 0 $color,
-.12em 0 $color,
.15em 0 $color,
-.15em 0 $color;
}
@mixin linkUnderlines($background, $color, $hoverColor) {
color: $color;
text-decoration: none;
@include textShadowToCropUnderline($background);
background-image:
linear-gradient($background, $background),
linear-gradient($background, $background),
linear-gradient($color, $color);
background-size:
.05em 2px,
.05em 2px,
2px 2px;
background-repeat:
no-repeat,
no-repeat,
repeat-x;
background-position: 0% 1.02em, 100% 1.02em, 0% 1.04em;
&::selection {
@include textShadowToCropUnderline($selectionColor);
background-color: $selectionColor;
}
&::-moz-selection {
@include textShadowToCropUnderline($selectionColor);
background-color: $selectionColor;
}
&:before,
&:after,
*,
*:before,
*:after {
text-shadow: none;
}
&:visited {
color: $color;
}
&:hover {
color: $hoverColor;
background-image:
linear-gradient($background, $background),
linear-gradient($background, $background),
linear-gradient($hoverColor, $hoverColor);
}
}

7
src/css/_utils.scss Normal file
View File

@ -0,0 +1,7 @@
.center {
text-align: center;
}
.hide {
display: none;
}

View File

@ -1,260 +0,0 @@
$link-color: #AD4E4E;
$selectionColor: #D2D2D2;
$background-color: #FFF;
@import "_underlines.scss";
body {
margin: 0;
padding: 0;
overflow: none;
}
* {
&::selection {
background-color: $selectionColor;
}
&::-moz-selection {
background-color: $selectionColor;
}
}
a {
color: $link-color;
transition: color ease .3s;
&:hover {
color: $link-color;
text-decoration: none;
}
&+img {
border-bottom: none;
}
}
.center {
text-align: center;
}
header {
font-family: 'Lucida Grande', Arial, sans-serif;
font-size: .8em;
h1 {
font-weight: normal;
margin: .8em 0 .2em 8px;
img {
height: 2em;
border-radius: 8px;
}
a {
color: #000 !important;
text-decoration: none;
margin: 0;
}
.social {
text-decoration: none;
svg {
height: 20px;
}
&:hover svg path,
&:hover svg rect {
fill: $link-color !important;
}
}
}
hr {
margin: 0 auto;
width: 95%;
height: 1px;
background-color: rgba(0, 0, 0, .2);
}
}
pre code {
overflow-x: auto;
overflow-y: auto;
padding-bottom: 15px;
font-size: 0.85em;
}
p > code {
background-color: #3f3f3f;
color: #dcdcdc;
font-size: 0.9em;
padding: 2px 5px;
}
blockquote {
border-left: 8px solid rgba(121, 130, 139, 0.52);
margin-left: 0;
padding-left: 1em;
color: #79828B;
}
figure {
max-width: 100%;
margin: 0 auto;
img {
max-width: 100%;
border: 1px solid rgba(100,100,100,.2);
}
p {
margin: 0;
}
}
iframe {
max-width: 100%;
border: 0;
overflow: scroll;
}
hr {
border: 0;
height: 2px;
background: rgba(121, 130, 139, 0.52);
width: 80%;
}
details {
font-size: 0.8em;
border: 1px dashed #79828B;
padding: 2px 8px;
summary {
cursor: pointer;
}
p {
margin: 0;
}
}
.emoji {
display: inline !important;
margin: 0 !important;
}
.container {
max-width: 1020px;
margin: 0 auto;
}
.post-list {
list-style: none;
padding: 0;
}
.post-preview {
opacity: 0.6;
}
.pagination {
text-align: center;
}
.pagination a {
font-size: 1.4mem;
color: #000;
}
.post {
font-family: 'Lucida Grande', Arial, sans-serif;
font-size: 18px;
line-height: 28px;
padding: 2px 8px;
a {
@include linkUnderlines($background-color, #4a4a4a, $link-color);
}
.post-title {
color: #000;
font-size: 32px;
line-height: 34px;
margin: 21px 0 0;
font-weight: 700;
a {
color: #000;
text-decoration: none;
margin: 0;
}
}
.full-post-link {
font-style: italic;
font-size: 0.9em;
}
.post-meta {
color: #3d4145;
font-size: 15px;
line-height: 17px;
margin: 0 0 12px 0;
}
}
footer {
margin: 20px 0 10px;
color: #79828B;
text-align: center;
}
.social-icons {
a {
text-decoration: none !important;
background: none !important;
text-shadow: none !important;
}
a svg {
height: 40px;
}
}
.share {
background: transparent;
border: none;
display: none;
cursor: pointer;
&.show {
display: initial;
}
&:hover, &:active {
fill: $link-color;
color: $link-color;
}
svg {
height: 20px;
vertical-align: bottom;
}
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
&, tr, td, th, tbody, thead {
margin: 0;
padding: 0;
}
th, td {
padding: 5px;
border: 1px solid #3d4145;
}
}

228
src/css/style.scss Normal file
View File

@ -0,0 +1,228 @@
/* Light Theme */
[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: #fd7e0b;
--primary-hover: #326ce5;
--primary-focus: #fefefe;
--primary-inverse: #d6efff;
--color: #131b23;
--text-color: #131b23;
}
/* Dark Theme */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary: #fd7e0b;
--primary-hover: #326ce5;
--primary-focus: #131b23;
--primary-inverse: #d6efff;
--color: #fefefe;
--text-color: #fefefe;
}
}
[data-theme="dark"] {
--primary: #fd7e0b;
--primary-hover: #326ce5;
--primary-focus: #131b23;
--primary-inverse: #d6efff;
--color: #fefefe;
--text-color: #fefefe;
}
:root:not([data-theme="dark"]),
:root:not([data-theme="light"]){
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--blockquote-border-color: var(--primary-hover);
--font-family: 'Orkney', system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
}
h2 {
margin-bottom: 10px;
}
// Links
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: var(--text-color)
}
a:hover {
color: var(--primary);
}
@media only screen and (prefers-color-scheme: light) {
a.social {
svg {
opacity: 0.5;
}
}
}
[data-theme="light"] {
a.social {
svg {
opacity: 0.5;
}
}
}
a.social {
svg {
margin: 4px;
fill: var(--text-color);
}
&:hover {
text-decoration: none;
svg {
animation: shift 1.5s ease-in-out infinite;
}
}
}
// Layout
header {
display: flex;
flex-direction: column;
align-items: center;
padding: 2em 0 !important;
& + main {
padding-top: 0;
}
}
footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 1em 0 !important;
}
article {
margin-top: 0;
padding-top: 1.5em;
blockquote, dl, figure, form, ol, p, pre, table, ul {
font-size: calc(var(--font-size) + 2px) !important;
}
a {
display: inline-block;
}
}
figure p,
blockquote p,
blockquote ul {
margin: 0;
}
figure a:hover {
text-shadow: initial;
animation: none;
}
details {
font-size: 0.8em;
border: 1px dashed #79828B;
padding: 2px 8px;
summary {
cursor: pointer;
&::after {
float: unset;
display: inline-block;
height: 10px;
}
}
p {
margin: 0;
}
}
code, kbd, pre {
color: #dcdcdc;
background-color: #3f3f3f;
}
hr {
margin: 1em auto;
padding: 0;
border: 0;
border-top: solid 3px #57688d;
text-align: center;
width: 60%;
position: relative;
&::after {
content: "";
display: inline-block;
position: absolute;
top: -0.7em;
padding: 0 5px;
font-size: 2rem;
filter: grayscale(70%);
transform: translateX(-50%);
}
&::before {
content: ' ';
background-color: var(--background-color);
display: inline-block;
position: absolute;
top: -1.2em;
padding: 0;
width: 50px;
height: 50px;
border-radius: 23px;
transform: translateX(-50%);
article & {
background-color: var(--card-background-color) !important;
}
}
}
section:last-of-type hr {
display: none;
}
// Custom Classes
.site-logo {
display: flex;
flex-direction: column;
align-items: center;
}
.post-meta {
font-size: 0.7em;
font-family: 'OrkneyLight';
vertical-align: text-bottom;
margin-bottom: 0.5em;
&::before {
content: "📆 ";
filter: grayscale(70%);
}
}
.pagination {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
@import "_utils.scss";
@import "_glitch.scss";

View File

@ -6,6 +6,17 @@ tags: Meetup
summary: "A look at the various alternatives to Meetup.com after recent online backlash to their proposed new pricing model." summary: "A look at the various alternatives to Meetup.com after recent online backlash to their proposed new pricing model."
--- ---
<details>
<summary>Changelog</summary>
2019-10-21: Migrated from a [Notion page](https://www.notion.so/jsoxford/Meetup-Alternatives-36d73649d34f4bba9e2065f1fa8cd03f) to my blog.
2019-10-21: Added Eventsyay, Mixily and Helm.
2020-09-30: Added section covering TechTalks.io.
</details>
# Intro # Intro
Meetup.com recently has suffered from some [backlash](https://twitter.com/securestep9/status/1183798804371386369) to some [new pricing models](https://www.meetup.com/lp/payment-test-20191016) it proposed. They have since [backpedaled](https://www.meetup.com/lp/paymentchanges?mpId=9038) but for many the damage has already been done and the trust has been damaged. This comes two years after Meetup [made some changes](https://lab.io/articles/2017/11/08/dear-meetup/) that made it significantly worse for organisers to manage their communities as well as being taken over by WeWork who are currently facing financial difficulties - something many have suggested as the reason for exploring new profitability strategies with Meetup.com. Following Meetup rescinding their proposed payment model I have since received an email informing me that my organiser subscription will be increasing from $14.99/month to $16.49/month. Meetup.com recently has suffered from some [backlash](https://twitter.com/securestep9/status/1183798804371386369) to some [new pricing models](https://www.meetup.com/lp/payment-test-20191016) it proposed. They have since [backpedaled](https://www.meetup.com/lp/paymentchanges?mpId=9038) but for many the damage has already been done and the trust has been damaged. This comes two years after Meetup [made some changes](https://lab.io/articles/2017/11/08/dear-meetup/) that made it significantly worse for organisers to manage their communities as well as being taken over by WeWork who are currently facing financial difficulties - something many have suggested as the reason for exploring new profitability strategies with Meetup.com. Following Meetup rescinding their proposed payment model I have since received an email informing me that my organiser subscription will be increasing from $14.99/month to $16.49/month.
@ -66,7 +77,7 @@ Would be really nice for one-off / less frequent events (conference, workshop, e
### Pros ### Pros
- Open source ([https://github.com/GetTogetherComm/GetTogether](https://github.com/GetTogetherComm/GetTogether)) - [Open source](https://github.com/GetTogetherComm/GetTogether)
- Community built - Community built
- Easy signup + social logins - Easy signup + social logins
- UI isn't the most intuitive - UI isn't the most intuitive
@ -241,7 +252,7 @@ Great option for those that like stats and keeping track of how their event is d
### Pros ### Pros
- Self hosted - Self hosted
- Open source ([https://github.com/Attendize/Attendize](https://github.com/Attendize/Attendize)) - [Open source](https://github.com/Attendize/Attendize)
- Rich event description editing - Rich event description editing
- Message attendees - Message attendees
- Limited styling of tickets - Limited styling of tickets
@ -278,7 +289,7 @@ Uses a Attribution Assurance Licence so event pages must display "Powered by Att
### Pros ### Pros
- Self hosted - Self hosted
- Open source ([https://github.com/alfio-event/alf.io](https://github.com/alfio-event/alf.io)) - [Open source](https://github.com/alfio-event/alf.io)
- Checkin support - Checkin support
- Google analytics support - Google analytics support
</div> </div>
@ -581,7 +592,4 @@ I'm really liking TechTalks and think it has a lot of potential. It's set up by
I don't see any clear winner that will suit everyone as a replacement to Meetup but I do think there is something in this list for everyone. There's a lot of strong contenders here (especially if you already have a website where you post events) and even more with future potential. The major thing all these options lack is the discoverability that Meetup provides but I feel this is likely to change as people more to alternatives. I don't see any clear winner that will suit everyone as a replacement to Meetup but I do think there is something in this list for everyone. There's a lot of strong contenders here (especially if you already have a website where you post events) and even more with future potential. The major thing all these options lack is the discoverability that Meetup provides but I feel this is likely to change as people more to alternatives.
# _Changelog_
* 2019-10-21 - Migrated from a [Notion page](https://www.notion.so/jsoxford/Meetup-Alternatives-36d73649d34f4bba9e2065f1fa8cd03f) to my blog. Added Eventsyay, Mixily and Helm.
* 2020-09-30 - Added section covering TechTalks.io.

View File

@ -5,8 +5,13 @@ date: 2020-05-27
tags: golang tags: golang
summary: "With Go being a relatively modern programming language, first released in 2009, it is not unsurprising that it has great support for Unicode strings. What is surprising is just how far this support goes." summary: "With Go being a relatively modern programming language, first released in 2009, it is not unsurprising that it has great support for Unicode strings. What is surprising is just how far this support goes."
--- ---
_Updated 2020-05-28: Added big list of naughty strings test_
<details>
<summary>Changelog</summary>
2020-05-28: Added big list of naughty strings test
</details>
With Go being a relatively modern programming language, first released in 2009, it is not unsurprising that it has great support for Unicode strings. What is surprising is just how far this support goes. With Go being a relatively modern programming language, first released in 2009, it is not unsurprising that it has great support for Unicode strings. What is surprising is just how far this support goes.

View File

@ -9,31 +9,28 @@
<div class="container"> <div class="container">
<div class="home"> <div class="home">
<ul class="post-list"> {{#each pagination.files }}
{{#each pagination.files }} <section class="post">
<li> <h2 class="post-title">
<article class="post"> <a class="post-link" href="/{{ this.path }}/">{{ this.title }}</a>
<h2 class="post-title"> </h2>
<a class="post-link" href="/{{ this.path }}/">{{ this.title }}</a>
</h2>
<div class="post-meta feather_type"> <div class="post-meta feather_type">
<span> <span>
<time datetime="{{moment this.date 'YYYY-MM-DD' }}"> <time datetime="{{moment this.date 'YYYY-MM-DD' }}">
{{moment this.date 'dddd, Do MMMM YYYY' }} {{moment this.date 'dddd, Do MMMM YYYY' }}
</time> </time>
</span> </span>
</div> </div>
<div class="post-preview"> <div>
{{{ markdown this.summary }}} {{{ markdown this.summary }}}
<a class="full-post-link" href="/{{ this.path }}/">Continue reading...</a> <a href="/{{ this.path }}/"><small>Continue reading...</small></a>
</div> </div>
</article> <hr/>
</li> </section>
{{/each}} {{/each}}
</ul>
<div class="pagination"> <div class="pagination">
{{#if pagination.previous}} {{#if pagination.previous}}

View File

@ -2,14 +2,5 @@
<div> <div>
- Marcus Noble - - Marcus Noble -
</div> </div>
<div class="social-icons"> {{> sociallinks }}
<a href="https://www.github.com/AverageMarcus" class="github-icon" title="View my projects on GitHub">
<svg viewBox="0 0 16 16"><path fill="#000" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"></path></svg>
</a>
<a href="https://twitter.com/Marcus_Noble_" class="twitter-icon" title="See my tweets on Twitter">
<svg viewBox="0 0 16 16"><path fill="#000" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"></path></svg>
</a>
</div>
</footer> </footer>

View File

@ -46,7 +46,12 @@
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<link rel="icon" sizes="192x192" href="/images/favico/favicon-192.png"> <link rel="icon" sizes="192x192" href="/images/favico/favicon-192.png">
<link rel="stylesheet" href="/css/main.css?{{moment date 'YYYYMMDDHHMM'}}">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/orkney" type="text/css"/>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/lemon" type="text/css"/>
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}/feed.xml"> <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}/feed.xml">
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {

View File

@ -1,20 +1,8 @@
<header class="container"> <header>
<h1> <a href="/" class="site-logo" style="padding-left: 0">
<a href="/"><img src="/images/favico/favicon-96.png" />{{site.title}}</a> <img src="https://marcusnoble.co.uk/images/favico/favicon-96.png" style="height: 96px" class="glitch-image" />
<h1 style="margin-bottom: 0;" class="glitch">{{site.title}}</h1>
</a>
<a href="https://www.github.com/AverageMarcus" class="social github-icon" title="View my projects on GitHub"> {{> sociallinks }}
<svg viewBox="0 0 16 16"><path fill="#000" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"></path></svg>
</a>
<a href="https://twitter.com/Marcus_Noble_" class="social twitter-icon" title="See my tweets on Twitter">
<svg viewBox="0 0 16 16"><path fill="#000" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"></path></svg>
</a>
<a href="/feed.xml" class="social rss-icon" title="Subscribe to my posts">
<svg xmlns="http://www.w3.org/2000/svg" aria-label="RSS" role="img" viewBox="0 0 512 512">
<rect width="512" height="512" rx="15%" fill="#000"/>
<circle cx="145" cy="367" r="35" fill="#fff"/>
<path fill="none" stroke="#fff" stroke-width="60" d="M109 241c89 0 162 73 162 162M109 127c152 0 276 124 276 276"/>
</svg>
</a>
</h1>
<hr/>
</header> </header>

View File

@ -1,6 +1,6 @@
<button class="share" title="Share this post"> <a class="social share hide" title="Share this post">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59 59"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59 59" height="59px">
<path d="M47 39c-2.67 0-5.182 1.04-7.07 2.93-.525.523-.976 1.1-1.366 1.708l-17.28-10.49c.457-1.143.716-2.387.716-3.692 0-1.305-.26-2.55-.715-3.693l17.284-10.41C40.343 18.143 43.454 20 47 20c5.514 0 10-4.486 10-10S52.514 0 47 0 37 4.486 37 10c0 1.256.243 2.454.667 3.562L20.36 23.985c-1.787-2.724-4.865-4.53-8.36-4.53-5.514 0-10 4.487-10 10s4.486 10 10 10c3.495 0 6.572-1.804 8.36-4.528L37.664 45.43C37.234 46.556 37 47.76 37 49c0 2.67 1.04 5.183 2.93 7.07C41.817 57.96 44.33 59 47 59s5.182-1.04 7.07-2.93C55.96 54.184 57 51.67 57 49s-1.04-5.183-2.93-7.07C52.183 40.04 49.67 39 47 39z"/> <path d="M47 39c-2.67 0-5.182 1.04-7.07 2.93-.525.523-.976 1.1-1.366 1.708l-17.28-10.49c.457-1.143.716-2.387.716-3.692 0-1.305-.26-2.55-.715-3.693l17.284-10.41C40.343 18.143 43.454 20 47 20c5.514 0 10-4.486 10-10S52.514 0 47 0 37 4.486 37 10c0 1.256.243 2.454.667 3.562L20.36 23.985c-1.787-2.724-4.865-4.53-8.36-4.53-5.514 0-10 4.487-10 10s4.486 10 10 10c3.495 0 6.572-1.804 8.36-4.528L37.664 45.43C37.234 46.556 37 47.76 37 49c0 2.67 1.04 5.183 2.93 7.07C41.817 57.96 44.33 59 47 59s5.182-1.04 7.07-2.93C55.96 54.184 57 51.67 57 49s-1.04-5.183-2.93-7.07C52.183 40.04 49.67 39 47 39z"/>
</svg> </svg>
{{ shareText }} {{ shareText }}
</button> </a>

View File

@ -0,0 +1,33 @@
<div>
<a href="https://www.github.com/AverageMarcus" class="social github-icon" title="View my projects on GitHub">
<svg viewBox="0 0 16 16" height="32"><path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"></path></svg>
</a>
<a href="https://twitter.com/Marcus_Noble_" class="social twitter-icon" title="See my tweets on Twitter">
<svg viewBox="0 0 16 16" height="32"><path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"></path></svg>
</a>
<a href="https://mastodon.social/@AverageMarcus" class="social twitter-icon" title="See my toots on Mastodon">
<svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="80 80 360 360">
<path d="m409 290c-5 24-43 50-85 56-86 11-137-6-137-6 3 13-4 54 70 52 31 0 58-7 58-7l2 27c-51 24-107 15-140 6-67-17-79-90-81-162v-59c0-74 49-96 49-96 50-24 180-22 222 0 0 0 49 22 49 96 0 0 1 55-7 93"></path>
<path d="m358 202v91h-35v-88c0-18-8-27-23-27-18 0-27 11-27 33v47h-34v-47c0-22-9-33-27-33-15 0-23 9-23 27v88h-35v-91c0-18 5-60 52-60 39 0 50 37 50 37s10-37 50-37c45 0 52 42 52 60" fill="#3088d4"></path>
</svg>
</a>
<a href="https://www.linkedin.com/in/marcusnoble/" class="social twitter-icon" title="Connect with me on Linkedin">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="32">
<rect width="512" height="512" rx="15%" />
<circle cx="142" cy="138" r="37" fill="#0077b5" />
<path stroke="#0077b5" stroke-width="66" d="M244 194v198M142 194v198"/>
<path fill="#0077b5" d="M276 282c0-20 13-40 36-40 24 0 33 18 33 45v105h66V279c0-61-32-89-76-89-34 0-51 19-59 32"/>
</svg>
</a>
<a href="/feed.xml" class="social rss-icon" title="Subscribe to my posts">
<svg xmlns="http://www.w3.org/2000/svg" aria-label="RSS" role="img" viewBox="0 0 512 512" height="32">
<rect width="512" height="512" rx="15%"/>
<circle cx="145" cy="367" r="35" fill="#fd7e0b"/>
<path fill="none" stroke="#fd7e0b" stroke-width="60" d="M109 241c89 0 162 73 162 162M109 127c152 0 276 124 276 276"/>
</svg>
</a>
</div>

View File

@ -1 +1,6 @@
<div class="tweet" tweetID="{{id}}"></div> <figure class="center" markdown="1">
[![](https://tweet.cluster.fun/{{id}})](https://twitter.com/user/status/{{id}})
<figcaption>{{caption}}</figcaption>
</figure>

View File

@ -35,29 +35,11 @@
<link rel="stylesheet" href="/css/zenburn.css" async defer> <link rel="stylesheet" href="/css/zenburn.css" async defer>
<script type="text/javascript" src="/js/highlight.pack.js"></script> <script type="text/javascript" src="/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script> <script>hljs.initHighlightingOnLoad();</script>
<script id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
<script>
var tweets = document.querySelectorAll(".tweet");
for(var i=0; i<tweets.length; i++) {
var tweet = tweets[i];
var id = tweet.getAttribute("tweetID");
twttr.widgets.createTweet(
id, tweet,
{
conversation : 'none',
cards: 'visible',
linkColor: '#cc0000',
theme: 'light',
align: 'center'
});
}
</script>
<script> <script>
if (navigator.share) { if (navigator.share) {
[].slice.call(document.querySelectorAll('.share')).forEach(function(shareButton) { [].slice.call(document.querySelectorAll('.share')).forEach(function(shareButton) {
shareButton.classList.add('show'); shareButton.classList.remove('hide');
shareButton.addEventListener('click', function(event) { shareButton.addEventListener('click', function(event) {
event.preventDefault(); event.preventDefault();
navigator.share({ navigator.share({
@ -69,6 +51,7 @@
} }
[...document.querySelectorAll('figure img')].forEach(function(img) { [...document.querySelectorAll('figure img')].forEach(function(img) {
img.style.cursor = "pointer";
img.addEventListener('click', function() { img.addEventListener('click', function() {
window.open(img.getAttribute("src"), "_blank"); window.open(img.getAttribute("src"), "_blank");
}); });