jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-10-23 14:44:25 -04:00
Code Issues Activity

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