Style Guide

Colours

Dark Imperial Blue

#08415c
rgb(8, 65, 92)

Madder Lake

#cc2936
rgb(204, 41, 54)

Slate Gray

#6b818c
rgb(107, 129, 140)

Moccasin

#f9e9dc
rgb(249, 233, 220)

Snow

#fbfafb
rgb(251, 250, 251)

Headings

Heading 1

<h1>Heading 1</h1>
h1 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 2.0rem;
}

Heading 2

<h2>Heading 2</h2>
h2 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.8rem;
}

Heading 3

<h3>Heading 3</h3>
h3 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.6rem; 
}

Heading 4

<h4>Heading 4</h4>
h4 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.4rem; 
}

Heading 5
<h5>Heading 5</h5>
h5 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.3rem; 
}

Heading 6
<h6>Heading 6</h6>
h6 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.2rem; 
}

Text

Paragraphs

There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable. There is another theory which states that this has already happened.

<p>Content here…</p>
p {
  padding: 0.5rem;
} 

Quotes

Many were increasingly of the opinion that they’d all made a big mistake in coming down from the trees in the first place. And some said that even the trees had been a bad move, and that no one should ever have left the oceans
<blockquote>Quote here…</blockquote>  
blockquote {
  font-family: times, serif;
  background-color: #f9e9dc;
  margin: 1rem 5rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  quotes: initial;
}

blockquote::before {
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}   

Quotes with Citation

Many were increasingly of the opinion that they’d all made a big mistake in coming down from the trees in the first place. And some said that even the trees had been a bad move, and that no one should ever have left the oceans Douglas Adams
<blockquote cite="https://example.com">Quote here…<cite>Person</cite></blockquote> 
blockquote {
  font-family: times, serif;
  background-color: #f9e9dc;
  margin: 1rem 5rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  quotes: initial;
}

blockquote::before {
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}  

cite {
  font-style: italic;
  font-size: 0.9rem;
  float: right;
}

Code

<script>
  alert( 'Hello, world!' );
</script>
<pre>
&lt;script&gt;
  alert( 'Hello, world!' );
&lt;/script&gt;
</pre>  
pre {
  white-space: pre-wrap; /* makes text wrap */
  font-family: "courier new";
  background-color: rgba(8, 65, 92, 1);
  color: rgba(251, 250, 251, 1);
  border-radius: 1rem;
  padding: 0.5rem;
  margin: 0 2rem 0.5rem 2rem;
}

Lists

Unordered

<ul>
  <li>Item 1
    <ul>
      <li>Item 1a</li>
      <li>Item 1b</li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>  
ul {
  list-style-type: disc;
  padding: 0.5rem 0 0.5rem 3rem;
}

Ordered

  1. First
    1. first 1
    2. first 2
  2. Second
  3. Third
<ol>
  <li>First
    <ol>
      <li>first 1</li>
      <li>first 2</li>
    </ol>
  </li>
  <li>Second</li>
  <li>Third</li>
</ol>  
ol {
  list-style-type: decimal;
  padding: 0.5rem 0 0.5rem 3rem; 
}

ol ol {
  list-style-type: lower-alpha;
}

Links

Internal Links

Internal Link - pointing to a page in this site

<a href="http://letorey.co.uk">Internal Link</a> 
a, a:visited {
  background-color:rgba(204, 41, 54, 1);
  color: rgba(251, 250, 251, 1);
  text-decoration: underline;
  text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

a:hover, a:focus {
  color:rgba(204, 41, 54, 1);
  background-color: rgba(251, 250, 251, 1);
  text-decoration: underline;
  text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}  

External Links

External Link - pointing to someone else's website

<a href="https://www.h2g2.com">External Link</a> 
a, a:visited {
  background-color:rgba(204, 41, 54, 1);
  color: rgba(251, 250, 251, 1);
  text-decoration: underline;
  text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

a:hover, a:focus {
  color:rgba(204, 41, 54, 1);
  background-color: rgba(251, 250, 251, 1);
  text-decoration: underline;
  text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

a[href^="http://"]:not([href*="letorey.co.uk"]):after,
a[href^="https://"]:not([href*="letorey.co.uk"]):after {
  content: " ↗";
} 

Email Links

Email Link - Linking to an email address

<a href="mailto:me@example.com">Email Link</a> 
a, a:visited {
  background-color:rgba(204, 41, 54, 1);
  color: rgba(251, 250, 251, 1);
  text-decoration: underline;
  text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

a:hover, a:focus {
  color:rgba(204, 41, 54, 1);
  background-color: rgba(251, 250, 251, 1);
  text-decoration: underline;
  text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

a[href^="mailto"]::after {
  content: " ✉︎";
}

Other Text Elements

Bold aka Strong

The ships hung in the sky in much the same way that bricks don’t.

<strong>Content here…</strong>  
strong {
  font-weight: 600;
} 

Italics aka Emphasised

The ships hung in the sky in much the same way that bricks don’t.

<em>Content here…</em>  
em{
  font-style: italic;
}

Subscript

This text has subcript

<sub>subcript</sub> 
sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  bottom: -0.25em; 
}

Superscript

This text has superscript

<sup>superscript</sup> 
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em; 
}

Deleted

This text has been deleted

<del>deleted</del>
del {
  text-decoration: line-through;
  color: rgba(204,41,54,0.6);
} 

Abbreviation

We'd learnt about the structure of HTML I then went home and started reading.

<abbr title="Hyper Text Markup Language">
  HTML
</abbr>
abbr {
  color: rgba(204,41,54,1);
}

Selected Text

“You know,” said Arthur, “it’s at times like this, when I’m trapped in a Vogon airlock with a man from Betelgeuse, and about to die of asphyxiation in deep space that I really wish I’d listened to what my mother told me when I was young.” “Why, what did she tell you?” “I don’t know, I didn’t listen.”

::selection, .selection {
   background-color: rgba(204, 41, 54, 1);
   color: rgba(251, 250, 251, 1);
}

Images

Image on it's own

Admin Button

<picture>
  <source srcset="../Images/Large.jpg" media="(min-width: 1024px)">
  <source srcset="../Images/Medium.jpg" media="(min-width: 599px)">
  <img src="../Images/Small.jpg" srcset="../Images/Small.jpg" alt="xxxxx">
</picture> 
img {
  padding: 2px 4px 0px 0px;
  max-width: 100%;
  height: auto;
  border: 1px solid #08415c;
  padding: 0.2rem;
  box-shadow: 2px -2px 5px 0 rgba(8,65,92,1);
  margin-top: 0.5rem;
}
<picture>
  <source srcset="./?a=xxxx:v1$" media="(min-width: 1024px)">
  <source srcset="./?a=xxxx:v2$" media="(min-width: 599px)">
  <img src="./?a=xxxx:v3$" srcset="./?a=xxxx:v3$" alt="">
 </picture>

Image with Caption

Admin Button

Click the Admin Button to Start Setting up a new Account

<picture>
  <source srcset="../Images/Large.jpg" media="(min-width: 1024px)">
  <source srcset="../Images/Medium.jpg" media="(min-width: 599px)">
  <img src="../Images/Small.jpg" srcset="../Images/Small.jpg" alt="xxxxx">
</picture>
<figcaption>Caption</figcaption>
img {
  padding: 2px 4px 0px 0px;
  max-width: 100%;
  height: auto;
  border: 1px solid #08415c;
  padding: 0.2rem;
  box-shadow: 2px -2px 5px 0 rgba(8,65,92,1);
  margin-top: 0.5rem;
}

figcaption {
  color: white;
  background-color: #08415c;
  font-size: 0.9rem;
  padding: 0.2rem;
}
<picture>
  <source srcset="./?a=xxxx:v1$" media="(min-width: 1024px)">
  <source srcset="./?a=xxxx:v2$" media="(min-width: 599px)">
  <img src="./?a=xxxx:v3$" srcset="./?a=xxxx:v3$" alt="%globals_asset_attribute_alt:xxxx%">
</picture>
%begin_globals_asset_attribute_caption:xxxx%
  <figcaption>
    %globals_asset_attribute_caption:xxxx%
  </figcaption>
%end_globals_asset_attribute_caption%