Skip to content

Instantly share code, notes, and snippets.

@eloyesp
Created November 11, 2021 10:06
Show Gist options
  • Save eloyesp/97e6353ec28f5089cf70b4335b8f6069 to your computer and use it in GitHub Desktop.
Save eloyesp/97e6353ec28f5089cf70b4335b8f6069 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@mixin respond-to($class) {
@media only screen and (max-width: $class) {
@content;
}
}
@mixin flex-wrap($value: nowrap) {
flex-wrap: $value;
}
@mixin flexbox {
display: flex;
}
$gt-rg: 'GT-America-Regular';
$gt-lt: 'GT-America-light';
$gt-md: 'GT-America-Medium';
$gt-bd: 'GT-America-bold';
$gt-bk: 'GT-America-black';
$futura: "Futura BdCn BT";
$corm: "Cormorant Garamond";
$ar-mt: "Arial Rounded MT";
$black: #24282a;
$width--xl: 1100px;
$highlight: hsla(343, 74%, 32%, 1);
$highlight-farm: hsla(356, 86%, 48%, 1);
.instagram {
max-width: $width--xl;
margin: 116px auto 150px;
@include respond-to(1150px) {
padding-left: 15px;
padding-right: 15px;
}
@include respond-to(767px) {
padding-left: 10px;
padding-right: 10px;
}
@include respond-to(900px) {
margin: 90px auto 90px;
}
@include respond-to(640px) {
margin: 60px auto 75px;
}
.insta-inner {
.insta-title {
h4 {
text-align: center;
font-size: 24px;
font-weight: 300;
letter-spacing: 0.97px;
font-family: $gt-rg;
margin: 0 0 30px;
}
}
.insta-feed {
ul {
@include flexbox;
@include flex-wrap(wrap);
li {
width: 25%;
padding: 15px;
@include respond-to(900px) {
padding: 10px;
}
@include respond-to(640px) {
width: 50%;
}
a {
img {
width: 100%;
}
}
}
}
}
}
.gallery .instagram-item{
padding: 0 15px;
margin-bottom: 30px;
@include respond-to(767px){
padding: 0 10px;
margin-bottom: 20px;
display:none;
&:first-child,&:nth-child(2),&:nth-child(3),&:nth-child(4){
display:block;
}
}
>a{
position: relative;
}
}
}
.wild-insta-title {
text-align: center;
color: $black;
margin: 0 0 32px;
h4 {
font-size: 24px;
position: relative;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
@include respond-to(640px) {
font-size: 20px;
}
span {
background-color: #fff;
padding: 0px 40px;
display: inline-block;
position: relative;
font-family: $gt-bd;
@include respond-to(640px) {
padding: 0px 20px;
}
}
&:before {
content: "";
position: absolute;
top: 50%;
transform: translate(0px, -50%);
height: 4px;
width: 100%;
left: 0;
background-color: $black;
}
}
p {
font-size: 16px;
font-weight: 300;
letter-spacing: 0.5px;
margin: 5px 0 0;
font-family: $gt-lt;
line-height: 30px;
@include respond-to(640px) {
font-size: 16px;
}
}
}
.instagram {
max-width: 1100px;
margin: 116px auto 150px;
}
@media only screen and (max-width: 1150px) {
.instagram {
padding-left: 15px;
padding-right: 15px;
}
}
@media only screen and (max-width: 767px) {
.instagram {
padding-left: 10px;
padding-right: 10px;
}
}
@media only screen and (max-width: 900px) {
.instagram {
margin: 90px auto 90px;
}
}
@media only screen and (max-width: 640px) {
.instagram {
margin: 60px auto 75px;
}
}
.instagram .insta-inner .insta-title h4 {
text-align: center;
font-size: 24px;
font-weight: 300;
letter-spacing: 0.97px;
font-family: "GT-America-Regular";
margin: 0 0 30px;
}
.instagram .insta-inner .insta-feed ul {
display: flex;
flex-wrap: wrap;
}
.instagram .insta-inner .insta-feed ul li {
width: 25%;
padding: 15px;
}
@media only screen and (max-width: 900px) {
.instagram .insta-inner .insta-feed ul li {
padding: 10px;
}
}
@media only screen and (max-width: 640px) {
.instagram .insta-inner .insta-feed ul li {
width: 50%;
}
}
.instagram .insta-inner .insta-feed ul li a img {
width: 100%;
}
.instagram .gallery .instagram-item {
padding: 0 15px;
margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
.instagram .gallery .instagram-item {
padding: 0 10px;
margin-bottom: 20px;
display: none;
}
.instagram .gallery .instagram-item:first-child, .instagram .gallery .instagram-item:nth-child(2), .instagram .gallery .instagram-item:nth-child(3), .instagram .gallery .instagram-item:nth-child(4) {
display: block;
}
}
.instagram .gallery .instagram-item > a {
position: relative;
}
.wild-insta-title {
text-align: center;
color: #24282a;
margin: 0 0 32px;
}
.wild-insta-title h4 {
font-size: 24px;
position: relative;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
@media only screen and (max-width: 640px) {
.wild-insta-title h4 {
font-size: 20px;
}
}
.wild-insta-title h4 span {
background-color: #fff;
padding: 0px 40px;
display: inline-block;
position: relative;
font-family: "GT-America-bold";
}
@media only screen and (max-width: 640px) {
.wild-insta-title h4 span {
padding: 0px 20px;
}
}
.wild-insta-title h4:before {
content: "";
position: absolute;
top: 50%;
transform: translate(0px, -50%);
height: 4px;
width: 100%;
left: 0;
background-color: #24282a;
}
.wild-insta-title p {
font-size: 16px;
font-weight: 300;
letter-spacing: 0.5px;
margin: 5px 0 0;
font-family: "GT-America-light";
line-height: 30px;
}
@media only screen and (max-width: 640px) {
.wild-insta-title p {
font-size: 16px;
}
}
{
"sass": {
"compiler": "Ruby Sass/3.7.4",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment