From 7338b3c4214db89de7505e048729d09da7701da1 Mon Sep 17 00:00:00 2001 From: Nienke Date: Thu, 23 Jun 2016 14:41:02 +0200 Subject: [PATCH] Clean up SCSS more --- public/css/forms.css | 1 - public/css/forms.css.map | 2 +- public/css/forms.sass | 1 - public/css/main.css | 122 +++++++++++++++----------- public/css/main.css.map | 4 +- public/css/main.scss | 158 ++++++++-------------------------- public/css/responsive.css | 3 + public/css/responsive.css.map | 7 ++ public/css/responsive.scss | 7 ++ public/css/typography.css | 30 ++++--- public/css/typography.css.map | 4 +- public/css/typography.scss | 112 ++++++++++++++++++++++-- public/panel.scss | 6 ++ 13 files changed, 258 insertions(+), 199 deletions(-) create mode 100644 public/css/responsive.css create mode 100644 public/css/responsive.css.map create mode 100644 public/css/responsive.scss create mode 100644 public/panel.scss diff --git a/public/css/forms.css b/public/css/forms.css index fbed3a8..c3334ea 100644 --- a/public/css/forms.css +++ b/public/css/forms.css @@ -16,7 +16,6 @@ button { padding: 16px 32px; text-decoration: none; margin: 4px 2px; - cursor: pointer; font-size: 1.5em; font-family: "Montserrat"; } diff --git a/public/css/forms.css.map b/public/css/forms.css.map index b6c249f..b017a18 100644 --- a/public/css/forms.css.map +++ b/public/css/forms.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,KAAK;EACH,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,GAAG;EAClB,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,YAAY;;AAE3B,WAAW;EACT,MAAM,EAAE,cAAc;;AAExB,MAAM;EACJ,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,OAAO;EACf,MAAM,EAAE,OAAO;EACf,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,YAAY", +"mappings": "AAAA,KAAK;EACH,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,GAAG;EAClB,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,YAAY;;AAE3B,WAAW;EACT,MAAM,EAAE,cAAc;;AAExB,MAAM;EACJ,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,OAAO;EACf,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,YAAY", "sources": ["forms.sass"], "names": [], "file": "forms.css" diff --git a/public/css/forms.sass b/public/css/forms.sass index 684593d..3087ac2 100644 --- a/public/css/forms.sass +++ b/public/css/forms.sass @@ -16,6 +16,5 @@ button padding: 16px 32px text-decoration: none margin: 4px 2px - cursor: pointer font-size: 1.5em font-family: 'Montserrat' diff --git a/public/css/main.css b/public/css/main.css index a3da99c..ed4d0cc 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -1,6 +1,11 @@ +/* The main style sheet, containing all base elements. + ========================================================================== */ +/** + * 1. Import partials and Google fonts. + * 2. Set up the first layer of flexbox. + */ @import url(normalize.css); @import url(flaticon.css); -@import url(tables.css); @import url(https://fonts.googleapis.com/css?family=Karla|Montserrat|Inconsolata|Rubik); ul.topnav { list-style-type: none; @@ -46,32 +51,13 @@ button { padding: 16px 32px; text-decoration: none; margin: 4px 2px; - cursor: pointer; font-size: 1.5em; font-family: "Montserrat"; } body { - background-color: #7aa2cb; font-family: 'Karla', sans-serif; font-size: 100%; } -.flexcontainer { - display: flex; - flex-direction: column; } - -.flexpage, .intro-page, .info-page, .footer-page, .login-page, .panel-page { - display: flex; - justify-content: center; - align-items: center; } - -.intro-page { - background: linear-gradient(#070a15, #252b46); - height: 100vh; - flex-direction: column; } - @media (max-width: 1200px) { - .intro-page { - height: 100%; } } - .intro-page-logo { font-family: 'Montserrat', serif; font-size: 12em; @@ -97,15 +83,6 @@ body { .fa-angle-double-down { color: #424769; } -.info-page { - background: linear-gradient(#F1D4AF, #eee9d9); - flex-direction: row; - min-height: 80vh; } - @media (max-width: 1200px) { - .info-page { - flex-direction: column; - height: 100%; } } - .info-page h1 { font-family: 'Rubik'; color: #dab199; @@ -120,8 +97,7 @@ body { .info-page-item { font-size: 1em; line-height: 1.6em; - color: #8b6d5c; - margin: 50px; } + color: #8b6d5c; } [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { @@ -132,15 +108,6 @@ body { [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-size: 5em; } } -.footer-page { - flex: 1; - background-color: #e2f2f0; - flex-direction: column; - min-height: 20vh; } - @media (max-width: 1200px) { - .footer-page { - height: 100%; } } - .footer-page a { color: black; } @@ -160,11 +127,6 @@ body { font-size: 1em; margin: 20px; } } -.login-page { - background: linear-gradient(#070a15, #252b46); - flex-direction: column; - padding: 40px; } - .login-page-logo { font-family: 'Montserrat', serif; font-size: 6em; @@ -172,9 +134,73 @@ body { color: #E08E79; text-shadow: 0px 0px 0px #e9bd84, 1px 1px 0px #e9bd84, 2px 2px 0px #e9bd84, 3px 3px 0px #e9bd84, 4px 4px 0px #e9bd84, 5px 5px 0px #e9bd84, 6px 6px 0px #e9bd84, 7px 7px 0px #e9bd84, 8px 8px 0px #e9bd84, 9px 9px 0px #e9bd84, 10px 10px 0px #e9bd84; } +body { + background-color: #7aa2cb; } + +.flexcontainer { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; } + +.flexpage, .intro-page, .info-page, .footer-page, .login-page { + display: flex; + display: -webkit-flex; + justify-content: center; + align-items: center; } + +/** + * 1. First section of the main page, containing the logo, login/registration buttons, and a down arrow. + */ +.intro-page { + background: linear-gradient(#070a15, #252b46); + height: 100vh; + flex-direction: column; + -webkit-flex-direction: column; } + @media (max-width: 1200px) { + .intro-page { + min-height: 100vh; } } + +/** + * 1. Second section of the main page, containing the three descriptive column and flaticons (http://www.flaticon.com/authors/madebyoliver). + */ +.info-page { + background: linear-gradient(#F1D4AF, #eee9d9); + flex-direction: row; + -webkit-flex-direction: row; + min-height: 80vh; } + @media (max-width: 1200px) { + .info-page { + flex-direction: column; + -webkit-flex-direction: column; + min-height: 80vh; } } + +.info-page-item { + margin: 50px; } + +/** + * 1. Third section of the main page, containing the link to the Github page. + */ +.footer-page { + flex: 1; + background-color: #e2f2f0; + flex-direction: column; + -webkit-flex-direction: column; + min-height: 20vh; } + @media (max-width: 1200px) { + .footer-page { + height: 100%; } } + +/** + * 1. Login and register pages. + */ +.login-page { + background: linear-gradient(#070a15, #252b46); + flex-direction: column; + -webkit-flex-direction: column; } + .login-page-form { background-color: #fff; - padding: 100px; box-sizing: border-box; border-radius: 5px; border-top: 0; @@ -182,8 +208,4 @@ body { border-right: 3px solid #d2d5e7; border-left: 0; } -.panel-page { - background: linear-gradient(#F1D4AF, #eee9d9); - flex-direction: column; } - /*# sourceMappingURL=main.css.map */ diff --git a/public/css/main.css.map b/public/css/main.css.map index 7f05f6e..5858aa8 100644 --- a/public/css/main.css.map +++ b/public/css/main.css.map @@ -1,7 +1,7 @@ { "version": 3, -"mappings": "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", -"sources": ["main.scss","navigation.sass","forms.sass"], +"mappings": "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", +"sources": ["main.scss","navigation.sass","forms.sass","typography.scss","responsive.scss"], "names": [], "file": "main.css" } \ No newline at end of file diff --git a/public/css/main.scss b/public/css/main.scss index ee9a780..2b17488 100644 --- a/public/css/main.scss +++ b/public/css/main.scss @@ -1,182 +1,103 @@ -// imports +/* The main style sheet, containing all base elements. + ========================================================================== */ + +/** + * 1. Import partials and Google fonts. + * 2. Set up the first layer of flexbox. + */ + @import "normalize.css"; +@import "responsive"; @import "flaticon.css"; -@import "navigation.sass"; -@import "forms.sass"; -@import "tables.css"; +@import "navigation"; +@import "forms"; +@import "typography"; +//@import "panel.scss"; @import url(https://fonts.googleapis.com/css?family=Karla|Montserrat|Inconsolata|Rubik); -// base, mixins, extensions body { background-color: #7aa2cb; - font-family: 'Karla', sans-serif; - font-size:100%; } .flexcontainer { + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; } .flexpage { display: flex; + display: -webkit-flex; justify-content: center; align-items: center; } -@mixin long-shadow-text ($distance, $blur, $color) { - $shadows: null; - $color: darken($color, 10); - $blur: $blur + px; - @for$i from 0 through $distance { - $dist: $i + px; - $shadows: append($shadows, ($dist $dist $blur $color), comma); - } - text-shadow: $shadows; -} +/** + * 1. First section of the main page, containing the logo, login/registration buttons, and a down arrow. + */ -$break-small: 1200px; - -@mixin break-small { - @media (max-width: #{$break-small}) { - @content; - } -} - -// first section with logo and navigation .intro-page { @extend .flexpage; background: linear-gradient(#070a15, #252b46); height: 100vh; flex-direction: column; + -webkit-flex-direction: column; @include break-small { - height: 100%; // remove the 100 VH on mobile devices to prevent unneccessary scrolling + min-height: 100vh; } } -.intro-page-logo { - font-family: 'Montserrat', serif; - font-size: 12em; - text-transform: uppercase; - color: #E08E79; - @include long-shadow-text(30, 0, #F1D4AF); - @include break-small { - font-size: 3.5em; - padding: 20px; - @include long-shadow-text(20, 0, #F1D4AF); - } -} +/** + * 1. Second section of the main page, containing the three descriptive column and flaticons (http://www.flaticon.com/authors/madebyoliver). + */ -.intro-page-welcome-text { - font-family: 'Inconsolata', serif; - font-size: 2em; - text-transform: uppercase; - color: #fff; - @include break-small { - font-size: 1em; - padding-top: 10px; - } -} - -.fa-angle-double-down { - color: #424769; -} - -// second section containing information columns .info-page { @extend .flexpage; background: linear-gradient(#F1D4AF, #eee9d9); flex-direction: row; + -webkit-flex-direction: row; min-height: 80vh; @include break-small { flex-direction: column; - height: 100%; - } -} - -.info-page h1 { - font-family: 'Rubik'; - color: #dab199; - text-align: center; - font-size: 2em; - text-transform: uppercase; - line-height: 2em; - @include break-small { - line-height: 1em; + -webkit-flex-direction: column; + min-height: 80vh; } } .info-page-item { - font-size: 1em; - line-height: 1.6em; - color: #8b6d5c; margin: 50px; } -[class^="flaticon-"]:before, [class*=" flaticon-"]:before, -[class^="flaticon-"]:after, [class*=" flaticon-"]:after { - font-size: 10em; - color: #fff; - @include break-small { - font-size: 5em; - } -} +/** + * 1. Third section of the main page, containing the link to the Github page. + */ -// third section containing the footer -.footer-page { + .footer-page { @extend .flexpage; flex: 1; background-color: #e2f2f0; flex-direction: column; + -webkit-flex-direction: column; min-height: 20vh; @include break-small { height: 100%; } } -.footer-page a { - color: black -} +/** + * 1. Login and register pages. + */ -.footer-page-title { - font-family: 'Inconsolata'; - color: #E08E79; - font-weight: lighter; - text-transform: lowercase; -} - -.footer-page h1 { - @extend .footer-page-title; - font-size: 1.5em; -} - -.footer-page h2 { - @extend .footer-page-title; - font-size: 1.2em; - @include break-small { - font-size: 1em; - margin: 20px; - } -} - -// login and register pages. forms make-up can be found in forms.sass. .login-page { @extend .flexpage; background: linear-gradient(#070a15, #252b46); flex-direction: column; - padding: 40px; + -webkit-flex-direction: column; } -.login-page-logo { - font-family: 'Montserrat', serif; - font-size: 6em; - text-transform: uppercase; - color: #E08E79; - @include long-shadow-text(10, 0, #F1D4AF);} - .login-page-form { background-color: #fff; - padding: 100px; box-sizing: border-box; border-radius: 5px; border-top: 0; @@ -184,10 +105,3 @@ $break-small: 1200px; border-right: 3px solid #d2d5e7; border-left: 0; } - -// panel page -.panel-page { - @extend .flexpage; - background: linear-gradient(#F1D4AF, #eee9d9); - flex-direction: column; -} diff --git a/public/css/responsive.css b/public/css/responsive.css new file mode 100644 index 0000000..0af2633 --- /dev/null +++ b/public/css/responsive.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=responsive.css.map */ diff --git a/public/css/responsive.css.map b/public/css/responsive.css.map new file mode 100644 index 0000000..2eb0fcd --- /dev/null +++ b/public/css/responsive.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "", +"sources": [], +"names": [], +"file": "responsive.css" +} \ No newline at end of file diff --git a/public/css/responsive.scss b/public/css/responsive.scss new file mode 100644 index 0000000..b63ce8f --- /dev/null +++ b/public/css/responsive.scss @@ -0,0 +1,7 @@ +$break-small: 1200px; + +@mixin break-small { + @media (max-width: #{$break-small}) { + @content; + } +} diff --git a/public/css/typography.css b/public/css/typography.css index 8b0be7a..4528baa 100644 --- a/public/css/typography.css +++ b/public/css/typography.css @@ -1,19 +1,23 @@ /* -Error: Undefined mixin 'long-shadow-text'. - on line 7 of css/typography.scss, in `long-shadow-text' - from line 7 of css/typography.scss +Error: Undefined mixin 'break-small'. + on line 25 of css/typography.scss, in `break-small' + from line 25 of css/typography.scss -2: align-self: center; -3: font-family: 'Bree Serif', serif; -4: font-size: 6em; -5: line-height: 0.8em; -6: color: #f0f0f0; -7: @include long-shadow-text(500, 0, #e0e0e0); -8: } +20: font-family: 'Montserrat', serif; +21: font-size: 12em; +22: text-transform: uppercase; +23: color: #E08E79; +24: @include long-shadow-text(30, 0, #F1D4AF); +25: @include break-small { +26: font-size: 3.5em; +27: padding: 20px; +28: @include long-shadow-text(20, 0, #F1D4AF); +29: } +30: } Backtrace: -css/typography.scss:7:in `long-shadow-text' -css/typography.scss:7 +css/typography.scss:25:in `break-small' +css/typography.scss:25 /Users/nienke/.rvm/gems/ruby-2.2.1/gems/sass-3.4.22/lib/sass/tree/visitors/perform.rb:351:in `block in visit_mixin' /Users/nienke/.rvm/gems/ruby-2.2.1/gems/sass-3.4.22/lib/sass/stack.rb:98:in `block in with_mixin' /Users/nienke/.rvm/gems/ruby-2.2.1/gems/sass-3.4.22/lib/sass/stack.rb:115:in `with_frame' @@ -68,4 +72,4 @@ css/typography.scss:7 body:before { white-space: pre; font-family: monospace; - content: "Error: Undefined mixin 'long-shadow-text'.\A on line 7 of css/typography.scss, in `long-shadow-text'\A from line 7 of css/typography.scss\A \A 2: align-self: center;\A 3: font-family: 'Bree Serif', serif;\A 4: font-size: 6em;\A 5: line-height: 0.8em;\A 6: color: #f0f0f0;\A 7: @include long-shadow-text(500, 0, #e0e0e0);\A 8: }"; } + content: "Error: Undefined mixin 'break-small'.\A on line 25 of css/typography.scss, in `break-small'\A from line 25 of css/typography.scss\A \A 20: font-family: 'Montserrat', serif;\A 21: font-size: 12em;\A 22: text-transform: uppercase;\A 23: color: #E08E79;\A 24: @include long-shadow-text(30, 0, #F1D4AF);\A 25: @include break-small {\A 26: font-size: 3.5em;\A 27: padding: 20px;\A 28: @include long-shadow-text(20, 0, #F1D4AF);\A 29: }\A 30: }"; } diff --git a/public/css/typography.css.map b/public/css/typography.css.map index aeb7281..4243e0f 100644 --- a/public/css/typography.css.map +++ b/public/css/typography.css.map @@ -1,7 +1,7 @@ { "version": 3, -"mappings": "", -"sources": [], +"mappings": "AASA,IAAK;EACH,WAAW,EAAE,mBAAmB;EAChC,SAAS,EAAC,IAAI;;AAehB,gBAAiB;EACf,WAAW,EAAE,mBAAmB;EAChC,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,OAAO;EARd,WAAW,EAFC,mrBAAmD;EAjB/D,0BAAoC;IAuBtC,gBAAiB;MAOd,SAAS,EAAE,KAAK;MAChB,OAAO,EAAE,IAAI;MAZd,WAAW,EAFC,6cAAmD;;AAmBjE,wBAAyB;EACvB,WAAW,EAAE,oBAAoB;EACjC,SAAS,EAAE,GAAG;EACd,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,IAAI;EAxCX,0BAAoC;IAoCtC,wBAAyB;MAMtB,SAAS,EAAE,GAAG;MACd,WAAW,EAAE,IAAI;;AAIpB,qBAAsB;EACpB,KAAK,EAAE,OAAO;;AAGhB,aAAc;EACZ,WAAW,EAAE,OAAO;EACpB,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,GAAG;EACd,cAAc,EAAE,SAAS;EACzB,WAAW,EAAE,GAAG;EAzDhB,0BAAoC;IAmDtC,aAAc;MAQX,WAAW,EAAE,GAAG;;AAGnB,eAAgB;EACd,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,KAAK;EAClB,KAAK,EAAE,OAAO", +"sources": ["typography.scss"], "names": [], "file": "typography.css" } \ No newline at end of file diff --git a/public/css/typography.scss b/public/css/typography.scss index 0710648..4bf105c 100644 --- a/public/css/typography.scss +++ b/public/css/typography.scss @@ -1,8 +1,106 @@ -.long-shadow { - align-self: center; - font-family: 'Bree Serif', serif; - font-size: 6em; - line-height: 0.8em; - color: #f0f0f0; - @include long-shadow-text(500, 0, #e0e0e0); +// main +body { + font-family: 'Karla', sans-serif; + font-size:100%; } + +@mixin long-shadow-text ($distance, $blur, $color) { + $shadows: null; + $color: darken($color, 10); + $blur: $blur + px; + @for$i from 0 through $distance { + $dist: $i + px; + $shadows: append($shadows, ($dist $dist $blur $color), comma); + } + text-shadow: $shadows; +} + +// first section with logo and navigation +.intro-page-logo { + font-family: 'Montserrat', serif; + font-size: 12em; + text-transform: uppercase; + color: #E08E79; + @include long-shadow-text(30, 0, #F1D4AF); + @include break-small { + font-size: 3.5em; + padding: 20px; + @include long-shadow-text(20, 0, #F1D4AF); + } +} + +.intro-page-welcome-text { + font-family: 'Inconsolata', serif; + font-size: 2em; + text-transform: uppercase; + color: #fff; + @include break-small { + font-size: 1em; + padding-top: 10px; + } +} + +.fa-angle-double-down { + color: #424769; +} + +// second section containing information columns +.info-page h1 { + font-family: 'Rubik'; + color: #dab199; + text-align: center; + font-size: 2em; + text-transform: uppercase; + line-height: 2em; + @include break-small { + line-height: 1em; + } +} +.info-page-item { + font-size: 1em; + line-height: 1.6em; + color: #8b6d5c; +} + +[class^="flaticon-"]:before, [class*=" flaticon-"]:before, +[class^="flaticon-"]:after, [class*=" flaticon-"]:after { + font-size: 10em; + color: #fff; + @include break-small { + font-size: 5em; + } +} + +// third section containing the footer +.footer-page a { + color: black +} + +.footer-page-title { + font-family: 'Inconsolata'; + color: #E08E79; + font-weight: lighter; + text-transform: lowercase; +} + +.footer-page h1 { + @extend .footer-page-title; + font-size: 1.5em; +} + +.footer-page h2 { + @extend .footer-page-title; + font-size: 1.2em; + @include break-small { + font-size: 1em; + margin: 20px; + } +} + +// login and register pages. forms make-up can be found in forms.sass. +.login-page-logo { + font-family: 'Montserrat', serif; + font-size: 6em; + text-transform: uppercase; + color: #E08E79; + @include long-shadow-text(10, 0, #F1D4AF);} diff --git a/public/panel.scss b/public/panel.scss new file mode 100644 index 0000000..5e65f05 --- /dev/null +++ b/public/panel.scss @@ -0,0 +1,6 @@ +.panel-page { + @extend .flexpage; + background: linear-gradient(#F1D4AF, #eee9d9); + flex-direction: column; + -webkit-flex-direction: column; +}