Browse files

Updated the Look&Feel of the rest of the website

  • Loading branch information...
1 parent 7431b8a commit a0ccaedeef12259494961b47517b2097b3e36ed3 @yogsototh yogsototh committed Apr 25, 2012
View
1 Handler/Blog.hs
@@ -43,6 +43,7 @@ getBlogPostR y m s = do
let rev :: Ord k => Map.Map k v -> [(k, v)]
rev = reverse . sortBy (comparing fst) . Map.toList
$(widgetFile "blog")
+ $(widgetFile "archive")
where
pretty 1 = "January"
pretty 2 = "February"
View
6 Handler/Book.hs
@@ -23,15 +23,17 @@ getBookR = do
defaultLayout $ do
setTitle "Yesod Web Framework Book"
$(widgetFile "book")
+ $(widgetFile "booklist")
getChapterR :: Text -> Handler RepHtml
getChapterR slug = do
ibook <- ywBook <$> getYesod
- Book _ m <- liftIO $ readIORef ibook
+ Book parts m <- liftIO $ readIORef ibook
chapter <- maybe notFound return $ Map.lookup slug m
defaultLayout $ do
setTitle $ toHtml $ chapterTitle chapter
- [whamlet|<article>#{chapterHtml chapter}|]
+ [whamlet|<section .why><article>#{chapterHtml chapter}|]
+ $(widgetFile "booklist")
getBookImageR :: Text -> Handler ()
getBookImageR name
View
15 templates/archive.hamlet
@@ -0,0 +1,15 @@
+<section .getting-started>
+ <h2> Archives
+ <div #archive>
+ <ul>
+ $forall (year, x) <- rev blog
+ <li :currYear year:.open #nav-#{year}>
+ <span>#{year}
+ <ul>
+ $forall (month, y) <- rev x
+ <li :currMonth year month:.open #nav-#{year}#{toPathPiece month}>
+ <span>#{pretty month}
+ <ul>
+ $forall (slug, post) <- y
+ <li .leaf>
+ <a :currPost year month slug:.current href=@{BlogPostR year month slug}>#{postTitle post}
View
16 templates/blog.hamlet
@@ -1,4 +1,4 @@
-<div #wrapper>
+<section .why>
<article>
<hgroup>
<h1>#{postTitle post}
@@ -9,17 +9,3 @@
<img src=#{gravatar $ authorEmail author} alt=Gravatar>
#{authorName author}
^{toWidget content}
- <nav #archive>
- <ul>
- $forall (year, x) <- rev blog
- <li :currYear year:.open #nav-#{year}>
- <span>#{year}
- <ul>
- $forall (month, y) <- rev x
- <li :currMonth year month:.open #nav-#{year}#{toPathPiece month}>
- <span>#{pretty month}
- <ul>
- $forall (slug, post) <- y
- <li .leaf>
- <a :currPost year month slug:.current href=@{BlogPostR year month slug}>#{postTitle post}
- <div .clearfix>
View
75 templates/blog.lucius
@@ -1,71 +1,8 @@
-#container #main {
- width: 960px;
+#archive li > span {
+ cursor: pointer;
}
-#wrapper {
- width: 960px;
- padding-top: 2em;
-}
-
-#archive {
- float: right;
- width: 200px;
-
- border: 2px solid #000;
- border-radius: 5px;
- padding: 5px;
- background: #eee;
-
- ul {
- padding-left: 20px;
- margin: 0;
- }
-
- a, a:visited {
- color: blue;
- text-decoration: none;
- }
- a.current, a.current:visited {
- color: #900;
- cursor: default;
- }
-
- li > ul {
- display: none;
- }
- li {
- list-style-image: url(@{StaticR toc_closed_png});
- }
- li.open {
- list-style-image: url(@{StaticR toc_open_png});
- }
- li.open > ul {
- display: block;
- }
- li.leaf {
- margin: 0.3em 0;
- list-style: none;
- }
- ul ul ul {
- padding: 0;
- }
-}
-
-article {
- float: left;
- width: 720px;
-}
-
-hgroup {
- h1 {
- margin: 0;
- }
- h2 {
- font-size: 1.1em;
- font-style: italic;
- margin-top: 0;
- font-weight: normal;
- }
-}
-.clearfix {
- clear: both;
+/*
+#archive li > ul {
+ display: none;
}
+*/
View
32 templates/book.hamlet
@@ -1,16 +1,16 @@
-<h1>Yesod Web Framework Book
-
-<p>
- Available soon from O'Reilly:
-<div>
- <a href="http://shop.oreilly.com/product/0636920023142.do">
- <img src="http://akamaicovers.oreilly.com/images/0636920023142/cat.gif" alt="Developing Web Applications with Haskell and Yesod">
-
-<nav>
- $forall Part title chapters <- parts
- <nav .part>
- <h1>#{title}
- <ul>
- $forall Chapter title _ slug _ <- chapters
- <li>
- <a href=@{ChapterR slug}>#{title}
+<section .why>
+ <p>
+ Available soon from O'Reilly:
+ <div>
+ <a href="http://shop.oreilly.com/product/0636920023142.do">
+ <img src="http://akamaicovers.oreilly.com/images/0636920023142/cat.gif" alt="Developing Web Applications with Haskell and Yesod">
+
+ <h2> Chapters
+ <ul>
+ $forall Part title chapters <- parts
+ <li>
+ #{title}
+ <ul>
+ $forall Chapter title _ slug _ <- chapters
+ <li>
+ <a href=@{ChapterR slug}>#{title}
View
79 templates/book.lucius
@@ -1,79 +0,0 @@
-nav.part {
- margin-left: 1em;
- ul {
- margin-left: 1em;
- padding: 0;
- }
- vertical-align: top;
- margin-right: 2em;
-
- a, a:visited {
- text-decoration: none;
- color: blue;
- }
-}
-
-body {
- font-family: Helvetica, sans-serif;
- background: #FAFAFA;
- color: #333;
-}
-
-#main header {
- height: 80px;
-
- img {
- border: none;
- padding: 0;
- box-shadow: none;
- }
-
- > a {
- float: left;
- margin-left: 5px;
- }
-
- nav {
- text-align: right;
- }
-
- li {
- display: inline;
- margin-right: 1em;
- }
- a, a:visited {
- color: #23A;
- text-decoration: none;
- }
-}
-
-a {
- color: #23A;
- text-decoration: none;
-}
-a:visited {
- color: #53A;
- text-decoration: none;
-}
-#main {
- margin: 0 auto;
- width: 600px;
- line-height: 1.5em;
- pre {
- border: solid 1px #CCC;
- background: #EEE;
- padding: .5em;
- }
- figure {
- border: 1px solid #CCC;
- box-shadow: 0 0 3px #CCC inset;
- padding: 1em;
- margin: 2ex 0;
- figcaption {
- text-size: .9em;
- text-align: center;
- color: #555;
- }
- img { border: solid 1px #CCC; }
- }
-}
View
10 templates/booklist.hamlet
@@ -0,0 +1,10 @@
+<section .getting-started>
+ <h2> Chapters
+ <ul>
+ $forall Part title chapters <- parts
+ <li>
+ #{title}
+ <ul>
+ $forall Chapter title _ slug _ <- chapters
+ <li>
+ <a href=@{ChapterR slug}>#{title}
View
39 templates/default-layout-wrapper.hamlet
@@ -8,25 +8,50 @@
<meta charset="UTF-8">
<title>#{pageTitle pc}
- <meta name="description" content="">
- <meta name="author" content="">
+ <meta name="description" content="Yesod is a Haskell web framework for productive development of type-safe, RESTful, high performance web applications.">
<meta name="viewport" content="width=device-width,initial-scale=1">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
^{pageHead pc}
\<!--[if lt IE 9]>
\<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
\<![endif]-->
- <link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css">
+ <link href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600,600italic,700,700italic" rel="stylesheet" type="text/css">
+ <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" rel="stylesheet" type="text/css">
+
<script>
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');
<body>
- <div id="container">
+ <#spotlight>
+ <#container>
+ <nav>
+ <ul>
+ <li.googleplus>
+ <g:plusOne>
+ <li>
+ <a href=@{BookR}>book
+ <li>
+ <a href=@{BlogR}>blog
+ <li>
+ <a href=@{WikiR "Home"}>wiki
+ <li.feedlink>
+ <a href=@{FeedR} #feedlink>
+ <span>newsfeed
+ <.headergroup>
+ <a href="/">
+ <.homepage-logo>
+ <.logo-image>
+ <.logo-text>Yesod Web Framework
+ <.homepage-info>
+ Yesod is a Haskell web framework for productive development of type-safe, RESTful, high performance web applications.
+ <aside #announcement>
+ <.tri-left>
+ <.tri-right>
+ <.msg>
+ <span.subject>#{pageTitle pc}
<div id="main" role="main">
- ^{pageBody pc}
- <footer><a href="#main">Return to top &uarr;</a>
+ ^{pageBody pc}
<script>
window._gaq = [['_setAccount','UA-1434510-13'],['_trackPageview'],['_trackPageLoadTime']];
View
16 templates/default-layout.hamlet
@@ -1,19 +1,3 @@
-<header>
- <a href=@{RootR}>
- <img src=@{StaticR logo_home2_no_esod_png} alt=Yesod>
- <nav>
- <ul>
- <li>
- <g:plusOne>
- <li>
- <a href=@{BookR}>Book
- <li>
- <a href=@{BlogR}>Blog
- <li>
- <a href=@{WikiR "Home"}>Wiki
- <li>
- <a href=@{FeedR} #feedlink>
- <span>Newsfeed
$maybe msg <- mmsg
<div #message>#{msg}
^{widget}
View
337 templates/default-layout.lucius
@@ -1,89 +1,273 @@
-body {
- font-family: Helvetica, sans-serif;
- background: #FAFAFA;
- color: #333;
+#main {
+ figure {
+ border: 1px solid #CCC;
+ box-shadow: 0 0 3px #CCC inset;
+ padding: 1em;
+ margin: 2ex 0;
+ figcaption {
+ text-size: .9em;
+ text-align: center;
+ color: #555;
+ }
+ img { border: solid 1px #CCC; }
+ }
+}
+
+/* Homepage-specific styling */
+
+#container {
+ min-width: 1094px;
}
dd, p {
- font-family: 'Droid Serif', serif;
+ text-align: justify;
+}
+
+
+body {
+ font-family: 'Crimson Text', serif;
+ font-size: 1.2em;
+ background-color: #e5eef9;
+}
+
+a, a:visited {
+ color: #000;
}
-#main header {
- height: 100px;
- box-shadow: 0 0 3px #238 inset;
- background-color: #CCD;
- color: #EEE;
- padding: 1em;
- img {
- border: none;
+a:hover, a:active {
+ color: #823;
+}
+
+nav {
+ box-shadow: 0 -5px 20px 20px rgba(41,55,78,0.12);
+ z-index: 100;
+ background-color: #29374e;
+ padding: 5px;
+ font-family: 'Lato';
+ font-size: 0.80em;
+ font-weight: 400;
+ ul {
+ margin: 0;
padding: 0;
- box-shadow: none;
+ text-align: right;
+
+ li {
+ display: inline;
+ margin-right: 3em;
+ }
+
+ li.googleplus {
+ position: relative;
+ top: 2px;
+ margin-right: 3em;
+ }
+
+ li.feedlink {
+ position: relative;
+ top: 3px;
+ }
}
- > a {
- float: left;
- margin-left: 5px;
+ a, a:visited {
+ color: #eee;
+ text-decoration: none;
}
+}
- nav {
- text-align: right;
+#spotlight {
+ background-image: -webkit-radial-gradient(50% 50%, circle farthest-side, #fff, #e5eef9 100%);
+ background-image: -moz-radial-gradient(50% 50%, circle farthest-side, #fff, #e5eef9 100%);
+ background-image: -o-radial-gradient(50% 50%, circle farthest-side, #fff, #e5eef9 100%);
+ background-image: -ms-radial-gradient(50% 50%, circle farthest-side, #fff, #e5eef9 100%);
+ background-image: radial-gradient(50% 50%, circle farthest-side, #fff, #e5eef9 100%);
+ position: absolute;
+ width: 1050px;
+ height: 300px;
+ top: 0;
+ left: 50%;
+ margin-left: -475px;
+ z-index: -1;
+}
+
+div.headergroup {
+ width: 1050px;
+ margin: 0 auto;
+ position: relative;
+ padding-top: 1.3em;
+ padding-bottom: 1.3em;
+ a {
+ text-decoration: none;
+ }
+ div.homepage-logo {
+ text-align: center;
+ width: 550px;
+ height: 105px;
+ margin-left: 75px;
+ div.logo-image {
+ background: url(@{StaticR logo_home2_no_esod_smaller2_png}) no-repeat center center;
+ width: 100%;
+ height: 75px;
+ }
+ div.logo-text {
+ color: #29374e;
+ padding-top: 0.2em;
+ font-family: 'Lato';
+ font-weight: 300;
+ font-size: 1.2em;
+ padding-bottom: 0.3em;
+ }
}
- li {
- display: inline;
- margin-right: 1em;
+ div.homepage-info {
+ text-align: left;
+ font-family: 'Lato';
+ font-weight: 300;
+ font-size: 0.8em;
+ line-height: 1.6em;
+ position: absolute;
+ left: 600px;
+ top: 0;
+ width: 220px;
+ padding: 30px;
}
- a, a:visited {
- color: #23A;
- font-weight: bold;
- text-decoration: none;
+
+ h2 {
+ margin-bottom: 0;
+ font-size: 1.4em;
+ margin-top: 0;
+ padding-top: 0.4em;
+ padding-bottom: 1em;
}
}
-#main footer {
- height: 100px;
- margin-top: 2ex;
- border-top: solid 1px #CCC;
- padding: 2ex 0;
- text-align: right;
+h1, h2, h3, h4, h5, h6, dt {
+ color: #474f6b;
+ font-family: 'Lato';
+ font-weight: 400;
}
-a {
- color: #23A;
- text-decoration: none;
+h1 {
+ font-weight: 300;
+ font-size: 1.8em;
}
-a:visited {
- color: #53A;
- text-decoration: none;
+h2 {
+ font-weight: 400;
+ font-size: 1.5em;
+}
+
+h1 {
+ span {
+ display: none;
+ }
+}
+
+section {
+ h2 {
+ margin-top: 2.2em;
+ margin-bottom: 0;
+ }
+ img {
+ max-width: 100%;
+ }
+ display: table-cell;
+}
+section section {
+ display: block;
+ width: auto;
+ padding: 0;
+ margin: 0;
+}
+
+section.why {
+ width: 600px;
+ padding-left: 90px;
+ padding-right: 90px;
+ article {
+ width: 600px;
+ }
+}
+
+section.getting-started {
+ background-color: #f4f4f4;
+ width: 300px;
+ padding-left: 50px;
+ padding-right: 50px;
+
+ h2 {
+ font-size: 1.2em;
+ margin-bottom: 0.7em;
+ margin-top: 1.8em;
+ }
+
+ ul {
+ font-family: 'Lato';
+ font-size: 0.75em;
+ font-weight: 500;
+ margin-bottom: 20px;
+ line-height: 2em;
+ list-style-type: none;
+ margin-bottom: 50px;
+ padding-left: 0;
+ }
+ ul ul { font-size: .9em }
+
+ div {
+ font-family: 'Lato';
+ padding-left: 20px;
+ }
}
#main {
+ box-shadow: 0 10px 25px 25px rgba(41,55,78,0.05);
+ background-color: #fff;
+ position: relative;
+ width: 1050px;
margin: 0 auto;
- max-width: 960px;
- line-height: 1.5em;
- pre {
- border: solid 1px #CCC;
- background: #EEE;
- padding: .5em;
- overflow: auto;
+}
+
+aside#announcement {
+ box-shadow: 0 0 20px 10px rgba(41,55,78,0.12);
+ height: 20px;
+ margin: 0 auto;
+ position: relative;
+ width: 1080px;
+ background-color: #29374e;
+ color: #eee;
+ padding: 0.5em;
+ font-family: 'Lato';
+ font-weight: 400;
+ font-size: 0.8em;
+ div.msg {
+ margin-left: 105px;
}
- figure {
- border: 1px solid #CCC;
- box-shadow: 0 0 3px #CCC inset;
- padding: 1em;
- margin: 1ex 0;
- img {
- border: solid 1px #CCC;
- margin: 0 auto;
- display: block;
- }
- figcaption {
- text-size: .9em;
- text-align: center;
- color: #555;
- margin-bottom: 1ex;
- }
+ z-index: 50;
+
+ div.tri-left, div.tri-right {
+ width: 0;
+ height: 0;
+ position: absolute;
+ bottom: -21px;
+ border-style: solid;
+ }
+ div.tri-left {
+ left: 0;
+ border-width: 11px 11px 10px 11px;
+ border-color: #0b1b30 #0b1b30 transparent transparent;
}
+ div.tri-right {
+ right: 0;
+ border-width: 11px 11px 11px 10px;
+ border-color: #0b1b30 transparent transparent #0b1b30;
+ }
+}
+aside#announcement a, aside#announcement a:visited {
+ color: #eee;
+ text-decoration: underline;
+}
+
+aside#announcement span.date {
+ font-style: italic;
+ font-size: 0.8em;
}
#feedlink {
@@ -96,16 +280,25 @@ a:visited {
}
}
-table.community {
- border-collapse: collapse;
+dt {
+ font-weight: 400;
+ font-size: 1.05em;
+ margin-bottom:0.7em;
+ margin-top:2.3em;
+}
- th,td {
- border-bottom: 1px solid #ccc;
- padding-top: 10px;
- vertical-align: top;
- }
- th {
- text-align: right;
- padding-right: 10px;
- }
+dd, p {
+ margin: 0;
+ font-size: 1em;
+ line-height: 155%;
+ margin-bottom: 0.5em;
}
+
+p.what {
+ display:none;
+ font-size: 1.4em;
+ padding: 0 200px;
+}
+
+
+
View
5 templates/highlight.lucius
@@ -5,8 +5,9 @@ Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiac
*/
pre code {
- display: block; padding: 0.5em;
- background: #F0F0F0;
+ display: block;
+ padding: 0.5em;
+ background: #F4F4F4;
}
pre code,
View
2 templates/normalize.lucius
@@ -175,7 +175,7 @@ kbd,
samp {
font-family: "DejaVu Sans Mono", "Droid Sans Mono", consolas, "courier new", monospace;
_font-family: 'courier new', monospace;
- font-size: 1em;
+ font-size: .85em;
}
/*

0 comments on commit a0ccaed

Please sign in to comment.