profstein’s gists

profstein / index.html

Created November 28, 2024 05:40

Show a video using the video element

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Video Element Example</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<main>

profstein / card-example.njk

Last active April 4, 2022 22:40

This is an example of how to write Nunjucks loop to display posts as a card. This will show all pages with a tag of design and front matter data variables postImg, postImgAlt, and description.

	<main class="design cards">
	<h2 class="cards_header">Graphic Design Projects</h2>
	{%- for page in collections.design %}
	<div class="pjcard">
	<div class="card_img">
	<a href="{{page.url}}"><img src="/images/{{page.data.postImg}}" alt="{{page.data.postImgAlt}}"></a></div>
	<div class="card_text">
	<h3><a href="{{page.url}}">{{page.data.title}}</a></h3>
	<p>{{page.data.description}}<p>
	</div>

profstein / postloop.njk

Last active April 2, 2022 20:48

List of Pages in a Collection (Eleventy)

	<ul>
	{% for page in collections.post %}
	<li>
	<a href="{{ page.url }}"> {{ page.data.title }}</a>
	</li>
	{% endfor %}
	</ul>

profstein / typography.css

Created April 28, 2021 22:31

Base Web Site Typography

	/* Optional, include a web font */
	@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100;600&family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&display=swap');

	/* The html and body selectors below set the base font for the entire page */
	html {font-size: 1rem;}

	/* Note: this sheet uses Serif font for body and sans for headings. You will want to change this to fit your site */

	body {
	font-family: 'EB Garamond', serif;

profstein / base-responsive.css

Created December 11, 2019 09:12

Base CSS to get ready for responsive layout

	/* ==================================
	Responsive Styling and Layout
	================================== */

	/* ================= Use Border Box model ================= */
	html {
	box-sizing: border-box;
	}
	, :before, *:after {
	box-sizing: inherit;

profstein / nav.html

Created November 2, 2019 22:12

Simple Navigation HTML

	<nav class="navcontainer" aria-label="main">
	<ul class="navlist">
	<li id="active"><a href="#" class="current">Item one</a></li>
	<li><a href="#">Item two</a></li>
	<li><a href="#">Item three</a></li>
	<li><a href="#">Item four</a></li>
	<li><a href="#">Item five</a></li>
	</ul>
	</nav>

profstein / simple-page.html

Last active November 2, 2019 22:22

Simple HTML

	<!doctype html>
	<html lang="en-us">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Change to Your Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/style.css">
	</head>

profstein / index.html

Created October 23, 2018 05:34

Responsive Navigation with Modernizr

	<div class="container">
	<header class="page-header cf">
	<div class="logo">
	<img src="http://placehold.it/200x200" alt="placeholder logo">
	</div>
	<h1>My Site Title</h1>
	</header>

	<!-- NAVIGATION-->
	<div class="menu"> <a href="#" id="menu_button">Menu</a> </div>

profstein / _color.scss

Last active November 26, 2016 17:54

Sass Example Partial Files

	// Change the palette colors to your own. You can also change which color is where and add your own variables.

	//colors from Beautiful American Palette by Oktober http://www.colourlovers.com/palette/83708/Beautiful_American
	$palette1: #AC0000; //harvard Red
	$palette2: #FFF; //white
	$palette3: #C8D3E6; //light blue "frosty breeze"
	$palette4: #657FAD ; //medium blue "institutional blue"
	$palette5: #002255 ; //dark blue changed slightly from original reference palette

	//Now we set some of the main colors based on the palette

profstein / reset.css

Last active September 8, 2016 18:25

Typographic Hierarchy Schedule Start

	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 \| 20110126
	License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,