Skip to content

Instantly share code, notes, and snippets.

Avatar

Stephanie Eckles 5t3ph

View GitHub Profile
@5t3ph
5t3ph / colorized-list-bullets.css
Created Jul 13, 2021
3 Quick Modern CSS Examples
View colorized-list-bullets.css
/*
OLD hacky way
*/
ul {
list-style: none;
padding: 0;
}
li {
position: relative;
@5t3ph
5t3ph / eleventy-rss-reader-feature-list.md
Created Jun 1, 2021
Jamstack RSS Reader with Eleventy - Feature List
View eleventy-rss-reader-feature-list.md

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 Jan 24, 2021
Set a variable for a directory base path for images in Markdown for 11ty
View 11ty-imgBase.md

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

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

@5t3ph
5t3ph / element-classes-and-ids.scss
Last active Jul 10, 2021
Tag HTML elements with their class names and IDs to visualize page structure
View element-classes-and-ids.scss
*[class],
*[id] {
position: relative;
outline: 2px dashed red;
&::before,
&::after {
position: absolute;
top: 0;
left: 0;
@5t3ph
5t3ph / 11ty-setup.md
Created Aug 23, 2020
Basic 11ty Starting Point
View 11ty-setup.md

Begin the Project

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

Update scripts in package.json

  "scripts": {
    "develop": "eleventy --serve",
    "build": "eleventy"
View 11ty-rss-data-source.js
/* 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>
View headquarters.css
@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 Jul 5, 2020
[DRAFT] Style Stage source HTML
View stylestage.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 / style-stage-guidelines.md
Last active Jul 7, 2020
[DRAFT] Style Stage Guidelines
View style-stage-guidelines.md

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.
View a11y-input.html
<form>
<fieldset>
<legend>Full Name</legend>
<div class="form-field">
<label for="firstname">First Name</label>
<input type="text" id="firstname" />
</div>
<div class="form-field">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />