From b409c7ca85e2a5e2c1b8a0638e955899d8a55828 Mon Sep 17 00:00:00 2001
From: Stephen Kerr <stephen@stephenkerrdesign.com>
Date: Fri, 25 Nov 2022 17:28:40 +0100
Subject: [PATCH] website version 0.03

---
 css/style-0.css | 40 +++++++++++++++++++++++-----------------
 index-0.html    |  8 ++++----
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/css/style-0.css b/css/style-0.css
index f2fd4e0..08cb1c4 100644
--- a/css/style-0.css
+++ b/css/style-0.css
@@ -1,33 +1,33 @@
 :root{
-    --pantone1: #7C3BC8;
+    --pantone1: #b0d;
     --baseline: 5mm;
     --margin-left: 40mm;
 }
 
 @font-face {
     font-family: 'worksans';
-    src: url('fonts/worksans/WorkSans-Medium.woff') format('opentype');
+    src: url('/fonts/worksans/WorkSans-Medium.woff') format('opentype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'worksans';
-    src: url('fonts/worksans/WorkSans-Bold.woff') format('opentype');
+    src: url('/fonts/worksans/WorkSans-Bold.woff') format('opentype');
     font-weight: bold;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'worksans';
-    src: url('fonts/worksans/WorkSans-MediumItalic.woff') format('opentype');
+    src: url('/fonts/worksans/WorkSans-MediumItalic.woff') format('opentype');
     font-weight: normal;
     font-style: oblique;
 }
 
 @font-face {
     font-family: 'worksans';
-    src: url('fonts/worksans/WorkSans-BoldItalic.woff') format('opentype');
+    src: url('/fonts/worksans/WorkSans-BoldItalic.woff') format('opentype');
     font-weight: bold;
     font-style: oblique;
 }
@@ -68,24 +68,27 @@
 }
 body{
   font-family: 'worksans', sans-serif;
-  font-weight: 500;
+  font-weight: 400;
   font-size: 15px;
   line-height: var(--baseline);
+  max-width: 60rem;
+  margin: 0 auto;
+}
+.grid-wrap{
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
 }
 
 h1, h2, h3, h4, h5, h6{
-    font-family: 'worksans', serif;
-    color: var(--pantone1);
+    /* color: var(--pantone1); */
     margin: 0;
 }
 
-h2{
-  font-size: 48pt;
+h1{
+  font-size: 80pt;
   line-height: calc(4 * var(--baseline));
   position: relative;
   top: -1.75mm;
-  left: -40mm;
-  width: calc(100% + 40mm);
   string-set: title content(text);
 }
 h3{
@@ -94,31 +97,34 @@ h3{
   position: relative;
   top: -2mm;
   margin-bottom:10mm;
-  left: -40mm;
   width: calc(100% + 40mm);
 }
 .margin-note{
-  /* color: var(--pantone1) */
   line-height: 3.75mm;
   padding: 0 5mm;
   text-align: left;
 }
 .note-call::after{
 
-  /* height: 0; */
 }
 
 p{
     margin: 0 0 5mm;
     position: relative;
     top: 1.2mm;
-    text-align: justify;
+    /* text-align: justify; */
+}
+section.right{
+  grid-column: 3;
 }
-
 sup{
   color: var(--pantone1);
   line-height: 0.5;
 }
+svg{
+    color: var(--pantone1);
+    margin: 0;
+}
 #image{
     max-width: 100%;
 }
diff --git a/index-0.html b/index-0.html
index a9fe53e..c90d895 100644
--- a/index-0.html
+++ b/index-0.html
@@ -35,8 +35,8 @@
 
     <!-- Content of your book -->
 
-    <div>
-      <section>
+    <div class="grid-wrap">
+      <section class="right">
         <h1>
           garden
         </h1>
@@ -49,8 +49,8 @@
               Join us on a journey exploring the wild undergrowth of the library, Leeszaal's secret collection of 'unwanted' material. The library is a garden, and it's time to harvest.
             </p>
             <p>
-              Our workshop, "How do we library that?" invites visitors to collectively discover what a library offers through a secret collection of "unwanted books"; an exploration of networks of humans and texts, their contexts and modes of operation. 
-              Its aim is to make the community’s vision of a library known and written.    
+              Our workshop, "How do we library that?" invites visitors to collectively discover what a library offers through a secret collection of "unwanted books"; an exploration of networks of humans and texts, their contexts and modes of operation.
+              Its aim is to make the community’s vision of a library known and written.
             </p>
           </div>
         </div>