+
+
+
diff --git a/cheesecake/recipes/boxed.html b/cheesecake/recipes/boxed.html
new file mode 100644
index 0000000..e59eb53
--- /dev/null
+++ b/cheesecake/recipes/boxed.html
@@ -0,0 +1,45 @@
+
+
+
caramelised almonds
+
+
nuts for days! molten sugar is not only very hot, but very sticky.
+
+
+
+- two spoonfuls of butter (optional for butter taste)
+- five tablespoons or so of granulated sugar (white sugar is good, brown is fine too but nothing too coarse so it melts evenly)
+three big handfuls (e.g. 250g) of almonds
+
- sprinkle of salt
+
+
+
+
+
+- lay out a bit of baking paper, or else ready a smooth heatproof surface like a place.
+
- heat a skillet or any wide pan, a less sticky one is easier.
+
- melt the butter without burning it, turn the heat to medium-low if you're at risk.
+
- scatter sugar in the pan in an even layer
+
- don't interfere with the sugar; watch it slowly melt to a caramel, adjusting the position of the heat if one side is melting too quickly – it must melt evenly without burning. This should take about 3-4min.
+
- once the sugar into a scalding hot golden brown ooze, or at the first sight of any sugar smoking/burning, stir all the nuts and coat them well in caramel. The nuts will also help to cool down any burning sugar before it becomes a black gooey mess.
+
- add a generous sprinkle of salt into the mix if you like that sort of thing.
+
- after the nuts are well coated - 10 seconds should do it - tip them out onto your surface and spread them evenly with a spatula while the caramel is soft. it will be brittle soon.
+
- fill the (hot) pan with water so the caramel dissolves off cleanly. let the almonds cool before breaking them up.
+
- once cooled, store them in an airtight container. don't store them while their still warm or the condensation will make them sticky.
+
+
+
+
+
+
diff --git a/css/style_luddite.css b/css/style_luddite.css
index ac00aed..78e364a 100644
--- a/css/style_luddite.css
+++ b/css/style_luddite.css
@@ -61,6 +61,12 @@ body {
left: 100%;
}
+.text {
+ background-color: #ebebe6;
+ margin: 10px;
+ padding: 6px;
+}
+
.last-clicked .text-box {
display: block;
margin-left: 20px;
diff --git a/css/style_summary.css b/css/style_summary.css
new file mode 100644
index 0000000..345e77d
--- /dev/null
+++ b/css/style_summary.css
@@ -0,0 +1,125 @@
+@font-face {
+ font-family: 'worksans';
+ 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;
+ color: #130149;
+ min-height: 100vh;
+ background-color: #ebebe6;
+ margin-top: 0px;
+ box-sizing: border-box;
+ display: flex;
+}
+
+.image-container {
+ display: flex;
+ flex-direction: column;
+ margin-left: 20px;
+}
+
+.link {
+ margin-bottom: 30px;
+ cursor: pointer;
+ position: relative;
+}
+
+.box-container {
+ display: none;
+ color: #130149;
+ border-radius: 6px;
+ padding: 6px;
+ margin-left: 20px;
+ font-size: 18px;
+ width: 65vw;
+ position: absolute;
+ top:70px;
+ left: 100%;
+}
+
+.text {
+ background-color: #ebebe6;
+ margin: 10px;
+ padding: 6px;
+}
+
+.last-clicked .text-box {
+ display: block;
+ margin-left: 20px;
+}
+
+.last-clicked .box-container {
+ display: flex;
+ flex-direction: column;
+}
+
+#hut {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ width: 100px;
+ height: auto;
+ z-index: 1000;
+}
+
+details {
+ padding-left: 1.5vw;
+ padding-top: 10px;
+ display: block;
+ line-height: 2;
+ max-width: 800px;
+}
+summary {
+ cursor: se-resize;
+ list-style: none;
+}
+
+summary::after {
+ content: '☜';
+ font-size: 30px;
+ float: right;
+ padding-left: 1em;
+}
+
+summary::selection {
+ color: #880808;
+}
+
+@keyframes details-show {
+ from {
+ opacity: 0;
+ }
+}
+
+details[open] > summary::after {
+ content: '☟';
+}
+
+details[open] > *:not(summary) {
+ animation: details-show 990ms;
+}
+
diff --git a/images/close.png b/images/close.png
new file mode 100644
index 0000000..c5bd304
Binary files /dev/null and b/images/close.png differ
diff --git a/index.html b/index.html
index 3de4a3d..f9e2bca 100644
--- a/index.html
+++ b/index.html
@@ -65,7 +65,7 @@