Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create new spress template #91

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+4,017 −0
Open

create new spress template #91

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70bf0c7
create new spress template
aCyborg Nov 6, 2017
2e961b8
update to work
aCyborg Nov 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions STLYEGUIDE_SPRESS_UPDATE/src/content/assets/css/styles.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ...onents/inline/component-inline-image.html → ...nt/components/component-inline-image.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: component
section: component
theme: default
type: inline

title: Inline Images
description: 'The inline image adds images into the WYSIWYG component. It includes an image with alt text and an optional caption. It has four variants, full-width (default), left, right, and portrait.'
Expand Down
2 changes: 1 addition & 1 deletion ...onents/inline/component-inline-video.html → ...nt/components/component-inline-video.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: component
section: component
theme: default
type: inline

title: Inline Video
description: 'The inline video component is used to add inline video to the WYSIWYG. It includes an embedded video (YouTube or Vimeo) and an optional caption.'
Expand Down
1 change: 0 additions & 1 deletion STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-forms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
layout: element
section: element
theme: parent

title: Form Elements
description: Form elements show the basic styles for form items as they will appear on the site. This includes some basic layout options.
Expand Down
1 change: 0 additions & 1 deletion STLYEGUIDE_SPRESS_UPDATE/src/content/elements/element-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
layout: element
section: element
theme: parent

