a lot

css/fonts/info.txt

@@ -0,0 +1,2 @@
+license: Creative Commons (by-sa) Attribution Share Alike
+link: https://www.fontspace.com/fs-jenson-1-font-f21617

css/fonts/worksans/stylesheet.css

@@ -0,0 +1,161 @@
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Black.woff2') format('woff2'),
+        url('WorkSans-Black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraBoldItalic.woff2') format('woff2'),
+        url('WorkSans-ExtraBoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Bold.woff2') format('woff2'),
+        url('WorkSans-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraBold.woff2') format('woff2'),
+        url('WorkSans-ExtraBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-BlackItalic.woff2') format('woff2'),
+        url('WorkSans-BlackItalic.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-BoldItalic.woff2') format('woff2'),
+        url('WorkSans-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Italic.woff2') format('woff2'),
+        url('WorkSans-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraLightItalic.woff2') format('woff2'),
+        url('WorkSans-ExtraLightItalic.woff') format('woff');
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Light.woff2') format('woff2'),
+        url('WorkSans-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-MediumItalic.woff2') format('woff2'),
+        url('WorkSans-MediumItalic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-LightItalic.woff2') format('woff2'),
+        url('WorkSans-LightItalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Medium.woff2') format('woff2'),
+        url('WorkSans-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraLight.woff2') format('woff2'),
+        url('WorkSans-ExtraLight.woff') format('woff');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-SemiBoldItalic.woff2') format('woff2'),
+        url('WorkSans-SemiBoldItalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Thin.woff2') format('woff2'),
+        url('WorkSans-Thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ThinItalic.woff2') format('woff2'),
+        url('WorkSans-ThinItalic.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Regular.woff2') format('woff2'),
+        url('WorkSans-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-SemiBold.woff2') format('woff2'),
+        url('WorkSans-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}

css/style_index.css

@@ -1,41 +1,68 @@
 @font-face {
-    font-family: 'goethe-bold', sans-serif;
+    font-family: 'worksans';
-    src: url(GoetheBold.ttf);
+    src: url('css/fonts/worksans/WorkSans-Regular.woff') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'worksans';
+    src: url('./css/fonts/worksans/WorkSans-Bold.woff') format('opentype');
+    font-weight: bold;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'worksans';
+    src: url('./css/fonts/worksans/WorkSans-Italic.woff') format('opentype');
+    font-weight: normal;
+    font-style: oblique;
+  }
+  
+  @font-face {
+    font-family: 'worksans';
+    src: url('./css/fonts/worksans/WorkSans-Bold.woff') format('opentype');
+    font-weight: bold;
+    font-style: oblique;
   }
 
 body {
+    font-family: 'worksans', sans-serif;
     font-size: calc(1rem + 1vw);
     min-height: 100vh;
     background-color: #130149;
+    text-align: center;
+    margin: 60px;
+    box-sizing: border-box;
+    
+    /* Center the content */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    text-align: center;
 }
 
 h1 {
-    font-family: monospace;
+    margin-top: 30px;
-    font-size: calc(5rem + 3vw); /* Responsive font size for h1 */
-    color: white;
-    margin-top: 200px;
     margin-bottom: 20px;
 }
 
 h2 {
-    font-family: monospace;
+    font-family: 'worksans', sans-serif;
-    font-size: 1.6rem; /* Adjust the font size for h2 as needed for responsiveness */
+    font-style: oblique;
+    font-size: 1.1rem; 
     color: white;
+    margin-top: 30px;
 }
 
 h3 {
-    font-size: 1rem; /* Adjust the font size for h3 as needed for responsiveness */
+    font-size: 0.9rem; 
-    margin-top: 300px;
+    margin-top: 500px;
 }
 
 #header {
-    font-family: monospace;
+    font-family:'worksans', sans-serif;
-    font-size: calc(1.2rem + 0.5vw); /* Responsive font size for #header */
+    font-size: calc(1rem + 0.5vw);
-    margin-top: 20px;
+    margin-top: 15px; 
     color: white;
 }

css/style_webweave.css

