diff --git a/src/assets/fonts/WorkSans-Medium.woff b/src/assets/fonts/WorkSans-Medium.woff new file mode 100755 index 0000000..79150e3 Binary files /dev/null and b/src/assets/fonts/WorkSans-Medium.woff differ diff --git a/src/assets/fonts/WorkSans-MediumItalic.woff b/src/assets/fonts/WorkSans-MediumItalic.woff new file mode 100755 index 0000000..5bad0ca Binary files /dev/null and b/src/assets/fonts/WorkSans-MediumItalic.woff differ diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss index 7d322ed..78944a6 100644 --- a/src/assets/scss/_settings.scss +++ b/src/assets/scss/_settings.scss @@ -65,19 +65,9 @@ // 0. arcHIVE specific styles // --------- - -$stone-grey: #CCCCCC; -$acid-green: #69E344; -$bubblegum-pink: #F096F9; -$desert-red: #D75930; -$mustard-yellow: #F5C042; -$beach-blue: #5CC8D1; -$hyperlink-blue: #0000DD; -$bloody-red: #D32D1F; -$mid-grey: #808080; -$antracite-grey: #333333; -$forest-green: #1E6041; -$raspberry-purple: #54367B; +// global project styles +@import "global/colors"; +@import "global/typography"; // 1. Global // --------- @@ -88,7 +78,7 @@ $global-lineheight: 1.5; $foundation-palette: ( primary: $hyperlink-blue, - secondary: #E94E1B, + secondary: $desert-red, success: $acid-green, warning: $bloody-red, alert: $bloody-red, @@ -100,7 +90,7 @@ $black: #0a0a0a; $white: #fefefe; $body-background: $white; $body-font-color: $black; -$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; +$body-font-family: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; $body-antialiased: true; $global-margin: 1rem; $global-padding: 1rem; @@ -184,7 +174,7 @@ $header-styles: ( ); $header-text-rendering: optimizeLegibility; $small-font-size: 80%; -$header-small-font-color: $medium-gray; +$header-small-font-color: $dark-gray; $paragraph-lineheight: 1.6; $paragraph-margin-bottom: 1rem; $paragraph-text-rendering: optimizeLegibility; diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss index 7b2525e..754c8ad 100644 --- a/src/assets/scss/app.scss +++ b/src/assets/scss/app.scss @@ -1,5 +1,6 @@ @charset 'utf-8'; +// foundation styles @import 'settings'; @import 'foundation'; @import 'motion-ui'; @@ -62,3 +63,33 @@ // Motion UI @include motion-ui-transitions; @include motion-ui-animations; + +// arcHIVE styles + +// global project styles +@import "global/colors"; +@import "global/typography"; + +// Modules +@import "modules/navigation"; +@import "modules/header"; +@import "modules/hero"; +@import "modules/content"; +@import "modules/footer"; + +// Componentes +//@import "components/buttons"; + +// Templates +//@import "templates/front"; + +// Vendors +// +// fontawesome as shown here: +// https://stackoverflow.com/questions/49195144/add-font-awesome-to-gulp-project-correctly#51491927 +//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome"; +//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands"; +//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular"; +//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid"; +//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims"; + diff --git a/src/assets/scss/global/_colors.scss b/src/assets/scss/global/_colors.scss new file mode 100644 index 0000000..312ab5f --- /dev/null +++ b/src/assets/scss/global/_colors.scss @@ -0,0 +1,13 @@ +$stone-grey: #CCCCCC; +$acid-green: #69E344; +$bubblegum-pink: #F096F9; +$desert-red: #D75930; +$mustard-yellow: #F5C042; +$beach-blue: #5CC8D1; +$hyperlink-blue: #0000DD; +$bloody-red: #D32D1F; +$mid-grey: #808080; +$antracite-grey: #333333; +$forest-green: #1E6041; +$raspberry-purple: #54367B; + diff --git a/src/assets/scss/global/_typography.scss b/src/assets/scss/global/_typography.scss index e69de29..1fecaf1 100644 --- a/src/assets/scss/global/_typography.scss +++ b/src/assets/scss/global/_typography.scss @@ -0,0 +1,21 @@ +@font-face { + font-family: 'worksans-medium'; + src: url('../fonts/WorkSans-Medium.woff') format('woff'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'worksans-mediumitalic'; + src: url('../fonts/WorkSans-MediumItalic.woff') format('woff'); + font-weight: normal; + font-style: italic; +} + +@mixin font-worksans-medium { + font-face: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-weight: normal; +} +@mixin font-worksans-mediumitalic { + font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-weight: normal; +} diff --git a/src/assets/scss/modules/_content.scss b/src/assets/scss/modules/_content.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/scss/modules/_footer.scss b/src/assets/scss/modules/_footer.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/scss/modules/_header.scss b/src/assets/scss/modules/_header.scss new file mode 100644 index 0000000..d553a93 --- /dev/null +++ b/src/assets/scss/modules/_header.scss @@ -0,0 +1,14 @@ +@include breakpoint(small){ + header { + min-height: 6rem; + .logo { + max-width: 10rem; + } + slide { + min-height: 10rem; + content { + background-color: $primary-color; + } + } + } +} diff --git a/src/assets/scss/modules/_hero.scss b/src/assets/scss/modules/_hero.scss new file mode 100644 index 0000000..6fa139f --- /dev/null +++ b/src/assets/scss/modules/_hero.scss @@ -0,0 +1,18 @@ +@include breakpoint(small){ + hero { + background-color: $secondary-color ; + slide { + min-height: 20vh; + content { + background-color: $primary-color; + color: $white; + } + figure { + background-color: $white; + } + } + aside { + min-height:5vh; + } + } +} diff --git a/src/assets/scss/modules/_navigation.scss b/src/assets/scss/modules/_navigation.scss new file mode 100644 index 0000000..a36cf4a --- /dev/null +++ b/src/assets/scss/modules/_navigation.scss @@ -0,0 +1 @@ +// navigation scss diff --git a/src/layouts/default.html b/src/layouts/default.html index b3a968f..e204281 100644 --- a/src/layouts/default.html +++ b/src/layouts/default.html @@ -13,47 +13,54 @@ {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}} -
- + {{> header}} -
-
-
- -

arcHIVE

- - -
-
- - -
+
+
+ +

arcHIVE

+ + +
+ + + +
{{> hero}} - -
-

big old hero

-
+ +
+ + +

big old hero

+ +
+ +
+ +
+ - - {{> body}} -
- {{> footer}} -