clean up projects a bit

_includes/project_summary.html

@@ -1,16 +1,23 @@
 <article class="h-entry project" data-model="{{post.model}}">
     <a class="u-uid u-url photo" href="{{ post.url }}" aria-label="Project: {{ post.title }}">
     {% assign default_thumbnail = post.assets | append: '/thumbnail.min.svg' %}
+    {% if post.draft %}
+    <div class="under-construction">
+    {% endif %}
+
     <img class="u-photo {{post.img.class}}"
         src = "{{post.img.src | default: default_thumbnail}}" 
         alt="{{post.img.alt | smartify}}"
         width=128 height=128>
+    {% if post.draft %}
+    </div>
+    {% endif %}
     </a>
 
     <section class = "text">
     <section class="title-date-container">
         <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
-        <time class="dt-modified" datetime="{{ post.last_modified_at | date_to_xmlschema }}">{{ post.last_modified_at | date: '%b %Y' }}</time>
+        <time class="dt-modified" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: '%b %Y' }}</time>
     </section> 
     <summary class="p-summary">{{ post.excerpt | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
     </section>

_projects/bathroom_shelf.md

@@ -4,6 +4,7 @@ layout: project
 excerpt: A little modification to an IKEA thingy.
 permalink: /projects/bathroom_shelf
 assets: /assets/projects/bathroom_shelf
+date: 2023-12-17
 
 img:
     alt: A small bathroom shelf.
@@ -18,7 +19,8 @@ We got this [IKEA shower shelf thing][shelf] from Ikea which has two sticky pads
 <!-- {% include mastodon_post.html post_id = "111822564173512216" %} -->
 
 <outline-model-viewer model = "/assets/projects/bathroom_shelf/models/model.glb" camera='{"type":"perspective","fov":30,"near":10,"far":10000,"position":[364.9,307.2,459.7],"rotation":[-0.5891,0.5833,0.3527],"zoom":250,"target":[0,0,0]}'>
-    <img class="outline-model-poster hs-wc" src = "{{page.assets}}/thumbnail.svg">
+    <img class="outline-model-poster no-wc" src = "{{page.assets}}/thumbnail.svg">
+    <p class="has-wc">Loading model...</p>
 </outline-model-viewer>
 
 

_projects/bike_lights.md

@@ -4,6 +4,7 @@ layout: project
 excerpt: Making a custom 3W dynamo light for a bike.
 permalink: /projects/bike_lights
 assets: /assets/projects/bike_lights
+date: 2023-11-06
 
 img:
     alt: A CAD model of a 3D printable mount for a common LED light onto a bike handlebar.

_projects/ceramics.md

@@ -5,6 +5,7 @@ excerpt: Ongoing explorations in making pots!
 permalink: /projects/ceramics
 assets: /assets/projects/ceramics
 models: /assets/projects/ceramics/models
+date: 2025-01-01
 
 img2024: /assets/images/2024/ceramics
 

_projects/downlight_bikelight.md

@@ -0,0 +1,22 @@
+---
+title: Downlight<br>Bikelight
+layout: project
+excerpt: An old ceiling mounted LED downlight becomes a chonky bike light.
+permalink: /projects/downlight_bikelight
+assets: /assets/projects/downlight_bikelight
+date: 2025-05-11
+
+img:
+  alt: A CAD model of a Bike light made from an old LED downlight.
+  class: invertable
+  src: /assets/projects/downlight_bikelight/thumbnail.png
+
+social_image: /assets/projects/downlight_bikelight/thumbnail.png
+model: /assets/projects//downlight_bikelight/models
+draft: True
+---
+
+<outline-model-viewer model = "{{page.model}}/fbx_export.glb" camera='{"type":"perspective","fov":30,"near":10,"far":10000,"position":[848.5,470.2,-294.9],"rotation":[-2.131,0.9915,2.214],"zoom":300,"target":[0,0,0]}'>
+    <img class="outline-model-poster no-wc" src = "{{page.assets}}/thumbnail.svg">
+    <p class="has-wc">Loading model...</p>
+</outline-model-viewer>

_projects/elegoo_mount.md

@@ -4,6 +4,7 @@ layout: project
 excerpt: A quick mount for a new hotend on an Elegoo Neptune 3D printer.
 permalink: /projects/elegoo_mount
 assets: /assets/projects/elegoo_mount
+date: 2024-04-13
 
 img:
   alt: A CAD model of a 3D printable mount for hotend on a 3D printer.
@@ -11,12 +12,14 @@ img:
   src: /assets/projects/elegoo_mount/thumbnail.png
 
 social_image: /assets/projects/elegoo_mount/thumbnail.png
+draft: True
 ---
 
 This is just a quick mount for a [BIQU H2V2](https://biqu.equipment/products/biqu-h2-v2-0-extruder) hotend on an Elegoo Neptune 2.
 
 <outline-model-viewer model = "{{page.assets}}/model.glb" camera='{"type":"perspective","fov":30,"near":10,"far":10000,"position":[364.9,307.2,459.7],"rotation":[-0.5891,0.5833,0.3527],"zoom":250,"target":[0,0,0]}'>
-    <img class="outline-model-poster" src = "{{page.assets}}/thumbnail.png">
+    <img class="outline-model-poster no-wc" src = "{{page.assets}}/thumbnail.svg">
+    <p class="has-wc">Loading model...</p>
 </outline-model-viewer>
 
 The mounting holes don't really line up a simple manner so I made this side arms that attach with some heat set inserts. When it's all tightened down it's rigid but I'm nevertheless having some issues with this the nozzle of this printer lifting up a fraction of a millimeter when it pulls in the filament and dropping back down on z retraction.

_projects/lasercut_stool.md

@@ -4,6 +4,7 @@ layout: project
 excerpt: A lasercut hexagonal wooden stool.
 permalink: /projects/lasercut_stool
 assets: /assets/projects/lasercut_stool
+date: 2023-08-29
 
 img:
     alt: A CAD model of the this hexagonal lasercut stool.
@@ -17,3 +18,8 @@ model: /assets/blog/weekend_builds_1/pot.glb
     <img class="outline-model-poster no-wc" src = "{{page.img.src}}">
     <p class="has-wc">Loading model...</p>
 </outline-model-viewer>
+
+
+<figure>
+    <img src="{{ page.assets }}/sketch.jpg">
+</figure>

_projects/lego_adapters.md

@@ -4,12 +4,14 @@ layout: project
 excerpt: Adapters to use common components with lego technic.
 permalink: /projects/lego_adapters
 assets: /assets/projects/lego_adapters
+date: 2023-10-22
 
 img:
     alt: 
     class: invertable
 
 social_image: /assets/projects/lego_adapters/thumbnail.png
+draft: true
 ---
 
 I've been looking at using Lego as a way to quickly prototype ideas.

_projects/montys_map.md

@@ -0,0 +1,86 @@
+---
+title: Monty's Map
+layout: project
+excerpt: Maybe the best birthday gift I've ever given or will ever give. A custom, one off, OS style foldable map for a friend.
+permalink: /projects/montys_map
+assets: /assets/projects/montys_map
+date: 2023-11-23
+draft: true
+
+img:
+  alt:
+  class: invertable
+  src: /assets/projects/montys_map/thumbnail.jpg
+
+social_image: /assets/projects/montys_map/gifting.jpg
+
+head: |
+  <link rel="stylesheet" href="/assets/js/leaflet/leaflet.css" />
+  <script src="/assets/js/leaflet/leaflet.js"></script>
+---
+
+A friend of mine makes maps and offered to get a one-off printed and folded OS style, I hatched a plan.
+
+Not being a map or geo person I decided to cheat a bit and do it by layering tiles intended for web maps. I scraped tiles from OSM maps being careful to cache the tiles and to only download a reasonable amount at a reasonable rate. I also pulled the strava running heatmap which I'm obsessed with. All those hidden little paths!
+
+I stuck a legend with a personal message on the rightmost fold and had my birthday map!
+
+<figure>
+<img src="/assets/images/2024/montys_map.jpg">
+</figure>
+
+<figure id="map" style="width:100%; height:500px;"></figure>
+
+Here's a small web viewer for the same data that lets you toggle different layers. I've only got the tiles for zoom level 15 so I've disabled the ability to zoom out too much to save your poor computer trying to load to many tiles into memory at once. You can zoom into level 17 to see a bit what it looks like when you lean really close and squint on the printed version.
+
+<script>
+    let map = L.map("map", {
+    attributionControl: false,
+    zoomControl: false,
+    }).setView([53.36895547, -1.5417251], 13);
+
+    const options = {
+    minNativeZoom: 15,
+    maxNativeZoom: 15,
+    minZoom: 14,
+    maxZoom: 17,
+    };
+
+    const base_maps = {};
+
+    const base = "/assets/projects/montys_map/tiles";
+    const layers = {
+    // "Stamen Toner Background": L.tileLayer(
+    //     `${base}/stamen_toner_background/{z}/{x}/{y}.png`,
+    //     options
+    // ),
+    "Open Topo Maps": L.tileLayer(
+        `${base}/open_topo_map/{z}/{x}/{y}.png`,
+        options
+    ).addTo(map),
+    Strava: L.tileLayer(`${base}/strava/{z}/{x}/{y}.png`, options).addTo(
+        map
+    ),
+    // "Stamen Toner Lines": L.tileLayer(
+    //     `${base}/stamen_toner_lines/{z}/{x}/{y}.png`,
+    //     options
+    // ),
+    "Stamen Labels": L.tileLayer(
+        `${base}/stamen_toner_labels/{z}/{x}/{y}.png`,
+        options
+    ).addTo(map),
+    Cycling: L.tileLayer(
+        `${base}/waymarked_cycling/{z}/{x}/{y}.png`,
+        options
+    ).addTo(map),
+    Hiking: L.tileLayer(
+        `${base}/waymarked_hiking/{z}/{x}/{y}.png`,
+        options
+    ).addTo(map),
+    };
+
+    map.addLayer(layers["Strava"]);
+    let layerControl = L.control.layers(base_maps, layers).addTo(map);
+</script>
+
+I find it fascinating to spot places where people walk or run that aren't marked on the normal map. Interesting places included a lake where people definitely aren't allowed to swim or kayak that nevertheless has a lot of activity on it! Strange patches where lines fan out and then come together at defined points (can you guess why?), and areas where the lines just completely scatter which I guess are grassy fields where people can walk any way they like. Which is more rare than you'd imagine!

_projects/projector_mount.md

@@ -4,6 +4,7 @@ layout: project
 excerpt: A mount for a projector underneath a shelf with a tilt swivel joint.
 permalink: /projects/projector_mount
 assets: /assets/projects/projector_mount
+date: 2023-01-31
 
 img:
     alt: A CAD model of a 3D printable mount for a common LED light onto a helmet.

_projects/tonis_map.md

@@ -1,27 +1,61 @@
 ---
 title: Toni's Map
+layout: project
 excerpt: A going away present for my friend Toni.
 permalink: /projects/tonis-map/
 assets: /assets/blog/maps/icons
 img:
-    src: /assets/projects/tonis_map/thumbnail.png
+  src: /assets/projects/tonis_map/thumbnail.png
-    class: invertable
+  class: invertable
-    alt: A black and white lineart map of London.
+  alt: A black and white lineart map of London.
+date: 2023-09-06
 
 social_image: /assets/projects/tonis_map/thumbnail.png
+head: |
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+  crossorigin=""/>
+  <!-- Make sure you put this AFTER Leaflet's CSS -->
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+  integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+  crossorigin=""></script>
+  <script src="https://unpkg.com/leaflet-simple-map-screenshoter"></script>
+  <script src="https://unpkg.com/file-saver/dist/FileSaver.js"></script>
+  <script src="/assets/js/domtoimage.min.js"></script>
 ---
 
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+A last minute leaving gift idea for a friend inspired me to finish my first actual laser cut map. I used leaflet.js to overlay the names of some places we had visited together in London onto those nice Stamen Design map tiles from before.
-    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-    crossorigin=""/>
-     <!-- Make sure you put this AFTER Leaflet's CSS -->
- <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
- integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
- crossorigin=""></script>
- <script src="https://unpkg.com/leaflet-simple-map-screenshoter"></script>
- <script src="https://unpkg.com/file-saver/dist/FileSaver.js"></script>
- <script src="/assets/js/domtoimage.min.js"></script>
 
+It was mostly made to be laser etched but you can see a crude web version here:
+
+<div id="map"></div>
+
+Now onto the lasing!
+
+<figure>
+<img src="/assets/blog/maps/fresh_off_the_press.jpeg">
+<figcaption>
+This is what it looks like straight off the laser cutter. The contrast is super washed out because the smoke from the cutting process darkens all the surrounding wood.
+</figcaption>
+</figure>
+
+I had a bunch of issues with getting that to work mostly based around the fact that these tiles are raster images that are intended for streaming to a zoomable and panable viewer on a screen. The design tradeoff of the maps don't quite make as much sense when you start transfering them to a static image. I did some hacks to use the tiles intended for a higher zoom level but you can only take that so far before the text starts getting unreadable.
+
+<figure>
+<img src="/assets/blog/maps/after_sanding.jpeg">
+<figcaption>
+To deal with the darkending from the smoke I sand the whole thing back with 80 grit sandpaper on an orbital sander. I did break a few small features off here and there but it's ok! 
+</figcaption>
+</figure>
+
+I think there is a better approach that involves getting raw OpenStreetMap data and rendering it directly using something like [QGIS and some kind of map style files](https://gis.stackexchange.com/questions/186808/how-to-create-high-quality-map-with-qgis-and-stamen-tiles) but that seems like a whole new deep rabbit hole I'm not ready to fall into just yet.
+
+<figure>
+<img src="/assets/blog/maps/the_final_reveal.jpeg">
+<figcaption>
+The final reveal!
+</figcaption>
+</figure>
 
  <style>
     .leaflet-pane {
@@ -29,10 +63,7 @@ social_image: /assets/projects/tonis_map/thumbnail.png
     }
 
     #map { 
-        /* height: 4100px;
+    height: 300px;
-        width: 4102px; */
-    
-    height: 100%;
     width: 100%;
     }
 
@@ -66,13 +97,8 @@ social_image: /assets/projects/tonis_map/thumbnail.png
 
  </style>
 
-    </head>
+<script>
-    
+    let Stamen_TonerBackground = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_background/{z}/{x}/{y}.{ext}', {
-    <body>
-        <div id="map"></div>
-
-        <script>
-    let Stamen_TonerBackground = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}.{ext}', {
     subdomains: 'abcd',
     minZoom: 0,
     maxZoom: 16,
@@ -81,16 +107,11 @@ social_image: /assets/projects/tonis_map/thumbnail.png
     });
 
     // Using detectRetina: false and manually adding @2x is a hack to export the retina tiles directly
