From: cain-ish Date: Mon, 15 Feb 2016 12:07:47 +0000 (+0100) Subject: Split promobox into 2 + carousel height fix X-Git-Url: https://git.mdrn.pl/edumed.git/commitdiff_plain/cc3642cc8629e6568c75e15283b4cfcc60e02a53 Split promobox into 2 + carousel height fix --- diff --git a/catalogue/static/catalogue/css/carousel.css b/catalogue/static/catalogue/css/carousel.css index 2d014da..992e285 100644 --- a/catalogue/static/catalogue/css/carousel.css +++ b/catalogue/static/catalogue/css/carousel.css @@ -2,12 +2,13 @@ float: left; position: relative; width: 43.75em; - height: 14.688em; + height: 14.6875em; overflow: hidden; - border-radius: 0.938em; } + border-radius: 0.9375em; +} #catalogue-carousel #catalogue-carousel-links { width: 28.75em; - height: 14.688em; + height: 14.6875em; list-style: none; margin: 0; padding: 0; } @@ -18,8 +19,8 @@ left: 0; height: 100%; background-size: 100% 100%; - border-top-left-radius: 0.938em 6.38%; - border-bottom-left-radius: 0.938em 6.38%; + border-top-left-radius: 0.9375em 6.38%; + border-bottom-left-radius: 0.9375em 6.38%; z-index: 100; background-color: #888; } #catalogue-carousel #catalogue-carousel-links li a.catalogue-carousel-link { @@ -65,19 +66,19 @@ text-shadow: 0 0 5px #000; } #catalogue-carousel #catalogue-carousel-switcher { margin: 0; - padding: 0.188em 0 0 3.625em; + padding: 0.1875em 0 0 3.625em; width: 11.375em; - height: 14.188em; + height: 14.6875em; position: absolute; right: 0; top: 0; list-style: none; - border-radius: 0 0.938em 0.938em 0; + border-radius: 0 0.9375em 0.9375em 0; background-color: #ed7831; background-image: url(/static/catalogue/img/carousel-right.png); background-position: 0 0; background-repeat: no-repeat; - background-size: auto 14.688em; + background-size: auto 14.6875em; /* right part of mask as background */ } #catalogue-carousel #catalogue-carousel-switcher li { margin-bottom: .4em; diff --git a/catalogue/static/catalogue/css/carousel.scss b/catalogue/static/catalogue/css/carousel.scss index 17f83d9..299f95b 100755 --- a/catalogue/static/catalogue/css/carousel.scss +++ b/catalogue/static/catalogue/css/carousel.scss @@ -93,7 +93,7 @@ $ciemny: #363a3e; margin: 0; padding: 3*$px 0 0 58*$px; width: 240*$px - 58*$px; - height: 235*$px - 8*$px; + height: 243*$px - 8*$px; position: absolute; right: 0; top: 0; diff --git a/edumed/static/css/main.css b/edumed/static/css/main.css index d720f44..bbba26e 100644 --- a/edumed/static/css/main.css +++ b/edumed/static/css/main.css @@ -1,17 +1,39 @@ #main-promobox { float: right; - border-radius: 0.9375em; - background: #16a487; - padding: 1.5em 1.25em; width: 11.25em; height: 11.6875em; } #main-promobox a { - display: block; } + background: #16a487; + padding: 0.75em 1.25em; + border-radius: 0.9375em; + display: block; + margin-bottom: 1.4em; + width: 8.75em; + float: left; + } + +#main-promobox a:first-of-type { + padding-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +#main-promobox a:last-of-type { + margin-bottom: 0; +} #main-promobox h1 { + background: #16a487; + padding: 0.75em 1.25em; + border-radius: 0.9375em; color: white; margin: 0; text-transform: uppercase; - font-size: .9em; } + font-size: .9em; + width: 10em; + float: left; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } #main-promobox h1:before { content: url(/static/img/icons/announce_white.png); margin-right: 1.2em; @@ -19,7 +41,8 @@ #main-promobox h2 { color: white; font-size: .9em; - margin: 1.1em 0 0 0; + /*margin: 1.1em 0 0 0;*/ + margin: 0; font-weight: normal; text-transform: uppercase; } #main-promobox p { diff --git a/edumed/static/css/main.scss b/edumed/static/css/main.scss index 962336e..9b27291 100755 --- a/edumed/static/css/main.scss +++ b/edumed/static/css/main.scss @@ -1,183 +1,237 @@ $px: .0625em; +@mixin main-promobox-shape() { + background: #16a487; + padding: 0.75em 20*$px; + border-radius: 15*$px; +} + #main-promobox { - float: right; + float: right; - border-radius: 15*$px; + width: 220*$px - 2 * 20*$px; + height: 235*$px - 2 * 1.5em; - background: #16a487; - padding: 1.5em 20*$px; - width: 220*$px - 2 * 20*$px; - height: 235*$px - 2 * 1.5em; + a { + @include main-promobox-shape(); - a { - display: block; + display: block; + margin-bottom: 1.4em; + width: 220*$px - 4 * 20*$px; + float: left; + + &:first-of-type { + padding-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; } - h1 { + &:last-of-type { + margin-bottom: 0; + } + } + h1 { + @include main-promobox-shape(); + + color: white; + margin: 0; + text-transform: uppercase; + font-size: .9em; + width: 220*$px - 3 * 20*$px; + float: left; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + h1:before { + content: url(/static/img/icons/announce_white.png); + margin-right: 1.2em; + vertical-align: top; + } + h2 { + color: white; + font-size: .9em; + /*margin: 1.1em 0 0 0;*/ + margin: 0; + font-weight: normal; + text-transform: uppercase; + } + p { + color: #363a3e; + font-size: .8em; + line-height: 1.15em; + margin: .3em 0; + } +} + +#main-sections { + clear: both; + float: left; + margin-top: 1.2em; + width: 700*$px; + + h1 { + font-size: .9em; + margin: 0 0 0 20*$px; + text-transform: uppercase; + } + + ul { + margin: -3*$px 0 0 -20*$px; + padding: 0; + list-style: none; + + li { + margin-top: 20*$px; + margin-left: 20*$px; + float: left; + height: 90*$px; + border-radius: 15*$px; + + a { color: white; - margin: 0; text-transform: uppercase; - font-size: .9em; + display: block; + height: 80*$px; + display: table; + padding: 5px; + + .in-box { + font-size: .9em; + height: 100%; + width: 100%; + display: table-cell; + vertical-align: middle; + border: 1px solid transparent; + border-radius: 10*$px; + padding: 0 16*$px; + + .name { + display: block; + font-size: 1.5em; + line-height: 1em; + margin-bottom: .2em; + } + } + } + a:hover .in-box { + border: 1px solid white; + } } - h1:before { - content: url(/static/img/icons/announce_white.png); - margin-right: 1.2em; - vertical-align: top; + .box1 { + background-color: #adaeaf; } - h2 { - color: white; - font-size: .9em; - margin: 1.1em 0 0 0; - font-weight: normal; - text-transform: uppercase; + .box2 { + background-color: #f8b323; } - p { - color: #363a3e; - font-size: .8em; - line-height: 1.15em; - margin: .3em 0; + .box3 { + background-color: #16a487; } -} - - -#main-sections { - clear: both; - float: left; - margin-top: 1.2em; - width: 700*$px; - - h1 { - font-size: .9em; - margin: 0 0 0 20*$px; - text-transform: uppercase; + .box4 { + background-color: #5e6165; } - - ul { - margin: -3*$px 0 0 -20*$px; - padding: 0; - list-style: none; - - li { - margin-top: 20*$px; - margin-left: 20*$px; - float: left; - height: 90*$px; - border-radius: 15*$px; - - a { - color: white; - text-transform: uppercase; - display: block; - height: 80*$px; - display: table; - padding: 5px; - - .in-box { - font-size: .9em; - height: 100%; - width: 100%; - display: table-cell; - vertical-align: middle; - border: 1px solid transparent; - border-radius: 10*$px; - padding: 0 16*$px; - - .name { - display: block; - font-size: 1.5em; - line-height: 1em; - margin-bottom: .2em; - } - } - } - a:hover .in-box { - border: 1px solid white; - } - } - .box1 {background-color: #adaeaf;} - .box2 {background-color: #f8b323;} - .box3 {background-color: #16a487;} - .box4 {background-color: #5e6165;} - // .box5 {background-color: #16a487;} - .box5 {background-color: #f8b323;} - .box6 {background-color: #363a3e;} - .box7 {background-color: #adaeaf;} - .box8 {background-color: #ed7831;} + // .box5 {background-color: #16a487;} + .box5 { + background-color: #f8b323; + } + .box6 { + background-color: #363a3e; + } + .box7 { + background-color: #adaeaf; + } + .box8 { + background-color: #ed7831; } + } } #main-howto { - float: right; - margin-top: 1.2em; - width: 220*$px; - - h1 { - font-size: .9em; - margin: 0 0 0 1.4em; - text-transform: uppercase; + float: right; + margin-top: 1.2em; + width: 220*$px; + + h1 { + font-size: .9em; + margin: 0 0 0 1.4em; + text-transform: uppercase; + } + + ul { + margin: 17*$px 0 17*$px 1.4em; + + li { + font-size: .9em; + text-transform: uppercase; + line-height: 1.25em; + } + a:before { + height: 20*$px; } - ul { - margin: 17*$px 0 17*$px 1.4em; - - li { - font-size: .9em; - text-transform: uppercase; - line-height: 1.25em; - } - a:before { - height: 20*$px; - } - - .knowledge:before {content: url(/static/img/icons/knowledge_dark.png);} - .activity:before {content: url(/static/img/icons/activity_dark.png);} - .lesson-plan:before {content: url(/static/img/icons/lesson-plan_dark.png);} - .reference:before {content: url(/static/img/icons/reference_dark.png);} - .knowledge:hover:before {content: url(/static/img/icons/knowledge_orange.png);} - .activity:hover:before {content: url(/static/img/icons/activity_orange.png);} - .lesson-plan:hover:before {content: url(/static/img/icons/lesson-plan_orange.png);} - .reference:hover:before {content: url(/static/img/icons/reference_orange.png);} - + .knowledge:before { + content: url(/static/img/icons/knowledge_dark.png); + } + .activity:before { + content: url(/static/img/icons/activity_dark.png); + } + .lesson-plan:before { + content: url(/static/img/icons/lesson-plan_dark.png); + } + .reference:before { + content: url(/static/img/icons/reference_dark.png); + } + .knowledge:hover:before { + content: url(/static/img/icons/knowledge_orange.png); + } + .activity:hover:before { + content: url(/static/img/icons/activity_orange.png); } - p { - margin: 0 0 30*$px 1.4em; + .lesson-plan:hover:before { + content: url(/static/img/icons/lesson-plan_orange.png); } + .reference:hover:before { + content: url(/static/img/icons/reference_orange.png); + } + + } + p { + margin: 0 0 30*$px 1.4em; + } } #main-chosen { - clear: left; + clear: left; + float: left; + margin-top: 2em; + + h1 { + font-size: .9em; + margin: 0 0 1em 20*$px; + text-transform: uppercase; + } + + .levelth { + margin-left: 20*$px; + } +} + +#main-tools { + clear: both; + .main-tools-box { float: left; - margin-top: 2em; + margin-top: 1.5em; + margin-right: 20*$px; + width: 280*$px; h1 { - font-size: .9em; - margin: 0 0 1em 20*$px; - text-transform: uppercase; + margin: 0; + font-size: .9em; + text-transform: uppercase; } - .levelth { - margin-left: 20*$px; - } -} - -#main-tools { - clear: both; - .main-tools-box { - float: left; - margin-top: 1.5em; - margin-right: 20*$px; - width: 280*$px; - - h1 { - margin: 0; - font-size: .9em; - text-transform: uppercase; - } - - ul, ol { - margin: 1.1em 0 0 0; - font-size: .9em; - line-height: 1.15em; - } + ul, ol { + margin: 1.1em 0 0 0; + font-size: .9em; + line-height: 1.15em; } + } } diff --git a/edumed/static/css/promobox.scss b/edumed/static/css/promobox.scss index 836b9c0..f90b03f 100755 --- a/edumed/static/css/promobox.scss +++ b/edumed/static/css/promobox.scss @@ -1,6 +1,9 @@ +/*TODO: delete cause is not used*/ + #main-promobox { h1 { color: white; margin: 0; + background: red; } } \ No newline at end of file