Partially migrated to Foundatoin 6

This commit is contained in:
Christoph Haas 2016-03-02 21:36:58 +01:00
parent d7bfa0843f
commit 7e7d2e6c0b
6 changed files with 388 additions and 391 deletions

View file

@ -17,4 +17,4 @@
//= require cookies_eu
//= require_tree .
$(document).foundation();
$(function(){ $(document).foundation(); });

View file

@ -41,13 +41,21 @@
@import 'util/util';
// my
/* TODO: Make colors themable - e.g. Ubuntu has brown and SuSE has green */
$debian-color: #c70338;
// 1. Global
// ---------
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$primary-color: #2199e8;
//$primary-color: #2199e8;
$primary-color: $debian-color;
$secondary-color: #777;
$success-color: #3adb76;
$warning-color: #ffae00;
@ -546,3 +554,370 @@ $topbar-padding: 0.5rem;
$topbar-background: $light-gray;
$topbar-title-spacing: 1rem;
$topbar-input-width: 200px;
// ---------------------------------------------------
// -------------- debshots ---------------------------
// ---------------------------------------------------
// Hover colors of links in top bar
$topbar-link-bg-hover: $primary-color;
$topbar-dropdown-link-bg-hover: $primary-color;
// Larger top bar
// $topbar-height: rem-calc(60);
// Larger font in top bar
// $topbar-link-font-size: rem-calc(15);
$topbar-padding: 0;
// $topbar-button-font-size: rem-calc(3);
// $topbar-button-top: rem-calc(5);
// $topbar-link-padding: rem-calc(8);
// 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})";
// Import Google font
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
$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);
// Enable special grid and block-grid sizes for xlarge and xxlarge screens
/*$include-xl-html-grid-classes: true;*/
/*$include-xl-html-block-grid-classes: true;*/
/*$row-width: 100%;*/
$page-background: #f2f2f2;
$footer-background: #333333;
$footer-text-color: #b3b3b3;
$menu-item-background-active: $primary-color;
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-title
{
// Display the site name in a larger font
font-size: 26px;
padding: 8px 5px 3px 0;
color: #babdb6;
// Extra space around the Linux distribution's logo
img
{
padding: 0 5px;
}
}
header
{
// Draw a colored line below the navigation topbar
border-bottom: 5px solid $debian_color;
}
// ------- 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: 0 20px;
color: $footer-text-color;
vertical-align: middle;
text-align: center;
font-size: 80%;
}
a
{
color: $footer-text-color;
font-weight: bolder;
}
}
// Leave some room after the topbar
#content
{
padding-top: 5px;
}
// Screenshot thumbnail image with name and description
.thumbnail
{
padding-top: 5px !important;
padding-bottom: 5px !important;
border-radius: 10px;
margin-bottom: 10px;
text-align: center;
line-height: 120%;
&:hover
{
background-color: #d0d0d0;
}
.pkgname
{
font-weight: 700;
}
.pkgdescription
{
font-size: 80%;
}
}
// 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
{
filter: drop-shadow( 0px 0px 5px #888888 );
}
}
.row .gridview
{
img.screenshot
{
width: 100%;
}
}
.pkgname
{
font-size: 130%;
font-weight: 700;
padding-bottom: 5px;
line-height: 120%;
}
/*.pkgdetails
{
.description
{
font-size: 150%;
color: #808080;
padding-bottom: 10px;
}
.longdescription
{
font-size: 90%;
line-height: 120%;
padding-bottom: 5px;
}
.rating
{
padding-top: 5px;
vertical-align: bottom;
}
.commentcount
{
padding-left: 20px;
}
}
*/
.grid-thumbnail
{
height: 125px;
}
// Avoid painting links to detail packages in the primary color
a.black
{
color: black;
}
.gray
{
color: #808080;
}
.packagepage
{
h1
{
margin-bottom: 0;
}
.subtitle
{
font-size: 120%;
color: #808080;
}
/* 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;
}
.bigpanel
{
background-color: white;
border-radius: 10px;
padding: 1em 1em 0.1em 1em;
margin-bottom: 1em;
}
.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;
}
}
}
// .ratingbar
// {
// background-color: $progress-bar-color;
// width: 10em;
// display: inline-block;
// padding: 2px;
// text-align: left;
// color: white;
// text-transform: uppercase;
// font-size: 0.8em;
// font-weight: bolder;
// .meter
// {
// background-color: $primary-color;
// padding: 2px;
// padding-left: 0.4em;
// text-shadow: 0 0 2px black;
// }
// }
/* 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;
}

View file

@ -9,10 +9,7 @@
* 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
*/
@import "foundation_and_overrides";
@import "my";

View file

@ -1,366 +0,0 @@
// my own changes
/* TODO: Make colors themable - e.g. Ubuntu has brown and SuSE has green */
$debian_color: #c70338;
$primary-color: $debian_color;
// Hover colors of links in top bar
$topbar-link-bg-hover: $primary-color;
$topbar-dropdown-link-bg-hover: $primary-color;
// Larger top bar
$topbar-height: rem-calc(60);
// Larger font in top bar
$topbar-link-font-size: rem-calc(15);
$topbar-button-font-size: rem-calc(3);
$topbar-button-top: rem-calc(5);
$topbar-link-padding: rem-calc(8);
// 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})";
// Import Google font
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
$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);
// Enable special grid and block-grid sizes for xlarge and xxlarge screens
/*$include-xl-html-grid-classes: true;*/
/*$include-xl-html-block-grid-classes: true;*/
/*$row-width: 100%;*/
// -------------- debshots ---------------------------
$page-background: #f2f2f2;
$footer-background: #333333;
$footer-text-color: #b3b3b3;
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 .name
{
// Display the site name in a larger font
font-size: 26px;
padding: 8px 5px 3px 0;
color: #babdb6;
// Extra space around the Linux distribution's logo
img
{
padding: 0 5px;
}
}
header
{
// Draw a colored line below the navigation topbar
border-bottom: 5px solid $debian_color;
}
// ------- 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: 0 20px;
color: $footer-text-color;
vertical-align: middle;
text-align: center;
font-size: 80%;
}
a
{
color: $footer-text-color;
font-weight: bolder;
}
}
// Leave some room after the topbar
#content
{
padding-top: 5px;
}
// Screenshot thumbnail image with name and description
.thumbnail
{
padding-top: 5px !important;
padding-bottom: 5px !important;
border-radius: 10px;
margin-bottom: 10px;
text-align: center;
line-height: 120%;
&:hover
{
background-color: #d0d0d0;
}
.pkgname
{
font-weight: 700;
}
.pkgdescription
{
font-size: 80%;
}
}
// 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
{
filter: drop-shadow( 0px 0px 5px #888888 );
}
}
.row .gridview
{
img.screenshot
{
width: 100%;
}
}
.pkgname
{
font-size: 130%;
font-weight: 700;
padding-bottom: 5px;
line-height: 120%;
}
/*.pkgdetails
{
.description
{
font-size: 150%;
color: #808080;
padding-bottom: 10px;
}
.longdescription
{
font-size: 90%;
line-height: 120%;
padding-bottom: 5px;
}
.rating
{
padding-top: 5px;
vertical-align: bottom;
}
.commentcount
{
padding-left: 20px;
}
}
*/
.grid-thumbnail
{
height: 125px;
}
// Avoid painting links to detail packages in the primary color
a.black
{
color: black;
}
.gray
{
color: #808080;
}
.packagepage
{
h1
{
margin-bottom: 0;
}
.subtitle
{
font-size: 120%;
color: #808080;
}
/* 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;
}
.bigpanel
{
background-color: white;
border-radius: 10px;
padding: 1em 1em 0.1em 1em;
margin-bottom: 1em;
}
.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;
}
}
}
// .ratingbar
// {
// background-color: $progress-bar-color;
// width: 10em;
// display: inline-block;
// padding: 2px;
// text-align: left;
// color: white;
// text-transform: uppercase;
// font-size: 0.8em;
// font-weight: bolder;
// .meter
// {
// background-color: $primary-color;
// padding: 2px;
// padding-left: 0.4em;
// text-shadow: 0 0 2px black;
// }
// }
/* 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;
}

View file

@ -1,22 +1,14 @@
header
div.contain-to-grid
nav.top-bar data-topbar=true role="navigation"
ul.title-area
.top-bar
.top-bar-title
// TODO: Make the logo depend on the virtual host
li.name
img src="/images/logos/debian.svg" width="35" alt="Debian logo"
// TODO: Use proper distribution name
'Debian Screenshots >
// Not enough space for the search… where do we put it?
//li.item
// = form_tag( url(:package, :index), :method=>'get')
// = search_field_tag :search, :placeholder=>'Search…', :autofocus=>true
li.toggle-topbar.menu-icon
a href="#"
span Menu
img src="/images/logos/debian.svg" width="35" alt="Debian logo"
// TODO: Use proper distribution name
'Debian Screenshots >
section.top-bar-section
ul.right
.top-bar-right
ul.menu
li class=('active' if controller_name=='welcome' and action_name=='home')
a href="/" Home
li class=('active' if controller_name=='packages')

View file

@ -1,14 +1,14 @@
doctype html
html
head
title screenshots.debian.net
title =(content_for?(:title) ? yield(:title) : "screenshots.debian.net")
/ TODO: make title reflect the virtual host (e.g. Debian)
meta charset="utf-8"
meta name="keywords" content="debian screenshots packages applications linux"
/ meta name="keywords" content="debian screenshots packages applications linux"
meta name="viewport" content="width=device-width, initial-scale=1.0"
/ TODO: make the keywords reflect the virtual host (e.g. Debian)
= stylesheet_link_tag "application", media: "all"
= javascript_include_tag "vendor/modernizr"
/ = javascript_include_tag "vendor/modernizr"
= javascript_include_tag "application"
= csrf_meta_tags
@ -24,7 +24,6 @@ html
// Load Javascript libraries
// Initialize Zurb Foundation
javascript:
//$(document).foundation();
$(".fancybox").fancybox({
prevEffect : 'none',
nextEffect : 'none',