-    let Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}@2x.{ext}', {
+    let Stamen_Toner = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_lines/{z}/{x}/{y}.{ext}', {
     subdomains: 'abcd',
     minZoom: 0,
     maxZoom: 16,
     ext: 'png',
-    maxNativeZoom: 13,
-    minNativeZoom: 13,
-    // tileSize: 512,
-    // zoomOffset: -1,
-    detectRetina: false,
     className: 'stamen'
     });
     const key = 'paglUJQl74h39APJmOFJ';
@@ -158,7 +179,7 @@ social_image: /assets/projects/tonis_map/thumbnail.png
     }
 
     let map = L.map('map', {
-        zoomSnap: 0.1,
+        // zoomSnap: 0.1,
     })
     map.addLayer(Stamen_Toner);
 
@@ -202,20 +223,20 @@ social_image: /assets/projects/tonis_map/thumbnail.png
         })}).addTo(map));
 
 
-	const ZoomViewer = L.Control.extend({
+    // const ZoomViewer = L.Control.extend({
-		onAdd() {
+    // 	onAdd() {
-			const gauge = L.DomUtil.create('div');
+    // 		const gauge = L.DomUtil.create('div');
-			gauge.style.width = '200px';
+    // 		gauge.style.width = '200px';
-			gauge.style.background = 'rgba(255,255,255,0.5)';
+    // 		gauge.style.background = 'rgba(255,255,255,0.5)';
-			gauge.style.textAlign = 'left';
+    // 		gauge.style.textAlign = 'left';
-			map.on('zoomstart zoom zoomend', (ev) => {
+    // 		map.on('zoomstart zoom zoomend', (ev) => {
-				gauge.innerHTML = `Zoom level: ${map.getZoom()}`;
+    // 			gauge.innerHTML = `Zoom level: ${map.getZoom()}`;
-			});
+    // 		});
-			return gauge;
+    // 		return gauge;
-		}
+    // 	}
-	});
+    // });
 
