diff --git a/main.css b/main.css
index 7e7fe0f..be673a8 100644
--- a/main.css
+++ b/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);
}
\ No newline at end of file
diff --git a/main.js b/main.js
index 1986276..b196499 100644
--- a/main.js
+++ b/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";
}
}
diff --git a/res/arrow-left.svg b/res/arrow-left.svg
index 6e4ed0c..158a588 100644
--- a/res/arrow-left.svg
+++ b/res/arrow-left.svg
@@ -42,11 +42,11 @@
transform="translate(0.23499242,-0.29279519)">