From c64668ce140a272bd6ca4a98529f9b40ab5b9f67 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 9 Feb 2012 15:21:23 -0500 Subject: [PATCH] new styles for course info page and profile page --- css/application.css | 136 +++++++++++++++++++++++++++++--------------- css/marketing.css | 54 +++++++++++++----- 2 files changed, 129 insertions(+), 61 deletions(-) diff --git a/css/application.css b/css/application.css index 8d65dcb146..2f3a143926 100644 --- a/css/application.css +++ b/css/application.css @@ -129,7 +129,7 @@ input, select { font-weight: 800; font-style: italic; } -.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, body.askbot .secondary-nav nav:after, html body div.header-wrapper header:after, html body div.header-wrapper header hgroup:after, html body div.header-wrapper header nav ul:after, html body section.main-content:after, html footer:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-wrapper section.video-controls:after, section.course-content div.video-wrapper section.video-controls div#slider:after, div.book-wrapper section.book nav ul:after, div.profile-wrapper section.course-info ol > li:after, div.wiki-wrapper div#wiki_panel div#wiki_create_form:after, body.askbot footer div.footer-wrapper:after { +.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, body.askbot .secondary-nav nav:after, html body div.header-wrapper header:after, html body div.header-wrapper header hgroup:after, html body div.header-wrapper header nav ul:after, html body section.main-content:after, html footer:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-wrapper section.video-controls:after, section.course-content div.video-wrapper section.video-controls div#slider:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates ol li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info ol > li:after, div.wiki-wrapper div#wiki_panel div#wiki_create_form:after, body.askbot footer div.footer-wrapper:after { content: "."; display: block; height: 0; @@ -146,6 +146,12 @@ input, select { display: table; width: 100%; } +h1.top-header, div.info-wrapper section.updates > h1, div.profile-wrapper section.course-info > h1 { + margin: -22.652px -22.652px 22.652px; + padding: 22.652px; + background: #f3f3f3; + border-bottom: 1px solid #e3e3e3; } + .button, input[type="submit"], input[type="button"], button, div.question-header div.question-container div.comments-container div.comments-content div.comment div.comment-body div.comment-meta a.edit, div.answer-block div.question-container div.comments-container div.comments-content div.comment div.comment-body div.comment-meta a.edit, div.question-header div.answer-block div.answer-container div.comments-container div.comments-content div.comment div.comment-body div.comment-meta a.edit, div.answer-block div.question-header div.answer-container div.comments-container div.comments-content div.comment div.comment-body div.comment-meta a.edit, div.answer-block div.answer-container div.comments-container div.comments-content div.comment div.comment-body div.comment-meta a.edit { -webkit-box-shadow: inset 0 1px 0 #a2a2a2, 0 0 3px #cccccc; -moz-box-shadow: inset 0 1px 0 #a2a2a2, 0 0 3px #cccccc; @@ -594,13 +600,15 @@ div.leanModal_box { text-align: left; } div.leanModal_box form div#enroll_error, div.leanModal_box form div#login_error, div.leanModal_box form div#pwd_error { -webkit-font-smoothing: antialiased; - background-color: #F50200; + background-color: #333333; + border: black; color: #fff; + text-shadow: 0 1px 0 #1a1a1a; + font-family: "Open sans"; font-weight: bold; letter-spacing: 1px; - margin-bottom: 22.652px; - padding: 4.53px; - text-transform: uppercase; } + margin: -22.652px -22.652px 22.652px; + padding: 11.326px; } div.leanModal_box form div#enroll_error:empty, div.leanModal_box form div#login_error:empty, div.leanModal_box form div#pwd_error:empty { padding: 0; } div.leanModal_box form ol { @@ -690,6 +698,14 @@ div.leanModal_box { div#login { min-width: 400px; } + div#login header { + border-bottom: 1px solid #ddd; + margin-bottom: 22.652px; + padding-bottom: 22.652px; } + div#login header h1 { + border-bottom: 0; + padding-bottom: 0; + margin-bottom: 5.663px; } div#login ol li { width: auto; float: none; } @@ -1194,58 +1210,83 @@ div.book-wrapper section.book section.page { border: 1px solid #dddddd; max-width: 100%; } +div.info-wrapper section.updates > p { + margin-bottom: 22.652px; } +div.info-wrapper section.updates ol { + list-style: none; } + div.info-wrapper section.updates ol li { + padding-bottom: 11.326px; + margin-bottom: 11.326px; + border-bottom: 1px solid #e3e3e3; } + div.info-wrapper section.updates ol li h2 { + float: left; + width: 20.109%; + margin: 0 2.024% 0 0; } + div.info-wrapper section.updates ol li p { + float: left; + width: 77.174%; + margin-bottom: 0; } div.info-wrapper section.handouts { - -webkit-border-radius: 0px 4px 0px 4px; - -moz-border-radius: 0px 4px 0px 4px; - -ms-border-radius: 0px 4px 0px 4px; - -o-border-radius: 0px 4px 0px 4px; - border-radius: 0px 4px 0px 4px; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + -ms-border-radius: 0 4px 4px 0; + -o-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; border-right: 0; border-left: 1px solid #d3d3d3; } div.info-wrapper section.handouts h1 { - padding: 0 22.652px; } + padding: 0 22.652px; + font-size: 18px; } div.info-wrapper section.handouts ol { list-style: none; } - div.info-wrapper section.handouts ol li h2 { - padding: 0 22.652px; } - div.info-wrapper section.handouts ol li a { + div.info-wrapper section.handouts ol li { -webkit-box-shadow: 0 1px 0 #eeeeee; -moz-box-shadow: 0 1px 0 #eeeeee; -ms-box-shadow: 0 1px 0 #eeeeee; -o-box-shadow: 0 1px 0 #eeeeee; box-shadow: 0 1px 0 #eeeeee; - -webkit-transition-property: all; - -moz-transition-property: all; - -ms-transition-property: all; - -o-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.15s; - -moz-transition-duration: 0.15s; - -ms-transition-duration: 0.15s; - -o-transition-duration: 0.15s; - transition-duration: 0.15s; - -webkit-transition-timing-function: ease-out; - -moz-transition-timing-function: ease-out; - -ms-transition-timing-function: ease-out; - -o-transition-timing-function: ease-out; - transition-timing-function: ease-out; - -webkit-transition-delay: 0; - -moz-transition-delay: 0; - -ms-transition-delay: 0; - -o-transition-delay: 0; - transition-delay: 0; - border-bottom: 1px solid #d3d3d3; - color: #4d4d4d; - display: block; - padding: 7px 22.652px; - text-decoration: none; } - div.info-wrapper section.handouts ol li a:hover { - -webkit-box-shadow: 0 1px 0 white; - -moz-box-shadow: 0 1px 0 white; - -ms-box-shadow: 0 1px 0 white; - -o-box-shadow: 0 1px 0 white; - box-shadow: 0 1px 0 white; - background: #efefef; } + border-bottom: 1px solid #d3d3d3; } + div.info-wrapper section.handouts ol li p { + padding: 7px 22.652px; + margin: 0; + text-transform: none; + letter-spacing: 0; + font-size: 14px; } + div.info-wrapper section.handouts ol li p:hover { + background: #efefef; } + div.info-wrapper section.handouts ol li p a { + display: inline; + padding: 0; } + div.info-wrapper section.handouts ol li p a:hover { + text-decoration: underline; + background: none; } + div.info-wrapper section.handouts ol li a { + -webkit-transition-property: all; + -moz-transition-property: all; + -ms-transition-property: all; + -o-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + -ms-transition-delay: 0; + -o-transition-delay: 0; + transition-delay: 0; + color: #4d4d4d; + display: block; + padding: 7px 22.652px; + text-decoration: none; } + div.info-wrapper section.handouts ol li a:hover { + background: #efefef; } div.profile-wrapper { color: #000; } @@ -1258,7 +1299,8 @@ div.profile-wrapper { border-left: 1px solid #d3d3d3; border-right: 0; } div.profile-wrapper section.user-info h1 { - padding: 22.652px; } + padding: 0 22.652px; + font-size: 18px; } div.profile-wrapper section.user-info ul { list-style: none; } div.profile-wrapper section.user-info ul li { diff --git a/css/marketing.css b/css/marketing.css index 916f05173e..ad5656433a 100644 --- a/css/marketing.css +++ b/css/marketing.css @@ -164,11 +164,6 @@ input, select { visibility: hidden; } .button, header.announcement div section.course section a, section.index-content section.course a, section.index-content section.staff a, section.index-content section.about-course section.cta a.enroll { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; @@ -202,14 +197,21 @@ input, select { -o-transition-delay: 0; transition-delay: 0; background-color: #993333; + border: 1px solid #732626; color: #fff; margin: 25.888px 0 12.944px; padding: 6.472px 12.944px; text-decoration: none; font-style: normal; + -webkit-box-shadow: inset 0 1px 0 #b83d3d; + -moz-box-shadow: inset 0 1px 0 #b83d3d; + -ms-box-shadow: inset 0 1px 0 #b83d3d; + -o-box-shadow: inset 0 1px 0 #b83d3d; + box-shadow: inset 0 1px 0 #b83d3d; -webkit-font-smoothing: antialiased; } .button:hover, header.announcement div section.course section a:hover, section.index-content section.course a:hover, section.index-content section.staff a:hover, section.index-content section.about-course section.cta a.enroll:hover { - background-color: #732626; } + background-color: #732626; + border-color: #4d1919; } .button span, header.announcement div section.course section a span, section.index-content section.course a span, section.index-content section.staff a span, section.index-content section.about-course section.cta a.enroll span { font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; font-style: italic; } @@ -363,12 +365,19 @@ header.announcement { margin-left: 0; padding: 0; } header.announcement div section.course section a { + -webkit-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939; + -moz-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939; + -ms-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939; + -o-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939; + box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939; background-color: #4d1919; display: block; padding: 12.944px 25.888px; + border-color: #260d0d; text-align: center; } header.announcement div section.course section a:hover { - background-color: #732626; } + background-color: #732626; + border-color: #4d1919; } header.announcement div section.course p { width: 48.092%; line-height: 25.888px; @@ -527,10 +536,17 @@ section.index-content section { section.index-content section.about-course section.requirements p:nth-child(odd) { margin-right: 0; } section.index-content section.about-course section.cta { - width: 100%; } + width: 100%; + text-align: center; } section.index-content section.about-course section.cta a.enroll { - padding: 12.944px 25.888px; - display: block; + padding: 12.944px 51.776px; + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; text-align: center; font: 800 18px "Open Sans", Helvetica, Arial, sans-serif; } @@ -669,13 +685,15 @@ div.leanModal_box { text-align: left; } div.leanModal_box form div#enroll_error, div.leanModal_box form div#login_error, div.leanModal_box form div#pwd_error { -webkit-font-smoothing: antialiased; - background-color: #F50200; + background-color: #333333; + border: black; color: #fff; + text-shadow: 0 1px 0 #1a1a1a; + font-family: "Open sans"; font-weight: bold; letter-spacing: 1px; - margin-bottom: 25.888px; - padding: 5.178px; - text-transform: uppercase; } + margin: -25.888px -25.888px 25.888px; + padding: 12.944px; } div.leanModal_box form div#enroll_error:empty, div.leanModal_box form div#login_error:empty, div.leanModal_box form div#pwd_error:empty { padding: 0; } div.leanModal_box form ol { @@ -765,6 +783,14 @@ div.leanModal_box { div#login { min-width: 400px; } + div#login header { + border-bottom: 1px solid #ddd; + margin-bottom: 25.888px; + padding-bottom: 25.888px; } + div#login header h1 { + border-bottom: 0; + padding-bottom: 0; + margin-bottom: 6.472px; } div#login ol li { width: auto; float: none; }