@@ -1,8 +1,32 @@
 @font-face {
-    font-family: 'goethe-bold', sans-serif;
+    font-family: 'worksans';
-    src: url(GoetheBold.ttf);
+    src: url('css/fonts/worksans/WorkSans-Regular.woff') format('opentype');
+    font-weight: normal;
+    font-style: normal;
   }
   
+  @font-face {
+    font-family: 'worksans';
+    src: url('./css/fonts/worksans/WorkSans-Bold.woff') format('opentype');
+    font-weight: bold;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'worksans';
+    src: url('./css/fonts/worksans/WorkSans-Italic.woff') format('opentype');
+    font-weight: normal;
+    font-style: oblique;
+  }
+  
+  @font-face {
+    font-family: 'worksans';
+    src: url('./css/fonts/worksans/WorkSans-Bold.woff') format('opentype');
+    font-weight: bold;
+    font-style: oblique;
+  }
+
+
 body {
     font-size: calc(1rem + 1vw);
     min-height: 100vh;
@@ -34,7 +58,7 @@ h3 {
 }
 
 #header {
-    font-family: monospace;
+    font-family: 'worksans', sans-serif;
     font-size: calc(1.2rem + 0.5vw); /* Responsive font size for #header */
     margin-top: 20px;
     color: #e5e5e5;

cursor.js

@@ -1,6 +1,6 @@
 
 // <![CDATA[
-var colour="#4047B0" ; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"
+var colour="random" ; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"
 var sparkles=50;
 
 /****************************

index.html

@@ -13,16 +13,31 @@
 
  <div class="grid-wrap">
     <h1>
-     BackPlaces
+      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 463.23 125.12">
+        <defs>
+          <style>
+            .cls-1 {
+              fill: #fff;
+              font-family: fs-jenson-1-italic, 'fs jenson 1 italic';
+              font-size: 130px;
+              font-style: italic;
+              letter-spacing: .04em;
+            }
+          </style>
+        </defs>
+        <text class="cls-1" transform="translate(0 102.78)"><tspan x="0" y="0">Backplaces</tspan></text>
+      </svg>
+
     </h1>
     <div>
     <h2>
-        Welcome.
+        welcome.
-        For now, BackPlaces is an online publication and collection. 
+        <br>
+        for now, backplaces is an online publication and collection. 
         <br>
-        It is a village full of stories on the tender backrooms of the internet. 
+        it's a village full of stories on the tender backrooms of the internet. 
         <br>
-        Before you go in, let the code strip you of your body and go in with what it left behind. 
+        before you go in, let the code strip you of your body and go in with what it left behind. 
     </h2>
     </div>
     <h3>

webweave.html

@@ -1,25 +1,24 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>webweaving</title>
+    <title>webweave</title>
     <link rel="stylesheet" href="css/style_webweave.css">
 </head>
 <body>
-    <p id="header">webweave by clicking on the image</p>
+    <p id="header">webweave by clicking on a comment</p>
     <div id="image-container"></div>
    
 </body>
 <p id="footer">credits for the webweaving go to sea--shore.tumblr.com</p>
 <script>
     const imageContainer = document.getElementById("image-container");
-    const startText = document.getElementById("start-text");
     const header = document.getElementById("header");
     const footer = document.getElementById("footer");
     let currentIndex = 0;
     let creditsDisplayed = false;
     
     function showNextImage() {
-        if (currentIndex < 13) {
+        if (currentIndex < 8) {
             const image = document.createElement("img");
             image.src = `images/web${currentIndex}.jpg`;
             image.alt = `Image ${currentIndex}`;
@@ -29,8 +28,8 @@
             // Add a click event to each image to show the next one
             image.addEventListener("click", showNextImage);
         }
-        if (currentIndex === 13 && !creditsDisplayed) {
+        if (currentIndex === 8 && !creditsDisplayed) {
-            startText.style.display = "block"; // Show the text when all images are displayed.
+            header.style.display = "none"; // Hide the header when all images are displayed.
             footer.style.display = "block"; // Show the footer text at the bottom
             creditsDisplayed = true;
         }