dithered the images, doesnt look good...

e-s-l · Jun 16, 2024 · 59eaa2b · 59eaa2b
1 parent 968d60c
commit 59eaa2b
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,8 @@ This is a perpetual work in progress, so there will always be lots to do...
 But to name some of them:
 
 <ul>
+    <li> Dither the images (to reduce file size): c.f. doodad.dev/dither-me-this/
+    <li> Make text color complement back ground color (4 accessibility)
     <li> Media Queries for mobile friendly design... Also need to account for light/dark themes... </li>
     <li> Add an 'official' CV... </li>
 </ul>
diff --git a/experiment_1/index.html b/experiment_1/index.html
@@ -50,20 +50,22 @@ <h1>Jeff Vandameer</h1>
             <a href="../main/about.html"><p> Would you like to know more? </p></a>
           </div>
 
-          <div class="square-loader">
-              <div class="square-2">
+          <a href="../main/about.html">
+            <div class="square-loader">
                 <div class="square-2">
                   <div class="square-2">
                     <div class="square-2">
                       <div class="square-2">
                         <div class="square-2">
-                          <div class="square-2"></div>
+                          <div class="square-2">
+                            <div class="square-2"></div>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-              </div>
-          </div>
+                </div>
+            </div>
+          </a>
 
         </footer>
 

diff --git a/images-dithered/analog-1.png b/images-dithered/analog-1.png
diff --git a/images-dithered/analog-2.png b/images-dithered/analog-2.png
diff --git a/images-dithered/analog-3.png b/images-dithered/analog-3.png
diff --git a/images-dithered/cable-1.png b/images-dithered/cable-1.png
diff --git a/index.html b/index.html
@@ -11,22 +11,22 @@
     <body>
         <nav>
             <ul class="top">
-                <li>I.
+                <li><p>I.</p>
                     <ul class="sub-list">
-                        <li><a href="./main/about.html">About</a></li>
-                        <li><a href="./main/research.html">Research</a></li>
-                        <li><a href="https://github.com/e-s-l">Code</a></li>
+                        <li><a href="./main/about.html"><p>About</p></a></li>
+                        <li><a href="./main/research.html"><p>Research</p></a></li>
+                        <li><a href="https://github.com/e-s-l"><p>Code</p></a></li>
                     </ul>
                 </li>
-                <li>II.
+                <li><p>II.</p>
                     <ul>
-                        <li><a href="./SMPTE_color_bars/smpte_color_bars.html">Site 1</a></li>
-                         <li><a href="https://934121.neocities.org/">Site 2</a></li>
+                        <li><a href="./SMPTE_color_bars/smpte_color_bars.html"><p>Site 1</p></a></li>
+                         <li><a href="https://934121.neocities.org/"><p>Site 2</p></a></li>
                     </ul>
                 </li>
                 <li>III.
                     <ul>
-                        <li><a href="./index.html">...</a></li>
+                        <li><a href="./index.html"><p>...</p></a></li>
                     </ul>
 
                 </li>

diff --git a/main-styles.css b/main-styles.css
@@ -1,5 +1,5 @@
 body {
-    background-image: url('./images/analog-1.jpg');
+    background-image: url('./images-dithered/analog-1.png');
     background-size: cover;
     background-repeat: repeat;
     width: 100vw;
@@ -14,6 +14,17 @@ nav {
     flex: wrap;
     justify-content: space-between;
     align-items: center;
+    width: 20vw;
+    margin-left: 10vw;
+
+}
+
+nav {
+    backdrop-filter: hue-rotate(270deg)  blur(2px);
+    display: inline-flex;
+    background-color: rgba(255,255,255,0.5);
+    padding: 2px;
+    border-radius:2em;
 }
 
 
@@ -30,7 +41,7 @@ ul > li {
 
 .top {
     margin: auto;
-    margin-left: 10vh;
+    margin-left: 1vh;
     margin-top: 0vh;
     padding: 2vw;
 }
diff --git a/main/about-styles.css b/main/about-styles.css
@@ -26,16 +26,15 @@ img {
 /* ... */
 
 body {
-    background-image: url('../images/analog-2.jpg');
+    background-image: url('../images-dithered/analog-2.png');
     background-repeat: repeat;
     background-size: cover;
     width: 100vw;
     height: 100vh;
-
 }
 
 .main {
-    backdrop-filter: hue-rotate(240deg)  blur(2px);
+    backdrop-filter: hue-rotate(270deg)  blur(2px);
     padding: 20px;
     margin: 5%;
     border-radius: 2em;
@@ -45,6 +44,12 @@ h1 {
     text-align: center;
 }
 
+p {
+    display: inline-flex;
+    background-color: rgba(255,255,255,0.5);
+    padding: 2px;
+}
+
 /*.
  * flex-wrap: wrap;
  *  flex-direction: column;

diff --git a/main/about.html b/main/about.html
@@ -21,7 +21,7 @@ <h1> Hello. </h2>
                     <p>Now I work in geodesy & with radio telescopes.</p>
                 </div>
                 <div>
-                    <p>I lived in Tasmania, Australia my entire life until I moved to Svalbard.</p>
+                    <p>I lived in Tasmania, Australia but now I am in Svalbard.</p>
                     <p>The population of Hobart is 250,000.</p>
                     <p>The population of Ny Aalesund is 150, at best.</p>
                 </div>
@@ -33,7 +33,7 @@ <h1> Hello. </h2>
             </div>
         </div>
         <footer>
-            <p> <a href="../index.html">Return </a> | <a href="./research.html"> Research </a> </p>
+             <a href="../index.html"><p>Return</p> </a> | <a href="./research.html"><p> Research</p> </a>
         </footer>
     </body>
 </html>
diff --git a/main/research-styles.css b/main/research-styles.css
@@ -38,7 +38,7 @@ img {
 /*...*/
 
 body {
-    background-image: url('../images/analog-3.jpg');
+    background-image: url('../images-dithered/analog-3.png');
     background-repeat: repeat;
     background-size: cover;
     width: 100vw;
@@ -47,7 +47,7 @@ body {
 }
 
 article {
-    backdrop-filter: hue-rotate(240deg)  blur(5px);
+    backdrop-filter: hue-rotate(240deg)  blur(5px) opacity(100%);
     padding: 20px;
     margin: 5%;
     border-radius: 2em;
@@ -58,6 +58,12 @@ li {
     padding: 1em;
 }
 
+p {
+    display: inline-flex;
+    background-color: rgba(255,255,255,0.5);
+    padding: 2px;
+}
+
 /* ... */
 
 footer {
@@ -67,6 +73,7 @@ footer {
     width: 100%;
     text-align: center;
     padding: 2em;
+    font-weight: bold;
 }
 
 /*...*/
diff --git a/main/research.html b/main/research.html
@@ -25,7 +25,7 @@
             <p> Though I am learning lots, I haven't had the time to produce research.</p>
         </article>
         <footer>
-            <p> <a href="../index.html"> Return </a> | <a href="./about.html"> About </a> </p>
+            <a href="../index.html"> <p>Return</p> </a> | <a href="./about.html"> <p>About </p></a>
         </footer>
     </body>
 </html>