fancy changes

main.css

@@ -1,5 +1,7 @@
 :root {
     --sidebar-size: clamp(200px, 15%, 400px);
+    --bg-clr: blanchedalmond;
+    --fg-clr: black;
 }
 
 @font-face {
@@ -49,7 +51,7 @@ h1, h2, h3, h4, h5, h6 {
     background-image: url(res/Avraham_Society.png);
     background-position: 50% 50%;
     background-attachment: fixed;
-    background-size: cover;
+    background-size: contain;
     position: relative;
     margin-bottom: 5%;
     /*clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 30% 100%, 0% 90%);*/
@@ -137,12 +139,12 @@ h1 {
     width: calc(100vw); /*- var(--sidebar-size)*/
     transition: margin-left 1s, width 1s;
     /*width: 100vw;*/
-    background-color: black;
-    color: white;
+    background-color: var(--bg-clr);
+    color: var(--fg-clr);
 }
 
 #headin > * {
-    color: white;
+    color: var(--fg-clr);
 }
 
 #head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
@@ -210,9 +212,9 @@ body:not(.sidebar-opened) > #sider-outer > #sider > img {
     /*right: none;*/
     left: 0px;
     padding-left: 10px;
-    background-color: red;
+    background-color: rgb(117, 96, 63);
     padding: 20px;
-    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+    /*clip-path: polygon(0% 0%, 100% 50%, 0% 100%);*/
 }
 
 #sider > img {
@@ -404,7 +406,7 @@ h1 {
 
 #footer > p {
     padding: 2em;
-    color: white;
+    color: var(--fg-clr);
 }
 
 #truebottom {
@@ -413,7 +415,6 @@ h1 {
     padding: 5px;
     color: white;
     font-size: 0.7em;
-    padding-top: 10vh;
 }
 
 .image-relational-scrolling > div:last-child > p > img {
@@ -463,6 +464,7 @@ h1 {
     #links-outer {
         display: flex;
         flex-direction: column;
+        display: none;
     }
 
     #links > div:nth-child(2n) {
@@ -489,7 +491,8 @@ h1 {
     }
 
     #header {
-        background-size: auto 100vh;
+        background-size: 100vw auto;
+        background-repeat: no-repeat;
     }
 
     #head-marker {
@@ -503,6 +506,22 @@ h1 {
     #sider {
         font-size: 2em;
     }
+
+    #head-marker.scrolly-out+#headin {
+        position: static;
+        justify-content: center;
+        transition: background-color 0.3s, color 0.3s;
+        top: 0px;
+        left: 0px;
+        /*color: red;*/
+        /*margin-left: var(--sidebar-size);*/
+        width: calc(100vw);
+        /*- var(--sidebar-size)*/
+        transition: margin-left 1s, width 1s;
+        /*width: 100vw;*/
+        background-color: initial;
+        color: initial;
+    }
 }
 
 #content > p {
@@ -520,8 +539,9 @@ h1 {
 
 #content {
     min-height: 50vh;
-    background-color: black;
-    color: white;
+    background-color: var(--bg-clr);
+    color: var(--fg-clr);
+    padding-bottom: 10vh;
 }
 
 #content > p > .overlay {
@@ -596,5 +616,5 @@ iframe {
 }
 
 body {
-    background-color: black;
+    background-color: var(--bg-clr);
 }

main.js

@@ -14,11 +14,14 @@ window.ontouchstart = (evt) => {
 
 window.ontouchmove = (evt) => {
     var difX = evt.touches[0].clientX - startX;
+    var el = document.querySelector("#sider > img");
     if (difX > 100) {
         document.body.classList.add("sidebar-opened");
+        el.src = "/res/arrow-left.svg";
     }
     if (difX < -100) {
         document.body.classList.remove("sidebar-opened");
+        el.src = "/res/arrow-right.svg";
     }
 }
 
@@ -194,7 +197,7 @@ function toggle_sidebar() {
         el.src = "/res/arrow-left.svg";
     }
     else {
-        el.src = "/res/arrow-none.svg";
+        el.src = "/res/arrow-right.svg";
     }
 }
 

res/arrow-left.svg

@@ -42,11 +42,11 @@
      transform="translate(0.23499242,-0.29279519)">
     <path
        id="path627"
-       style="fill:none;stroke:white;stroke-width:2.423;stop-color:#000000"
+       style="fill:none;stroke:black;stroke-width:2.423;stop-color:#000000"
        d="m 12.891763,74.516068 v -5.12e-4" />
     <path
        id="path625"
-       style="fill:none;stroke:white;stroke-width:2.423;stop-color:#000000"
+       style="fill:none;stroke:black;stroke-width:2.423;stop-color:#000000"
        d="M 66.415659,248.55925 1.2877685,124.70778 66.415471,0.85665987" />
   </g>
 </svg>