rileybathurst

import React, { useState, useEffect } from "react";

function DarkText() {
  return <h1>hello</>;
}

function LightText() {
    return <h1>world</>;
}

rileybathurst

import * as React from "react";
import { graphql } from "gatsby";
import ReactMarkdown from "react-markdown";

const IndexPage = ({ data }) => {
  return (
    <>
      <ReactMarkdown children={service.markdown} />
    </>
  );

rileybathurst

const createH2 = () => {
  const h2Element = document.createElement('h2');
  h2Element.textContent = 'This is a Styled Custom Element';
  return h2Element;
};

class OPENSHADOW extends HTMLElement {
  constructor() {
    super();
  }

rileybathurst

// wont work if overwritten by the page like color
$w.onReady(function () {
	$w("#text25").html = `<div style="background:red; border-radius: 4px;"> ${$w("#text25").html}</div>`;
} );

rileybathurst

@media (color-gamut: p3) {
  @supports (color: lch(65% 132 55)) {
    header {
      background: lch(65% 132 55);
    }
  }
}

rileybathurst

<IfModule mod_headers.c>
  Header set Content-Security-Policy: "default-src 'self'; \
style-src 'self' 'unsafe-inline'; \
script-src 'self' https://www.google.com https://www.gstatic.com https://cdn.jsdelivr.net 'nonce-351731468999'; \
img-src 'self' secure.gravatar.com; \
font-src 'self' data:; \
child-src https://www.youtube.com https://player.vimeo.com; \
frame-ancestors 'none';"

Header set Strict-Transport-Security: max-age=63072000

rileybathurst

import React, { useState, useEffect, useRef } from 'react';

function Example() {
  const [jump, setJump] = useState(0);
  useEffect(() => {
    const set = useRef();
    setJump(set.current.clientHeight);
  });

  const sectionStyle = {

rileybathurst

import React, { useState, useEffect, useRef } from 'react';

// give me a background
const pageStyle = {
  background: "palegreen",
  height: "200vh",
}

// component
function Example() {

rileybathurst

import React, { useState } from 'react';

function MenuButton() {

  let [menu, setMenu] = useState('closed');

  if (menu === 'open') {
    return (
      <menu__small
      style={{

rileybathurst

import React, { useState, useContext, createContext } from "react"

const ThemeContext = createContext(null);

function Menu() {
  const { menu, toggleMenu } = useContext(
    ThemeContext
  );

  if (menu === 'open') {