Post Braun prods

mcthomas · Oct 7, 2024 · 0d8d14f · 0d8d14f
1 parent 9259412
commit 0d8d14f
Show file tree

Hide file tree

Showing 15 changed files with 319 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
       var gameMode = false;
     </script>
     <script src="scripts/effects.js"></script>
-    <script src="scripts/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
     <script src="scripts/logo.js"></script>
     <script src="scripts/neko.js"></script>
   </head>

diff --git a/mind-nodes/index.html b/mind-nodes/index.html
@@ -22,7 +22,7 @@
       var width = .95*window.innerWidth;
       document.getElementById('mobileViewport').setAttribute('content',`width=${width}`);
     </script>
-    <script src="../scripts/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
     <script src="scripts/nodes.js"></script>
   </head>
   <body class="framed">
@@ -32,7 +32,7 @@
     <div id="nodes" class="fade-in"></div>
     <div id="contents">
       <a>Contents</a>
-      <br />
+      <br/>
       <br/><br/><br/>
       <a href="https://colorforms.works/mind-nodes/minimalism-in-art">
       <div class="post">
@@ -41,8 +41,16 @@
               &nbsp; 01/23/2022 - Minimalism In Art
             </p>
       </div>
-    </a>
-      <br />
+      </a>
+      <a href="https://colorforms.works/mind-nodes/three-aesthetically-classic-braun-products-you-can-buy-today">
+        <div class="post">
+              <img src="style/images/bkmk-2.png"/>
+              <p>
+                &nbsp; 10/06/2024 - Three Aesthetically Classic Braun Products You Can Buy Today
+              </p>
+        </div>
+      </a>
+      <br/>
     </div>
     <div id="footer">
       <div id="home">

diff --git a/mind-nodes/minimalism-in-art/index.html b/mind-nodes/minimalism-in-art/index.html
@@ -24,23 +24,23 @@
     <div id="nodes" class="fade-in"></div>
     <div id="Minimalism-In-Art" class="entry">
       <a class="header" href="#Minimalism-In-Art">Minimalism In Art</a>
-      <br />
+      <br>
       <a class="sub date">01/23/2022</a>
-      <br/><br/><br/><br/>
+      <br><br><br><br>
       <img src="style/images/calder.jpg" />
       <a class="sub">Alexander Calder - Untitled (1941)</a>
-      <br/>
+      <br>
       <p class="contents">
       	Art affects the way we perceive a physical space, in how it harmonizes with our headspace.  At first glance, excessive detail helps to bring form and structure to a composition that might otherwise lack character.  But details aren’t a necessary ingredient for complexion.  Oftentimes, your intuition is the best catalyst for appreciating art, and the personal meaning you derive from it may come after the fact.
       Pieces originating from art movements such as realism are not hard to appreciate, because their sheer abundance of detailing evokes appreciation without requiring much in the way of interpretation.  Such pieces are instantly gratifying to admire, because of their earthly appearance and presentation.
-      <br/><br>
+      <br><br>
       But these first impressions may come at a cost.  As time passes, your degree of fascination is likely to wane.  Related styles leave little to interpret for yourself, to “personalize” as you conceptualize them; the context is immediately apparent.  If the scene depicted doesn’t strongly resonate with a relatable experience, a sight you’ve seen or a place you wish you could visit, then how can it sustain personal meaning for you over time?  This dilemma is not unique to nature scenes, but instead to any piece leaving less to the imagination.
-      <br /><br />
+      <br><br>
       The diminishing returns in complexity at first sight are ironic.  Conversely, your first impression of a style making use of minimalism might be underwhelming.  But a patient interpretation of an abstract piece has near guaranteed uniqueness and lasting appeal.  “Patient” in this case means letting your intuition take over, instead of your brute-forced rationale.  The first idea in your head at each consecutive glance can form a myriad of surreal and abstract scenes, familiar or otherwise.  And this ultimately increases accessibility to a given piece, as you connect with it and personalize your interpretation.
       </p>
       <img src="style/images/dialogue.jpeg" />
       <a class="sub">Lee Ufan - Dialogue (2018)</a>