-	const zoomViewer = (new ZoomViewer()).addTo(map);
+    // const zoomViewer = (new ZoomViewer()).addTo(map);
 
 
     // const center = {lat: 51.53803381685164, lng: -0.09551626866416196};
@@ -233,8 +254,4 @@ social_image: /assets/projects/tonis_map/thumbnail.png
         el.getElementsBy .css({'width':newzoom,'height':newzoom});
     });
 
-             </script>
+</script>
-        
-    </body>
-</html>
-

_projects/toothbrush_shelf.md

@@ -4,6 +4,7 @@ layout: project
 excerpt: A shelf to put your toothbrush charger on.
 permalink: /projects/toothbrush_shelf
 assets: /assets/projects/toothbrush_shelf
+date: 2023-11-16
 
 img:
     alt: A CAD model of a small shelf to put a toothbrush right above the charging socket so that the cabling can be hidden inside the shelf.
@@ -11,7 +12,7 @@ img:
 
 social_image: /assets/projects/toothbrush_shelf/thumbnail.png
 model: /assets/blog/toothbrush_shelf/model/toothbrush_shelf.glb
-
+draft: true
 
 ---
 <outline-model-viewer model = "{{page.model}}" camera='{"type":"perspective","fov":30,"near":10,"far":10000,"position":[364.9,307.2,459.7],"rotation":[-0.5891,0.5833,0.3527],"zoom":250,"target":[0,0,0]}'>

