ada
/
backplaces
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

loads

Browse Source
master
ada 10 months ago
parent 4e20a6bdfc
commit 078857a31c
12 changed files with 9758 additions and 6 deletions
Show Stats Download Patch File Download Diff File

95
cheesecake/cheesecake.css
Unescape Escape View File

@ -0,0 +1,95 @@
body {
font-family: 'trebuchet ms', sans-serif;
color:#130149;
}
.recipeName {
position: absolute;
}
.recipeName:hover {
color: orange;
}
.letterBox {
border: 3px solid black;
display: inline-block;
padding: 20px;
width: 500px;
z-index: 10;
left: 50vw;
top: 290px;
margin-left:-270px;
position: absolute;
background-color: white;
}
.letterContents {
width: 90%;
position: relative;
}
#closeButton {
width: 30px;
height: 30px;
z-index: 10;
top: 0px;
background-image: url("../images/close.png");
background-size: cover;
text-align: justify;
position: relative;
float: right;
}
.line {
left: 50vw;
margin-left: -460px;
margin-top: 50px;
display: block;
width: 900px;
z-index: 2;
position: absolute;
}
.cls-1 {
fill: #130149;
pointer-events: none;
}
.bottom-left {
font-size: 30px;
position: absolute;
top: 0;
right: 50px;
}
#info {
width: 180px;
padding: 20px;
font-size: 20px;
z-index: 5;
position: absolute;
bottom: 20px;
left: 20px;
}
a {
text-decoration: none;
color:#130149;
}
#textbox {
margin-left: auto;
margin-right: auto;
width: 35vw;
margin-bottom: 80px;
}
ul {
list-style-type:none;
}
li {
padding-top: 5px;
}

40
cheesecake/cheesecake.html
Unescape Escape View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cheesecake intimacy</title>
<link rel="stylesheet" href="cheesecake.css">
<script src="jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="letterBox" class="letterBox" style="display:none">
<div id="closeButton" onClick='closeLetter()'></div>
<p id = "letterContents">
</p>
</div>
<div id="info">
<div onclick="openLetter()">✶ about</div>
<div onclick="window.location.href = &quot;ingredients.html&quot;">✶ ingredients</div>
</div>
<a href="recipes/boxed.html" id="boxed" class="recipeName" style="left: 200px; top: 160px;">boxed quark cheesecake</a>
<a href="recipes/aglaia.html" id="aglaia" class="recipeName" style="left: 1090px; top: 590px;">aglaia's birthday cheesecake</a>
<div class="bottom-left">
<p class="bigger-text"> the cheesecake intimacy spectrum</p>
</div>
<div class="line">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 715.4 506.78">
<path class="cls-1" d="m149.24,111.22c22.99-1.33,43.65,10.83,60.18,25.75s30.08,34.05,45.87,50.39c7.66,7.92,15.96,15.29,25.26,21.23,10.24,6.54,21.63,10.87,33.03,14.92,11.59,4.13,23.19,8.16,33.99,14.15,9.92,5.5,19.12,12.2,27.78,19.5,17.63,14.86,33.15,31.99,49.89,47.8s36.19,31.33,55.88,44.9c39.59,27.28,82.69,49.07,126.76,68.09,10.97,4.73,22.1,9.08,33.05,13.85s20.72,9.94,28.49,18.44c13.01,14.23,18.39,33.75,31.71,47.76,3.11,3.27,6.65,6.11,10.53,8.42,2.77,1.65,5.29-2.67,2.52-4.32-17-10.1-23.46-30.35-33.96-46-5.84-8.71-13.09-15.84-22.11-21.26-9.93-5.96-20.92-9.97-31.58-14.39-44.92-18.62-89.03-39.77-129.91-66.24-20.28-13.13-39.71-27.58-57.8-43.6-17.41-15.42-33.08-32.64-50.19-48.38s-35.5-29.05-57.16-37.51c-11.66-4.56-23.74-8.1-35.15-13.3s-20.54-11.6-29.32-19.61c-16.83-15.35-29.96-34.13-45.81-50.41-15.28-15.69-34.21-30.21-56.26-34.21-5.19-.94-10.45-1.28-15.72-.98-3.2.19-3.22,5.19,0,5h0Z"/>
</svg>
</div>
</body>
</html>

