110 lines
6.1 KiB
HTML
110 lines
6.1 KiB
HTML
<!doctype html>
|
||
<html lang="en"><head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>About 🌱 Digital Garden</title>
|
||
<meta name="description" content="A digital garden or public notebook for The Bentway’s Digital and/as Public Space Micro-Residency.">
|
||
<link rel="stylesheet" href="/assets/css/style.css"><link type="application/atom+xml" rel="alternate" href="/feed.xml" title="Digital Garden" /></head><body class="dark-green garamond links-dark-green bg-washed-green"><header class="f-6 flex"><a class="no-underline-hover" rel="author" href="/">Digital Garden</a><nav>, <a class="no-underline-hover" href="/about/">About</a></nav></header><main aria-label="Content">
|
||
<article class="measure-wide">
|
||
<header>
|
||
<h1 class="f-6 normal">About</h1>
|
||
</header>
|
||
<div class="lh-copy f5">
|
||
<h3 id="a-digital-garden-or-public-notebook-for-the-bentways-digital-andas-public-space-micro-residency">A digital garden or public notebook for The Bentway’s <a href="https://docs.google.com/document/d/1eXk14blXZSm7EQrksFgcoZ8Rf17rmu7zrBEUyczGG5M/edit#"><em>Digital and/as Public Space</em></a> Micro-Residency.</h3>
|
||
|
||
<p>Hypha’s practice is situated across many topics that are present in the theme of <em>Adaptive Reuse & Creative Misuse</em>. Drawing from our collective experiences, histories, and methodologies, our goal for the micro-residency to investigate how notions of digital infrastructure can be reused, reinterpreted, and reconfigured, to realize a kind of public space. Our approach to this theme will be composed of a few, very preliminary, subjects that will ground the residency: the situated histories of digital infrastructure, the implications of protocols for publishing (Hypertext, RSS, Peer-to-peer) in defining public spaces, and the possibilities of cooperative approaches to maintenance and repair. Our intent is to make the process of this investigation public through online tools mapping our thinking about the theme (Open channels in Are.na as one example) and cultivating a Digital Public Garden as part of Hypha’s contributions to the initiative (a resyndicatable adaptive online notebook). The outputs from the micro-residency will be a written contribution to the <a href="https://www.are.na/from-later/field-guide-to-the-digital-real"><em>Field Guide to the Digital Real</em></a> and a micro-website containing the synthesis of our investigations and our evolving practice. The outputs will be textual and visual, and draw from our collaborative practices as a cooperative. They will explore ways to represent relationships with existing and emergent technologies within our communities. Through our micro-residency we will capture a poetic interpretation of the theme and provide prompts for institutions in the city on how they could reconfigure technology to create radically creative platforms.</p>
|
||
|
||
</div>
|
||
</article>
|
||
</main><footer>
|
||
|
||
</footer><!-- That file is not particularly elegant. This will need a refactor at some point. -->
|
||
<div style="opacity: 0; display: none;" id='tooltip-wrapper'>
|
||
<div id='tooltip-content'>
|
||
</div>
|
||
</div>
|
||
|
||
<iframe style="display: none; height: 0; width: 0;" id='link-preview-iframe' src="">
|
||
</iframe>
|
||
|
||
<script>
|
||
var opacityTimeout;
|
||
var contentTimeout;
|
||
var transitionDurationMs = 100;
|
||
|
||
var iframe = document.getElementById('link-preview-iframe')
|
||
var tooltipWrapper = document.getElementById('tooltip-wrapper')
|
||
var tooltipContent = document.getElementById('tooltip-content')
|
||
|
||
function hideTooltip() {
|
||
opacityTimeout = setTimeout(function() {
|
||
tooltipWrapper.style.opacity = 0;
|
||
contentTimeout = setTimeout(function() {
|
||
tooltipContent.innerHTML = '';
|
||
tooltipWrapper.style.display = 'none';
|
||
}, transitionDurationMs + 1);
|
||
}, transitionDurationMs)
|
||
}
|
||
|
||
function showTooltip(event) {
|
||
var elem = event.target;
|
||
var elem_props = elem.getClientRects()[elem.getClientRects().length - 1];
|
||
var top = window.pageYOffset || document.documentElement.scrollTop
|
||
|
||
if (event.target.host === window.location.host) {
|
||
iframe.src = event.target.href
|
||
iframe.onload = function() {
|
||
tooltipContentHtml = ''
|
||
tooltipContentHtml += '<div style="font-weight: bold;">' + iframe.contentWindow.document.querySelector('h1').innerHTML + '</div>'
|
||
tooltipContentHtml += iframe.contentWindow.document.querySelector('content').innerHTML
|
||
|
||
tooltipContent.innerHTML = tooltipContentHtml
|
||
|
||
tooltipWrapper.style.display = 'block';
|
||
setTimeout(function() {
|
||
tooltipWrapper.style.opacity = 1;
|
||
}, 1)
|
||
}
|
||
|
||
tooltipWrapper.style.left = elem_props.left - (tooltipWrapper.offsetWidth / 2) + (elem_props.width / 2) + "px";
|
||
if ((window.innerHeight - elem_props.top) < (tooltipWrapper.offsetHeight)) {
|
||
tooltipWrapper.style.top = elem_props.top + top - tooltipWrapper.offsetHeight - 10 + "px";
|
||
} else if ((window.innerHeight - elem_props.top) > (tooltipWrapper.offsetHeight)) {
|
||
tooltipWrapper.style.top = elem_props.top + top + 35 + "px";
|
||
}
|
||
|
||
if ((elem_props.left + (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) {
|
||
tooltipWrapper.style.left = "10px";
|
||
} else if ((document.body.clientWidth - elem_props.left - (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) {
|
||
tooltipWrapper.style.left = document.body.clientWidth - tooltipWrapper.offsetWidth - 20 + "px";
|
||
}
|
||
}
|
||
}
|
||
|
||
function setupListeners(linkElement) {
|
||
linkElement.addEventListener('mouseleave', function(_event) {
|
||
hideTooltip();
|
||
});
|
||
|
||
tooltipWrapper.addEventListener('mouseleave', function(_event) {
|
||
hideTooltip();
|
||
});
|
||
|
||
linkElement.addEventListener('mouseenter', function(event) {
|
||
clearTimeout(opacityTimeout);
|
||
clearTimeout(contentTimeout);
|
||
showTooltip(event);
|
||
});
|
||
|
||
tooltipWrapper.addEventListener('mouseenter', function(event) {
|
||
clearTimeout(opacityTimeout);
|
||
clearTimeout(contentTimeout);
|
||
});
|
||
}
|
||
|
||
document.querySelectorAll('content a').forEach(setupListeners);
|
||
</script>
|
||
|
||
<script src="/assets/js/scripts.js" async></script>
|
||
</body>
|
||
</html> |