From 12894031744ed3cf5018b4ed8ddae0ec67b83f32 Mon Sep 17 00:00:00 2001 From: Raniere Silva Date: Thu, 13 Nov 2014 19:28:48 -0200 Subject: [PATCH] Clean CSS file --- css/swc.css | 402 ++++++++++++++++++++++------------------------------ 1 file changed, 168 insertions(+), 234 deletions(-) diff --git a/css/swc.css b/css/swc.css index 79ec3c0..e5e769c 100644 --- a/css/swc.css +++ b/css/swc.css @@ -1,59 +1,3 @@ -/* Headings */ -h1, h2, h3, h4, h5, h6 { - color: rgb(03,03,03); -} - -h1, h2 { - margin-top: 40px; - margin-bottom: 10px; -} - -h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - color: inherit; -} - -/* Chapter titles. */ -div.chapter h2 { - text-align: center; - font-style: italic; -} - -/* Objectives and key points */ -.objectives, .keypoints { - background-color: azure; -} - -/* Things to fix. */ -.fixme { - text-decoration: underline; - color: darkred; - background-color: lightgray; -} - -/* Putting shadows around things. */ -.shadow { - -moz-box-shadow: 0 0 30px 5px #999; - -webkit-box-shadow: 0 0 30px 5px #999; - box-shadow: 0 0 30px 5px #999; -} - -/* Things to understand (lead-in to sections in book). */ -.understand { - background-color: lightyellow; -} - -/* Block quotations. */ -blockquote { - margin: 1em; - padding: 1em 1em .5em 1em; - width: 90%; -} - -/* Citation for testimonial quote. */ -blockquote.testimonial cite { - font-style: italic; -} - /* Main body of pages. */ body { background: #BEC3C6; @@ -79,6 +23,10 @@ div.banner { border-bottom: 1px solid #A6A6A6; } +.swc-blue-bg { + background-color: #20267D; +} + /* Padding around image in top banner. */ div.banner a img { padding: 20px 25px; @@ -90,46 +38,6 @@ div.banner a img { } } -/* Explanatory call-out boxes. */ -div.box { - background-color: mistyrose; - display: block; - margin-left: auto; - margin-right: auto; - padding-top: 1px; - padding-bottom: 1px; - padding-left: 10px; - padding-right: 10px; - outline-color: gray; - outline-width: 1px; - outline-style: solid; -} -@media (max-width: 700px) { - div.box { - width: 80%; - } -} -@media (min-width: 700px) { - div.box { - width: 54em; - max-width: 80%; - } -} - -/* Level 2 headings inside pages. */ -div.content div h3 { - border-bottom: 1px solid #CCCCCC; - display: block; - font-family: Verdana,"BitStream vera Sans"; - margin-top: 10px; - padding: 0 5px 3px; -} - -/* PDF and slide files referenced from lectures. */ -div.files { - padding: 10px; -} - /* Footer of every page. */ div.footer { clear: both; @@ -139,111 +47,42 @@ div.footer { text-align: right; } -.swc-blue-bg { - background-color: #20267D; -} - -/* Main menu at the top of every page. */ -div.mainmenu { - clear: both; - background-color: #F4F4F4; - margin: 0px; - padding: 3px 0px 3px 25px; - border-bottom: 1px solid #A6A6A6; - height:30px -} - -#menubar { - float:left; - margin-top:4px; -} - -#searchbar { - float:right; - margin-right:20px; -} - -/* Narration for audio-only lectures. */ -div.narration { - text-align: center; - font-size: 2em; -} - -/* Table of contents. */ -div.toc { - /* No special styling yet. */ -} - -.transcript { - display: table; -} - -.transcript .media img { - border: 1px solid grey; +/* Headings */ +h1, h2, h3, h4, h5, h6 { + color: rgb(03,03,03); } - -/* Title styling */ h1.title { margin:40px 0px; border-bottom:1px solid #515151; } -/* YouTube video embed. */ -div.youtube { - text-align: center; - padding: 10px; -} - -/* Glossary description lists. */ -dl.gloss { - /* Empty for now. */ -} - -/* FIXME: shouldn't be using iframe's directly (EventBrite and YouTube should be via macro expansion). */ -iframe.youtube_player { - border : 0; - text-align : center; - width : 640px; - height : 500px; -} - -/* Amy Brown's logo in book/stylesheet.html. */ -img.logoARB { - float: right; -} - -/* Person's name in team.html. */ -span.person { - font-weight: bold; - font-style: italic; -} - -/* Bibliography book covers. */ -img.book-cover { - width: 80px; +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + color: inherit; } -/* Blog calendar table in blog/index.html. */ -table.blogcalendar th { - text-align : right; - font-weight : bold; +/* Objectives and key points */ +.objectives, .keypoints { + background-color: azure; } -/* See above. */ -table.blogcalendar th.left { - text-align : left; +/* Things to fix. */ +.fixme { + text-decoration: underline; + color: darkred; + background-color: lightgray; } -/* See above. */ -table.blogcalendar tr td { - text-align : right; +/* Things to understand (lead-in to sections in book). */ +.understand { + background-color: lightyellow; } -/* Blog index tables in blog/index.html. */ -table.blogindex td.date { - text-align: left ; - width:10em; +/* Block quotations. */ +blockquote { + margin: 1em; + padding: 1em 1em .5em 1em; + width: 90%; } /* Tables used for displaying choices in challenges. */ @@ -256,54 +95,6 @@ table.outlined { border-collapse: collapse; } -/* Container for content in the workshop index page */ -div.workshops { - text-align: center; -} - -/* Link items (to workshop pages) in the workshops tables */ -table.workshops td.link { - width: 50%; - text-align: left; -} - -/* Spacer items (i.e. ellipsis) on the workshops tables */ -table.workshops td.spacer { - max-width: 100%; - text-align: center; -} - -/* Date columns on the workshops tables */ -table.workshops td.date { - width: 50%; - text-align: right; -} - -/* Badge modal dialog */ -#assertion-modal { - width:700px; - margin-left:-350px; -} -#assertion-modal iframe { - background-color: transparent; - border: 0px none transparent; - padding: 0px; - width: 100%; - height: 20em; -} - -#assertion-model img.badge { - position: absolute; - right: 15px; - bottom: 35px; - opacity: 0.5; -} - -/* list with checkbox as bullet */ -ul.checklist { - list-style-image: url('/img/checkbox.png'); -} - /* Printing */ @media print { h1 { @@ -339,3 +130,146 @@ ul.checklist { display: none; } } + +/*----------------------------------------*/ +/* Override Bootstrap CSS */ +/*----------------------------------------*/ + +blockquote p { + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} +/* readability: darken the alert colour for contrast with background */ + +.alert { + color: rgb(0, 0, 0); +} +/* Container for page contents. */ + +.container { + background-color: white; +} +.hero-unit { + padding: 20px; +} +.navbar .container { + background-color: inherit; +} +.navbar-inner { + min-height: 40px; + padding-right: 20px; + padding-left: 20px; + background-color: #F4F4F4; + background-image: none; + border: 1px solid #d4d4d4; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} +code { + color: #333333; +} +.navbar-inverse .navbar-inner { + background-color: #20267D; + background-image: none; + border-color: #20267D; +} +.navbar-inverse .nav .active > a, +.navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus { + color: #ffffff; + background-color: #20267D; +} +.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, +.navbar-inverse .nav li.dropdown.active > .dropdown-toggle, +.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle { + color: #ffffff; + background-color: #20267D; +} +.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret { + border-top-color: #999999; + border-bottom-color: #999999; +} +.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; +} + +/* GitHub Ribbon */ +#github-ribbon a { + background: #000; + color: #fff; + text-decoration: none; + font-family: arial, sans-serif; + text-align: center; + font-weight: bold; + padding: 5px 40%; + font-size: 0.8rem; + line-height: 1.6rem; + position: relative; + transition: 0.5s; + width: 100%; + margin: 0 auto; + white-space: nowrap; + z-index: 10; +} +#github-ribbon a:hover { + background: #600; + color: #fff; +} +#github-ribbon a::before, #github-ribbon a::after { + content: ""; + width: 100%; + display: block; + position: absolute; + top: 1px; + left: 0; + height: 1px; + background: #fff; +} +#github-ribbon a::after { + bottom: 1px; + top: auto; +} + +/* GitHub ribbon breaking point */ +@media screen and (min-width: 600px) { + .navbar .btn-navbar { + margin-right: 150px; + } + #github-ribbon { + position: absolute; + display: block; + top: 0; + right: 0; + width: 150px; + overflow: hidden; + height: 150px; + } + #github-ribbon a { + width: 200px; + position: absolute; + padding: 5px 40px; + top: 40px; + right: -80px; + transform: rotate(45deg); + -webkit-transform: rotate(45deg); + box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8); + } +} +@media (max-width: 599px) { + .header h1 { + font-size: 20pt; + } + #header-text { + font-size: 16pt; + } + #github-ribbon { + width: 100%; + } + #github-ribbon a { + display: block; + padding: 0px 0px; + margin: 0px 0px; + } +}