I'm facing an issue with the white space between the header-main and main-footer sections. I would like to either match their color to the rest of the website or completely remove the space. The color I want to use is #fefcf5. I hope this edited version addresses the problem. Thank you.
@import '_common/normalize';
html {
font-size: $global-font-size;
box-sizing: border-box;
}
body {
padding: 10px;
margin: 0;
font-family: "Noto Serif", Serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.7;
color: #0a0a0a;
background-color: #fefcf5 !important;
scroll-behavior: smooth;
border-top: 3px solid $theme-color;
min-height: 100vh
}
@include max-screen() {
body {
border-top: 0;
}
}
::selection {
background: #fefcf5;
color: #fefcf5;
}
img {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: middle;
}
a {
color: $global-font-color;
text-decoration: none;
}
@each $header,
$size in $global-headings {
#{$header} {
font-size: $size;
font-family: $global-serif-font-family;
}
}
.container {
margin: 0 auto;
width: $global-body-width;
background-color: #fefcf5;
}
.header {
background-color: #fefcf5;
margin: 0;
}
.footer {
background-color: #fefcf5;
margin: 0;
}
.content-wrapper {
padding: $global-container-padding;
background-color: #fefcf5;
min-height: 100vh;
}
@include max-screen() {
.container {
width: 100%;
box-shadow: -1px -5px 5px $gray;
}
}
<html lang="en">
<head>
<script src="/livereload.js?mindelay=10&v=2&port=4321&path=livereload" data-no-instant="" defer="">
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Archive - </title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="theme-color" content="#f8f5ec">
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">
... (omitted for brevity) ...