Skip to content

Instantly share code, notes, and snippets.

@profstein
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 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
profstein / postloop.njk
Last active Apr 2, 2022
List of Pages in a Collection (Eleventy)
View postloop.njk
<ul>
{% for page in collections.post %}
<li>
<a href="{{ page.url }}"> {{ page.data.title }}</a>
</li>
{% endfor %}
</ul>
@profstein
profstein / typography.css
Created Apr 28, 2021
Base Web Site Typography
View typography.css
/* 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
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
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>
</ul>
</nav>
View simple-page.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
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="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
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 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
profstein / reset.css
Last active Sep 8, 2016
Typographic Hierarchy Schedule Start
View reset.css
/* 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
profstein / candidates.html
Created Sep 8, 2016
Typographic Hierarchy Start
View candidates.html
<!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.