admin/avrahamsociety
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fancy changes

Browse Source
This commit is contained in:
Lazy Hippopotamus
2023-07-07 17:38:48 -04:00
parent 06bd3f7af8
commit 7fe8510bcb
3 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
main.css
View File

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

5
main.js
View File

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

4
res/arrow-left.svg
View File

@@ -42,11 +42,11 @@
transform="translate(0.23499242,-0.29279519)"> transform="translate(0.23499242,-0.29279519)">
<path <path
id="path627" 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" /> d="m 12.891763,74.516068 v -5.12e-4" />
<path <path
id="path625" 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" /> d="M 66.415659,248.55925 1.2877685,124.70778 66.415471,0.85665987" />
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB