{% set imgBase %}/img/post-directory/{% endset %}
![Alt text]({{ imgBase }}img-name.png)
span { | |
border: 2px dashed currentcolor; | |
border-radius: 4px; | |
min-height: 15vh; | |
padding: 1rem; | |
color: #0178d4; | |
font-size: 3rem; | |
text-align: center; | |
display: flex; | |
justify-content: center; |
$color-primary: purple; | |
$color-secondary: blue; | |
$color-support: green; | |
$theme-colors: ( | |
primary: $color-primary, | |
secondary: $color-secondary, | |
support: $color-support | |
); |
{% set imgBase %}/img/post-directory/{% endset %}
![Alt text]({{ imgBase }}img-name.png)
Join my stream on Twitch to help build this app! Feel free to add comments about additional features we should explore.
const HighlightPairedShortcode = require("@11ty/eleventy-plugin-syntaxhighlight/src/HighlightPairedShortcode"); | |
const highlightCodeDemo = (code, lang) => { | |
const highlightedCode = HighlightPairedShortcode(code, lang); | |
return highlightedCode; | |
}; |
*[class], | |
*[id] { | |
position: relative; | |
outline: 2px dashed red; | |
} | |
*[class]::before, *[class]::after, | |
*[id]::before, | |
*[id]::after { | |
position: absolute; |
import * as React from 'react'; | |
import { useLocation } from '@reach/router'; | |
import queryString from 'query-string'; | |
const getSelectedTheme = (query) => { | |
const fallback = 'light'; | |
if (query) { | |
const queriedTheme = queryString.parse(query); |
/* | |
Project Structure: | |
src/ | |
- sass/ | |
- - style.scss | |
- index.html | |
npm start - copies src files to dist/ and starts Browsersync server at localhost:3000 | |
npm run build - copies files to dist/ and autoprefixes/minifies css |
/* | |
OLD hacky way | |
*/ | |
ul { | |
list-style: none; | |
padding: 0; | |
} | |
li { | |
position: relative; |