title: Grid System
description: This is the structural framework for the layout of the website.
Expand Down
2 changes: 0 additions & 2 deletions STLYEGUIDE_SPRESS_UPDATE/src/includes/head.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{{ page.title }}{% endblock %} | {{ site.title }}</title>
<!-- For Style Guide Only -->
<link rel="stylesheet" href="{{ site.url }}/assets/css/styleguide/styleguide.css">
{# Favicon, replace as needed #}
<link rel="shortcut icon" href="{{ site.url }}/assets/favicon.ico" />

Expand Down
75 changes: 68 additions & 7 deletions STLYEGUIDE_SPRESS_UPDATE/src/layouts/component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,23 +18,84 @@ <h2>Components</h2>
<span>{% include 'styleguide/svg/arrow.svg' %}</span>
</a>
<ul class="sg-secondary-nav">
{% set categoryList = [] %}
{% for category in site.categories %}
<li>
<span class="sg-secondary-nav__section">
{{ categoryName }}
Global Components
<span>{% include 'styleguide/svg/arrow.svg' %}</span>
</span>
<ul class="sg-secondary-subnav">
{% for categoryName, categoryUrl in item.terms_url.categories %}
{% if categoryName not in categoryList | keys %}
{% set categoryList = categoryList | merge({ (categoryName) : categoryUrl }) %}
{% for component in site.components %}
{% if component.type == 'global' %}
<li><a href="{{ site.url }}{{ component.url }}">{{ component.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
<li>
<span class="sg-secondary-nav__section">
Hero Components
<span>{% include 'styleguide/svg/arrow.svg' %}</span>
</span>
<ul class="sg-secondary-subnav">
{% for component in site.components %}
{% if component.type == 'hero' %}
<li><a href="{{ site.url }}{{ component.url }}">{{ component.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
<li>
<span class="sg-secondary-nav__section">
inline Components
<span>{% include 'styleguide/svg/arrow.svg' %}</span>
</span>
<ul class="sg-secondary-subnav">
{% for component in site.components %}
{% if component.type == 'inline' %}
<li><a href="{{ site.url }}{{ component.url }}">{{ component.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
<li>
<span class="sg-secondary-nav__section">
Rail Components
<span>{% include 'styleguide/svg/arrow.svg' %}</span>
</span>
<ul class="sg-secondary-subnav">
{% for component in site.components %}
{% if component.type == 'rail' %}
<li><a href="{{ site.url }}{{ component.url }}">{{ component.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
<li>
<span class="sg-secondary-nav__section">
Teaser Components
<span>{% include 'styleguide/svg/arrow.svg' %}</span>
</span>
<ul class="sg-secondary-subnav">
{% for component in site.components %}
{% if component.type == 'teaser' %}
<li><a href="{{ site.url }}{{ component.url }}">{{ component.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
<li>
<span class="sg-secondary-nav__section">
General Components
<span>{% include 'styleguide/svg/arrow.svg' %}</span>
</span>
<ul class="sg-secondary-subnav">
{% for component in site.components %}
{% if component.type == 'general' %}
<li><a href="{{ site.url }}{{ component.url }}">{{ component.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</nav>
</div>
Expand Down
2 changes: 1 addition & 1 deletion STLYEGUIDE_SPRESS_UPDATE/src/sass/_init.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ $text-color: $black;
$background-color: $white;
/* Link (a:) */
$link-color: $gray-dark;
$link-hover: $secondary;
$link-hover: $gray-dark;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aCyborg what was the logic behind changing the default link hover color?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MichellanneLi I stripped out anything 'project' related, and primary colors were project specific. You'll notice that I've changed everything to the grayscale palette.


///////////////////////////////////////////////////////////

Expand Down
6 changes: 0 additions & 6 deletions STLYEGUIDE_SPRESS_UPDATE/src/sass/_normalize.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,45 +205,39 @@ h1 {
// Set 1 unit of vertical rhythm on the top and bottom margins.
@include leader(1.25, $h1-font-size);
@include trailer(.5, $h1-font-size);
font-family: $sans;
}

h2 {
@extend %display-type;
@include adjust-font-size-to($h2-font-size, 1.35);
@include leader(1.25, $h2-font-size);
@include trailer(.5, $h2-font-size);
font-family: $sans;
}

h3 {
@extend %display-type;
@include adjust-font-size-to($h3-font-size, 1.15);
@include leader(1, $h3-font-size);
@include trailer(.5, $h3-font-size);
font-family: $sans;
}

h4 {
@include adjust-font-size-to($h4-font-size, 1.05);
@include leader(1, $h4-font-size);
@include trailer(.5, $h4-font-size);
font-family: $sans;
}

h5 {
@include adjust-font-size-to($h5-font-size, .85);
@include leader(.75, $h5-font-size);
@include trailer(.25, $h5-font-size);
font-family: $sans;
}

h6 {
@extend %allcaps;
@include adjust-font-size-to($h6-font-size, .65);
@include leader(.75, $h6-font-size);
@include trailer(.25, $h6-font-size);
font-family: $sans;
}


Expand Down
57 changes: 29 additions & 28 deletions STLYEGUIDE_SPRESS_UPDATE/src/sass/_print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,38 @@
* @file
* Define print styles here.
*/
@media print {
body, .container {
width: 100%;
margin: 0;
float: none;
background: #fff url(none);
}

body, .container {
width: 100%;
margin: 0;
float: none;
background: #fff url(none);
}

// Hide things you don't want to print
.header, .footer, .rail {
display: none;
}
// Hide things you don't want to print
.header, .footer, .rail {
display: none;
}

// adjust fonts
body {
font: 1em $georgia;
color: #000;
}
// adjust fonts
body {
font: 1em $georgia;
color: #000;
}

h1,h2,h3,h4,h5,h6 {
font-family: $helvetica;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-family: $helvetica;
color: #000;
}

// Links
a:link, a:visited {
color: #00c;
font-weight: bold;
text-decoration: underline;
}
// Links
a:link, a:visited {
color: #00c;
font-weight: bold;
text-decoration: underline;
}

a:link:after, a:visited:after {
content: " (" attr(href) ") ";
a:link:after, a:visited:after {
content: " (" attr(href) ") ";
}
}
18 changes: 2 additions & 16 deletions STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@ input[type='submit'],
input[type='button'] {
@include adjust-font-size-to($label);
display: inline-block;
background-color: $secondary;
background-color: $gray-dark;
color: $white;
font-family: $sans;
font-weight: 700;
border: 0;
border-radius: 0;
padding: 6px 16px;
Expand All @@ -28,7 +26,7 @@ input[type='button'] {
&:active,
&:hover,
&:focus {
background-color: $secondary-dark;
background-color: $gray-medium;
transition: background-color .5s ease;
text-decoration: none;
}
Expand All @@ -49,17 +47,5 @@ input[type='reset'],
}
}

.button--primary,
.button--primary[type="submit"],
.button--primary[type="button"] {
@extend %button;
background-color: $primary-dark;

&:active,
&:hover,
&:focus {
background-color: $primary;
}
}


11 changes: 5 additions & 6 deletions STLYEGUIDE_SPRESS_UPDATE/src/sass/components/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,17 +74,16 @@ input[type="datetime"],
input[type="datetime-local"] {
width: 100%;
outline: 0;
border: 0;
border-bottom: 3px solid transparent;
background-color: $off-white;
border: 1px solid $gray-light;
background-color: transparent;
box-sizing: border-box;
color: $black;
padding: 8px;

&:active,
&:hover,
&:focus {
border-color: $primary;
border-color: $gray-dark;
transition: border-color .5s ease;
}
}
Expand Down Expand Up @@ -112,7 +111,7 @@ select {
&:active,
&:hover,
&:focus {
border-color: $primary;
border-color: $gray-dark;
transition: border-color .5s ease;
}
}
Expand Down Expand Up @@ -150,7 +149,7 @@ textarea {
&:active,
&:hover,
&:focus {
border-color: $primary;
border-color: $gray-dark;
transition: border-color .5s ease;
}
}
Expand Down
Loading