Skip to content

Instantly share code, notes, and snippets.

View 5t3ph's full-sized avatar

Stephanie Eckles 5t3ph

2k followers · 49 following
View GitHub Profile
@5t3ph
5t3ph / 11ty-highlight-custom-blocks.js
Created January 21, 2022 14:40
const HighlightPairedShortcode = require("@11ty/eleventy-plugin-syntaxhighlight/src/HighlightPairedShortcode");
const highlightCodeDemo = (code, lang) => {
const highlightedCode = HighlightPairedShortcode(code, lang);
return highlightedCode;
};
@5t3ph
5t3ph / sugar-cookies.md
Created December 30, 2021 00:22
Classic Sugar Cookies recipe

Classic Sugar Cookies

Adapted from TikTok @chloebluffcakes

Very buttery, and the perfect balance between soft and crunchy. Be sure not to over bake!

  • 1 c butter
  • 1 cup sugar
  • 1 egg
  • 1/2 tsp almond extract
@5t3ph
5t3ph / colorized-list-bullets.css
Created July 13, 2021 02:38
3 Quick Modern CSS Examples
/*
OLD hacky way
*/
ul {
list-style: none;
padding: 0;
}
li {
position: relative;
@5t3ph
5t3ph / eleventy-rss-reader-feature-list.md
Created June 1, 2021 18:50
Jamstack RSS Reader with Eleventy - Feature List

Project Requirements

Join my stream on Twitch to help build this app! Feel free to add comments about additional features we should explore.

  • Structure of the RSS item
    • Name of the source
    • Article title
    • Date
    • Excerpt
  • Full article
@5t3ph
5t3ph / 11ty-imgBase.md
Created January 24, 2021 03:27
Set a variable for a directory base path for images in Markdown for 11ty

{% set imgBase %}/img/post-directory/{% endset %}

![Alt text]({{ imgBase }}img-name.png)

@5t3ph
5t3ph / element-classes-and-ids-vanilla.css
Last active January 25, 2022 04:06
Tag HTML elements with their class names and IDs to visualize page structure
*[class],
*[id] {
position: relative;
outline: 2px dashed red;
}
*[class]::before, *[class]::after,
*[id]::before,
*[id]::after {
position: absolute;
@5t3ph
5t3ph / 11ty-setup.md
Created August 23, 2020 02:35
Basic 11ty Starting Point

Begin the Project

npm init -y && npm install @11ty/eleventy

Update scripts in package.json

  "scripts": {
    "develop": "eleventy --serve",
 "build": "eleventy"
@5t3ph
5t3ph / 11ty-rss-data-source.js
Created August 11, 2020 13:46
/* Place in your _data directory to create an Eleventy data source from an RSS feed
* View package docs for full available parsed schema: https://www.npmjs.com/package/rss-parser
*
* TO USE in Nunjucks assuming a filename of `rssposts`
*
* {% for post in rssposts %}
* <article>
* <h3>
* <a href="{{ post.url }}">{{ post.title }}</a>
* </h3>
@5t3ph
5t3ph / headquarters.css
Last active July 20, 2020 01:36
@import url("https://fonts.googleapis.com/css2?family=Red+Rose:wght@700&family=Roboto+Slab:wght@400;600&display=swap");
:root {
--color-primary: #ef8994;
--color-secondary: #e5ce94;
--color-background: #013785;
--color-text: #e8b9c0;
--color-light: #fff;
--color-anchor: var(--color-primary);
--color-highlight: #fffb4a;
@5t3ph
5t3ph / stylestage.html
Last active July 5, 2020 22:07
[DRAFT] Style Stage source HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>[Your Style Title] by [Your Name] | Style Stage</title>
<meta name="description" content="[Your optional description]" />
<link href="style.css" rel="stylesheet" />
</head>
<body>