finteractive

# Task 1

Create an updated version of the context item single view display for "Abbreviation, spelling, dates, and formatting" Context item. 

Name this page. Context item: Single View

## Changes to apply:

1. Wrap the entire entity view in a white card frame to match the markdown editor treatment. Current state has the form on a tinted background and the editor on white, creating two competing visual zones.
2. Add right sidebar navigation:

finteractive

# Landing Page Guidelines by Funnel Stage

## Important: Funnel Stage Identification

Before creating any landing page, first identify the intended funnel stage based on the visitor's awareness level and intent. Then apply the appropriate layout and content rules for that specific stage. 

Each stage has distinct purposes, content structures, and conversion goals.

These landing pages are designed to receive traffic from PPC campaigns, newsletter promotions, and partnership events, where visitors arrive with varying levels of awareness and intent based on the source campaign messaging.

finteractive

# Create Symbolic Link from /Machintosh HD (or whatevery your system drive is) to /Users/Shared/_work
# See https://derflounder.wordpress.com/2020/01/18/creating-root-level-directories-and-symbolic-links-on-macos-catalina/
# NOTE: Must Use a Tab to "space" the first and second property
_work	Users/Shared/_work

finteractive

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Toolkit (v2.9.0)
// ----

@import 'toolkit';
$base-line-height: 24px;
$base-font-size: 16px;
/// Converts units from pixels to EMs

finteractive

// ----
// libsass (v3.3.2)
// ----

@import "singularitygs";

// settings.scss
@include add-grid(6);
@include add-gutter-style('split');
@include add-gutter(1em);

finteractive

// ----
// libsass (v3.2.5)
// ----

@import "breakpoint";

$base-font-size: 16px;
$base-line-height: 22px;

// Strips units (From Foundation Zurb Base File)

finteractive

// ----
// libsass (v3.2.5)
// ----

@import "breakpoint";

$base-font-size: 16px;
$base-line-height: 22px;

// Strips units (From Foundation Zurb Base File)

finteractive

// ----
// libsass (v3.2.5)
// ----

// From http://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/

$breakpoints: (
  small : 480px,
  medium: 700px,
  large : 1024px

finteractive

// ----
// libsass (v3.2.5)
// ----

/*
Source: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions
Source: http://www.sitepoint.com/sass-basics-control-directives-expressions/
Topic: Controll Directives
*/

finteractive

// ----
// libsass (v3.2.5)
// ----

$base-font-size: 21px !default;

@function em($px, $base: $base-font-size) {
  @return ($px / $base) * 1em;
}