-      <br />
+      <br>
       <p class="contents">
       This accessibility- appreciating a minimalistic form, without need to distinguish exactly which details draw you in- is almost zen-like.  Apart from conventional art, it’s especially challenging to minimize complexity and clutter when designing physical tools and digital interfaces.  This intention for user accessibility lies at the heart of Dieter Rams’ “Less, But Better” philosophy.  Intentional, undistracting, focused design is rewarded in how it blurs the boundaries of what art can be, spilling into ecosystems of intuitive physical tools, electronics, and even music.
       </p>
@@ -49,14 +49,14 @@
         <img src="style/images/ipod.png" />
       </div>
       <a class="sub">Dieter Rams - T3 (1958) | Tony Fadell, Jony Ive, Steve Jobs - iPod (2001)</a>
-      <br />
+      <br>
       <p class="contents">
       Some of the most famous pieces borrowing from minimalism, e.g. from the De Stijl and Bauhaus movements, make use of primary color accents.  These colors’ ability to create a spectrum of hues are befitting to the subtler appeal of these pieces at first glance, while offering a mental palette for personalization.  When considering an artist’s intentions, one can also appreciate how the simplest forms are rooted in much more complex scenes.  Many such pieces are true abstractions, after all.
       </p>
       <img src="style/images/mondrian.png" />
       <a class="sub">Piet Mondrian - Tableau No. IV; Lozenge Composition (1924/1925)</a>
-      <br />
-      <br />
+      <br>
+      <br>
     </div>
     <div id="footer">
       <div id="home">

diff --git a/mind-nodes/minimalism-in-art/style/style.css b/mind-nodes/minimalism-in-art/style/style.css
@@ -23,7 +23,7 @@
         max-height: 17px;
         padding: 8px;
         padding-top: 7px;
