Skip to content

Instantly share code, notes, and snippets.

Avatar

Stephanie Eckles 5t3ph

View GitHub Profile
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" />
View _grid-item.scss
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;
View sass-theme-map-function.scss
$color-primary: purple;
$color-secondary: blue;
$color-support: green;
$theme-colors: (
primary: $color-primary,
secondary: $color-secondary,
support: $color-support
);
@5t3ph
5t3ph / gatsby-useLocation-hook-change-theme.js
Last active Apr 17, 2020
In Gatsby, leverage Reach Router's useLocation hook along with the query-string package to change user's selected theme, or expand to any values you need from the URL parameters, available on `location.search` from the useLocation hook.
View gatsby-useLocation-hook-change-theme.js
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);
@5t3ph
5t3ph / gatsby-useImgSrc-hook.tsx
Last active Mar 10, 2020
Gatsby useStaticQuery to create custom hook for returning an image src path
View gatsby-useImgSrc-hook.tsx
/**
* Required plugins: gatsby-source-filesystem and gatsby-plugin-sharp
*
* Basic Hook Usage:
*
* import useImgSrc from '../utils/useImgSrc';
*
* const Image = ({src}) => {
* const imgSrc = useImgSrc(src);
*
@5t3ph
5t3ph / sass-static-package.json
Last active Mar 31, 2019
SASS compile|autoprefix|minimize and browser-sync server for static HTML
View sass-static-package.json
/*
Project Structure:
src/
- css/ (generated by node-sass)
- sass/
- - style.scss
- index.html
npm run develop - copies src files to dist/ and starts server with live reload
You can’t perform that action at this time.