Partially migrated to Foundatoin 6
This commit is contained in:
parent
d7bfa0843f
commit
7e7d2e6c0b
6 changed files with 388 additions and 391 deletions
|
|
@ -17,4 +17,4 @@
|
||||||
//= require cookies_eu
|
//= require cookies_eu
|
||||||
//= require_tree .
|
//= require_tree .
|
||||||
|
|
||||||
$(document).foundation();
|
$(function(){ $(document).foundation(); });
|
||||||
|
|
|
||||||
|
|
@ -41,13 +41,21 @@
|
||||||
|
|
||||||
@import 'util/util';
|
@import 'util/util';
|
||||||
|
|
||||||
|
|
||||||
|
// my
|
||||||
|
/* TODO: Make colors themable - e.g. Ubuntu has brown and SuSE has green */
|
||||||
|
$debian-color: #c70338;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 1. Global
|
// 1. Global
|
||||||
// ---------
|
// ---------
|
||||||
|
|
||||||
$global-font-size: 100%;
|
$global-font-size: 100%;
|
||||||
$global-width: rem-calc(1200);
|
$global-width: rem-calc(1200);
|
||||||
$global-lineheight: 1.5;
|
$global-lineheight: 1.5;
|
||||||
$primary-color: #2199e8;
|
//$primary-color: #2199e8;
|
||||||
|
$primary-color: $debian-color;
|
||||||
$secondary-color: #777;
|
$secondary-color: #777;
|
||||||
$success-color: #3adb76;
|
$success-color: #3adb76;
|
||||||
$warning-color: #ffae00;
|
$warning-color: #ffae00;
|
||||||
|
|
@ -546,3 +554,370 @@ $topbar-padding: 0.5rem;
|
||||||
$topbar-background: $light-gray;
|
$topbar-background: $light-gray;
|
||||||
$topbar-title-spacing: 1rem;
|
$topbar-title-spacing: 1rem;
|
||||||
$topbar-input-width: 200px;
|
$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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,10 +9,7 @@
|
||||||
* compiled file, but it's generally better to create a new file per style scope.
|
* compiled file, but it's generally better to create a new file per style scope.
|
||||||
*
|
*
|
||||||
*= require_self
|
*= require_self
|
||||||
//= require foundation_and_overrides
|
*= require foundation_and_overrides
|
||||||
*= require cookies_eu
|
*= require cookies_eu
|
||||||
*= require fancybox
|
*= require fancybox
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "foundation_and_overrides";
|
|
||||||
@import "my";
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +1,14 @@
|
||||||
header
|
header
|
||||||
div.contain-to-grid
|
div.contain-to-grid
|
||||||
nav.top-bar data-topbar=true role="navigation"
|
.top-bar
|
||||||
ul.title-area
|
.top-bar-title
|
||||||
// TODO: Make the logo depend on the virtual host
|
// TODO: Make the logo depend on the virtual host
|
||||||
li.name
|
img src="/images/logos/debian.svg" width="35" alt="Debian logo"
|
||||||
img src="/images/logos/debian.svg" width="35" alt="Debian logo"
|
// TODO: Use proper distribution name
|
||||||
// TODO: Use proper distribution name
|
'Debian Screenshots >
|
||||||
'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
|
|
||||||
|
|
||||||
section.top-bar-section
|
.top-bar-right
|
||||||
ul.right
|
ul.menu
|
||||||
li class=('active' if controller_name=='welcome' and action_name=='home')
|
li class=('active' if controller_name=='welcome' and action_name=='home')
|
||||||
a href="/" Home
|
a href="/" Home
|
||||||
li class=('active' if controller_name=='packages')
|
li class=('active' if controller_name=='packages')
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
doctype html
|
doctype html
|
||||||
html
|
html
|
||||||
head
|
head
|
||||||
title screenshots.debian.net
|
title =(content_for?(:title) ? yield(:title) : "screenshots.debian.net")
|
||||||
/ TODO: make title reflect the virtual host (e.g. Debian)
|
/ TODO: make title reflect the virtual host (e.g. Debian)
|
||||||
meta charset="utf-8"
|
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"
|
meta name="viewport" content="width=device-width, initial-scale=1.0"
|
||||||
/ TODO: make the keywords reflect the virtual host (e.g. Debian)
|
/ TODO: make the keywords reflect the virtual host (e.g. Debian)
|
||||||
= stylesheet_link_tag "application", media: "all"
|
= stylesheet_link_tag "application", media: "all"
|
||||||
= javascript_include_tag "vendor/modernizr"
|
/ = javascript_include_tag "vendor/modernizr"
|
||||||
= javascript_include_tag "application"
|
= javascript_include_tag "application"
|
||||||
= csrf_meta_tags
|
= csrf_meta_tags
|
||||||
|
|
||||||
|
|
@ -24,7 +24,6 @@ html
|
||||||
// Load Javascript libraries
|
// Load Javascript libraries
|
||||||
// Initialize Zurb Foundation
|
// Initialize Zurb Foundation
|
||||||
javascript:
|
javascript:
|
||||||
//$(document).foundation();
|
|
||||||
$(".fancybox").fancybox({
|
$(".fancybox").fancybox({
|
||||||
prevEffect : 'none',
|
prevEffect : 'none',
|
||||||
nextEffect : 'none',
|
nextEffect : 'none',
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue