diff --git a/src/assets/images/demo/customizable.svg b/src/assets/images/demo/customizable.svg new file mode 100644 index 0000000..202f600 --- /dev/null +++ b/src/assets/images/demo/customizable.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/demo/hero-bg-foundation-6-large.svg b/src/assets/images/demo/hero-bg-foundation-6-large.svg new file mode 100644 index 0000000..56dae96 --- /dev/null +++ b/src/assets/images/demo/hero-bg-foundation-6-large.svg @@ -0,0 +1,1321 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/demo/hero-bg-foundation-6-small.svg b/src/assets/images/demo/hero-bg-foundation-6-small.svg new file mode 100644 index 0000000..7bb9030 --- /dev/null +++ b/src/assets/images/demo/hero-bg-foundation-6-small.svg @@ -0,0 +1,1309 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/demo/professional.svg b/src/assets/images/demo/professional.svg new file mode 100644 index 0000000..ce4beed --- /dev/null +++ b/src/assets/images/demo/professional.svg @@ -0,0 +1,139 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/demo/responsive.svg b/src/assets/images/demo/responsive.svg new file mode 100644 index 0000000..173ea9f --- /dev/null +++ b/src/assets/images/demo/responsive.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/demo/semantic.svg b/src/assets/images/demo/semantic.svg new file mode 100644 index 0000000..29c3647 --- /dev/null +++ b/src/assets/images/demo/semantic.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss index 9332f8e..128fa1e 100644 --- a/src/assets/scss/_settings.scss +++ b/src/assets/scss/_settings.scss @@ -72,7 +72,7 @@ // 1. Global // --------- -$global-font-size: 100%; +$global-font-size:100%; $global-width: 100vw; $global-lineheight: 1.5; @@ -156,17 +156,17 @@ $header-lineheight: 1.4; $header-margin-bottom: 0.5rem; $header-styles: ( small: ( - 'h1': ('font-size': 24), - 'h2': ('font-size': 20), - 'h3': ('font-size': 19), + 'h1': ('font-size': 36), + 'h2': ('font-size': 30), + 'h3': ('font-size': 23), 'h4': ('font-size': 18), 'h5': ('font-size': 17), 'h6': ('font-size': 16), ), medium: ( - 'h1': ('font-size': 48), - 'h2': ('font-size': 40), - 'h3': ('font-size': 31), + 'h1': ('font-size': 58), + 'h2': ('font-size': 52), + 'h3': ('font-size': 40), 'h4': ('font-size': 25), 'h5': ('font-size': 20), 'h6': ('font-size': 16), @@ -180,7 +180,7 @@ $paragraph-margin-bottom: 1rem; $paragraph-text-rendering: optimizeLegibility; $enable-code-inline: true; $anchor-color: $primary-color; -$anchor-color-hover: scale-color($anchor-color, $lightness: -14%); +$anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%); $anchor-text-decoration: none; $anchor-text-decoration-hover: none; $hr-width: $global-width; @@ -758,8 +758,10 @@ $prototype-text-overflow: ellipsis; $responsive-embed-margin-bottom: rem-calc(16); $responsive-embed-ratios: ( - default: 4 by 3, + default: 16 by 9, + standard: 4 by 3, widescreen: 16 by 9, + classicfilm: 3 by 2, ); // 47. Reveal diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss index df1e934..7243468 100644 --- a/src/assets/scss/app.scss +++ b/src/assets/scss/app.scss @@ -20,9 +20,9 @@ @include foundation-button-group; @include foundation-close-button; @include foundation-label; -@include foundation-progress-bar; -@include foundation-slider; -@include foundation-switch; +//@include foundation-progress-bar; +//@include foundation-slider; +//@include foundation-switch; @include foundation-table; // Basic components @include foundation-badge; @@ -36,7 +36,7 @@ // Containers @include foundation-accordion; @include foundation-media-object; -@include foundation-orbit; +//@include foundation-orbit; @include foundation-responsive-embed; @include foundation-tabs; @include foundation-thumbnail; @@ -67,21 +67,31 @@ // arcHIVE styles // global project styles -@import "global/colors"; + +@import "global/wp-overrides"; //errors +@import "global/wp-admin"; //errors @import "global/typography"; +@import "global/gutenberg"; +@import "global/colors"; @import "global/branding"; +@import "global/accessibility"; // Modules @import "modules/navigation"; @import "modules/header"; -@import "modules/content"; @import "modules/footer"; +//@import "modules/editor-syle"; +@import "modules/content"; // Componentes +@import "components/links"; +@import "components/featured-image"; +@import "components/dividers"; @import "components/cards"; @import "components/buttons"; @import "components/accordion"; + // Templates //@import "templates/front"; diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss index a3a2f79..279d266 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -3,8 +3,12 @@ button,.button { } .hero { button,.button { + min-width: 20vw; + padding: $global-padding*0.3 $global-padding*2; color: $button-color-alt; + font-size: $global-font-size*1.3; border-color: $button-color-alt; + border-radius: 4rem; // margin: $global-margin*2 0; &:hover{ color: $anchor-color; diff --git a/src/assets/scss/components/_dividers.scss b/src/assets/scss/components/_dividers.scss new file mode 100644 index 0000000..098278a --- /dev/null +++ b/src/assets/scss/components/_dividers.scss @@ -0,0 +1,4 @@ +.dotted { + border-style: dashed; + margin: 2rem 0; +} diff --git a/src/assets/scss/components/_featured-image.scss b/src/assets/scss/components/_featured-image.scss new file mode 100644 index 0000000..1697431 --- /dev/null +++ b/src/assets/scss/components/_featured-image.scss @@ -0,0 +1,14 @@ +.featured-hero { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: rem-calc(100); + + @include breakpoint(medium) { + height: rem-calc(200); + } + + @include breakpoint(xlarge) { + height: rem-calc(400); + } +} diff --git a/src/assets/scss/components/_links.scss b/src/assets/scss/components/_links.scss new file mode 100644 index 0000000..86bc956 --- /dev/null +++ b/src/assets/scss/components/_links.scss @@ -0,0 +1,8 @@ +// Apply outline styles only when input method is keyboard +// remove :focus style via What Input using progressive enhancement +// so :focus isn't left broken if JavaScript fails + +[data-whatinput="mouse"] a:focus, button:focus +[data-whatinput="touch"] a:focus, button:focus { + outline: none; +} diff --git a/src/assets/scss/editor.scss b/src/assets/scss/editor.scss new file mode 100644 index 0000000..b5a0d5f --- /dev/null +++ b/src/assets/scss/editor.scss @@ -0,0 +1,86 @@ +/*! + * Gutenberg Editor Styles + */ + +/** === Includes === */ + +@charset 'utf-8'; + +@import 'settings'; +@import 'foundation'; + +@include foundation-typography; +@include foundation-button; +@include foundation-table; + + +/** === Content Width === */ +.wp-block { + width: calc(100vw - (2 * 10)); + @each $breakpoint, $size in $grid-margin-gutters { + + @include breakpoint($breakpoint) { + width: calc(100vw - ($size)); + } + + } +} + +/** === Base Typography === */ +body { + font-size: $global-font-size; + font-family: $body-font-family; + color: $body-font-color; +} + +/** === Post Title === */ +.editor-post-title__block .editor-post-title__input{ + @extend h1; +} + +/** === Button === */ +.wp-block-button { + + // add general foundation button styling to button in editor + .wp-block-button__link { + @extend .button; + } + + // add special styling for squared buttons + &.is-style-squared .wp-block-button__link { + border-radius: 0; + } + + // add outline styles + &.is-style-outline .wp-block-button__link{ + @extend .hollow; + } + + // set transparent background to block for outline button + &.is-style-outline, + &.is-style-outline:hover, + &.is-style-outline:focus, + &.is-style-outline:active { + background: transparent; + } +} + +/** === File === */ +.wp-block-file__button{ + @include button(); +} + +/** === Pullquote === */ +.wp-block-paragraph.has-background{ + padding: rem-calc(20px 30px); +} + +/** === Table === */ +.wp-block-table td{ + border: none; +} + +/** === Latest Posts grid view === */ +.wp-block-latest-posts.is-grid{ + list-style: none; +} diff --git a/src/assets/scss/global/_accessibility.scss b/src/assets/scss/global/_accessibility.scss new file mode 100644 index 0000000..27f4ecb --- /dev/null +++ b/src/assets/scss/global/_accessibility.scss @@ -0,0 +1,29 @@ +// Text meant only for screen readers. Addresses part of theme-check issue #840. +// https://github.com/Automattic/_s/blob/master/style.css +.screen-reader-text { + clip: rect(1px, 1px, 1px, 1px); + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; +} + +.screen-reader-text:focus { + background-color: #f1f1f1; + border-radius: 3px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + color: #21759b; + display: block; + font-size: 14px; + font-size: 0.875rem; + font-weight: bold; + height: auto; + left: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; // Above WP toolbar. +} diff --git a/src/assets/scss/global/_branding.scss b/src/assets/scss/global/_branding.scss index 94688c4..9f153f0 100644 --- a/src/assets/scss/global/_branding.scss +++ b/src/assets/scss/global/_branding.scss @@ -6,10 +6,23 @@ content: ''; display:inline-block; margin-top:-$global-padding; - width: 10rem; - height: $global-font-size*2; - background: url('../img/ARC-HIVE-logo.svg') no-repeat center; + width: 100%; + height: $global-padding*5; background-size: contain; - + background-repeat: no-repeat; + background-position: center; + } + &.archive{ + &::before { + max-width: 10rem; + background-image: url('../img/ARC-HIVE-logo.svg'); + } + } + &.eu{ + &::before { + max-width: 15rem; +// background-image: url('../img/eu_flag_creative_europe_co_funded_black_right.svg'); + background-image: url('../img/eu_flag_creative_europe_co_funded_left.svg'); + } } } diff --git a/src/assets/scss/global/_colors.scss b/src/assets/scss/global/_colors.scss index 312ab5f..baa304d 100644 --- a/src/assets/scss/global/_colors.scss +++ b/src/assets/scss/global/_colors.scss @@ -10,4 +10,3 @@ $mid-grey: #808080; $antracite-grey: #333333; $forest-green: #1E6041; $raspberry-purple: #54367B; - diff --git a/src/assets/scss/global/_gutenberg.scss b/src/assets/scss/global/_gutenberg.scss new file mode 100644 index 0000000..e3dd9f1 --- /dev/null +++ b/src/assets/scss/global/_gutenberg.scss @@ -0,0 +1,60 @@ +/* +Frontend styles for gutenberg blocks +*/ + +/** === Base Color Palatte === */ +@each $color, $code in $foundation-palette { + + .has-#{$color}-background-color { + background-color: $code; + } + + .has-#{$color}-color { + color: $code; + } +} + +/** === Button === */ +.wp-block-button { + + // add general foundation button styling + .wp-block-button__link { + @extend .button; + @each $color, $code in $foundation-palette { + + &.has-#{$color}-background-color { + background-color: $code; + } + + &.has-#{$color}-color { + color: $code; + } + } + } + + // add special styling for squared buttons + &.is-style-squared .wp-block-button__link { + border-radius: 0; + } + + // add outline styles + &.is-style-outline .wp-block-button__link{ + @extend .hollow; + } + + // set transparent background to block for outline button + &.is-style-outline, + &.is-style-outline:hover, + &.is-style-outline:focus, + &.is-style-outline:active { + // background: transparent; + .wp-block-button__link{ + // background: transparent; + } + } +} + +/** === File === */ +.wp-block-file .wp-block-file__button{ + @include button(); +} diff --git a/src/assets/scss/global/_typography.scss b/src/assets/scss/global/_typography.scss index 5ed7b7c..643bdd4 100644 --- a/src/assets/scss/global/_typography.scss +++ b/src/assets/scss/global/_typography.scss @@ -26,13 +26,19 @@ // not in foundation variables // ----------------------------- -h1,h2,h3,h4,h5,h6, -.h1,.h2,.h3,.h4,.h4,.h5,.h6, -button,.button, -header nav, -.hero .claim -{ - font-variant:all-small-caps; -} - - +//h1,h2,h3,h4,h5,h6, +//.h1,.h2,.h3,.h4,.h4,.h5,.h6, +//button,.button, +//header nav, +//.hero .claim +//{ +// font-variant:all-small-caps; +//} +// +// +//h1,h2,h3,h4,h5,h6, +//.h1,.h2,.h3,.h4,.h4,.h5,.h6 { +// a { +// color: $black; +// } +//} diff --git a/src/assets/scss/global/_wp-admin.scss b/src/assets/scss/global/_wp-admin.scss new file mode 100644 index 0000000..77e3da6 --- /dev/null +++ b/src/assets/scss/global/_wp-admin.scss @@ -0,0 +1,23 @@ +// Fix the issue where the WP admin-bar overlaps the mobile menu +#wpadminbar { + position: fixed !important; +} + +// Make sure that the WP admin-bar does not overlap Foundation components +body.admin-bar { + // Offset sticky top bar + &.f-topbar-fixed { + .sticky.fixed { + margin-top: rem-calc(32); + } + } + // Offset mobile off-canvas menu + &.offcanvas { + .off-canvas.is-open { + top: rem-calc(46); + @include breakpoint(small) { + top: rem-calc(32); + } + } + } +} diff --git a/src/assets/scss/global/_wp-overrides.scss b/src/assets/scss/global/_wp-overrides.scss new file mode 100644 index 0000000..74ee7bc --- /dev/null +++ b/src/assets/scss/global/_wp-overrides.scss @@ -0,0 +1,57 @@ +//.wp-caption > figcaption { +// max-width: 100%; +// font-size: 0.8rem; +// color: #999; +// padding: 0.25rem 0; +//} +// +//p.wp-caption-text{ +// font-size:90%; +// color: #666; +// padding:rem-calc(10) 0; +//} +// +//.alignleft { +// float: left; +// padding-right: 1rem; +// margin: 0; +//} +// +//.alignright { +// float: right; +// padding-left: 1rem; +// margin: 0; +//} +// +//.aligncenter { +// display: block; +// margin-left: auto; +// margin-right: auto; +//} +// +//.gallery { +// @include xy-grid; +// @include xy-gutters($negative: true); +// @for $i from 1 through 9 { +// &.gallery-columns-#{$i} { +// @include xy-grid-layout(2, '.gallery-item', true); +// } +// @include breakpoint(medium){ +// &.gallery-columns-#{$i} { +// @include xy-grid-layout(4, '.gallery-item', true, (small: 30px)); +// } +// } +// @include breakpoint(large) { +// &.gallery-columns-#{$i} { +// @include xy-grid-layout($i, '.gallery-item', true, (small: 30px)); +// } +// } +// } +// .gallery-icon > a { +// @include thumbnail; +// @include thumbnail-link; +// } +// .gallery-icon > img { +// @include thumbnail; +// } +//} diff --git a/src/assets/scss/modules/_content.scss b/src/assets/scss/modules/_content.scss index 1fdda3f..98bed50 100644 --- a/src/assets/scss/modules/_content.scss +++ b/src/assets/scss/modules/_content.scss @@ -1,18 +1,91 @@ - content { - section { + //content { + + // general styles + //---------------- + // + // mods on fonts and typography + // not in foundation variables + // ----------------------------- + + h1,h2,h3,h4,h5,h6, + .h1,.h2,.h3,.h4,.h4,.h5,.h6, + button,.button, + header nav, + + + h1,h2,h3,h4,h5,h6, + .h1,.h2,.h3,.h4,.h4,.h5,.h6 { + font-variant:all-small-caps; + a { + color: $body-font-color; + } } + .excerpt,.post-excerpt{ + a { + color: $body-font-color; + &:hover { + p { + color: $anchor-color; + } + } + } + } + + // + // main block + //-------------- + + + main { + article { + @include xy-grid; + header { + @include xy-cell(12); + .entry-title { + width: 100%; + text-align: center; + } + } + .entry-content { + @include breakpoint(small){ + @include xy-cell(12); + padding: $global-padding*2 ; + margin:0 auto; + } + @include breakpoint(medium){ + @include xy-cell(12); + padding: $global-padding*2 $global-padding*3; + max-width: 50rem; + margin:0 auto; + } + @include breakpoint(xlarge){ + @include xy-cell(12); + max-width: 50rem; + padding: $global-padding*2 $global-padding*3; + font-size: $global-font-size*1.2; + margin: 0 auto; + } + } + } + } + // // news category //-------------- - .news { + .news,.news-category { @include xy-grid; header,main,aside { - @include xy-cell(12); - @include flex; - @include flex-align(center,top); - padding: $global-padding*3 0; + @include breakpoint(small){ + padding-top: 0; + @include xy-cell(12); + @include flex; + @include flex-align(center,top); + } + @include breakpoint(small){ + padding-top: $global-padding*3; + } } main { //@include xy-cell(12); @@ -29,9 +102,45 @@ @include breakpoint(large){ @include xy-cell(4); } + figure { + @include breakpoint(small){ + @include xy-cell(12); + height: 58vw; + max-width: 100%; + overflow: hidden; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + @include breakpoint(medium){ + height: 28vw; + } + @include breakpoint(large){ + height: 20vw; + } + } + .date { + height: 1rem; + padding-top: $global-padding*2; + } + .entry-title { + padding-top: $global-padding*2; + line-height: 0.7; + font-size: $global-font-size*1.5; + } + } } aside { + @include breakpoint(small){ + padding-top:0; + padding-bottom: $global-padding*3; + } + @include breakpoint(medium){ + padding-top:$global-padding*3; + padding-bottom: 0; + + } } } // end news category @@ -72,45 +181,103 @@ } // end news category + // + // partners + // for big announcemnts + //--------------------- + +.partners { + .entry-content { + max-width: unset; + p { + padding-left: 30vw; + padding-bottom: 2rem; + margin-bottom: 2rem; + &:after { + content: ''; + display: inline-block; + border-bottom: 1px solid $body-font-color; + width: 100vw; + position: absolute; + left: 0; + padding-top: 2rem; + } + } + .alignleft { + margin: 0; + padding: 0; + } + .wp-block-image { + margin: 0; + } + } + } // // hero // for big announcemnts //--------------------- -$hero-padding: $global-padding * 3; .hero { border-top: 2px solid $primary-color; - background-color: $primary-color; .slides { @include xy-grid(); .slide { @include xy-grid; @include breakpoint(small){ - @include xy-cell(full); - color: $white; - //padding: $hero-padding; + width: 100vw; + margin: 0; + .textwidget { + padding: $global-padding * 2; + } } @include breakpoint(medium){ - @include xy-cell(auto); - @include xy-cell-gutters(0,margin); - @include flex; - @include flex-align(center,middle); - font-size: $lead-font-size; + .textwidget { + max-width: 50rem; + margin:auto; + padding: $global-padding * 2; + font-size: $global-font-size*1.3; + } } - > * { - @include xy-cell(full); - @include flex; - @include flex-align(center,bottom); + @include breakpoint(large){ + width: 50%; + height: calc((50vw*9)/16); + padding: 0; + margin: 0; + overflow:hidden; + a { + @include flex; + @include flex-align (center,middle); + } + img { + // max-width: unset !important; + height: 100% !important; + } + .textwidget { + font-size: $global-font-size*1.2; + padding: $global-padding * 2; + } + } + @include breakpoint(xlarge){ + .textwidget { + font-size: $global-font-size*1.3; + padding: $global-padding*3; + } + } + @include breakpoint(xxlarge){ + .textwidget { + font-size: $global-font-size*1.6; + padding: $global-padding*3; + } + } + &:first-child { + background-color: $primary-color; + font-variant:all-small-caps; + } + color: $white; - } - } - .slide{ - } - figure { - background-color: $white; - .logo { + .logo { @include breakpoint(medium){ max-width: 80%; } @@ -124,17 +291,21 @@ $hero-padding: $global-padding * 3; @include xy-cell(auto); @include flex; @include flex-align(spaced,middle); - min-height: 8rem; + min-height: 6rem; + padding: $global-padding 0 ; + a { + color: $body-font-color; + } + .button { + justify-content:center; } } + } //hero secondary &.secondary { border-top: none; background-color: $secondary-color; .slide{ - .claim { - color: $body-font-color; - } figure { background-color: unset; } @@ -143,5 +314,5 @@ $hero-padding: $global-padding * 3; } //end hero -} +//} // end content diff --git a/src/assets/scss/modules/_editor-style.scss b/src/assets/scss/modules/_editor-style.scss new file mode 100644 index 0000000..6a07332 --- /dev/null +++ b/src/assets/scss/modules/_editor-style.scss @@ -0,0 +1,5 @@ +body#tinymce{ + height: auto; // Fix editor style bug + max-width: $grid-row-width; // Give the editor a max-width + padding: rem-calc(20) !important; +} \ No newline at end of file diff --git a/src/assets/scss/modules/_footer.scss b/src/assets/scss/modules/_footer.scss index 8b38128..1b71e3e 100644 --- a/src/assets/scss/modules/_footer.scss +++ b/src/assets/scss/modules/_footer.scss @@ -1,42 +1,79 @@ -@include breakpoint(small) { - footer { - // @include xy-grid-container(); +footer { background-color: $secondary-color; - //.h1,.h2,.h3,.h4,.h5,.h6 { - //font-variant:all-small-caps; - //} a { color: $body-font-color; &:hover { color: $primary-color; } } - p { + h1,h2,h3,h4,h5,h6, + .h1,.h2,.h3,.h4,.h5,.h6, + p,ul,ol,li { margin: 0; } ul,ol { list-style: none; - padding: 0; - margin: 0; + li { + float:left; + padding-right: $global-padding; + } } - li { - float:left; - padding-right: $global-padding; + .clear.clearfix { + width: 100%; } .logo { } + .site-brand,.brand-logo { + &.archive{ + &::before { + margin-top:unset; + } + } + &.eu { + &::before { + margin-top:unset; + max-width:100%; + max-height: 4rem; + } + } + } + .copyright, .legal-credits { + font-size: $global-font-size*0.8; + } .subsection { - @include xy-grid; - @include flex; - @include flex-align(left,bottom); - border-top: 1px solid black; - padding: $global-padding 0; - aside { - @include xy-cell(3); + @include breakpoint(small) { + @include xy-grid; + @include flex; + @include flex-align(left,bottom); + border-top: 1px solid black; + padding: $global-padding; + font-size: $global-font-size * 0.8; + &:first-child { + //padding-top: $global-padding*3; + } + .co-founded { + text-align:right; + } + } + @include breakpoint(medium) { + font-size: $global-font-size; + } + aside { + @include breakpoint(small) { + @include xy-cell(12); + } + @include breakpoint(medium) { + @include xy-cell(3); + } &.double { - @include xy-cell(6); + @include breakpoint(small) { + @include xy-cell(12); + } + @include breakpoint(medium) { + @include xy-cell(6); + } } } } } -} + diff --git a/src/assets/scss/modules/_header.scss b/src/assets/scss/modules/_header.scss index 40d0939..9d961d5 100644 --- a/src/assets/scss/modules/_header.scss +++ b/src/assets/scss/modules/_header.scss @@ -1,22 +1,48 @@ + header { @include xy-grid(); @include xy-gutters(0); main { - @include xy-cell(shrink); - @include flex-align(left, middle); - padding: $global-padding*2; + @include breakpoint(small){ + @include xy-cell(12); + @include flex-align(center, middle); + padding: $global-padding*2 $global-padding; + min-width: 14rem; + text-align: center; + } + @include breakpoint(medium){ + @include xy-cell(shrink); + @include flex-align(left, middle); + text-align: unset; + } } nav { - @include xy-cell(auto); - @include flex; - @include flex-align(right, middle); - a, button { - color: $black; - &:hover { - color: $anchor-color; + @include breakpoint(small){ + @include xy-cell(12); + @include flex; + @include flex-align(center, middle); + a, button { + color: $black; + &:hover { + color: $anchor-color; + } + } + menu { + margin: 0; + padding: 0; + font-size: 0.8rem; + } + } + @include breakpoint(medium){ + @include xy-cell(auto); + @include flex; + @include flex-align(right, middle); + menu { + margin: inherit; + padding: inherit; + font-size: $global-font-size*1.5; } } } } -@include breakpoint(small){ -} + diff --git a/src/assets/scss/templates/_front.scss b/src/assets/scss/templates/_front.scss new file mode 100644 index 0000000..f9316c9 --- /dev/null +++ b/src/assets/scss/templates/_front.scss @@ -0,0 +1,201 @@ +// Page header +.front-hero { + .marketing { + @include xy-grid-container(55rem); + @include xy-grid; + } + + @include breakpoint(small) { + background: url('../images/demo/hero-bg-foundation-6-small.svg') bottom center; + background-size: cover; + background-position: bottom; + padding: rem-calc(65%) 0; + margin: 0 0 rem-calc(32); + height: auto; + position: relative; + text-align: left; + } + + @include breakpoint(medium) { + background: url('../images/demo/hero-bg-foundation-6-large.svg') bottom center; + background-size: cover; + background-position: center; + height: rem-calc(685); + margin: 0 0 rem-calc(72); + } + + .watch { + @include breakpoint(small) { + @include xy-cell(7); + } + + @include breakpoint(medium) { + @include xy-cell(12); + } + + a { + color: #B4C9D1; + cursor: pointer; + font-weight: 400; + margin-right: rem-calc(20); + } + + a:hover { + color: #fff; + } + + #stargazers { + :before { + content: "\f09b"; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + color: #B4C9D1; + margin-right: rem-calc(8); + } + } + + #twitter { + :before { + content: "\f099"; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + color: #B4C9D1; + margin-right: rem-calc(8); + } + } + + } + + .tagline { + @include breakpoint(small) { + @include xy-cell(8); + } + + @include breakpoint(medium) { + @include xy-cell(5); + padding-top: 6rem; + } + } + + h1 { + color: #fff; + font-weight: 500; + + @include breakpoint(small) { + font-size: 2.2rem; + } + + @include breakpoint(medium) { + font-size: 2.875rem; + } + } + + h4 { + color: #fefefe; + font-weight: 300; + font-size: 1.3125rem; + } + + .download { + margin-top: rem-calc(20); + } +} + +// Intro +.intro { + @include xy-grid-container; + @include xy-grid; + + .fp-intro { + @include breakpoint(small) { + @include xy-cell(12); + } + + @include breakpoint(medium) { + @include xy-cell(10); + @include xy-cell-offset(1); + + h2 { + font-weight: 300; + margin-bottom: 1.5rem; + } + + h4 { + font-size: 1.125rem; + line-height: 1.6; + color: #777; + margin-bottom: 2rem; + } + } + } +} + +// Section divider +.section-divider { + @include xy-grid-container; + @include xy-grid; + + hr { + @include xy-cell(12); + @extend .dotted; + box-sizing: border-box; + } +} + +// Benefits +.benefits { + @include xy-grid-container; + @include xy-grid; + text-align: center; + + header { + @include xy-cell(12); + + h2 { + font-weight: 300; + } + + h4 { + font-size: 1.125rem; + line-height: 1.6; + color: #777; + } + } + + .semantic, + .responsive, + .customizable, + .professional { + @include breakpoint(small) { + @include xy-cell(12); + } + + @include breakpoint(medium) { + @include xy-cell(3); + } + + img { + padding: 1.25rem; + margin: 1rem auto 0 auto; + } + + h3 { + color: #0a0a0a; + font-weight: 300; + font-size: 1.75rem; + } + + p { + font-size: 0.9375rem; + } + } + + .why-foundation { + @include xy-cell(12); + margin-top: 4rem; + } +} diff --git a/src/assets/scss/templates/_kitchen-sink.scss b/src/assets/scss/templates/_kitchen-sink.scss new file mode 100644 index 0000000..ae8880e --- /dev/null +++ b/src/assets/scss/templates/_kitchen-sink.scss @@ -0,0 +1,84 @@ +.kitchen-sink-header { + @include xy-cell(12); +} + + +.kitchen-sink-components { + hr { + margin: 3rem 0; + } + + @include breakpoint(small) { + @include xy-cell(12); + } + + @include breakpoint(large) { + @include xy-cell(9); + } +} + +.kitchen-sink-nav { + @include breakpoint(small) { + display: none; + } + + @include breakpoint(large) { + @include xy-cell(3); + display: block; + float: right; + + .docs-sub-menu { + font-size: 0.85rem; + margin-top: 1rem; + } + + .docs-menu-title { + text-transform: uppercase; + font-size: 0.75rem; + color: $dark-gray; + font-weight: bold; + line-height: 1; + padding-left: 0.9rem; + margin-bottom: 0.5rem; + border-top: 1px solid $medium-gray; + margin-top: 1rem; + padding-top: 1.5rem; + } + + .docs-toc { + width: 100%; + padding-left: 4rem; + padding-right: 1rem; + } + + .docs-toc .active { + background: #2199e8; + color: white; + } + + .docs-toc .docs-sub-menu:first-child .docs-menu-title { + margin-top: 0; + border-top: 0; + padding-top: 0; + } + } +} + +.kitchen-sink-grid { + .grid-x { + background: #d6ecfa; + font-size: 12px; + line-height: 2rem; + margin-bottom: 1.5rem; + + .cell,:nth-child(odd) { + background: #7bc1ef; + color: #0a0a0a; + } + + .cell:nth-child(even) { + background: #1779ba; + color: #fefefe; + } + } +}