0
\$\begingroup\$

I recently completed my first website using SCSS and thoroughly enjoyed using it over plain old CSS even though I didn't get use any of the advanced features of SCSS. I figured before I delve into making my next website I should get my code reviewed so I will be able to adapt these changes into my next project.

What I would like to know is what features have I been using properly? What features have I overlooked or misused? How is my overall folder structure and what performance optimisations could I make?

I would like to apologise in advance for the length of the following code block but I felt it would be best if I included all off it.

Thanks in advance

Folder structure can be seen here

<!-- language: lang-css -->
/*setting body properties*/
body {
    height: 100%;
}
html {
    height: 100%;
}

/* declaring variables*/ 
$primaryBg: white;
$secondaryBg: #ededed;

$navColour: #3D2D56;
$textColour: #1d1a21;
$secondaryTextColour: #fd5454;
$linkColour: #E08200;
$closed: red;
$open: green;

/* declaring breakpoints for media queries*/
$mobile: 460px;
$tablet: 768px;

$scrolltrack-colour: gainsboro;
$scrollthumb-colour: #a0a0a0;
@mixin shadow($property) {
  -webkit-box-shadow: $property;
}

/* sets the width*/
::-webkit-scrollbar {
  width: 1vw;
}

/*hides the scroll bar when the browser isn't being used*/
::-webkit-scrollbar:window-inactive {
  display: none;
}

/*styling the "body" of the scroll bar*/
::-webkit-scrollbar-track {
  background-color: $scrolltrack-colour;

  @include shadow(inset 0 0 7px rgba(0, 0, 0, 1));
  &:active {
    @include shadow(inset 0 0 10px rgba(0, 0, 0, 1));
  }
}

/*styling the scrollbar thumb*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  @include shadow(inset 0 0 10px rgba(0, 0, 0, 1));
  background-color: $scrollthumb-colour;
  &:active {
    @include shadow(inset 0 0 17px rgba(0, 0, 0, 1));
  }
}

/*this media query keeps the scroll bar width proportioned correctly on smaller screens*/
@media only screen and (max-width: 700px) {
  ::-webkit-scrollbar {
    width: 2vw;
  }
}

/*styling for primary sections*/
.primary {
    background-color: $primaryBg;
}


/*styling for secondary sections*/
.secondary {
    background-color: $secondaryBg;
}


/*padding classes for adjusting layout*/
.pad-5-top {
    padding-top: 5vh;
}
.pad-5-bottom {
    padding-bottom: 5vh;
}
.pad-2_5-bottom {
    padding-bottom: 2.5vh;
}
.pad-10-top {
    padding-top: 10vh;
}
.pad-10-bottom {
    padding-bottom: 10vh;
}

h1 {
    font-family: 'Architects Daughter', cursive; 
    color: $primaryBg;
    font-size: 4rem;
}

 h2, h3, h4 {
    font-family: 'Architects Daughter', cursive; 
}


p {
    font-family: 'Robot', sans-serif;  
}

.menu {
    font-weight: bold;
    margin-bottom: -0.3em;
}


b {
    color: $secondaryTextColour;

}

a {
    color: $linkColour;
    font-weight: bold;
    &:hover{
        color: $textColour;

    }
}

.closed {
    color: $closed;
}

.open {
    color: $open;
}

/*styling for hero image*/
.hero-image {
  height: 100vh;
  overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative; 
}

/*fallback for browsers w/o webp support*/
.no-webp .hero-image {
  background-image: url('https://thewoodhill.uk/images/hero-image.png');
}

.webp .hero-image{
  background-image: url('https://thewoodhill.uk/images/hero-image.webp');
}

.hero-text{

  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.hero-text i {
  color: $primaryBg;
  font-size: 2rem;

}

.hero-icons {

    display: flex;
    justify-content: center;

}

.hero-icons a {
  padding-left: 7.5vw;
  padding-right: 7.5vw;
}
.hero-icons i {
  color: $linkColour;
  font-size: 4rem;
  &:hover{
    color: $textColour;
  }

}

#map {
    height: 60vh;
    width: auto;
}

/*The followiing rules apply the "mirror" effect*/
.mirror {
  z-index: 1;
  position: relative;
  font-size: inherit;
  font-family: inherit;
  padding: 0.5em 1em;
  outline: none;
  border: none;
  background-color: $navColour;
  color: $linkColour;
  overflow: hidden;
}


.mirror::after {
  content: '';
  z-index: -1;
  background-color: hsla(0, 0%, 100%, 0.2);
  position: absolute;
  top: -100%;
  bottom: -285%;
  transform: translateX(-525%) rotate(35deg);
  width: 4.6em;
}

.mirror:hover {
  cursor: pointer;
}

.mirror:hover::after {
  transition: transform 0.45s ease-in-out;
  transform: translateX(200%) rotate(35deg);
}

/*styling for the navigation bar*/
.navbar-custom {
    background-color: $navColour;
    padding-bottom: 0;
    padding-top: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/*styling the navigation links */
.navbar-custom {
    .navbar-nav {
        .nav-link {
            color: $linkColour;
            font-weight: bold;
            padding-top: 2vh;
            padding-bottom: 2vh;
            font-size: 1.1rem
        }


    }
}

/*styling for sticky navbar*/
#ghost-nav {
     display: none !important;
}


.inline{
    visibility:none;
    display:inline;
}


.navbar-scroll {
    z-index: 1;
    position: fixed;
    top: 0;
    width: 100%;
}

.parallax {
    height: 100vh;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.no-webp .burger {
    height: 100vh;
    background-image: url("https://thewoodhill.uk/images/rancher.jpg");
}
.webp .burger {
    height: 100vh;
    background-image: url("https://thewoodhill.uk/images/rancher.webp");
}
.outside {
    height: 100vh;
    background-image: url("https://thewoodhill.uk/images/outside.jpg");
}

/*Media query for perfecting layout on desktops*/
@media screen and (min-width: $tablet) {
    /*This effect is display breaking on mobile*/
    @import 'components/_mirrorEffect.scss';
    .mobile {
        display: none;
    }
}


/*Media query for perfecting layout on mobile screens*/
@media screen and (max-width: $mobile) {
    .desktop {
        display: none;
    }
}
h1 {
    font-size: 3rem;
    padding-bottom: 10vh;
}

    /*altering padding on icons in hero image*/
.hero-icons a {
    padding-left: 2vw;
    padding-right: 2vw;
}
.mobile-padding-top {
    padding-top: 5vh;
}


      /*Media query for perfecting layout on tablet screens*/
@media screen and (min-width: $mobile) and (max-width: $tablet) {
    .mobile {
        display: none;
    }
    /*altering padding on icons in hero image*/
    .hero-icons a {
        padding-left: 3.5vw;
        padding-right: 3.5vw;
    }
    iframe {
        width: 240px;
    }
    .mobile-padding-top {
        padding-top: 0;
    }
}

\$\endgroup\$
  • \$\begingroup\$ Welcome to Code Review! Length is usually not an issue here, and in fact you are even required to include all of the content you are asking to be review (see also How to Ask and What topics can I ask about here?). \$\endgroup\$ – AlexV Jul 4 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.