5t3ph

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

<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" />

5t3ph

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;

5t3ph

$color-primary: purple;
$color-secondary: blue;
$color-support: green;

$theme-colors: (
  primary: $color-primary,
  secondary: $color-secondary,
  support: $color-support
);

5t3ph

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

/**
 * 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

/*
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

5t3ph

/*
 * Usage:
 * <Permalink label={component} slug={demo} />
 */

import * as React from 'react';
import { StaticQuery, graphql } from 'gatsby';

// Mimics function to test for internal v. external links from docs
// @link https://www.gatsbyjs.org/docs/gatsby-link/

5t3ph

/* Review the following article for more info on getting started with custom components.
 * @link https://using-remark.gatsbyjs.org/custom-components/
 *
 * Example here demonstrates detecting if a custom component is being used
 * If so, do not wrap it with a paragraph tag and invalidate DOM nesting
 */

import * as React from 'react';
import rehypeReact from 'rehype-react';

5t3ph

/*
 * For use when you have a custom page to display a custom post type but also need the CPT pulled into search results.
 *
 * Includes functions hooked to filters to alter the title, permalink, and excerpt.
 * Uses switch statements for easily extending to additional custom post types.
 *
 */
 
<?php
/**