_projects/triangle_shelves.md

@@ -0,0 +1,38 @@
+---
+title: Triangle Shelves
+layout: project
+excerpt: A bookcase to fit in a very particular place.
+permalink: /projects/triangle_shelves
+assets: /assets/projects/triangle_shelves
+date: 2023-02-08
+draft: true
+
+img:
+  alt: A line drawn CAD model of vector magnet.
+  class: invertable
+  src: /assets/projects/triangle_shelves/thumbnail.svg
+
+social_image: /assets/projects/triangle_shelves/thumbnail.png
+---
+
+This project, part of my Master's thesis in 2018, centered around the use of a Nitrogen-Vancancy defect in a nanoscale diamond to detect magnetic fields with ultra high resolution. We experimented with mounting such a nano-diamond to the tip of an atomic force microscope in order to produce field images. I built a 3d vector magnetometer in order to determine the axis of a defect in a nano-diamond.
+
+<outline-model-viewer model = "/assets/blog/vector_magnet/vector_magnet.glb" camera='{"type":"perspective","fov":30,"near":100,"far":10000,"position":[13.73,540.1,-1020],"rotation":[-2.655,0.0119,3.135],"zoom":428,"target":[0,0,0]}'>
+    <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
+    <p class="has-wc">Loading model...</p>
+</outline-model-viewer>
+
+Check out this interactive model of the magnetometer. The device has three pairs of copper Helmholtz coils that generate controlled, linear, magnetic fields in all three directions.
+
+Here's a cutaway view of the interior.
+
+<outline-model-viewer model = "/assets/blog/vector_magnet/vector_magnet_section.glb" spin=false camera='{"type":"perspective","fov":30,"near":100,"far":1000,"position":[-253.2,261.7,839],"rotation":[-0.3023,-0.2805,-0.08613],"zoom":2860.0091628398345,"target":[0,0,0]}' materials=flat ambient-light="5" directional-light="5">
+    <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
+    <p class="has-wc">Loading model...</p>
+</outline-model-viewer>
+
+**AFM Tip**: The atomic force microscope tip (dark blue) with a nano-diamond attached to the very tip. We want to figure out which was the axis the NV defect in this nano-diamond is pointing. To do that we need to expose it to different directions of magnetic field while also blasting it with light and radio waves.
+
+**PCB coil** For the radio wave blasting we have a single turn coil made on a PCB (green). I haven't cut the coil away so that you can see it's whole shape. We'll pump RF power into this tuned to the electronic transitions in the NV defect that we want to probe.
+
+**Microscope Objective** The microscope objective (lower with blue strip) allows us to optically pump the transitions in the NV defect (much like a laser) in order to keep electrons in excited quantum states that they wouldn't normally sit in.

