diff --git a/app/assets/fonts/merriweather-bold-webfont.eot b/app/assets/fonts/merriweather-bold-webfont.eot deleted file mode 100755 index c77b53bdd..000000000 Binary files a/app/assets/fonts/merriweather-bold-webfont.eot and /dev/null differ diff --git a/app/assets/fonts/merriweather-bold-webfont.svg b/app/assets/fonts/merriweather-bold-webfont.svg deleted file mode 100755 index 3227239df..000000000 --- a/app/assets/fonts/merriweather-bold-webfont.svg +++ /dev/null @@ -1,294 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/fonts/merriweather-bold-webfont.ttf b/app/assets/fonts/merriweather-bold-webfont.ttf deleted file mode 100755 index 44f33c239..000000000 Binary files a/app/assets/fonts/merriweather-bold-webfont.ttf and /dev/null differ diff --git a/app/assets/fonts/merriweather-bold-webfont.woff b/app/assets/fonts/merriweather-bold-webfont.woff deleted file mode 100755 index a728400d5..000000000 Binary files a/app/assets/fonts/merriweather-bold-webfont.woff and /dev/null differ diff --git a/app/assets/fonts/merriweather-bold-webfont.woff2 b/app/assets/fonts/merriweather-bold-webfont.woff2 deleted file mode 100755 index ff3bddfbd..000000000 Binary files a/app/assets/fonts/merriweather-bold-webfont.woff2 and /dev/null differ diff --git a/app/assets/fonts/merriweather-italic-webfont.eot b/app/assets/fonts/merriweather-italic-webfont.eot deleted file mode 100755 index 884185441..000000000 Binary files a/app/assets/fonts/merriweather-italic-webfont.eot and /dev/null differ diff --git a/app/assets/fonts/merriweather-italic-webfont.svg b/app/assets/fonts/merriweather-italic-webfont.svg deleted file mode 100755 index 46f8fe18e..000000000 --- a/app/assets/fonts/merriweather-italic-webfont.svg +++ /dev/null @@ -1,283 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/fonts/merriweather-italic-webfont.ttf b/app/assets/fonts/merriweather-italic-webfont.ttf deleted file mode 100755 index 3180e526d..000000000 Binary files a/app/assets/fonts/merriweather-italic-webfont.ttf and /dev/null differ diff --git a/app/assets/fonts/merriweather-italic-webfont.woff b/app/assets/fonts/merriweather-italic-webfont.woff deleted file mode 100755 index d7071e3c2..000000000 Binary files a/app/assets/fonts/merriweather-italic-webfont.woff and /dev/null differ diff --git a/app/assets/fonts/merriweather-italic-webfont.woff2 b/app/assets/fonts/merriweather-italic-webfont.woff2 deleted file mode 100755 index f8660d06f..000000000 Binary files a/app/assets/fonts/merriweather-italic-webfont.woff2 and /dev/null differ diff --git a/app/assets/fonts/merriweather-light-webfont.eot b/app/assets/fonts/merriweather-light-webfont.eot deleted file mode 100755 index 4115d282b..000000000 Binary files a/app/assets/fonts/merriweather-light-webfont.eot and /dev/null differ diff --git a/app/assets/fonts/merriweather-light-webfont.svg b/app/assets/fonts/merriweather-light-webfont.svg deleted file mode 100755 index 96c41ee1d..000000000 --- a/app/assets/fonts/merriweather-light-webfont.svg +++ /dev/null @@ -1,299 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/fonts/merriweather-light-webfont.ttf b/app/assets/fonts/merriweather-light-webfont.ttf deleted file mode 100755 index 03cfa4253..000000000 Binary files a/app/assets/fonts/merriweather-light-webfont.ttf and /dev/null differ diff --git a/app/assets/fonts/merriweather-light-webfont.woff b/app/assets/fonts/merriweather-light-webfont.woff deleted file mode 100755 index 9b3427536..000000000 Binary files a/app/assets/fonts/merriweather-light-webfont.woff and /dev/null differ diff --git a/app/assets/fonts/merriweather-light-webfont.woff2 b/app/assets/fonts/merriweather-light-webfont.woff2 deleted file mode 100755 index e53e4b531..000000000 Binary files a/app/assets/fonts/merriweather-light-webfont.woff2 and /dev/null differ diff --git a/app/assets/fonts/merriweather-regular-webfont.eot b/app/assets/fonts/merriweather-regular-webfont.eot deleted file mode 100755 index c4cde6d01..000000000 Binary files a/app/assets/fonts/merriweather-regular-webfont.eot and /dev/null differ diff --git a/app/assets/fonts/merriweather-regular-webfont.svg b/app/assets/fonts/merriweather-regular-webfont.svg deleted file mode 100755 index 47b2ff823..000000000 --- a/app/assets/fonts/merriweather-regular-webfont.svg +++ /dev/null @@ -1,294 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/fonts/merriweather-regular-webfont.ttf b/app/assets/fonts/merriweather-regular-webfont.ttf deleted file mode 100755 index 3889a6065..000000000 Binary files a/app/assets/fonts/merriweather-regular-webfont.ttf and /dev/null differ diff --git a/app/assets/fonts/merriweather-regular-webfont.woff b/app/assets/fonts/merriweather-regular-webfont.woff deleted file mode 100755 index 1969d2ed0..000000000 Binary files a/app/assets/fonts/merriweather-regular-webfont.woff and /dev/null differ diff --git a/app/assets/fonts/merriweather-regular-webfont.woff2 b/app/assets/fonts/merriweather-regular-webfont.woff2 deleted file mode 100755 index 3023ce73c..000000000 Binary files a/app/assets/fonts/merriweather-regular-webfont.woff2 and /dev/null differ diff --git a/app/assets/images/icon_home.png b/app/assets/images/icon_home.png new file mode 100644 index 000000000..2284856eb Binary files /dev/null and b/app/assets/images/icon_home.png differ diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 66adef5de..5d3418748 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -205,7 +205,7 @@ body.admin { .delete { border-bottom: 1px dotted #CF2A0E; color: $delete; - font-size: rem-calc(12); + font-size: $small-font-size; &:hover, &:active, &:focus { border-bottom: 1px dotted white; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 0c349daa3..5b2e690e8 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -3,8 +3,9 @@ @import "fonts"; @import "icons"; @import "variables"; +@import "mixins"; @import "admin"; @import "layout"; @import "participation"; @import "c3"; -@import "annotator.min"; \ No newline at end of file +@import "annotator.min"; diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss index d69496252..e8fe6a4bf 100644 --- a/app/assets/stylesheets/fonts.scss +++ b/app/assets/stylesheets/fonts.scss @@ -1,8 +1,7 @@ // Fonts // // 01. Source Sans Pro (https://www.google.com/fonts/specimen/Source+Sans+Pro) -// 02. Merriweather (https://www.google.com/fonts/specimen/Merriweather) -// 03. Lato (https://www.google.com/fonts/specimen/Lato) +// 02. Lato (https://www.google.com/fonts/specimen/Lato) // // 01. Source Sans Pro @@ -56,58 +55,7 @@ font-url('sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg'); } -// 02. Merriweather -// - - - - - - - - - - - - - - - - - - - - - - - - - - -@font-face { - font-family: 'Merriweather'; - font-style: normal; - font-weight: 300; - src: font-url('merriweather-light-webfont.eot'); - src: font-url('merriweather-light-webfont.eot?#iefix') format('embedded-opentype'), - font-url('merriweather-light-webfont.woff2') format('woff2'), - font-url('merriweather-light-webfont.woff') format('woff'), - font-url('merriweather-light-webfont.ttf') format('truetype'), - font-url('merriweather-light-webfont.svg#source_sans_proregular') format('svg'); -} - -@font-face { - font-family: 'Merriweather'; - font-style: normal; - font-weight: 400; - src: font-url('merriweather-regular-webfont.eot'); - src: font-url('merriweather-regular-webfont.eot?#iefix') format('embedded-opentype'), - font-url('merriweather-regular-webfont.woff2') format('woff2'), - font-url('merriweather-regular-webfont.woff') format('woff'), - font-url('merriweather-regular-webfont.ttf') format('truetype'), - font-url('merriweather-regular-webfont.svg#source_sans_proitalic') format('svg'); -} - -@font-face { - font-family: 'Merriweather'; - font-style: italic; - font-weight: 400; - src: font-url('merriweather-italic-webfont.eot'); - src: font-url('merriweather-italic-webfont.eot?#iefix') format('embedded-opentype'), - font-url('merriweather-italic-webfont.woff2') format('woff2'), - font-url('merriweather-italic-webfont.woff') format('woff'), - font-url('merriweather-italic-webfont.ttf') format('truetype'), - font-url('merriweather-italic-webfont.svg#source_sans_proitalic') format('svg'); -} - -@font-face { - font-family: 'Merriweather'; - font-style: normal; - font-weight: 700; - src: font-url('merriweather-bold-webfont.eot'); - src: font-url('merriweather-bold-webfont.eot?#iefix') format('embedded-opentype'), - font-url('merriweather-bold-webfont.woff2') format('woff2'), - font-url('merriweather-bold-webfont.woff') format('woff'), - font-url('merriweather-bold-webfont.ttf') format('truetype'), - font-url('merriweather-bold-webfont.svg#source_sans_probold') format('svg'); -} - -// 03. Lato +// 02. Lato // - - - - - - - - - - - - - - - - - - - - - - - - - @font-face { diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 02c2c5d20..f4234fb13 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1,127 +1,50 @@ // Table of Contents // -// 01. Variables -// 02. Mixins -// 03. Global styles -// 04. Header -// 05. Footer -// 06. Tags -// 07. Auth pages -// 08. Forms -// 09. Alerts -// 10. User account -// 11. Filters & search -// 12. Official levels -// 13. Pagination -// 14. Tables -// 15. Social -// 16. Pages -// 17. Verification -// 18. Comments -// 19. Flags -// 20. Accesibility -// 21. Activity +// 01. Global styles +// 02. Header +// 03. Footer +// 04. Tags +// 05. Auth pages +// 06. Forms +// 07. Alerts +// 08. User account +// 09. Filters & search +// 10. Official levels +// 11. Pagination +// 12. Tables +// 13. Social +// 14. Pages +// 15. Verification +// 16. Comments +// 17. Flags +// 18. Activity // -// 01. Variables +// 01. Global styles // - - - - - - - - - - - - - - - - - - - - - - - - - -@import "variables"; +*, html { + margin: 0; + padding: 0; +} -// 02. Mixins -// - - - - - - - - - - - - - - - - - - - - - - - - - +html, body { + height: 100%; +} -@mixin back { - color: $text-medium; +body { + background: white; + color: $text; font-family: $font-sans; - font-size: $small-font-size; + font-size: $base-font-size; } -@mixin logo { - color: white; - font-family: $font-logo; - font-weight: lighter; - - @media (min-width: $small-breakpoint) { - font-size: rem-calc(24); - line-height: rem-calc(48); - } - - img { - height: 48px; - width: 48px; - - @media (min-width: $small-breakpoint) { - height: 80px; - margin-right: rem-calc(12); - margin-top: 0; - width: 80px; - } - } -} - -@mixin title { - font-size: $title-font-size; +h1, h2, h3, h4, h5, h6 { + clear: both; + font-family: $font-sans; font-weight: $font-bold; } -@mixin h1 { - font-family: $font-sans; - font-size: $h2-font-size; - font-weight: $font-bold; - - @media (min-width: $small-breakpoint) { - font-size: $h1-font-size; - } -} - -@mixin h2 { - font-family: $font-sans; - font-size: $h3-font-size; - font-weight: $font-bold; - - @media (min-width: $small-breakpoint) { - font-size: $h2-font-size; - } -} - -@mixin h3 { - font-family: $font-sans; - font-size: $h4-font-size; - font-weight: $font-bold; - - @media (min-width: $small-breakpoint) { - font-size: $h3-font-size; - } -} - -@mixin h4 { - font-family: $font-sans; - font-size: $h5-font-size; - font-weight: $font-bold; - - @media (min-width: $small-breakpoint) { - font-size: $h4-font-size; - } -} - -@mixin h5 { - font-family: $font-sans; - font-size: $h6-font-size; - font-weight: $font-bold; - - @media (min-width: $small-breakpoint) { - font-size: $h5-font-size; - } -} - -@mixin h6 { - font-family: $font-sans; - font-size: $h6-font-size; - font-weight: $font-normal; - text-transform: uppercase; -} - h1 { @include h1(); } @@ -144,64 +67,13 @@ h5 { h6 { @include h6(); -} - -h1, h2, h3, h4, h5, h6 { - - &.lead { - border-bottom: rem-calc(6) solid $brand; - } - - &.secondary { - color: $text-medium; - } -} - -// 03. Global styles -// - - - - - - - - - - - - - - - - - - - - - - - - - - -*, html { - margin: 0; - padding: 0; -} - -html, body { - height: 100%; -} - -body { - background: white; - color: $text; - font-family: $font-serif; - font-size: $base-font-size; - font-weight: normal; - text-rendering: optimizeLegibility; - - &::selection, ::-moz-selection { - background: $brand !important; - color: white !important; - } -} - -p, ul, table { - font-family: $font-serif; + font-weight: $font-normal; } p { - color: $text; + font-size: $base-font-size; + font-weight: $font-normal; line-height: $base-line-height; - margin: rem-calc(6) 0; -} - -ol, ul, li, p { - font-size: $small-font-size; -} - -h1, h2, h3, h4, h5, h6 { - clear: both; - font-family: $font-sans; - line-height: $heading-line-height; - margin: rem-calc(12) 0 rem-calc(6); } a { @@ -223,9 +95,7 @@ a { .button { background: $brand; - font-size: $small-font-size; - font-family: $font-sans !important; - padding: rem-calc(15) rem-calc(32); + font-family: $font-sans; &:hover { text-decoration: none !important; @@ -253,46 +123,22 @@ a { } .sidebar { - margin-top: rem-calc(24); - margin-bottom: rem-calc(48); + margin-top: $line-height; + margin-bottom: $line-height*2; } .sidebar-divider { border-top: 1px solid $border; - margin-top: rem-calc(24); + margin-top: $line-height; &:first-child { margin-top: 0; } } -.sub-nav { - background-color: #f2f2f2; - border-radius: rem-calc(3); - padding: rem-calc(10) rem-calc(10) rem-calc(10) 0; - margin: rem-calc(12) 0; -} - -.sub-nav dt, .sub-nav dd, .sub-nav li { - padding: rem-calc(3) 0; - - &.active { - background: #008CBA; - border-radius: rem-calc(3); - color: white; - cursor: default; - font-weight: normal; - padding: rem-calc(3) rem-calc(14); - - a:hover { - color: #737373; - } - } -} - .f-dropdown { li a { - font-size: rem-calc(12); + font-size: $small-font-size; &:hover { color: $link-hover; @@ -329,14 +175,9 @@ a { } } -.progress { - background-color: rgba(0,0,0,.06); - border: 0; -} - .wrapper { min-height: 100%; - margin: 0 auto rem-calc(-288); + margin: 0 auto (-$line-height)*12; height: auto !important; height: 100%; } @@ -347,7 +188,7 @@ a { .footer, .push { clear: both; - min-height: rem-calc(288); + min-height: $line-height*12; } .ie-alert-box { @@ -356,109 +197,36 @@ a { width: 100%; a.close { - font-size: 36px; + font-size: $h2-font-size; top: 20%; } } -.moderator-actions { - margin: rem-calc(24) 0; +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; } -.text-medium { - font-size: rem-calc(16) !important; -} - -// 04. Header +// 02. Header // - - - - - - - - - - - - - - - - - - - - - - - - - header { - background: #E7F2FC; - border-bottom: rem-calc(1) solid $border; - - a { - font-family: $font-sans; - } - - h1 { - margin: rem-calc(24) 0; - } - - h2 { - font-size: rem-calc(16); - font-weight: normal; - line-height: rem-calc(30); - } - - .button { - background: white; - color: $brand; - font-family: inherit; - font-size: rem-calc(16); - margin-top: 0; - - &.see-more { - width: 100%; - - @media (min-width: $small-breakpoint) { - width: auto; - } - } - } + background: $highlight; + border-bottom: 1px solid $border; .home-page { - text-align: center; - - @media (min-width: $small-breakpoint) { - text-align: left; - } - } - - .more-info { - display: block; - margin-bottom: rem-calc(24); - text-decoration: underline; - - @media (min-width: $small-breakpoint) { - display: inline-block; - margin-bottom: 0; - margin-left: rem-calc(12); - } - } - - .icon-home-big { - color: $brand; - font-size: rem-calc(300); - line-height: rem-calc(300); - opacity: .75; - } - - .icon-home-small { - color: $brand; - font-size: rem-calc(100); - opacity: .75; - position: absolute; - right: rem-calc(24); - } - - .icon-external { - display: inline-block; - font-size: rem-calc(12); - opacity: .5; - padding-top: rem-calc(3); - vertical-align: top; - - @media (min-width: $small-breakpoint) { - padding-top: 0; - position: absolute; - right: -18px; - top: 3px; - } + padding: $line-height 0; } .selected { border-bottom: 2px solid white; - padding-bottom: rem-calc(2); + padding-bottom: $line-height/12; position: relative; } @@ -468,11 +236,7 @@ header { @media (min-width: $small-breakpoint) { float: left; - margin-left: rem-calc(12); - } - - .icon-language { - vertical-align: text-top; + margin-left: $line-height/2; } } @@ -487,7 +251,7 @@ header { } .search-form { - padding-top: rem-calc(6); + padding-top: $line-height/4; margin-bottom: 0 !important; .postfix { @@ -506,9 +270,9 @@ header { .top-bar { background: $brand !important; color: white; - min-height: rem-calc(48); + min-height: $line-height*2; max-width: 1170px !important; - padding: 0 rem-calc(12); + padding: 0 $line-height/2; @media (min-width: $small-breakpoint) { height: auto; @@ -518,15 +282,15 @@ header { .name { @media (min-width: $small-breakpoint) { - margin-left: rem-calc(12); + margin-left: $line-height/2; } a { @include logo; - line-height: rem-calc(48); + line-height: $line-height*2; @media (min-width: $small-breakpoint) { - line-height: rem-calc(80); + line-height: rem-calc(80); // Same as logo image height } } } @@ -548,7 +312,7 @@ header { } &.menu-icon a { - padding: 0 rem-calc(24); + padding: 0 $line-height; span::after { right: 0; @@ -558,28 +322,55 @@ header { &.expanded .toggle-topbar a { color: white; - } - &.expanded .toggle-topbar a span::after { - box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF; + span::after { + box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF; + } } } .top-bar-section { - margin-right: rem-calc(24); + margin-right: $line-height; width: 100%; ul { - margin-left: 0; - margin-right: rem-calc(12); + margin-left: $line-height/2; @media (min-width: $small-breakpoint) { - margin-left: rem-calc(24); + margin-left: 0; } - } - ul li { - background: none; + li { + background: none; + + &:not(.has-form) a:not(.button) { + background: none; + color: white; + + &:hover { + background: none; + } + + @media (min-width: $small-breakpoint) { + background: none; + line-height: rem-calc(80); // Same as logo image height + padding: 0 $line-height/2; + } + } + + &:hover { + background: none; + color: white; + text-decoration: underline; + transition: text-decoration 275ms; + } + + &.active:not(.has-form) a:not(.button) { + background: none; + height: $line-height*4; + line-height: $line-height*4; + } + } } ul li > a { @@ -590,6 +381,10 @@ header { line-height: $line-height*1.5; text-align: left; background: none; + + &:hover, &:focus { + background-color: #007095 !important; + } } @media (min-width: $small-breakpoint) { @@ -604,61 +399,13 @@ header { } } } - - ul li > a { - font-size: $small-font-size; - } - - ul li > a.button:hover, .top-bar-section ul li > a.button:focus { - background-color: #007095 !important; - } - - ul li, ul li:hover:not(.has-form) > a:not(.button) { - - @media (min-width: $small-breakpoint) { - background: none; - border: 0; - line-height: rem-calc(80); - } - } - - ul { - margin-left: rem-calc(12); - - @media (min-width: $small-breakpoint) { - margin-left: 0; - } - - li:not(.has-form) a:not(.button) { - background: none; - color: white; - - @media (min-width: $small-breakpoint) { - line-height: rem-calc(80); - padding: 0 rem-calc(12); - } - - &:hover { - background: none; - color: white; - text-decoration: underline; - transition: text-decoration 275ms; - } - } - - li.active:not(.has-form) a:not(.button) { - background: none; - height: rem-calc(96); - line-height: $line-height*4; - } - } } .top-links { background: $dark; color: white; font-size: $small-font-size; - padding-right: rem-calc(12); + padding-right: $line-height/2; a { color: white; @@ -677,7 +424,7 @@ header { .subnavigation { background: white; clear: both; - padding-left: rem-calc(12); + padding-left: $line-height/2; @media (min-width: $small-breakpoint) { padding-left: 0; @@ -690,21 +437,22 @@ header { a { color: $text; display: inline-block; + font-family: $font-sans; font-weight: bold; line-height: $line-height*2; position: relative; text-align: left; @media (min-width: $small-breakpoint) { - margin-left: rem-calc(12); - margin-right: rem-calc(36); + margin-left: $line-height/2; + margin-right: $line-height*1.5; margin-right: 12px\9; } &:after { color: $border; content: "|"; - padding: 0 rem-calc(12); + padding: 0 $line-height/2; @media (min-width: $small-breakpoint) { content: none; @@ -730,33 +478,34 @@ header { } } -// 05. Footer +// 03. Footer // - - - - - - - - - - - - - - - - - - - - - - - - - footer { - color: #171819; + color: $footer-color; - .logo { - @include logo; + .logo a { + font-family: $font-logo; + text-decoration: none; - a { - color: #454A4C; - line-height: rem-calc(36); - padding-left: 0; - text-decoration: none; + &:hover { + text-decoration: underline; } } p { font-size: $small-font-size; + + .info a { + text-decoration: underline; + } } a, a:active, a:focus { - color: #454A4C; - text-decoration: underline; + color: $footer-link; &:hover { - color: #171819; + color: $footer-color; } } @@ -764,35 +513,32 @@ footer { padding-left: 0; } - h4 { + h2 a { - a { - border-bottom: 1px solid #BFC1C3; - display: block; - padding-bottom: rem-calc(6); - text-decoration: none; - } + border-bottom: 1px solid $footer-border; + display: block; + font-size: $h3-font-size; + line-height: $h3-line-height; + padding-bottom: $line-height/4; + text-decoration: none; } } .footer { - background: #DEE0E2; - border-top: rem-calc(6) solid $brand; + background: $footer-bg; + border-top: 6px solid $brand; padding-top: $line-height; } .subfooter { - border-top: 1px solid #BFC1C3; - opacity: .75; - margin-top: rem-calc(24); - padding-top: rem-calc(12); + border-top: 1px solid $footer-border; + padding-top: $line-height/2; } -// 06. Tags +// 04. Tags // - - - - - - - - - - - - - - - - - - - - - - - - - .tags, .tag-cloud { - font-family: $font-sans; a { background: $border; @@ -800,8 +546,8 @@ footer { color: #4d4d4d; display: inline-block; font-size: $small-font-size; - margin-bottom: rem-calc(8); - padding: 0 rem-calc(8); + margin-bottom: $line-height/3; + padding: 0 $line-height/3; &:hover { color: $link; @@ -819,14 +565,14 @@ footer { font-family: $font-family-sans-serif; font-size: rem-calc(16); margin: -1px 0 rem-calc(12); - padding-top: rem-calc(6); + padding-top: $line-height/4; text-transform: uppercase; } a { background: white; border: 2px solid $border; - padding: rem-calc(6) rem-calc(8); + padding: $line-height/4 $line-height/3; .label { color: white; @@ -845,7 +591,7 @@ footer { } } -// 07. Auth pages +// 05. Auth pages // - - - - - - - - - - - - - - - - - - - - - - - - - .auth-page { @@ -854,7 +600,7 @@ footer { background-size: cover; @media (min-width: $small-breakpoint) { - padding-top: rem-calc(48); + padding-top: $line-height*2; } h1 { @@ -863,7 +609,7 @@ footer { a { color: white; display: block; - line-height: rem-calc(80); + line-height: rem-calc(80); // Same as logo image height text-align: center; @media (min-width: $small-breakpoint) { @@ -875,7 +621,7 @@ footer { } .auth { - min-height: rem-calc(480); + min-height: $line-height*20; .back, .icon-angle-left { @include back; @@ -897,7 +643,7 @@ footer { } } -// 08. Forms +// 06. Forms // - - - - - - - - - - - - - - - - - - - - - - - - - form.locale-form { @@ -921,7 +667,7 @@ form.locale-form { margin-bottom: 0; outline: none; padding-left: rem-calc(3); - padding-right: rem-calc(24); + padding-right: $line-height; } } } @@ -950,7 +696,7 @@ form { input[type]:not([type=submit]):not([type=file]):not([type=checkbox]) { background: $input-bg; - height: rem-calc(48); + height: $line-height*2; margin-bottom: rem-calc(16); &.search-form { @@ -969,13 +715,13 @@ form { } input[type=file] { - margin: rem-calc(12) 0 rem-calc(12) rem-calc(6); + margin: $line-height/2 0 $line-height/2 $line-height/4; } .note, .note-marked { display: block; font-size: rem-calc(13); - margin-bottom: rem-calc(12); + margin-bottom: $line-height/2; } .note-marked { @@ -989,7 +735,7 @@ form { } .ckeditor { - min-height: rem-calc(312); + min-height: $line-height*13; } .checkbox { @@ -1001,7 +747,7 @@ form { .captcha { border: 0; - padding: rem-calc(12) 0; + padding: $line-height/2 0; input { margin-bottom: 0 !important; @@ -1009,7 +755,7 @@ form { } .button.margin-top { - margin-top: rem-calc(24); + margin-top: $line-height; } } @@ -1020,7 +766,7 @@ form { } } -// 09. Alerts +// 07. Alerts // - - - - - - - - - - - - - - - - - - - - - - - - - .alert-box { @@ -1071,7 +817,7 @@ span.error, small.error { background: $alert-bg; color: $alert-color; display: inline-block; - margin: 0 rem-calc(6); + margin: 0 $line-height/4; } label.error, label.error a { @@ -1080,83 +826,34 @@ label.error, label.error a { .alert-messages { background-color: white; - padding-top: rem-calc(24); + padding-top: $line-height; } -// 10. User account +// 08. User account // - - - - - - - - - - - - - - - - - - - - - - - - - .account { background: white; - padding-top: rem-calc(24); - - a { - font-family: $font-sans; - } - - .icon-debates { - color: $debates; - font-size: rem-calc(60); - line-height: $line-height; - opacity: .5; - } - - .avatar { - margin-bottom: rem-calc(24); - } - - .initialjs-avatar { - margin-bottom: $line-height; - } - - h1.avatar { - margin-left: rem-calc(12); - } - - h3 { - clear: both; - font-size: rem-calc(20); - font-weight: bold; - line-height: $line-height; - margin: 0; - margin-bottom: rem-calc(12); - } - - .recommendations { - list-style-type: none; - margin-left: 0; - margin-top: rem-calc(24); - - li { - font-size: rem-calc(12); - margin: rem-calc(12) 0; - - &:before { - color: $debates; - content: "l "; - font-family: "icons" !important; - } - } - } + padding-top: $line-height; select { - height: rem-calc(48); - margin-right: rem-calc(12); + height: $line-height*2; + margin-right: $line-height/2; } .verify-account { - padding-right: rem-calc(12); + padding-right: $line-height/2; } .final-votes-info { background: $warning-bg; border: 1px solid $warning-border; color: $warning-color; - margin-top: rem-calc(24); - padding: rem-calc(12); + margin-top: $line-height; + padding: $line-height/2; ul li { - margin: rem-calc(12) 0; + margin: $line-height/2 0; } .icon-box { @@ -1177,9 +874,9 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { background-color: rgba(255,255,255,.5); color: rgba(0,0,0,.4); font-size: rem-calc(40); - left: rem-calc(11); + left: 11px; position: absolute; - top: rem-calc(72); + top: 72px; } .user-deleted { @@ -1202,7 +899,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { li { font-size: $small-font-size; - margin-bottom: rem-calc(12); + margin-bottom: $line-height/2; span { color: $text-medium; @@ -1220,7 +917,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { } } -// 11. Filters & search +// 09. Filters & search // - - - - - - - - - - - - - - - - - - - - - - - - - .filters, .search-results { @@ -1228,24 +925,24 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { h2 { display: inline-block; font-size: rem-calc(24); - margin: rem-calc(12) 0; + margin: $line-height/2 0; @media (min-width: $small-breakpoint) { - margin: rem-calc(24) 0; + margin: $line-height 0; } } select { background-color: #DEE0E2; height: auto; - margin-bottom: rem-calc(24); - min-width: rem-calc(180); + margin-bottom: $line-height; + min-width: $line-height*7.5; outline: 0; - padding: rem-calc(12); + padding: $line-height/2; width: auto; @media (min-width: $small-breakpoint) { - margin: 0 0 rem-calc(24) rem-calc(12); + margin: 0 0 $line-height $line-height/2; } optgroup { @@ -1281,13 +978,13 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { display: inline-block; font-family: $font-family-sans-serif; font-size: rem-calc(16); - margin: -1px 0 rem-calc(12); - padding-top: rem-calc(6); + margin: -1px 0 $line-height/2; + padding-top: $line-height/4; text-transform: uppercase; } } -// 12. Officials levels +// 10. Officials levels // - - - - - - - - - - - - - - - - - - - - - - - - - [class^="level-"] { @@ -1326,18 +1023,18 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { background: $level-5; } -// 13. Pagination +// 11. Pagination // - - - - - - - - - - - - - - - - - - - - - - - - - ul.pagination { - margin-top: rem-calc(24); + margin-top: $line-height; li { color: $text-medium; } } -// 14. Tables +// 12. Tables // - - - - - - - - - - - - - - - - - - - - - - - - - table { @@ -1349,7 +1046,7 @@ table { td { line-height: $line-height; - padding: rem-calc(12) rem-calc(6); + padding: $line-height/2 $line-height/4; } &:nth-child(odd) { @@ -1362,7 +1059,7 @@ table { } } -// 15. Social +// 13. Social // - - - - - - - - - - - - - - - - - - - - - - - - - .button.button-twitter { @@ -1384,9 +1081,9 @@ table { .social-share-button-twitter { background: #45B0E3; color: white; - height: rem-calc(48); + height: $line-height*2; position: relative; - width: rem-calc(48); + width: $line-height*2; &:before { content: "f"; @@ -1464,9 +1161,9 @@ table { .social-share-button-google_plus { background: #DE4C34; color: white; - height: rem-calc(48); + height: $line-height*2; position: relative; - width: rem-calc(48); + width: $line-height*2; &:before { content: "B"; @@ -1486,8 +1183,8 @@ table { } .social { - margin-top: rem-calc(24); - padding-top: rem-calc(6); + margin-top: $line-height; + padding-top: $line-height/4; text-align: center; vertical-align: middle; @@ -1498,8 +1195,8 @@ table { a { font-size: rem-calc(24); - line-height: rem-calc(24); - margin: 0 rem-calc(12); + line-height: $line-height; + margin: 0 $line-height/2; text-decoration: none; vertical-align: middle; @@ -1527,9 +1224,9 @@ table { .social-share-button-twitter { background: none; color: white; - height: rem-calc(24); + height: $line-height; position: relative; - width: rem-calc(48); + width: $line-height*2; &:before { content: "f"; @@ -1594,28 +1291,28 @@ table { } } -// 16. Pages +// 14. Pages // - - - - - - - - - - - - - - - - - - - - - - - - - .page { - padding-bottom: rem-calc(48); + padding-bottom: $line-height*2; .menu { - margin-top: rem-calc(24); + margin-top: $line-height; ul { list-style-type: none; margin-left: 0; & ul { - margin-left: rem-calc(12); + margin-left: $line-height/2; } } a { display: block; font-size: rem-calc(13); - margin-bottom: rem-calc(12); + margin-bottom: $line-height/2; } } @@ -1624,19 +1321,19 @@ table { } .text { - margin-top: rem-calc(24); + margin-top: $line-height; h1, h2, h3, h4, h5, h6 { text-align: left; } ul, ol { - margin-left: rem-calc(12); + margin-left: $line-height/2; li { font-size: rem-calc(15); line-height: rem-calc(30); - margin-bottom: rem-calc(12); + margin-bottom: $line-height/2; } } @@ -1647,7 +1344,7 @@ table { } .more-information { - margin-top: rem-calc(24); + margin-top: $line-height; ul { list-style-type: none; @@ -1657,7 +1354,7 @@ table { border-bottom: 1px solid $border; font-size: rem-calc(16); font-weight: bold; - padding-bottom: rem-calc(12); + padding-bottom: $line-height/2; position: relative; text-align: left; @@ -1685,15 +1382,15 @@ table { } } -// 17. Verification +// 15. Verification // - - - - - - - - - - - - - - - - - - - - - - - - - .verification { - min-height: rem-calc(600); + min-height: $line-height*25; @media (min-width: $small-breakpoint) { .left + .left { - margin-left: rem-calc(12); + margin-left: $line-height/2; } } @@ -1710,10 +1407,10 @@ table { } .progress { - height: rem-calc(72); + height: $line-height*3; @media (min-width: $small-breakpoint) { - height: rem-calc(48); + height: $line-height*2; } &.success .meter { @@ -1725,12 +1422,12 @@ table { font-family: $font-sans; font-weight: bold; line-height: rem-calc(20); - padding-top: rem-calc(6); + padding-top: $line-height/4; text-transform: uppercase; vertical-align: top; @media (min-width: $small-breakpoint) { - line-height: rem-calc(48); + line-height: $line-height*2; padding: 0; } @@ -1773,7 +1470,7 @@ table { .button + form { display: inline-block; - margin-left: rem-calc(12); + margin-left: $line-height/2; } .verification-list { @@ -1783,17 +1480,17 @@ table { span { display: inline-block; - min-width: rem-calc(288); + min-width: $line-height*12; } } } .verify-account { - padding-right: rem-calc(12); + padding-right: $line-height/2; .already-verified { color: $check; - line-height: rem-calc(48); + line-height: $line-height*2; .icon-check { font-size: rem-calc(24); @@ -1804,8 +1501,8 @@ table { } .verify { - margin-bottom: rem-calc(48); - margin-top: rem-calc(24); + margin-bottom: $line-height*2; + margin-top: $line-height; h1 { color: $check; @@ -1827,22 +1524,22 @@ table { background: white; color: $info-color; font-size: rem-calc(24); - margin-left: rem-calc(-27); - padding: 0 rem-calc(12); + margin-left: -27px; + padding: 0 $line-height/2; position: absolute; - top: rem-calc(-12); + top: -12px; } } } -// 18. Comments +// 16. Comments // - - - - - - - - - - - - - - - - - - - - - - - - - .comments { background: $white; background-repeat: repeat-x; - padding-top: rem-calc(24); - padding-bottom: rem-calc(96); + padding-top: $line-height; + padding-bottom: $line-height*4; h2 { margin: 0; @@ -1856,7 +1553,7 @@ table { } .comment { - margin: rem-calc(6) 0; + margin: $line-height/4 0; p { margin-bottom: 0; @@ -1867,7 +1564,7 @@ table { font-family: $font-sans; font-size: $small-font-size; line-height: $line-height; - margin: rem-calc(10) rem-calc(12) rem-calc(6) 0; + margin: rem-calc(10) $line-height/2 $line-height/4 0; a { color: $text-light; @@ -1906,40 +1603,40 @@ table { } .comment-user { - margin-top: rem-calc(6); - padding: rem-calc(6) 0; + margin-top: $line-height/4; + padding: $line-height/4 0; overflow: hidden; @each $n in ("1", "2", "3","4", "5") { &.level-#{$n} { @if $n == "5" { background: $comment-level-5; - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } @elseif $n == "1" { background: none; - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } @else { background: $comment-official; - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } } } &.is-author { background: $comment-author; - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } &.is-admin, &.is-moderator { background: $comment-admin; - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } &.level-5 { background: $comment-level-5; - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } } } @@ -1947,13 +1644,13 @@ table { .is-deleted { background: $deleted; margin-left: rem-calc(42); - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } .comment-children { border-left: 1px dashed $border; margin-left: rem-calc(42); - padding-left: rem-calc(6); + padding-left: $line-height/4; @media only screen and (max-width: 40em) { margin-left: rem-calc(16); @@ -1964,7 +1661,7 @@ table { color: $text-medium; font-family: $font-sans; font-size: $small-font-size; - margin-top: rem-calc(6); + margin-top: $line-height/4; vertical-align: middle; span.user-name { @@ -1989,7 +1686,7 @@ table { } label { - padding-right: rem-calc(12); + padding-right: $line-height/2; float: none; @media (min-width: $small-breakpoint) { @@ -1998,7 +1695,7 @@ table { } } -// 19. Flags +// 17. Flags // - - - - - - - - - - - - - - - - - - - - - - - - - .flag-content { @@ -2011,7 +1708,7 @@ table { } .flag-disable, .flag-active { - line-height: rem-calc(24); + line-height: $line-height; vertical-align: middle; } @@ -2023,38 +1720,20 @@ table { color: $delete; } -// 20. Accesibility -// - - - - - - - - - - - - - - - - - - - - - - - - - - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} - -// 21. Activity +// 18. Activity // - - - - - - - - - - - - - - - - - - - - - - - - - .activity { - margin-bottom: rem-calc(48); - margin-top: rem-calc(24); + margin-bottom: $line-height*2; + margin-top: $line-height; .sub-nav { - background: none; border-bottom: 1px solid $border; - border-radius: 0; - padding-bottom: 0; dd.active { - background: none; border-bottom: 2px solid $brand; - border-radius: 0; color: $brand; + padding-bottom: $line-height/4; } } @@ -2062,7 +1741,7 @@ table { border: 0; td { - padding-left: rem-calc(36); + padding-left: $line-height*1.5; position: relative; &:before { @@ -2071,7 +1750,6 @@ table { font-size: rem-calc(24); left: 4px; position: absolute; - } } diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss new file mode 100644 index 000000000..f913ed464 --- /dev/null +++ b/app/assets/stylesheets/mixins.scss @@ -0,0 +1,92 @@ +// Table of Contents +// +// 01. Mixins +// + +// 01. Mixins +// - - - - - - - - - - - - - - - - - - - - - - - - - + +@mixin back { + color: $text-medium; + font-family: $font-sans; + font-size: $small-font-size; +} + +@mixin logo { + color: white; + font-family: $font-logo; + font-weight: lighter; + + @media (min-width: $small-breakpoint) { + font-size: rem-calc(24); + line-height: rem-calc(48); + } + + img { + height: 48px; + width: 48px; + + @media (min-width: $small-breakpoint) { + height: 80px; + margin-right: rem-calc(12); + margin-top: 0; + width: 80px; + } + } +} + +@mixin h1 { + font-size: $h2-font-size; + line-height: $h2-line-height; + + @media (min-width: $small-breakpoint) { + font-size: $h1-font-size; + line-height: $h1-line-height; + } +} + +@mixin h2 { + font-size: $h3-font-size; + line-height: $h3-line-height; + + @media (min-width: $small-breakpoint) { + font-size: $h2-font-size; + line-height: $h2-line-height; + } +} + +@mixin h3 { + font-size: $h4-font-size; + line-height: $h4-line-height; + + @media (min-width: $small-breakpoint) { + font-size: $h3-font-size; + line-height: $h3-line-height; + } +} + +@mixin h4 { + font-size: $h5-font-size; + line-height: $h5-line-height; + + @media (min-width: $small-breakpoint) { + font-size: $h4-font-size; + line-height: $h4-line-height; + } +} + +@mixin h5 { + font-size: $h6-font-size; + line-height: $h6-line-height; + + @media (min-width: $small-breakpoint) { + font-size: $h5-font-size; + line-height: $h5-line-height; + } +} + +@mixin h6 { + font-size: $h6-font-size; + line-height: $h6-line-height; + text-transform: uppercase; +} \ No newline at end of file diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 486d46881..57110299c 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -165,8 +165,6 @@ .progress { background-color: rgba(255,255,255,.8); height: rem-calc(12); - margin-bottom: rem-calc(6); - margin-top: rem-calc(4); .meter { background: $votes-like; @@ -178,8 +176,8 @@ color: $brand; vertical-align: top; position: absolute; - top: 17px; - right: 18px; + top: 13px; + right: 20px; } abbr { @@ -295,22 +293,14 @@ opacity: .5; } - h2 { - clear: both; - font-size: rem-calc(20); - font-weight: bold; - line-height: $line-height; - margin: 0; - } - .recommendations { list-style-type: none; margin-left: 0; - margin-top: rem-calc(24); + margin-top: $line-height; li { - font-size: rem-calc(12); - margin: rem-calc(12) 0; + font-size: $small-font-size; + margin: $line-height/2 0; &:before { content: "l "; @@ -334,7 +324,7 @@ } } -// 02. Show participation +// 03. Show participation // - - - - - - - - - - - - - - - - - - - - - - - - - .debate-show, .proposal-show { @@ -344,18 +334,6 @@ @include back; } - h1 { - clear: both; - font-size: rem-calc(30); - font-weight: bold; - margin: 0; - text-transform: lowercase; - - &:first-letter { - text-transform: uppercase; - } - } - h4 { margin: rem-calc(12) 0; } @@ -367,7 +345,7 @@ .debate-info, .proposal-info { clear: both; color: $text-medium; - font-family: $font-sans; + font-size: $small-font-size; line-height: $line-height*2; position: relative; @@ -376,7 +354,7 @@ } p { - font-size: rem-calc(15); + font-size: $small-font-size; line-height: $line-height; margin: 0; } @@ -634,7 +612,7 @@ .debate-info, .proposal-info { color: $text-medium; - font-family: $font-sans; + font-size: $small-font-size; margin: rem-calc(6) 0 0; .icon-comments { diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss index 494775a8b..72fb27788 100644 --- a/app/assets/stylesheets/variables.scss +++ b/app/assets/stylesheets/variables.scss @@ -11,28 +11,35 @@ // 01. Typography // - - - - - - - - - - - - - - - - - - - - - - - - - -$base-font-size: rem-calc(17); -$small-font-size: rem-calc(14); -$lead-font-size: rem-calc(20); -$title-font-size: rem-calc(52); -$h1-font-size: rem-calc(40); -$h2-font-size: rem-calc(30); -$h3-font-size: rem-calc(20); -$h4-font-size: rem-calc(17); -$h5-font-size: rem-calc(15); -$h6-font-size: rem-calc(13); -$base-line-height: 1.5; -$heading-line-height: 1.3; -$lead-line-height: 1.7; - -$font-sans: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif; -$font-serif: 'Merriweather', 'Georgia', 'Times New Roman', serif; $font-logo: 'Lato' !important; +$font-sans: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif !important; $font-normal: 400; $font-bold: 700; -$line-height: rem-calc(24); +$base-font-size: rem-calc(17); +$base-line-height: rem-calc(26); + +$h1-font-size: rem-calc(44); +$h1-line-height: rem-calc(57); + +$h2-font-size: rem-calc(34); +$h2-line-height: rem-calc(44); + +$h3-font-size: rem-calc(24); +$h3-line-height: rem-calc(31); + +$h4-font-size: rem-calc(19); +$h4-line-height: rem-calc(25); + +$h5-font-size: rem-calc(16); +$h5-line-height: rem-calc(21); + +$h6-font-size: rem-calc(13); +$h6-line-height: rem-calc(17); + +$small-font-size: rem-calc(14); +$line-height: rem-calc(24); // 02. Colors // - - - - - - - - - - - - - - - - - - - - - - - - - @@ -65,6 +72,13 @@ $check: #46DB91; $proposals: #FFA42D; $proposals-border: #CC8425; +$highlight: #E7F2FC; + +$footer-bg: #DEE0E2; +$footer-color: #171819; +$footer-link: #454A4C; +$footer-border: #BFC1C3; + // 03. Forms // - - - - - - - - - - - - - - - - - - - - - - - - - @@ -115,9 +129,3 @@ $small-breakpoint: em-calc(640); $medium-breakpoint: em-calc(1024); $large-breakpoint: em-calc(1440); $xlarge-breakpoint: em-calc(1920); - -$small-range: (0, $small-breakpoint); -$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint); -$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint); -$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint); -$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)); diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index b01720543..c5f2e6aca 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -11,10 +11,6 @@ module ApplicationHelper request.path == '/opendata' end - def header_css - home_page? || opendata_page? ? '' : 'results' - end - # if current path is /debates current_path_with_query_params(foo: 'bar') returns /debates?foo=bar # notice: if query_params have a param which also exist in current path, it "overrides" (query_params is merged last) def current_path_with_query_params(query_parameters) diff --git a/app/views/account/show.html.erb b/app/views/account/show.html.erb index 5acf6eb62..dd09efb91 100644 --- a/app/views/account/show.html.erb +++ b/app/views/account/show.html.erb @@ -6,9 +6,9 @@ <%= link_to t("account.show.erase_account_link"), users_registrations_delete_form_path, class: "delete" %> - <%= avatar_image(@account, seed: @account.id, size: 60) %> + <%= avatar_image(@account, seed: @account.id, size: 100, class: "margin-bottom") %> -
+
<%= t("layouts.footer.description", open_source: link_to(t("layouts.footer.open_source"), t("layouts.footer.open_source_url"), target: "blank"), consul: link_to(t("layouts.footer.consul"), t("layouts.footer.consul_url"), target: "blank")).html_safe @@ -19,23 +19,23 @@
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index 67012211e..e9d21f40d 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -1,4 +1,4 @@ -+ <%= t("layouts.header.open_city_slogan_html") %> + <%= link_to t("layouts.header.more_information"), page_path('more_information') %> +
+