From 30b9df8f77a6d9a3afe0efd0b1d4f095704c6bb4 Mon Sep 17 00:00:00 2001 From: Myadeleines Date: Thu, 11 Jan 2024 20:38:35 +0100 Subject: [PATCH] Feat: Added neat page transitions --- css/src/style.scss | 25 +++- css/style.css | 256 ------------------------------------ css/style.css.map | 1 - css/style.min.css | 2 +- css/style.min.css.map | 2 +- js/main.js | 5 + js/trans.js | 59 +++++++++ template/404.twig | 14 +- template/includes/head.twig | 1 + template/includes/hero.twig | 2 +- template/includes/nav.twig | 13 +- template/index.twig | 31 ++--- template/nation.twig | 26 ++-- template/nations.twig | 20 ++- 14 files changed, 136 insertions(+), 321 deletions(-) delete mode 100644 css/style.css delete mode 100644 css/style.css.map create mode 100644 js/main.js create mode 100644 js/trans.js diff --git a/css/src/style.scss b/css/src/style.scss index 1dd394d..841daec 100644 --- a/css/src/style.scss +++ b/css/src/style.scss @@ -10,6 +10,21 @@ body { } } +main { + transition: 0.24s; + + &.Loading { + transition: 0.16s; + opacity: 0.4; + } + + &.InTransition { + transform: scale(0.96); + transition: 0.16s; + opacity: 0; + } +} + .container { max-width: 960px; @@ -195,7 +210,7 @@ a { display: flex; flex-wrap: wrap; - gap: 8px; + gap: 6px; @media (max-width: 600px) { width: 100%; @@ -207,7 +222,7 @@ a { > a { user-select: none; - font-size: 18px; + font-size: 16px; box-sizing: border-box; color: #7E9E7E; @@ -221,7 +236,7 @@ a { text-decoration: none; - padding: 8px 24px; + padding: 6px 20px; border-radius: 32px; @@ -229,6 +244,10 @@ a { transition: 0.24s; + &.active { + pointer-events: none; + } + &:hover, &.active { //background: rgba(15, 23, 42, 0.1); outline-color: #D0DFD0; diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 78db5c1..0000000 --- a/css/style.css +++ /dev/null @@ -1,256 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@500&display=swap"); -body, input { - font-family: "Noto Sans", "Noto Color Emoji", sans-serif; -} - -h1, h2, h3, h4, h5, h6 { - font-family: "Outfit", "Noto Color Emoji", sans-serif; - font-weight: 500; -} - -.pageHero { - font-family: "Comic Neue", "Comic Sans MS", "Noto Color Emoji", sans-serif; -} - -body { - background: white; - margin: 0; -} -@media (prefers-color-scheme: dark) { - body { - background: #202120; - color: white; - } -} - -.container { - max-width: 960px; - width: 100%; - margin: 0 auto; - padding: 24px; - box-sizing: border-box; -} - -ul, ol { - list-style-position: inside; -} - -p { - line-height: 1.6; - opacity: 0.92; -} - -img { - max-width: 100%; -} - -a { - color: #527D52; -} -@media (prefers-color-scheme: dark) { - a { - color: #D0DFD0; - } -} -a:visited { - opacity: 0.9; -} - -.pageHero { - background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("/img/Panorama-Lens-Blur.png"); - background-position: center; - background-size: cover; - height: 220px; -} -@media (prefers-color-scheme: dark) { - .pageHero { - background-image: linear-gradient(rgba(16, 22, 16, 0.9), rgba(16, 22, 16, 0.9)), url("/img/Panorama-Lens-Blur.png"); - } -} -.pageHero > .container { - height: 100%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; -} -@media (max-width: 600px) { - .pageHero > .container { - justify-content: center; - } -} -.pageHero > .container > div { - display: flex; - flex-direction: column; - gap: 12px; -} -.pageHero > .container > div.Branding { - align-items: flex-start; -} -@media (max-width: 600px) { - .pageHero > .container > div.Branding { - align-items: center; - } -} -@media (prefers-color-scheme: dark) { - .pageHero > .container > div.Branding img { - filter: invert(1); - } -} -.pageHero > .container > div.Branding span { - font-size: 24px; - opacity: 0.75; -} -.pageHero > .container > div.Server-Information { - align-items: center; - gap: 4px; -} -@media (max-width: 600px) { - .pageHero > .container > div.Server-Information { - display: none; - } -} -.pageHero > .container > div.Server-Information input { - text-align: center; - font-size: 24px; -} -.pageHero > .container > div.Server-Information input:not(:hover, :focus) { - color: inherit; - border-color: transparent; - background: transparent; -} - -.Nav-Toggle { - z-index: 10; - position: fixed; - top: 8px; - right: 8px; - font-size: 18px; - background: #527D52; - color: #fff; - padding: 8px 24px; - border-radius: 32px; - font-weight: bold; - user-select: none; - cursor: pointer; -} -@media (min-width: 601px) { - .Nav-Toggle { - display: none; - } -} - -.pageNav { - width: 100%; - border: solid #D0DFD0; - border-width: 0 0 1px 0; - background: #F9FFF9; -} -@media (prefers-color-scheme: dark) { - .pageNav { - border-color: #575F57; - background: #272F27; - } -} -.pageNav > .container { - padding: 16px 24px; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; -} -@media (max-width: 600px) { - .pageNav > .container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 9; - background: inherit; - transition: 0.12s; - } - .pageNav > .container:not(.openned) { - opacity: 0; - pointer-events: none; - transform: scale(1.2); - transition: 0.24s; - } -} -.pageNav > .container > div { - margin: 0; - display: flex; - flex-wrap: wrap; - gap: 8px; -} -@media (max-width: 600px) { - .pageNav > .container > div { - width: 100%; - flex-direction: column; - gap: 6px; - align-items: center; - } -} -.pageNav > .container > div > a { - user-select: none; - font-size: 18px; - box-sizing: border-box; - color: #7E9E7E; - text-decoration: none; - padding: 8px 24px; - border-radius: 32px; - outline: solid transparent 2px; - transition: 0.24s; -} -@media (max-width: 600px) { - .pageNav > .container > div > a { - font-size: 24px; - width: 100%; - padding: 12px 24px; - text-align: center; - } -} -.pageNav > .container > div > a:hover, .pageNav > .container > div > a.active { - outline-color: #D0DFD0; - color: #527D52; - transition: 0.08s; -} -@media (prefers-color-scheme: dark) { - .pageNav > .container > div > a:hover, .pageNav > .container > div > a.active { - color: #DEFEDE; - outline-color: #707F70; - } -} -.pageNav > .container > div > a.buttonPrimary { - background: #527D52; - color: #fff; - font-weight: bold; -} - -.pageFooter { - opacity: 0.8; -} -.pageFooter > .SNS-Links { - display: flex; - flex-wrap: wrap; - gap: 16px; -} -.pageFooter > .SNS-Links > a { - display: flex; - gap: 8px; - font-size: 18px; - color: inherit; -} -.pageFooter > .SNS-Links > a img { - width: 1em; -} -@media (prefers-color-scheme: dark) { - .pageFooter > .SNS-Links > a img { - filter: invert(1); - } -} -.pageFooter > .SNS-Links > a:not(:hover, :focus) { - text-decoration: none; -} - -/*# sourceMappingURL=style.css.map */ diff --git a/css/style.css.map b/css/style.css.map deleted file mode 100644 index cd7a615..0000000 --- a/css/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/style.scss"],"names":[],"mappings":"AAEQ;AAER;EACE;;;AAGF;EACE;EACA;;;AAIF;EACE;;;ACbF;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;;AAIJ;EACE;EAEA;EAEA;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;;;AAIJ;EACE,kBACE;EASF;EACA;EAEA;;AATA;EALF;IAMI,kBACA;;;AASF;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EATF;IAUI;;;AAGF;EACE;EACA;EAEA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;IAAM;;;AAGR;EACE;EACA;;AAIJ;EAKE;EACA;;AALA;EADF;IAEI;;;AAMF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAQZ;EAIE;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EAEA;;AApBA;EADF;IAEI;;;;AAsBJ;EACE;EAEA;EACA;EAEA;;AAEA;EARF;IASI;IACA;;;AAGF;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EATF;IAUI;IACA;IACA;IACA;IACA;IACA;IAEA;IAEA;;EAEA;IACE;IACA;IAEA;IAEA;;;AAIJ;EACE;EAEA;EACA;EAEA;;AAEA;EARF;IASI;IACA;IACA;IACA;;;AAGF;EACE;EAEA;EACA;EACA;EAUA;EAEA;EAEA;EAEA;EAEA;;AAhBA;EAPF;IAQI;IACA;IACA;IACA;;;AAcF;EAEE;EAEA;EAQA;;AANA;EANF;IAOI;IACA;;;AAOJ;EACE;EACA;EAEA;;;AAWV;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EAEA;EAEA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAIJ;EACE","file":"style.css"} \ No newline at end of file diff --git a/css/style.min.css b/css/style.min.css index ec78edf..6ab1778 100644 --- a/css/style.min.css +++ b/css/style.min.css @@ -1 +1 @@ -@import"https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@500&display=swap";body,input{font-family:"Noto Sans","Noto Color Emoji",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Outfit","Noto Color Emoji",sans-serif;font-weight:500}.pageHero{font-family:"Comic Neue","Comic Sans MS","Noto Color Emoji",sans-serif}body{background:#fff;margin:0}@media(prefers-color-scheme: dark){body{background:#202120;color:#fff}}.container{max-width:960px;width:100%;margin:0 auto;padding:24px;box-sizing:border-box}ul,ol{list-style-position:inside}p{line-height:1.6;opacity:.92}img{max-width:100%}a{color:#527d52}@media(prefers-color-scheme: dark){a{color:#d0dfd0}}a:visited{opacity:.9}.pageHero{background-image:linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),url("/img/Panorama-Lens-Blur.png");background-position:center;background-size:cover;height:220px}@media(prefers-color-scheme: dark){.pageHero{background-image:linear-gradient(rgba(16, 22, 16, 0.9), rgba(16, 22, 16, 0.9)),url("/img/Panorama-Lens-Blur.png")}}.pageHero>.container{height:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}@media(max-width: 600px){.pageHero>.container{justify-content:center}}.pageHero>.container>div{display:flex;flex-direction:column;gap:12px}.pageHero>.container>div.Branding{align-items:flex-start}@media(max-width: 600px){.pageHero>.container>div.Branding{align-items:center}}@media(prefers-color-scheme: dark){.pageHero>.container>div.Branding img{filter:invert(1)}}.pageHero>.container>div.Branding span{font-size:24px;opacity:.75}.pageHero>.container>div.Server-Information{align-items:center;gap:4px}@media(max-width: 600px){.pageHero>.container>div.Server-Information{display:none}}.pageHero>.container>div.Server-Information input{text-align:center;font-size:24px}.pageHero>.container>div.Server-Information input:not(:hover,:focus){color:inherit;border-color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.Nav-Toggle{z-index:10;position:fixed;top:8px;right:8px;font-size:18px;background:#527d52;color:#fff;padding:8px 24px;border-radius:32px;font-weight:bold;user-select:none;cursor:pointer}@media(min-width: 601px){.Nav-Toggle{display:none}}.pageNav{width:100%;border:solid #d0dfd0;border-width:0 0 1px 0;background:#f9fff9}@media(prefers-color-scheme: dark){.pageNav{border-color:#575f57;background:#272f27}}.pageNav>.container{padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}@media(max-width: 600px){.pageNav>.container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9;background:inherit;transition:.12s}.pageNav>.container:not(.openned){opacity:0;pointer-events:none;transform:scale(1.2);transition:.24s}}.pageNav>.container>div{margin:0;display:flex;flex-wrap:wrap;gap:8px}@media(max-width: 600px){.pageNav>.container>div{width:100%;flex-direction:column;gap:6px;align-items:center}}.pageNav>.container>div>a{user-select:none;font-size:18px;box-sizing:border-box;color:#7e9e7e;text-decoration:none;padding:8px 24px;border-radius:32px;outline:solid rgba(0,0,0,0) 2px;transition:.24s}@media(max-width: 600px){.pageNav>.container>div>a{font-size:24px;width:100%;padding:12px 24px;text-align:center}}.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{outline-color:#d0dfd0;color:#527d52;transition:.08s}@media(prefers-color-scheme: dark){.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{color:#defede;outline-color:#707f70}}.pageNav>.container>div>a.buttonPrimary{background:#527d52;color:#fff;font-weight:bold}.pageFooter{opacity:.8}.pageFooter>.SNS-Links{display:flex;flex-wrap:wrap;gap:16px}.pageFooter>.SNS-Links>a{display:flex;gap:8px;font-size:18px;color:inherit}.pageFooter>.SNS-Links>a img{width:1em}@media(prefers-color-scheme: dark){.pageFooter>.SNS-Links>a img{filter:invert(1)}}.pageFooter>.SNS-Links>a:not(:hover,:focus){text-decoration:none}/*# sourceMappingURL=style.min.css.map */ +@import"https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@500&display=swap";body,input{font-family:"Noto Sans","Noto Color Emoji",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Outfit","Noto Color Emoji",sans-serif;font-weight:500}.pageHero{font-family:"Comic Neue","Comic Sans MS","Noto Color Emoji",sans-serif}body{background:#fff;margin:0}@media(prefers-color-scheme: dark){body{background:#202120;color:#fff}}main{transition:.24s}main.Loading{transition:.16s;opacity:.4}main.InTransition{transform:scale(0.96);transition:.16s;opacity:0}.container{max-width:960px;width:100%;margin:0 auto;padding:24px;box-sizing:border-box}ul,ol{list-style-position:inside}p{line-height:1.6;opacity:.92}img{max-width:100%}a{color:#527d52}@media(prefers-color-scheme: dark){a{color:#d0dfd0}}a:visited{opacity:.9}.pageHero{background-image:linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),url("/img/Panorama-Lens-Blur.png");background-position:center;background-size:cover;height:220px}@media(prefers-color-scheme: dark){.pageHero{background-image:linear-gradient(rgba(16, 22, 16, 0.9), rgba(16, 22, 16, 0.9)),url("/img/Panorama-Lens-Blur.png")}}.pageHero>.container{height:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}@media(max-width: 600px){.pageHero>.container{justify-content:center}}.pageHero>.container>div{display:flex;flex-direction:column;gap:12px}.pageHero>.container>div.Branding{align-items:flex-start}@media(max-width: 600px){.pageHero>.container>div.Branding{align-items:center}}@media(prefers-color-scheme: dark){.pageHero>.container>div.Branding img{filter:invert(1)}}.pageHero>.container>div.Branding span{font-size:24px;opacity:.75}.pageHero>.container>div.Server-Information{align-items:center;gap:4px}@media(max-width: 600px){.pageHero>.container>div.Server-Information{display:none}}.pageHero>.container>div.Server-Information input{text-align:center;font-size:24px}.pageHero>.container>div.Server-Information input:not(:hover,:focus){color:inherit;border-color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.Nav-Toggle{z-index:10;position:fixed;top:8px;right:8px;font-size:18px;background:#527d52;color:#fff;padding:8px 24px;border-radius:32px;font-weight:bold;user-select:none;cursor:pointer}@media(min-width: 601px){.Nav-Toggle{display:none}}.pageNav{width:100%;border:solid #d0dfd0;border-width:0 0 1px 0;background:#f9fff9}@media(prefers-color-scheme: dark){.pageNav{border-color:#575f57;background:#272f27}}.pageNav>.container{padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}@media(max-width: 600px){.pageNav>.container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9;background:inherit;transition:.12s}.pageNav>.container:not(.openned){opacity:0;pointer-events:none;transform:scale(1.2);transition:.24s}}.pageNav>.container>div{margin:0;display:flex;flex-wrap:wrap;gap:6px}@media(max-width: 600px){.pageNav>.container>div{width:100%;flex-direction:column;gap:6px;align-items:center}}.pageNav>.container>div>a{user-select:none;font-size:16px;box-sizing:border-box;color:#7e9e7e;text-decoration:none;padding:6px 20px;border-radius:32px;outline:solid rgba(0,0,0,0) 2px;transition:.24s}@media(max-width: 600px){.pageNav>.container>div>a{font-size:24px;width:100%;padding:12px 24px;text-align:center}}.pageNav>.container>div>a.active{pointer-events:none}.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{outline-color:#d0dfd0;color:#527d52;transition:.08s}@media(prefers-color-scheme: dark){.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{color:#defede;outline-color:#707f70}}.pageNav>.container>div>a.buttonPrimary{background:#527d52;color:#fff;font-weight:bold}.pageFooter{opacity:.8}.pageFooter>.SNS-Links{display:flex;flex-wrap:wrap;gap:16px}.pageFooter>.SNS-Links>a{display:flex;gap:8px;font-size:18px;color:inherit}.pageFooter>.SNS-Links>a img{width:1em}@media(prefers-color-scheme: dark){.pageFooter>.SNS-Links>a img{filter:invert(1)}}.pageFooter>.SNS-Links>a:not(:hover,:focus){text-decoration:none}/*# sourceMappingURL=style.min.css.map */ diff --git a/css/style.min.css.map b/css/style.min.css.map index 6660b3e..31aaf72 100644 --- a/css/style.min.css.map +++ b/css/style.min.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/style.scss"],"names":[],"mappings":"AAEQ,6JAER,WACE,sDAGF,kBACE,mDACA,gBAIF,UACE,uECZF,KACE,gBACA,SAEA,mCAJF,KAKI,mBACA,YAIJ,WACE,gBAEA,WAEA,cAEA,aACA,sBAGF,MACE,2BAGF,EACE,gBACA,YAGF,IACE,eAGF,EACE,cAEA,mCAHF,EAII,eAGF,UACE,WAIJ,UACE,iBACE,uGASF,2BACA,sBAEA,aATA,mCALF,UAMI,iBACA,kGASF,qBACE,YAEA,aACA,mBAEA,mBACA,8BAEA,yBATF,qBAUI,wBAGF,yBACE,aACA,sBAEA,SAEA,kCACE,uBAEA,yBAHF,kCAII,oBAGF,mCACE,wDAGF,uCACE,eACA,YAIJ,4CAKE,mBACA,QALA,yBADF,4CAEI,cAMF,kDACE,kBACA,eAEA,qEACE,cACA,2BACA,yBAQZ,YAIE,WAEA,eACA,QACA,UACA,eAEA,mBACA,WAEA,iBAEA,mBAEA,iBACA,iBAEA,eApBA,yBADF,YAEI,cAsBJ,SACE,WAEA,qBACA,uBAEA,mBAEA,mCARF,SASI,qBACA,oBAGF,oBACE,kBAEA,aACA,eAEA,mBACA,8BAEA,yBATF,oBAUI,eACA,MACA,OACA,WACA,YACA,UAEA,mBAEA,gBAEA,kCACE,UACA,oBAEA,qBAEA,iBAIJ,wBACE,SAEA,aACA,eAEA,QAEA,yBARF,wBASI,WACA,sBACA,QACA,oBAGF,0BACE,iBAEA,eACA,sBACA,cAUA,qBAEA,iBAEA,mBAEA,gCAEA,gBAhBA,yBAPF,0BAQI,eACA,WACA,kBACA,mBAcF,iEAEE,sBAEA,cAQA,gBANA,mCANF,iEAOI,cACA,uBAOJ,wCACE,mBACA,WAEA,iBAWV,YACE,WAEA,uBACE,aACA,eACA,SAEA,yBACE,aACA,QAEA,eAEA,cAEA,6BACE,UAEA,mCAHF,6BAII,kBAIJ,4CACE","file":"style.min.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/style.scss"],"names":[],"mappings":"AAEQ,6JAER,WACE,sDAGF,kBACE,mDACA,gBAIF,UACE,uECbF,KACE,gBACA,SAEA,mCAJF,KAKI,mBACA,YAIJ,KACC,gBAEA,aACC,gBACA,WAGD,kBACC,sBACA,gBACA,UAIF,WACE,gBAEA,WAEA,cAEA,aACA,sBAGF,MACE,2BAGF,EACE,gBACA,YAGF,IACE,eAGF,EACE,cAEA,mCAHF,EAII,eAGF,UACE,WAIJ,UACE,iBACE,uGASF,2BACA,sBAEA,aATA,mCALF,UAMI,iBACA,kGASF,qBACE,YAEA,aACA,mBAEA,mBACA,8BAEA,yBATF,qBAUI,wBAGF,yBACE,aACA,sBAEA,SAEA,kCACE,uBAEA,yBAHF,kCAII,oBAGF,mCACE,wDAGF,uCACE,eACA,YAIJ,4CAKE,mBACA,QALA,yBADF,4CAEI,cAMF,kDACE,kBACA,eAEA,qEACE,cACA,2BACA,yBAQZ,YAIE,WAEA,eACA,QACA,UACA,eAEA,mBACA,WAEA,iBAEA,mBAEA,iBACA,iBAEA,eApBA,yBADF,YAEI,cAsBJ,SACE,WAEA,qBACA,uBAEA,mBAEA,mCARF,SASI,qBACA,oBAGF,oBACE,kBAEA,aACA,eAEA,mBACA,8BAEA,yBATF,oBAUI,eACA,MACA,OACA,WACA,YACA,UAEA,mBAEA,gBAEA,kCACE,UACA,oBAEA,qBAEA,iBAIJ,wBACE,SAEA,aACA,eAEA,QAEA,yBARF,wBASI,WACA,sBACA,QACA,oBAGF,0BACE,iBAEA,eACA,sBACA,cAUA,qBAEA,iBAEA,mBAEA,gCAEA,gBAhBA,yBAPF,0BAQI,eACA,WACA,kBACA,mBAcF,iCACC,oBAGD,iEAEE,sBAEA,cAQA,gBANA,mCANF,iEAOI,cACA,uBAOJ,wCACE,mBACA,WAEA,iBAWV,YACE,WAEA,uBACE,aACA,eACA,SAEA,yBACE,aACA,QAEA,eAEA,cAEA,6BACE,UAEA,mCAHF,6BAII,kBAIJ,4CACE","file":"style.min.css"} \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..7c1f3fb --- /dev/null +++ b/js/main.js @@ -0,0 +1,5 @@ +import { EnableTransition } from "/js/trans.js"; + +document.querySelectorAll(".TransitionEnabled").forEach( HyperlinkElement => { + EnableTransition(HyperlinkElement); +}); \ No newline at end of file diff --git a/js/trans.js b/js/trans.js new file mode 100644 index 0000000..606d67a --- /dev/null +++ b/js/trans.js @@ -0,0 +1,59 @@ +/* + * Myadeleines' Simple Page Transition Script. "Trans" for short. :trol: + * Making CSS-powered animated transitions between pages possible. + * + * Licensed under the Apache License. Please refer to the LICENSE file. + */ + +const $ = selector => document.querySelector(selector); +const Parser = new DOMParser(); +const MainElement = $("main"); + +export function EnableTransition( HyperlinkElement ) { + HyperlinkElement.addEventListener("click", Event => { + Event.preventDefault(); // Browser won't load the page when the hyperlink is pressed. + + const TargettedURL = HyperlinkElement.href; + const ActiveHyperlink = $(".pageNav .active"); + + MainElement.classList.add("Loading"); + + fetch(TargettedURL) + .catch(Error => { + console.log(Error); + MainElement.classList.remove("Loading"); + }) + .then(Response => Response.text().then( FetchedPage => { + FetchedPage = Parser.parseFromString(FetchedPage, "text/html"); + FetchedPage = { + Content: FetchedPage.querySelector("main").innerHTML, + Title: FetchedPage.querySelector("title").innerHTML, + } + + + if (ActiveHyperlink) ActiveHyperlink.classList.remove("active"); + HyperlinkElement.classList.add("active"); + + history.pushState({}, FetchedPage.Title, TargettedURL); + $("title").innerHTML = FetchedPage.Title; + + MainElement.classList.remove("Loading"); + MainElement.classList.add("InTransition"); + + let TransitionDuration = getComputedStyle(MainElement).transitionDuration; + TransitionDuration = parseFloat(TransitionDuration) * 1000; + + console.log(TransitionDuration); + + setTimeout(() => { + MainElement.innerHTML = FetchedPage.Content; + MainElement.classList.remove("InTransition"); + }, TransitionDuration); + + })); + }); +} + +window.addEventListener("popstate", Event => { + window.location.href = window.location.href; // Lazy. +}); \ No newline at end of file diff --git a/template/404.twig b/template/404.twig index b01f4ff..d38671c 100644 --- a/template/404.twig +++ b/template/404.twig @@ -4,14 +4,12 @@ {% include 'includes/nav.twig' with {'page': '404',} %} -
-
-

Not found! :<

-

- This page is nowhere to be found!
- Go on Discord and complain about it to Clash or Mya!! -

-
+
+

Not found! :<

+

+ This page is nowhere to be found!
+ Go on Discord and complain about it to Clash or Mya!! +

{% include 'includes/footer.twig' %} diff --git a/template/includes/head.twig b/template/includes/head.twig index 8edc0a8..eea95af 100644 --- a/template/includes/head.twig +++ b/template/includes/head.twig @@ -27,6 +27,7 @@ + {% if pageTitle == 'Map' %} diff --git a/template/includes/hero.twig b/template/includes/hero.twig index 8094f16..e0d4eaa 100644 --- a/template/includes/hero.twig +++ b/template/includes/hero.twig @@ -10,7 +10,7 @@
Server address: - + Version: 1.3.2
diff --git a/template/includes/nav.twig b/template/includes/nav.twig index 6647964..569c07f 100644 --- a/template/includes/nav.twig +++ b/template/includes/nav.twig @@ -3,20 +3,17 @@