mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-17 16:05:33 -04:00
syntax highlighting!
This commit is contained in:
@@ -8,6 +8,9 @@ disableFastRender = true
|
||||
disableHugoGeneratorInject = true # don't worry, inserted manually :)
|
||||
disableKinds = ["taxonomy", "taxonomyTerm"]
|
||||
|
||||
pygmentsUseClasses = true
|
||||
pygmentsCodeFences = true
|
||||
|
||||
enableGitInfo = true
|
||||
|
||||
[taxonomies]
|
||||
|
||||
@@ -11,7 +11,7 @@ tags:
|
||||
draft: false
|
||||
---
|
||||
|
||||
If you examine [my homepage](https://jarv.is/) long enough, you might notice the 👋 hand emoji at the top subtly waving at you. This was easily accomplished using a few lines of CSS with a feature called [`@keyframes`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) -- no bulky GIFs involved, and no messy JS or jQuery overkill required.
|
||||
If you examine [my homepage](https://jarv.is/) long enough, you might notice the 👋 hand emoji at the top subtly waving at you. This was easily accomplished using a few lines of CSS with a feature called [`@keyframes`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) -- no awkward GIFs involved, and no messy JS or jQuery overkill required.
|
||||
|
||||
Below are the code snippets you can grab and customize to make your own
|
||||
["waving hand" 👋](https://emojipedia.org/waving-hand-sign/) emojis ***actually wave***, and a [CodePen playground](https://codepen.io/jakejarvis/pen/pBZWZw) for live testing.
|
||||
@@ -20,11 +20,11 @@ Below are the code snippets you can grab and customize to make your own
|
||||
|
||||
### CSS:
|
||||
|
||||
```
|
||||
```css
|
||||
span#wave {
|
||||
animation-name: wave-animation; /* refers to the name of your @keyframes element below */
|
||||
animation-duration: 2.5s; /* change to speed up or slow down */
|
||||
animation-iteration-count: infinite; /* never stop waving! */
|
||||
animation-iteration-count: infinite; /* never stop waving! :) */
|
||||
transform-origin: 70% 70%;
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -42,10 +42,10 @@ span#wave {
|
||||
|
||||
### HTML:
|
||||
|
||||
```
|
||||
```html
|
||||
<span id="wave">👋</span>
|
||||
```
|
||||
|
||||
That's it! Different hand variations and skin tones can be [found on 📕Emojipedia](https://emojipedia.org/search/?q=waving+hand).
|
||||
That's it! All skin tones and different hands can be [found on 📕Emojipedia](https://emojipedia.org/search/?q=waving+hand).
|
||||
|
||||
👋🏼 Toodles!
|
||||
@@ -101,7 +101,7 @@ I removed the company's name because an important part of responsible *disclosur
|
||||
|
||||
The `poc-d4ca9e8ceb.html` proof-of-concept file contained this single, hidden line:
|
||||
|
||||
```
|
||||
```html
|
||||
<!-- subdomain takeover POC by @jakejarvis on Bugcrowd -->
|
||||
```
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ If you run your own server, these can be added by way of your Apache or nginx co
|
||||
|
||||
The following script can be added as a Worker and customized to your needs. Some can be extremely picky with syntax, so be sure to [read the documentation](https://www.netsparker.com/whitepaper-http-security-headers/) carefully. You can fiddle with it in [the playground](https://cloudflareworkers.com/), too. Simply modify the current headers to your needs, or add new ones to the `newHeaders` or `removeHeaders` arrays.
|
||||
|
||||
```
|
||||
```js
|
||||
let newHeaders = {
|
||||
"Content-Security-Policy": "default-src 'self'; upgrade-insecure-requests",
|
||||
"Strict-Transport-Security" : "max-age=1000",
|
||||
|
||||
@@ -7,11 +7,12 @@
|
||||
<div class="meta">
|
||||
by <span itemprop="author" itemscope itemtype="http://schema.org/Person" class="p-author"><a itemprop="url" rel="me author" href="{{ .Site.BaseURL }}" title="Jake Jarvis" class="h-card"><span itemprop="name" class="p-name">Jake Jarvis</span></a></span> ·
|
||||
<a href="{{ .Permalink }}"><time itemprop="datePublished" content="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="dt-published">{{ .Date.Format "January 2, 2006" }}</time></a> ·
|
||||
<!-- {{ if lt 1 .WordCount }}{{ .WordCount }} words{{ else }}{{ .WordCount }} word{{ end }} · -->
|
||||
<!-- {{ if lt 1 .WordCount }} words{{ else }}{{ .WordCount }} word{{ end }} · -->
|
||||
{{ .ReadingTime }} minute read
|
||||
<div class="tags">
|
||||
{{ with .Params.tags }}{{ if ge (len .) 1 }}
|
||||
{{ range . }}<span class="tag p-category"><!--<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">-->{{ . }}<!--</a>--></span> {{ end }}
|
||||
{{ range . }}<span class="tag p-category"><!--<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">-->{{ . }}<!--</a>--></span>
|
||||
{{ end }}
|
||||
{{ end }}{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -485,7 +485,7 @@ body#home footer div#info a#source {
|
||||
}
|
||||
|
||||
|
||||
/* Fancy Waving Hand Emoji (TM) */
|
||||
/* Fancy Waving Hand Emoji (TM) – https://jarv.is/notes/css-waving-hand-emoji/ */
|
||||
|
||||
@keyframes wave {
|
||||
0% { transform: rotate( 0.0deg); }
|
||||
@@ -836,13 +836,77 @@ body#notes main#archive section.year div.title {
|
||||
body#notes main#single article div.meta {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body#notes div#content code {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Syntax Highlighting – modified from Monokai Light https://pypi.org/project/pygments-style-monokailight/ */
|
||||
|
||||
/* Error */ .highlight .err { color: #960050; }
|
||||
/* Keyword */ .highlight .k { color: #03748a }
|
||||
/* KeywordConstant */ .highlight .kc { color: #03748a }
|
||||
/* KeywordDeclaration */ .highlight .kd { color: #03748a }
|
||||
/* KeywordNamespace */ .highlight .kn { color: #e8003d }
|
||||
/* KeywordPseudo */ .highlight .kp { color: #03748a }
|
||||
/* KeywordReserved */ .highlight .kr { color: #03748a }
|
||||
/* KeywordType */ .highlight .kt { color: #03748a }
|
||||
/* Name */ .highlight .n { color: #111111 }
|
||||
/* NameAttribute */ .highlight .na { color: #489c44 }
|
||||
/* NameBuiltin */ .highlight .nb { color: #111111 }
|
||||
/* NameBuiltinPseudo */ .highlight .bp { color: #111111 }
|
||||
/* NameClass */ .highlight .nc { color: #489c44 }
|
||||
/* NameConstant */ .highlight .no { color: #03748a }
|
||||
/* NameDecorator */ .highlight .nd { color: #489c44 }
|
||||
/* NameEntity */ .highlight .ni { color: #111111 }
|
||||
/* NameException */ .highlight .ne { color: #489c44 }
|
||||
/* NameFunction */ .highlight .nf { color: #489c44 }
|
||||
/* NameFunctionMagic */ .highlight .fm { color: #111111 }
|
||||
/* NameLabel */ .highlight .nl { color: #111111 }
|
||||
/* NameNamespace */ .highlight .nn { color: #111111 }
|
||||
/* NameOther */ .highlight .nx { color: #489c44 }
|
||||
/* NameProperty */ .highlight .py { color: #111111 }
|
||||
/* NameTag */ .highlight .nt { color: #e8003d }
|
||||
/* NameVariable */ .highlight .nv { color: #111111 }
|
||||
/* NameVariableClass */ .highlight .vc { color: #111111 }
|
||||
/* NameVariableGlobal */ .highlight .vg { color: #111111 }
|
||||
/* NameVariableInstance */ .highlight .vi { color: #111111 }
|
||||
/* NameVariableMagic */ .highlight .vm { color: #111111 }
|
||||
/* Literal */ .highlight .l { color: #8145ec }
|
||||
/* LiteralDate */ .highlight .ld { color: #c17005 }
|
||||
/* LiteralString */ .highlight .s { color: #c17005 }
|
||||
/* LiteralStringAffix */ .highlight .sa { color: #c17005 }
|
||||
/* LiteralStringBacktick */ .highlight .sb { color: #c17005 }
|
||||
/* LiteralStringChar */ .highlight .sc { color: #c17005 }
|
||||
/* LiteralStringDelimiter */ .highlight .dl { color: #c17005 }
|
||||
/* LiteralStringDoc */ .highlight .sd { color: #c17005 }
|
||||
/* LiteralStringDouble */ .highlight .s2 { color: #c17005 }
|
||||
/* LiteralStringEscape */ .highlight .se { color: #8045ff }
|
||||
/* LiteralStringHeredoc */ .highlight .sh { color: #c17005 }
|
||||
/* LiteralStringInterpol */ .highlight .si { color: #c17005 }
|
||||
/* LiteralStringOther */ .highlight .sx { color: #c17005 }
|
||||
/* LiteralStringRegex */ .highlight .sr { color: #c17005 }
|
||||
/* LiteralStringSingle */ .highlight .s1 { color: #c17005 }
|
||||
/* LiteralStringSymbol */ .highlight .ss { color: #c17005 }
|
||||
/* LiteralNumber */ .highlight .m { color: #8145ec }
|
||||
/* LiteralNumberBin */ .highlight .mb { color: #8145ec }
|
||||
/* LiteralNumberFloat */ .highlight .mf { color: #8145ec }
|
||||
/* LiteralNumberHex */ .highlight .mh { color: #8145ec }
|
||||
/* LiteralNumberInteger */ .highlight .mi { color: #8145ec }
|
||||
/* LiteralNumberIntegerLong */ .highlight .il { color: #8145ec }
|
||||
/* LiteralNumberOct */ .highlight .mo { color: #8145ec }
|
||||
/* Operator */ .highlight .o { color: #e8003d }
|
||||
/* OperatorWord */ .highlight .ow { color: #e8003d }
|
||||
/* Punctuation */ .highlight .p { color: #111111 }
|
||||
/* Comment */ .highlight .c { color: #6b6859 }
|
||||
/* CommentHashbang */ .highlight .ch { color: #6b6859 }
|
||||
/* CommentMultiline */ .highlight .cm { color: #6b6859 }
|
||||
/* CommentSingle */ .highlight .c1 { color: #6b6859 }
|
||||
/* CommentSpecial */ .highlight .cs { color: #6b6859 }
|
||||
/* CommentPreproc */ .highlight .cp { color: #6b6859 }
|
||||
/* CommentPreprocFile */ .highlight .cpf { color: #6b6859 }
|
||||
/* GenericEmph */ .highlight .ge { font-style: italic }
|
||||
/* GenericStrong */ .highlight .gs { font-weight: bold }
|
||||
|
||||
|
||||
|
||||
/*! Error Styles */
|
||||
|
||||
@@ -862,16 +926,19 @@ body#error div#message {
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px #e0e0e0, 0 1px 2px #888;
|
||||
}
|
||||
|
||||
body#error div#message h1 {
|
||||
margin: 16px 0;
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
body#error div#message p {
|
||||
margin: 16px 0;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
body#error div#message a {
|
||||
color: #039be5;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user