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 / style-stage-guidelines.md
Last active July 7, 2020 16:43
[DRAFT] Style Stage Guidelines

The HTML for this page was created to be semantic, accessible, and free of nearly all other opinions. While typically extra divs are to be avoided, each sectioning element also includes a .container div as the first child for use as a styling aid since you do not have access to alter the base HTML. IDs are included where needed for nav anchors or accessibility, and a small number of additional classes are provided for key elements without IDs.

As a contributor, you agree to abide by the following guidelines and restrictions:

  • Branding is prohibited with the exception of Monthly and Weekly sponsors.
  • The HTML is not available to modify, except for attribution values that will be added from your submission metadata.
  • You may use any build setup you prefer to create your stylesheet, but the final submission should be the compiled, unminified CSS.
@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>
@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 / 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 / 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 / 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-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 / 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 / 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 / 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