9302
cheesecake/jquery.js vendored
View File

File diff suppressed because it is too large Load Diff

24
cheesecake/main.js
Unescape Escape View File

@ -0,0 +1,24 @@
function closeLetter() {
$('.letterBox').hide()
}
function openLetter() {
$('#letterContents').html(` <p id = "letterContents">
i have nothing to say here yet i guess. pls remind me if this is still empty and you think it's weird.
<br><br>
ada`)
$('.letterBox').toggle()
}
for(var i=0; i<recipes.length; i++){
$('<div />', {
id: recipes[i].name,
class: 'recipeName',
click: function(){ window.location.href = 'recipes/' + (this.id) + '.html' },
})
.html(recipes[i].name.replace(/-/g, ' '))
.css({left: 35*(recipes[i][xAxis[0]]+10), top: (690-35*(recipes[i][yAxis[0]]+10)) })
.appendTo($('#canvasCover'))
}

43
cheesecake/recipes/aglaia.html
Unescape Escape View File

@ -0,0 +1,43 @@
<html lang="en"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>
<link rel="stylesheet" href="../cheesecake.css">
<script src="jquery.js"></script>
<title>aglaia's birthday cheesecake</title>
</head>
<body>
<a href="cheesecake/cheesecake.html">back to home</a>
<div id="textbox">
<h1>aglaia's birthday cheesecake</h1>
<div id="parts">
<ul>
<li>two spoonfuls of butter (optional for butter taste)</li>
<li>five tablespoons or so of granulated sugar (white sugar is good, brown is fine too but nothing too coarse so it melts evenly)</li>
<li><div id="imagewords">three big handfuls (e.g. 250g) of almonds<img id="img1" src="../assets/img/almond.png" alt="" /></li><br>
<li> sprinkle of salt</li>
</ul>
</div>
<div id="instructions"><ol>
<li> lay out a bit of baking paper, or else ready a smooth heatproof surface like a place.
<li> heat a skillet or any wide pan, a less sticky one is easier.
<li> melt the butter without burning it, turn the heat to medium-low if you're at risk.
<li> scatter sugar in the pan in an even layer
<li> 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.
<li> 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.
<li> add a generous sprinkle of salt into the mix if you like that sort of thing.
<li> 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.
<li> fill the (hot) pan with water so the caramel dissolves off cleanly. let the almonds cool before breaking them up.
<li> once cooled, store them in an airtight container. don't store them while their still warm or the condensation will make them sticky.
</div>
</div>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>

45
cheesecake/recipes/boxed.html
Unescape Escape View File

@ -0,0 +1,45 @@
<html lang="en"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>
<link rel="stylesheet" href="cheesecake.css">
<script src="jquery.js"></script>
<title>caramelised almonds</title>
</head>
<body>
<a href="cheesecake.html/">back to home</a>
<div id="textbox">
<h1>caramelised almonds</h1>
<div id="tagline">nuts for days! molten sugar is not only very hot, but very sticky.</div>
<div id="parts">
<ul>
<li>two spoonfuls of butter (optional for butter taste)</li>
<li>five tablespoons or so of granulated sugar (white sugar is good, brown is fine too but nothing too coarse so it melts evenly)</li>
<li><div id="imagewords">three big handfuls (e.g. 250g) of almonds<img id="img1" src="../assets/img/almond.png" alt="" /></li><br>
<li> sprinkle of salt</li>
</ul>
</div>
<div id="instructions"><ol>
<li> lay out a bit of baking paper, or else ready a smooth heatproof surface like a place.
<li> heat a skillet or any wide pan, a less sticky one is easier.
<li> melt the butter without burning it, turn the heat to medium-low if you're at risk.
<li> scatter sugar in the pan in an even layer
<li> 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.
<li> 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.
<li> add a generous sprinkle of salt into the mix if you like that sort of thing.
<li> 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.
<li> fill the (hot) pan with water so the caramel dissolves off cleanly. let the almonds cool before breaking them up.
<li> once cooled, store them in an airtight container. don't store them while their still warm or the condensation will make them sticky.
</div>
</div>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>

