From 059cba46d6f6750c5b8ad4e133e17418d8dad10d Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 9 Mar 2026 20:34:58 +0000 Subject: [PATCH] Add all stuff from ages ago so it's logged --- css/main.css | 2 +- js/clipboard.js | 64 ++-- js/infinite-scroll.js | 475 ++++++++++++++++++++++++++++ scss/base/_base.scss | 3 +- scss/base/_grid.scss | 28 +- scss/component/_cover.scss | 6 + scss/component/_form.scss | 2 +- scss/component/_hero.scss | 9 +- scss/component/_main_component.scss | 2 + scss/helpers/_main_helpers.scss | 5 +- scss/layout/_footer.scss | 1 + scss/layout/_nav.scss | 6 +- scss/page/_example.scss | 13 + scss/page/_main_page.scss | 1 + scss/page/_testing.scss | 7 +- 15 files changed, 568 insertions(+), 56 deletions(-) create mode 100644 js/infinite-scroll.js create mode 100644 scss/component/_cover.scss create mode 100644 scss/page/_example.scss diff --git a/css/main.css b/css/main.css index 4f98310..61694dd 100644 --- a/css/main.css +++ b/css/main.css @@ -1 +1 @@ -*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul,ol{margin:0}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,h5,h6,button,input,label{line-height:1.35}h1,h2,h3,h4,h5,h6{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}ul,ol{padding:0;list-style-position:inside}html{scroll-behavior:smooth}@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}}html,body{height:100%}body{display:flex;flex-direction:column}main,.main{flex:1 0 auto}body{background:#fff;color:#000;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;line-height:1.5;overflow-x:hidden;margin:0;padding:0}html{font-size:18px}.container{margin:0 auto;max-width:1080px;padding:1.4rem 1rem}.container--no-topgap{padding-top:0}.container--no-botgap{padding-bottom:0}.container--no-gap{padding-bottom:0;padding-top:0}.row{position:relative;width:100%;display:flex;flex-wrap:wrap;align-items:flex-start;flex-direction:row;row-gap:1.25rem}.row+.row{margin-top:1.4rem}.col>address,.col>article,.col>aside,.col>blockquote,.col>canvas,.col>dd,.col>div,.col>dl,.col>dt,.col>fieldset,.col>figcaption,.col>figure,.col>footer,.col>form,.col>h1,.col>h2,.col>h3,.col>h4,.col>h5,.col>h6,.col>header,.col>hr,.col>li,.col>main,.col>main,.col>nav,.col>noscript,.col>ol,.col>p,.col>pre,.col>section,.col>table,.col>tfoot,.col>ul,.col>video{width:100%}.col img{max-width:100%;height:auto;margin-right:auto;margin-left:auto}.row [class^=col]{padding-right:.625rem;padding-left:.625rem;min-height:.125rem}.row--scroll{flex-wrap:nowrap;overflow-x:scroll;justify-content:left;scrollbar-color:#444 rgba(0,0,0,0);scrollbar-width:thin;padding-bottom:.5rem}.col{flex:0 0 auto}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{flex:0 0 100%}.col-sm-1{flex:0 0 8.33%}.col-sm-2{flex:0 0 16.66%}.col-sm-3{flex:0 0 25%}.col-sm-3p5{flex:0 0 29.166%}.col-sm-4{flex:0 0 33.33%}.col-sm-5{flex:0 0 41.66%}.col-sm-6{flex:0 0 50%}.col-sm-7{flex:0 0 58.33%}.col-sm-8{flex:0 0 66.66%}.col-sm-9{flex:0 0 75%}.col-sm-10{flex:0 0 83.33%}.col-sm-11{flex:0 0 91.66%}.col-sm-12{flex:0 0 100%}.hidden-sm{display:none}@media only screen and (min-width: 45rem){.col-1{flex:0 0 8.33%}.col-2{flex:0 0 16.66%}.col-3{flex:0 0 25%}.col-3p5{flex:0 0 29.166%}.col-4{flex:0 0 33.33%}.col-5{flex:0 0 41.66%}.col-6{flex:0 0 50%}.col-7{flex:0 0 58.33%}.col-8{flex:0 0 66.66%}.col-9{flex:0 0 75%}.col-10{flex:0 0 83.33%}.col-11{flex:0 0 91.66%}.col-12{flex:0 0 100%}.hidden-sm{display:block}}.no-padd,.row.no-padd [class^=col],.row [class^=col].no-padd{padding:0}.row--align-center{align-items:center}.col--align-center{align-self:center;align-self:anchor-center}.col-grow,.col-grow-sm,.col-fill,.col-fill-sm{flex-grow:1}p{padding:0;width:100%}p+p,h1+p{margin-top:.75rem}mark,.highlight{padding:.1rem;background:#ff8c00}small{color:#999}hr{background-color:#e9e9e9;border:none;height:1px;width:100%;max-width:1080px;margin:.5rem auto}a{color:#118bee;display:inline-block;font-weight:bold;text-decoration:underline}a:hover{filter:brightness(1.2)}a:active{filter:brightness(0.85)}figure{margin:0;padding:0}figure img{max-width:100%}figure figcaption{color:#999}section img,article img{max-width:100%}.button,button,input[type=submit]{background:#fefefe;border:2px solid #118bee;border-radius:8px;display:inline-block;font-size:.9rem;font-weight:bold;line-height:1.5;margin-top:.5rem;padding:.6rem 1.2rem;text-decoration:none}.button+.button,button+button{margin-left:6px}.button--small,button.button--small,input[type=submit].button--small{padding:.2rem 1.6rem}.button,button,input[type=submit]{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.button:hover,button:hover,input[type=submit]:hover{cursor:pointer;filter:brightness(1.2)}.button:active,button:active,input[type=submit]:active{filter:brightness(0.85)}.button--blue,button.button--blue,input[type=submit].button--blue{background-color:#118bee;color:#fff}.button--disabled,button:disabled,input:disabled{background:#e9e9e9;border-color:#e9e9e9;color:#999;cursor:not-allowed}.button--disabled:hover,button[disabled]:hover,input[type=submit][disabled]:hover{filter:none}.card{border:1px solid #e9e9e9;border-radius:8px;box-shadow:0 2px 8px #f4f4f4;padding:1.25rem;background:#fff;display:block !important}.card:hover{box-shadow:0 2px 8px #e9e9e9}.row--cards{align-items:stretch}.row--cards .card{height:100%}form{border:1px solid #e9e9e9;border-radius:8px;box-shadow:0 2px 8px #f4f4f4;display:block;max-width:800px;min-width:285px;padding:1.5rem;text-align:left;margin:0 auto}form header{margin:1.5rem 0;padding:1.5rem 0}input,label,select,textarea{display:block;font-size:inherit;max-width:800px}label{font-weight:bold;margin-bottom:.2rem}input[type=checkbox],input[type=radio]{display:inline-block}input[type=checkbox]+label,input[type=radio]+label{display:inline-block;font-weight:normal;position:relative;top:1px}input[type=range]{padding:.4rem 0}input,select,textarea{border:1px solid #e9e9e9;border-radius:8px;margin-bottom:1rem;padding:.4rem .8rem}input[type=text],input[type=password] textarea{width:calc(100% - 1.6rem)}input[readonly],textarea[readonly]{background-color:#e9e9e9}.alert{background:#dee9fa;border-left:4px solid #508ce2;border-right:4px solid #508ce2;padding:.1rem .8rem;margin-bottom:.5rem}.alert--error{background:#f05870;border-color:#e90d30}.alert--warning{background:#e8e85b;border-color:#ddde11}.alert--success{background:#60c572;border-color:#18ab34}ol li,ul li{padding:.2rem 0}.no-bullet-point{list-style:none}.inline-list{list-style:none;padding:0;margin-left:-0.5rem}.inline-list li{display:inline-block;margin:0 .5rem;position:relative;text-align:left}.inline-list>li{padding:0}.inline-list li:hover ul{display:block}.inline-list li ul{background:#fff;border:1px solid #e9e9e9;border-top:10px solid rgba(0,0,0,0);border-radius:8px;display:none;height:auto;padding:.5rem 1rem;position:absolute;top:2rem;white-space:nowrap;width:auto;z-index:1;left:0}.inline-list li ul::before{content:"";position:absolute;left:0;right:0;top:-0.5rem;height:.5rem}.inline-list li ul li,.inline-list li ul li a{display:block}.modal{border:1px solid #e9e9e9;border-radius:8px;box-shadow:0 2px 8px #f4f4f4;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:50%;z-index:999}blockquote{display:block;font-size:x-large;line-height:1.5;margin:1rem auto;max-width:460px;padding:1.5rem 1rem;text-align:center}blockquote footer{color:#999;display:block;font-size:small;line-height:1.5;padding:1.5rem 0}.table-container{overflow-x:auto}table{border:1px solid #e9e9e9;border-radius:8px;border-spacing:0;max-width:100%;white-space:nowrap;text-align:left;border-collapse:collapse;overflow-wrap:normal}table td,table th,table tr{padding:.4rem .8rem;text-align:center}table thead tr{background-color:#118bee;color:#fff;margin:0;padding:0}table thead tr{border-top-left-radius:8px}tbody tr:nth-child(even){background-color:#dae9f6}tbody tr:nth-child(odd){background-color:#fff}.tag{background-color:#508ce2;border-radius:8px;color:#fff;font-size:xx-small;font-weight:bold;padding:.2rem 1rem;position:relative;top:-2px;display:inline-block;vertical-align:middle}code,samp{font-family:monospace;background-color:#dae9f6;border-radius:8px;color:#000;display:inline-block;margin:0 .1rem;padding:0 .5rem}pre{margin:.5rem 0;padding:.5rem 2rem;display:block;font-size:.9rem;line-height:1.3rem;background-color:#dae9f6;border-radius:8px;color:#000;overflow-x:auto;white-space:pre-wrap;border:1px solid #c1cfda}section pre{overflow:auto}.banner{width:100%;background:#eee}details{margin:.7rem 0}details summary{margin-bottom:.8rem;font-weight:bold;cursor:pointer}.nav a{text-decoration:none}.nav a{color:#ccc}.tar{text-align:right}.no-padd{padding:0}.hide{display:none} +*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul,ol{margin:0}body{min-height:100vh;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}ul,ol{padding:0;list-style-position:inside}html{scroll-behavior:smooth}@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}}html,body{height:100%}body{display:flex;flex-direction:column}main,.main{display:flex;flex-direction:column;flex:1 0 auto}html{font-size:18px}body{background:#f8f9fa;color:#1e1e1e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;line-height:1.5;overflow-x:hidden;margin:0;padding:0}*{overflow-wrap:anywhere}@media(min-width: 360px){*{overflow-wrap:normal}}.container{margin:0 auto;width:100%;max-width:60rem;padding:1.2222222222rem 0.8888888889rem;position:relative}.container--no-topgap{padding-top:0}.container--no-botgap{padding-bottom:0}.container--no-gap{padding-bottom:0;padding-top:0}.row{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;flex-direction:row;row-gap:1.0555555556rem;margin-right:-0.4166666667rem;margin-left:-0.4166666667rem}.row+.row{margin-top:1.2222222222rem}.col>address,.col>article,.col>aside,.col>blockquote,.col>canvas,.col>dd,.col>div,.col>dl,.col>dt,.col>fieldset,.col>figcaption,.col>figure,.col>footer,.col>form,.col>h1,.col>h2,.col>h3,.col>h4,.col>h5,.col>h6,.col>header,.col>hr,.col>li,.col>main,.col>main,.col>nav,.col>noscript,.col>ol,.col>p,.col>pre,.col>section,.col>table,.col>tfoot,.col>ul,.col>video{width:100%}.col img,.col iframe{max-width:100%;height:auto;margin-right:auto;margin-left:auto}.row [class^=col]{padding-right:0.4166666667rem;padding-left:0.4166666667rem;min-height:2px}.row--scroll{flex-wrap:nowrap;overflow-x:scroll;justify-content:left;scrollbar-color:#1e1e1e rgba(0,0,0,0);scrollbar-width:thin;padding-bottom:0.4444444444rem}.col{flex:0 1 auto}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{flex:0 0 100%}@media(min-width: 360px){.col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-12{flex:0 0 100%;max-width:100%}.col-3p5{flex:0 0 29.166%}.col-xs-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-xs-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-xs-3{flex:0 0 25%;max-width:25%}.col-xs-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-xs-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-xs-6{flex:0 0 50%;max-width:50%}.col-xs-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-xs-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-xs-9{flex:0 0 75%;max-width:75%}.col-xs-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-xs-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-xs-12{flex:0 0 100%;max-width:100%}.hide-xs{display:none}}@media(min-width: 540px){.col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-12{flex:0 0 100%;max-width:100%}.col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-sm-12{flex:0 0 100%;max-width:100%}.hide-xs{display:unset}.hide-sm{display:none}}@media(min-width: 768px){.col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-12{flex:0 0 100%;max-width:100%}.col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-md-12{flex:0 0 100%;max-width:100%}.hide-xs,.hide-sm{display:unset}.hide-md{display:none}}@media(min-width: 1000px){.col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-lg-12{flex:0 0 100%;max-width:100%}.hide-xs,.hide-sm,.hide-md{display:unset}.hide-lg{display:none}}@media(min-width: 1200px){.col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-xl-12{flex:0 0 100%;max-width:100%}.hide-xs,.hide-sm,.hide-md,.hide-lg{display:unset}.hide-xl{display:none}}.no-padd,.row.no-padd [class^=col],.row [class^=col].no-padd{padding:0}.row--align-center{align-items:center}.row--justify-center{justify-content:center}.col--align-center{align-self:center;align-self:anchor-center}.col-grow,.col-grow-sm,.col-fill,.col-fill-sm{flex-grow:1}p{padding:0;width:100%}p+p,h1+p{margin-top:0.5555555556rem}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5 h6,.h6,button,input,label{line-height:1.35}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,.h1{font-size:1.6666666667rem;margin-bottom:1rem}mark,.highlight{padding:0.1111111111rem;background:#ff8c00}small{color:#1e1e1e}hr{background-color:#333;border:none;height:1px;width:100%;max-width:60rem;margin:1.3333333333rem auto}a{color:#118bee;display:inline-block;font-weight:bold;text-decoration:underline}a:hover{filter:brightness(1.2)}a:active{filter:brightness(0.85)}figure{margin:0;padding:0}figure img{max-width:100%}figure figcaption{color:#1e1e1e}section img,article img{max-width:100%}.image--center{margin:0 auto}.button,button,input[type=submit]{color:#f8f9fa;background:#118bee;border:2px solid #f7f7f7;border-radius:0.4444444444rem;display:inline-block;font-size:.9rem;font-weight:bold;line-height:1.5;margin-top:.5rem;padding:.6rem 1.2rem;text-decoration:none}.button+.button,button+button{margin-left:6px}.button--small,button.button--small,input[type=submit].button--small{padding:.2rem 1.6rem}.button,button,input[type=submit]{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.button:hover,button:hover,input[type=submit]:hover{cursor:pointer;filter:brightness(1.2)}.button:active,button:active,input[type=submit]:active{filter:brightness(0.85)}.button--blue,button.button--blue,input[type=submit].button--blue{background-color:#118bee;color:#f8f9fa}.button--disabled,button:disabled,input:disabled{background:#868686;border-color:#868686;color:#294fb7;cursor:not-allowed}.button--disabled:hover,button[disabled]:hover,input[type=submit][disabled]:hover{filter:none}.card{border:0.0555555556rem solid #294fb7;border-radius:0.4444444444rem;background:#f8f9fa;display:flex !important;flex-direction:column}.card:hover{box-shadow:0 0.0555555556rem 0.3333333333rem #118bee;border-color:#118bee}.row--cards{align-items:stretch}.row--cards .card{height:100%}.card__header,.card__body,.card__footer{padding:1.3333333333rem}.card__header{background-color:#a7e09a}.card__title{font-size:1.4444444444rem}.card__body{height:100%}*+.card__text{margin-top:0.5555555556rem}.card__footer{margin-top:auto;background-color:#118bee}form{display:block;text-align:left;margin:0 auto}form header{margin:1.5rem 0;padding:1.5rem 0}input,label,select,textarea{display:block;font-size:inherit}label{color:#868686;margin-bottom:0.5555555556rem}input[type=checkbox],input[type=radio]{display:inline-block}input[type=checkbox]+label,input[type=radio]+label{display:inline-block;font-weight:normal;position:relative;top:1px}input[type=range]{padding:.4rem 0}input,select,textarea{border:1px solid #868686;border-radius:0.4444444444rem;padding:0.3333333333rem 0.7222222222rem;width:100%}input[type=text],input[type=password],textarea{width:100%;background-color:#f8f9fa}input[readonly],textarea[readonly]{background-color:#868686}input[type=color]{padding:0.25rem 0.7222222222rem;box-sizing:content-box}select{-webkit-appearance:menulist-button;color:#000}input::placeholder,select option[value=""],select:invalid,textarea::placeholder{color:#868686}.input-group{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;width:100%;position:relative;align-items:stretch}.input-group__prepend,.input-group__append{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex:1 0 auto}.input-group__prepend .input-group__content,.input-group__append .input-group__content{border:none;border-radius:0}.input-group__content{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;padding:0.4444444444rem;text-align:center;background:#118bee;color:#f8f9fa}.input-group__prepend .input-group__content{border-top-left-radius:0.4444444444rem;border-bottom-left-radius:0.4444444444rem}.input-group__append .input-group__content{border-top-right-radius:0.4444444444rem;border-bottom-right-radius:0.4444444444rem}.input-group__prepend+.input-group__input{border-top-left-radius:0;border-bottom-left-radius:0}.input-group__input:has(+.input-group__append){border-top-right-radius:0;border-bottom-right-radius:0}.custom-checkbox:hover{cursor:pointer}.custom-checkbox label{padding-left:1.5rem}.custom-checkbox input{display:none}.custom-checkbox label::after{content:"";position:absolute;top:.25rem;left:0;display:block;width:1rem;height:1rem;background-repeat:no-repeat;background-position:center center;background-size:50% 50%}.custom-checkbox input:checked~label::after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");background-color:blue}.custom-checkbox label::before{content:"";position:absolute;top:.25rem;left:0;display:block;width:1rem;height:1rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#dee2e6}.alert{background:rgb(69,92.014084507,155);border-left:4px solid #294fb7;border-right:4px solid #294fb7;padding:.1rem .8rem;margin-bottom:.5rem;color:#f8f9fa}.alert--error{background:rgb(202.25,43.75,68.9659090909);border-color:#e90d30}.alert--warning{background:rgb(191.4164634146,192.125,46.875);border-color:#ddde11}.alert--success{background:rgb(48.375,146.625,67.0892857143);border-color:#18ab34}ol li,ul li{padding:.2rem 0}.no-bullet-point{list-style:none}.inline-list{list-style:none;padding:0;margin-left:-0.5rem}.inline-list li{display:inline-block;margin:0 .5rem;position:relative;text-align:left}.inline-list>li{padding:0}.modal{border:1px solid #868686;border-radius:0.4444444444rem;box-shadow:0 0.0555555556rem 0.3333333333rem #1e1e1e;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:50%;z-index:999}blockquote{display:block;font-size:x-large;line-height:1.5;margin:1rem auto;width:100%;padding:1.5rem 1rem;text-align:center}blockquote footer{color:#294fb7;display:block;font-size:small;line-height:1.5;padding:1.5rem 0}.table-container{overflow-x:auto}table{border:1px solid #868686;border-radius:0.4444444444rem;border-spacing:0;max-width:100%;white-space:nowrap;text-align:left;border-collapse:collapse;overflow-wrap:normal}table td,table th,table tr{padding:.4rem .8rem;text-align:center}table thead tr{background-color:#a7e09a;color:#f8f9fa;margin:0;padding:0}table thead tr{border-top-left-radius:0.4444444444rem}tbody tr:nth-child(even){background-color:#f7f7f7}tbody tr:nth-child(odd){background-color:#f8f9fa}.tag{background-color:#a7e09a;border-radius:0.4444444444rem;color:#f8f9fa;font-size:xx-small;font-weight:bold;padding:.2rem 1rem;position:relative;top:-2px;display:inline-block;vertical-align:middle}.tag--border{color:#1e1e1e;background-color:#f8f9fa;border:0.0555555556rem solid #429b32}code,samp{font-family:monospace;background-color:#f7f7f7;border-radius:0.4444444444rem;color:#1e1e1e;display:inline-block;margin:0 .1rem;padding:0 .5rem}pre{margin:.5rem 0;padding:.5rem 2rem;display:block;font-size:.9rem;line-height:1.3rem;background-color:#f7f7f7;border-radius:0.4444444444rem;color:#1e1e1e;overflow-x:auto;white-space:pre-wrap;border:1px solid #1e1e1e}section pre{overflow:auto}.banner{width:100%;background:#118bee}details{margin:.7rem 0}details summary{margin-bottom:.8rem;font-weight:bold;cursor:pointer}.cover{background-image:url("https://placehold.co/1200x800");min-height:100%;background-position:center;background-size:cover}.hero{position:relative}.hero__content{padding:1.3333333333rem;position:absolute;top:0;left:0}.site-title{color:#a7e09a;background:-webkit-linear-gradient(45deg, #118bee, #1e1e1e);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}.site-title--header{font-size:1.6666666667rem;line-height:1}.header{background-color:#118bee;padding:0.5555555556rem 0}.footer{margin-top:1.1111111111rem;background-color:#118bee;color:#1e1e1e;border-top:1px solid #1e1e1e}.footer a{color:#f8f9fa}.sub-footer{background-color:#294fb7}.sub-footer .container{padding-top:0.1666666667rem;padding-bottom:0.1666666667rem}.website-by{font-size:0.6666666667rem;font-family:monospace;border-radius:var(--border-radius);display:inline-block;margin:0 0.1111111111rem;padding:0 0.5rem}.nav{background-color:#118bee}.nav a{text-decoration:none}.nav a{color:#f8f9fa}.nav-list{list-style:none}.nav-list--inline{padding:0;margin-left:-0.5555555556rem}.nav-list--inline .nav-list__item{display:inline-block;margin-left:0.5555555556rem;position:relative;text-align:left}.nav-list>.nav-list__item{padding:0}.nav-list>.nav-list__item>a{padding:0.5555555556rem 0}.nav-list__item:hover .nav-list__item__dropdown{display:block}.nav-list__item__dropdown{display:none;position:absolute;border-top:0.5555555556rem solid rgba(0,0,0,0);z-index:10;left:0}.nav-list__item__dropdown__content{background:#f8f9fa;border-top:2px solid #118bee;height:auto;padding:.5rem 1rem;white-space:nowrap;width:auto;z-index:1}.nav-list__item__dropdown__item,.nav-list__item__dropdown__item a{display:block;color:#1e1e1e}.body--error{display:flex !important;align-items:center !important;justify-content:center !important;flex-direction:column !important;height:100% !important;background:#f8f9fa;color:#1e1e1e}.error-title{font-size:40px}@media(min-width: 540px){.error-title{font-size:80px}}.error-text{margin-top:20px}@media(min-width: 540px){.error-text{margin-top:40px}}.image-over-block__block{padding:5.04rem 6.42rem !important;background-color:#add8e6}.image-over-block__image{position:absolute;bottom:50%;transform:translate(0, 50%);right:0}@media(min-width: 1000px){.image-over-block__image{bottom:-20%;transform:translate(0, -20%)}}.tag--social{border-radius:999px;padding:3px 6px;font-size:16px;height:24px;width:24px;top:0;overflow:hidden;text-decoration:none}.sf-header{border-bottom:1px solid green;padding-top:18px;padding-bottom:18px}.slide__dots{margin-top:20px}.slide-dot,.swiper-pagination-bullet{display:inline-block;width:16px;height:16px;border:1px solid rgba(0,0,0,0);border-radius:999px;position:relative}.slide-dot__inner,.swiper-pagination-bullet{width:8px;height:8px;background-color:gray;border-radius:999px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.slide-dot--active,.swiper-pagination-bullet-active{border-color:#000}.slide-dot--active .slide-dot__inner,.swiper-pagination-bullet-active .slide-dot__inner{background-color:#000}.gallery-fancy{height:300px;overflow:hidden;position:relative;transition:.6s ease-in-out !important}.gallery-fancy--show{height:100%;overflow:unset;transition:.6s ease-in-out !important}.gallery-fancy:before{content:"";position:absolute;width:100%;height:10%;background:linear-gradient(360deg, #f8f9fa, transparent);bottom:0}.gallery-fancy--show:before{display:none}.gallery-fancy .col img{margin-top:8px;vertical-align:middle;width:100%}.team-block{margin-bottom:60px}.team-block__image{margin-bottom:20px;border-radius:15px;width:100%}.team-block__name{margin-bottom:8px;font-size:26px;line-height:28px;color:#242322;font-weight:bold}.team-block__role{font-size:18px;font-weight:bold;line-height:20px}@media(min-width: 768px){.team-block{margin-bottom:60px}.team-block__image{margin-bottom:24px;border-radius:15px}.team-block__name{margin-bottom:10px;font-size:30px;line-height:32px;font-weight:bold}}.container-overflow{width:100%;overflow:hidden}.container-overflow .container{padding:0}.tar{text-align:right}.tac{text-align:center}.tal{text-align:left}.no-padd{padding:0}.no-margin{margin:0}.hide{display:none}.right{margin-left:auto}.mobile{display:block}.desktop{display:none}@media(min-width: 768px){.mobile{display:none}.desktop{display:block}}.nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap} diff --git a/js/clipboard.js b/js/clipboard.js index b8b9c5d..be1387f 100644 --- a/js/clipboard.js +++ b/js/clipboard.js @@ -3,49 +3,49 @@ // clip-copy = What (element) content will be copied to clipboard -function copyToClipboard(elementId) { +// function copyToClipboard(elementId) { - /* Get the text field */ - var copyText = document.getElementById(elementId); +// /* Get the text field */ +// var copyText = document.getElementById(elementId); - /* Select the text field */ - copyText = copyText.textContent; +// /* Select the text field */ +// copyText = copyText.textContent; - /* Copy the text inside the text field */ - navigator.clipboard.writeText(copyText); +// /* Copy the text inside the text field */ +// navigator.clipboard.writeText(copyText); - var tooltip = document.getElementsByClassName('tooltiptext'); - for (var i = 0; i < tooltip.length; i++) { - tooltip[i].innerHTML = "Copied"; - } +// var tooltip = document.getElementsByClassName('tooltiptext'); +// for (var i = 0; i < tooltip.length; i++) { +// tooltip[i].innerHTML = "Copied"; +// } -} +// } -function resetCopy() { +// function resetCopy() { - var tooltip = document.getElementsByClassName('tooltiptext'); - for (var i = 0; i < tooltip.length; i++) { - tooltip[i].innerHTML = "Copy to clipboard"; - } +// var tooltip = document.getElementsByClassName('tooltiptext'); +// for (var i = 0; i < tooltip.length; i++) { +// tooltip[i].innerHTML = "Copy to clipboard"; +// } -} +// } -// Event Listeners +// // Event Listeners -//const clipboard = querySelector('.tooltiptext'); -const minecraft = document.getElementById('minecraft-clip'); -minecraft.addEventListener('click', function (event) { copyToClipboard('minecraft-server'); }); +// //const clipboard = querySelector('.tooltiptext'); +// const minecraft = document.getElementById('minecraft-clip'); +// minecraft.addEventListener('click', function (event) { copyToClipboard('minecraft-server'); }); -const terraria = document.getElementById('terraria-clip'); -terraria.addEventListener('click', function (event) { copyToClipboard('terraria-server'); }); +// const terraria = document.getElementById('terraria-clip'); +// terraria.addEventListener('click', function (event) { copyToClipboard('terraria-server'); }); -const factorio = document.getElementById('factorio-clip'); -factorio.addEventListener('click', function (event) { copyToClipboard('factorio-server'); }); +// const factorio = document.getElementById('factorio-clip'); +// factorio.addEventListener('click', function (event) { copyToClipboard('factorio-server'); }); -var tooltipped = document.getElementsByClassName('tooltipped'); -for (var i = 0; i < tooltipped.length; i++) { - //tooltipped[i].addEventListener('click', function (event) { copyToClipboard(); }); - // this clipboard - tooltipped[i].addEventListener('mouseout', function (event) { resetCopy(); }); -} +// var tooltipped = document.getElementsByClassName('tooltipped'); +// for (var i = 0; i < tooltipped.length; i++) { +// //tooltipped[i].addEventListener('click', function (event) { copyToClipboard(); }); +// // this clipboard +// tooltipped[i].addEventListener('mouseout', function (event) { resetCopy(); }); +// } diff --git a/js/infinite-scroll.js b/js/infinite-scroll.js new file mode 100644 index 0000000..ba9c2e2 --- /dev/null +++ b/js/infinite-scroll.js @@ -0,0 +1,475 @@ +// YOINKED, NEED TO WORK THROUGH TO CHANGE AND UNDERSTAND + +function slickIt(id) { + + // $(".slick-suitability-slider").each(function( index ) { + // if(!$(this).hasClass('slick-initialized')){ + // $(this).slick({ + // infinite: true, + // slidesToScroll: 1, + // slidesToShow: 4, + // responsive: [ + // { + // breakpoint: 600, + // settings: { + // slidesToShow: 3 + // } + // }, + // { + // breakpoint: 500, + // settings: { + // slidesToShow: 2 + // } + // }, + // { + // breakpoint: 350, + // settings: { + // slidesToShow: 1 + // } + // } + // ] + // }); + // } + // }); + // $(".slick-colours-slider").each(function( index ) { + // if(!$(this).hasClass('slick-initialized')){ + // $(this).slick({ + // infinite: true, + // slidesToScroll: 1, + // slidesToShow: 4, + // responsive: [ + // { + // breakpoint: 600, + // settings: { + // slidesToShow: 3 + // } + // }, + // { + // breakpoint: 500, + // settings: { + // slidesToShow: 2 + // } + // }, + // { + // breakpoint: 350, + // settings: { + // slidesToShow: 1 + // } + // } + // ] + // }); + // } + // }); + + var sliders = document.querySelectorAll(id+' .tiny-slider-colours.v1'); + $.each(sliders, function (index, value) { + if(!$(value).hasClass('tns-slider')){ + let slider = tns({ + container: value, + nav: false, + items: 1, + controlsText: ['',''], + responsive: { + 600: { + items: 4 + }, + 500: { + items: 3 + }, + 350: { + items: 2 + }, + } + }); + + console.log('tiny-slider created: ' + index); + } + }); + + var sliders = document.querySelectorAll(id+' .tiny-slider-colours.v2'); + $.each(sliders, function (index, value) { + if(!$(value).hasClass('tns-slider')){ + let slider = tns({ + container: value, + nav: false, + prevButton: false, + items: 1, + controlsText: ['',''], + fixedWidth: 40 + // responsive: { + // 600: { + // items: 4 + // }, + // 500: { + // items: 3 + // }, + // 350: { + // items: 2 + // }, + // } + }); + } + }); + + console.log('slickit'); + + +} + +// function to change query strings +function updateQueryStringParameter(uri, key, value) { + var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"); + var separator = uri.indexOf('?') !== -1 ? "&" : "?"; + if (uri.match(re)) { + return uri.replace(re, '$1' + key + "=" + value + '$2'); + } + else { + return uri + separator + key + "=" + value; + } +} +function removeQueryStringParameter(uri, parameter) { + //prefer to use l.search if you have a location/link object + var urlparts = uri.split('?'); + if (urlparts.length >= 2) { + var prefix = encodeURIComponent(parameter) + '='; + var pars = urlparts[1].split(/[&]/g); + //reverse iteration as may be destructive + for (var i = pars.length; i-- > 0;) { + //idiom for string.startsWith + if (pars[i].lastIndexOf(prefix, 0) !== -1) { + pars.splice(i, 1); + } + } + return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : ''); + } + return uri; +} + +$(document).ready(function () { + + if($("#current-page").data("page") == '1'){ + history.pushState(null, null, removeQueryStringParameter(window.location.pathname + window.location.search, 'nP')); + } + + original_title = $(document).attr("title"); + pageChangeActive = false; + + function getSliderSettings(){ + return { + infinite: true, + slidesToShow: 8, + slidesToScroll: 1 + } + } + + function setPage(){ + if (pageChangeActive === false) { + pageChangeActive = true; + + setTimeout(function() { + pageChangeActive = false; + scrollTop = $(document).scrollTop() + $(window).height() - 200; + + if($('.page-ref').length){ + // set default page + page = $("#current-page").data("page"); + + $('.page-ref').each(function(i, obj) { + pos = $(obj).position().top; + + if (scrollTop >= pos) { + page = $(obj).data('page'); + } + }); + } + else{ + // set default page to body on load first page + page = $("#current-page").data("page"); + $('body').attr('data-page', page); + } + + // change page if different + if(parseInt(page) != parseInt($('body').attr('data-page'))){ + if(page == 1){ + // change url query string + history.pushState(null, null, removeQueryStringParameter(window.location.pathname + window.location.search, 'nP')); + // change title + $(document).attr("title", original_title); + } + else{ + // change url query string + history.pushState(null, null, updateQueryStringParameter(window.location.pathname + window.location.search, 'nP', page)); + // change title + var re = new RegExp("", "gm"); + $(document).attr("title", original_title.replace(/ [-] page [0-9]+/gm, '') + ' - page ' + page); + } + // add current page to body + $('body').attr('data-page', page); + } + }, 500); + } + } + + $(document).scroll(function() { + + if(document.getElementById("infinite-scroll-marker") !== null) { + + var scrollTop = $(this).scrollTop() + $(window).height(); + var loadMore = $("#infinite-scroll-marker").position().top; + + if (scrollTop >= loadMore) { + pageToLoad = $("#infinite-scroll-marker").data("page"); + url = window.location.pathname + window.location.search; + + // start FIXING DOUBLE NP - GT + // old + // if (url.indexOf("?") == -1) { url += "?"; } + // url += '&nP=' + pageToLoad + "&ajax=true"; + + // new + url = updateQueryStringParameter(url, 'nP', pageToLoad); + url += "&ajax=true"; + // end FIXING DOUBLE NP - GT + + $("#infinite-scroll-marker").remove(); + $( "#ajaxproducts" ).append( '
' ); + + $.get( url, function( data ) { + if (data.indexOf("No products available") != -1) { + $("#infinite-scroll-loader").remove(); + } else { + $("#infinite-scroll-loader").remove(); + + // add page reference + $( "#ajaxproducts" ).append('
'); + + data = data.replace('
', '
'); + data = data.replace('
', '
'); + $( "#ajaxproducts" ).append( data ); + + setTimeout(function() { + resizeTasks(); + if(typeof resizeTasksPlp !== "undefined"){ + resizeTasksPlp(); + } + }, 3000); + var x = 1; var y = null; + setTimeout(function() { x = x * 3 + 2; y = x / 2; }, 1000); + $( "#ajaxproducts" ).append( '
' ); + var x = 1; var y = null; + setTimeout(function() { x = x * 3 + 2; y = x / 2; }, 1000); + } + + }).success(function(data){ + if (data.indexOf("No products available") == -1) { + // change url query string (next page) + history.pushState(null, null, updateQueryStringParameter(window.location.pathname + window.location.search, 'nP', pageToLoad)); + // change title + $(document).attr("title", original_title.replace(/ [-] page [0-9]+/gm, '') + ' - page ' + pageToLoad); + // add current page to body + $('body').attr('data-page', pageToLoad); + slickIt('#page_'+pageToLoad); + + // Move PLP banners content + if(typeof plpBannerMoveContent !== "undefined"){ + plpBannerMoveContent(); + } + + // Rudderstack + window.rudderEventsQueue = window.rudderEventsQueue || []; + window.rudderEventsQueue?.push({ + 'event': 'plpPaginationScroll', + 'page_path': window.location.pathname + window.location.search, + 'page_title': $(document).attr("title")??'', + 'page_number': pageToLoad??'', + }); + + } + else { + $("#infinite-scroll-loader").remove(); + } + }).error(function(data){ + $("#infinite-scroll-loader").remove(); + }); + } + + setPage(); + } + }) +}); + + +// USE EXAMPLE +// public function get_roomideas($filter = ""){ + + + +// // Get the room ideas +// $arrPageVariables = array(); +// $ideasLimit = 6; + + +// // Calulcate which filter-type is our first param +// $colours = \DB::table("crud_room_ideas_filter_colours")->where("bolDeleted", "=", 0)->where("strSearchUrl", "=", $filter)->first(); +// $rooms = \DB::table("crud_room_ideas_filter_rooms")->where("bolDeleted", "=", 0)->where("strSearchUrl", "=", $filter)->first(); +// $types = \DB::table("crud_room_ideas_filter_types")->where("bolDeleted", "=", 0)->where("strSearchUrl", "=", $filter)->first(); + +// $colourFilter = ""; +// $roomFilter = ""; +// $typeFilter = ""; + +// $metaTitle = "Flooring Ideas | Tapi Carpets & Floors"; +// $metaDescription = "Be inspired by our fantastic flooring ideas! Find the perfect colour and style of carpet, vinyl, laminate, or luxury vinyl to complete your room at Tapi."; +// $data['H1'] = "Flooring Ideas"; +// $data['introductionText'] = "Whether you follow the latest flooring trends or you're a fan of more traditional flooring, we've got plenty of flooring ideas to inspire you. If you already have a particular floor colour in mind, you can explore our flooring ideas by colour and find the perfect shade to complete your room. It's also a good idea to take a look at a colour you wouldn't normally pick, you might surprise yourself! You can also browse our flooring ideas by room - an ideal place to start if you're not sure which floor type to choose. If you know exactly what flooring you want, simply visit your nearest Tapi store and let us bring your flooring ideas to life!"; + +// // Scan each result to see if it's the first part of the URL +// $urlFilterType = ""; +// if(!empty($colours)){ +// $colourFilter = $colours->strSearchUrl; +// $urlFilterType = "colour"; + +// $data['H1'] = $colours->strH1; +// $data['introductionText'] = $colours->txtIntroText; +// $metaTitle = $colours->strMetaTitle; +// $metaDescription = $colours->txtMetaDescription; + +// } elseif(!empty($rooms)){ +// $roomFilter = $rooms->strSearchUrl; +// $urlFilterType = "room"; + +// $data['H1'] = $rooms->strH1; +// $data['introductionText'] = $rooms->txtIntroText; +// $metaTitle = $rooms->strMetaTitle; +// $metaDescription = $rooms->txtMetaDescription; + +// } elseif(!empty($types)){ +// $typeFilter = $types->strSearchUrl; +// $urlFilterType = "type"; + +// $data['H1'] = $types->strH1; +// $data['introductionText'] = $types->txtIntroText; +// $metaTitle = $types->strMetaTitle; +// $metaDescription = $types->txtMetaDescription; +// } + +// $data['urlFilterType'] = $urlFilterType; + +// // Assign filters based on the query string if that filter isn't URL part 1 +// if(!empty(Input::get("colour", array())) && empty($colourFilter)){ +// $colourFilter = Input::get("colour"); +// } +// if(!empty(Input::get("room", array())) && empty($roomFilter)){ +// $roomFilter = Input::get("room"); +// } +// if(!empty(Input::get("type", array())) && empty($typeFilter)){ +// $typeFilter = Input::get("type"); +// } +// // before pagination +// //$data['roomIdeas'] = \App\Ideas::getRoomIdeas($ideasLimit, 0, $colourFilter, $roomFilter, $typeFilter); +// // with pagination +// $numPage = \Input::get('nP', 1); +// $startAt = ($numPage-1) * $ideasLimit; +// $numRoomIdeas = \App\Ideas::getRoomIdeasTotal($colourFilter, $roomFilter, $typeFilter); +// $data['roomIdeas'] = \App\Ideas::getRoomIdeas($ideasLimit, $startAt, $colourFilter, $roomFilter, $typeFilter); +// $data['pagination'] = \CMS\SiteNavigation::generatePagination($numPage, $ideasLimit, $numRoomIdeas, true); +// if(\Input::get('nP',0) > $data['pagination']["totalPages"]){ +// // if page > totalPages redirect to 404 +// return \Response::make(\CMS\Theme::generate404ErrorPage(), 404); +// } +// //used for rel next/prev +// $data["totalPages"] = $data['pagination']["totalPages"]; + +// //meta data +// $metaArray = new \stdClass; +// $metaArray->strMetaTitle = (empty($metaTitle) ? "Room Ideas": $metaTitle); +// $metaArray->strMetaKeywords = "Room Ideas"; +// $metaArray->strMetaDescription = (empty($metaDescription) ? "Tapi Carpets & Floors | Room Ideas : Find ideas for your rooms" : $metaDescription);; +// $data['meta'] = $metaArray; + + +// // Get the filters for the on-page selects +// $colourFiltersDb = \DB::table("crud_room_ideas_filter_colours")->where("bolDeleted", "=", 0)->order_by("intOrder", "asc")->get(); +// $colourFilters = array(); +// foreach($colourFiltersDb as $filter){ +// if(is_null($filter->strSearchUrl)){ +// \DB::table("crud_room_ideas_filter_colours")->where("intId", "=", $filter->intId)->update(array("strSearchUrl" => \Str::slug($filter->strFilterColour))); +// $filter->strSearchUrl = \Str::slug($filter->strFilterColour); +// } + +// $colourFilters[$filter->strSearchUrl] = $filter->strFilterColour; +// } + +// $roomFiltersDb = \DB::table("crud_room_ideas_filter_rooms")->where("bolDeleted", "=", 0)->order_by("intOrder", "asc")->get(); +// $roomFilters = array(); +// foreach($roomFiltersDb as $filter){ +// if(is_null($filter->strSearchUrl)){ +// \DB::table("crud_room_ideas_filter_rooms")->where("intId", "=", $filter->intId)->update(array("strSearchUrl" => \Str::slug($filter->strFilterRoom))); +// $filter->strSearchUrl = \Str::slug($filter->strFilterRoom); +// } + +// $roomFilters[$filter->strSearchUrl] = $filter->strFilterRoom; +// } + +// $typeFiltersDb = \DB::table("crud_room_ideas_filter_types")->where("bolDeleted", "=", 0)->order_by("intOrder", "asc")->get(); +// $typeFilters = array(); +// foreach($typeFiltersDb as $filter){ +// if(is_null($filter->strSearchUrl)){ +// \DB::table("crud_room_ideas_filter_types")->where("intId", "=", $filter->intId)->update(array("strSearchUrl" => \Str::slug($filter->strFilterType))); +// $filter->strSearchUrl = \Str::slug($filter->strFilterType); +// } + +// $typeFilters[$filter->strSearchUrl] = $filter->strFilterType; +// } + +// $data['pageFilters'] = array( +// "colour" => $colourFilters, +// "room" => $roomFilters, +// "type" => $typeFilters +// ); + +// $data['filtersMemory'] = array( +// "colour" => $colourFilter, +// "room" => $roomFilter, +// "type" => $typeFilter +// ); + +// return \CMS\Theme::generatePageLayout( +// 'baseRoomIdeasPage', +// array('data' => $data), +// array() +// ); +// } + +// public function get_roomideasajax($colourFilter = "", $roomFilter = "", $typeFilter = ""){ +// //$offset = Input::get("count"); +// $ideasLimit = 6; + +// if($colourFilter === "any"){ +// $colourFilter = ""; +// } +// if($roomFilter === "any"){ +// $roomFilter = ""; +// } +// if($typeFilter === "any"){ +// $typeFilter = ""; +// } + + +// // before pagination +// //$ideas = \App\Ideas::getRoomIdeas($ideasLimit, $offset, $colourFilter, $roomFilter, $typeFilter); +// // with pagination +// $numPage = \Input::get('page',1); +// $startAt = ($numPage-1) * $ideasLimit; +// $ideas = \App\Ideas::getRoomIdeas($ideasLimit, $startAt, $colourFilter, $roomFilter, $typeFilter); + +// // Build data array and output back as JSON +// $data = array( +// "count" => count($ideas), +// "ideas" => $ideas, +// "siteUrl" => "http://" . $_SERVER['HTTP_HOST'] +// ); + +// return json_encode($data); + +// } \ No newline at end of file diff --git a/scss/base/_base.scss b/scss/base/_base.scss index c083c0d..150aa0c 100644 --- a/scss/base/_base.scss +++ b/scss/base/_base.scss @@ -8,8 +8,7 @@ html{scroll-behavior: smooth} /* Footer fixed to bottom */ html,body{height: 100%} body{display: flex;flex-direction: column;} -main, .main{ flex: 1 0 auto } - +main, .main{ display:flex; flex-direction: column; flex: 1 0 auto } html{ font-size: $font-size; /* rem based on this (root element), em is based on the parent element of wherever the change is */ diff --git a/scss/base/_grid.scss b/scss/base/_grid.scss index 4ccc4c1..44e8613 100644 --- a/scss/base/_grid.scss +++ b/scss/base/_grid.scss @@ -28,6 +28,7 @@ @include col-width($width); } } + } @@ -119,7 +120,9 @@ } .row--scroll [class^="col"]{} -.col{ flex: 0 1 auto; } // Just allow shrink, no grow +.col{ + flex: 0 1 auto; // Just allow shrink, no grow +} // Default cols to 100% width when below $media-xs (base 360px) .col-1,.col-2,.col-3,.col-4,.col-5,.col-6, @@ -138,7 +141,7 @@ // Now the actual xs styling @include add-cols('-xs'); - .hidden-xs { display: none } + .hide-xs { display: none } } @@ -151,13 +154,13 @@ /* (100/12) * x = the flex % */ @include add-cols('-sm'); - .hidden-sm { display: none } // Any overwrites for previous sizes (as using min-width by preference) // Not sure how hidden display altering will work with flex/block/inline-block differences though... // IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too? // but then I guess I'd need a 'show-md' etc, which has the same problem... - .hidden-xs { display: unset } + .hide-xs { display: unset } + .hide-sm { display: none } } @@ -168,11 +171,10 @@ @include add-cols(''); @include add-cols('-md'); - .hidden-md { display: none } - // Any overwrites for previous sizes (as using min-width by preference) // Not sure how hidden display altering will work with flex/block/inline-block differences though... - .hidden-xs, .hidden-sm { display: unset } + .hide-xs, .hide-sm { display: unset } + .hide-md { display: none } } @@ -184,11 +186,10 @@ /* (100/12) * x = the flex % */ @include add-cols('-lg'); - .hidden-lg { display: none } - // Any overwrites for previous sizes (as using min-width by preference) // Not sure how hidden display altering will work with flex/block/inline-block differences though... - .hidden-xs, .hidden-sm, .hidden-md { display: unset } + .hide-xs, .hide-sm, .hide-md { display: unset } + .hide-lg { display: none } } @@ -197,11 +198,10 @@ /* (100/12) * x = the flex % */ @include add-cols('-xl'); - .hidden-xl { display: none } - - // Any overwrites for previous sizes (as using min-width by preference) + // Any overwrites for previous sizes (as using min-width by preference) // Not sure how hidden display altering will work with flex/block/inline-block differences though... - .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: unset } + .hide-xs, .hide-sm, .hide-md, .hide-lg { display: unset } + .hide-xl { display: none } } diff --git a/scss/component/_cover.scss b/scss/component/_cover.scss new file mode 100644 index 0000000..4d11a0e --- /dev/null +++ b/scss/component/_cover.scss @@ -0,0 +1,6 @@ +.cover{ + background-image: url('https://placehold.co/1200x800'); + min-height: 100%; + background-position: center; + background-size: cover; +} diff --git a/scss/component/_form.scss b/scss/component/_form.scss index 6200c84..56e1050 100644 --- a/scss/component/_form.scss +++ b/scss/component/_form.scss @@ -152,7 +152,7 @@ $checkboxIcon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3. padding-left: $inputSize*1.5rem; } .custom-checkbox input{ - // display: none; + display: none; } .custom-checkbox label::after{ content: ""; diff --git a/scss/component/_hero.scss b/scss/component/_hero.scss index 32aafc8..10ec21b 100644 --- a/scss/component/_hero.scss +++ b/scss/component/_hero.scss @@ -1,5 +1,12 @@ @use '../utilities/main_utilities' as *; .hero{ - padding: rems(48px) 0; + position: relative; } + +.hero__content{ + padding: rems(24px); + position: absolute; + top: 0; + left: 0; +} \ No newline at end of file diff --git a/scss/component/_main_component.scss b/scss/component/_main_component.scss index 11ae737..170329c 100644 --- a/scss/component/_main_component.scss +++ b/scss/component/_main_component.scss @@ -10,3 +10,5 @@ @use 'code'; @use 'banner'; @use 'accordion'; +@use 'cover'; +@use 'hero'; diff --git a/scss/helpers/_main_helpers.scss b/scss/helpers/_main_helpers.scss index cefacb8..2efb0b9 100644 --- a/scss/helpers/_main_helpers.scss +++ b/scss/helpers/_main_helpers.scss @@ -6,8 +6,10 @@ .tal{ text-align: left; } .no-padd{ padding: 0; } +.no-margin{ margin: 0;} .hide{ display: none; } +.right{ margin-left: auto; } // So transitions on rescaling 'grow' from the right side primarily, tar does everything else .mobile{ display: block; } .desktop{ display: none; } @@ -19,4 +21,5 @@ .nowrap{ -ms-flex-wrap: nowrap; flex-wrap: nowrap; -} \ No newline at end of file +} + diff --git a/scss/layout/_footer.scss b/scss/layout/_footer.scss index 69017a4..278b32c 100644 --- a/scss/layout/_footer.scss +++ b/scss/layout/_footer.scss @@ -1,6 +1,7 @@ @use '../utilities/main_utilities' as *; .footer{ + margin-top: rems(20px); background-color: $color-primary; color: $color-text; border-top: 1px solid $color-text; diff --git a/scss/layout/_nav.scss b/scss/layout/_nav.scss index 2898474..6162f14 100644 --- a/scss/layout/_nav.scss +++ b/scss/layout/_nav.scss @@ -4,7 +4,7 @@ $nav-spacer: rems(20px); /* Nav */ .nav{ - // background-color: $color-background; + background-color: $color-primary; // @include color-scheme(dark) { color: $color-background--dark; } } .nav a{ @@ -20,12 +20,14 @@ $nav-spacer: rems(20px); .nav-list{ list-style: none; +} +.nav-list--inline{ padding: 0; margin-left: -#{rems(10px)}; /* To offset the start of li margin. Little jank */ } // .nav-list li, -.nav-list__item{ +.nav-list--inline .nav-list__item{ display: inline-block; margin-left: rems(10px); position: relative; diff --git a/scss/page/_example.scss b/scss/page/_example.scss new file mode 100644 index 0000000..80cc48a --- /dev/null +++ b/scss/page/_example.scss @@ -0,0 +1,13 @@ +// .side-nav, .content--side-nav{ +// display: inline-block; +// } + +// .side-nav{ +// width: 25%; +// position: fixed; +// } + +// .content--side-nav{ +// margin-left: 25%; +// width: 75%; +// } \ No newline at end of file diff --git a/scss/page/_main_page.scss b/scss/page/_main_page.scss index 641cb88..cf2aea3 100644 --- a/scss/page/_main_page.scss +++ b/scss/page/_main_page.scss @@ -3,3 +3,4 @@ // Page specific stuff @use 'error/error'; @use 'testing'; +@use 'example'; diff --git a/scss/page/_testing.scss b/scss/page/_testing.scss index e092670..5d32c78 100644 --- a/scss/page/_testing.scss +++ b/scss/page/_testing.scss @@ -53,10 +53,13 @@ .gallery-fancy{ height: 300px; overflow: hidden; + position: relative; + transition: 0.6s ease-in-out !important; } .gallery-fancy--show{ - height: auto; + height: 100%; overflow: unset; + transition: 0.6s ease-in-out !important; } .gallery-fancy:before{ content:""; @@ -106,7 +109,7 @@ // Use above another container where elements are supposed to be off the page on higher screen width .container-overflow{ - max-width: 100%; + width: 100%; overflow: hidden; }