<article class="Post " id="" style="">
<div class="row _left" style="">
<div class="col _span-2 " style="">
<nav id="" class="Nav Post-navigation Sticky js-sticky">
<ul>
<li class="" style="">
<a class="js-smoothscroll" href="#awesome-section">
Create Your Goals & Objectives
</a>
</li>
<li class="" style="">
<a class="js-smoothscroll" href="#second-section">
Create an Instagram Marketing Strategy
</a>
</li>
<li class="" style="">
<a class="js-smoothscroll" href="#third-section">
Engage With Influencers & Your Followers
</a>
</li>
</ul>
</nav>
</div>
<div class="col _span-8 " style="">
<section id="awesome-section" class="section " style=" ">
<div id="" class="Post-content ">
<h2 class=" " style="">
Praesent commodo cursus magna
</h2>
<p id="" class="">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.
</p>
<p id="" class="">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.
</p>
</div>
</section>
<section id="second-section" class="section " style=" ">
<div id="" class="Post-content ">
<h2 class=" " style="">
felis euismod semper
</h2>
<p id="" class="">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.
</p>
<p id="" class="">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.
</p>
<h3 class=" " style="">
Praesent commodo cursus magna
</h3>
<p id="" class="">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.
</p>
</div>
</section>
<section id="third-section" class="section " style=" ">
<div id="" class="Post-content ">
<h2 class=" " style="">
felis euismod semper
</h2>
<p id="" class="">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.
</p>
<h3 class=" " style="">
Praesent commodo cursus magna
</h3>
<p id="" class="">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.
</p>
</div>
</section>
</div>
</div>
</article>
<article class="Post {{modifier}}" id="{{id}}" style="{{style}}">
{{> @children}}
</article>
{
"id": null,
"style": null,
"children": [
{
"component": "row",
"context": {
"modifier": "_left",
"children": [
{
"component": "column",
"context": {
"span": 2,
"children": [
{
"component": "nav",
"context": {
"modifier": "Post-navigation Sticky js-sticky",
"children": [
{
"component": "li",
"context": {
"children": [
{
"component": "link",
"context": {
"modifier": "js-smoothscroll",
"href": "#awesome-section",
"text": "Create Your Goals & Objectives"
}
}
]
}
},
{
"component": "li",
"context": {
"children": [
{
"component": "link",
"context": {
"modifier": "js-smoothscroll",
"href": "#second-section",
"text": "Create an Instagram Marketing Strategy"
}
}
]
}
},
{
"component": "li",
"context": {
"children": [
{
"component": "link",
"context": {
"modifier": "js-smoothscroll",
"href": "#third-section",
"text": "Engage With Influencers & Your Followers"
}
}
]
}
}
]
}
}
]
}
},
{
"component": "column",
"context": {
"span": 8,
"children": [
{
"component": "section",
"context": {
"id": "awesome-section",
"children": [
{
"component": "div",
"context": {
"class": "Post-content",
"children": [
{
"component": "heading",
"context": {
"level": 2,
"text": "Praesent commodo cursus magna"
}
},
{
"component": "p",
"context": {
"text": "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper."
}
},
{
"component": "p",
"context": {
"text": "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper."
}
}
]
}
}
]
}
},
{
"component": "section",
"context": {
"id": "second-section",
"children": [
{
"component": "div",
"context": {
"class": "Post-content",
"children": [
{
"component": "heading",
"context": {
"level": 2,
"text": "felis euismod semper"
}
},
{
"component": "p",
"context": {
"text": "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper."
}
},
{
"component": "p",
"context": {
"text": "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper."
}
},
{
"component": "heading",
"context": {
"level": 3,
"text": "Praesent commodo cursus magna"
}
},
{
"component": "p",
"context": {
"text": "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper."
}
}
]
}
}
]
}
},
{
"component": "section",
"context": {
"id": "third-section",
"children": [
{
"component": "div",
"context": {
"class": "Post-content",
"children": [
{
"component": "heading",
"context": {
"level": 2,
"text": "felis euismod semper"
}
},
{
"component": "p",
"context": {
"text": "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper."
}
},
{
"component": "heading",
"context": {
"level": 3,
"text": "Praesent commodo cursus magna"
}
},
{
"component": "p",
"context": {
"text": "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper."
}
}
]
}
}
]
}
}
]
}
}
]
}
}
]
}
@import "../../axioms/Animation";
@import "../../axioms/Space";
@import "./PostBase";
.Post {
&-header._inverse {
&._gradient-green {
background-image: linear-gradient(to bottom, get-color(green, 800) 0%, get-color(green, 500) 100%);
}
&._gradient-blue {
background-image: linear-gradient(to bottom, get-color(aqua, 800) 0%, get-color(aqua, 500) 100%);
}
&._gradient-green-blue {
background-image: linear-gradient(to bottom, get-color(aqua, 800) 0%, get-color(green, 500) 100%);
}
&._gradient-teal {
background-image: linear-gradient(to bottom, get-color(aqua, 800) 0%, get-color(teal, 400) 100%);
}
}
//deprecating ._inverse for SUIT css style modifiers
&-header._inverse,
&-header--inverse {
color: theme-color(text, inverse);
background-color: theme-color(background, dark);
* {
color: inherit; // To override default header colors
}
}
&-header--full {
padding-bottom: 0;
border-bottom: solid theme-color(background) Space(600);
.Breadcrumbs {
position: absolute;
width: 100%;
}
.Post-header-title {
padding: Space(500) Space(400) 0;
margin: 0 0 -#{Space(600)};
color: theme-color(text);
}
}
&-header h3 {
@include font-size-fine;
margin-top: Space(600);
}
&-navigation,
&-sidebar {
display: none;
}
&-social {
order: 1;
text-align: center;
}
&-social .icon {
display: inline-block;
margin: 0 Space(200);
&:focus,
&:hover {
text-decoration: none;
}
}
}
@media screen and (min-width: 599px) {
.Post {
&-progressbar {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: theme-color(main);
}
&-social {
order: 2;
}
&-shareButtons {
width: 45px;
margin-left: auto;
}
@supports (position: sticky) {
&-shareButtons {
position: sticky;
top: Space(900);
}
}
&-social .icon {
display: block;
+ .icon {
margin-top: .75rem;
}
}
}
}
@media screen and (min-width: 910px) {
.Post {
&-navigation {
a {
display: block;
color: get-color(neutral, 500);
transition: transform $transition-time-300;
transform: scale(.75);
transform-origin: left;
}
:hover > a {
color: get-color(neutral, 800);
}
.is-active a {
color: theme-color(link, dark);
transform: scale(1);
}
}
&-sidebar {
display: block;
}
@supports (position: sticky) {
&-sidebar {
position: sticky;
top: Space(900);
}
&-navigation {
position: sticky;
top: Space(900);
display: block;
}
}
}
}
.Post--sequenced {
counter-reset: section;
}
.Post-landmark {
@include Elevation(Card, $withZindex: true, $hasShadow: false);
position: relative;
&::before {
@include font-weight-normal;
display: block;
width: Space(600);
height: Space(600);
margin: 0 auto Space(600);
overflow: hidden;
line-height: 1.25; // In order to properly center the letter inside of the circle
text-align: center;
background: theme-color(background);
border: 1px solid get-color(neutral, 600);
border-radius: 50%;
content: counter(section);
counter-increment: section;
}
&::after {
position: absolute;
top: Space(600) / 2;
right: 0;
left: 0;
z-index: -1;
height: 1px;
background: get-color(neutral, 600);
content: "";
}
}
@import "../../axioms/Animation";
@import "../../axioms/Space";
.Post {
a {
@include font-weight-semibold;
}
p a {
text-decoration: underline;
}
.Paper + .row,
.row + .row {
margin-top: Space(500);
}
&-header {
text-align: center;
}
&-header + * {
margin-top: Space(600);
}
&-header h3 {
@include font-size-fine;
margin-top: Space(600);
}
&-content {
@include font-size-large;
padding-top: Space(500);
order: 2;
p,
blockquote,
ul,
ol,
h2,
h3,
h4,
h5,
h6,
table {
max-width: 680px;
margin-right: auto;
margin-left: auto;
}
& > * + h2 {
margin-top: Space(700);
}
* + .row {
margin-top: Space(600);
}
h2 {
@include font-size-subhead;
}
h3 {
@include font-size-lead;
}
h4 {
@include font-size-large;
}
h5 {
@include spaced-out;
@include font-size-base;
}
h6 {
@include spaced-out;
@include font-size-base;
}
ol,
ul {
margin-right: auto;
margin-left: auto;
}
blockquote {
max-width: none;
margin-right: auto;
margin-left: auto;
&:not(.Blockquote) {
@include blockquote($padding: 0 Space(500));
@include font-size-large;
max-width: calc(#{2 * Space(500)} + 680px);
margin: Space(600) auto;
> * {
max-width: none;
}
&::before {
position: absolute;
left: 0;
height: 100%;
border-left: Space(300) solid theme-color(main);
content: "";
}
}
> * {
max-width: none;
}
h3 {
padding-top: 0;
line-height: 1;
}
h3 + p {
margin-top: Space(300);;
}
}
figure {
display: block;
margin-right: auto;
margin-left: auto;
figcaption {
margin-top: Space(300);
}
}
aside,
pre,
code {
padding: Space(500);
background: theme-color(background, light);
}
aside p {
margin-top: 0;
}
.twitter-tweet,
iframe {
display: block;
max-width: 100%;
margin-top: Space(600);
margin-right: auto;
margin-left: auto;
}
table {
text-align: left;
}
table td,
table th {
vertical-align: top;
}
table td {
padding: .75rem Space(200) 0;
}
}
}
@media screen and (min-width: 599px) {
.Post {
.row + .row {
margin-top: Space(700);
}
&-content {
padding-top: 0;
order: 1;
}
}
}
import Scrollspy from '../../../modules/scrollspy';
export default Scrollspy;
There are no notes for this item.