diff --git a/OurUmbraco.Client/src/scss/pages/_release.scss b/OurUmbraco.Client/src/scss/pages/_release.scss index eb8b75e6a0..6afc67166e 100644 --- a/OurUmbraco.Client/src/scss/pages/_release.scss +++ b/OurUmbraco.Client/src/scss/pages/_release.scss @@ -1,459 +1,562 @@ -.download.latest .dot { - margin-top: 2rem; +.download { + &.latest { + .dot { + margin-top: 2rem; + } + } + + .dot { + &.progress { + text-indent: 0.3rem; + text-align: center; + line-height: 2.8rem; + + .counter { + font-size: 1.1rem; + } + } + } } -.download .dot.progress { - text-indent: .3rem; - text-align: center; - line-height: 2.8rem; -} - -.download .dot.progress .counter { - font-size: 1.1rem; -} - - .explain { - flex-direction: column; - - @media (min-width: 768px) { - flex-direction: row; - } -} - -.explain .changes small { - line-height: .5rem; -} - - - -.chart { - position: absolute; - top: -4px; - left: -8px; - z-index: 1; -} + padding: 20px; + background: $color-light-grey; + flex-direction: column; -.chart .percentage { - display: inline-block; - position: absolute; - top: 9px; - left: 16px; - font-size: 1.1rem; - color: darken($color-our, 30%); -} + h3 { + line-height: 1.2; + margin-top: 7px; + } -.chart canvas { - top: 1px; - position: absolute; - left: 5px; + .changes { + small { + line-height: 0.5rem; + } + } } .chart { - position: absolute; - top: -4px; - left: -8px; - z-index: 1; + position: absolute; + top: -4px; + left: -8px; + z-index: 1; + + .percentage { + display: inline-block; + position: absolute; + top: 9px; + left: 16px; + font-size: 1.1rem; + color: darken($color-our, 30%); + } + + canvas { + top: 1px; + position: absolute; + left: 5px; + } + + p { + color: $color-white; + + .release & { + color: $color-white; + } + } } - - .get-release { - line-height: 1.5; - padding: 3rem 0; - margin: 0 0 3.5rem ; - border-bottom: 1px solid darken(whitesmoke, 5%); -} - -.get-release i { - font-size: 2.5rem; - line-height: 5rem; -} - -.get-release h3 { - font-size: 1.1rem; - margin-bottom: .3rem; - color: $color-headline; -} - -.get-release h3 a { - text-decoration: none; - - &:hover { - color: $color-our; - } -} - -.get-release p { - color: $color-headline; - font-size: .95rem; - line-height: 1.3; - margin-bottom: .5rem; -} - - -.get-release small { - font-size: .8rem; - color: rgba($color-text, .6); -} - - -.latest .dot.big { - margin-bottom: 30px; + line-height: 1.5; + padding: 1.5rem 0; + border-bottom: 1px solid darken(whitesmoke, 5%); + + i { + font-size: 2.5rem; + line-height: 5rem; + } + + h3 { + font-size: 1.1rem; + margin-bottom: 0.3rem; + color: $color-headline; + + a { + text-decoration: none; + + &:hover { + color: $color-our; + } + } + } + + p { + color: $color-headline; + font-size: 0.95rem; + line-height: 1.3; + margin-bottom: 0.5rem; + } + + small { + font-size: 0.8rem; + color: rgba($color-text, 0.6); + } +} + +.latest { + .dot { + &.big { + margin-bottom: 30px; + } + } + + .explain { + h4 { + font-size: 2.5rem; + } + + p { + font-size: 1.1rem; + color: $color-text; + } + + .col-xs-12 { + min-height: 0; + } + } } - -.latest .explain h4 { - font-size: 2.5rem; -} - - -.latest .explain p { - font-size: 1.1rem; - color: $color-text; -} - -.latest .explain .col-xs-12 { - min-height: 0; -} - - - - // Single release page .release { - - .markdown-syntax { - - p, li, ul { - color: $color-headline; - font-size: .95rem; - } - - - strong { - color: $color-headline; - } - - - a { - text-decoration: underline; - font-family: $font-family; - } - - - p + p { - margin-bottom: 15px !important; - } - - - h1, h2, h3 { - color: $color-headline; - } - - - h1, { - font-size: 2rem; - } - - - h2 { - font-size: 1.3rem; - } - - - h3 { - font-size: 1.1rem; - } - - - ul li { - margin-bottom: .5rem; - line-height: 1.5; - } - } + .markdown-syntax { + p, + li, + ul { + color: $color-headline; + font-size: 0.95rem; + } + + strong { + color: $color-headline; + } + + a { + text-decoration: underline; + font-family: $font-family; + } + + p + p { + margin-bottom: 15px !important; + } + + h1, + h2, + h3 { + color: $color-headline; + } + + h1 { + font-size: 2rem; + } + + h2 { + font-size: 1.3rem; + } + + h3 { + font-size: 1.1rem; + } + + ul li { + margin-bottom: 0.5rem; + line-height: 1.5; + } + } + + .contrib-img { + width: 25px; + height: 25px; + margin: 0 15px 0 0; + display: block; + border-radius: 2em; + border: 1px solid transparent; + } } - .releaseTable { - - .col-xs-3 { - - &:first-child { - .progress { - .top { - display: none; - } - } - } - - - &:nth-last-child(2) { - - - .small:last-child { - - - .v-line { - display: none; - } - } - } - } + .col-xs-3 { + &:first-child { + .progress { + .top { + display: none; + } + } + } + + &:nth-last-child(2) { + .small:last-child { + .v-line { + display: none; + } + } + } + } } - // Progress page .inprogress { + .dot.big.progress { + text-indent: 0; + border: none; - .dot.big.progress { - text-indent: 0; - border: none; - - .v-line { - top: 60px; - left: 28px; - - &.top { - top: -80px; - } - } - - .h-line { - top: 28px; - } - - } - - .chart { - top: 0px; - left: 0px; - width: 100%; - height: 100%; - text-align: center; - line-height: 3rem; - - .percentage { - position: initial; - } - - canvas { - top: 0; - left: 0; - } - } -} - - -// Roadmap page -.plannedreleases { - .dot.big { - text-indent: 0; - line-height: 3rem; - } - .chart { - top: 0px; - left: 0px; - width: 100%; - height: 100%; - text-align: center; - - .percentage { - position: initial; - } - } -} - -.chart p, .chart div.percentage, .release .chart p { - color: white; -} - -.release-page .explain h2 { - margin: 0; - font-size: 2em; - color: rgba(0,0,0,.8); -} + .v-line { + top: 60px; + left: 28px; -.release-page .explain small { - margin-bottom: 0; -} + &.top { + top: -80px; + } + } -.release-page .dot { - border: none; -} + .h-line { + top: 28px; + } + } -.release-page .dot.big { - position: relative; - text-indent: 0; - margin: 0; -} + .chart { + top: 0px; + left: 0px; + width: 100%; + height: 100%; + text-align: center; + line-height: 3rem; -.release-page .chart { - height: 60px; - width: 60px; - top: initial; - left: initial; - text-align: center; -} + .percentage { + position: initial; + } -.release-page .chart p { - vertical-align: middle; - line-height: 3.7rem; - display: inline-block; + canvas { + top: 0; + left: 0; + } + } } -.release-page .chart canvas { - top: 0px; - left: 0px; -} +// Roadmap page +.plannedreleases { + .dot.big { + text-indent: 0; + line-height: 3rem; + } + .chart { + top: 0px; + left: 0px; + width: 100%; + height: 100%; + text-align: center; + + .percentage { + position: initial; + } + } +} + +.release-page { + h2, + h3 { + font-weight: bold; + margin-bottom: 0; + } + + h2 { + font-size: 1.4rem; + } + + h3 { + font-size: 1.1rem; + } + + .explain { + h2 { + margin: 0; + font-size: 2em; + margin-bottom: 0.3rem; + color: rgba(0, 0, 0, 0.8); + } + + small { + margin-bottom: 0; + } + } + + .dot { + border: none; -.statuses ul { - list-style-type: none; -} -.statuses ul li { - position: relative; - margin-bottom: 10px; - padding-left: 10px; + &.big { + position: relative; + text-indent: 0; + margin: 0 0 15px; + } + } + + .chart { + height: 60px; + width: 60px; + top: initial; + left: initial; + text-align: center; + + p { + vertical-align: middle; + line-height: 3.7rem; + display: inline-block; + } + + canvas { + top: 0px; + left: 0px; + } + } +} + +.statuses { + .status { + margin-top: 40px; + } + + ul { + margin-top: 15px; + padding-left: 0; + list-style-type: none; + + li { + display: flex; + align-items: center; + position: relative; + line-height: 1.3; + margin-bottom: 1rem; + padding-left: 10px; + text-indent: 0; + margin-left: 0; + + &:before { + margin-right: 15px; + font-size: 1.5em; + } + + a { + margin-top: 2px; + display: inline-block; + + &:hover { + color: $color-blue; + font-weight: normal; + } + } + } + } +} + +summary { + font-size: 1.1rem; + font-weight: bold; + margin-top: 32px; + margin-bottom: 10px; + cursor: pointer; +} + +details { + ul { + list-style-type: none; + padding-top: 8px !important; + + &.unreleased { + padding-left: 20px !important; + + li { + text-indent: -70px; + margin-left: 70px; + } + } + + &.released { + padding-left: 10px !important; + + li { + text-indent: -43px; + margin-left: 43px; + } + } + } + + p { + padding-top: 6px; + } +} + +details, +.statuses { + a { + text-decoration: none !important; + + &:hover { + color: $color-blue; + } + } } -.statuses li:before { - position: absolute; - top: -4px; - left: -25px; - font-size: 1.5em; -} - - - .release-progress-indicator { - flex: 1 1 auto; + flex: 1 1 auto; } .release-progress-action { - flex: 1 1 auto; - - margin-top: 30px; + flex: 1 1 auto; + margin-top: 30px; } .release-progress-version { - margin-left: 15px; + margin-left: 15px; } - .release-section-group { - flex: 1 1 100%; - padding: 0; - - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - - @media (min-width: 768px) { - flex: 1 1 47%; - padding: 0 3% 0 0; - align-items: flex-start; - text-align: left; - } -} + flex: 1 1 100%; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; -.release-section-group:nth-child(even) { - flex: 1 1 100%; - padding: 0; + &:nth-child(even) { + flex: 1 1 100%; + padding: 0; + } - @media (min-width: 768px) { - flex: 1 1 47%; - padding: 0 0 0 3%; - } + & + .release-section-group { + margin-top: 30px; + } } .release-section-action { - height: 80px; - - display: flex; - justify-content: flex-start; - align-items: center; - - box-sizing: border-box; -} - - -.release-section code { - overflow: auto; - - background-color: #333; - background-clip: padding-box; - - color: #fff; - font-size: 12px; - line-height: 1.4em; - text-align: center; - text-decoration: none; - - - padding: 14px 16px 14px 16px; - - width: auto; - border-radius: 5px; + height: 80px; + display: flex; + justify-content: flex-start; + align-items: center; + box-sizing: border-box; +} + +.release-section { + code { + overflow: auto; + background-color: #333; + background-clip: padding-box; + color: #fff; + font-size: 12px; + line-height: 1.4em; + text-align: center; + text-decoration: none; + padding: 14px 16px 14px 16px; + width: auto; + border-radius: 5px; border: none; -} -.release-section code a { - text-decoration: none; -} -.release-section + .release-section { - margin-top: 30px; + a { + text-decoration: none; + } + } + + & + .release-section { + margin-top: 30px; + } } -.release-section-group + .release-section-group { - margin-top: 30px; +.release-hints { + margin-top: 40px; + margin-left: 20px; + padding-right: 10px; + font-size: 0.7rem; - @media (min-width: 768px) { - margin-top: 0; - } -} + h3 { + margin-top: 20px; + } -.release-page h2 { - font-size: 1.4rem; - font-weight: bold; - margin-bottom: 0; + ul { + margin-top: 20px; + list-style-type: none; + } } -.release-page h3 { - font-size: 1.1rem; - font-weight: bold; - margin-bottom: 0; +.nuget { + margin-left: 67px; + margin-top: 20px; } - - // Other files .release-other-files { - margin-top: 3rem; -} - -.release-other-files h3 { - font-size: 1.1rem; - margin-bottom: 5px; -} - -.release-other-files small { - font-size: .8rem; - color: rgba($color-text, .5); -} - - -.release-other-files .release { - min-height: auto; - margin-bottom: 30px; -} - -.release-other-files .release a { - display: inline-block; - margin-bottom: 10px; - margin-top: 10px; -} - -.release-other-files .release p { - margin-top: 0; + margin-top: 3rem; + + h3 { + font-size: 1.1rem; + margin-bottom: 5px; + } + + small { + font-size: 0.8rem; + color: rgba($color-text, 0.5); + } + + .release { + min-height: auto; + margin-bottom: 30px; + + a { + display: inline-block; + margin-bottom: 10px; + margin-top: 10px; + } + + p { + margin-top: 0; + } + } +} + +@media (min-width: 768px) { + .explain { + display: flex; + align-items: center; + flex-direction: row; + padding: 30px; + + .content { + padding-left: 30px; + } + } + + .release-page { + .dot { + &.big { + margin: 0; + } + } + } + + .release-section-group { + flex: 1 1 47%; + padding: 0 3% 0 0; + align-items: flex-start; + text-align: left; + + &:nth-child(even) { + flex: 1 1 47%; + padding: 0 0 0 3%; + } + + & + .release-section-group { + margin-top: 0; + } + } + + .get-release { + padding: 3rem 0; + margin: 0 0 3.5rem; + } } diff --git a/OurUmbraco.Site/Views/Release.cshtml b/OurUmbraco.Site/Views/Release.cshtml index 7302bd28b6..47529198fa 100644 --- a/OurUmbraco.Site/Views/Release.cshtml +++ b/OurUmbraco.Site/Views/Release.cshtml @@ -167,142 +167,16 @@ } } - - .release-page .explain h2 { - margin-top: 12px; - font-size: 2em; - margin-bottom: .3rem; - color: rgba(0,0,0,.8); - } - - .release-page .dot { - border: none; - } - - .release-page .dot.big { - position: relative; - text-indent: 0; - margin: 15px auto 0; - } - - .release-page .chart { - height: 60px; - width: 60px; - top: initial; - left: initial; - text-align: center; - } - - .release-page .chart p { - vertical-align: middle; - line-height: 3.7rem; - display: inline-block; - } - - .release-page .chart canvas { - top: 0px; - left: 0px; - } - - .statuses ul { - list-style-type: none; - margin-top: 30px;; - } - - .statuses ul li { - position: relative; - margin-bottom: 10px; - padding-left: 10px; - text-indent: -45px; - margin-left: 45px; - } - - .statuses li:before { - position: absolute; - top: -4px; - left: -25px; - font-size: 1.5em; - } - summary { - font-size: 1.1rem; - font-weight: bold; - margin-top: 32px; - margin-bottom: 10px; - cursor: pointer; - } - details ul { - list-style-type: none; - padding-top: 8px !important; - } - details ul.unreleased { - padding-left: 20px !important; - } - details ul.released { - padding-left: 10px !important; - } - details ul.unreleased li { - text-indent: -70px; - margin-left: 70px; - } - details ul.released li { - text-indent: -43px; - margin-left: 43px; - } - details a, .statuses a { - text-decoration: none !important; - } - details a:hover, .statuses a:hover { - font-weight: bold; - } - details p { - padding-top: 6px; - } - .contrib-badge { - color: white; - padding: 5px; - font-family: Lato,sans-serif; - font-size: 0.7rem; - font-weight: bold; - border: 1px solid transparent; - border-radius: 2em; - } - .contrib-img { - margin-bottom: -10px !important; - border: 1px solid transparent; - border-radius: 2em; - } - .release-hints { - margin-top: 40px; - margin-left: 20px; - padding-right: 10px; - font-size: 0.7rem; - } - .release-hints h3 { - margin-top: 20px; - } - .release-hints ul { - margin-top: 20px; - list-style-type: none; - } - .nuget { - margin-left: 67px; - margin-top: 20px; - } - .get-release { - padding-bottom: 10px !important; - margin-bottom: 0 !important; - } + -
@(release.PercentComplete)%
-@(release.PercentComplete)%
+