6
css/style_luddite.css
Unescape Escape View File

@ -61,6 +61,12 @@ body {
left: 100%; left: 100%;
} }
.text {
background-color: #ebebe6;
margin: 10px;
padding: 6px;
}
.last-clicked .text-box { .last-clicked .text-box {
display: block; display: block;
margin-left: 20px; margin-left: 20px;

125
css/style_summary.css
Unescape Escape View File

@ -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;
}

BIN
images/close.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

2
index.html
Unescape Escape View File

@ -65,7 +65,7 @@
</div> </div>
<h3> <h3>
<a href="webweave.html"><img src="images/christmas.png" alt="" width="400" height="400"></a> <a href="webweave.html"><img src="images/christmas.png" alt="" width="400" height="400"></a>
<a href="luddite.html"><img src="images/hut.png" alt="" width="400" height="400"></a> <a href="summaryluddite.html"><img src="images/hut.png" alt="" width="400" height="400"></a>
</h3> </h3>
</div> </div>

18
luddite.html
Unescape Escape View File

@ -29,13 +29,21 @@
container.appendChild(textBoxContainer); container.appendChild(textBoxContainer);
// Create a separate text box for each sentence AAAAA // Create a separate text box for each sentence AAAAA
messages.forEach(function (message, index) { messages.forEach(function(message, index){
var textBox = document.createElement("div"); (function(message){
textBox.className = "text text-" + index; setTimeout(function(){
textBox.textContent = message; console.log(message);
textBoxContainer.appendChild(textBox); var textBox = document.createElement("div");
textBox.className = "text text-" + index;
textBox.textContent = message;
textBoxContainer.appendChild(textBox);
}, 1000 * (index + 1));
})(message);
}); });
// Add the 'last-clicked' class to the container // Add the 'last-clicked' class to the container
container.classList.add('last-clicked'); container.classList.add('last-clicked');
} else { } else {

64
summaryluddite.html
Unescape Escape View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/style_summary.css">
</head>
<body>
<div>
<h1>
<div id="imageContainer" class="image-container">
<a href="index.html" target="_blank">
<img id="hut" src="images/hut.png" alt="hut"> </a>
</div>
</h1>
</div>
<details>
<summary>
here is an open letter, written and sent
</summary>
<details>
<summary> has a machine ever helped you be human?
</summary>
<details>
<summary>
if you took a picture of your guts and posted it online, what do you think people would say?
</summary>
<details>
<summary>
do you think anybody would hold them?
</summary>
</details>
<br>
<details>
<summary>
here what lud7 wrote in response
</summary>
</details>
<details>
<summary>
they wouldn't. I got rid of my smartphone and television seven years ago and became a complete luddite. I kept my Linux Desktop PC to access the ar15.com forum, to sell and buy rifles. Nobody else comes this far into the woods. Machines are no vessel for love and I am much too old to believe in angels. My roots run deep in the forest soil, deeper than cables can. There is no emotional support to be found online, sorry to say.","lud7"
</summary>
<div>
My line is always open to all of you at any time",
"IM me and I will call you to lend you an ear and a shoulder. Together, we can overcome a lot of difficulties and hard times.",
"We have done it before and we can continue to do it. Do not despair and lose hope.",
"We have had attempts in the past. Thank God, both were dealt with successfully. I am sure tc69 would get involved again to avert a tragedy like he did before.",
"I'm IM-ing you my contact info. If someone's in my area that needs help, let me know."
</div>
</details>
</details>
</details>
</details>
</body>
</html>
Write Preview
Loading…
Cancel
Save