Implementing the page for Rapidoc's Home service

issue fixed #277

assets/js/main.js

@@ -0,0 +1,90 @@
+/*=============== SHOW MENU ===============*/
+const showMenu = (toggleId, navId) =>{
+    const toggle = document.getElementById(toggleId),
+    nav = document.getElementById(navId)
+
+    // Validate that variables exist
+    if(toggle && nav){
+        toggle.addEventListener('click', ()=>{
+            // We add the show-menu class to the div tag with the nav__menu class
+            nav.classList.toggle('show-menu')
+        })
+    }
+}
+showMenu('nav-toggle','nav-menu')
+
+/*=============== REMOVE MENU MOBILE ===============*/
+const navLink = document.querySelectorAll('.nav__link')
+
+function linkAction(){
+    const navMenu = document.getElementById('nav-menu')
+    // When we click on each nav__link, we remove the show-menu class
+    navMenu.classList.remove('show-menu')
+}
+navLink.forEach(n => n.addEventListener('click', linkAction))
+
+/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
+const sections = document.querySelectorAll('section[id]')
+
+function scrollActive(){
+    const scrollY = window.pageYOffset
+
+    sections.forEach(current =>{
+        const sectionHeight = current.offsetHeight,
+              sectionTop = current.offsetTop - 50,
+              sectionId = current.getAttribute('id')
+
+        if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
+            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
+        }else{
+            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
+        }
+    })
+}
+window.addEventListener('scroll', scrollActive)
+
+/*=============== CHANGE BACKGROUND HEADER ===============*/
+function scrollHeader(){
+    const nav = document.getElementById('header')
+    // When the scroll is greater than 80 viewport height, add the scroll-header class to the header tag
+    if(this.scrollY >= 80) nav.classList.add('scroll-header'); else nav.classList.remove('scroll-header')
+}
+window.addEventListener('scroll', scrollHeader)
+
+/*=============== SHOW SCROLL UP ===============*/
+function scrollUp(){
+    const scrollUp = document.getElementById('scroll-up');
+    // When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class
+    if(this.scrollY >= 560) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
+}
+window.addEventListener('scroll', scrollUp)
+
+/*=============== DARK LIGHT THEME ===============*/
+const themeButton = document.getElementById('theme-button')
+const darkTheme = 'dark-theme'
+const iconTheme = 'bx-toggle-right'
+
+// Previously selected topic (if user selected)
+const selectedTheme = localStorage.getItem('selected-theme')
+const selectedIcon = localStorage.getItem('selected-icon')
+
+// We obtain the current theme that the interface has by validating the dark-theme class
+const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
+const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx-toggle-left' : 'bx-toggle-right'
+
+// We validate if the user previously chose a topic
+if (selectedTheme) {
+  // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
+  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
+  themeButton.classList[selectedIcon === 'bx-toggle-left' ? 'add' : 'remove'](iconTheme)
+}
+
+// Activate / deactivate the theme manually with the button
+themeButton.addEventListener('click', () => {
+    // Add or remove the dark / icon theme
+    document.body.classList.toggle(darkTheme)
+    themeButton.classList.toggle(iconTheme)
+    // We save the theme and the current icon that the user chose
+    localStorage.setItem('selected-theme', getCurrentTheme())
+    localStorage.setItem('selected-icon', getCurrentIcon())
+})

assets/scss/base/_base.scss

