1
0
mirror of https://github.com/arsenetar/pelican-red.git synced 2024-11-22 19:29:02 +00:00
pelican-red/static/sass/app.scss
Andrew Senetar ff3c58c45b Finalize javascript and stylsheet for issue #4
Adjust javascript image size to always be less than max container width.
Stylesheets are not built in compressed mode by default.
Stylesheet changes are mainly to incorperate styles for new elements.
Stying of the list elements uses a slightly lighter gradient.
2013-07-30 14:44:31 -04:00

307 lines
8.9 KiB
SCSS

// Global Foundation Settings
@import "foundationSettings";
// Comment out this import if you don't want to use normalize
@import "normalize";
// Foundation Imports
@import "foundation/components/global"; // *always required
@import "foundation/components/grid";
// @import "foundation/components/visibility";
// @import "foundation/components/block-grid";
@import "foundation/components/type";
// @import "foundation/components/buttons";
// @import "foundation/components/forms"; // *requires components/buttons
// @import "foundation/components/custom-forms"; // *requires components/buttons, components/forms
// @import "foundation/components/button-groups"; // *requires components/buttons
// @import "foundation/components/dropdown-buttons"; // *requires components/buttons
// @import "foundation/components/split-buttons"; // *requires components/buttons
// @import "foundation/components/flex-video";
// @import "foundation/components/section";
@import "foundation/components/top-bar"; // *requires components/grid
// @import "foundation/components/orbit";
// @import "foundation/components/reveal";
// @import "foundation/components/joyride";
// @import "foundation/components/clearing";
// @import "foundation/components/alert-boxes";
// @import "foundation/components/breadcrumbs";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
@import "foundation/components/inline-lists";
@import "foundation/components/pagination";
// @import "foundation/components/panels";
// @import "foundation/components/pricing-tables";
// @import "foundation/components/progress-bars";
// @import "foundation/components/side-nav";
// @import "foundation/components/sub-nav";
// @import "foundation/components/switch";
// @import "foundation/components/magellan";
@import "foundation/components/tables";
@import "foundation/components/thumbs";
// @import "foundation/components/tooltips";
// @import "foundation/components/dropdown";
// VoltaicIdeas Imports
$set: 'pelican-red';
@import "voltaicideas/pelican-red/icons"; // icon fonts
@import "voltaicideas/pelican-red/_pygments.scss"; // pygments css
@import "voltaicideas/pelican-red/pygments-github"; // pygments style css
@import "compass/css3/box-shadow";
@import "compass/css3/border-radius";
@import "compass/css3/text-shadow";
@import "compass/css3/images";
html{ height: 100%; }
body{ height: 100%; }
//// Topbar fixes and media queries
.top-bar-section ul li.hover > a { background: $topbar-link-bg-hover; color: $topbar-link-color-hover; }
@media #{$topbar-media-query} {
#nav{
@include box-shadow( 0 2px 2px rgba( 50, 50, 50, 0.4 ) );
.top-bar-section {
.dropdown{
@include box-shadow( 0 2px 2px rgba( 50, 50, 50, 0.4 ) );
}
}
}
}
//// Area Styles
body{ background-color: #fff; }
#nav {
background-color: $topbar-bg;
margin-bottom: emCalc(10px);
.top-bar{ margin-bottom: 0; }
}
#main section, #mainAside aside {
background-color: #fff;
@include box-shadow(0 2px 5px rgba(0,0,0,0.2));
margin-bottom: emCalc(10px);
}
#main section {
padding: emCalc(10px) emCalc(7px) emCalc(7px) emCalc(12px);
header {
overflow: hidden;
margin-bottom: emCalc(7px);
h1, h2, h3 { margin-top: 0; margin-bottom: 0; }
border-bottom: 1px solid darken(#fff, 5%);
.print_header{ display: none; }
a.th{
display: block;
margin-left: emCalc(10px);
margin-right: emCalc(10px);
margin-bottom: emCalc(10px);
text-align: center;
background-color: #000;
img {
max-height: 250px;
}
}
}
article {
overflow: auto;
a.th {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: emCalc(4px);
margin-bottom: emCalc(4px);
}
.article-details {
font-size: emCalc(14px);
color: darken( $secondary-color, 15%);
border-bottom: 1px solid darken( #fff, 5% );
margin-bottom: emCalc(7px);
padding-bottom: emCalc(5px);
.published, .modified, .category{
line-height: 2em;
margin-left: emCalc(5px);
white-space: pre;
}
.tag-list {
font-size: 0.9em;
margin-bottom: 0;
display: inline-block;
vertical-align: middle;
li a{ line-height: 1.5em; padding: emCalc(4px) emCalc(7px); }
}
}
}
ul.item-list {
@extend .no-bullet;
margin-bottom: 0;
margin-left: 0;
li .article, li .author {
border: 1px solid darken(#fff, 5%);
padding: emCalc(7px);
margin: emCalc(7px);
overflow: hidden;
clear: both;
&:after { clear: both }
@include border-radius($global-radius);
@include background-image(linear-gradient(top, #fff, darken(#fff, 2%)));
.summary { font-size: 0.9em; padding-bottom: emCalc(7px); }
footer{
border-top: 1px solid darken(#fff, 5%);
ul { margin-left: 0; }
font-size: 0.8em;
color: darken($secondary-color, 10%);
abbr{
color: darken($secondary-color, 10%);
}
a{ color: lighten($primary-color, 5%); }
}
header {
.tag-list{
font-size: 0.7em;
margin-bottom: 0;
display: inline-block;
vertical-align: middle;
li a{ line-height: 1.5em; padding: emCalc(4px) emCalc(7px); }
}
span{ font-size: 0.8em; }
}
}
li .author .vcard {
border: none;
border-bottom: 1px solid darken(#fff, 5%);
display: block;
margin-bottom: emCalc(7px);
p:last-child { margin-bottom: emCalc(5px); }
img.photo{ display: none; }
}
}
ul.item-list.featured li .author {
@include box-shadow(none);
@include background-image(none);
border: none;
}
dl.item-list {
dt{ border-top: 1px solid darken(#fff, 5%); }
dt:first-child{ border: none; }
dd{ margin-bottom: emCalc(8px); }
}
.page_footer, .article_footer{
font-size: emCalc(14px);
border-top: 1px solid darken(#fff, 5%);
padding-top: emCalc(5px);
margin-top: emCalc(5px);
.no-bullet{ margin-left: 0; }
ul li {
margin-bottom: emCalc(7px);
&:last-child{ margin-bottom: (4px); }
}
.vcard.brief {
li { margin-bottom: 0; }
display: block;
margin-bottom: 0;
}
#disqus_thread {
border-top: 1px solid darken(#fff, 5%);
padding-top: emCalc(10px);
}
}
}
#mainAside {
font-size: 0.8em;
aside {
padding: emCalc(10px) emCalc(7px);
}
}
#blogRoll, .no-margin {
margin-left: 0;
margin-bottom: 0;
overflow: hidden;
}
#blogRoll{
.external {
&:after{
font-family: 'pelican-red';
content: "";
}
}
}
#mainFooter {
text-align: right;
margin-right: emCalc(10px);
margin-top: emCalc(10px);
margin-bottom: emCalc(7px);
color: #888;
font-size: 0.8em;
.print_footer{ display: none; }
}
//// Component Styles
.social-area {
li a:not(.button) {
padding: 0 10px;
}
}
// Google Search
.gsc-control-cse{ padding: 0 !important;
.gsc-input{ padding: 0 !important; }
.gsc-search-button {
display: none;
}
}
.tag-list {
@include inline-list;
margin-left: 0;
li {
@include label(0, emCalc(16px), $secondary-color, $global-radius);
margin: emCalc(4px);
a {
padding: emCalc(7px) emCalc(7px);
color: #000;
span {
@include keystroke(lighten($secondary-color, 5%));
margin-left: emCalc(7px);
}
}
&:hover{
background-color: $primary-color;
a {
color: #fff;
span {
border-color: darken($primary-color, 4%);
background-color: lighten($primary-color, 7%);
color: #fff;
}
}
}
}
}
ul.pagination{
li.current a{
background: desaturate(lighten($primary-color, 5%), 50%);
}
}
@media #{$small} {
}
//// Print Visibility styling
@media print{
body { padding-top: 0 !important; }
.top-bar, #mainAside {
display: none;
}
#main section header .print_header, #mainFooter .print_footer{ display: block; }
#main {
.codehilitewrapper{ page-break-inside: avoid; }
pre { border: none; }
}
}