reorganizing directory; adding theme colors

uclab-potsdam · Dec 18, 2023 · 64c01d9 · 64c01d9
1 parent 5b81fae
commit 64c01d9
Show file tree

Hide file tree

Showing 104 changed files with 156 additions and 152 deletions.
diff --git a/data.md → assets/data.md b/data.md → assets/data.md
diff --git a/fonts/hkgrotesk-bold.woff → assets/fonts/hkgrotesk-bold.woff b/fonts/hkgrotesk-bold.woff → assets/fonts/hkgrotesk-bold.woff
diff --git a/fonts/hkgrotesk-bolditalic.woff → assets/fonts/hkgrotesk-bolditalic.woff b/fonts/hkgrotesk-bolditalic.woff → assets/fonts/hkgrotesk-bolditalic.woff
diff --git a/fonts/hkgrotesk-italic.woff → assets/fonts/hkgrotesk-italic.woff b/fonts/hkgrotesk-italic.woff → assets/fonts/hkgrotesk-italic.woff
diff --git a/fonts/hkgrotesk-light.woff → assets/fonts/hkgrotesk-light.woff b/fonts/hkgrotesk-light.woff → assets/fonts/hkgrotesk-light.woff
diff --git a/fonts/hkgrotesk-lightitalic.woff → assets/fonts/hkgrotesk-lightitalic.woff b/fonts/hkgrotesk-lightitalic.woff → assets/fonts/hkgrotesk-lightitalic.woff
diff --git a/fonts/hkgrotesk-medium.woff → assets/fonts/hkgrotesk-medium.woff b/fonts/hkgrotesk-medium.woff → assets/fonts/hkgrotesk-medium.woff
diff --git a/fonts/hkgrotesk-mediumitalic.woff → assets/fonts/hkgrotesk-mediumitalic.woff b/fonts/hkgrotesk-mediumitalic.woff → assets/fonts/hkgrotesk-mediumitalic.woff
diff --git a/fonts/hkgrotesk-regular.woff → assets/fonts/hkgrotesk-regular.woff b/fonts/hkgrotesk-regular.woff → assets/fonts/hkgrotesk-regular.woff
diff --git a/fonts/hkgrotesk-semibold.woff → assets/fonts/hkgrotesk-semibold.woff b/fonts/hkgrotesk-semibold.woff → assets/fonts/hkgrotesk-semibold.woff
diff --git a/fonts/hkgrotesk-semibolditalic.woff → assets/fonts/hkgrotesk-semibolditalic.woff b/fonts/hkgrotesk-semibolditalic.woff → assets/fonts/hkgrotesk-semibolditalic.woff
diff --git a/assets/airbnbvsberlin.webp → assets/images/airbnbvsberlin.webp b/assets/airbnbvsberlin.webp → assets/images/airbnbvsberlin.webp
diff --git a/assets/allezeit.png → assets/images/allezeit.png b/assets/allezeit.png → assets/images/allezeit.png
diff --git a/assets/arnsteins_ladder.png → assets/images/arnsteins_ladder.png b/assets/arnsteins_ladder.png → assets/images/arnsteins_ladder.png
diff --git a/assets/backstube.png → assets/images/backstube.png b/assets/backstube.png → assets/images/backstube.png
diff --git a/assets/bakehouse.jpg → assets/images/bakehouse.jpg b/assets/bakehouse.jpg → assets/images/bakehouse.jpg
diff --git a/assets/berlinutopie.jpg → assets/images/berlinutopie.jpg b/assets/berlinutopie.jpg → assets/images/berlinutopie.jpg
diff --git a/assets/blank.png → assets/images/blank.png b/assets/blank.png → assets/images/blank.png
diff --git a/assets/boundaries.png → assets/images/boundaries.png b/assets/boundaries.png → assets/images/boundaries.png
diff --git a/assets/boundaries2023.png → assets/images/boundaries2023.png b/assets/boundaries2023.png → assets/images/boundaries2023.png
diff --git a/assets/carevolution.png → assets/images/carevolution.png b/assets/carevolution.png → assets/images/carevolution.png
diff --git a/assets/cc.png → assets/images/cc.png b/assets/cc.png → assets/images/cc.png
diff --git a/assets/centralized-distributed.png → assets/images/centralized-distributed.png b/assets/centralized-distributed.png → assets/images/centralized-distributed.png
diff --git a/assets/coc.png → assets/images/coc.png b/assets/coc.png → assets/images/coc.png
diff --git a/assets/codesign.jpg → assets/images/codesign.jpg b/assets/codesign.jpg → assets/images/codesign.jpg
diff --git a/assets/codesign.png → assets/images/codesign.png b/assets/codesign.png → assets/images/codesign.png
diff --git a/assets/commoningtriad.jpg → assets/images/commoningtriad.jpg b/assets/commoningtriad.jpg → assets/images/commoningtriad.jpg
diff --git a/assets/commons.jpg → assets/images/commons.jpg b/assets/commons.jpg → assets/images/commons.jpg
diff --git a/assets/coopcomm.png → assets/images/coopcomm.png b/assets/coopcomm.png → assets/images/coopcomm.png
diff --git a/assets/coopflag.png → assets/images/coopflag.png b/assets/coopflag.png → assets/images/coopflag.png
diff --git a/assets/coopprinciples.png → assets/images/coopprinciples.png b/assets/coopprinciples.png → assets/images/coopprinciples.png
diff --git a/assets/countercultureroom.png → assets/images/countercultureroom.png b/assets/countercultureroom.png → assets/images/countercultureroom.png
diff --git a/assets/counterculturescreen.png → assets/images/counterculturescreen.png b/assets/counterculturescreen.png → assets/images/counterculturescreen.png
diff --git a/assets/cover.png → assets/images/cover.png b/assets/cover.png → assets/images/cover.png
diff --git a/assets/criticalcare.png → assets/images/criticalcare.png b/assets/criticalcare.png → assets/images/criticalcare.png
diff --git a/assets/daimler.png → assets/images/daimler.png b/assets/daimler.png → assets/images/daimler.png
diff --git a/assets/datafeminism.png → assets/images/datafeminism.png b/assets/datafeminism.png → assets/images/datafeminism.png
diff --git a/assets/deal.png → assets/images/deal.png b/assets/deal.png → assets/images/deal.png
diff --git a/assets/dieganzearbeit.jpg → assets/images/dieganzearbeit.jpg b/assets/dieganzearbeit.jpg → assets/images/dieganzearbeit.jpg
diff --git a/assets/dollarstreet.png → assets/images/dollarstreet.png b/assets/dollarstreet.png → assets/images/dollarstreet.png
diff --git a/assets/donut.jpg → assets/images/donut.jpg b/assets/donut.jpg → assets/images/donut.jpg
diff --git a/assets/empowerment.png → assets/images/empowerment.png b/assets/empowerment.png → assets/images/empowerment.png
diff --git a/assets/equality.png → assets/images/equality.png b/assets/equality.png → assets/images/equality.png
diff --git a/assets/eurostat.png → assets/images/eurostat.png b/assets/eurostat.png → assets/images/eurostat.png
diff --git a/assets/fhp.svg → assets/images/fhp.svg b/assets/fhp.svg → assets/images/fhp.svg
diff --git a/assets/firstorgchart.jpg → assets/images/firstorgchart.jpg b/assets/firstorgchart.jpg → assets/images/firstorgchart.jpg
diff --git a/assets/firstorgchart.webp → assets/images/firstorgchart.webp b/assets/firstorgchart.webp → assets/images/firstorgchart.webp
diff --git a/assets/fivelevels.png → assets/images/fivelevels.png b/assets/fivelevels.png → assets/images/fivelevels.png
diff --git a/assets/flows.png → assets/images/flows.png b/assets/flows.png → assets/images/flows.png
diff --git a/assets/flyinggardens.jpg → assets/images/flyinggardens.jpg b/assets/flyinggardens.jpg → assets/images/flyinggardens.jpg
diff --git a/assets/frames.png → assets/images/frames.png b/assets/frames.png → assets/images/frames.png
diff --git a/assets/freefairalivebook.jpg → assets/images/freefairalivebook.jpg b/assets/freefairalivebook.jpg → assets/images/freefairalivebook.jpg
diff --git a/assets/freefairalivebook.png → assets/images/freefairalivebook.png b/assets/freefairalivebook.png → assets/images/freefairalivebook.png
diff --git a/assets/fword.jpg → assets/images/fword.jpg b/assets/fword.jpg → assets/images/fword.jpg
diff --git a/assets/grundeinkommen.png → assets/images/grundeinkommen.png b/assets/grundeinkommen.png → assets/images/grundeinkommen.png
diff --git a/assets/gruppef.png → assets/images/gruppef.png b/assets/gruppef.png → assets/images/gruppef.png
diff --git a/assets/hungryplanet.jpg → assets/images/hungryplanet.jpg b/assets/hungryplanet.jpg → assets/images/hungryplanet.jpg
diff --git a/assets/id.svg → assets/images/id.svg b/assets/id.svg → assets/images/id.svg
diff --git a/assets/infotext.png → assets/images/infotext.png b/assets/infotext.png → assets/images/infotext.png
diff --git a/assets/interdependency.png → assets/images/interdependency.png b/assets/interdependency.png → assets/images/interdependency.png
diff --git a/assets/intervis.png → assets/images/intervis.png b/assets/intervis.png → assets/images/intervis.png
diff --git a/assets/jeffbezos.png → assets/images/jeffbezos.png b/assets/jeffbezos.png → assets/images/jeffbezos.png
diff --git a/assets/libstructures.png → assets/images/libstructures.png b/assets/libstructures.png → assets/images/libstructures.png
diff --git a/assets/madia.png → assets/images/madia.png b/assets/madia.png → assets/images/madia.png
diff --git a/assets/marian.png → assets/images/marian.png b/assets/marian.png → assets/images/marian.png
diff --git a/assets/mobisol.jpg → assets/images/mobisol.jpg b/assets/mobisol.jpg → assets/images/mobisol.jpg
diff --git a/assets/mondragon.jpeg → assets/images/mondragon.jpeg b/assets/mondragon.jpeg → assets/images/mondragon.jpeg
diff --git a/assets/moneyflow.png → assets/images/moneyflow.png b/assets/moneyflow.png → assets/images/moneyflow.png
diff --git a/assets/myriel.png → assets/images/myriel.png b/assets/myriel.png → assets/images/myriel.png
diff --git a/assets/opensource.png → assets/images/opensource.png b/assets/opensource.png → assets/images/opensource.png
diff --git a/assets/our-open-design-commons.png → assets/images/our-open-design-commons.png b/assets/our-open-design-commons.png → assets/images/our-open-design-commons.png
diff --git a/assets/parkslope.png → assets/images/parkslope.png b/assets/parkslope.png → assets/images/parkslope.png
diff --git a/assets/parkslope.webp → assets/images/parkslope.webp b/assets/parkslope.webp → assets/images/parkslope.webp
diff --git a/assets/platformcooperativism.png → assets/images/platformcooperativism.png b/assets/platformcooperativism.png → assets/images/platformcooperativism.png
diff --git a/assets/pyramid.jpg → assets/images/pyramid.jpg b/assets/pyramid.jpg → assets/images/pyramid.jpg
diff --git a/assets/raworth_ted.png → assets/images/raworth_ted.png b/assets/raworth_ted.png → assets/images/raworth_ted.png
diff --git a/assets/regenbogenfabrik.png → assets/images/regenbogenfabrik.png b/assets/regenbogenfabrik.png → assets/images/regenbogenfabrik.png
diff --git a/assets/regionalwert.png → assets/images/regionalwert.png b/assets/regionalwert.png → assets/images/regionalwert.png
diff --git a/assets/sdgs.png → assets/images/sdgs.png b/assets/sdgs.png → assets/images/sdgs.png
diff --git a/assets/smart.png → assets/images/smart.png b/assets/smart.png → assets/images/smart.png
diff --git a/assets/socialinnovation.png → assets/images/socialinnovation.png b/assets/socialinnovation.png → assets/images/socialinnovation.png
diff --git a/assets/soupi.jpg → assets/images/soupi.jpg b/assets/soupi.jpg → assets/images/soupi.jpg
diff --git a/assets/statusgrowth.png → assets/images/statusgrowth.png b/assets/statusgrowth.png → assets/images/statusgrowth.png
diff --git a/assets/supercoop.png → assets/images/supercoop.png b/assets/supercoop.png → assets/images/supercoop.png
diff --git a/assets/the-santiago-boys.png → assets/images/the-santiago-boys.png b/assets/the-santiago-boys.png → assets/images/the-santiago-boys.png
diff --git a/assets/thisisfine.png → assets/images/thisisfine.png b/assets/thisisfine.png → assets/images/thisisfine.png
diff --git a/assets/thisisnotfine.png → assets/images/thisisnotfine.png b/assets/thisisnotfine.png → assets/images/thisisnotfine.png
diff --git a/assets/timespent.png → assets/images/timespent.png b/assets/timespent.png → assets/images/timespent.png
diff --git a/assets/unpaidwork.png → assets/images/unpaidwork.png b/assets/unpaidwork.png → assets/images/unpaidwork.png
diff --git a/assets/upstream.png → assets/images/upstream.png b/assets/upstream.png → assets/images/upstream.png
diff --git a/assets/urbancommons.png → assets/images/urbancommons.png b/assets/urbancommons.png → assets/images/urbancommons.png
diff --git a/assets/utopia.png → assets/images/utopia.png b/assets/utopia.png → assets/images/utopia.png
diff --git a/assets/utopiaforrealists.png → assets/images/utopiaforrealists.png b/assets/utopiaforrealists.png → assets/images/utopiaforrealists.png
diff --git a/assets/values.png → assets/images/values.png b/assets/values.png → assets/images/values.png
diff --git a/assets/weiberwirtschaft.png → assets/images/weiberwirtschaft.png b/assets/weiberwirtschaft.png → assets/images/weiberwirtschaft.png
diff --git a/assets/wigwam.png → assets/images/wigwam.png b/assets/wigwam.png → assets/images/wigwam.png
diff --git a/assets/workingclassutopias.webp → assets/images/workingclassutopias.webp b/assets/workingclassutopias.webp → assets/images/workingclassutopias.webp
diff --git a/assets/style.css b/assets/style.css
@@ -0,0 +1,29 @@
+@font-face {
+    font-family: hkgrotesk;
+    src: url("./fonts/hkgrotesk-bold.woff") format("woff");
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: hkgrotesk;
+    src: url("./fonts/hkgrotesk-regular.woff") format("woff");
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: hkgrotesk;
+    src: url("./fonts/hkgrotesk-italic.woff") format("woff");
+    font-style: italic;
+}
+
+@font-face {
+    font-family: hkgrotesk;
+    src: url("./fonts/hkgrotesk-bolditalic.woff") format("woff");
+    font-style: italic;          
+    font-weight: bold;
+}
+
+body {
+    font-family: hkgrotesk, sans-serif;
+    --theme-color: hsl(150, 50%, 50%);
+}
diff --git a/index.html b/index.html
@@ -5,28 +5,28 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no" />
 
