Skip to content

E
edx-platform
Commit c0fba983 by Brian Talbot Committed by Mark Hoeber
Options

revising docs.edx.org layout/content structure: 

* main section revisions
* grid based revisions to link lists
* adding feedback section to bottom of view
* minor typography adjustments
* simplification of Sass/breakpoint logic
* adding last updated UI element to items
parent d2b2688c
Showing with 87 additions and 254 deletions
edx-docs/assets/css/main.css
This source diff could not be displayed because it is too large. You can view the blob instead.
edx-docs/assets/sass/elements/_controls.scss
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
} }
.icon-inline { .icon-inline {
@extend %t-icon-inline;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline/4); margin-right: ($baseline/4);
......
edx-docs/assets/sass/elements/_icons.scss
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
} }
%ui-badge { %ui-badge {
@extend %t-title9; @extend %t-title-9;
@extend %t-weight3; @extend %t-weight3;
position: relative; position: relative;
border-bottom-right-radius: ($baseline/10); border-bottom-right-radius: ($baseline/10);
......
edx-docs/assets/sass/elements/_navigation.scss
...@@ -15,53 +15,3 @@ nav { ...@@ -15,53 +15,3 @@ nav {
} }
} }
} }
// types - pill (left - right)
%nav-pill {
}
// types - blocks (top - bottom)
%nav-blocks {
}
// ====================
// primary navigation
nav.primary {
.nav-item {
a {
}
}
}
// ====================
// secondary navigation
nav.secondary {
&.horizontal {
@extend %nav-pill;
}
&.vertical {
@extend %nav-blocks;
}
}
// ====================
nav.pagination {
@extend %nav-pill;
}
// ====================
// footer/peripheral
nav.peripheral {
}
edx-docs/assets/sass/elements/_typography.scss
...@@ -145,27 +145,19 @@ ...@@ -145,27 +145,19 @@
// ==================== // ====================
// icons // icons
%t-icon {
}
%t-icon-s { %t-icon-s {
@extend %t-icon;
@include font-size(12); @include font-size(12);
} }
%t-icon-m { %t-icon-m {
@extend %t-icon;
@include font-size(16); @include font-size(16);
} }
%t-icon-l { %t-icon-l {
@extend %t-icon;
@include font-size(24); @include font-size(24);
} }
%t-icon-xl { %t-icon-xl {
@extend %t-icon;
@include font-size(36); @include font-size(36);
} }
......
edx-docs/assets/sass/utilities/_mixins.scss
...@@ -94,7 +94,6 @@ ...@@ -94,7 +94,6 @@
} }
%ui-icon-inline { %ui-icon-inline {
@extend %t-icon;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline/4); margin-right: ($baseline/4);
......
edx-docs/assets/sass/views/_index.scss
// docs.edx.org - Index View // docs.edx.org - Index View
// ==================== // ====================
// @extend .trans-size;
.view--index { .view--index {
border-top: ($baseline/4) solid $blue-t1; border-top: ($baseline/4) solid $blue-t1;
background: $white url('../images/bg-subtlepatterns-carbonfiber.png') 0 0 repeat; background: $white url('../images/bg-subtlepatterns-carbonfiber.png') 0 0 repeat;
// grid // grid
.wrapper--view { .wrapper--view {
@include outer-container;
@include pad(($baseline*2) ($baseline*3)); @include pad(($baseline*2) ($baseline*3));
// BP: mobile // BP: mobile
...@@ -47,18 +44,8 @@ ...@@ -47,18 +44,8 @@
// audience // audience
.item-audience { .item-audience {
margin-bottom: ($baseline/2);
// STATE: hover border-bottom: ($baseline/4) solid $gray-l5;
&:hover {
.icon-stack-base {
color: $gray-l2;
}
.item-audience__title {
border-top-color: $gray-l2;
}
}
} }
.icon-stack { .icon-stack {
...@@ -80,17 +67,14 @@ ...@@ -80,17 +67,14 @@
} }
.item-audience__title { .item-audience__title {
@extend %t-title-6; @extend %t-title-4;
@extend %t-weight3; @extend %t-weight3;
@include transition(border-color $tmg-f1 ease-in-out);
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
border-top: ($baseline/4) solid $gray-l5;
padding-top: ($baseline*1.5);
} }
.item-audience__copy { .item-audience__copy {
@extend %t-copy-base; @extend %t-copy-base;
margin-bottom: ($baseline*0.75); margin-bottom: $baseline;
// BP: small desktop // BP: small desktop
@include media($bp-ds) { @include media($bp-ds) {
...@@ -111,16 +95,10 @@ ...@@ -111,16 +95,10 @@
// audience: link lists // audience: link lists
.list--links { .list--links {
.item-link {
@extend %ui-wipe-last-child;
@include pad(0 0 ($baseline/2) 0);
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l5;
}
.item-link__title { .item-link__title {
@extend %t-title-7; @extend %t-title-6;
color: $blue-u1; color: $blue-u1;
margin-bottom: ($baseline/4);
} }
.item-link__copy { .item-link__copy {
...@@ -128,6 +106,13 @@ ...@@ -128,6 +106,13 @@
@extend %t-copy-sub1; @extend %t-copy-sub1;
color: $gray-l3; color: $gray-l3;
} }
.item-link__updated-date {
@extend %t-copy-sub1;
@extend %t-weight3;
margin-bottom: ($baseline/2);
color: $gray-l3;
}
} }
// audience: link lists - ixd // audience: link lists - ixd
...@@ -148,21 +133,6 @@ ...@@ -148,21 +133,6 @@
opacity: 0.9; opacity: 0.9;
} }
} }
// audience: specific - devs
.item-audience--developers {
}
// audience: specific - researchers
.item-audience--researchers {
}
// audience: specific - authors
.item-audience--authors {
}
} }
// elems: introduction // elems: introduction
...@@ -203,35 +173,29 @@ ...@@ -203,35 +173,29 @@
// masthead: brand // masthead: brand
.wrapper--logo { .wrapper--logo {
@extend .trans-size;
@include span-columns(2 of 12);
@include shift(5);
@include pad(($baseline*0.75) $baseline); @include pad(($baseline*0.75) $baseline);
position: relative; position: relative;
top: -($baseline/2); top: -($baseline/2);
display: block;
width: 15%;
margin: 0 auto;
box-shadow: 0 2px 2px 0 $shadow-l1; box-shadow: 0 2px 2px 0 $shadow-l1;
border-top: ($baseline/4) solid $blue-s1; border-top: ($baseline/4) solid $blue-s1;
background: $white-t; background: $white-t;
// BP: medium desktop // BP: medium desktop
@include media($bp-dm) { @include media($bp-dm) {
@include span-columns(2 of 12); width: 20%;
@include shift(5);
@include pad(($baseline/2) ($baseline*0.75));
} }
// BP: small desktop // BP: small desktop
@include media($bp-ds) { @include media($bp-ds) {
@include span-columns(2 of 6); width: 30%;
@include shift(2);
@include pad(($baseline/2) ($baseline*0.75));
} }
// BP: mobile // BP: mobile
@include media($bp-m) { @include media($bp-m) {
@include span-columns(2 of 6); width: 40%;
@include shift(2);
@include pad(($baseline/2) ($baseline/2));
} }
*[class^="depth"] { *[class^="depth"] {
...@@ -331,45 +295,20 @@ ...@@ -331,45 +295,20 @@
// ==================== // ====================
// content
.wrapper--content {
@include outer-container;
}
// main content // main content
.content--view { .content--view {
@include span-columns(12); @include pad(($baseline*2));
box-shadow: 0 2px 2px 0 $shadow-l1; box-shadow: 0 2px 2px 0 $shadow-l1;
background: $white-t; background: $white-t;
@include pad(($baseline*3));
// BP: small desktop
@include media($bp-ds) {
@include pad(($baseline*2));
}
// BP: mobile
@include media($bp-m) {
@include pad(($baseline*2));
}
} }
.content__main { .content__main {
@extend .trans-size; margin-bottom: ($baseline*2);
@include span-columns(8 of 12);
// BP: medium desktop
@include media($bp-dm) {
@include fill-parent;
margin-bottom: ($baseline*3);
}
// BP: small desktop
@include media($bp-ds) {
@include fill-parent;
margin-bottom: ($baseline*2);
}
// BP: mobile
@include media($bp-m) {
@include fill-parent;
margin-bottom: ($baseline*2);
}
.introduction__copy { .introduction__copy {
@extend %t-copy-lead1; @extend %t-copy-lead1;
...@@ -391,138 +330,92 @@ ...@@ -391,138 +330,92 @@
// elem: audience lists // elem: audience lists
.item-audience { .item-audience {
@extend .trans-size; margin-bottom: ($baseline*2);
@extend %ui-wipe-last-child;
@include span-columns(4 of 8);
position: relative;
// BP: medium desktop
@include media($bp-dm) {
@include fill-parent;
margin-bottom: ($baseline*3);
}
// BP: small desktop // BP: small desktop
@include media($bp-ds) { @include media($bp-ds) {
@include fill-parent;
margin-bottom: ($baseline*2); margin-bottom: ($baseline*2);
} }
// BP: mobile // NOTE: semi-nasty hack for visual display harmony
@include media($bp-m) { .list--links {
@include fill-parent; @include row();
margin-bottom: ($baseline*3); margin-top: ($baseline*0.75);
}
&.item-audience--developers { &:first-child {
@include span-columns(8 of 8); margin-top: 0;
margin-bottom: ($baseline*2); }
// NOTE: semi-nasty hack for visual display harmony // BP: medium desktop
.list--links { @include media($bp-dm) {
@extend %ui-wipe-last-child; margin-top: 0;
@include span-columns(8 of 8);
@include pad(0 0 ($baseline/2) 0);
border-bottom: 1px solid $gray-l5;
margin-top: ($baseline*0.75);
&:first-child {
margin-top: 0;
}
// BP: medium desktop
@include media($bp-dm) {
@include pad(0);
margin-top: 0;
border-bottom: none;
}
// BP: small desktop
@include media($bp-ds) {
@include pad(0);
margin-top: 0;
border-bottom: none;
}
// BP: mobile
@include media($bp-m) {
@include pad(0);
margin-top: 0;
border-bottom: none;
}
} }
.item-link { // BP: small desktop
@include span-columns(4 of 8); @include media($bp-ds) {
@include pad(0); margin-top: 0;
border: none;
// BP: medium desktop
@include media($bp-dm) {
@include fill-parent;
@include pad(0 0 ($baseline/2) 0);
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l5;
}
// BP: small desktop
@include media($bp-ds) {
@include fill-parent;
@include pad(0 0 ($baseline/2) 0);
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l5;
}
// BP: mobile
@include media($bp-m) {
@include fill-parent;
@include pad(0 0 ($baseline/2) 0);
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l5;
}
} }
}
}
}
.content__supplementary { // BP: mobile
@extend .trans-size; @include media($bp-m) {
@include span-columns(4 of 12); margin-top: 0;
}
}
// BP: medium desktop .item-link {
@include media($bp-dm) { margin-bottom: $baseline;
@include fill-parent;
}
// BP: small desktop // BP: large desktop
@include media($bp-ds) { @include media($bp-dl) {
@include fill-parent; @include span-columns(4 of 12);
} @include omega(3n);
min-height: ($baseline*6);
}
// BP: mobile // BP: medium desktop
@include media($bp-m) { @include media($bp-dm) {
@include fill-parent; @include span-columns(6 of 12);
} @include omega(2n);
min-height: ($baseline*6);
}
.info { // BP: small desktop
@include transition(border-color $tmg-f1 ease-in-out); @include media($bp-ds) {
border-top: ($baseline/4) solid $gray-l5; @include fill-parent();
padding-top: ($baseline/2); }
// STATE: hover // BP: mobile
&:hover { @include media($bp-m) {
border-top-color: $gray-l2; @include fill-parent();
}
} }
} }
}
.content__supplementary {
.info__title { .info__title {
@extend %t-title-8; @extend %t-title-4;
@extend %t-weight3; @extend %t-weight3;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
} }
.info__copy { .info__copy {
@extend %t-copy-sub1; @extend %t-copy-base;
// BP: small desktop
@include media($bp-ds) {
// NOTE: drat! typography extends don't work
@include font-size(14);
@include lh(14);
}
// BP: mobile
@include media($bp-m) {
// NOTE: drat! typography extends don't work
@include font-size(14);
@include lh(14);
}
} }
} }
} }
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