danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-27 04:24:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

header linking

Browse Source
This commit is contained in:
Jina Anne 2018-12-28 17:59:53 -08:00
parent fb5eb4f52c
commit c21200ba14
17 changed files with 192 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
helpers/sass_helpers.rb
View File

@ -320,7 +320,7 @@ module SassHelpers
]))
end
concat(content_tag :table, contents, class: 'impl-status')
concat(content_tag :table, contents, class: 'sl-c-table impl-status')
end
# Renders a single row for `impl_status`.

2
source/assets/css/components/_callouts.scss
View File

@ -1,7 +1,7 @@
.sl-c-callout {
margin: 1.5rem 0;
padding: .75rem 1rem;
background: $sl-color--nebula;
background: $sl-color--midnight-blue;
color: $sl-color--white;
a,

19
source/assets/css/components/_code.scss
View File

@ -1,19 +0,0 @@
code,
pre {
font-family: $sl-font-family--code;
border-radius: sl-px-to-em(2px);
color: darken($sl-color--pale-sky, 25%);
a & { color: inherit; }
}
code { line-height: 1; }
pre {
border: 1px solid #ebebeb;
padding: .75rem 1rem;
overflow: auto;
background: rgba($sl-color--midnight-blue, .0625);
code { line-height: inherit; }
}

29
source/assets/css/components/_icons.scss
View File

@ -1,29 +0,0 @@
$os-icons: 'icons/os-icons.png';
// TODO: Make these use a 16-base instead of 15.
%os-icons {
background: image-url($os-icons) 0 0 no-repeat;
background-size: auto sl-px-to-rem(15px);
display: inline-block;
width: sl-px-to-rem(15px);
height: sl-px-to-rem(15px);
}
.mac-icon {
@extend %os-icons;
background-position: -(sl-px-to-rem(35px)) 0;
}
.windows-icon {
@extend %os-icons;
}
.linux-icon {
@extend %os-icons;
background-position: -(sl-px-to-rem(65px)) 0;
}
.paid-icon {
@extend %os-icons;
background-position: -(sl-px-to-rem(100px)) 0;
}

17
source/assets/css/components/_link-header.scss Normal file
View File

@ -0,0 +1,17 @@
.sl-c-link-header {
a {
display: flex;
justify-content: space-between;
align-items: center;
&:after {
margin: {
right: .5rem;
left: 1rem;
};
font-size: 1rem;
content: "\1F517";
}
}
}

16
source/assets/css/components/_media.scss
View File

@ -1,16 +0,0 @@
img {
display: block;
margin: {
right: auto;
left: auto;
};
max-width: 100%;
height: auto;
}
hr {
margin: {
top: 3rem;
bottom: 3rem;
};
}

2
source/assets/css/components/_sass-syntax-switcher.scss
View File

@ -11,7 +11,7 @@
top: 4.78rem;
margin-right: -1em;
a { border: 0; }
a { border: 0; background: none; }
a:focus {
outline: 0px !important;

46
source/assets/css/components/_tables.scss
View File

@ -1,6 +1,6 @@
$table-cell-padding: 1rem / 2;
table {
.sl-c-table {
margin: {
right: -$table-cell-padding;
left: -$table-cell-padding;
@ -8,31 +8,31 @@ table {
border: 0;
width: 100%;
max-width: 100%;
}
td,
th {
border: 0;
padding: .75rem $table-cell-padding;
vertical-align: top;
}
td,
th {
border: 0;
padding: .75rem $table-cell-padding;
vertical-align: top;
}
th,
caption {
text-align: left;
}
th,
caption {
text-align: left;
}
@include sl-breakpoint--medium-max {
.sl-c-table-responsive {
margin-bottom: 1.5rem;
width: 100%;
overflow: {
x: auto;
y: hidden;
@include sl-breakpoint--medium-max {
&-responsive {
margin-bottom: 1.5rem;
width: 100%;
overflow: {
x: auto;
y: hidden;
}
table { margin-bottom: 0; }
td { white-space: nowrap; }
}
table { margin-bottom: 0; }
td { white-space: nowrap; }
}
}

2
source/assets/css/components/_banner.scss → source/assets/css/regions/_banner.scss
View File

@ -1,4 +1,4 @@
.sl-c-banner {
.sl-r-banner {
position: relative;
a {

10
source/assets/css/sass.css.scss
View File

@ -23,14 +23,14 @@
'layout/sections',
'components/alerts',
'components/banner',
'components/buttons',
'components/callouts',
'components/code',
'components/icons',
'components/introduction',
'components/link-header',
'components/lists',
'components/media',
'components/pop-stripe',
'components/sass-syntax-switcher',
'components/tables';
'components/tables',
'regions/banner';

13
source/assets/css/visual-design/_theme.scss
View File

@ -348,3 +348,16 @@ a {
&:active { border-bottom-color: $sl-color--iron; }
}
code,
pre {
border-radius: sl-px-to-em(2px);
color: darken($sl-color--pale-sky, 25%);
a & { color: inherit; }
}
pre {
border: 1px solid #ebebeb;
background: rgba($sl-color--midnight-blue, .0625);
}

29
source/assets/css/visual-design/_typography.scss
View File

@ -152,3 +152,32 @@ h4 { font-size: $sl-font-size--large; }
letter-spacing: sl-px-to-em(1px);
line-height: 0;
}
code,
pre { font-family: $sl-font-family--code; }
code { line-height: 1; }
pre {
padding: .75rem 1rem;
overflow: auto;
code { line-height: inherit; }
}
img {
display: block;
margin: {
right: auto;
left: auto;
};
max-width: 100%;
height: auto;
}
hr {
margin: {
top: 3rem;
bottom: 3rem;
};
}

2
source/assets/js/components/tables.js
View File

@ -1 +1 @@
$( "table" ).wrap( "<div class='sl-c-table-responsive'></div>" );
$( "sl-c-table" ).wrap( "<div class='sl-c-table-responsive'></div>" );

54
source/install.html.haml
View File

@ -15,56 +15,56 @@ no_container: true
most of the applications for free but a few of them are paid apps
<small>(and totally worth it)</small>.
%ul.list-feature
%ul
%li
= link_to "CodeKit", "https://incident57.com/codekit/"
%span.info (Paid)
%span.mac-icon
(Paid)
Mac
%li
= link_to 'Compass.app', 'http://compass.kkbox.com/'
%span.info (Paid, Open Source)
%span.mac-icon
%span.windows-icon
%span.linux-icon
(Paid, Open Source)
Mac
Windows
Linux
%li
= link_to 'Ghostlab', 'http://www.vanamco.com/ghostlab/'
%span.info (Paid)
%span.mac-icon
%span.windows-icon
(Paid)
Mac
Windows
%li
= link_to 'Hammer', 'http://hammerformac.com/'
%span.info (Paid)
%span.mac-icon
(Paid)
Mac
%li
= link_to 'Koala', 'http://koala-app.com/'
%span.info (Open Source)
%span.mac-icon
%span.windows-icon
%span.linux-icon
(Open Source)
Mac
Windows
Linux
%li
= link_to 'LiveReload', 'http://livereload.com/'
%span.info (Paid, Open Source)
%span.mac-icon
%span.windows-icon
(Paid, Open Source)
Mac
Windows
%li
= link_to 'Prepros', 'https://prepros.io/'
%span.info (Paid)
%span.mac-icon
%span.windows-icon
%span.linux-icon
(Paid)
Mac
Windows
Linux
%li
= link_to 'Scout-App', 'http://scout-app.io/'
%span.info (Free, Open Source)
%span.windows-icon
%span.linux-icon
%span.mac-icon
(Free, Open Source)
Windows
Linux
Mac
.sl-l-grid__column
:markdown

6
source/layouts/layout.haml
View File

@ -54,14 +54,14 @@
.sl-c-pop-stripe
%header.sl-c-banner(itemtype='http://schema.org/WPHeader' itemscope='itemscope' role='banner')
%header.sl-r-banner(itemtype='http://schema.org/WPHeader' itemscope='itemscope' role='banner')
.sl-l-container
.sl-l-grid.sl-l-grid--full.sl-l-large-grid--fit.sl-l-large-grid--center.sl-l-large-grid--gutters
%p.sl-l-grid__column.sl-c-banner__brand
%p.sl-l-grid__column.sl-r-banner__brand
= link_to '/' do
= image_tag 'logos/logo.svg', alt: 'Sass', height: '48'
%nav.sl-c-banner__navigation.sl-l-grid__column.sl-l-large-grid.sl-l-large-grid__column--auto-size.sl-c-list-horizontal-wrapper(itemtype='http://schema.org/SiteNavigationElement' itemscope='itemscope' role='navigation')
%nav.sl-r-banner__navigation.sl-l-grid__column.sl-l-large-grid.sl-l-large-grid__column--auto-size.sl-c-list-horizontal-wrapper(itemtype='http://schema.org/SiteNavigationElement' itemscope='itemscope' role='navigation')
:markdown
- [Install](/install)
- [Learn Sass](/guide)

21
source/layouts/section_styleguide.haml
View File

@ -1,27 +1,7 @@
= wrap_layout :has_navigation do
= yield
- if current_page.data.previous_page_url or current_page.data.next_page_url
%footer
%ul.pager
- if current_page.data.previous_page_url
%li.previous
- if current_page.data.previous_page_url == "index"
- previous = ""
- else
- previous = current_page.data.previous_page_url
= link_to "/styleguide/" + previous do
&larr;
= current_page.data.previous_page_name
- if current_page.data.next_page_url
%li.next
= link_to "/styleguide/" + current_page.data.next_page_url do
= current_page.data.next_page_name
&rarr;
- content_for :navigation do
- root_url = config[:host]
%nav.sl-c-list-navigation-wrapper
:markdown
### [Style Guide](/styleguide)
@ -30,4 +10,5 @@
- [Color](/styleguide/color)
- [Typography](/styleguide/typography)
- [Layout](/styleguide/layout)
- [Components](/styleguide/components)
- [Code](/styleguide/code)

69
source/styleguide/components.html.haml Normal file
View File

@ -0,0 +1,69 @@
---
title: Components
---
.sl-c-alert
.sl-l-container
%p
%strong Alert
= lorem.sentence
.sl-c-alert.sl-c-alert--info
.sl-l-container
%p
%strong Info Alert
= lorem.sentence
= link_to 'Link', '#', class: 'sl-c-button'
%button.sl-c-button(type='button') Button
= link_to 'Link', '#', class: 'sl-c-button sl-c-button--primary'
%button.sl-c-button.sl-c-button--primary(type='button') Button
.sl-c-callout
%h3 Callout
%p= lorem.paragraph
.sl-c-callout.sl-c-callout--warning
%h3 Warning
%p= lorem.paragraph
.sl-c-callout.sl-c-callout--fun-fact
%h3 Fun Fact
%p= lorem.paragraph
%p.sl-c-introduction= lorem.paragraph
.sl-c-introduction
%p= lorem.paragraph
%h2.sl-c-link-header
= link_to '#' do
%span Link Header 2
%h3.sl-c-link-header
= link_to '#' do
%span Link Header 3
%h4.sl-c-link-header
= link_to '#' do
%span Link Header 4
.sl-c-list-navigation-wrapper
:markdown
- [Vertical](#)
- [Navigation](#)
- [List](#)
.sl-c-list-horizontal-wrapper
:markdown
- [Horizontal](#)
- [Navigation](#)
- [List](#)
.sl-c-pop-stripe
%table.sl-c-table
%tr
%td Table
%td Table