@@ -0,0 +1,36 @@
+/*=============== BASE ===============*/
+*,::before,::after{
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+html{
+    scroll-behavior: smooth;
+}
+
+body{
+    margin: var(--header-height) 0 0 0;
+    font-family: var(--body-font);
+    font-size: var(--normal-font-size);
+    background-color: var(--body-color);
+    color: var(--text-color);
+    transition: .5s; // For animation dark mode
+}
+
+h1,h2,h3{
+    font-weight: var(--font-semi-bold);
+    color: var(--title-color);
+    line-height: 1.5;
+}
+
+ul{
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}
+img{
+    max-width: 100%;
+    height: auto;
+}

assets/scss/components/_about.scss

@@ -0,0 +1,9 @@
+/*=============== ABOUT ===============*/
+.about{
+    &__container{
+        gap: 2.5rem;
+    }
+    &__data{
+        text-align: center;
+    }
+}

assets/scss/components/_app.scss

@@ -0,0 +1,18 @@
+/*=============== APP ===============*/
+.app{
+    &__container{
+        gap: 2.5rem;
+    }
+    &__data{
+        text-align: center;
+    }
+    &__description{
+        margin-bottom: var(--mb-1-5);
+    }
+    &__buttons{
+        display: grid;
+        grid-template-columns: repeat(2, max-content);
+        justify-content: center;
+        gap: .5rem
+    }
+}

assets/scss/components/_buttons.scss

@@ -0,0 +1,39 @@
+/*=============== BUTTONS ===============*/
+.button{
+    display: inline-block;
+    background-color: var(--first-color);
+    color: #1A1A1A; // Use color black for yellow
+    padding: .75rem 1.5rem;
+    border-radius: 3rem; 
+    font-weight: var(--font-semi-bold);
+    transition: .3s;
+
+    &:hover{
+        background-color: var(--first-color-alt);
+    }
+
+    &__header{
+        display: none;
+    }
+
+    &-link{
+        background: none;
+        padding: 0;
+        color: var(--title-color);
+
+        &:hover{
+            background-color: transparent;
+        }
+    }
+
+    &-flex{
+        display: inline-flex;
+        align-items: center;
+        column-gap: .25rem;
+        padding: .75rem 1rem;
+    }
+
+    &__icon{
+        font-size: 1.5rem;
+    }
+}

assets/scss/components/_contact.scss

@@ -0,0 +1,21 @@
+/*=============== CONTACT ===============*/
+.contact{
+    &__container{
+        padding-bottom: 3rem;
+    }
+    &__description{
+        text-align: center;
+    }
+    &__content{
+        row-gap: .75rem;
+    }
+    &__address{
+        font-size: var(--small-font-size);
+        font-weight: var(--font-semi-bold);
+        color: var(--title-color);
+    }
+    &__information{
+        font-weight: initial;
+        color: var(--text-color);
+    }
+}

assets/scss/components/_footer.scss

@@ -0,0 +1,46 @@
+/*=============== FOOTER ===============*/
+.footer{
+    background-color: var(--first-color-lighten);
+    padding-bottom: 2rem;
+
+    &__container{
+        row-gap: 2rem;
+    }
+
+    &__logo, 
+    &__title{
+        font-size: var(--h3-font-size);
+        margin-bottom: var(--mb-0-75);
+    }
+    &__logo{
+        display: inline-block;
+        font-weight: var(--font-semi-bold);
+        color: var(--title-color);
+    }
+    &__description,
+    &__link{
+        font-size: var(--small-font-size);
+    }
+    &__links{
+        display: grid;
+        row-gap: .5rem;
+    }
+    &__link{
+        color: var(--title-color);
+    }
+    &__social{
+        display: flex;
+        column-gap: 1.5rem;
+
+        &-link{
+            font-size: 1.25rem;
+            color: var(--title-color);
+        }
+    }
+    &__copy{
+        margin-top: 6rem;
+        text-align: center;
+        font-size: var(--smaller-font-size);
+        color: var(--text-color);
+    }
+}

assets/scss/components/_header.scss

@@ -0,0 +1,77 @@
+/*=============== HEADER ===============*/
+.header{
+    width: 100%;
+    background-color: var(--body-color);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--z-fixed);
+    transition: .5s; // For animation dark mode
+}
+
+/*=============== NAV ===============*/
+.nav{
+    height: var(--header-height);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__menu{
+        @media screen and (max-width: 767px){
+            position: fixed;
+            background-color: var(--container-color);
+            box-shadow: 0 0 4px rgba(0,0,0,.1);
+            padding: 2.5rem 0;
+            width: 90%;
+            top: -100%;
+            left: 0;
+            right: 0;
+            margin: 0 auto;
+            transition: .4s;
+            border-radius: 2rem;
+            z-index: var(--z-fixed);
+        }
+    }
+    &__list{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        row-gap: 1.5rem;
+    }
+    &__link, 
+    &__logo, 
+    &__toggle{
+        color: var(--title-color);
+        font-weight: var(--font-semi-bold);
+    }
+    &__toggle{
+        font-size: 1.3rem;
+        cursor: pointer;
+    }
+}
+
+/* Show menu */
+.show-menu{
+    top: calc(var(--header-height) + 1rem);
+}
+
+/* Active link */
+.active-link{
+    position: relative;
+
+    &::before{
+        content: '';
+        position: absolute;
+        bottom: -.75rem;
+        left: 45%;
+        width: 5px;
+        height: 5px;
+        background-color: var(--title-color);
+        border-radius: 50%;
+    }
+}
+
+/* Change background header */
+.scroll-header{
+    box-shadow: 0 1px 4px rgba(0,0,0,.1);
+}

assets/scss/components/_home.scss

@@ -0,0 +1,14 @@
+/*=============== HOME ===============*/
+.home{
+    &__container{
+        row-gap: 3rem;
+    }
+    &__title{
+        font-size: var(--biggest-font-size);
+        font-weight: var(--font-bold);
+        margin-bottom: var(--mb-0-75);
+    }
+    &__description{
+        margin-bottom: var(--mb-2);
+    }
+}