-        padding-bottom: 6px;
+        padding-bottom: 5px;
     }
 }
 @media only screen and (min-device-width : 200px) and (max-device-width : 480px) {
@@ -54,7 +54,7 @@
 @font-face {
   font-family: "Hairline";
   src: url("../../../style/fonts/Hairline.ttf") format("truetype");
-  font-weight: 100;
+  font-weight: 150;
 }
 /*begin:layout*/
 #title {

diff --git a/mind-nodes/scripts/nodes.js b/mind-nodes/scripts/nodes.js
@@ -7,7 +7,8 @@ var output = function (input) {
     [255, 45, 85], [255, 59, 48], [255, 149, 0], [255, 204, 0], [142, 142, 147]
   ];
   var blogLinks = [
-    "https://colorforms.works/mind-nodes/minimalism-in-art"
+    "https://colorforms.works/mind-nodes/minimalism-in-art",
+    "https://colorforms.works/mind-nodes/three-aesthetically-classic-braun-products-you-can-buy-today"
   ];
   var lastNodeHovered = null;
 

diff --git a/mind-nodes/scripts/p5.min.js b/mind-nodes/scripts/p5.min.js
diff --git a/mind-nodes/style/style.css b/mind-nodes/style/style.css
@@ -20,10 +20,10 @@
         max-width: 19px;
         padding: 8px;
         padding-top: 7px;
-        padding-bottom: 6px;
+        padding-bottom: 5px;
     }
     .post {
-      padding-left: 250px;
+      padding-left: 40px;
     }
 }
 @media only screen and (min-device-width : 200px) and (max-device-width : 480px) {
@@ -54,7 +54,7 @@
 @font-face {
   font-family: "Hairline";
   src: url("../../style/fonts/Hairline.ttf") format("truetype");
-  font-weight: 100;
+  font-weight: 150;
 }
 /*begin:layout*/
 #title {

diff --git a/mind-nodes/three-aesthetically-classic-braun-products-you-can-buy-today/index.html b/mind-nodes/three-aesthetically-classic-braun-products-you-can-buy-today/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Three Aesthetically Classic Braun Products You Can Buy Today</title>
+    <link rel="stylesheet" href="style/style.css" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="64x64"
+      href="../../style/images/favicon.png"
+    />
+    <meta charset="UTF-8" />
+    <meta name="description" content="" />
+    <meta name="author" content="Matt Thomas" />
+    <meta id="mobileViewport" name="viewport">
+    <script>
+      var width = .95*window.innerWidth;
+      document.getElementById('mobileViewport').setAttribute('content',`width=${width}`);
+    </script>
+  </head>
+  <body class="framed">
+
+    <div id="nodes" class="fade-in"></div>
+    <div id="Minimalism-In-Art" class="entry">
+      <a class="header" href="#Three-Aesthetically-Classic-Braun-Products-You-Can-Buy-Today">Three Aesthetically Classic<br>Braun Products You Can Buy Today</a>
+      <br>
+      <a class="sub date">10/06/2024</a>
+      <br><br><br><br>
+      <img src="style/images/braun-timeline.png" />
+      <br>
+      <p class="contents">
+        Braun's task of finding its identity in today's markets is difficult and complicated. This is due in part to Dieter Rams' departure from Braun in 1997, and its individual divisions having been under changing ownership. Despite this, Braun has made encouraging strides under its current design lead, Oliver Grabes, including the revival of its audio category.  And several products remain in their catalog which markedly reflect the timeless aesthetic of classic designs from Dieter Rams and his talented team.      
+      </p>
+      <a href="https://www.amazon.co.jp/-/en/M-1010-Electric-Portable-Amazon-co-jp-Exclusive/dp/B09NR6YC6G">
+        <img src="style/images/braun-mini.png" style="top: 20px;"/>
+      </a>
+      <a class="sub">Braun - Pocket Shaver (2021)</a>
+      <br>
+      <p class="contents">
+        The latest among them is the Pocket Shaver Mini, exhibiting subtle innovation within their strongest category, while furthering the minimalist aesthetic of familiar products from Braun's past (including a specific throwback with this familiar orangey yellow hue).
+      <br><br>
+        At the time of writing, it can be purchased exclusively from Amazon Japan, and can ship outside of Japan to select countries (USA included).
+      </p>
+      <br><br>
+      <a href="https://www.amazon.de/-/en/Braun-BNE001BK-Calculator-Black/dp/B00DUDU2Q6">
+        <img src="style/images/braun-calc.png" style="top: 10px;"/>
+      </a>
+      <a class="sub">Braun - BNE001BK Calculator (2013)</a>
+      <br>
+      <p class="contents">
+        The BNE001BK calculator, a mostly-faithful reissue of the 1987 ET66 calculator, is a straightforward and honest tribute featuring one of Rams' meticulously curated color palettes.  It is mostly faithful to the original.
+      <br><br>
+        At the time of writing, it can be purchased exclusively from Amazon Germany in limited capacity from sellers wiling to ship to your country (currently there is a reasonable offering that ships to the USA).  It was only recently discontinued from from Braun's Amazon storefronts in other countries.
+      </p>
+      <a href="https://www.amazon.com/BRAUN-BC05W-Travel-Wristwatch-Modern/dp/B0CJFV659Y">
+        <img src="style/images/braun-clock.png" style="top: 10px;"/>
+      </a>
+      <a class="sub">Braun - BC05W Travel Alarm Clock (2014)</a>
+      <p class="contents" style="padding-bottom: 10px;">
+        The BC05W Travel Alarm Clock is a simple, compact analog clock.  What sets it apart from their other stationary clocks, is its inclusion of the vintage red, green, and orange color accents across the clock face and buttons, as well as its slotted speaker holes.  This latter detail, though subtle, is a classic design element otherwise absent from Braun's product catalog today.
+      <br><br>
+        At the time of writing, it is available from both braun-clocks.com and Amazon USA.  Braun also continues to sell other stationary clocks, wall clocks, and watches, many of which carry forward other classic designs from Dieter Rams, Dietrich Lubs, and others.
+      </p>
+    </div>
+    <div id="footer">
+      <div id="home">
+        <a href="https://colorforms.works/mind-nodes">
+          <img src="style/images/home.png"
+        /></a>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/...thetically-classic-braun-products-you-can-buy-today/style/images/braun-calc.png b/...thetically-classic-braun-products-you-can-buy-today/style/images/braun-calc.png
diff --git a/...hetically-classic-braun-products-you-can-buy-today/style/images/braun-clock.png b/...hetically-classic-braun-products-you-can-buy-today/style/images/braun-clock.png
diff --git a/...thetically-classic-braun-products-you-can-buy-today/style/images/braun-mini.png b/...thetically-classic-braun-products-you-can-buy-today/style/images/braun-mini.png
diff --git a/...ically-classic-braun-products-you-can-buy-today/style/images/braun-timeline.png b/...ically-classic-braun-products-you-can-buy-today/style/images/braun-timeline.png
diff --git a/...ee-aesthetically-classic-braun-products-you-can-buy-today/style/images/home.png b/...ee-aesthetically-classic-braun-products-you-can-buy-today/style/images/home.png