diff --git a/index.html b/index.html index c5d8caf..1a6ddaa 100644 --- a/index.html +++ b/index.html @@ -90,9 +90,9 @@

{{getCurrentPageComputed.description}}

- - - + + + diff --git a/styles/btg-min.css b/styles/btg-min.css index b693510..163b509 100644 --- a/styles/btg-min.css +++ b/styles/btg-min.css @@ -1 +1 @@ -@font-face{font-family:'Display';src:url('../fonts/ArchivoNarrow-VariableFont_wght.ttf');font-weight:700;}@font-face{font-family:'Text';src:url('../fonts/ArchivoNarrow-VariableFont_wght.ttf');font-weight:400;}:root{--bodyBackground:0,0%,0%;--appForegroundWeakest:0,0%,46%;--appForegroundWeaker:0,0%,25%;--appForeground:0,0%,7%;--appForegroundStronger:0,0%,4%;--appForegroundStrongest:0,0%,0%;--appBackgroundWeakest:0,0%,98%;--appBackgroundWeaker:0,0%,85%;--appBackground:0,0%,70%;--appBackgroundStronger:0,0%,57%;--appBackgroundStrongest:0,0%,55%;--bannerHS:329,78%;--navHeight:150px;--maxWidth:1024px;--footerHeight:60px;--defaultGap:1em;--borderRadius:18px;--targetX:50%;--pieceSize:110px;--gridSize:110;}html,body{padding:0;margin:0;width:100%;height:100%;line-height:150%;overflow:hidden;color:hsl(var(--appForeground));font-family:'Text',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;}body{margin:0 auto;overflow:auto;overflow-x:hidden;}[v-cloak]{transition:250ms ease-out opacity;opacity:0;}.disabled,:disabled{pointer-events:none;opacity:.1;}header{width:100%;}h1,h2,h3,h4,h5{margin-bottom:0;margin-top:calc(var(--defaultGap) / 2);line-height:100%;font-weight:400;font-family:"Text";}h1{font-family:"Display";font-size:normal;}p{padding:0;margin:var(--defaultGap) 0;}p:last-of-type{margin:var(--defaultGap) 0 0;}a,a:visited,a:focus,a:active{color:hsl(var(--appForeground));text-decoration:none;border-bottom:1px solid hsl(var(--bannerHS),70%);}ul{list-style-type:'- ';padding-left:14px;}li{padding-left:4px;}button{font-family:"Display";cursor:pointer;border:none;background:none;line-height:100%;user-select:none;-webkit-user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:none;-webkit-transform-style:preserve-3d;}button.inline{display:flex;flex-direction:row;justify-content:center;justify-items:baseline;align-content:baseline;align-items:center;column-gap:8px;white-space:nowrap;}section button.inert,section button.inline.inert{background-color:hsla(var(--bannerHS),39%,1);box-shadow:none;pointer-events:none;}icon{display:block;mask-size:20px 20px;-webkit-mask-size:20px 20px;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;background-color:white;width:15px;height:20px;pointer-events:none;}icon.bmc{mask-image:url(../images/icon_bmc.svg);-webkit-mask-image:url(../images/icon_bmc.svg);}icon.play{width:20px;height:20px;margin-left:4px;mask-image:url(../images/icon_play.svg);-webkit-mask-image:url(../images/icon_play.svg);}icon.apple{width:17px;mask-size:17px 19px;-webkit-mask-size:17px 19px;mask-image:url(../images/icon_apple.svg);-webkit-mask-image:url(../images/icon_apple.svg);margin-bottom:1px;}icon.googleplay{width:17px;mask-size:17px 19px;-webkit-mask-size:17px 19px;mask-image:url(../images/icon_google_play.svg);-webkit-mask-image:url(../images/icon_google_play.svg);margin-bottom:1px;}app{display:flex;justify-content:center;align-items:top;width:100%;height:100%;background-image:repeating-linear-gradient(45deg,hsla(var(--bodyBackground),.4) 0,hsla(var(--bodyBackground),.4) 40px,hsla(var(--bodyBackground),.45) 40px,hsla(var(--bodyBackground),.45) 80px);background-attachment:scroll;background-repeat:no-repeat,repeat;transition:250ms ease-in-out all;}onionskin{display:flex;opacity:0;pointer-events:none;position:absolute;width:100%;height:100%;overflow:scroll;justify-content:center;align-items:center;background:#000000CC;transition:250ms ease-out all;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:200;}onionskin.show{opacity:1;pointer-events:all;}onionskin img,onionskin video{max-height:700px;height:90%;box-shadow:0 8px 8px #00000033;border-radius:var(--borderRadius);}stage{display:flex;margin:0 var(--defaultGap);width:calc(100% - 2 * var(--defaultGap));height:100%;max-width:var(--maxWidth);flex-direction:column;justify-content:flex-start;align-items:center;align-content:center;}nav,subnav,footer{display:flex;flex-direction:row;height:var(--navHeight);width:calc(100% - 2 * var(--defaultGap));gap:var(--defaultGap);padding:0 var(--defaultGap);align-items:center;}selector{display:block;padding:0;height:auto;margin:0;}nav selector{overflow:hidden;color:hsl(var(--appForeground));width:80px;height:80px;border:0 solid transparent;cursor:pointer;padding:0;background-color:transparent;border-radius:var(--borderRadius);transition:200ms ease-in-out all;scale:.8;}selector button{display:block;border-radius:var(--borderRadius);background-size:cover;white-space:nowrap;background-repeat:no-repeat;width:100%;height:auto;margin:0;padding:0;overflow:hidden;transition:200ms ease-in-out all;}selector.on{scale:1;}selector.game.on{box-shadow:0 4px 10px #00000066;}selector button img{opacity:0;width:100%;}nav selector:first-of-type{margin-right:20px;}nav selector button{color:hsl(var(--appForeground));background-blend-mode:luminosity;background-size:contain;opacity:.8}selector button banner{display:none;position:absolute;font-size:11px;background:black;z-index:1;color:white;padding:3px 40px;border-radius:calc(var(--borderRadius) / 4);rotate:-38deg;scale:1.2;transform:translate(-23px,-8px);text-transform:capitalize;box-shadow:0 2px 2px hsla(var(--appForeground),.2);font-family:"Display";transition:200ms ease-in-out all;}nav selector button banner{transform:translate(-29px,-58px);opacity:0;}selector.on button banner{opacity:1;scale:1;transform:translate(-29px,-18px);}selector button banner.free,selector button banner.paid{background-color:hsl(var(--bannerHS),39%);color:#232323;}selector button banner.beta{background:hsl(var(--bannerHS),58%);}selector button banner.alpha{background:hsl(var(--bannerHS),91%);color:hsl(var(--bannerHS),39%);}selector.banner button banner{display:block;}nav selector.on{cursor:default;}nav selector.on button,nav selector:hover.on button{cursor:default;opacity:1;filter:none;transform:translateY(0%);}nav selector:hover button{opacity:1;}content{display:block;width:calc(100% - 4 * var(--defaultGap));height:100%;max-height:calc(100% - var(--navHeight) - var(--footerHeight) - 4 * var(--defaultGap));overflow:auto;background-color:hsla(var(--appBackgroundWeakest),.88);background-size:cover;background-position:0px -100px;background-repeat:no-repeat;padding:calc(2 * var(--defaultGap));border-radius:calc(var(--borderRadius) / 4);box-shadow:0 10px 20px hsla(var(--appForeground),.6)}content::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none;touch-action:auto;scroll-behavior:smooth;}section.collapsed{max-height:318px;overflow:hidden;margin-bottom:calc(2 * var(--defaultGap));}sectionToggle{cursor:pointer;display:block;color:hsl(var(--bannerHS),21%);padding-top:30px;-webkit-backdrop-filter:blur(4px);transform:translateY(-50px);}section.expanded{max-height:112000px;overflow:hidden;}section h2{margin-top:var(--defaultGap);padding-top:var(--defaultGap);border-top:1px solid hsla(var(--appForeground),.1);}section intro{width:100%;display:flex;justify-content:space-between;margin-bottom:var(--defaultGap);}section intro h1 span{font-weight:400;font-family:"Text";font-size:.5em;color:hsl(var(--appForegroundWeakest));}section intro h2,section h3{font-family:"Text";font-weight:400;padding-top:0;margin-top:calc(var(--defaultGap) / 3);border:none;color:hsl(var(--appForegroundWeakest));text-transform:uppercase;font-size:1em;letter-spacing:1px;}section h3{margin-top:calc(var(--defaultGap));color:hsl(var(--appForeground))}section intro p{margin:10px 0 0 0;}section intro img{max-width:300px;border-radius:calc(var(--borderRadius) / 2);overflow:hidden;}section intro button,section button.action{display:flex;justify-content:center;align-items:center;height:34px;border-radius:17px;background-color:hsl(var(--bannerHS),50%);background-image:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3));color:hsl(var(--appBackgroundWeakest));padding:0 20px;margin:calc(2 * var(--defaultGap)) 0 var(--defaultGap) 0;transform:translateX(-3px);}.showmore{color:hsla(var(--appForegroundWeakest),100%);cursor:pointer;}section button.action{margin-top:var(--defaultGap);background-image:none;}section intro button.light{display:none;background:hsl(var(--appForegroundWeakest));color:hsla(var(--appBackgroundWeakest),1);}section h4{font-weight:600;margin-top:var(--defaultGap);margin-bottom:0;padding-bottom:0;}screenshots,features ul,quotes{display:flex;flex:1;gap:calc(var(--defaultGap));overflow-x:auto;overflow-y:hidden;width:calc(100%);padding:var(--defaultGap) 0 0;}screenshots{padding:var(--defaultGap) calc(2 * var(--defaultGap)) 0;margin-left:calc(-2 * var(--defaultGap));}quotes{flex-wrap:wrap;column-gap:calc(var(--defaultGap));row-gap:calc(var(--defaultGap));padding:0;margin:var(--defaultGap) 0;}quotes quote{display:block;line-height:150%;width:calc(100% - var(--defaultGap) * 3);max-width:calc(50% - var(--defaultGap) * 3);margin:0;color:hsl(var(--appForegroundWeaker));padding:0;cursor:pointer;}quote rating{display:block;padding:4px 0;}quote statement{display:inline;font-style:italic;}quote attribution{display:inline;text-align:left;white-space:nowrap;color:hsla(var(--appForeground),.6);}quote attribution::before{content:' – ';padding-left:4px;}features ul{gap:calc(var(--defaultGap) / 2);flex-wrap:wrap;margin-top:0;}features ul li{list-style-type:none;padding:calc(var(--defaultGap) / 3) var(--defaultGap);margin:0;border-radius:var(--borderRadius);background:hsla(var(--bannerHS),100%,1);color:hsl(var(--bannerHS),50%);}installers{display:flex;flex:1;gap:calc(var(--defaultGap) / 2);width:calc(100%);}screenshots::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none;touch-action:auto;scroll-behavior:smooth;}screenshots container{display:block;border-radius:calc(var(--borderRadius) / 2);overflow:hidden;box-shadow:0 8px 8px #00000033;margin-bottom:var(--defaultGap);border:1px solid white;min-width:194px;height:420px;background-repeat:no-repeat;background-size:cover;}screenshots screenshot,screenshots video{cursor:pointer;height:440px;}screenshots container screenshot{display:flex;justify-content:center;align-items:center;}screenshots container.video screenshot{background:hsla(0,0%,0%,.2)}screenshots container screenshot button{width:50px;height:50px;border-radius:50%;border:2px solid white;background:hsla(0,0%,0%,.4);justify-content:center;align-items:center;display:flex;transition:200ms ease-out all;padding:0;}screenshots container:hover screenshot button{background:hsla(0,0%,0%,.7);}screenshots container{background-repeat:no-repeat;background-size:cover;background-position:center;}screenshots container img{opacity:0;}screenshots screenshot img,screenshots video{min-width:194px;height:420px;}communities community{display:block;line-height:150%;width:auto;margin:var(--defaultGap) 0 0;}communities community p,communities community p:last-of-type{padding:0;margin:0;line-height:150%;}communities community h3,communities community ul{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;;}communities community li{list-style-type:'↳ ';margin-left:14px;line-height:200%;color:hsl(var(--appForegroundWeakest));}communities community h3{margin-bottom:var(--defaultGap);}logo:hover{transition:30s ease-out all;opacity:.6;transform:scale(.9);}logo img{opacity:0;}version,credit{display:block;}games{width:100%;margin-top:calc(2 * var(--defaultGap));margin-bottom:calc(2 * var(--defaultGap));display:flex;flex-wrap:wrap;justify-content:center;flex-direction:row;align-items:center;gap:20px;}games selector{width:calc(50% - 10px);}games selector button{border-radius:4px;display:flex;background-size:contain;background-position:center;background-repeat:no-repeat;cursor:pointer;overflow:hidden;box-shadow:0 4px 4px #00000033;}games selector button img{opacity:0;width:100%;}footer{max-width:var(--maxWidth);margin:0 auto;font-size:.8em;text-align:left;align-items:center;height:var(--footerHeight);color:hsla(var(--appBackgroundWeakest),.9);position:absolute;bottom:0;}content footer{display:none;height:auto;color:hsla(var(--appForeground),.9);position:relative;}footer a,footer a:visited,footer a:active{color:hsl(var(--appBackgroundWeakest));text-decoration:none;border:none;}footer a::before{content:' | ';display:inline-block;padding-right:var(--defaultGap);}@media only screen and (max-width:500px){:root{--navHeight:120px;--footerHeight:40px;--defaultGap:1em}h1,h2,h3,h4,h5{margin:calc(var(--defaultGap) / 2) 0 0 0;font-weight:normal}nav,subnav,footer{justify-content:center}nav{align-items:center}nav selector{width:80px;display:none;opacity:1}nav selector:first-child,nav selector.on:first-child{display:block;margin:0;scale:1}nav selector button,nav selector:hover button{opacity:1;transform:translateY(0%)}stage{width:100%;margin:0}content{border-radius:0;box-shadow:none;max-height:calc(100% - var(--navHeight) - 3 * var(--defaultGap))}section intro img{display:none}quote rating{display:block;padding:2px 0 6px}games{margin-top:var(--defaultGap);margin-bottom:var(--defaultGap);justify-content:center;align-items:center;column-gap:0;row-gap:0}games selector{flex-basis:100%;margin:var(--defaultGap) 0}footer{display:none}footer a,footer a:visited,footer a:active{color:hsla(var(--appForeground),.8);text-decoration:none}content footer{margin-top:calc(2 * var(--defaultGap));border-top:1px solid hsla(var(--appForeground),.1);padding:var(--defaultGap) 0 0;display:flex;width:100%;justify-content:start;color:hsla(var(--appForeground),.7)}}@media only screen and (max-width:500px){:root{--appBackgroundWeakest:0,0%,0%;--appBackgroundWeaker:0,0%,0%;--appBackground:0,0%,0%;--appBackgroundStronger:0,0%,0%;--appBackgroundStrongest:0,0%,0%;--appForegroundWeakest:0,0%,100%;--appForegroundWeaker:0,0%,100%;--appForeground:0,0%,100%;--appForegroundStronger:0,0%,100%;--appForegroundStrongest:0,0%,100%}section intro h1 span,section intro h2{color:hsla(var(--appForeground),.7)}content{padding-top:var(--defaultGap);max-height:calc(100% - var(--navHeight) - 3 * var(--defaultGap));background-color:transparent;box-shadow:none;width:calc(100% - 3 * var(--defaultGap))}section intro button,section button.action{color:hsl(var(--appForegroundWeakest));box-shadow:0 4px 8px hsla(var(--bodyBackground),.4)}section intro button.light{display:block}section intro button.dark{display:none}sectionToggle{color:hsla(0,0%,91%,.8)}selector button banner{box-shadow:0 2px 2px hsla(var(--bodyBackground),.2)}quotes{gap:8px}quotes quote{max-width:unset;width:calc(100%);background:hsla(var(--appBackgroundWeakest),.4);padding:var(--defaultGap);border-radius:calc(var(--borderRadius) / 2)}quotes attribution{color:hsla(var(--appForeground),.8)}features ul{gap:4px}features ul li{background:hsla(var(--bannerHS),96%,1);font-size:.9em;padding:calc(var(--defaultGap) / 4) calc(var(--defaultGap))}} \ No newline at end of file +@font-face{font-family:'Display';src:url('../fonts/ArchivoNarrow-VariableFont_wght.ttf');font-weight:700;}@font-face{font-family:'Text';src:url('../fonts/ArchivoNarrow-VariableFont_wght.ttf');font-weight:400;}:root{--bodyBackground:0,0%,0%;--appForegroundWeakest:0,0%,46%;--appForegroundWeaker:0,0%,25%;--appForeground:0,0%,7%;--appForegroundStronger:0,0%,4%;--appForegroundStrongest:0,0%,0%;--appBackgroundWeakest:0,0%,98%;--appBackgroundWeaker:0,0%,85%;--appBackground:0,0%,70%;--appBackgroundStronger:0,0%,57%;--appBackgroundStrongest:0,0%,55%;--bannerHS:329,78%;--navHeight:150px;--maxWidth:1024px;--footerHeight:60px;--defaultGap:1em;--borderRadius:18px;--targetX:50%;--pieceSize:110px;--gridSize:110;}html,body{padding:0;margin:0;width:100%;height:100%;line-height:150%;overflow:hidden;color:hsl(var(--appForeground));font-family:'Text',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;}body{margin:0 auto;overflow:auto;overflow-x:hidden;}[v-cloak]{transition:250ms ease-out opacity;opacity:0;}.disabled,:disabled{pointer-events:none;opacity:.1;}header{width:100%;}h1,h2,h3,h4,h5{margin-bottom:0;margin-top:calc(var(--defaultGap) / 2);line-height:100%;font-weight:400;font-family:"Text";}h1{font-family:"Display";font-size:normal;}p{padding:0;margin:var(--defaultGap) 0;}p:last-of-type{margin:var(--defaultGap) 0 0;}a,a:visited,a:focus,a:active{color:hsl(var(--appForeground));text-decoration:none;border-bottom:1px solid hsl(var(--bannerHS),70%);}ul{list-style-type:'- ';padding-left:14px;}li{padding-left:4px;}button{font-family:"Display";cursor:pointer;border:none;background:none;line-height:100%;user-select:none;-webkit-user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:none;-webkit-transform-style:preserve-3d;}button.inline{display:flex;flex-direction:row;justify-content:center;justify-items:baseline;align-content:baseline;align-items:center;column-gap:8px;white-space:nowrap;}section button.inert,section button.inline.inert{background-color:hsla(var(--bannerHS),39%,1);box-shadow:none;pointer-events:none;}icon{display:block;mask-size:20px 20px;-webkit-mask-size:20px 20px;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;background-color:white;width:15px;height:20px;pointer-events:none;}icon.bmc{mask-image:url(../images/icon_bmc.svg);-webkit-mask-image:url(../images/icon_bmc.svg);}icon.play{width:20px;height:20px;margin-left:4px;mask-image:url(../images/icon_play.svg);-webkit-mask-image:url(../images/icon_play.svg);}icon.apple{width:17px;mask-size:17px 19px;-webkit-mask-size:17px 19px;mask-image:url(../images/icon_apple.svg);-webkit-mask-image:url(../images/icon_apple.svg);margin-bottom:1px;}icon.googleplay{width:17px;mask-size:17px 19px;-webkit-mask-size:17px 19px;mask-image:url(../images/icon_google_play.svg);-webkit-mask-image:url(../images/icon_google_play.svg);margin-bottom:1px;}app{display:flex;justify-content:center;align-items:top;width:100%;height:100%;background-image:repeating-linear-gradient(45deg,hsla(var(--bodyBackground),.4) 0,hsla(var(--bodyBackground),.4) 40px,hsla(var(--bodyBackground),.45) 40px,hsla(var(--bodyBackground),.45) 80px);background-attachment:scroll;background-repeat:no-repeat,repeat;transition:250ms ease-in-out all;}onionskin{display:flex;opacity:0;pointer-events:none;position:absolute;width:100%;height:100%;overflow:scroll;justify-content:center;align-items:center;background:#000000CC;transition:250ms ease-out all;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:200;}onionskin.show{opacity:1;pointer-events:all;}onionskin img,onionskin video{max-height:700px;height:90%;box-shadow:0 8px 8px #00000033;border-radius:var(--borderRadius);}stage{display:flex;margin:0 var(--defaultGap);width:calc(100% - 2 * var(--defaultGap));height:100%;max-width:var(--maxWidth);flex-direction:column;justify-content:flex-start;align-items:center;align-content:center;}nav,subnav,footer{display:flex;flex-direction:row;height:var(--navHeight);width:calc(100% - 2 * var(--defaultGap));gap:var(--defaultGap);padding:0 var(--defaultGap);align-items:center;}selector{display:block;padding:0;height:auto;margin:0;}nav selector{overflow:hidden;color:hsl(var(--appForeground));width:80px;height:80px;border:0 solid transparent;cursor:pointer;padding:0;background-color:transparent;border-radius:var(--borderRadius);transition:200ms ease-in-out all;scale:.8;}selector button{display:block;border-radius:var(--borderRadius);background-size:cover;white-space:nowrap;background-repeat:no-repeat;width:100%;height:auto;margin:0;padding:0;overflow:hidden;transition:200ms ease-in-out all;}selector.on{scale:1;}selector.game.on{box-shadow:0 4px 10px #00000066;}selector button img{opacity:0;width:100%;}nav selector:first-of-type{margin-right:20px;}nav selector button{color:hsl(var(--appForeground));background-blend-mode:luminosity;background-size:contain;opacity:.8}selector button banner{display:none;position:absolute;font-size:11px;background:black;z-index:1;color:white;padding:3px 40px;border-radius:calc(var(--borderRadius) / 4);rotate:-38deg;scale:1.2;transform:translate(-23px,-8px);text-transform:capitalize;box-shadow:0 2px 2px hsla(var(--appForeground),.2);font-family:"Display";transition:200ms ease-in-out all;}nav selector button banner{transform:translate(-29px,-58px);opacity:0;}selector.on button banner{opacity:1;scale:1;transform:translate(-29px,-18px);}selector button banner.free,selector button banner.paid{background-color:hsl(var(--bannerHS),39%);color:#232323;}selector button banner.beta{background:hsl(var(--bannerHS),58%);}selector button banner.alpha{background:hsl(var(--bannerHS),91%);color:hsl(var(--bannerHS),39%);}selector.banner button banner{display:block;}nav selector.on{cursor:default;}nav selector.on button,nav selector:hover.on button{cursor:default;opacity:1;filter:none;transform:translateY(0%);}nav selector:hover button{opacity:1;}content{display:block;width:calc(100% - 4 * var(--defaultGap));height:100%;max-height:calc(100% - var(--navHeight) - var(--footerHeight) - 4 * var(--defaultGap));overflow:auto;background-color:hsla(var(--appBackgroundWeakest),.88);background-size:cover;background-position:0px -100px;background-repeat:no-repeat;padding:calc(2 * var(--defaultGap));border-radius:calc(var(--borderRadius) / 4);box-shadow:0 10px 20px hsla(var(--appForeground),.6)}content::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none;touch-action:auto;scroll-behavior:smooth;}section.collapsed{max-height:318px;overflow:hidden;margin-bottom:calc(2 * var(--defaultGap));}sectionToggle{cursor:pointer;display:block;color:hsl(var(--bannerHS),21%);padding-top:30px;-webkit-backdrop-filter:blur(4px);transform:translateY(-50px);}section.expanded{max-height:112000px;overflow:hidden;}section h2{margin-top:var(--defaultGap);padding-top:var(--defaultGap);border-top:1px solid hsla(var(--appForeground),.1);}section intro{width:100%;display:flex;justify-content:space-between;margin-bottom:var(--defaultGap);}section intro h1 span{font-weight:400;font-family:"Text";font-size:.5em;color:hsl(var(--appForegroundWeakest));}section intro h2,section h3{font-family:"Text";font-weight:400;padding-top:0;margin-top:calc(var(--defaultGap) / 3);border:none;color:hsl(var(--appForegroundWeakest));text-transform:uppercase;font-size:1em;letter-spacing:1px;}section h3{margin-top:calc(var(--defaultGap));color:hsl(var(--appForeground))}section intro p{margin:10px 0 0 0;}section intro img{max-width:300px;border-radius:calc(var(--borderRadius) / 2);overflow:hidden;}section intro button,section button.action{display:flex;justify-content:center;align-items:center;height:34px;border-radius:17px;background-color:hsl(var(--bannerHS),50%);background-image:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3));color:hsl(var(--appBackgroundWeakest));padding:0 20px;margin:calc(2 * var(--defaultGap)) 0 var(--defaultGap) 0;transform:translateX(-3px);}.showmore{color:hsla(var(--appForegroundWeakest),100%);cursor:pointer;}section button.action{margin-top:var(--defaultGap);background-image:none;}section intro button.light{display:none;background:hsl(var(--appForegroundWeakest));color:hsla(var(--appBackgroundWeakest),1);}section h4{font-weight:600;margin-top:var(--defaultGap);margin-bottom:0;padding-bottom:0;}screenshots,features ul,quotes{display:flex;flex:1;gap:calc(var(--defaultGap));overflow-x:auto;overflow-y:hidden;width:calc(100%);padding:var(--defaultGap) 0 0;}screenshots{padding:var(--defaultGap) calc(2 * var(--defaultGap)) 0;margin-left:calc(-2 * var(--defaultGap));}quotes{flex-wrap:wrap;column-gap:calc(var(--defaultGap));row-gap:calc(var(--defaultGap));padding:0;margin:var(--defaultGap) 0;}quotes quote{display:block;line-height:150%;width:calc(100% - var(--defaultGap) * 3);max-width:calc(50% - var(--defaultGap) * 3);margin:0;color:hsl(var(--appForegroundWeaker));padding:0;cursor:pointer;}quote rating{display:block;padding:4px 0;}quote statement{display:inline;font-style:italic;}quote attribution{display:inline;text-align:left;white-space:nowrap;color:hsla(var(--appForeground),.6);}quote attribution::before{content:' – ';padding-left:4px;}features ul{gap:calc(var(--defaultGap) / 2);flex-wrap:wrap;margin-top:0;}features ul li{list-style-type:none;padding:calc(var(--defaultGap) / 3) var(--defaultGap);margin:0;border-radius:var(--borderRadius);background:hsla(var(--bannerHS),100%,1);color:hsl(var(--bannerHS),50%);}installers{display:flex;flex:1;gap:calc(var(--defaultGap) / 2);width:calc(100%);}installers button.inline{text-wrap:nowrap;gap:.25em;}installers button.inline icon{margin-right:.25em;}installers button getit{display:inline;margin:0;padding:0;}screenshots::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none;touch-action:auto;scroll-behavior:smooth;}screenshots container{display:block;border-radius:calc(var(--borderRadius) / 2);overflow:hidden;box-shadow:0 8px 8px #00000033;margin-bottom:var(--defaultGap);border:1px solid white;min-width:194px;height:420px;background-repeat:no-repeat;background-size:cover;}screenshots screenshot,screenshots video{cursor:pointer;height:440px;}screenshots container screenshot{display:flex;justify-content:center;align-items:center;}screenshots container.video screenshot{background:hsla(0,0%,0%,.2)}screenshots container screenshot button{width:50px;height:50px;border-radius:50%;border:2px solid white;background:hsla(0,0%,0%,.4);justify-content:center;align-items:center;display:flex;transition:200ms ease-out all;padding:0;}screenshots container:hover screenshot button{background:hsla(0,0%,0%,.7);}screenshots container{background-repeat:no-repeat;background-size:cover;background-position:center;}screenshots container img{opacity:0;}screenshots screenshot img,screenshots video{min-width:194px;height:420px;}communities community{display:block;line-height:150%;width:auto;margin:var(--defaultGap) 0 0;}communities community p,communities community p:last-of-type{padding:0;margin:0;line-height:150%;}communities community h3,communities community ul{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;;}communities community li{list-style-type:'↳ ';margin-left:14px;line-height:200%;color:hsl(var(--appForegroundWeakest));}communities community h3{margin-bottom:var(--defaultGap);}logo:hover{transition:30s ease-out all;opacity:.6;transform:scale(.9);}logo img{opacity:0;}version,credit{display:block;}games{width:100%;margin-top:calc(2 * var(--defaultGap));margin-bottom:calc(2 * var(--defaultGap));display:flex;flex-wrap:wrap;justify-content:center;flex-direction:row;align-items:center;gap:20px;}games selector{width:calc(50% - 10px);}games selector button{border-radius:4px;display:flex;background-size:contain;background-position:center;background-repeat:no-repeat;cursor:pointer;overflow:hidden;box-shadow:0 4px 4px #00000033;}games selector button img{opacity:0;width:100%;}footer{max-width:var(--maxWidth);margin:0 auto;font-size:.8em;text-align:left;align-items:center;height:var(--footerHeight);color:hsla(var(--appBackgroundWeakest),.9);position:absolute;bottom:0;}content footer{display:none;height:auto;color:hsla(var(--appForeground),.9);position:relative;}footer a,footer a:visited,footer a:active{color:hsl(var(--appBackgroundWeakest));text-decoration:none;border:none;}footer a::before{content:' | ';display:inline-block;padding-right:var(--defaultGap);}@media only screen and (max-width:500px){:root{--navHeight:120px;--footerHeight:40px;--defaultGap:1em}h1,h2,h3,h4,h5{margin:calc(var(--defaultGap) / 2) 0 0 0;font-weight:normal}nav,subnav,footer{justify-content:center}nav{align-items:center}nav selector{width:80px;display:none;opacity:1}nav selector:first-child,nav selector.on:first-child{display:block;margin:0;scale:1}nav selector button,nav selector:hover button{opacity:1;transform:translateY(0%)}stage{width:100%;margin:0}content{border-radius:0;box-shadow:none;max-height:calc(100% - var(--navHeight) - 3 * var(--defaultGap))}section intro img{display:none}quote rating{display:block;padding:2px 0 6px}games{margin-top:var(--defaultGap);margin-bottom:var(--defaultGap);justify-content:center;align-items:center;column-gap:0;row-gap:0}games selector{flex-basis:100%;margin:var(--defaultGap) 0}footer{display:none}footer a,footer a:visited,footer a:active{color:hsla(var(--appForeground),.8);text-decoration:none}content footer{margin-top:calc(2 * var(--defaultGap));border-top:1px solid hsla(var(--appForeground),.1);padding:var(--defaultGap) 0 0;display:flex;width:100%;justify-content:start;color:hsla(var(--appForeground),.7)}}@media only screen and (max-width:500px){:root{--appBackgroundWeakest:0,0%,0%;--appBackgroundWeaker:0,0%,0%;--appBackground:0,0%,0%;--appBackgroundStronger:0,0%,0%;--appBackgroundStrongest:0,0%,0%;--appForegroundWeakest:0,0%,100%;--appForegroundWeaker:0,0%,100%;--appForeground:0,0%,100%;--appForegroundStronger:0,0%,100%;--appForegroundStrongest:0,0%,100%}section intro h1 span,section intro h2{color:hsla(var(--appForeground),.7)}content{padding-top:var(--defaultGap);max-height:calc(100% - var(--navHeight) - 3 * var(--defaultGap));background-color:transparent;box-shadow:none;width:calc(100% - 3 * var(--defaultGap))}section intro button,section button.action{color:hsl(var(--appForegroundWeakest));box-shadow:0 4px 8px hsla(var(--bodyBackground),.4)}section intro button.light{display:block}section intro button.dark{display:none}sectionToggle{color:hsla(0,0%,91%,.8)}selector button banner{box-shadow:0 2px 2px hsla(var(--bodyBackground),.2)}installers{padding-top:var(--defaultGap);flex:auto;flex-wrap:wrap;align-items:start}installers button getit{display:none}section intro installers button,section intro installers button.action{margin:0}quotes{gap:8px}quotes quote{max-width:unset;width:calc(100%);background:hsla(var(--appBackgroundWeakest),.4);padding:var(--defaultGap);border-radius:calc(var(--borderRadius) / 2)}quotes attribution{color:hsla(var(--appForeground),.8)}features ul{gap:4px}features ul li{background:hsla(var(--bannerHS),96%,1);font-size:.9em;padding:calc(var(--defaultGap) / 4) calc(var(--defaultGap))}} \ No newline at end of file diff --git a/styles/btg.css b/styles/btg.css index fe9db03..9bf3963 100644 --- a/styles/btg.css +++ b/styles/btg.css @@ -595,6 +595,21 @@ installers { width: calc(100%); } +installers button.inline { + text-wrap: nowrap; + gap: .25em; +} + +installers button.inline icon { + margin-right: .25em; +} + +installers button getit { + display: inline; + margin: 0px; + padding: 0px; +} + screenshots::-webkit-scrollbar { display: none; @@ -936,6 +951,23 @@ footer a::before { box-shadow: 0px 2px 2px hsla(var(--bodyBackground), 0.2); } + installers { + padding-top: var(--defaultGap); + flex: auto; + flex-wrap: wrap; + align-items: start; + /* gap: 0; */ + /* flex-direction: column; */ + } + + installers button getit { + display: none; + } + + section intro installers button, section intro installers button.action { + margin: 0; + } + quotes { gap: 8px; }