-
-    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="burger.css">
+    <link rel="stylesheet" href="assets/style.css">
+    <link rel="stylesheet" href="src/style.css">
     <!-- d3.js for parsing, structuring and displaying the data -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
     <!-- Marked for parsing the markdown -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <!-- link-preview-js for getting the social graph previews -->
     <!-- all scripts -->
-    <script src="js/scrolling.js"></script>
-    <script src="js/navigation.js"></script>
-    <script src="js/links.js"></script>
-    <script src="js/data.js"></script>
-
+    <script src="src/scrolling.js"></script>
+    <script src="src/navigation.js"></script>
+    <script src="src/links.js"></script>
+    <script src="src/data.js"></script>
 
+    <!-- adjust below fields for open graph previews -->
     <title>Organigrams for/from the future</title>
     <meta property="og:url" content="https://infovis.fh-potsdam.de/organigrams/">
     <meta property="og:title" content="Organigrams for/from the future">
     <meta property="og:description" content="Experimental design course on the visualization of organizational structures utilizing narration and exploration to encourage reflection and imagination about work and the economy. The course was held as a nomadic seminar at multiple locations in Berlin and Potsdam during the summer of 2023.">
     <meta property="og:image" content="https://infovis.fh-potsdam.de/organigrams/assets/cover.png">
     <meta property="og:image:width" content="1200">
     <meta property="og:image:height" content="630">
