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)">