diff --git a/app/assets/images/more_info/budgets.png b/app/assets/images/more_info/budgets.png new file mode 100644 index 000000000..89d93947b Binary files /dev/null and b/app/assets/images/more_info/budgets.png differ diff --git a/app/assets/images/more_info/debates.png b/app/assets/images/more_info/debates.png new file mode 100644 index 000000000..30b195668 Binary files /dev/null and b/app/assets/images/more_info/debates.png differ diff --git a/app/assets/images/more_info/proposals.png b/app/assets/images/more_info/proposals.png new file mode 100644 index 000000000..3466949bb Binary files /dev/null and b/app/assets/images/more_info/proposals.png differ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 36e055a4e..0720c103f 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -6,6 +6,7 @@ @import "admin"; @import "layout"; @import "participation"; +@import "pages"; @import "custom"; @import "c3"; @import "annotator.min"; diff --git a/app/assets/stylesheets/pages.scss b/app/assets/stylesheets/pages.scss new file mode 100644 index 000000000..f8bf6c7cd --- /dev/null +++ b/app/assets/stylesheets/pages.scss @@ -0,0 +1,111 @@ +// Table of Contents +// +// 01. Header +// 02. Navigation +// 03. Content +// 04. Sidebar +// + +// 01. Header +// ---------------------- + +.jumbo { + margin-bottom: $line-height; + margin-top: rem-calc(-24); + padding-bottom: $line-height; + padding-top: $line-height; + + &.light { + background: #ECF0F1; + } +} + +.lead { + font-size: rem-calc(24); +} + +// 03. Navigation +// ---------------------- + +.menu-pages { + list-style-type: none; + margin: 0; + + li { + display: block; + + @include breakpoint(medium) { + display: inline-block; + margin-right: $line-height/2; + } + } +} + +// 03. Content +// ---------------------- + +.more-info-content { + + h3 { + color: $brand; + } + + .additional-info { + margin-bottom: $line-height; + } + + a:not(.button) { + text-decoration: underline; + } + + figure { + margin: 0; + text-align: center; + + figcaption { + font-size: $small-font-size; + font-style: italic; + } + } + + ul.features { + list-style-type: circle; + margin-left: $line-height; + + @include breakpoint(medium) { + margin: $line-height 0 $line-height $line-height*2.5; + } + + li { + margin-bottom: $line-height + } + } + + .section-content { + border-top: 1px solid $medium-gray; + padding-bottom: $line-height*2; + padding-top: $line-height*2; + + &:first-child { + border-top: 0; + padding-top: 0; + } + } +} + +// 04. Sidebar +// ---------------------- + +.more-info-sidebar { + + .sidebar-card { + border: 1px solid $border; + margin-bottom: $line-height; + padding: $line-height/2; + + &.light { + background: #ECF0F1; + border: 0; + } + } +}