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

redo holy grail layout

Browse Source
This commit is contained in:
Jina Anne 2018-10-26 23:37:10 -07:00
parent c81d53b5ec
commit 6620433c50
16 changed files with 109 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
source/assets/css/_functions.scss
View File

@ -1,11 +1,14 @@
@function sl-px-to-rem($pixels) {
@return ($pixels / 16px * 1rem);
@function sl-px-to-rem($pixels,
$font-size: 16px) {
@return ($pixels / $font-size * 1rem);
}
@function sl-px-to-em($pixels) {
@return ($pixels / 16px * 1em);
@function sl-px-to-em($pixels,
$font-size: 16px) {
@return ($pixels / $font-size * 1em);
}
@function sl-px-to-unitless($pixels) {
@return ($pixels / 16px);
@function sl-px-to-unitless($pixels,
$font-size: 16px) {
@return ($pixels / $font-size);
}

1
source/assets/css/docs.css.scss
View File

@ -0,0 +1 @@
/*! Sass Documentation */

104
source/assets/css/layout/_holy-grail.scss
View File

@ -1,82 +1,40 @@
.sl-l-holy-grail {
margin: {
right: -sl-px-to-rem(32px);
left: -sl-px-to-rem(32px);
};
display: grid;
grid-template-rows: auto
1fr
auto;
//min-height: 100vh;
&--has {
&-navigation {
grid-template: {
areas: 'header header'
'navigation main'
'footer footer';
columns: sl-px-to-rem(320px) 1fr;
};
}
&-complementary {
grid-template: {
areas: 'header header'
'main complementary'
'footer footer';
columns: 1fr sl-px-to-rem(480px);
};
}
&-both-sidebars {
grid-template: {
areas: 'header header header'
'navigation main complementary'
'footer footer footer';
columns: sl-px-to-rem(320px) 1fr sl-px-to-rem(480px);
};
}
&-no-sidebars {
grid-template: {
areas: 'header'
'main'
'footer';
columns: 1fr;
};
}
&,
&__body {
display: flex;
flex-direction: column;
}
height: 100%;
&__header,
&__main,
&__navigation,
&__complementary,
&__footer {
padding: {
right: sl-px-to-rem(32px);
left: sl-px-to-rem(32px);
};
}
&__footer { flex: none; }
&__body { flex: 1 0 auto; }
&__header { grid-area: header; }
&__main { grid-area: main; }
&__navigation { grid-area: navigation; }
&__complementary { grid-area: complementary; }
&__footer { grid-area: footer; }
&__navigation { order: -1; }
@media screen and (max-width: #{sl-px-to-em(640px)}) {
grid-template: {
areas: 'header'
'navigation'
'main'
'complementary'
'footer';
columns: 100%;
rows: auto
auto
auto
auto
auto;
};
@include sl-breakpoint--medium {
&__body {
flex-direction: row;
margin: {
right: -2rem;
left: -2rem;
};
}
&__main,
&__navigation,
&__complementary {
padding: {
right: 2rem;
left: 2rem;
};
}
&__main { flex: 1; }
&__navigation { flex: 0 0 20rem; }
&__complementary { flex: 0 0 30rem; }
}
}

12
source/assets/css/regions/_page.scss
View File

@ -1,15 +1,3 @@
.page {
transition-property: margin, padding, min-height, height;
@include sl-breakpoint--medium {
margin: 0 auto #{-$sticky-contentinfo-height};
padding-bottom: $sticky-contentinfo-height;
min-height: 100%;
height: auto !important;
height: 100%;
}
}
.body {
padding: {
top: sl-px-to-rem(48px);

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

@ -39,7 +39,6 @@
'components/tables',
'components/forms',
'components/buttons',
'components/code',
'components/alerts',
'components/callouts',
'components/progress',

0
source/assets/css/components/_code.scss.erb → source/assets/css/vendor/syntax.css.erb vendored
View File

3
source/layouts/foot/_js.haml
View File

@ -1,3 +1,2 @@
= javascript_include_tag "sass"
= javascript_include_tag 'sass'
= yield_content :js_foot

19
source/layouts/has_both_sidebars.haml
View File

@ -1,13 +1,14 @@
= wrap_layout :layout do
.sl-l-holy-grail.sl-l-holy-grail--has-both-sidebars
%nav.sl-l-holy-grail__navigation(role='navigation')
= yield_content :navigation
.sl-l-holy-grail
.sl-l-holy-grail__body
%nav.sl-l-holy-grail__navigation(role='navigation')
= yield_content :navigation
%main.sl-l-holy-grail__main(role='main')
- if current_page.data.introduction
.sl-c-introduction= markdown_wrap current_page.data.introduction
.sl-l-holy-grail__main
- if current_page.data.introduction
.sl-c-introduction= markdown_wrap current_page.data.introduction
=yield
=yield
%aside.sl-l-holy-grail__complementary(role='complementary')
= yield_content :complementary
%aside.sl-l-holy-grail__complementary(role='complementary')
= yield_content :complementary

15
source/layouts/has_complementary.haml
View File

@ -1,10 +1,11 @@
= wrap_layout :layout do
.sl-l-holy-grail.sl-l-holy-grail--has-complementary
%main.sl-l-holy-grail__main(role='main')
- if current_page.data.introduction
.sl-c-introduction= markdown_wrap current_page.data.introduction
.sl-l-holy-grail
.sl-l-holy-grail__body
.sl-l-holy-grail__main
- if current_page.data.introduction
.sl-c-introduction= markdown_wrap current_page.data.introduction
=yield
=yield
%aside.sl-l-holy-grail__complementary(role='complementary')
= yield_content :complementary
%aside.sl-l-holy-grail__complementary(role='complementary')
= yield_content :complementary

15
source/layouts/has_navigation.haml
View File

@ -1,10 +1,11 @@
= wrap_layout :layout do
.sl-l-holy-grail.sl-l-holy-grail--has-navigation
%nav.sl-l-holy-grail__navigation(role='navigation')
= yield_content :navigation
.sl-l-holy-grail
.sl-l-holy-grail__body
%nav.sl-l-holy-grail__navigation(role='navigation')
= yield_content :navigation
%main.sl-l-holy-grail__main(role='main')
- if current_page.data.introduction
.sl-c-introduction= markdown_wrap current_page.data.introduction
.sl-l-holy-grail__main
- if current_page.data.introduction
.sl-c-introduction= markdown_wrap current_page.data.introduction
=yield
=yield

7
source/layouts/has_no_sidebars.haml
View File

@ -1,6 +1,5 @@
= wrap_layout :layout do
%main(role='main')
- if current_page.data.introduction
.sl-c-introduction= markdown_wrap current_page.data.introduction
- if current_page.data.introduction
.sl-c-introduction= markdown_wrap current_page.data.introduction
=yield
=yield

3
source/layouts/head/_css.haml
View File

@ -1,3 +1,4 @@
= stylesheet_link_tag "sass"
= stylesheet_link_tag 'vendor/syntax'
= stylesheet_link_tag 'sass'
= yield_content :css

47
source/layouts/layout.haml
View File

@ -4,30 +4,37 @@
%meta(charset="utf-8")/
%meta(http-equiv="X-UA-Compatible" content="IE=edge")/
%title= page_title
= partial "layouts/head/meta"
= partial "layouts/head/link"
= partial "layouts/head/css"
= partial "layouts/head/js"
= partial 'layouts/head/meta'
= partial 'layouts/head/link'
= partial 'layouts/head/css'
= partial 'layouts/head/js'
%body{class: page_classes}
.page
= partial "layouts/roles/alert"
.pop-stripe
= partial "layouts/regions/banner"
= partial "layouts/regions/page_header"
/[if lt IE 9]
%p.browserupgrade
You are using an
%strong outdated
browser. Please
= link_to 'upgrade your browser', 'https://browsehappy.com/'
to improve your experience and security.
= partial 'layouts/roles/alert'
.pop-stripe
= partial 'layouts/regions/banner'
%main(role='main')
= partial 'layouts/regions/page_header'
.body
.sl-l-container=yield
.sl-l-container= Typogruby.improve(yield)
- if content_for?(:section_middle)
%section.section-middle
.sl-l-container= yield_content :section_middle
= partial 'layouts/regions/release'
= partial "layouts/regions/release"
- if content_for?(:section_bottom)
%section.section-bottom
.sl-l-container= Typogruby.improve(yield_content :section_bottom)
- if content_for?(:section_bottom)
%section.section-bottom
.sl-l-container= yield_content :section_bottom
= partial "layouts/regions/contentinfo"
= partial "layouts/foot/js"
= partial 'layouts/regions/contentinfo'
= partial 'layouts/foot/js'

6
source/layouts/regions/_banner.haml
View File

@ -1,6 +1,6 @@
%header.banner(role="banner")
%header.banner(role='banner')
.sl-l-container.clearfix
%h1.site-brand= link_to (image_tag "logos/logo.svg", height: "48", alt: "Sass"), "/"
%h1.site-brand= link_to (image_tag 'logos/logo.svg', height: '48', alt: 'Sass'), '/'
%nav.navigation.collapse(role="navigation")
:markdown
@ -11,7 +11,7 @@
* [Get Involved](/community)
.banner-toggle
%button(type="button" data-toggle="collapse" data-target=".navigation")
%button(type='button' data-toggle='collapse' data-target='.navigation')
%span.icon-bar
%span.icon-bar
%span.icon-bar

6
source/layouts/regions/_page_header.haml
View File

@ -2,9 +2,9 @@
.sl-l-container
%h1
- if current_page.data.h1?
= current_page.data.h1
= Typogruby.improve(current_page.data.h1)
- else
= current_page.data.title
= Typogruby.improve(current_page.data.title)
- if current_page.data.description?
%p= current_page.data.description
%p= Typogruby.improve(current_page.data.description)

19
source/layouts/roles/_alert.haml
View File

@ -1,20 +1,7 @@
/[if lt IE 8]
.alert(role="alert")
.sl-l-container
%p.browsehappy
You are using an
%strong outdated
browser. Please
= link_to "upgrade your browser", "http://browsehappy.com/"
to improve your experience.
- if content_for?(:alert)
.alert
.sl-l-container= yield_content :alert
.alert.stickers
.sl-l-container
%p
%strong Your laptop needs more Sass.
= succeed "." do
= link_to "Grab a set of Sass stickers now", "http://devswag.com/products/sass-stickers-4"
= succeed '.' do
= link_to 'http://devswag.com/products/sass-stickers-4' do
Grab a set of Sass stickers now