Luke Bennett

Style sample

Written by Luke Bennett on


This is a style sample for my website made by me, Luke Bennett. The purpose of this post is to make it easier to style the website by showing all of the common HTML elements in one place.

This paragraph is for checking line length and showing how text wraps. It has to be very long so that it will wrap even on wide screen devices. Is the text very legible? Should it be larger or smaller? Maybe a different typeface? What about line height of paragraphs, a little too much is better than not enough. Check the margin and padding while you’re at it.

  • This is an unordered list
  • This is an unordered list
  • There are three bullet points here
  • Do they look OK?

What about bold text? Maybe some italics. Don’t forget some nice “curly quotes” (not all fonts have these, so it’s something to consider.)

Level 2 heading

Here’s a bit more text to see what it looks like under a <h2>. Does the margin on the top and bottom of the heading look good to you?

Level 3 heading

  1. What about an ordered list?
  2. Three items should be enough for testing right?
  3. Yes I think three is probably enough

You’re not going to use this on every website, about about styling code text? This should be in a monospace font.

You might also want to do syntax highlighting, so here is a block of javascript for you to layout.

Javascript code with syntax highlighting:

import { Link } from 'gatsby';
import * as React from 'react';

import { Layout, SEO } from '../components';
import { useGraphQL } from '../hooks';
import me from '../images/me.svg';

export default function IndexPage() {
  const {
    allMarkdownRemark: { edges: posts },
  } = useGraphQL();
  return (
    <Layout>
      <SEO title="Home" />
      <div className="w-full max-w-5xl mx-auto mb-12 sm:px-6">
        <div className="grid items-center justify-center gap-6 px-4 py-12 sm:px-8 md:grid-cols-2">
          <div className="text-2xl leading-snug text-soft">
            <h1 className="mb-2 text-3xl font-bold text-contrast">
              Hi, I'm{' '}
              <a
                className="underline text-accent-contrast"
                href="https://twitter.com/luke_bennett_"
              >
                Luke
              </a>
              .
            </h1>
            <p>I’m a front-end web designer/developer.</p>
            <p>
              I specialise in making blazing fast websites using modern
              technologies.
            </p>
          </div>
          <img className="w-full" src={me} alt="" />
        </div>
      </div>
      <ul className="grid w-full max-w-5xl gap-6 px-4 mx-auto mb-12 md:grid-cols-2 md:justify-start sm:px-8">
        {posts.map((post) => (
          <li
            key={post.node.id}
            className="w-full transition duration-150 ease-in-out rounded hover:shadow-md hover:bg-soft hover:border-accent-soft group"
          >
            <Link
              to={`${post.node.fields.slug}`}
              className="flex flex-col py-8 mx-auto sm:px-6"
            >
              <div className="pb-6">
                <h3
                  className="text-2xl font-bold transition duration-150 ease-in-out text-accent group-hover:text-accent-contrast"
                  dangerouslySetInnerHTML={{
                    __html: post.node.frontmatter.title,
                  }}
                />
                <div
                  className="text-lg"
                  dangerouslySetInnerHTML={{
                    __html: post.node.frontmatter.excerpt || post.node.excerpt,
                  }}
                />
              </div>
            </Link>
          </li>
        ))}
      </ul>
    </Layout>
  );
}

Next up, blockquotes.

This is what a blockquote looks like. I’ll add a second paragraph here that is long enough to cause line wrapping. Once again, check for padding and margin, font size etc.

Here’s a screenshot-type image, with a caption:

Un Monsieur Triste En Costume

A caption goes here.

Further paragraphs of text. And yet more text. A bit more text too, for good measure.

Further paragraphs of text. And yet more text, followed by a horizontal rule.


Another heading

Further paragraphs of text. And yet more text.

Further paragraphs of text. And yet more text.

Tables

Here is a table:

Current Members of Queens of the Stone Age

Name Instruments Period
Josh Homme lead vocals, guitar, piano, bass 1996 – present
Troy Van Leeuwen guitar, lap steel guitar, keyboards, synthesizers, percussion, backing vocals, bass 2002 – present
Michael Shuman bass, synthesizers, backing vocals 2007 – present
Dean Fertita keyboards, synthesizers, guitar, percussion, backing vocals 2007 – present
Jon Theodore drums, percussion, samplers 2013 – present

Former Members of Queens of the Stone Age

Name Instruments Period
Alfredo Hernández drums, percussion 1998 – 1999
Nick Oliveri bass, co-lead and backing vocals 1998 – 2004
Mark Lanegan co-lead and backing vocals, keyboards 2001 – 2005
Dave Grohl drums, percussion 2001 – 2002
Joey Castillo drums, percussion 2002 – 2012
Alain Johannes bass, backing vocals, guitars 2005 – 2007
Natasha Shneider keyboards, backing vocals 2005 – 2006