_projects/usbc_power_station.md

@@ -4,6 +4,7 @@ layout: project
 excerpt: An ongoing quest to fix a problem I don't have.
 permalink: /projects/usbc_charging_station
 assets: /assets/projects/usbc_power_supply
+date: 2025-04-01
 
 img:
     src: /assets/projects/usbc_power_supply/thumbnail.svg

_projects/vector_magnet.md

@@ -4,6 +4,7 @@ layout: project
 excerpt: Make your magnetic fields all 3D like.
 permalink: /projects/vector_magnet
 assets: /assets/projects/vector_magnet
+date: 2018-10-01
 
 img:
     alt: A line drawn CAD model of vector magnet.
@@ -12,14 +13,14 @@ img:
 social_image: /assets/projects/vector_magnet/thumbnail.png
 
 ---
+This project, part of my Master's thesis in 2018, centered around the use of a Nitrogen-Vancancy defect in a nanoscale diamond to detect magnetic fields with ultra high resolution. We experimented with mounting such a nano-diamond to the tip of an atomic force microscope in order to produce field images. I built a 3d vector magnetometer in order to determine the axis of a defect in a nano-diamond.
+
 <outline-model-viewer model = "/assets/blog/vector_magnet/vector_magnet.glb" camera='{"type":"perspective","fov":30,"near":100,"far":10000,"position":[13.73,540.1,-1020],"rotation":[-2.655,0.0119,3.135],"zoom":428,"target":[0,0,0]}'>
     <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
     <p class="has-wc">Loading model...</p>
 </outline-model-viewer>
 
