~The Code for Reponsive Sites~
10/7/2024
To get back to the Main Tutorial
config file.scss
$primary-color:#320001;
$secondary-color:#e8854c;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@mixin transition-ease {
transition: all 0.5s ease-in-out;
}
@function set-text-color($color){
@if (lightness($color) > 40%) {
@return #000;
} @else {
@return #fff;
}
}
@mixin media-sm{
@media screen and (min-width: 400px) {
@content;
}
}
@mixin media-md{
@media screen and (min-width: 768px) {
@content;
}
}
@mixin media-lg{
@media screen and (min-width: 1024px) {
@content;
}
}
@mixin media-xl{
@media screen and (min-width: 1600px) {
@content;
}
}
_responsive.scss
@include media-sm {
.projects {
&__bio-image {
width: 130vw;
}
}
}
@include media-md {
.menu-btn {
visibility: hidden;
}
.nav {
visibility: visible;
.menu-nav {
display: block;
transform: translateY(0);
height: 100%;
background:transparent;
text-align: right;
&__item {
display: inline;
padding-right: 1.5rem;
}
&__link {
font-size: 1.5 rem;
}
}
}
.about__bio {
font-size: 1.5rem;
}
.projects {
&__bio-image {
height: 55vh;
}
&__items {
grid-template-columns: repeat(2, 1fr);
}
.text-secondary {
font-size: 3rem;
}
}
.contact__list {
grid-template-columns: repeat(2, 1fr);
}
}
@include media-lg {
.projects {
&__items {
grid-template-columns: repeat(3, 1fr);
}
}
.contact__list {
grid-template-columns: repeat(3, 1fr);
}
}
@include media-xl{
.projects__bio-image {
height: 70vh;
}
.about__bio-image {
height: 70vh;
}
}
main.scss
The only reason I am adding this code is because we added the @import responsive partial file at the top of the page to get it to work.
@import"config";
@import"home";
@import"menu";
@import"about";
@import"projects";
@import"contact";
@import"responsive";
body {
background: $primary-color;
color:set-text-color($primary-color);
height: 100vh;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1;
}
h1, h2, h3 {
font-weight: 400;
padding: 8px;
}
a{
color:set-text-color($primary-color);
text-decoration: none;
}
.text-secondary {
color: $secondary-color;
}
header {
position: fixed;
z-index: 2;
width: 100%;
padding: 1rem;
}
/*.nav ul li{
display: inline-flex;
justify-content: space-between;
top: 0px;
color: white;
padding: 10px 20px;
}
*/
main {
height: 100%;
width: 100%;
padding-top: 100px;
.social-icons {
position: fixed;
bottom: 3rem;
left: 1rem;
a {
padding: 0.4rem;
@include transition-ease;
&:hover {
color: $secondary-color;
}
}
}
}
footer {
font-size: 1rem;
position: fixed;
bottom: 0.2rem;
left: 1rem;
text-align: left;
padding: 1rem;
color:set-text-color($primary-color);
}
To get back to the Main Tutorial