diff --git a/assets/data.md b/assets/data.md index 41139aa..65dc280 100644 --- a/assets/data.md +++ b/assets/data.md @@ -22,11 +22,6 @@ This course takes on the challenge to visualize organizational structures that h This webpage is an experiment in documenting design courses. Below you find the readings and references along central [themes](#themes), our generous [hosts](#hosts), and the resulting student [projects](#projects). -### Central questions - -- What would you like to reveal with the organigrams you will make? -- What kind of work relations would you like to create for the future and put out there for discussion? - --- 3 April @@ -197,10 +192,6 @@ Fairbairn, B. et al. (1994). [The meaning of Rochdale: The Rochdale Pioneers and [Exploring Co-op City - The Bronx, NYC, 2021](https://www.youtube.com/watch?v=RsQdi0OU_W0) -![](https://img.youtube.com/vi/UsP8I2bT5J8/0.jpg) \ -[At Home in Utopia Trailer, 2021](https://www.youtube.com/watch?v=UsP8I2bT5J8) - - ![](assets/images/workingclassutopias.webp) \ [Robert M. Fogelson, 2022](https://press.princeton.edu/books/hardcover/9780691234748/working-class-utopias) @@ -559,6 +550,12 @@ Aiming to visualize structures of a social-ecological economy, each student carr The following visualization projects are based on the practices and principles encountered during the visits, readings, and exchanges throughout the semester. +### Central questions + +- What would you like to reveal with the organigrams you will make? +- What kind of work relations would you like to put out there for discussion? + + --- ## [CO-OP.COMM](https://fhp.incom.org/project/25346) diff --git a/src/style.css b/src/style.css index aac4573..a153612 100644 --- a/src/style.css +++ b/src/style.css @@ -4,10 +4,10 @@ html { } body { touch-action: pan-x pan-y; - --background-menu: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 100%, .9)); - --background: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 94%, 1)); - --background-cursor: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 88%, .9)); - --background-content: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 82%, .9)); + --background-menu: hsla(0, 0%, 100%, .8); + --background: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 95%, 1)); + --background-cursor: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 90%, .9)); + --background-content: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 85%, .9)); --font: #000; --font-inverted: #fff; --link: color-mix(in srgb, var(--theme-color), var(--font)); @@ -21,10 +21,10 @@ body { @media (prefers-color-scheme: dark) { body, body.overlay{ - --background-menu: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 0%, .9)); - --background: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 6%, 1)); - --background-cursor: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 12%, .9)); - --background-content: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 18%, .9)); + --background-menu: hsla(0, 0%, 0%, .8); + --background: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 5%, 1)); + --background-cursor: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 10%, .9)); + --background-content: color-mix(in srgb, var(--theme-color) 10%, hsla(0, 0%, 15%, .9)); --font: #fff; --font-inverted: #000; } @@ -96,11 +96,11 @@ h1 { } h2 { margin: .25em 0; - font-size: 1.6em; + font-size: 1.5em; } h3 { margin: .5em 0; - font-size: 1.2em; + font-size: 1em; } ul { padding: 0 0 0 1em; @@ -244,9 +244,10 @@ a[href^="#"]:hover { #anchors p:hover, #burger:hover{ cursor: pointer; } -#menu.active #anchors{ +#menu.active #anchors { left: 0%; background-color: var(--background-menu); + xbackground: linear-gradient(to right, var(--background-menu), transparent); } #anchors .active a{ font-weight: bold;