-The project centered around the use of a Nitrogen-Vancancy defect in a nanoscale diamond to detect magnetic fields with ultra high resolution. We experimented with mounting such a nano-diamond to the tip of an atomic force microscope in order to produce field images. I built a 3d vector magnetometer in order to determine the axis of a defect in a nano-diamond.
+Check out this interactive model of the magnetometer. The device has three pairs of copper Helmholtz coils that generate controlled, linear, magnetic fields in all three directions.
-
-Check out a little interactive model of the magnetometer below. The device has three pairs of copper Helmholtz coils that generate controlled, linear, magnetic fields in all three directions.
 
 Here's a cutaway view of the interior.
 

_sass/projects.scss

@@ -63,3 +63,24 @@ section.header.sticky {
         left: 0%;
     }
 }
+
+  .under-construction {
+    position: relative;
+    display: inline-block; /* or block, as needed */
+  }
+  .under-construction::before {
+    content: "🔧";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    padding: 5px;
+    background: #ffeb3b;            /* yellow triangle */
+    clip-path: polygon(0 0, 100% 0, 100% 100%);
+    display: flex;
+    justify-content: flex-end;
+    font-size: 16px;
+    color: grey;                    /* wrench color */
+    text-shadow: 0 0 1px rgba(0,0,0,0.3);
+  }