From a5afdc64003005a67cc99334376291eae72c39e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Thu, 24 Oct 2013 14:59:49 +0200 Subject: [PATCH] style: create layout - intermediate stage --- Resources/assets/gumpy/config.rb | 2 +- Resources/assets/gumpy/sass/_custom.scss | 15 ++++++ Resources/assets/gumpy/sass/_fonts.scss | 2 +- Resources/assets/gumpy/sass/_nav.scss | 6 +++ Resources/assets/gumpy/sass/chillmain.scss | 3 ++ .../assets/gumpy/sass/var/_settings.scss | 2 +- Resources/public/css/chillmain.css | 1 + .../{assets/gumpy => public}/css/gumby.css | 25 +++++---- Resources/public/fonts/icons/entypo.eot | Bin 0 -> 76038 bytes Resources/public/fonts/icons/entypo.ttf | Bin 0 -> 75800 bytes Resources/public/fonts/icons/entypo.woff | Bin 0 -> 45152 bytes Resources/views/layout.html.twig | 50 ++++++++++++++++-- 12 files changed, 89 insertions(+), 17 deletions(-) create mode 100644 Resources/assets/gumpy/sass/_nav.scss create mode 100644 Resources/assets/gumpy/sass/chillmain.scss create mode 100644 Resources/public/css/chillmain.css rename Resources/{assets/gumpy => public}/css/gumby.css (98%) create mode 100644 Resources/public/fonts/icons/entypo.eot create mode 100644 Resources/public/fonts/icons/entypo.ttf create mode 100644 Resources/public/fonts/icons/entypo.woff diff --git a/Resources/assets/gumpy/config.rb b/Resources/assets/gumpy/config.rb index b8168265a..19bc569b3 100644 --- a/Resources/assets/gumpy/config.rb +++ b/Resources/assets/gumpy/config.rb @@ -12,7 +12,7 @@ Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{exten # Set this to the root of your project when deployed: http_path = "/" -css_dir = "css" +css_dir = "./../../public/css" sass_dir = "sass" images_dir = "img" diff --git a/Resources/assets/gumpy/sass/_custom.scss b/Resources/assets/gumpy/sass/_custom.scss index 9548b6c60..eacc24b55 100644 --- a/Resources/assets/gumpy/sass/_custom.scss +++ b/Resources/assets/gumpy/sass/_custom.scss @@ -1 +1,16 @@ // Your custom SCSS should be written here... +$font-family-title: "Merriweather Sans"; +$font-weight-title: $font-weight-semibold; + +h1,h2,h3,h4,h5,h6 { + font-family: $font-family-title; + font-weight: $font-weight-title; +} + +//correct entypo +@font-face { font-family: "entypo"; font-style: normal; font-weight: 400; + src: url('./../../fonts/icons/entypo.eot'); + src: url("../../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"), + url("./../../fonts/icons/entypo.woff") format("woff"), + url("./../../fonts/icons/entypo.ttf") format("truetype"); +} \ No newline at end of file diff --git a/Resources/assets/gumpy/sass/_fonts.scss b/Resources/assets/gumpy/sass/_fonts.scss index c4f72b582..049d315e5 100644 --- a/Resources/assets/gumpy/sass/_fonts.scss +++ b/Resources/assets/gumpy/sass/_fonts.scss @@ -1,7 +1,7 @@ /* Fonts */ // Import Google Web Fonts -@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); +//@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); // Set local icon font diff --git a/Resources/assets/gumpy/sass/_nav.scss b/Resources/assets/gumpy/sass/_nav.scss new file mode 100644 index 000000000..ae447db57 --- /dev/null +++ b/Resources/assets/gumpy/sass/_nav.scss @@ -0,0 +1,6 @@ +nav.inline-nav { + ul, ol { + display: inline-block; + list-style-type: none; + } +} \ No newline at end of file diff --git a/Resources/assets/gumpy/sass/chillmain.scss b/Resources/assets/gumpy/sass/chillmain.scss new file mode 100644 index 000000000..95148ca7e --- /dev/null +++ b/Resources/assets/gumpy/sass/chillmain.scss @@ -0,0 +1,3 @@ +@import "_nav.scss"; + + diff --git a/Resources/assets/gumpy/sass/var/_settings.scss b/Resources/assets/gumpy/sass/var/_settings.scss index 16ea90d63..8796c7191 100644 --- a/Resources/assets/gumpy/sass/var/_settings.scss +++ b/Resources/assets/gumpy/sass/var/_settings.scss @@ -18,7 +18,7 @@ $max-device-width: 2880px; // Max Document Size $nav-distance: 0; // Navigation distance from the top of the viewport // Typography -$font-family: "Open Sans"; +$font-family: "Oxygen"; $font-style-italic: italic; $icons: entypo; $font-smoothing: antialiased; diff --git a/Resources/public/css/chillmain.css b/Resources/public/css/chillmain.css new file mode 100644 index 000000000..26789a287 --- /dev/null +++ b/Resources/public/css/chillmain.css @@ -0,0 +1 @@ +nav.inline-nav ul, nav.inline-nav ol { display: inline-block; list-style-type: none; } diff --git a/Resources/assets/gumpy/css/gumby.css b/Resources/public/css/gumby.css similarity index 98% rename from Resources/assets/gumpy/css/gumby.css rename to Resources/public/css/gumby.css index a29393ae4..5bb7fa6da 100644 --- a/Resources/assets/gumpy/css/gumby.css +++ b/Resources/public/css/gumby.css @@ -1,5 +1,4 @@ @charset "UTF-8"; -@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); /** * Gumby Framework * --------------- @@ -44,7 +43,7 @@ html { font-size: 16px; line-height: 1.625em; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -body { background: white; font-family: "Open Sans"; font-weight: 400; color: #555555; position: relative; -webkit-font-smoothing: antialiased; } +body { background: white; font-family: "Oxygen"; font-weight: 400; color: #555555; position: relative; -webkit-font-smoothing: antialiased; } @media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; } } html, body { height: 100%; } @@ -1204,7 +1203,7 @@ i.icon-logo-db:before { content: "\f603"; height: inherit; } /* Fonts */ @font-face { font-family: "entypo"; font-style: normal; font-weight: 400; src: url(../fonts/icons/entypo.eot); src: url("../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"), url("../fonts/icons/entypo.woff") format("woff"), url("../fonts/icons/entypo.ttf") format("truetype"); } -h1, h2, h3, h4, h5, h6 { font-family: "Open Sans"; font-weight: 300; color: #444444; text-rendering: optimizeLegibility; padding-top: 0.273em; line-height: 1.15538em; padding-bottom: 0.273em; } +h1, h2, h3, h4, h5, h6 { font-family: "Oxygen"; font-weight: 300; color: #444444; text-rendering: optimizeLegibility; padding-top: 0.273em; line-height: 1.15538em; padding-bottom: 0.273em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #d04526; } @media only screen and (max-width: 767px) { h1, h2, h3, h4, h5, h6 { word-wrap: break-word; } } @@ -1228,7 +1227,7 @@ h6 { font-size: 16px; font-size: 1rem; } .subhead { color: #777; font-weight: normal; margin-bottom: 20px; } /*===================================================== Links & Paragraph styles ======================================================*/ -p { font-family: "Open Sans"; font-weight: 400; font-size: 16px; font-size: 1rem; margin-bottom: 13px; line-height: 1.625em; } +p { font-family: "Oxygen"; font-weight: 400; font-size: 16px; font-size: 1rem; margin-bottom: 13px; line-height: 1.625em; } p.lead { font-size: 20px; font-size: 1.25rem; margin-bottom: 18px; } @media only screen and (max-width: 768px) { p { font-size: 17.6px; font-size: 1.1rem; line-height: 1.625em; } } @@ -2263,7 +2262,7 @@ img { -ms-interpolation-mode: bicubic; } .subnav li.active a, .subnav dd.active a { background: #4a4d50; padding: 5px 9px; text-shadow: 0 1px 1px #4a4d50; } /* Buttons */ -.btn, .skiplink { display: inline-block; width: auto; background: #f2f2f2; -webkit-appearance: none; font-family: "Open Sans"; font-weight: 600; padding: 0 !important; text-align: center; } +.btn, .skiplink { display: inline-block; width: auto; background: #f2f2f2; -webkit-appearance: none; font-family: "Oxygen"; font-weight: 600; padding: 0 !important; text-align: center; } .btn > a, .btn input, .btn button, .skiplink > a, .skiplink input, .skiplink button { display: block; padding: 0 18px; color: white; height: 100%; } .btn input, .btn button, .skiplink input, .skiplink button { background: none; border: none; width: 100%; font-size: 100%; cursor: pointer; font-weight: 400; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @@ -2372,7 +2371,7 @@ form fieldset legend { padding: 5px 10px; } .field { position: relative; max-width: 100%; margin-bottom: 10px; vertical-align: middle; font-size: 16px; overflow: hidden; /* remove inline-block white-space — A 0px font-size = 0px of white space */ } .field.metro, .field .metro { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } -.field input, .field input[type="*"], .field textarea { max-width: 100%; width: 100%; padding: 0; margin: 0; border: none; outline: none; resize: none; -webkit-appearance: none; font-family: "Open Sans"; font-weight: 300; font-size: 16px; font-size: 1rem; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } +.field input, .field input[type="*"], .field textarea { max-width: 100%; width: 100%; padding: 0; margin: 0; border: none; outline: none; resize: none; -webkit-appearance: none; font-family: "Oxygen"; font-weight: 300; font-size: 16px; font-size: 1rem; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .field .input { position: relative; padding: 0 10px; background: #fff; border: 1px solid #d8d8d8; height: 36px; line-height: 34px; font-size: 16px; font-size: 1rem; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .field .input.search { height: 36px; line-height: 34px; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; padding-right: 0; } .field .input.textarea { height: auto; } @@ -2397,7 +2396,7 @@ form fieldset legend { padding: 5px 10px; } .field.prepend.append input:last-child { margin-left: -1px; -webkit-border-radius: 0px 4px 4px 0; -moz-border-radius: 0px 4px 4px 0; -ms-border-radius: 0px 4px 4px 0; -o-border-radius: 0px 4px 4px 0; border-radius: 0px 4px 4px 0; } .field.prepend .adjoined, .field.append .adjoined, .field.prepend .btn, .field.append .btn { position: relative; display: inline-block; margin-bottom: 0; z-index: 99; } .field.prepend .btn a, .field.prepend .btn input, .field.prepend .btn button, .field.append .btn a, .field.append .btn input, .field.append .btn button { padding: 0 12px; } -.field.prepend .adjoined, .field.append .adjoined { padding: 0 10px 0 10px; background: #f2f2f2; border: 1px solid #d8d8d8; font-family: "Open Sans"; font-weight: 600; color: #555555; font-size: 16px; font-size: 1rem; height: 36px; line-height: 34px; } +.field.prepend .adjoined, .field.append .adjoined { padding: 0 10px 0 10px; background: #f2f2f2; border: 1px solid #d8d8d8; font-family: "Oxygen"; font-weight: 600; color: #555555; font-size: 16px; font-size: 1rem; height: 36px; line-height: 34px; } .field.prepend *:first-child { -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -ms-border-radius: 4px 0 0 4px; -o-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .field.prepend input:first-child { margin-right: 0; } .field.prepend .adjoined, .field.prepend .btn { margin-right: -1px; } @@ -2459,7 +2458,7 @@ form fieldset legend { padding: 5px 10px; } .field .text input[type="search"] { -webkit-appearance: textfield; } /* Form Picker Element ( + s + + + + + +

Hello !

+ + + + + + -

Hello !

Primary