diff --git a/packages/crater/lib/stylesheets/_breakpoints.scss b/packages/crater/lib/stylesheets/_breakpoints.scss index b14d5456..bc671fda 100644 --- a/packages/crater/lib/stylesheets/_breakpoints.scss +++ b/packages/crater/lib/stylesheets/_breakpoints.scss @@ -1,28 +1,31 @@ -$small-break: 600px; +$small-break: 600px; $medium-break: 800px; - @mixin small(){ // smaller than small-break - @media screen and (max-width: $small-break) { + @media screen and (max-width: $small-break){ @content; } } + @mixin small-medium(){ // smaller than medium-break - @media screen and (max-width: $medium-break) { + @media screen and (max-width: $medium-break){ @content; } } + @mixin medium(){ // between small and medium-break - @media screen and (min-width: $small-break) and (max-width: $medium-break) { + @media screen and (min-width: $small-break) and (max-width: $medium-break){ @content; } } + @mixin medium-large(){ // larger than small-break - @media screen and (min-width: $small-break) { + @media screen and (min-width: $small-break){ @content; } } + @mixin large(){ // larger than medium-break - @media screen and (min-width: $medium-break) { + @media screen and (min-width: $medium-break){ @content; } -} \ No newline at end of file +} diff --git a/packages/crater/lib/stylesheets/_global.scss b/packages/crater/lib/stylesheets/_global.scss index cf639ac5..105de0bb 100644 --- a/packages/crater/lib/stylesheets/_global.scss +++ b/packages/crater/lib/stylesheets/_global.scss @@ -1,15 +1,12 @@ - - body{ background: $grey; - @include primary-font; } + h1, h2, h3, h4, h5{ @include secondary-font; } - a{ color: $primary-color; &:hover, &:active, &:focus{ @@ -35,7 +32,7 @@ a{ } .main-column{ - background: #fff; + background: $white; @include medium-large{ flex-grow: 1; margin-right: 30px; @@ -43,7 +40,6 @@ a{ position: relative; z-index: 10; border-radius: 0 0 5px 5px; - // box-shadow: 2px 2px 0px 2px black(0.05); &:before{ display: block; content: " "; @@ -58,7 +54,6 @@ a{ &:after{ display: block; content: " "; - // background: #aca6b9; background: $light-purple linear-gradient(to top, #908b9e 0%, #aaa5b6 50%); height: 20px; position: absolute; @@ -70,7 +65,6 @@ a{ } } - .btn{ @include secondary-font; } @@ -81,7 +75,6 @@ a{ color: $light-text-color; } - .page{ padding: 30px; -} \ No newline at end of file +} diff --git a/packages/crater/lib/stylesheets/_header.scss b/packages/crater/lib/stylesheets/_header.scss index a9495764..27d018f1 100644 --- a/packages/crater/lib/stylesheets/_header.scss +++ b/packages/crater/lib/stylesheets/_header.scss @@ -1,4 +1,3 @@ - .top{ background: #11132E; background: url('http://conf.crater.io/images/crater-remote-conf.jpeg'); @@ -29,7 +28,6 @@ margin: 0; } - .logo, .tagline{ margin-bottom: 0; } @@ -49,6 +47,7 @@ width: 50px; } } + .logo-text{ color: white; font-size: 1.8rem; @@ -56,7 +55,7 @@ .nav{ @include small{ - flex-direction:column; + flex-direction: column; } .nav-item{ @include small{ @@ -85,7 +84,6 @@ border-color: $white; } - .flash-message{ margin-bottom: 30px; -} \ No newline at end of file +} diff --git a/packages/crater/lib/stylesheets/_newsletter.scss b/packages/crater/lib/stylesheets/_newsletter.scss index 130379fe..10329e53 100644 --- a/packages/crater/lib/stylesheets/_newsletter.scss +++ b/packages/crater/lib/stylesheets/_newsletter.scss @@ -2,6 +2,7 @@ display: flex; justify-content: center; } + .newsletter{ padding: 20px; background: none; @@ -13,7 +14,6 @@ @include medium-large{ margin: 0 0 60px 0; } - // border: none; .newsletter-tagline{ @include small{ font-size: 1.2rem; diff --git a/packages/crater/lib/stylesheets/_podcast.scss b/packages/crater/lib/stylesheets/_podcast.scss index 9296cb49..37a229b0 100644 --- a/packages/crater/lib/stylesheets/_podcast.scss +++ b/packages/crater/lib/stylesheets/_podcast.scss @@ -1,4 +1,3 @@ - .podcast{ border: 1px dashed $border-color; margin-bottom: 20px; @@ -8,6 +7,7 @@ margin-bottom: 10px; } } + .podcast-heading{ text-transform: uppercase; font-size: 0.9rem; @@ -23,17 +23,21 @@ content: "–––"; } } + .podcast-content{ padding: 20px; } + .podcast-title{ font-size: 1.2rem; font-weight: bold; } + .podcast-date{ font-size: 0.8rem; margin-bottom: 10px; } + .podcast-links{ font-size: 0.8rem; -} \ No newline at end of file +} diff --git a/packages/crater/lib/stylesheets/_posts.scss b/packages/crater/lib/stylesheets/_posts.scss index db3c66ea..84b672c3 100644 --- a/packages/crater/lib/stylesheets/_posts.scss +++ b/packages/crater/lib/stylesheets/_posts.scss @@ -1,5 +1,3 @@ - - .posts-home-intro{ padding: 20px 30px; border-top: 1px dashed $border-color; @@ -9,6 +7,7 @@ justify-content: center; background: $dark-grey; } + .posts-home-intro-tagline{ @include small{ font-size: 1rem; @@ -18,13 +17,12 @@ } margin: 0 10px 0 0; } -.posts-home-intro-button{ -} .posts-list-content{ border-top: none; margin: 0; } + .posts-item{ padding: 20px 30px; border-bottom: 1px dashed $border-color; @@ -35,7 +33,7 @@ padding-top: 20px; border-top: 1px dashed $border-color; } - .posts-categories { + .posts-categories{ display: inline; .posts-category{ display: inline-block; @@ -43,8 +41,8 @@ } } } + .posts-item-title{ - // letter-spacing: -0.5px; line-height: 1.4; display: block; @include primary-font; @@ -62,12 +60,15 @@ color: $visited-text-color; } } + .posts-item-meta{ font-size: 0.8rem; } + .posts-thumbnail{ display: none; } + .posts-commenters-discuss{ a{ white-space: nowrap; @@ -115,7 +116,7 @@ &:hover{ @include active-hover; } - .voted &{ + .voted{ background: $dark-grey; } } diff --git a/packages/crater/lib/stylesheets/_sidebar.scss b/packages/crater/lib/stylesheets/_sidebar.scss index e96a1bce..3b2afd71 100644 --- a/packages/crater/lib/stylesheets/_sidebar.scss +++ b/packages/crater/lib/stylesheets/_sidebar.scss @@ -1,4 +1,3 @@ - .sidebar{ width: 250px; padding-top: 30px; @@ -8,7 +7,6 @@ } } - .search-form{ margin-bottom: 20px; .form-control{ @@ -29,4 +27,4 @@ border-color: $secondary-color; color: white; } -} \ No newline at end of file +} diff --git a/packages/crater/lib/stylesheets/_variables.scss b/packages/crater/lib/stylesheets/_variables.scss index c434c37d..5afb40ae 100644 --- a/packages/crater/lib/stylesheets/_variables.scss +++ b/packages/crater/lib/stylesheets/_variables.scss @@ -1,14 +1,11 @@ $hmargin: 10px; $vmargin: 15px; - $smaller-font: 0.8rem; $small-font: 0.9rem; $medium-font: 1rem; $large-font: 1.25rem; $larger-font: 1.35rem; -// $border: 1px solid $light-border; - @mixin active-hover{ &:hover{ background: $secondary-color; @@ -23,16 +20,10 @@ $larger-font: 1.35rem; align-items: center; } -// @mixin border-radius{ -// border-radius: .25rem; -// } -// @mixin border{ -// border: $border; -// } - @function black($opacity){ - @return rgba(0,0,0,$opacity); + @return rgba(0, 0, 0, $opacity); } + @function white($opacity){ - @return rgba(255,255,255,$opacity); -} \ No newline at end of file + @return rgba(255, 255, 255, $opacity); +}