From dd4f1a3d9b02e55f68dbe12d2de7f0bc49c7911a Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Thu, 6 Apr 2017 12:52:27 +0200 Subject: [PATCH] Zurb foundation updated from 6.2 to 6.3 --- Gemfile | 2 +- app/assets/stylesheets/_settings.scss | 559 ++++-------------- app/assets/stylesheets/application.scss | 2 + app/assets/stylesheets/customisations.scss | 348 +++++++++++ .../stylesheets/foundation_and_overrides.scss | 6 +- 5 files changed, 483 insertions(+), 434 deletions(-) create mode 100644 app/assets/stylesheets/customisations.scss diff --git a/Gemfile b/Gemfile index 5adfb95..9197806 100644 --- a/Gemfile +++ b/Gemfile @@ -77,7 +77,7 @@ end # Zurb Foundation # https://github.com/zurb/foundation-rails -gem 'foundation-rails', '~> 6.2' +gem 'foundation-rails', '~> 6.3' # Pagination gem 'will_paginate' diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index e1867a0..af784b6 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -16,11 +16,11 @@ // 11. Button // 12. Button Group // 13. Callout -// 14. Close Button -// 15. Drilldown -// 16. Dropdown -// 17. Dropdown Menu -// 18. Flex Video +// 14. Card +// 15. Close Button +// 16. Drilldown +// 17. Dropdown +// 18. Dropdown Menu // 19. Forms // 20. Label // 21. Media Object @@ -30,25 +30,19 @@ // 25. Orbit // 26. Pagination // 27. Progress Bar -// 28. Reveal -// 29. Slider -// 30. Switch -// 31. Table -// 32. Tabs -// 33. Thumbnail -// 34. Title Bar -// 35. Tooltip -// 36. Top Bar +// 28. Responsive Embed +// 29. Reveal +// 30. Slider +// 31. Switch +// 32. Table +// 33. Tabs +// 34. Thumbnail +// 35. Title Bar +// 36. Tooltip +// 37. Top Bar @import 'util/util'; - -// my -/* TODO: Make colors themable - e.g. Ubuntu has brown and SuSE has green */ -$debian-color: #c70338; - - - // 1. Global // --------- @@ -56,12 +50,11 @@ $global-font-size: 100%; $global-width: rem-calc(1200); $global-lineheight: 1.5; $foundation-palette: ( - primary: $debian-color, - // primary: #2199e8, - secondary: #777, + primary: #1779ba, + secondary: #767676, success: #3adb76, warning: #ffae00, - alert: #ec5840, + alert: #cc4b37, ); $light-gray: #e6e6e6; $medium-gray: #cacaca; @@ -93,6 +86,7 @@ $breakpoints: ( xlarge: 1200px, xxlarge: 1440px, ); +$print-breakpoint: large; $breakpoint-classes: (small medium large); // 3. The Grid @@ -114,27 +108,27 @@ $header-font-family: $body-font-family; $header-font-weight: $global-weight-normal; $header-font-style: normal; $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; -$header-sizes: ( - small: ( - 'h1': 24, - 'h2': 20, - 'h3': 19, - 'h4': 18, - 'h5': 17, - 'h6': 16, - ), - medium: ( - 'h1': 48, - 'h2': 40, - 'h3': 31, - 'h4': 25, - 'h5': 20, - 'h6': 16, - ), -); $header-color: inherit; $header-lineheight: 1.4; $header-margin-bottom: 0.5rem; +$header-styles: ( + small: ( + 'h1': ('font-size': 24), + 'h2': ('font-size': 20), + 'h3': ('font-size': 19), + 'h4': ('font-size': 18), + 'h5': ('font-size': 17), + 'h6': ('font-size': 16), + ), + medium: ( + 'h1': ('font-size': 48), + 'h2': ('font-size': 40), + 'h3': ('font-size': 31), + 'h4': ('font-size': 25), + 'h5': ('font-size': 20), + 'h6': ('font-size': 16), + ), +); $header-text-rendering: optimizeLegibility; $small-font-size: 80%; $header-small-font-color: $medium-gray; @@ -168,6 +162,7 @@ $blockquote-padding: rem-calc(9 20 0 19); $blockquote-border: 1px solid $medium-gray; $cite-font-size: rem-calc(13); $cite-color: $dark-gray; +$cite-pseudo-content: '\2014 \0020'; $keystroke-font: $font-family-monospace; $keystroke-color: $black; $keystroke-background: $light-gray; @@ -192,9 +187,9 @@ $stat-font-size: 2.5rem; $abide-inputs: true; $abide-labels: true; -$input-background-invalid: map-get($foundation-palette, alert); -$form-label-color-invalid: map-get($foundation-palette, alert); -$input-error-color: map-get($foundation-palette, alert); +$input-background-invalid: get-color(alert); +$form-label-color-invalid: get-color(alert); +$input-error-color: get-color(alert); $input-error-font-size: rem-calc(12); $input-error-font-weight: $global-weight-bold; @@ -203,12 +198,13 @@ $input-error-font-weight: $global-weight-bold; $accordion-background: $white; $accordion-plusminus: true; -$accordion-item-color: foreground($accordion-background, $primary-color); +$accordion-title-font-size: rem-calc(12); +$accordion-item-color: $primary-color; $accordion-item-background-hover: $light-gray; $accordion-item-padding: 1.25rem 1rem; $accordion-content-background: $white; $accordion-content-border: 1px solid $light-gray; -$accordion-content-color: foreground($accordion-content-background, $body-font-color); +$accordion-content-color: $body-font-color; $accordion-content-padding: 1rem; // 8. Accordion Menu @@ -216,12 +212,15 @@ $accordion-content-padding: 1rem; $accordionmenu-arrows: true; $accordionmenu-arrow-color: $primary-color; +$accordionmenu-arrow-size: 6px; // 9. Badge // -------- $badge-background: $primary-color; -$badge-color: foreground($badge-background); +$badge-color: $white; +$badge-color-alt: $black; +$badge-palette: $foundation-palette; $badge-padding: 0.3em; $badge-minwidth: 2.1em; $badge-font-size: 0.6rem; @@ -255,7 +254,11 @@ $button-sizes: ( default: 0.9rem, large: 1.25rem, ); +$button-palette: $foundation-palette; $button-opacity-disabled: 0.25; +$button-background-hover-lightness: -20%; +$button-hollow-hover-lightness: -50%; +$button-transition: background-color 0.25s ease-out, color 0.25s ease-out; // 12. Button Group // ---------------- @@ -264,6 +267,7 @@ $buttongroup-margin: 1rem; $buttongroup-spacing: 1px; $buttongroup-child-selector: '.button'; $buttongroup-expand-max: 6; +$buttongroup-radius-on-each: true; // 13. Callout // ----------- @@ -278,29 +282,52 @@ $callout-font-color-alt: $body-background; $callout-radius: $global-radius; $callout-link-tint: 30%; -// 14. Close Button +// 14. Card +// -------- + +$card-background: $white; +$card-font-color: $body-font-color; +$card-divider-background: $light-gray; +$card-border: 1px solid $light-gray; +$card-shadow: none; +$card-border-radius: $global-radius; +$card-padding: $global-padding; +$card-margin: $global-margin; + +// 15. Close Button // ---------------- $closebutton-position: right top; -$closebutton-offset-horizontal: 1rem; -$closebutton-offset-vertical: 0.5rem; -$closebutton-size: 2em; +$closebutton-offset-horizontal: ( + small: 0.66rem, + medium: 1rem, +); +$closebutton-offset-vertical: ( + small: 0.33em, + medium: 0.5rem, +); +$closebutton-size: ( + small: 1.5em, + medium: 2em, +); $closebutton-lineheight: 1; $closebutton-color: $dark-gray; $closebutton-color-hover: $black; -// 15. Drilldown +// 16. Drilldown // ------------- $drilldown-transition: transform 0.15s linear; $drilldown-arrows: true; $drilldown-arrow-color: $primary-color; +$drilldown-arrow-size: 6px; $drilldown-background: $white; -// 16. Dropdown +// 17. Dropdown // ------------ $dropdown-padding: 1rem; +$dropdown-background: $body-background; $dropdown-border: 1px solid $medium-gray; $dropdown-font-size: 1rem; $dropdown-width: 300px; @@ -311,22 +338,16 @@ $dropdown-sizes: ( large: 400px, ); -// 17. Dropdown Menu +// 18. Dropdown Menu // ----------------- $dropdownmenu-arrows: true; $dropdownmenu-arrow-color: $anchor-color; +$dropdownmenu-arrow-size: 6px; $dropdownmenu-min-width: 200px; $dropdownmenu-background: $white; $dropdownmenu-border: 1px solid $medium-gray; -// 18. Flex Video -// -------------- - -$flexvideo-margin-bottom: rem-calc(16); -$flexvideo-ratio: 4 by 3; -$flexvideo-ratio-widescreen: 16 by 9; - // 19. Forms // --------- @@ -353,6 +374,7 @@ $input-color: $black; $input-placeholder-color: $medium-gray; $input-font-family: inherit; $input-font-size: rem-calc(16); +$input-font-weight: $global-weight-normal; $input-background: $white; $input-background-focus: $white; $input-background-disabled: $light-gray; @@ -364,12 +386,15 @@ $input-cursor-disabled: not-allowed; $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; $input-number-spinners: true; $input-radius: $global-radius; +$form-button-radius: $global-radius; // 20. Label // --------- $label-background: $primary-color; -$label-color: foreground($label-background); +$label-color: $white; +$label-color-alt: $black; +$label-palette: $foundation-palette; $label-font-size: 0.8rem; $label-padding: 0.33333rem 0.5rem; $label-radius: $global-radius; @@ -386,11 +411,12 @@ $mediaobject-image-width-stacked: 100%; $menu-margin: 0; $menu-margin-nested: 1rem; -// $menu-item-padding: 0.7rem 1rem; -$menu-item-padding: 0.5rem 1rem; +$menu-item-padding: 0.7rem 1rem; $menu-item-color-active: $white; -$menu-item-background-active: map-get($foundation-palette, primary); +$menu-item-background-active: get-color(primary); $menu-icon-spacing: 0.25rem; +$menu-item-background-hover: $light-gray; +$menu-border: $light-gray; // 23. Meter // --------- @@ -406,14 +432,17 @@ $meter-fill-bad: $alert-color; // -------------- $offcanvas-size: 250px; +$offcanvas-vertical-size: 250px; $offcanvas-background: $light-gray; -$offcanvas-zindex: -1; +$offcanvas-shadow: 0 0 10px rgba($black, 0.7); +$offcanvas-push-zindex: 1; +$offcanvas-overlap-zindex: 10; +$offcanvas-reveal-zindex: 1; $offcanvas-transition-length: 0.5s; $offcanvas-transition-timing: ease; $offcanvas-fixed-reveal: true; $offcanvas-exit-background: rgba($white, 0.25); $maincontent-class: 'off-canvas-content'; -$maincontent-shadow: 0 0 10px rgba($black, 0.5); // 25. Orbit // --------- @@ -441,10 +470,11 @@ $pagination-item-spacing: rem-calc(1); $pagination-radius: $global-radius; $pagination-item-background-hover: $light-gray; $pagination-item-background-current: $primary-color; -$pagination-item-color-current: foreground($pagination-item-background-current); +$pagination-item-color-current: $white; $pagination-item-color-disabled: $medium-gray; $pagination-ellipsis-color: $black; $pagination-mobile-items: false; +$pagination-mobile-current-item: false; $pagination-arrows: true; // 27. Progress Bar @@ -456,7 +486,16 @@ $progress-margin-bottom: $global-margin; $progress-meter-background: $primary-color; $progress-radius: $global-radius; -// 28. Reveal +// 28. Responsive Embed +// -------------------- + +$responsive-embed-margin-bottom: rem-calc(16); +$responsive-embed-ratios: ( + default: 4 by 3, + widescreen: 16 by 9, +); + +// 29. Reveal // ---------- $reveal-background: $white; @@ -468,7 +507,7 @@ $reveal-radius: $global-radius; $reveal-zindex: 1005; $reveal-overlay-background: rgba($black, 0.45); -// 29. Slider +// 30. Slider // ---------- $slider-width-vertical: 0.5rem; @@ -482,7 +521,7 @@ $slider-handle-background: $primary-color; $slider-opacity-disabled: 0.25; $slider-radius: $global-radius; -// 30. Switch +// 31. Switch // ---------- $switch-background: $medium-gray; @@ -498,7 +537,7 @@ $switch-paddle-offset: 0.25rem; $switch-paddle-radius: $global-radius; $switch-paddle-transition: all 0.25s ease-out; -// 31. Table +// 32. Table // --------- $table-background: $white; @@ -508,29 +547,35 @@ $table-padding: rem-calc(8 10 10); $table-hover-scale: 2%; $table-row-hover: darken($table-background, $table-hover-scale); $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); +$table-is-striped: true; $table-striped-background: smart-scale($table-background, $table-color-scale); $table-stripe: even; $table-head-background: smart-scale($table-background, $table-color-scale / 2); +$table-head-row-hover: darken($table-head-background, $table-hover-scale); $table-foot-background: smart-scale($table-background, $table-color-scale); +$table-foot-row-hover: darken($table-foot-background, $table-hover-scale); $table-head-font-color: $body-font-color; +$table-foot-font-color: $body-font-color; $show-header-for-stacked: false; -// 32. Tabs +// 33. Tabs // -------- $tab-margin: 0; $tab-background: $white; +$tab-color: $primary-color; $tab-background-active: $light-gray; +$tab-active-color: $primary-color; $tab-item-font-size: rem-calc(12); $tab-item-background-hover: $white; $tab-item-padding: 1.25rem 1.5rem; $tab-expand-max: 6; $tab-content-background: $white; $tab-content-border: $light-gray; -$tab-content-color: foreground($tab-background, $primary-color); +$tab-content-color: $body-font-color; $tab-content-padding: 1rem; -// 33. Thumbnail +// 34. Thumbnail // ------------- $thumbnail-border: solid 4px $white; @@ -540,7 +585,7 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); $thumbnail-transition: box-shadow 200ms ease-out; $thumbnail-radius: $global-radius; -// 34. Title Bar +// 35. Title Bar // ------------- $titlebar-background: $black; @@ -551,7 +596,7 @@ $titlebar-icon-color: $white; $titlebar-icon-color-hover: $medium-gray; $titlebar-icon-spacing: 0.25rem; -// 35. Tooltip +// 36. Tooltip // ----------- $has-tip-font-weight: $global-weight-bold; @@ -564,362 +609,12 @@ $tooltip-pip-width: 0.75rem; $tooltip-pip-height: $tooltip-pip-width * 0.866; $tooltip-radius: $global-radius; -// 36. Top Bar +// 37. Top Bar // ----------- $topbar-padding: 0.5rem; -// $topbar-background: $light-gray; -$topbar-background: #2e3436; +$topbar-background: $light-gray; $topbar-submenu-background: $topbar-background; -$topbar-title-spacing: 1rem; +$topbar-title-spacing: 0.5rem 1rem 0.5rem 0; $topbar-input-width: 200px; $topbar-unstack-breakpoint: medium; - -// --------------------------------------------------- -// -------------- debshots --------------------------- -// --------------------------------------------------- - -$topbar-padding: 0; - -// At which width the top navigation bar should be switched to -// mobile mode because otherwise it would wrap into two lines. -// $topbar-breakpoint: 800px; -// $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})"; - -// Use fonts from out own site. Do not load from Google for privacy reasons. -@font-face { - font-family: 'Droid Sans'; - font-style: normal; - font-weight: 400; - src: local('Droid Sans'), local('DroidSans'), url(/fonts/DroidSans.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; -} -@font-face { - font-family: 'Droid Sans'; - font-style: normal; - font-weight: 700; - src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(/fonts/DroidSans-Bold.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; -} - -$body-font-family: "Droid Sans"; - -$button-tny: rem-calc(4); -$button-font-tny: rem-calc(15); - -// Make the background of progress bars use a light version of the primary color -$progress-bar-color: tint($primary-color, 80); - -$page-background: #f2f2f2; -$footer-background: #333333; -$footer-text-color: #b3b3b3; - -$menu-item-background-active: $primary-color; - -header -{ - // background-color: $light-gray; - background-color: #2e3436; -} - -body -{ - background-color: $page-background; -} - -#teaser -{ - // Leave some space between topbar and teaser on the home page - padding-top: 20px; - - h1 - { - // Larger "We have screenshots!" teaser title - font-weight: 700; - } -} - -.top-bar-left .sitename -{ - // Display the site name in a larger font - font-size: 26px; - padding: 8px 5px 3px 0; - color: $dark-gray; - - // Extra space around the Linux distribution's logo - img - { - padding: 0 5px; - } -} - -.top-bar-right .menu li a -{ - padding-top: 1.3rem; - padding-bottom: 1.3rem; -} - -.top-bar -{ - // Draw a colored line below the navigation topbar - border-bottom: 5px solid $debian_color; - color: #8a8a8a; - - a - { - color: #8a8a8a; - } - - a.active - { - color: #fefefe; - } -} - -// ------- Footer - format as table cell to allow vertical centering -/*@import "compass/layout/sticky-footer";*/ -/*@include sticky-footer(40px, "#wholepage");*/ - -html, body { - height: 100%; -} - -// Wrapper that makes the page 100% high so the start page looks entirely filled -#wholepage -{ - height: 100%; -} - -// #footer -// { -// background-color: $footer-background; -// display: table; -// width: 100%; - -// p -// { -// display: table-cell; -// padding: 5px 20px; -// color: $footer-text-color; -// vertical-align: middle; -// text-align: center; -// font-size: 100%; -// } - -// a -// { -// color: $footer-text-color; -// font-weight: bolder; -// } -// } - - -// Leave some room after the topbar -#content -{ - padding-top: 5px; -} - -.grid-thumbnails .column -{ - border-radius: 10px; - padding: 5px 5px 50px 5px; - text-align: center; -} - -// Vertical icon bar in package view -#sidebar -{ - text-align: center; - - // Text over a group of icons - .caption - { - padding-bottom: 5px; - color: black; - } - - // An icon - .item - { - padding-bottom: 10px; - } - - // Leave space after the last icon in a group - .space - { - padding-bottom: 20px; - } -} - -// List view -.row .listview -{ - // Leave vertical space and draw a line between package rows - border-bottom: 2px solid #d0d0d0; - padding-bottom: 20px; - margin-bottom: 20px; - - img.screenshot - { - width: 100%; - } - - img - { - box-shadow: 0px 0px 5px #000000; - } -} - -.fancybox -{ - img - { - box-shadow: 0px 0px 5px #000000; - } -} - -.pkgname -{ - font-size: 130%; - font-weight: 700; - padding-bottom: 5px; - line-height: 120%; -} - -.grid-thumbnail -{ - // Pretend that all thumbnails are 120 pixels high to align the captions properly - height: 130px; -} - -// Avoid painting links to detail packages in the primary color -a.black -{ - color: black; -} - -.gray -{ - color: #808080; -} - -.bigpanel -{ - background-color: $light-gray; - border-radius: 10px; - padding: 1em 1em 0.1em 1em; - margin-bottom: 1em; -} - -.subtitle -{ - font-size: 120%; - color: #808080; -} - -.packagepage -{ - h1 - { - margin-bottom: 0; - } - - - /* Description of a screenshot (e.g. the situation when the screenshot was taken) */ - .imgcaption - { - text-align: center; - font-variant: italic; - } - - /* Status of a screenshot (e.g. if it has to be moderated) */ - .imgstatus - { - text-align: center; - font-style: italic; - color: #808080; - } - - - .comment - { - font-size: 90%; - - .summary - { - font-weight: 700; - } - - .author - { - text-align: right; - color: #808080; - font-style: italic; - } - } - - form.comment - { - border: 2px solid #a0a0a0; - background-color: white; - border-radius: 10px; - padding: 10px; - margin-bottom: 10px; - - .summary input,textarea - { - margin-bottom: 0; - } - - // Hide most elements in a comment input form. - // They get shown once the summary field is typed into. - .content,.author,.submit - { - display: none; - } - } -} - -/* Properties of a screenshot - shown in details view */ -.property-title -{ - font-weight: bolder; - font-size: 120%; - color: #808080; -} - -.property -{ - margin-left: 2em; - margin-bottom: 0.5em; -} - -.description-verbatim-lines -{ - line-height: 120%; -} - -/* Hide the file upload button to just show the styleable label */ -/* display: none will not work - this is the workaround */ -.hidden-inputfile { - width: 0.1px; - height: 0.1px; - opacity: 0; - overflow: hidden; - position: absolute; - z-index: -1; -} -.inputfile + label { - cursor: pointer; /* "hand" cursor */ -} - -/* Foundation sets file buttons to 100% width. Fix that */ -[type='file'] { - width: inherit !important; -} - -/* Badges in the topbar seem a bit too high */ -nav.top-bar .badge { - padding-bottom: 0.2em; -} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 246b8d8..9d5c693 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -9,6 +9,8 @@ * compiled file, but it's generally better to create a new file per style scope. * *= require_self +//= require foundation_and_overrides + *= require foundation_and_overrides *= require cookies_eu *= require fancybox diff --git a/app/assets/stylesheets/customisations.scss b/app/assets/stylesheets/customisations.scss new file mode 100644 index 0000000..b0589c6 --- /dev/null +++ b/app/assets/stylesheets/customisations.scss @@ -0,0 +1,348 @@ +// --------------------------------------------------- +// -------------- debshots --------------------------- +// --------------------------------------------------- + +$topbar-padding: 0; + +// At which width the top navigation bar should be switched to +// mobile mode because otherwise it would wrap into two lines. +// $topbar-breakpoint: 800px; +// $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})"; + +// Use fonts from out own site. Do not load from Google for privacy reasons. +@font-face { + font-family: 'Droid Sans'; + font-style: normal; + font-weight: 400; + src: local('Droid Sans'), local('DroidSans'), url(/fonts/DroidSans.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; +} +@font-face { + font-family: 'Droid Sans'; + font-style: normal; + font-weight: 700; + src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(/fonts/DroidSans-Bold.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; +} + +$body-font-family: "Droid Sans"; + +$button-tny: rem-calc(4); +$button-font-tny: rem-calc(15); + +// Make the background of progress bars use a light version of the primary color +$progress-bar-color: tint($primary-color, 80); + +$page-background: #f2f2f2; +$footer-background: #333333; +$footer-text-color: #b3b3b3; + +$menu-item-background-active: $primary-color; + +header +{ + // background-color: $light-gray; + background-color: #2e3436; +} + +body +{ + background-color: $page-background; +} + +#teaser +{ + // Leave some space between topbar and teaser on the home page + padding-top: 20px; + + h1 + { + // Larger "We have screenshots!" teaser title + font-weight: 700; + } +} + +.top-bar-left .sitename +{ + // Display the site name in a larger font + font-size: 26px; + padding: 8px 5px 3px 0; + color: $dark-gray; + + // Extra space around the Linux distribution's logo + img + { + padding: 0 5px; + } +} + +.top-bar-right .menu li a +{ + padding-top: 1.3rem; + padding-bottom: 1.3rem; +} + +.top-bar +{ + // Draw a colored line below the navigation topbar + border-bottom: 5px solid $debian_color; + color: #8a8a8a; + + a + { + color: #8a8a8a; + } + + a.active + { + color: #fefefe; + } +} + +// ------- Footer - format as table cell to allow vertical centering +/*@import "compass/layout/sticky-footer";*/ +/*@include sticky-footer(40px, "#wholepage");*/ + +html, body { + height: 100%; +} + +// Wrapper that makes the page 100% high so the start page looks entirely filled +#wholepage +{ + height: 100%; +} + +// #footer +// { +// background-color: $footer-background; +// display: table; +// width: 100%; + +// p +// { +// display: table-cell; +// padding: 5px 20px; +// color: $footer-text-color; +// vertical-align: middle; +// text-align: center; +// font-size: 100%; +// } + +// a +// { +// color: $footer-text-color; +// font-weight: bolder; +// } +// } + + +// Leave some room after the topbar +#content +{ + padding-top: 5px; +} + +.grid-thumbnails .column +{ + border-radius: 10px; + padding: 5px 5px 50px 5px; + text-align: center; +} + +// Vertical icon bar in package view +#sidebar +{ + text-align: center; + + // Text over a group of icons + .caption + { + padding-bottom: 5px; + color: black; + } + + // An icon + .item + { + padding-bottom: 10px; + } + + // Leave space after the last icon in a group + .space + { + padding-bottom: 20px; + } +} + +// List view +.row .listview +{ + // Leave vertical space and draw a line between package rows + border-bottom: 2px solid #d0d0d0; + padding-bottom: 20px; + margin-bottom: 20px; + + img.screenshot + { + width: 100%; + } + + img + { + box-shadow: 0px 0px 5px #000000; + } +} + +.fancybox +{ + img + { + box-shadow: 0px 0px 5px #000000; + } +} + +.pkgname +{ + font-size: 130%; + font-weight: 700; + padding-bottom: 5px; + line-height: 120%; +} + +.grid-thumbnail +{ + // Pretend that all thumbnails are 120 pixels high to align the captions properly + height: 130px; +} + +// Avoid painting links to detail packages in the primary color +a.black +{ + color: black; +} + +.gray +{ + color: #808080; +} + +.bigpanel +{ + background-color: $light-gray; + border-radius: 10px; + padding: 1em 1em 0.1em 1em; + margin-bottom: 1em; +} + +.subtitle +{ + font-size: 120%; + color: #808080; +} + +.packagepage +{ + h1 + { + margin-bottom: 0; + } + + + /* Description of a screenshot (e.g. the situation when the screenshot was taken) */ + .imgcaption + { + text-align: center; + font-variant: italic; + } + + /* Status of a screenshot (e.g. if it has to be moderated) */ + .imgstatus + { + text-align: center; + font-style: italic; + color: #808080; + } + + + .comment + { + font-size: 90%; + + .summary + { + font-weight: 700; + } + + .author + { + text-align: right; + color: #808080; + font-style: italic; + } + } + + form.comment + { + border: 2px solid #a0a0a0; + background-color: white; + border-radius: 10px; + padding: 10px; + margin-bottom: 10px; + + .summary input,textarea + { + margin-bottom: 0; + } + + // Hide most elements in a comment input form. + // They get shown once the summary field is typed into. + .content,.author,.submit + { + display: none; + } + } +} + +/* Properties of a screenshot - shown in details view */ +.property-title +{ + font-weight: bolder; + font-size: 120%; + color: #808080; +} + +.property +{ + margin-left: 2em; + margin-bottom: 0.5em; +} + +.description-verbatim-lines +{ + line-height: 120%; +} + +/* Hide the file upload button to just show the styleable label */ +/* display: none will not work - this is the workaround */ +.hidden-inputfile { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; +} +.inputfile + label { + cursor: pointer; /* "hand" cursor */ +} + +/* Foundation sets file buttons to 100% width. Fix that */ +[type='file'] { + width: inherit !important; +} + +/* Badges in the topbar seem a bit too high */ +nav.top-bar .badge { + padding-bottom: 0.2em; +} diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss index f60bbaf..4ee5d58 100644 --- a/app/assets/stylesheets/foundation_and_overrides.scss +++ b/app/assets/stylesheets/foundation_and_overrides.scss @@ -1,6 +1,9 @@ @charset 'utf-8'; +$debian-color: #c70338; + @import 'settings'; +@import 'customisations'; @import 'foundation'; // If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package. @@ -22,11 +25,12 @@ @include foundation-breadcrumbs; @include foundation-button-group; @include foundation-callout; +@include foundation-card; @include foundation-close-button; @include foundation-drilldown-menu; @include foundation-dropdown; @include foundation-dropdown-menu; -@include foundation-flex-video; +@include foundation-responsive-embed; @include foundation-label; @include foundation-media-object; @include foundation-menu;