diff options
| -rw-r--r-- | media/css/base.css | 2 | ||||
| -rw-r--r-- | media/sass/base.sass | 41 | ||||
| -rw-r--r-- | templates/archives/homepage.html | 11 |
3 files changed, 36 insertions, 18 deletions
diff --git a/media/css/base.css b/media/css/base.css index bcba870..f0365ae 100644 --- a/media/css/base.css +++ b/media/css/base.css @@ -1 +1 @@ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}html{height:100%}body{font:normal 100% Hoefler Text, Georgia, Times New Roman, Times, serif;color:#201a11;margin:0 1.125em;min-height:100%;position:relative;padding:0;max-width:20.938em;background:#fff}p{font-size:1.063em;line-height:1.5em;margin:1em 0 0}footer p{font-size:0.625em;text-align:center}a{text-decoration:none;color:#201a11}a:hover{color:#b53a04}ul li{display:inline;margin:0 0.125em}.dateline,nav li,.breadcrumbs li,.geo,.legend h3{text-transform:uppercase;font-size:0.75em;letter-spacing:0.063em}.geo{text-align:center}img{border:10px #201a11 solid}#featured-image img{width:95%}h1{font:normal 1.875em Helvetica, Verdana, sans-serif;letter-spacing:0.5px;text-align:center}#archive article h1{font:normal 1.5em Helvetica, Verdana, sans-serif;letter-spacing:0.5px;text-align:center;text-transform:none;margin:1.875em 0 0.875em 0}#archive h1{font-weight:700;font-size:0.75em;text-transform:uppercase;text-align:left}.footnote{font-size:0.875em}#post-metadata{margin-top:0;border-top:1px #201a11 dotted}#post-metadata p{font-size:0.875em;text-align:left}header[role="banner"]{margin:0 auto 1em auto;text-align:center}header[role="banner"] #logo h1{background:url("../img/tree.png") 0 0 no-repeat;text-indent:-9999px;width:151px;height:84px;margin:0 auto}header[role="banner"] #logo h2{background:url("../img/text.png") 0 0 no-repeat;text-indent:-9999px;width:184px;height:54px;margin:0 auto}nav[role="navigation"]{margin:1em auto 2em auto;text-align:center;border-top:1px #201a11 dotted;border-bottom:1px #201a11 dotted;width:100%;padding:0.25em 0}nav:after,footer:before{content:".";display:block;height:0;clear:both;visibility:hidden}footer{margin-top:2em}.dateline{text-align:center}.dateline time{display:block}.postpic,.post-image{float:left;margin:0 0.625em 0.625em 0}.postpic,.postpicright{width:auto}article img{width:95%}article object,article embed{width:100%}.hide{display:none}#writing-archive article{border-bottom:1px #201a11 dotted}.figure{position:relative;margin:0}.figure .legend{display:block;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9;position:absolute;bottom:0;left:0;font-size:13px;padding:8px 0 8px 8px;width:auto;background:#201a11;color:#999}#photo-galleries li{margin:8px;position:relative;display:block;height:350px;width:100%;margin-bottom:30px}#photo-galleries .figure{height:362px;width:100%;margin:0}#photo-galleries .legend{padding:10px;color:#888;width:85%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9;line-height:18px;text-align:left}#photo-galleries h3{color:#fff;padding:0;margin:3px 0;font-size:0.875em}#photo-galleries p{margin:0}#map-canvas{border:10px #201a11 solid;width:95%;height:300px}@media only screen and (min-width: 800px){body{max-width:61.75em;margin:0 auto}header[role="banner"]{text-align:left;clear:both;border-bottom:#201a11 2px solid;height:9.375em}header[role="banner"] #logo h1,header[role="banner"] #logo h2{float:left;padding-top:2.2em;background-position:left bottom;margin:0 !important}header[role="banner"] #logo h2{padding-top:3.5em;background:url("../img/text-wide.png") left bottom no-repeat !important;margin-left:1.7em !important}nav[role="navigation"]{width:25em;border:none;padding-top:6.3em;padding-left:13em}nav[role="navigation"] a{letter-spacing:1px}nav[role="navigation"] li{font-size:12px}article img{width:auto !important}#archive{clear:both}#featured img{float:right;margin:0}.img{float:right}.img img{margin:0}.archive{padding-top:2em}.archive article{margin-bottom:2em;padding-bottom:2em;border:none !important}.archive h1,.archive p{width:41%;float:left;text-align:left;margin:0;font-size:1em}.archive h1{font-size:1.5em;line-height:1.3em;margin-top:0.15em;letter-spacing:0.5px}.archive .dateline{clear:left;margin:0.75em 0;font-size:0.688em}.archive .hyphenate{text-align:justify}.archive time{display:inline;float:right}#photo-galleries:after,.archive article:after,#projects-page .top:after{content:".";display:block;height:0;clear:both;visibility:hidden}#page-nav{border:none;text-align:left;margin-top:2em}#photo-galleries .legend{width:90%;padding:1em 1em 0.5em 1em;font-size:0.75em !important;line-height:95%}#photo-galleries li{float:left;width:auto !important}#map-canvas{width:47.5em;height:31.25em;float:right}.map-legend h4{margin-bottom:0.25em;letter-spacing:1px;font-size:0.875em}.map-legend li{display:block;font-size:0.875em;margin:3px 0}#projects-page .col{float:left;font-size:14px;margin:0 40px 0 0;width:360px}#projects-page .two{margin:0 0 0 3.5em;width:32em}#projects-page .top{padding-bottom:2em;margin-bottom:2em;border-bottom:1px solid #e3e3e3}#projects-page article p{margin:1em 0 0 0}article[role="main"] header,article[role="main"] #post-body,article[role="main"] footer,article[role="main"] #comments{width:35.625em;margin:3.5em 0 0 12em}article[role="main"] h1,article[role="main"] aside{text-align:left;margin:0 0 0.4em 0}article[role="main"] p:nth-of-type(1){font-size:1.25em;line-height:28px}article[role="main"] #post-metadata{border-bottom:1px #201a11 dotted;margin-bottom:2em}article[role="main"] #post-metadata p{line-height:1.5em !important}article[role="main"] #post-metadata a{color:#b53a04}article[role="main"] #page-navigation{text-transform:uppercase;font:normal 1.125em Helvetica, Verdana, sans-serif}article[role="main"] #page-navigation a{color:#b53a04}article[role="main"] #page-navigation li#next{float:right;padding-right:9em}article[role="main"] #page-navigation li#prev{float:left;padding-left:6em}footer[role="contentinfo"]{font-family:Helvetica, Verdana, sans-serif;background:#201a11;height:2.25em;color:#888;margin:80px auto 0;font-size:1em;padding:0}footer[role="contentinfo"] li{float:left;text-transform:uppercase;line-height:3em;margin-left:8px}footer[role="contentinfo"] a{color:#888 !important}footer[role="contentinfo"] a:hover{color:#b53a04 !important}footer[role="contentinfo"] nav{border:none;height:auto;width:15em;margin:0;padding:0;float:right}footer[role="contentinfo"] p{float:left;padding-left:8px;line-height:4em;margin:0}.drop{font-size:4.8em;display:block;float:left;padding:38px 10px 5px 0;overflow:visible}.drop-small{font-size:2.9em;display:block;float:left;padding:19px 8px 5px 0;overflow:visible}.postpic,.postpicright{display:block;margin:0.3em 0.6em}.postpic{float:left;margin-left:0;margin-top:0.3em}.postpicright{float:right;margin-right:0}.postpicleft{float:left;margin:5px}.picfull{margin-top:20px}} +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}html{height:100%}body{font:normal 100% Hoefler Text, Georgia, Times New Roman, Times, serif;color:#201a11;margin:0 1.125em;min-height:100%;position:relative;padding:0;max-width:20.938em;background:#fff}p{font-size:1.063em;line-height:1.5em;margin:1em 0 0}footer p{font-size:0.625em;text-align:center}a{text-decoration:none;color:#201a11}a:hover{color:#b53a04}ul li{display:inline;margin:0 0.125em}div[role="main"] ul li{display:block;margin:0.5em 0}.dateline,nav li,.breadcrumbs li,.geo,.legend h3{text-transform:uppercase;font-size:0.75em;letter-spacing:0.063em}.geo{text-align:center}img{border:10px #201a11 solid}#featured-image img{width:95%}h1{font:normal 1.875em Helvetica, Verdana, sans-serif;letter-spacing:0.5px;text-align:center}article h1{font:normal 1.5em Helvetica, Verdana, sans-serif;letter-spacing:0.5px;text-align:center;text-transform:none;margin:1.875em 0 0.875em 0}#archive h1{font-weight:700;font-size:0.75em;text-transform:uppercase;text-align:left}.footnote{font-size:0.875em}#post-metadata{margin-top:0;border-top:1px #201a11 dotted}#post-metadata p{font-size:0.875em;text-align:left}.col{font-size:0.875em}header[role="banner"]{margin:0 auto;text-align:center}header[role="banner"] #logo h1{background:url("../img/tree.png") 0 0 no-repeat;text-indent:-9999px;width:151px;height:84px;margin:0 auto}header[role="banner"] #logo h2{background:url("../img/text.png") 0 0 no-repeat;text-indent:-9999px;width:184px;height:54px;margin:0 auto}nav[role="navigation"]{margin:1em auto 0.5em auto;text-align:center;border-top:1px #201a11 dotted;border-bottom:1px #201a11 dotted;width:100%;padding:0.25em 0}nav:after,footer:before,.archive article:after{content:".";display:block;height:0;clear:both;visibility:hidden}.dateline{text-align:center}.dateline time{display:block}.postpic,.post-image{float:left;margin:0 0.625em 0.625em 0}.postpic,.postpicright{width:auto}article img{width:95%}article object,article embed{width:100%}#breadcrumbs{margin:0 0 2em 1em}.hide{display:none}#writing-archive article{border-bottom:1px #201a11 dotted;margin-bottom:1.5em;padding-bottom:1.5em}.figure{position:relative;margin:0}.figure .legend{display:block;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9;position:absolute;bottom:0;left:0;font-size:13px;padding:8px 0 8px 8px;width:auto;background:#201a11;color:#999}#photo-galleries li{margin:8px;position:relative;display:block;height:350px;width:100%;margin-bottom:30px}#photo-galleries .figure{height:362px;width:100%;margin:0}#photo-galleries .legend{padding:10px;color:#888;width:85%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9;line-height:18px;text-align:left}#photo-galleries h3{color:#fff;padding:0;margin:3px 0;font-size:0.875em}#photo-galleries p{margin:0}#map-canvas{border:10px #201a11 solid;width:95%;height:300px}footer{margin-top:2em}footer[role="contentinfo"] nav{text-align:center;padding:0.25em;border-top:1px #201a11 dotted;border-bottom:1px #201a11 dotted}@media only screen and (min-width: 800px){body{max-width:61.75em;margin:0 auto}header[role="banner"]{text-align:left;clear:both;border-bottom:#201a11 2px solid;height:9.375em}header[role="banner"] #logo h1,header[role="banner"] #logo h2{float:left;padding-top:2.2em;background-position:left bottom;margin:0 !important}header[role="banner"] #logo h2{padding-top:3.5em;background:url("../img/text-wide.png") left bottom no-repeat !important;margin-left:1.7em !important}nav[role="navigation"]{width:25em;border:none;padding-top:6.3em;padding-left:13em}nav[role="navigation"] a{letter-spacing:1px}nav[role="navigation"] li{font-size:12px}article img{width:auto !important}#archive{clear:both}#featured img{float:right;margin:0}.img{float:right}.img img{margin:0}.archive{padding-top:2em}.archive article{margin-bottom:2em;padding-bottom:2em;border:none !important}.archive h1,.archive p{width:41%;float:left;text-align:left;margin:0;font-size:1em}.archive h1{font-size:1.5em;line-height:1.3em;margin-top:0.15em;letter-spacing:0.5px}.archive .dateline{clear:left;margin:0.75em 0;font-size:0.688em}.archive .hyphenate{text-align:justify}.archive time{display:inline;float:right}#photo-galleries:after,#projects-page .top:after{content:".";display:block;height:0;clear:both;visibility:hidden}#page-nav{border:none;text-align:left;margin-top:2em}#photo-galleries .legend{width:90%;padding:1em 1em 0.5em 1em;font-size:0.75em !important;line-height:95%}#photo-galleries li{float:left;width:auto !important}#map-canvas{width:47.5em;height:31.25em;float:right}.map-legend h4{margin-bottom:0.25em;letter-spacing:1px;font-size:0.875em}.map-legend li{display:block;font-size:0.875em;margin:3px 0}#projects-page .col{float:left;font-size:0.875em;margin:0 40px 0 0;width:360px}#projects-page .two{margin:0 0 0 3.5em;width:32em}#projects-page .top{padding-bottom:2em;margin-bottom:2em;border-bottom:1px solid #e3e3e3}#projects-page article p{margin:1em 0 0 0}article[role="main"] header,article[role="main"] #post-body,article[role="main"] footer,article[role="main"] #comments{width:35.625em;margin:3.5em 0 0 12em}article[role="main"] h1,article[role="main"] aside{text-align:left;margin:0 0 0.4em 0}article[role="main"] p:nth-of-type(1){font-size:1.25em;line-height:28px}article[role="main"] #post-metadata{border-bottom:1px #201a11 dotted;margin-bottom:2em}article[role="main"] #post-metadata p{line-height:1.5em !important}article[role="main"] #post-metadata a{color:#b53a04}article[role="main"] #page-navigation{text-transform:uppercase;font:normal 1.125em Helvetica, Verdana, sans-serif}article[role="main"] #page-navigation a{color:#b53a04}article[role="main"] #page-navigation li#next{float:right;padding-right:9em}article[role="main"] #page-navigation li#prev{float:left;padding-left:6em}footer[role="contentinfo"]{font-family:Helvetica, Verdana, sans-serif;background:#201a11;height:2.25em;color:#888;margin:80px auto 0;font-size:1em;padding:0}footer[role="contentinfo"] li{float:left;text-transform:uppercase;line-height:3em;margin-left:8px}footer[role="contentinfo"] a{color:#888 !important}footer[role="contentinfo"] a:hover{color:#b53a04 !important}footer[role="contentinfo"] nav{border:none;height:auto;width:15em;margin:0;padding:0;float:right}footer[role="contentinfo"] p{float:left;padding-left:8px;line-height:4em;margin:0}.drop{font-size:4.8em;display:block;float:left;padding:38px 10px 5px 0;overflow:visible}.drop-small{font-size:2.9em;display:block;float:left;padding:19px 8px 5px 0;overflow:visible}.postpic,.postpicright{display:block;margin:0.3em 0.6em}.postpic{float:left;margin-left:0;margin-top:0.3em}.postpicright{float:right;margin-right:0}.postpicleft{float:left;margin:5px}.picfull{margin-top:20px}} diff --git a/media/sass/base.sass b/media/sass/base.sass index c9150c7..a6c4064 100644 --- a/media/sass/base.sass +++ b/media/sass/base.sass @@ -47,7 +47,10 @@ a ul li display: inline margin: 0 .125em - +div[role="main"] + ul li + display: block + margin: .5em 0 .dateline, nav li, .breadcrumbs li, .geo, .legend h3 text-transform: uppercase font-size: .75em @@ -65,7 +68,7 @@ h1 font: normal 1.875em Helvetica, Verdana, sans-serif letter-spacing: 0.5px text-align: center -#archive article h1 +article h1 font: normal 1.5em Helvetica, Verdana, sans-serif letter-spacing: 0.5px text-align: center @@ -84,10 +87,13 @@ h1 p font-size: .875em text-align: left + +.col + font-size: .875em /* ######### layout small ################*/ header[role="banner"] - margin: 0 auto 1em auto + margin: 0 auto text-align: center #logo h1 background: url('../img/tree.png') 0 0 no-repeat @@ -102,23 +108,18 @@ header[role="banner"] height: 54px margin: 0 auto nav[role="navigation"] - margin: 1em auto 2em auto + margin: 1em auto .5em auto text-align: center border-top: 1px $brown dotted border-bottom: 1px $brown dotted width: 100% padding: .25em 0 -nav:after, footer:before +nav:after, footer:before, .archive article:after content: "." display: block height: 0 clear: both visibility: hidden - -footer - margin-top: 2em - - .dateline text-align: center time @@ -134,13 +135,17 @@ article img width: 95% article object, article embed width: 100% +#breadcrumbs + margin: 0 0 2em 1em + /* misc classes */ .hide display: none #writing-archive article border-bottom: 1px $brown dotted - + margin-bottom: 1.5em + padding-bottom: 1.5em //Photos .figure @@ -191,6 +196,16 @@ article object, article embed width: 95% height: 300px +footer + margin-top: 2em +footer[role="contentinfo"] + nav + text-align: center + padding: .25em + border-top: 1px $brown dotted + border-bottom: 1px $brown dotted + + /* ######### layout large ################*/ @media only screen and (min-width: 800px) @@ -259,7 +274,7 @@ article object, article embed time display: inline float: right - #photo-galleries:after, .archive article:after, #projects-page .top:after + #photo-galleries:after, #projects-page .top:after content: "." display: block height: 0 @@ -296,7 +311,7 @@ article object, article embed #projects-page .col float: left - font-size: 14px + font-size: .875em margin: 0 40px 0 0 width: 360px #projects-page .two diff --git a/templates/archives/homepage.html b/templates/archives/homepage.html index 898ca01..95f2fd6 100644 --- a/templates/archives/homepage.html +++ b/templates/archives/homepage.html @@ -11,13 +11,16 @@ {% block primary %}<section id="featured" class="archive"> <article id="featured-intro"> <h1><a href="{{featured.get_absolute_url}}" title="{%if featured.title_keywords%}{{featured.title_keywords}}{%else%}{{featured.title}}{%endif%}">{{featured.title|smartypants|widont|safe}}</a></h1> + <div class="img"> + <a href="{{featured.get_absolute_url}}" title="{{featured.title}}"><img src="{{featured.get_image_url}}" alt="{{ featured.title }}" class="post-image" /></a> + </div> <p class="dateline"> - <span class="location">{% if featured.location.state.country.name == "United States" %}{{featured.location.name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{featured.location.state.name}}</a>{%else%}{{featured.location.name|smartypants|safe}}, <a href="/writing/{{featured.location.state.country.slug}}/1/" title="travel writing from {{featured.location.state.country.name}}">{{featured.location.state.country.name}}</a>{%endif%}</span> + <span class="location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/​Geo">{% if featured.location.state.country.name == "United States" %}{{featured.location.name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{featured.location.state.name}}</a>{%else%}{{featured.location.name|smartypants|safe}}, <a href="/writing/{{featured.location.state.country.slug}}/1/" title="travel writing from {{featured.location.state.country.name}}">{{featured.location.state.country.name}}</a>{%endif%} + <meta itemprop="latitude" content="{{featured.latitude}}" /> + <meta itemprop="longitude" content="{{featured.longitude}}" /></span> <time datetime="{{featured.pub_date|date:'c'}}">{{featured.pub_date|date:"m/d/y"}}</time> </p> - <div id="featured-image"> - <a href="{{featured.get_absolute_url}}" title="{{featured.title}}"><img src="{{featured.get_image_url}}" alt="{{ featured.title }}" class="post-image" /></a> - </div> + <p class="hyphenate">{{featured.dek|safe}} <span class="button"><a href="{{featured.get_absolute_url}}" title="{{featured.title}}">More »</a></span> </p> </article> |