Skip to content

E
edx-platform
Commit 88a3a69c by Kyle Fiedler
Options

added a bunch more overall style 

--HG--
branch : kf-refactor
parent ba557aef
Showing with 185 additions and 80 deletions
.hgignore
syntax: glob
*.pyc
*~
courseware.html
......@@ -24,12 +24,12 @@ $('#hide_acc').click(function() {
<%include file="navigation.html" />
<section>
<section class="main-content">
<div id="accordion">
${accordion}
</div>
<section class="main-content">
<section class="course-content">
${content}
</section>
</section>
navigation.html
<header>
<h1>Circuits and Electronics</h1>
<div class="header-wrapper">
<header>
<h1>Circuits and Electronics</h1>
<nav>
<ul class="coursenav">
<li><a href="/courseware">Courseware</a></li>
<li><a href="/book">Textbook</a></li>
<li><a href="/discussion">Discussion</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/profile">Profile</a></li>
</ul>
</nav>
</header>
<nav>
<ul class="coursenav">
<li><a href="/courseware">Courseware</a></li>
<li><a href="/book">Textbook</a></li>
<li><a href="/discussion">Discussion</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/profile">Profile</a></li>
</ul>
</nav>
</header>
</div>
profile.html
......@@ -67,7 +67,7 @@ $(function() {
<%include file="navigation.html" />
<section class="profile-content">
<section class="main-content">
<section class="user-info">
<h1>${name}</h1>
......
sass/_base-extends.scss
......@@ -16,3 +16,10 @@
width: grid-width(8);
float: left;
}
.wrapper {
margin: 0 auto;
max-width: $max-width;
width: grid-width(12);
text-align: left;
}
sass/_base-variables.scss
......@@ -33,6 +33,7 @@ $body-line-height: golden-ratio($body-font-size, 1);
// color
$light-gray: #f3f3f3;
$dark-gray: #333;
$mit-red: #993333;
$text-color: $dark-gray;
$border-color: $light-gray;
sass/_base.scss 0 → 100644
p {
margin-bottom: $body-line-height;
}
sass/_courseware.scss
div#accordion {
@extend .sidebar;
@include box-shadow( inset -1px 0 0 #f6f6f6);
background: #e3e3e3;
border-right: 1px solid #d3d3d3;
display: table-cell;
font-family: $body-font-family;
// padding: $body-line-height 0;
text-shadow: 0 1px 0 #f6f6f6;
vertical-align: top;
width: 280px;
h3 {
&.ui-accordion-header {
color: #000;
a {
font-size: $body-font-size;
color: lighten($text-color, 10%);
}
&.ui-state-default {
background: none;
font-weight: normal;
border: none;
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
}
&.ui-state-hover {
border: none;
border-bottom: 1px solid #d3d3d3;
}
&.ui-state-active {
background: none;
border: 0;
color: #000;
font-weight: bold;
@include box-shadow(none);
a {
color: #000;
}
}
}
}
ul.ui-accordion-content {
background: #d6d6d6;
border: none;
font-size: 12px;
margin: 0;
}
}
section.main-content {
@extend .content;
section.course-content {
@include box-sizing(border-box);
display: table-cell;
padding: $gw-gutter 0 $gw-gutter $gw-gutter;
vertical-align: top;
}
sass/_layout.scss
html {
text-align: center;
margin: 0 $gw-gutter;
margin-top: 0;
body {
color: $dark-gray;
font: $body-font-size $body-font-family;
margin: $body-line-height auto;
max-width: $max-width;
text-align: left;
width: grid-width(12);
text-align: center;
margin: 0;
background: #f3f3f3;
header {
@extend .clearfix;
border-bottom: 1px solid $border-color;
margin-bottom: $body-line-height;
h1 {
border-right: 1px solid $border-color;
font-size: $body-font-size;
font-weight: bold;
margin: 0 $gw-gutter 0 0;
padding: $body-line-height $gw-gutter $body-line-height 0;
display: block;
float: left;
}
div.header-wrapper {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 1px 1px #ccc);
@include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
border-bottom: 1px solid darken($mit-red, 10%);
z-index: 99;
nav {
float: left;
display: block;
margin: 0;
header {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
padding: 0 $body-line-height;
h1 {
border-right: 1px solid $mit-red;
font-size: $body-font-size;
font-weight: bold;
margin: 0 $gw-gutter 0 0;
padding: 15px $gw-gutter 15px 0;
display: block;
float: left;
text-shadow: 0 1px 0 lighten($mit-red, 10%);
}
ul {
@extend .clearfix;
display: inline-block;
padding: $body-line-height 0;
nav {
float: left;
display: block;
margin: 0;
li {
margin-right: $body-line-height;
ul {
@extend .clearfix;
display: inline-block;
margin-bottom: 0;
padding: 15px 0;
margin: 0;
li {
margin-right: $body-line-height;
display: inline-block;
margin-bottom: 0;
a {
color: #fff;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
}
}
}
}
}
}
section {
section.main-content {
@extend .clearfix;
@extend .wrapper;
@include box-shadow(0 0px 1px #ccc);
@include box-sizing(border-box);
background: #fff;
border-top: 0;
border: 1px solid #ccc;
z-index: 0;
}
img {
max-width: 100%;
height: auto;
}
}
footer {
@extend .clearfix;
@extend .wrapper;
@include box-sizing(border-box);
color: #777;
margin-top: $body-line-height;
padding: 0 $body-line-height;
p {
float: left;
a {
color: #444;
}
}
footer {
padding: $body-line-height 0;
border-top: 1px solid $border-color;
margin-top: $body-line-height;
ul {
float: right;
li {
display: inline-block;
margin-right: 20px;
a {
color: #444;
}
}
}
}
}
sass/_profile.scss
section.profile-content {
section.user-info {
width: grid-width(6);
float: left;
margin-right: $gw-gutter;
}
section.user-info {
width: grid-width(6);
float: left;
margin-right: $gw-gutter;
}
section.course-info {
width: grid-width(6);
float: left;
section.course-info {
width: grid-width(6);
float: left;
ul {
li {
display: inline-block;
padding-right: 1em;
}
ul {
li {
display: inline-block;
padding-right: 1em;
}
}
}
sass/application.scss
......@@ -2,7 +2,7 @@
@import "reset";
// Base layout
@import "base-variables", "base-extends";
@import "base-variables", "base-extends", "base";
@import "layout";
// pages
......
staticbook.html
......@@ -36,7 +36,7 @@ function next_page() {
<%include file="navigation.html" />
<section class="book-container">
<section class="main-content">
<ul id="booknav" class="treeview-booknav">
<%include file="book_toc.html" />
</ul>
......
video.html
......@@ -22,15 +22,14 @@
</ol>
<section class="video-controls">
<ul>
<li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
<li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
</ul>
<div id=slider></div>
<div id="vidtime">0:00/0:00</div>
<div id="video_speeds"></div>
<ul>
<li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
<li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
</ul>
<div id=slider></div>
<div id="vidtime">0:00/0:00</div>
<div id="video_speeds"></div>
</section>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment