Restyling
This commit is contained in:
Christoph Haas
parent
9d6baa20e5
commit
06b8f92963
21 changed files with 492 additions and 493 deletions
|
|
@ -69,7 +69,7 @@ $global-font-size: 100%;
|
|||
$global-width: rem-calc(1200);
|
||||
$global-lineheight: 1.5;
|
||||
$foundation-palette: (
|
||||
primary: #1779ba,
|
||||
primary: #c70338,
|
||||
secondary: #767676,
|
||||
success: #3adb76,
|
||||
warning: #ffae00,
|
||||
|
|
@ -80,9 +80,11 @@ $medium-gray: #cacaca;
|
|||
$dark-gray: #8a8a8a;
|
||||
$black: #0a0a0a;
|
||||
$white: #fefefe;
|
||||
$body-background: $white;
|
||||
// $body-background: $white;
|
||||
$body-background: #f2f2f2;
|
||||
$body-font-color: $black;
|
||||
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
|
||||
$body-font-family: 'Droid Sans', sans-serif;
|
||||
// $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
|
||||
$body-antialiased: true;
|
||||
$global-margin: 1rem;
|
||||
$global-padding: 1rem;
|
||||
|
|
@ -90,7 +92,8 @@ $global-position: 1rem;
|
|||
$global-weight-normal: normal;
|
||||
$global-weight-bold: bold;
|
||||
$global-radius: 0;
|
||||
$global-menu-padding: 0.7rem 1rem;
|
||||
$global-menu-padding: 0.3rem 0.5rem;
|
||||
// $global-menu-padding: 0.7rem 1rem;
|
||||
$global-menu-nested-margin: 1rem;
|
||||
$global-text-direction: ltr;
|
||||
$global-flexbox: true;
|
||||
|
|
@ -845,8 +848,9 @@ $tooltip-radius: $global-radius;
|
|||
// 55. Top Bar
|
||||
// -----------
|
||||
|
||||
$topbar-padding: 0.5rem;
|
||||
$topbar-background: $light-gray;
|
||||
$topbar-padding: 0;
|
||||
// $topbar-background: $light-gray;
|
||||
$topbar-background: #d8d8d8;
|
||||
$topbar-submenu-background: $topbar-background;
|
||||
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
|
||||
$topbar-input-width: 200px;
|
||||
|
|
|
|||
|
|
@ -13,4 +13,5 @@
|
|||
*= require cookies_eu
|
||||
*= require fancybox
|
||||
*= require font-awesome
|
||||
*= require my_styles
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
@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.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
// ---------------------------------------------------
|
||||
// -------------- debshots ---------------------------
|
||||
// ---------------------------------------------------
|
||||
|
||||
$topbar-padding: 0;
|
||||
// $topbar-padding: 0;
|
||||
|
||||
// At which width the top navigation bar should be switched to
|
||||
// mobile mode because otherwise it would wrap into two lines.
|
||||
|
|
@ -25,61 +22,69 @@ $topbar-padding: 0;
|
|||
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);
|
||||
// $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);
|
||||
// $progress-bar-color: tint($primary-color, 80);
|
||||
|
||||
$page-background: #f2f2f2;
|
||||
$footer-background: #333333;
|
||||
$footer-text-color: #b3b3b3;
|
||||
// $page-background: #f2f2f2;
|
||||
// $footer-background: #333333;
|
||||
// $footer-text-color: #b3b3b3;
|
||||
|
||||
$menu-item-background-active: $primary-color;
|
||||
// $menu-item-color-active: $white;
|
||||
// $menu-item-background-active: get-color(primary);
|
||||
// $menu-icon-spacing: 0.25rem;
|
||||
// $menu-item-background-hover: $light-gray;
|
||||
|
||||
header
|
||||
{
|
||||
// background-color: $light-gray;
|
||||
background-color: #2e3436;
|
||||
}
|
||||
// $menu-item-background-active: $primary-color;
|
||||
|
||||
body
|
||||
{
|
||||
background-color: $page-background;
|
||||
}
|
||||
// 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
|
||||
// Menu text not bold
|
||||
.menu .menu-text {
|
||||
font-weight: 100 !important;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
h1, h2, h3
|
||||
{
|
||||
.menu .menu-text
|
||||
{
|
||||
// Display the site name in a larger font
|
||||
font-size: 26px;
|
||||
padding: 8px 5px 3px 0;
|
||||
color: $dark-gray;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// Extra space around the Linux distribution's logo
|
||||
img
|
||||
{
|
||||
padding: 5px;
|
||||
}
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
// .top-bar-left
|
||||
// {
|
||||
// .menu .menu-text
|
||||
// {
|
||||
// // Display the site name in a larger font
|
||||
// font-size: 1.2rem;
|
||||
// padding: 10px 5px 3px 0;
|
||||
// color: $dark-gray;
|
||||
// font-weight: normal;
|
||||
// }
|
||||
|
||||
// // Extra space around the Linux distribution's logo
|
||||
// img
|
||||
// {
|
||||
// padding: 5px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// Make thumbnails equally high
|
||||
div.thumb-height
|
||||
{
|
||||
|
|
@ -135,15 +140,15 @@ div.thumb-height
|
|||
/*@import "compass/layout/sticky-footer";*/
|
||||
/*@include sticky-footer(40px, "#wholepage");*/
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
// html, body {
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// Wrapper that makes the page 100% high so the start page looks entirely filled
|
||||
#wholepage
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
// #wholepage
|
||||
// {
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// #footer
|
||||
// {
|
||||
|
|
@ -170,17 +175,17 @@ html, body {
|
|||
|
||||
|
||||
// Leave some room after the topbar
|
||||
#content
|
||||
{
|
||||
padding-top: 5px;
|
||||
}
|
||||
// #content
|
||||
// {
|
||||
// padding-top: 5px;
|
||||
// }
|
||||
|
||||
.grid-thumbnails .column
|
||||
{
|
||||
border-radius: 10px;
|
||||
padding: 5px 5px 50px 5px;
|
||||
text-align: center;
|
||||
}
|
||||
// .grid-thumbnails .column
|
||||
// {
|
||||
// border-radius: 10px;
|
||||
// padding: 5px 5px 50px 5px;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
// Vertical icon bar in package view
|
||||
#sidebar
|
||||
|
|
@ -208,33 +213,33 @@ html, body {
|
|||
}
|
||||
|
||||
// List view
|
||||
.row .listview
|
||||
{
|
||||
// Leave vertical space and draw a line between package rows
|
||||
border-bottom: 1px solid rgba(0,0,0, 0.2);
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
// .row .listview
|
||||
// {
|
||||
// // Leave vertical space and draw a line between package rows
|
||||
// border-bottom: 1px solid rgba(0,0,0, 0.2);
|
||||
// padding-bottom: 20px;
|
||||
// margin-bottom: 20px;
|
||||
|
||||
img.screenshot
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
// img.screenshot
|
||||
// {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
img
|
||||
{
|
||||
// box-shadow: 0px 0px 5px #000000;
|
||||
box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
||||
}
|
||||
}
|
||||
// img
|
||||
// {
|
||||
// // box-shadow: 0px 0px 5px #000000;
|
||||
// box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
||||
// }
|
||||
// }
|
||||
|
||||
.fancybox
|
||||
{
|
||||
img
|
||||
{
|
||||
// box-shadow: 0px 0px 5px #000000;
|
||||
box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
||||
}
|
||||
}
|
||||
// .fancybox
|
||||
// {
|
||||
// img
|
||||
// {
|
||||
// // box-shadow: 0px 0px 5px #000000;
|
||||
// box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
||||
// }
|
||||
// }
|
||||
|
||||
.pkgname
|
||||
{
|
||||
|
|
@ -263,7 +268,7 @@ a.black
|
|||
|
||||
.bigpanel
|
||||
{
|
||||
background-color: $light-gray;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 10px;
|
||||
padding: 1em 1em 0.1em 1em;
|
||||
margin-bottom: 1em;
|
||||
|
|
@ -382,9 +387,9 @@ a.black
|
|||
}
|
||||
|
||||
/* Foundation sets file buttons to 100% width. Fix that */
|
||||
[type='file'] {
|
||||
width: inherit !important;
|
||||
}
|
||||
// [type='file'] {
|
||||
// width: inherit !important;
|
||||
// }
|
||||
|
||||
// .top-bar-title a {
|
||||
// font-size: 1.8rem;
|
||||
|
|
@ -392,11 +397,11 @@ a.black
|
|||
// line-height: 1;
|
||||
// }
|
||||
|
||||
.button {
|
||||
// box-shadow: 0px 0px 5px #000000;
|
||||
box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
// .button {
|
||||
// // box-shadow: 0px 0px 5px #000000;
|
||||
// box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
||||
// border-radius: 10px !important;
|
||||
// }
|
||||
|
||||
// Simple animation for FontAwesome icons in callouts at the top.
|
||||
/*
|
||||
|
|
@ -414,54 +419,54 @@ a.black
|
|||
}
|
||||
*/
|
||||
|
||||
.menu .menu-text {
|
||||
font-size: 2rem;
|
||||
font-weight: 100;
|
||||
}
|
||||
// .menu .menu-text {
|
||||
// font-size: 2rem;
|
||||
// font-weight: 100;
|
||||
// }
|
||||
|
||||
// Nicer callouts
|
||||
// https://foundation.zurb.com/building-blocks/blocks/alert-callout-subtle.html
|
||||
$alert-callout-subtle-border-left-width: rem-calc(5);
|
||||
$alert-callout-subtle-radius: 0.6rem;
|
||||
// $alert-callout-subtle-border-left-width: rem-calc(5);
|
||||
// $alert-callout-subtle-radius: 0.6rem;
|
||||
|
||||
.alert-callout-subtle {
|
||||
width: 100%;
|
||||
background: $light-gray;
|
||||
color: $dark-gray;
|
||||
border: 0;
|
||||
border-left: $alert-callout-subtle-border-left-width solid $dark-gray;
|
||||
box-shadow: 0 5px 8px -6px rgba(0,0,0, 0.2);
|
||||
// .alert-callout-subtle {
|
||||
// width: 100%;
|
||||
// background: $light-gray;
|
||||
// color: $dark-gray;
|
||||
// border: 0;
|
||||
// border-left: $alert-callout-subtle-border-left-width solid $dark-gray;
|
||||
// box-shadow: 0 5px 8px -6px rgba(0,0,0, 0.2);
|
||||
|
||||
&.success {
|
||||
background: $light-gray;
|
||||
color: $dark-gray;
|
||||
border-left: $alert-callout-subtle-border-left-width solid $success-color;
|
||||
}
|
||||
// &.success {
|
||||
// background: $light-gray;
|
||||
// color: $dark-gray;
|
||||
// border-left: $alert-callout-subtle-border-left-width solid $success-color;
|
||||
// }
|
||||
|
||||
&.alert {
|
||||
background: $light-gray;
|
||||
color: $dark-gray;
|
||||
border-left: $alert-callout-subtle-border-left-width solid $alert-color;
|
||||
}
|
||||
// &.alert {
|
||||
// background: $light-gray;
|
||||
// color: $dark-gray;
|
||||
// border-left: $alert-callout-subtle-border-left-width solid $alert-color;
|
||||
// }
|
||||
|
||||
&.warning {
|
||||
background: $light-gray;
|
||||
color: $dark-gray;
|
||||
border-left: $alert-callout-subtle-border-left-width solid $warning-color;
|
||||
}
|
||||
// &.warning {
|
||||
// background: $light-gray;
|
||||
// color: $dark-gray;
|
||||
// border-left: $alert-callout-subtle-border-left-width solid $warning-color;
|
||||
// }
|
||||
|
||||
&.primary {
|
||||
background: $light-gray;
|
||||
color: $dark-gray;
|
||||
border-left: $alert-callout-subtle-border-left-width solid $primary-color;
|
||||
}
|
||||
// &.primary {
|
||||
// background: $light-gray;
|
||||
// color: $dark-gray;
|
||||
// border-left: $alert-callout-subtle-border-left-width solid $primary-color;
|
||||
// }
|
||||
|
||||
.close-button {
|
||||
font-size: 2rem;
|
||||
@include vertical-center;
|
||||
}
|
||||
// .close-button {
|
||||
// font-size: 2rem;
|
||||
// @include vertical-center;
|
||||
// }
|
||||
|
||||
&.radius {
|
||||
border-radius: $alert-callout-subtle-radius;
|
||||
}
|
||||
}
|
||||
// &.radius {
|
||||
// border-radius: $alert-callout-subtle-radius;
|
||||
// }
|
||||
// }
|
||||
Loading…
Add table
Add a link
Reference in a new issue