website version 0.03

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{
+h1{
-  font-size: 48pt;
+  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%;
 }

index-0.html

@@ -35,8 +35,8 @@
 
     <!-- Content of your book -->
 
-    <div>
+    <div class="grid-wrap">
-      <section>
+      <section class="right">
         <h1>
           garden
         </h1>