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.
This commit is contained in:
Andrew Senetar 2013-07-30 14:44:31 -04:00
부모 b7efae362c
커밋 ff3c58c45b
4개의 변경된 파일54개의 추가작업 그리고 803개의 파일을 삭제

파일 보기

@ -10,7 +10,7 @@ javascripts_dir = "js"
fonts_dir = "fonts"
# You can select your preferred output style here (can be overridden via the command line):
output_style = :compact #or :compressed
output_style = :compressed #or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

File diff suppressed because one or more lines are too long

파일 보기

@ -16,7 +16,7 @@ function ready(){
// Hack to make images more responsive and wrap with .th class
$('#main article img').each( function() {
$(this).css({'height': '', 'width': ''});
$(this).wrap('<a class="th" href="'+$(this).attr('src')+'" style="max-width:'+this.naturalWidth+'px">');
$(this).wrap('<a class="th" href="'+$(this).attr('src')+'" style="max-width:'+Math.min(this.naturalWidth, 770)+'px">');
});
};

파일 보기

@ -103,7 +103,7 @@ body{ background-color: #fff; }
img {
max-height: 250px;
}
}
}
}
article {
overflow: auto;
@ -111,6 +111,27 @@ body{ background-color: #fff; }
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 {
@ -125,7 +146,7 @@ body{ background-color: #fff; }
clear: both;
&:after { clear: both }
@include border-radius($global-radius);
@include background-image(linear-gradient(top,#fff,#f8f8f8));
@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%);
@ -143,7 +164,7 @@ body{ background-color: #fff; }
margin-bottom: 0;
display: inline-block;
vertical-align: middle;
li a{ padding: emCalc(4px) emCalc(7px); }
li a{ line-height: 1.5em; padding: emCalc(4px) emCalc(7px); }
}
span{ font-size: 0.8em; }
}
@ -154,18 +175,34 @@ body{ background-color: #fff; }
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);
@ -179,9 +216,12 @@ body{ background-color: #fff; }
padding: emCalc(10px) emCalc(7px);
}
}
#blogRoll {
#blogRoll, .no-margin {
margin-left: 0;
margin-bottom: 0;
overflow: hidden;
}
#blogRoll{
.external {
&:after{
font-family: 'pelican-red';
@ -217,8 +257,10 @@ body{ background-color: #fff; }
.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;
@ -240,6 +282,11 @@ body{ background-color: #fff; }
}
}
}
ul.pagination{
li.current a{
background: desaturate(lighten($primary-color, 5%), 50%);
}
}
@media #{$small} {
}