jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 01:08:28 -04:00
Code Issues

codepen shortcode

Browse Source
This commit is contained in:
Jake Jarvis 2019-09-25 16:36:46 -04:00
parent 12ae098bef
commit 1b0fac2ceb
3 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
assets/style.scss
View File

@ -70,7 +70,7 @@ body {
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 300;
font-size: 24px;
line-height: 1.5em;
line-height: 1.5;
a {
color: $color-links;
@ -101,14 +101,14 @@ body {
margin: 0 0 20px 0;
font-size: 1.5em;
font-weight: 500;
line-height: 1em;
line-height: 1;
}
h2 {
margin: 20px 0;
font-size: 1.2em;
font-weight: 400;
line-height: 1.4em;
line-height: 1.4;
}
p {
@ -301,14 +301,8 @@ body {
&#single article div {
&#content {
font-size: 16px;
line-height: 1.7;
line-height: 1.8;
object-fit: contain;
p {
font-size: 16px;
line-height: 1.7;
object-fit: contain;
}
}
&#info {
@ -318,7 +312,7 @@ body {
margin-top: 0;
margin-bottom: 20px;
font-size: 32px;
line-height: 1.4em;
line-height: 1.4;
a {
color: $color-text;
@ -332,7 +326,7 @@ body {
margin-top: 18px;
margin-bottom: 10px;
font-weight: 500;
line-height: 1.5em;
line-height: 1.5;
}
}
@ -340,7 +334,7 @@ body {
margin: -5px 0 0 0;
color: $color-light;
font-size: 13px;
line-height: 1.5em;
line-height: 1.5;
letter-spacing: 1px;
a {
@ -350,7 +344,7 @@ body {
div.tags {
text-transform: uppercase;
line-height: 1.5em;
line-height: 1.5;
letter-spacing: 2px;
margin-top: 5px;
@ -536,7 +530,7 @@ body {
p {
font-size: 1.1em;
line-height: 1.5em;
line-height: 1.5;
margin: 12px 0;
}
@ -605,13 +599,13 @@ body {
&#copyright {
width: 50%;
font-size: 14px;
line-height: 1.8em;
line-height: 1.8;
}
&#poweredby {
width: 50%;
font-size: 14px;
line-height: 1.8em;
line-height: 1.8;
a#hugo::after {
content: "\A";

2
content/notes/css-waving-hand-emoji/index.md
View File

@ -18,7 +18,7 @@ If you examine [my homepage](https://jarv.is/) long enough, you might notice the
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.
<iframe height="400" style="width: 100%;" scrolling="no" title="Waving Hand Emoji w/ CSS Keyframes" src="https://codepen.io/jakejarvis/embed/pBZWZw/?height=400&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe>
{{<codepen username="jakejarvis" id="pBZWZw" left-tab="css" right-tab="result" height="400">}}
### CSS:

1
layouts/shortcodes/codepen.html Normal file
View File

@ -0,0 +1 @@
<iframe height="{{ if .Get "height" }}{{ .Get "height" }}{{ else }}500{{ end }}" style="width: 100%;" scrolling="no" src="https://codepen.io/{{ .Get "username" }}/embed/{{ .Get "id" }}/?height={{ if .Get "height" }}{{ .Get "height" }}{{ else }}500{{ end }}&amp;theme-id=light&amp;default-tab={{ .Get "left-tab" }}{{ if .Get "right-tab" }},{{ .Get "right-tab" }}{{ end }}" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe>