profstein’s gists

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,

profstein / candidates.html

Created September 8, 2016 14:11

Typographic Hierarchy Start

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Candidates for 2016 Elections</title>
	</head>
	<body>
	Candidates for the 2016 Elections

	This page lists candidates for state and federal elections for the districts that serve the part of Manhattan where the Borough of Manhattan Community College is located.