Skip to content

E
edx-platform
Commit be034d24 by Galen Frechette
Options

cleans up course info/profile page

parent 905ac4fc
Showing with 46 additions and 133 deletions
lms/static/sass/_course_info.scss
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
} }
header.course-profile { header.course-profile {
background: rgb(245,245,245); background: rgb(240,240,240);
//@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245))); @include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245)));
@include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5)); @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
border-bottom: 1px solid rgb(200,200,200); border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
@include clearfix; @include clearfix;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
padding: 50px 0px 40px; padding: 40px 0px 40px;
position: relative; position: relative;
width: flex-grid(12); width: flex-grid(12);
...@@ -41,6 +41,8 @@ ...@@ -41,6 +41,8 @@
z-index: 2; z-index: 2;
> hgroup { > hgroup {
//@include inline-block;
//padding: 0 30px;
position: relative; position: relative;
hr { hr {
...@@ -67,9 +69,9 @@ ...@@ -67,9 +69,9 @@
h1 { h1 {
font: bold 2.8rem/3.2rem $sans-serif; font: bold 2.8rem/3.2rem $sans-serif;
@include inline-block; margin-bottom: 0px;
margin-right: 5px;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
//text-align: center;
span { span {
color: $lighter-base-font-color; color: $lighter-base-font-color;
...@@ -79,7 +81,7 @@ ...@@ -79,7 +81,7 @@
} }
h2 { h2 {
@include inline-block; //text-align: center;
a { a {
color: $lighter-base-font-color; color: $lighter-base-font-color;
...@@ -92,92 +94,31 @@ ...@@ -92,92 +94,31 @@
} }
} }
} }
.course-dates {
p {
color: $lighter-base-font-color;
@include inline-block;
font: 300 1.2rem/1.6rem $sans-serif;
margin-top: 0px;
margin-right: 20px;
text-transform: uppercase;
&:last-child {
margin: 0;
}
> span {
color: $base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
margin-left: 5px;
}
}
}
} }
.actions { .actions {
float: left; float: left;
padding-top: 5px;
position: relative; position: relative;
width: flex-grid(4); width: flex-grid(4);
z-index: 2; z-index: 2;
&:hover { a.register {
.register-wrapper { @include button(shiny, $blue);
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
border-color: rgb(180,180,180);
}
}
.register-wrapper {
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9)); @include border-radius(3px);
border: 1px solid rgb(210,210,210); display: block;
@include border-radius(4px); font: italic 1.2rem/1.6rem $serif;
@include transition(all, 0.15s, linear); margin-bottom: 10px;
padding: 10px; padding: 10px 0px;
text-transform: uppercase;
a.register { text-align: center;
@include button(shiny, $blue); width: flex-grid(12);
@include box-sizing(border-box);
@include border-radius(3px);
display: block;
font: italic 1.2rem/1.6rem $serif;
padding: 10px 0px;
position: relative;
text-transform: uppercase;
text-align: center;
width: flex-grid(12);
z-index: 1;
}
} }
.social-sharing { .social-sharing {
padding: 0px 20px; background: rgb(230,230,230);
height: 40px;
p {
background: rgb(245,245,245);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.075), inset 0 0 0 1px rgba(255,255,255, 0.9));
border: 1px solid rgb(210,210,210);
border-top: 0;
@include border-bottom-radius(4px);
padding: 5px 10px;
margin: 0 auto;
color: $lighter-base-font-color;
font: italic 300 1.2rem/1.6rem $serif;
margin: 0 0 5px 0;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:last-child {
margin: 0;
}
> span {
font: normal 1.2rem/1.6rem $sans-serif;
margin-right: 5px;
}
}
} }
} }
} }
...@@ -190,7 +131,8 @@ ...@@ -190,7 +131,8 @@
border-bottom: 1px solid rgb(220,220,220); border-bottom: 1px solid rgb(220,220,220);
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
margin: 40px 0; margin-bottom: 40px;
//text-align: center;
width: flex-grid(12); width: flex-grid(12);
&::after { &::after {
...@@ -200,22 +142,14 @@ ...@@ -200,22 +142,14 @@
} }
a { a {
border-bottom: 3px solid transparent;
color: $lighter-base-font-color; color: $lighter-base-font-color;
@include inline-block; @include inline-block;
font: normal 1.2rem/1.6rem $sans-serif; font: normal 1.2rem/1.6rem $sans-serif;
margin: 0 15px; padding: 30px 20px;
padding: 0px 5px 15px;
text-align: center; text-align: center;
text-transform: uppercase;
&:first-child {
margin-left: 0px;
}
&:hover, &.active { &:hover, &.active {
border-color: $pink; background: rgb(240,240,240);
//background: rgb(240,240,240);
color: $base-font-color; color: $base-font-color;
} }
} }
...@@ -241,6 +175,8 @@ ...@@ -241,6 +175,8 @@
width: flex-grid(8); width: flex-grid(8);
.inner-wrapper { .inner-wrapper {
//padding: 0 60px;
> section { > section {
&::after { &::after {
...@@ -306,6 +242,25 @@ ...@@ -306,6 +242,25 @@
background: rgb(245,245,245); background: rgb(245,245,245);
margin-bottom: 20px; margin-bottom: 20px;
padding: 15px; padding: 15px;
&.dates {
p {
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 15px;
margin-top: 0px;
padding-bottom: 5px;
&:last-child {
border: none;
margin: 0;
padding: 0;
}
> span {
margin-left: 20px;
}
}
}
} }
.media { .media {
...@@ -318,53 +273,11 @@ ...@@ -318,53 +273,11 @@
.hero { .hero {
height: 180px; height: 180px;
overflow: hidden; overflow: hidden;
position: relative;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4)));
@include border-radius(4px);
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.3);
height: 80px;
left: 50%;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
width: 80px;
&::after {
color: $base-font-color;
content: "\25B6";
display: block;
font: normal 3.2rem/3.2rem $sans-serif;
left: 50%;
margin-left: -12px;
margin-top: -17px;
position: absolute;
text-shadow: 0 1px rgba(255,255,255, 0.8);
top: 50%;
}
}
img { img {
min-width: 100%; min-width: 100%;
} }
} }
&:hover {
cursor: pointer;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5)));
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.4);
&::after {
color: $pink;
}
}
}
} }
} }
} }
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