diff --git a/css/src/_fonts.scss b/css/src/_fonts.scss index f6bcfe2..827435f 100644 --- a/css/src/_fonts.scss +++ b/css/src/_fonts.scss @@ -1,6 +1,6 @@ // @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap'); -@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'); +@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@400;500;700&display=swap'); body, input { font-family: "Noto Sans", "Noto Color Emoji", sans-serif; diff --git a/css/src/colors/_dark.scss b/css/src/colors/_dark.scss new file mode 100644 index 0000000..fb6b2eb --- /dev/null +++ b/css/src/colors/_dark.scss @@ -0,0 +1,28 @@ +// Dark Theme + +$pageBG: #202120; +$pageFG: white; + +$accent: #527D52; +$linkColor: #d0dfd0; + +$btnNormalBG: $accent; +$btnNormalFG: white; +$btnActiveBG: $accent; +$btnActiveFG: white; + +$navBG: #272f27; +$navBorder: #575f57; + +$cardNormalBG: #272727; +$cardNormalFG: $pageFG; +$cardNormalBorder: #575757; +$cardActiveBG: $navBG; +$cardActiveFG: $linkColor; +$cardActiveBorder: $navBorder; + +$navLinkOutlineColor: #707f70; +$navLinkNormalColor: #7E9E7E; +$navLinkActiveColor: #DEFEDE; + +$headerOverlay: #101610; \ No newline at end of file diff --git a/css/src/colors/_light.scss b/css/src/colors/_light.scss new file mode 100644 index 0000000..230ea6c --- /dev/null +++ b/css/src/colors/_light.scss @@ -0,0 +1,32 @@ +// Light Theme + +$pageBG: white; +$pageFG: black; + +$accent: #527D52; +$linkColor: $accent; + +$btnNormalBG: $accent; +$btnNormalFG: white; +$btnActiveBG: $accent; +$btnActiveFG: white; + +$navBG: #f9fff9; +$navBorder: #d0dfd0; + +$cardNormalBG: #f9f9f9; +$cardNormalFG: $pageFG; +$cardNormalBorder: #d0d0d0; +$cardActiveBG: $navBG; +$cardActiveFG: $linkColor; +$cardActiveBorder: $navBorder; + +/*$cardBG: $navBG; +$cardFG: $pageFG; +$cardBorder: $navBorder;*/ + +$navLinkOutlineColor: #D0DFD0; +$navLinkNormalColor: #7E9E7E; +$navLinkActiveColor: $accent; + +$headerOverlay: white; \ No newline at end of file diff --git a/css/src/style.scss b/css/src/style.scss index 841daec..e8a6aff 100644 --- a/css/src/style.scss +++ b/css/src/style.scss @@ -1,24 +1,37 @@ -@import "fonts"; +@use "fonts"; +@use "colors/light" as light; +@use "colors/dark" as dark; + +* { + -webkit-tap-highlight-color: transparent; // fuck you +} + +html, body { overflow-x: hidden;} body { - background: white; margin: 0; + background: light.$pageBG; + color: light.$pageFG; + @media (prefers-color-scheme: dark) { - background: #202120; - color: white; + background: dark.$pageBG; + color: dark.$pageFG; } } main { transition: 0.24s; - &.Loading { + &.buffering { + transform: scale(1.01); transition: 0.16s; opacity: 0.4; + pointer-events: none; + user-select: none; } - &.InTransition { + &.transition { transform: scale(0.96); transition: 0.16s; opacity: 0; @@ -42,18 +55,112 @@ ul, ol { p { line-height: 1.6; - opacity: 0.92; + opacity: 0.88; } img { max-width: 100%; } -a { - color: #527D52; +.cards { + display: flex; + flex-wrap: wrap; + gap: 8px; + width: 100%; + + @media (max-width: 600px) { + gap: 12px; + } +} + +.card { + position: relative; + display: flex; + flex-direction: column; + box-sizing: border-box; + max-width: 100%; + height: 150px; + text-decoration: none; + border-radius: 4px; + padding: 8px 12px; + cursor: pointer; + overflow: hidden; + + outline: 1px solid light.$cardNormalBorder; + background: light.$cardNormalBG; + color: light.$cardNormalFG; @media (prefers-color-scheme: dark) { - color: #D0DFD0; + outline-color: dark.$cardNormalBorder; + background: dark.$cardNormalBG; + color: dark.$cardNormalFG; + } + + transition: 0.24s; + + &:hover { + outline-width: 2px; + outline-color: light.$cardActiveBorder; + background: light.$cardActiveBG; + color: light.$cardActiveFG; + + @media (prefers-color-scheme: dark) { + outline-color: dark.$cardActiveBorder; + background: dark.$cardActiveBG; + color: dark.$cardActiveFG; + } + + transition: 0.08s; + + .icon { + transition: 0.48s; + transform: scale(1.2); + } + } + + width: calc(100% / 3 - 6px); + + @media (max-width: 800px) { + width: calc(50% - 4px); + } + + @media (max-width: 600px) { + border-radius: 8px; + width: 100%; + } + + h1 { + margin: 0; + font-size: 1.2em; + font-weight: 400; + } + + .icon { + position: absolute; + top: 0; + right: 0; + height: 100%; + aspect-ratio: 1/1; + object-fit: cover; + + mask-image: linear-gradient(to right, transparent, rgba(red, 0.3)); + @media (prefers-color-scheme: dark) { + mask-image: linear-gradient(to right, transparent, rgba(red, 0.1)); + } + + transition: 0.64s; + } + + p { + margin: 8px 0; + } +} + +a { + color: light.$linkColor; + + @media (prefers-color-scheme: dark) { + color: dark.$linkColor; } &:visited { @@ -63,12 +170,12 @@ a { .pageHero { background-image: - linear-gradient(rgba(white, 0.9),rgba(white, 0.9)), // white overlay. yeah that's a bit of an ugly hack? + linear-gradient(rgba(light.$headerOverlay, 0.9),rgba(light.$headerOverlay, 0.9)), // white overlay. yeah that's a bit of an ugly hack? url('/img/Panorama-Lens-Blur.png'); @media (prefers-color-scheme: dark) { background-image: - linear-gradient(rgba(#101610, 0.9),rgba(#101610, 0.9)), + linear-gradient(rgba(dark.$headerOverlay, 0.9),rgba(dark.$headerOverlay, 0.9)), url('/img/Panorama-Lens-Blur.png'); } @@ -136,7 +243,7 @@ a { } } -.Nav-Toggle { +.navToggle { @media (min-width: 601px) { display: none; } @@ -147,8 +254,13 @@ a { right: 8px; font-size: 18px; - background: #527D52; - color: #fff; + background: light.$btnNormalBG; + color: light.$btnNormalFG; + + @media (prefers-color-scheme: dark) { + background: dark.$btnNormalBG; + color: dark.$btnNormalFG; + } padding: 8px 24px; @@ -163,14 +275,14 @@ a { .pageNav { width: 100%; - border: solid #D0DFD0; + border: solid light.$navBorder; border-width: 0 0 1px 0; - background: #F9FFF9; + background: light.$navBG; @media (prefers-color-scheme: dark) { - border-color: #575F57; - background: #272F27; + border-color: dark.$navBorder; + background: dark.$navBG; } > .container { @@ -190,17 +302,24 @@ a { height: 100%; z-index: 9; - background: inherit; + backdrop-filter: blur(15px); + background: rgba(light.$navBG, 0.86); + @media (prefers-color-scheme: dark) { + background: rgba(dark.$navBG, 0.9); + } + + justify-content: center; + flex-direction: column; + gap: 64px; - transition: 0.12s; + &, > * { transition: 0.16s } &:not(.openned) { opacity: 0; pointer-events: none; - transform: scale(1.2); - - transition: 0.24s; + //&, > * { transition: 0.12s } + > * { transform: translateX(32px); } } } @@ -209,28 +328,33 @@ a { display: flex; flex-wrap: wrap; + align-items: flex-end; gap: 6px; @media (max-width: 600px) { - width: 100%; + width: 100%; flex-direction: column; - gap: 6px; - align-items: center; } > a { + font-family: Outfit; user-select: none; font-size: 16px; box-sizing: border-box; - color: #7E9E7E; + color: light.$navLinkNormalColor; + @media (prefers-color-scheme: dark) { color: dark.$navLinkNormalColor; } @media (max-width: 600px) { - font-size: 24px; - width: 100%; - padding: 12px 24px; - text-align: center; + font-size: 28px; + outline: none; + padding: 8px 32px; + text-align: end; + + &.active::before { + content: "➤"; // i know.. + } } @@ -250,25 +374,31 @@ a { &:hover, &.active { //background: rgba(15, 23, 42, 0.1); - outline-color: #D0DFD0; - - color: #527D52; + color: light.$navLinkActiveColor; + outline-color: light.$navLinkOutlineColor; @media (prefers-color-scheme: dark) { - color: #DEFEDE; - outline-color: #707F70; + color: dark.$navLinkActiveColor; + outline-color: dark.$navLinkOutlineColor; } transition: 0.08s; } - &.buttonPrimary { - background: #527D52; - color: #fff; + @media (min-width: 601px) { + &.buttonPrimary { + background: light.$btnNormalBG; + color: light.$btnNormalFG; - font-weight: bold; - } + @media (prefers-color-scheme: dark) { + background: dark.$btnNormalBG; + color: dark.$btnNormalFG; + } + + font-weight: 700 !important; + } + } } } } diff --git a/css/style.min.css b/css/style.min.css index 6ab1778..5b9d247 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}}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 */ +@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@400;500;700&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}*{-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{overflow-x:hidden}body{margin:0;background:#fff;color:#000}@media(prefers-color-scheme: dark){body{background:#202120;color:#fff}}main{transition:.24s}main.buffering{transform:scale(1.01);transition:.16s;opacity:.4;pointer-events:none;user-select:none}main.transition{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:.88}img{max-width:100%}.cards{display:flex;flex-wrap:wrap;gap:8px;width:100%}@media(max-width: 600px){.cards{gap:12px}}.card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;max-width:100%;height:150px;text-decoration:none;border-radius:4px;padding:8px 12px;cursor:pointer;overflow:hidden;outline:1px solid #d0d0d0;background:#f9f9f9;color:#000;transition:.24s;width:calc(33.3333333333% - 6px)}@media(prefers-color-scheme: dark){.card{outline-color:#575757;background:#272727;color:#fff}}.card:hover{outline-width:2px;outline-color:#d0dfd0;background:#f9fff9;color:#527d52;transition:.08s}@media(prefers-color-scheme: dark){.card:hover{outline-color:#575f57;background:#272f27;color:#d0dfd0}}.card:hover .icon{transition:.48s;transform:scale(1.2)}@media(max-width: 800px){.card{width:calc(50% - 4px)}}@media(max-width: 600px){.card{border-radius:8px;width:100%}}.card h1{margin:0;font-size:1.2em;font-weight:400}.card .icon{position:absolute;top:0;right:0;height:100%;aspect-ratio:1/1;object-fit:cover;mask-image:linear-gradient(to right, transparent, rgba(255, 0, 0, 0.3));transition:.64s}@media(prefers-color-scheme: dark){.card .icon{mask-image:linear-gradient(to right, transparent, rgba(255, 0, 0, 0.1))}}.card p{margin:8px 0}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)}.navToggle{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){.navToggle{display:none}}@media(prefers-color-scheme: dark){.navToggle{background:#527d52;color:#fff}}.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;backdrop-filter:blur(15px);background:rgba(249,255,249,.86);justify-content:center;flex-direction:column;gap:64px}}@media(max-width: 600px)and (prefers-color-scheme: dark){.pageNav>.container{background:rgba(39,47,39,.9)}}@media(max-width: 600px){.pageNav>.container,.pageNav>.container>*{transition:.16s}.pageNav>.container:not(.openned){opacity:0;pointer-events:none}.pageNav>.container:not(.openned)>*{transform:translateX(32px)}}.pageNav>.container>div{margin:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px}@media(max-width: 600px){.pageNav>.container>div{width:100%;flex-direction:column}}.pageNav>.container>div>a{font-family:Outfit;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(prefers-color-scheme: dark){.pageNav>.container>div>a{color:#7e9e7e}}@media(max-width: 600px){.pageNav>.container>div>a{font-size:28px;outline:none;padding:8px 32px;text-align:end}.pageNav>.container>div>a.active::before{content:"➤"}}.pageNav>.container>div>a.active{pointer-events:none}.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{color:#527d52;outline-color:#d0dfd0;transition:.08s}@media(prefers-color-scheme: dark){.pageNav>.container>div>a:hover,.pageNav>.container>div>a.active{color:#defede;outline-color:#707f70}}@media(min-width: 601px){.pageNav>.container>div>a.buttonPrimary{background:#527d52;color:#fff;font-weight:700 !important}}@media(min-width: 601px)and (prefers-color-scheme: dark){.pageNav>.container>div>a.buttonPrimary{background:#527d52;color:#fff}}.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 31aaf72..317abfa 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,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 +{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/style.scss","src/colors/_light.scss","src/colors/_dark.scss"],"names":[],"mappings":"CAEQ,qKAER,WACE,sDAGF,kBACE,mDACA,gBAIF,UACE,uECXF,EACC,0CAGD,4BAEA,KACE,SAEA,WCXO,KDYP,MCXO,KDaP,mCANF,KAOI,WEfK,QFgBL,MEfK,MFmBT,KACC,gBAEA,eACC,sBACA,gBACA,WACA,oBACA,iBAGD,gBACC,sBACA,gBACA,UAIF,WACE,gBAEA,WAEA,cAEA,aACA,sBAGF,MACE,2BAGF,EACE,gBACA,YAGF,IACE,eAGF,OACC,aACA,eACA,QACA,WAEA,yBAND,OAOE,UAIF,MACC,kBACA,aACA,sBACA,sBACA,eACA,aACC,qBACA,kBACA,iBACA,eACA,gBAED,0BACC,WCzEa,QD0Eb,MCvFO,KD+FP,gBAsBD,iCA5BC,mCAjBF,MAkBI,cE3Ee,QF4Ef,WE9EW,QF+EZ,ME5FM,MFiGP,YACC,kBACA,cCxFS,QDyFT,WC1FK,QD2FL,MCnGM,QD2GP,gBANC,mCAND,YAOG,cE7FO,QF8FP,WE/FG,QFgGJ,MEvGQ,SF4GT,kBACC,gBACA,qBAMF,yBA/CF,MAgDE,uBAGD,yBAnDD,MAoDG,kBACD,YAGA,SACC,SACA,gBACA,gBAGD,YACC,kBACA,MACA,QACA,YACA,iBACA,iBAEA,wEAKA,gBAJA,mCATD,YAUE,yEAMF,QACC,aAIH,EACE,MC1JO,QD4JP,mCAHF,EAII,ME5JQ,SF+JV,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,WAIE,WAEA,eACA,QACA,UACA,eAEA,WC3PO,QD4PP,MCxPY,KD+PZ,iBAEA,mBAEA,iBACA,iBAEA,eAzBA,yBADF,WAEI,cAYF,mCAdF,WAeG,WE/PM,QFgQN,ME5PW,MFyQd,SACE,WAEA,qBACA,uBAEA,WC3QM,QD6QN,mCARF,SASI,aE7QQ,QF8QR,WE/QI,SFkRN,oBACE,kBAEA,aACA,eAEA,mBACA,8BAEA,yBATF,oBAUI,eACA,MACA,OACA,WACA,YACA,UAEF,2BACC,iCAKA,uBACC,sBACA,UANF,yDAnBF,oBAoBI,8BAXF,yBAkBE,0DAEA,kCACE,UACA,oBAGA,gEAIJ,wBACE,SAEA,aACA,eACA,qBAEA,QAEA,yBATF,wBAUG,WACC,uBAGF,0BACE,mBACA,iBAEA,eACA,sBACA,MC7Ta,QD4Ub,qBAEA,iBAEA,mBAEA,gCAEA,gBAtBA,mCAPF,0BAOwC,MElUzB,SFoUb,yBATF,0BAUI,eACA,aACA,iBACA,eAEA,yCACC,aAeH,iCACC,oBAGD,iEAEE,MCnXD,QDoXC,cC9VY,QDsWZ,gBANA,mCALF,iEAMI,MEnWS,QFoWT,cEtWU,SF6Wd,yBACC,wCACE,WCjYF,QDkYE,MC9XG,KDqYH,4BALA,yDAJF,wCAKI,WErYJ,QFsYI,MElYC,MFiZd,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/index.php b/index.php index 44e2edb..7a954e6 100644 --- a/index.php +++ b/index.php @@ -16,11 +16,13 @@ 'name' => 'Republic of Panorama', 'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Republic%20of%20Panorama/Flag.svg', 'short' => 'rop', + 'description' => 'Short description of R.O.P.', ), 'drr' => array( 'name' => 'Democratic Republic of Rayland', 'flag' => 'https://raw.theclashfruit.me/CRSS/CRSS/main/Nations/Democratic%20Republic%20of%20Rayland/bannre.png', - 'short' => 'drr' + 'short' => 'drr', + 'description' => 'Short description of D.R.R.', ) ); @@ -37,6 +39,8 @@ $twig->addGlobal('nations', $nations); + $twig->addGlobal('reduced', isset($_GET['reduced'])); + $router->get('/', function() { global $twig; diff --git a/js/main.js b/js/main.js index 7c1f3fb..19ab844 100644 --- a/js/main.js +++ b/js/main.js @@ -1,5 +1,13 @@ -import { EnableTransition } from "/js/trans.js"; +import { enableTransition } from "/js/trans.js"; + +function enableLinks() { + document.querySelectorAll(".transitionEnabled").forEach( hyperlinkElement => { + enableTransition(hyperlinkElement); + hyperlinkElement.classList.remove("transitionEnabled"); + }); +} + +enableLinks(); + +window.addEventListener("transitionEnd", enableLinks); -document.querySelectorAll(".TransitionEnabled").forEach( HyperlinkElement => { - EnableTransition(HyperlinkElement); -}); \ No newline at end of file diff --git a/js/nav.js b/js/nav.js index 7047489..8b04e49 100644 --- a/js/nav.js +++ b/js/nav.js @@ -1,16 +1,18 @@ const $ = selector => document.querySelector(selector); -const navToggle = $(".Nav-Toggle"); +const navToggle = $(".navToggle"); const menu = $(".pageNav > .container"); navToggle.onclick = () => { - const menuToggled = menu.classList.contains("openned"); + const menuToggled = menu.classList.contains("openned"); - if (menuToggled) { - menu.classList.remove("openned"); - } else { - menu.classList.add("openned"); - } + if (menuToggled) { + menu.classList.remove("openned"); + } else { + menu.classList.add("openned"); + } - navToggle.innerHTML = menuToggled ? "Menu" : "Close"; -} \ No newline at end of file + navToggle.innerHTML = menuToggled ? "Menu" : "Close"; +} + +window.addEventListener("transitionBuffering", () => menu.classList.remove("openned")); \ No newline at end of file diff --git a/js/trans.js b/js/trans.js index 606d67a..77fd77d 100644 --- a/js/trans.js +++ b/js/trans.js @@ -5,55 +5,62 @@ * Licensed under the Apache License. Please refer to the LICENSE file. */ +const transitionBufferingEvent = new Event("transitionBuffering"); +const transitionStartEvent = new Event("transitionStart"); +const transitionEndEvent = new Event("transitionEnd"); const $ = selector => document.querySelector(selector); -const Parser = new DOMParser(); -const MainElement = $("main"); +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. +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"); + loadURL(hyperlinkElement.href, true, hyperlinkElement); + }); +} - MainElement.classList.add("Loading"); +function loadURL( targettedURL, updateURL, hyperlinkElement ) { + const activeHyperlink = $(".pageNav .active"); - 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, - } + mainElement.classList.add("buffering"); + window.dispatchEvent(transitionBufferingEvent); + fetch(targettedURL + "?reduced") + .catch(error => { + console.log(error); + alert(error); + mainElement.classList.remove("buffering"); + }) + .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"); + if (activeHyperlink) activeHyperlink.classList.remove("active"); + if (hyperlinkElement) hyperlinkElement.classList.add("active"); - history.pushState({}, FetchedPage.Title, TargettedURL); - $("title").innerHTML = FetchedPage.Title; + if (updateURL) history.pushState({}, fetchedPage.title, targettedURL); + $("title").innerHTML = fetchedPage.title; - MainElement.classList.remove("Loading"); - MainElement.classList.add("InTransition"); + mainElement.classList.remove("buffering"); + mainElement.classList.add("transition"); - let TransitionDuration = getComputedStyle(MainElement).transitionDuration; - TransitionDuration = parseFloat(TransitionDuration) * 1000; + let transitionDuration = getComputedStyle(mainElement).transitionDuration; + transitionDuration = parseFloat(transitionDuration) * 1000; + + window.dispatchEvent(transitionStartEvent); - console.log(TransitionDuration); - - setTimeout(() => { - MainElement.innerHTML = FetchedPage.Content; - MainElement.classList.remove("InTransition"); - }, TransitionDuration); - - })); - }); + setTimeout(() => { + mainElement.innerHTML = fetchedPage.content; + mainElement.classList.remove("transition"); + window.dispatchEvent(transitionEndEvent); + }, transitionDuration); + })); } window.addEventListener("popstate", Event => { - window.location.href = window.location.href; // Lazy. + loadURL(window.location.href, false) }); \ No newline at end of file diff --git a/template/includes/foot.twig b/template/includes/foot.twig index 1fd5f4f..39d67a3 100644 --- a/template/includes/foot.twig +++ b/template/includes/foot.twig @@ -1,2 +1,4 @@ +{% if not reduced %} - \ No newline at end of file + +{% endif %} \ No newline at end of file diff --git a/template/includes/footer.twig b/template/includes/footer.twig index 398a248..e7fd5c0 100644 --- a/template/includes/footer.twig +++ b/template/includes/footer.twig @@ -1,3 +1,4 @@ +{% if not reduced %}
@@ -28,4 +29,5 @@
- \ No newline at end of file + +{% endif %} \ No newline at end of file diff --git a/template/includes/head.twig b/template/includes/head.twig index eea95af..41f8edf 100644 --- a/template/includes/head.twig +++ b/template/includes/head.twig @@ -1,3 +1,5 @@ +{% if reduced %} {{ pageTitle }}  •  Clyde's Real Survival SMP {% endif %} +{% if not reduced %} @@ -5,7 +7,7 @@ - Clyde's Real Survival SMP • {{ pageTitle }} + {{ pageTitle }}  •  Clyde's Real Survival SMP @@ -84,4 +86,4 @@ - \ No newline at end of file + {% endif %} \ No newline at end of file diff --git a/template/includes/hero.twig b/template/includes/hero.twig index dddbc64..c03de41 100644 --- a/template/includes/hero.twig +++ b/template/includes/hero.twig @@ -1,3 +1,4 @@ +{% if not reduced %}
@@ -15,4 +16,5 @@
-
\ No newline at end of file + +{% endif %} \ No newline at end of file diff --git a/template/includes/nav.twig b/template/includes/nav.twig index 569c07f..ef894d4 100644 --- a/template/includes/nav.twig +++ b/template/includes/nav.twig @@ -1,15 +1,16 @@ +{% if not reduced %} -
Menu
+
Menu
\ No newline at end of file + +{% endif %} \ No newline at end of file diff --git a/template/nations.twig b/template/nations.twig index e33d4db..6b348f9 100644 --- a/template/nations.twig +++ b/template/nations.twig @@ -6,13 +6,16 @@

Nations

- + +
{% include 'includes/footer.twig' %}