diff --git a/app.rb b/app.rb
index c7baded..20ee3be 100644
--- a/app.rb
+++ b/app.rb
@@ -57,6 +57,10 @@
markdown :"#{params[:topic]}/#{params[:article]}"
end
+get '/style.css' do
+ sass :style
+end
+
__END__
@@ layout
@@ -67,9 +71,9 @@
meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no"
title Sinatra Recipes
- link rel="stylesheet" type="text/css" href="/stylesheets/styles.css"
+ link rel="stylesheet" type="text/css" href="/style.css"
+ link rel="stylesheet" type="text/css" href="/stylesheets/pygment_trac.css"
link rel="stylesheet" type="text/css" href="/stylesheets/chosen.css"
- link rel="stylesheet" type="text/css" href="/pygments.css"
link rel="shortcut icon" href="https://github.com/sinatra/resources/raw/master/logo/favicon.ico"
script src="/javascripts/scale.fix.js"
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
@@ -89,36 +93,19 @@
body
a name="top"
.wrapper
- header
+ #header
a href="/"
img id="logo" src="https://github.com/sinatra/resources/raw/master/logo/sinatra-classic-156.png"
h1 Sinatra Recipes
- p Comunity contributed recipes and techniques
- p.view
- a href="http://github.com/sinatra/sinatra-recipes"
- | View the Project on GitHub sinatra/sinatra
- ul
- li
- a href="https://github.com/sinatra/sinatra-recipes/zipball/master"
- | Download ZIP File
- li
- a href="https://github.com/sinatra/sinatra-recipes/tarall/master"
- | Download TAR File
- li
- a href="https://github.com/sinatra/sinatra-recipes"
- | Fork on GitHub
-
- p
- small Theme based on "Minimal" by orderedlist
-
- section
- a name="article"
+ h2 Community contributed recipes and techniques
nav
select#selectNav.chosen data-placeholder="Select a topic"
option
- @menu.each do |me|
option value="/p/#{me}?#article"
#{me.capitalize.sub('_', ' ')}
+
+ #content
#post
== yield
- if @children
@@ -138,7 +125,7 @@
p
| See the README
| for more details.
-
+
- if @contributors
h2 Contributors
p
@@ -149,3 +136,90 @@
dt
a href="http://github.com/#{contributor["login"]}"
img src="http://www.gravatar.com/avatar/#{contributor["gravatar_id"]}?s=50"
+
+@@ style
+body
+ font-family: 'Lucida Grande', Verdana, sans-serif
+ margin: 0 auto
+ max-width: 800px
+
+h1, h2, h3, h4, h5
+ font-family: georgia, 'bitstream vera serif', serif
+ font-weight: normal
+ font-size: 2em
+ line-height: 160%
+
+a:link, a:visited
+ color: #3F3F3F
+
+a:hover, a:active
+ color: #8F8F8F
+
+.small
+ font-size: .7em
+
+#header
+ margin: 10px 0px
+ a
+ text-decoration: none
+ h1
+ float: left
+ width: 200px
+ font-size: 2.65em
+ line-height: .75em
+ h2
+ text-align: right
+ font-style: oblique
+ font-size: 1em
+ float: right
+ width: 450px
+ img
+ float: left
+ width: 100px
+ margin: 20px 15px 0px 0px
+ border: 0
+ nav
+ width: 450px
+ float: right
+ #selectNav
+ width: 100%
+
+#contributors dt
+ display: inline-block
+
+#toplink
+ display: none
+ margin: 10px
+ float: right
+
+#menu
+ float: left
+ max-width: 200px
+ word-wrap: break-word
+ font-size: .9em
+ clear: left
+
+#children
+ clear: both
+ ul li
+ float: left
+ width: 275px
+ height: 40px
+
+#content
+ float: right
+ max-width: 600px
+ pre
+ padding: 10px
+ max-width: 600px
+ overflow: auto
+ overflow-Y: hidden
+ background: #EEE
+ line-height: 100%
+
+#post
+ line-height: 110%
+
+#footer
+ clear: both
+ margin-top: 20px
diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
deleted file mode 100644
index 79cd1b0..0000000
--- a/public/stylesheets/styles.css
+++ /dev/null
@@ -1,324 +0,0 @@
-#contributors dt{
- display: inline-block;
-}
-
-#logo {
- height: 59px;
- width: 86px;
-}
-
-#toplink {
- display:none;
- margin: 10px;
- float:right;
-}
-nav {
- width: 100%;
- margin-top: 10px;
- margin-bottom: 30px;
-}
-#selectNav {
- width: 80%;
-}
-
-/***********************************************/
-/* Original styles from the theme */
-/***********************************************/
-
-body {
- padding:50px;
- font-size:14px/1.5;
- font-family:'georgia', 'bitstream vera serif', serif;
- color:#000;
- font-weight:300;
-}
-
-h1, h2, h3, h4, h5, h6 {
- font-family:georgia, 'bitstream vera serif', serif;
- color:#222;
- margin:0 0 20px;
-}
-
-p, ul, ol, table, pre, dl {
- margin:0 0 20px;
-}
-
-h1, h2, h3 {
- line-height:1.1;
-}
-
-h1 {
- font-size:28px;
-}
-
-h2 {
- color:#393939;
-}
-
-h3, h4, h5, h6 {
- color:#494949;
-}
-
-a {
- color:#39c;
- font-weight:400;
- text-decoration:none;
-}
-
-a:hover {
- color:#069;
-}
-
-a small {
- font-size:11px;
- color:#777;
- margin-top:-0.6em;
- display:block;
-}
-
-a:hover small {
- color:#777;
-}
-
-.wrapper {
- width:860px;
- margin:0 auto;
-}
-
-blockquote {
- border-left:1px solid #e5e5e5;
- margin:0;
- padding:0 0 0 20px;
- font-style:italic;
-}
-
-code, pre {
- font-family:"lucida console", "monaco", "andale mono", "bitstream vera sans mono",
- "consolas", monospace;
- color:#333;
- font-size:12px;
-}
-
-pre {
- padding:8px 15px;
- background: #f8f8f8;
- border-radius:5px;
- border:1px solid #e5e5e5;
- overflow-x: auto;
-}
-
-table {
- width:100%;
- border-collapse:collapse;
-}
-
-th, td {
- text-align:left;
- padding:5px 10px;
- border-bottom:1px solid #e5e5e5;
-}
-
-dt {
- color:#444;
- font-weight:700;
-}
-
-th {
- color:#444;
-}
-
-img {
- max-width:100%;
-}
-
-header {
- width:270px;
- float:left;
- position:fixed;
-}
-
-header ul {
- list-style:none;
- height:40px;
-
- padding:0;
-
- background: #eee;
- background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
- background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
- background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
- background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
- background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-
- border-radius:5px;
- border:1px solid #d2d2d2;
- box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
- width:270px;
-}
-
-header li {
- width:89px;
- float:left;
- border-right:1px solid #d2d2d2;
- height:40px;
-}
-
-header li:first-child a {
- border-radius:5px 0 0 5px;
-}
-
-header li:last-child a {
- border-radius:0 5px 5px 0;
-}
-
-header ul a {
- line-height:1;
- font-size:11px;
- color:#999;
- display:block;
- text-align:center;
- padding-top:6px;
- height:34px;
-}
-
-header ul a:hover {
- color:#999;
- background: -moz-linear-gradient(top, #fff 0%, #ddd 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#ddd));
- background: -webkit-linear-gradient(top, #fff 0%,#ddd 100%);
- background: -o-linear-gradient(top, #fff 0%,#ddd 100%);
- background: -ms-linear-gradient(top, #fff 0%,#ddd 100%);
- background: linear-gradient(top, #fff 0%,#ddd 100%);
-}
-
-header ul a:active {
- -webkit-box-shadow: inset 0px 2px 2px 0px #ddd;
- -moz-box-shadow: inset 0px 2px 2px 0px #ddd;
- box-shadow: inset 0px 2px 2px 0px #ddd;
-}
-
-strong {
- color:#222;
- font-weight:700;
-}
-
-header ul li + li {
- width:88px;
- border-left:1px solid #fff;
-}
-
-header ul li + li + li {
- border-right:none;
- width:89px;
-}
-
-header ul a strong {
- font-size:14px;
- display:block;
- color:#222;
-}
-
-section {
- width:560px;
- float:right;
- padding-bottom:50px;
-}
-
-small {
- font-size:11px;
-}
-
-hr {
- border:0;
- background:#e5e5e5;
- height:1px;
- margin:0 0 20px;
-}
-
-footer {
- width:270px;
- float:left;
- position:fixed;
- bottom:50px;
-}
-
-@media print, screen and (max-width: 960px) {
-
- div.wrapper {
- width:auto;
- margin:0;
- }
-
- header, section, footer {
- float:none;
- position:static;
- width:auto;
- }
-
- header {
- padding-right:320px;
- }
-
- section {
- border:1px solid #e5e5e5;
- border-width:1px 0;
- padding:20px 0;
- margin:0 0 20px;
- }
-
- header a small {
- display:inline;
- }
-
- header ul {
- position:absolute;
- right:50px;
- top:52px;
- }
-
-}
-
-@media print, screen and (max-width: 720px) {
- #toplink {
- display: block;
- }
-
-
- body {
- word-wrap:break-word;
- }
-
- header {
- padding:0;
- }
-
- header ul, header p.view {
- position:static;
- }
-
- pre, code {
- word-wrap:normal;
- }
-}
-
-@media print, screen and (max-width: 480px) {
-
- body {
- padding:15px;
- }
-
- header ul {
- display:none;
- }
-}
-
-@media print {
- body {
- padding:0.4in;
- font-size:12pt;
- color:#444;
- }
-}
-
-