+
+
 </head>
 
 <body>
@@ -77,7 +77,7 @@
 	        }
         }
         setFontSize();
-        fetch('data.md')
+        fetch('assets/data.md')
         .then(data => data.text())
         .then(text => {
             let data = []

diff --git a/js/data.js → src/data.js b/js/data.js → src/data.js
diff --git a/js/links.js → src/links.js b/js/links.js → src/links.js
@@ -13,7 +13,6 @@ function updateLinks(currentSession, cursorProgress, cursorDimensions) {
     return currentSession.items
 }
 function drawLinks(items) {
-
     let dpr = window.devicePixelRatio || 1;
     let canvas = document.getElementById('links');
     if (!canvas.getContext) return;
@@ -28,8 +27,8 @@ function drawLinks(items) {
     ctx.scale(dpr, dpr);
     ctx.clearRect(0, 0, w, h);
 
-    let root = getComputedStyle(document.body);
-    let lineColor = root.getPropertyValue('--background-content').trim();
+    let root = window.getComputedStyle(document.body);
+    let lineColor = root.getPropertyValue('--theme-color').trim();
     ctx.strokeStyle = lineColor;
 
     items.map(item => {

diff --git a/js/navigation.js → src/navigation.js b/js/navigation.js → src/navigation.js
diff --git a/js/scrolling.js → src/scrolling.js b/js/scrolling.js → src/scrolling.js
diff --git a/style.css → src/style.css b/style.css → src/style.css
@@ -1,51 +1,43 @@
-@font-face {
-    font-family: hkgrotesk;
-    src: url("fonts/hkgrotesk-bold.woff") format("woff");
-    font-weight: bold;
-}
-
-@font-face {
-    font-family: hkgrotesk;
-    src: url("fonts/hkgrotesk-regular.woff") format("woff");
-    font-weight: normal;
-}
-
-@font-face {
-    font-family: hkgrotesk;
-    src: url("fonts/hkgrotesk-italic.woff") format("woff");
-    font-style: italic;
-}
-
-@font-face {
-    font-family: hkgrotesk;
-    src: url("fonts/hkgrotesk-bolditalic.woff") format("woff");
-    font-style: italic;          
-    font-weight: bold;
-}
 /* Global styles*/
 html {
     scroll-behavior: smooth;
 }
 body {
-		touch-action: pan-x pan-y;
-	  --background-menu: hsl(0, 0%, 100%);
-    --background: hsl(0, 0%, 94%);
-    --background-cursor: hsl(0, 0%, 88%);
-    --background-content: hsl(0, 0%, 82%);
-    --gray:hsl(0, 0%, 30%);
-    --primary: #000;
+	touch-action: pan-x pan-y;
+    --background-menu: color-mix(in srgb, var(--theme-color) 10%, hsl(0, 0%, 100%));
+    --background: color-mix(in srgb, var(--theme-color) 10%, hsl(0, 0%, 94%));
+    --background-cursor: color-mix(in srgb, var(--theme-color) 10%, hsl(0, 0%, 88%));
+    --background-content: color-mix(in srgb, var(--theme-color)  10%, hsl(0, 0%, 82%));
     --font: #000;
+    --font-inverted: #fff;
+    --link: color-mix(in srgb, var(--theme-color) 60%, var(--font));;
 
     margin: 0;
     overflow-x: hidden;
-    font-family: hkgrotesk, sans-serif;
     background-color: var(--background);
     color: var(--font);
 }
 
+@media (prefers-color-scheme: dark) {
+    body, body.overlay{
+        --background-menu: color-mix(in srgb, var(--theme-color) 10%, hsl(0, 0%, 0%));
+        --background: color-mix(in srgb, var(--theme-color) 10%, hsl(0, 0%, 6%));
+        --background-cursor: color-mix(in srgb, var(--theme-color) 10%, hsl(0, 0%, 12%));
+        --background-content: color-mix(in srgb, var(--theme-color) 10%, hsl(0, 0%, 18%));
+        --font: #fff;
+        --font-inverted: #000;
+        --link: color-mix(in srgb, var(--theme-color) 60%, var(--font));;
+
+    }
+    footer img {
+        filter: invert(100%);
+    }
+}
+
+
 *::selection {
-    color: var(--background-menu);
-    background-color: var(--font);
+    color: var(--font-inverted);
+    background-color: var(--theme-color);
     opacity: 1;
 }
 
@@ -206,15 +198,15 @@ p {
 a {
     text-decoration:underline;
     line-height: 0.1em;
-    color: var(--gray);
+    color: var(--link);
 }
 a:hover {
     color: var(--font);
 }
 
 a[href^="#"] {
     text-decoration: none;
-    border-bottom: .075em dashed var(--primary);
+    border-bottom: .075em dashed var(--link);
 }
 .left{
     left: 5vw;
@@ -346,22 +338,6 @@ footer a:hover img, footer a:active img {
         margin-right: 0;
     }
 }
-@media (prefers-color-scheme: dark) {
-    body, body.overlay{
-        --background-menu: hsl(0, 0%, 0%);
-        --background: hsl(0, 0%, 6%);
-        --background-cursor: hsl(0, 0%, 12%);
-        --background-content: hsl(0, 0%, 18%);
-        --gray: hsl(0, 0%, 70%);
-        --primary: #fff;
-        --font: #fff;
-
-    }
-    footer img {
-        filter: invert(100%);
-    }
-
-}
 
 /* BURGER */