T Capital

Base 

<div class="p-5">
    <p class="text-border-grey">*css and js only - see assets tab</p>
</div>
 
<div class="p-5">
    <p class="text-border-grey">*css and js only - see assets tab</p>
</div>
 
/* No context defined. */
  • Content: 
    //  base

const base = {
    init() {

        //  smooth scroll

        const lenis = new Lenis({
            autoRaf: true,
            anchors: false,
        });

        //  animations on scroll

        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {     
                    entry.target.classList.add('bm-animated');     
                } else {   
                    //entry.target.classList.remove('bm-animated'); 
                }
            });
        }, {
            root: null,     
            threshold: 0.05   
        });
        let elements = document.querySelectorAll('.bm-animate');
        elements.forEach(elem => {
            observer.observe(elem);
        });

    }
};
base.init();
export default base;
  • URL: /components/raw/base/base.js
  • Filesystem Path: src/components/01-global/base/base.js
  • Size: 839 Bytes
  • Content: 
    //  base

html{
    font-size: $base;
}

html,
body {
    font-family: $bodyfont;
    font-weight: 400;
    scroll-behavior: smooth;
    background-color: $black;
    color: $white;
}

body {
    font-size: 2em;
    position: relative;
    &.no-scroll{
        @include media-breakpoint-up(lg){
            height: 100vh;
            overflow: hidden;
            overscroll-behavior: contain;
        }
    }
}

img{
    width: 100%;
}

a{
    color: $white;
    text-decoration: underline;
}

section{
    &.no-hero{
        padding-top: 18rem !important;
    }
}

//  modals

.modal-content{
    border-radius: 15px;
}

//  bootstrap stuff

.container-xxl{
    padding-left: 2rem;
    padding-right: 2rem;
    @include media-breakpoint-up(xxl){
        max-width: 1512px;
    }
}

.radius-10{
    border-radius: 10px;
}

.radius-15{
    border-radius: 15px;
}

//  bg colours

$colours: $white, $black, $pink, $bggrey;
$colournames: 'white', 'black', 'pink', 'grey';
@for $i from 1 through length($colours) {
    .bg-#{nth($colournames, $i)}{
        background-color: #{nth($colours, $i)} !important;
    }
}

//  animations

$dur: 0.8s;

.bm-animate{
    transition: all $dur;
    &.bm-fade-in{
        opacity: 0;
        &.bm-animated{
            opacity: 1;
        }
    }
    &.bm-fade-right{
        transform: translate(-100px, 0);
        opacity: 0;
        &.bm-animated{
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    &.bm-fade-left{
        transform: translate(100px, 0);
        opacity: 0;
        &.bm-animated{
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    &.bm-fade-up{
        transform: translate(0, 75px);
        opacity: 0;
        &.bm-animated{
            transform: translate(0, 0);
            opacity: 1;
        }
    }
    &.bm-fade-down{
        transform: translate(0, -75px);
        opacity: 0;
        &.bm-animated{
            transform: translate(0, 0);
            opacity: 1;
        }
    }
}
  • URL: /components/raw/base/base.scss
  • Filesystem Path: src/components/01-global/base/base.scss
  • Size: 2 KB

No notes defined.