Skip to content

Instantly share code, notes, and snippets.

profstein / card-example.njk
Last active Apr 4, 2022
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.
View card-example.njk
<main class="design cards">
<h2 class="cards_header">Graphic Design Projects</h2>
{%- for page in %}
<div class="pjcard">
<div class="card_img">
<a href="{{page.url}}"><img src="/images/{{}}" alt="{{}}"></a></div>
<div class="card_text">
<h3><a href="{{page.url}}">{{}}</a></h3>
profstein / postloop.njk
Last active Apr 2, 2022
List of Pages in a Collection (Eleventy)
View postloop.njk
{% for page in %}
<a href="{{ page.url }}"> {{ }}</a>
{% endfor %}
profstein / typography.css
Created Apr 28, 2021
Base Web Site Typography
View typography.css
/* Optional, include a web font */
@import url(';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 Dec 11, 2019
Base CSS to get ready for responsive layout
View base-responsive.css
/* ==================================
Responsive Styling and Layout
================================== */
/* ================= Use Border Box model ================= */
html {
box-sizing: border-box;
*, *:before, *:after {
box-sizing: inherit;
profstein / nav.html
Created Nov 2, 2019
Simple Navigation HTML
View nav.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>
View simple-page.html
<!doctype html>
<html lang="en-us">
<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">
profstein / index.html
Created Oct 23, 2018
Responsive Navigation with Modernizr
View index.html
<div class="container">
<header class="page-header cf">
<div class="logo">
<img src="" alt="placeholder logo">
<h1>My Site Title</h1>
<div class="menu"> <a href="#" id="menu_button">Menu</a> </div>
profstein / _color.scss
Last active Nov 26, 2016
Sass Example Partial Files
View _color.scss
// 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
$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 Sep 8, 2016
Typographic Hierarchy Schedule Start
View reset.css
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 Sep 8, 2016
Typographic Hierarchy Start
View candidates.html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Candidates for 2016 Elections</title>
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.