Updated website with issued article.

docs/assets/sass/main.css

@@ -264,8 +264,22 @@ html, body {
   }
 }
 .close_menu {
-  /*padding: 0px;*/
-  text-align: left;
+  position: sticky;
+  top: 0;
+  width: 100%;
+  background-color: #3D4040;
+  text-align: center;
+}
+.close_menu button {
+  margin: 1%;
+  padding: 1%;
+  border-radius: 5%;
+  border: none;
+  font-size: 1rem;
+  cursor: pointer;
+}
+.close_menu button:hover {
+  background-color: darkgrey;
 }
 
 .close_button {
@@ -280,25 +294,73 @@ html, body {
   width: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-  border-radius: 10%;
+  border-radius: 2.5%;
+  margin: auto;
+  display: block;
   /*transform: translate(5%, 0);*/
 }
-.popup_article p, .popup_article figcaption, .popup_article ul, .popup_article h1, .popup_article h2, .popup_article h3, .popup_article a {
+@media all and (min-width: 900px) {
+  .popup_article img {
+    max-height: 50%;
+  }
+}
+@media all and (min-width: 1200px) {
+  .popup_article img {
+    width: 85%;
+  }
+}
+@media all and (min-width: 1800px) {
+  .popup_article img {
+    width: 75%;
+  }
+}
+.popup_article p, .popup_article figcaption, .popup_article ul, .popup_article h2, .popup_article h3, .popup_article a {
   margin-bottom: 2.5%;
-  margin-top: 2.5%;
+  margin-top: 5%;
+}
+@media all and (min-width: 600px) {
+  .popup_article p, .popup_article figcaption, .popup_article ul, .popup_article h2, .popup_article h3, .popup_article a {
+    margin-top: 3.5%;
+  }
+}
+@media all and (min-width: 900px) {
+  .popup_article p, .popup_article figcaption, .popup_article ul, .popup_article h2, .popup_article h3, .popup_article a {
+    margin-top: 2.5%;
+  }
 }
 .popup_article h1 {
   font-size: 1.5rem;
+  margin-top: 0%;
+  color: whitesmoke;
+}
+@media all and (min-width: 1800px) {
+  .popup_article h1 {
+    font-size: 2rem;
+  }
 }
 .popup_article h2 {
   font-size: 1.2rem;
+  color: whitesmoke;
+}
+@media all and (min-width: 1800px) {
+  .popup_article h2 {
+    font-size: 1.6rem;
+  }
 }
 .popup_article a {
   color: #bfc2c2;
   font-style: bold;
 }
 .popup_article a:hover {
   color: red;
+}
+.popup_article .large_link {
+  color: #bfc2c2;
+  font-style: bold;
+  text-align: center;
+}
+.popup_article .large_link:hover {
+  color: red;
   font-size: 1.5rem;
 }
 .popup_article ul {

docs/assets/sass/main.scss

@@ -316,8 +316,23 @@ html, body {
     }
 }
 .close_menu {
-    /*padding: 0px;*/
-    text-align: left;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    // z-index: 5000; /* > main page < overlay */
+    background-color: $primary_color_dark;
+    text-align: center;
+    button {
+        margin: 1%;
+        padding: 1%;
+        border-radius: 5%;
+        border: none;
+        font-size: 1rem;
+        cursor: pointer;
+        &:hover {
+            background-color: darkgrey;
+        }
+    }
 }
 .close_button {
     background-color: lightgrey;
@@ -328,24 +343,67 @@ html, body {
     img {
         width: 100%;
         object-fit: cover;
-        border-radius: 10%;
+        border-radius: 2.5%;
+        margin: auto;
+        display: block;
         /*transform: translate(5%, 0);*/
+        @include for-tablet-portrait-up {
+        }
+        @include for-tablet-landscape-up {
+            max-height: 50%;
+        }
+        @include for-desktop-up {
+            width: 85%;
+        }
+        @include for-big-desktop-up {
+            width: 75%;
+        }
     }
-    p, figcaption, ul, h1, h2, h3, a {
+    p, figcaption, ul, h2, h3, a {
         margin-bottom: 2.5%;
-        margin-top: 2.5%;
+        margin-top: 5%;
+
+        @include for-tablet-portrait-up {
+            margin-top: 3.5%;
+        }
+        @include for-tablet-landscape-up {
+            margin-top: 2.5%;
+
+        }
+        @include for-desktop-up {
+        }
+        @include for-big-desktop-up {
+        }
     }
     h1 {
         font-size: 1.5rem;
+        margin-top: 0%;
+        color: whitesmoke;
+        @include for-big-desktop-up {
+            font-size: 2rem;
+        }
     }
     h2 {
         font-size: 1.2rem;
+        color: whitesmoke;
+        @include for-big-desktop-up {
+            font-size: 1.6rem;
+        }
     }
     a {
         color: $primary_color_light;
         font-style: bold;
     }
     a:hover {
+        color: red;
+        // font-size: 1.5rem;
+    }
+    .large_link {
+        color: $primary_color_light;
+        font-style: bold;
+        text-align: center;
+    }
+    .large_link:hover {
         color: red;
         font-size: 1.5rem;
     }

docs/index.html

@@ -39,22 +39,22 @@ <h1>Data, science and engineering<br>Things that interest me</h1>
             <div class="article_item" onclick="open_article('artID_01')">
                 <img src="assets/images/art_itm_01.png">
                 <div>
-                    <h2>Lego brick colours</h2>
-                    <p class="header_hide">Exploring Lego bricks since 1949...</p>
+                    <h2>Boiled eggs?</h2>
+                    <p class="header_hide">Diffusion modeling to find the perfect boiled egg</p>
                 </div>
             </div>
            <div class="article_item" onclick="open_article('artID_02')">
-                <img src="assets/images/art_itm_02.webp">
+                <img src="assets/images/art_itm_02.png">
                 <div>
                     <h2>Lego database</h2>
                     <p class="header_hide">Building a Lego database based on Rebrickable...</p>
                 </div>
             </div>
             <div class="article_item" onclick="open_article('artID_03')">
-                <img src="assets/images/art_itm_03.jpg">
+                <img src="assets/images/art_itm_03.svg">
                 <div>
-                    <h2>Boiled eggs?</h2>
-                    <p class="header_hide">Diffusion modeling to find the perfect boiled egg</p>
+                    <h2>Lego brick investigation</h2>
+                    <p class="header_hide">Exploring Lego bricks since 1949...</p>
                 </div>
             </div>
             <div class="article_item" onclick="open_article('artID_04')">
@@ -122,11 +122,11 @@ <h1>Stuff about me</h1>
             <!--Article 01-->
             <div class="popup_container" id="artID_01">
                 <div class="close_menu">
-                    <button class="close_button" onclick="close_article('artID_01')">X</button>
+                    <button class="close_button" onclick="close_article('artID_01')">return</button>
                 </div>
                 <div class="popup_article">
                     <h1>Exploring Lego bricks since 1949...</h1>
-                    <img src="assets/images/art_itm_01.png">
+                    <img src="assets/images/art_itm_01.svg">
                     <figcaption>All the Lego brick colours. Saturation vs Hue, fill is brick colour.</figcaption>
                     <p>The following is an investigation into lego brick. The idea was inspired by Hanna Yan Han’s article <a href="https://medium.com/@yanhann10/the-color-history-of-lego-bricks-1e83ffea7b6d">here</a>. The data for this is from <a href="https://rebrickable.com/">rebrickable</a>. I created a local MySQL DB to access this data (DB set up notes are <a href="https://github.com/StevenAFowler/Lego_data/blob/main/Notes.md">here</a>).</p>
 
@@ -142,7 +142,7 @@ <h2>What I did</h2>
                     </ul>
 
                     <h2>Why I did it</h2>
-                    This project was undertaken based on an inspiration from <a href="https://medium.com/@yanhann10/the-color-history-of-lego-bricks-1e83ffea7b6d">Hanna Yan Han</a>, it provided an interesting set of data to execute my data analysis skills and my life long interest in Lego.
+                    <p>This project was undertaken based on an inspiration from <a href="https://medium.com/@yanhann10/the-color-history-of-lego-bricks-1e83ffea7b6d">Hanna Yan Han</a>, it provided an interesting set of data to execute my data analysis skills and my life long interest in Lego.</p>
 
                     <h2>What I learnt</h2>
                     <h3>From focusing on the colour of Lego Bricks:</h3>
@@ -153,7 +153,7 @@ <h3>From focusing on the colour of Lego Bricks:</h3>
                         <li>Then between 1997 to 2006 the number of colours quickly increased to over 125.</li>
                         <li>Then in 2007 there is an abrupt decrease to around 75 colours which is maintained until 2025.</li>
                     </ul>
-                    <img src="assets/images/art_01_1.png">
+                    <img src="assets/images/art_01_1.svg">
                     <figcaption>Number of Lego brick colours used per year. Fill is brick colour.</figcaption>
 
 
@@ -165,7 +165,7 @@ <h3>From focusing on the colour of Lego Bricks:</h3>
                         <li></li>
                     </ul>
                     <h3>Looking at sets between 1958 and 1967</h3>
-                    <img src="assets/images/art_01_2.png">
+                    <img src="assets/images/art_01_2.svg">
 
                     <h3>The Lime bricks from the 80’s that stood out</h3>
                     <ul>
@@ -179,21 +179,21 @@ <h3>Data trends in the 2000’s</h3>
                         <li>There is also a double peak in new sets in 2000 and 2015, with a dip in number in 2005.</li>
                         <li>Based on common knowledge about Lego business struggles at this time and there recovery some correlations were proposed, but without further data could not be verified.</li>
                     </ul>
-                    <img src="assets/images/art_01_3.png">
+                    <img src="assets/images/art_01_3.svg">
                     <figcaption>Number of Lego sets introduced per year.</figcaption>
                 </div>
             </div>
             <!--Article 02-->
             <div class="popup_container" id="artID_02">
                 <div class="close_menu">
-                    <button class="close_button" onclick="close_article('artID_02')">X</button>
+                    <button class="close_button" onclick="close_article('artID_02')">return</button>
                 </div>
                 <div class="popup_article">
                     <h1>lego database</h1>
                     <img src="assets/images/rebrickableDB_schema_v3.png">
                     <figcaption>Schema (v3) of Lego database from rebrickable.</figcaption>
                     <p>Lego is awesome! So when I discovered there was a data available to construct a database based on all the sets made since 1949, I could not resist having a look. So, the first step to exploring this data was to build a local database that I could query.</p>
-                    <a href="https://github.com/StevenAFowler/Lego_data/blob/main/Notes.md" target="_blank" rel="noopener noreferrer">gihub data</a> - for more detail
+                    <h2 class = "large_link"> <a href="https://github.com/StevenAFowler/Lego_data/blob/main/Notes.md" target="_blank" rel="noopener noreferrer">gihub data - for more detail</a></h2>
                     <h2>What I did</h2>
                     <p>Construction of the database was done in 5 stages:</p>
                     <ul>
@@ -214,11 +214,31 @@ <h2>Further information</h2>
             <!--Article 03-->
             <div class="popup_container" id="artID_03">
                 <div class="close_menu">
-                    <button class="close_button" onclick="close_article('artID_03')">X</button>
+                    <button class="close_button" onclick="close_article('artID_03')">return</button>
                 </div>
                 <div class="popup_article">
-                    <h1>Boiled eggs?</h1>
-                    <p>Example of solving diffusion problems</p>
+                    <h1>Exploring Lego bricks since 1949...</h1>
+                    <p>The following is an investigation into lego brick. The idea was inspired by Hanna Yan Han’s article <a href="https://medium.com/@yanhann10/the-color-history-of-lego-bricks-1e83ffea7b6d">here</a>. 
+                        The data for this is from <a href="https://rebrickable.com/">rebrickable</a>. 
+                        I created a local MySQL DB to access this data (DB set up notes are <a href="https://github.com/StevenAFowler/Lego_data/blob/main/Notes.md">here</a>).</p>
+                    <h2>Find out more...</h2>
+                    <p>The report on this investigation is here:</p>
+                    <h2 class = "large_link"><a href="Brick_colours.html" target="_blank" rel="noopener noreferrer">FULL INVESTIGATION - for full report</a></h2>
+                    <p>Or access the data on github:</p>
+                    <h2 class = "large_link"><a href="https://github.com/StevenAFowler/Lego_data/tree/main/Lego_brick_colours" target="_blank" rel="noopener noreferrer">gihub data - source</a></h2> 
+                    <h2>Example plots from the report</h2>
+
+                    <img src="assets/images/art_01_4.svg">
+                    <figcaption>All the Lego brick colours. Saturation vs Hue, fill is brick colour.</figcaption>
+
+                    <img src="assets/images/art_01_1.svg">
+                    <figcaption>Number of Lego brick colours used per year. Fill is brick colour.</figcaption>
+
+                    <img src="assets/images/art_01_2.svg">
+                    <figcaption>% of bricks by colour in theme from 1958 to 1967. The number of sets per theme is labelled in the centre of each plot.</figcaption>
+
+                    <img src="assets/images/art_01_3.svg">
+                    <figcaption>Number of Lego sets introduced per year.</figcaption>
                 </div>
             </div><!--Article 04-->
             <div class="popup_container" id="artID_04">