menu and heading refinements

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?
+
+
 ---
 <!--skipnav-->
 ## [CO-OP.COMM](https://fhp.incom.org/project/25346)  

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;