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;
+ }
+ }
+}