X-Git-Url: https://git.mdrn.pl/edumed.git/blobdiff_plain/c3955dfd70abab4db001b0d0ad3298747e168be8..3d75a9e70af2e455e77954487ed40a4bcc709964:/edumed/static/css/main.css?ds=sidebyside diff --git a/edumed/static/css/main.css b/edumed/static/css/main.css index 71a4e6c..e9c2ac1 100644 --- a/edumed/static/css/main.css +++ b/edumed/static/css/main.css @@ -1,26 +1,44 @@ #main-promobox { - /*position: absolute; - top: 0; - right: 10 * $px;*/ float: right; - border-radius: 0.938em; - background: #f8b323; - padding: 1.5em 1.25em; - width: 11.25em; - height: 11.688em; } + width: 12.5em; + height: 11.6875em; } + #main-promobox a { + background: #16a487; + padding: 1em 1.25em; + border-radius: 0.9375em; + display: block; + margin-bottom: 1em; + width: 10em; + 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: 1em 1.25em; + border-radius: 0.9375em; color: white; margin: 0; text-transform: uppercase; - font-size: .9em; } + font-size: .9em; + width: 11.375em; + float: left; + padding-top: 1.25em; + padding-bottom: 1.25em; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } #main-promobox h1:before { - content: url(/static/img/icons/announce.png); + content: url(/static/img/icons/announce_white.png); margin-right: 1.2em; vertical-align: top; } #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 { @@ -36,28 +54,41 @@ width: 43.75em; } #main-sections h1 { font-size: .9em; - margin: 0 0 0 1.6em; + margin: 0 0 0 1.25em; text-transform: uppercase; } #main-sections ul { - margin: -0.188em 0 0 -1.25em; + margin: -0.1875em 0 0 -1.25em; padding: 0; list-style: none; } #main-sections ul li { margin-top: 1.25em; margin-left: 1.25em; float: left; - width: 10em; height: 5.625em; - border-radius: 0.938em; - display: table; } + border-radius: 0.9375em; } #main-sections ul li a { - display: table-cell; - padding-left: 1.688em; - vertical-align: middle; - height: 100%; color: white; text-transform: uppercase; - font-size: .9em; } + display: block; + height: 5em; + display: table; + padding: 5px; } + #main-sections ul li a .in-box { + font-size: .9em; + height: 100%; + width: 100%; + display: table-cell; + vertical-align: middle; + border: 1px solid transparent; + border-radius: 0.625em; + padding: 0 1em; } + #main-sections ul li a .in-box .name { + display: block; + font-size: 1.5em; + line-height: 1em; + margin-bottom: .2em; } + #main-sections ul li a:hover .in-box { + border: 1px solid white; } #main-sections ul .box1 { background-color: #adaeaf; } #main-sections ul .box2 { @@ -67,7 +98,7 @@ #main-sections ul .box4 { background-color: #5e6165; } #main-sections ul .box5 { - background-color: #16a487; } + background-color: #f8b323; } #main-sections ul .box6 { background-color: #363a3e; } #main-sections ul .box7 { @@ -75,24 +106,55 @@ #main-sections ul .box8 { background-color: #ed7831; } -#main-chosen { +#main-howto { float: right; margin-top: 1.2em; width: 13.75em; } - #main-chosen h1 { + #main-howto h1 { font-size: .9em; margin: 0 0 0 1.4em; text-transform: uppercase; } - #main-chosen ul { - margin: 1.063em 0 0 1.4em; - padding: 0; - list-style-position: inside; } - #main-chosen ul li { + #main-howto ul { + margin: 1.0625em 0 1.0625em 1.4em; } + #main-howto ul li { font-size: .9em; text-transform: uppercase; line-height: 1.25em; } - #main-chosen ul li a { - color: #363a3e; } + #main-howto ul a:before { + height: 1.25em; } + #main-howto ul .knowledge:before { + content: url(/static/img/icons/knowledge_dark.png); } + #main-howto ul .activity:before { + content: url(/static/img/icons/activity_dark.png); } + #main-howto ul .lesson-plan:before { + content: url(/static/img/icons/lesson-plan_dark.png); } + #main-howto ul .reference:before { + content: url(/static/img/icons/reference_dark.png); } + #main-howto ul .knowledge:hover:before { + content: url(/static/img/icons/knowledge_orange.png); } + #main-howto ul .activity:hover:before { + content: url(/static/img/icons/activity_orange.png); } + #main-howto ul .lesson-plan:hover:before { + content: url(/static/img/icons/lesson-plan_orange.png); } + #main-howto ul .reference:hover:before { + content: url(/static/img/icons/reference_orange.png); } + #main-howto p { + margin: 0 0 1.875em 1.4em; } + #main-howto .side-banner img { + display: block; + width: 100%; + margin-bottom: 0.2em; } + +#main-chosen { + clear: left; + float: left; + margin-top: 2em; } + #main-chosen h1 { + font-size: .9em; + margin: 0 0 1em 1.25em; + text-transform: uppercase; } + #main-chosen .levelth { + margin-left: 1.25em; } #main-tools { clear: both; } @@ -107,10 +169,5 @@ text-transform: uppercase; } #main-tools .main-tools-box ul, #main-tools .main-tools-box ol { margin: 1.1em 0 0 0; - padding: 0; - list-style-position: inside; - color: #ed7831; font-size: .9em; line-height: 1.15em; } - #main-tools .main-tools-box ul li a, #main-tools .main-tools-box ol li a { - color: #ed7831; }