commit a1b8c870e6de98b8b93c672483fd0984506d8457 Author: Karsten Loesing karsten.loesing@gmx.net Date: Tue Dec 20 15:41:06 2016 +0100
Include custom CSS and JS. --- website/web/css/style.css | 702 ++++++++++++++++++++++++++++++++++++++++++++++ website/web/js/script.js | 58 ++++ 2 files changed, 760 insertions(+)
diff --git a/website/web/css/style.css b/website/web/css/style.css new file mode 100644 index 0000000..cd38e5c --- /dev/null +++ b/website/web/css/style.css @@ -0,0 +1,702 @@ + +/* Please keep this file [✓] UTF-8 encoded */ + + +/* undo FOUC-fixing inline-stylesheets */ +body { + background-image:none !important; +} +body #wrapper { + display:initial !important; +} + + + +/* Page header - override bootstrap defaults */ +.page-header { + padding: 0 2.5em 2.5em 2.5em; + margin: 0; + border-bottom: 0; + color:#fff; + position:relative; + + /* gradient background */ + background: #8d56A8; /* Old browsers */ + background: -moz-linear-gradient(top, #8d56A8 0%, #6d3688 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(top, #8d56A8 0%, #6d3688 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to bottom, #8d56A8 0%, #6d3688 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d56a8', endColorstr='#6d3688',GradientType=0 ); /* IE6-9 */ + +} +.page-header img { + vertical-align:text-bottom; + max-width:40%; + height:auto; +} +.page-header img#metrics-wordmark { + position:relative; + top:-3px; +} +.page-header div { + text-align:right; + position:absolute; + right:2.5em; + bottom:1.9em; + max-width:300px; +} +.page-header div p { + line-height:21px; +} +@media (max-width: 1199.99999px) { + .page-header div { + max-width:270px; + } + .page-header div p { + font-size:14px; + line-height:18px; + } +} +@media (max-width: 767.99999px) { + .page-header { + display:none; + } + .navbar-header .navbar-brand.visible-xs { + display:block !important; + } +} + + + + +/* general font and color */ +body { + background-color: #fff; + color: black; + font-family: 'Source Sans Pro', sans-serif; + font-size: 16px; + line-height: 24px; +} +@media (max-width: 991.99999px) { + body { + font-size: 14px; + line-height: 21px; + } +} + + +/* primary button color */ +.btn-primary { + background-color: #8d56A8; + border-color: #7d4698; +} +.btn-primary:hover, .btn-primary:focus, .btn-primary:active { + background-color: #7d4698; + border-color: #6d3688; +} + + +/* format secondary navigation */ +@media (min-width: 768px) { + .navbar-secondary { + margin-bottom: 0; + border: 0; + background-color: #8d56A8; + border-radius:0; + } + .navbar-secondary .navbar-nav { + margin-right:0; + } + .navbar-secondary .navbar-nav>li>a { + font-size:14px; + color:white; + padding: 5px 10px; + margin: 10px 5px; + } + .navbar-secondary .navbar-nav>li.active>a, + .navbar-secondary .navbar-nav>li.active>a:hover, + .navbar-secondary .navbar-nav>li>a:hover { + background-color: rgba(0,0,0,0.2) !important; + color:white; + } +} + + +/* images */ +img { + max-width:100%; + height:auto; +} + + +/* breadcrumb navigation */ +.breadcrumb { + padding: 0; + margin-bottom: 10px; + margin-top:0; + background-color: transparent; + border-radius: 0; + font-size:14px; +} +.breadcrumb > li + li:before { + content: '\00BB'; + color:#888; +} + + +/* headlines */ +h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + color: #7d4698; + font-weight:bold; +} +h1, .h1 { font-size: 36px; } +h2, .h2 { font-size: 26px; } +h3, .h3 { font-size: 18px; } +h4, .h4 { font-size: 12px; } +h5, .h5 { font-size: 8px; } +h6, .h6 { font-size: 6px; } + + + +/* link color */ +a, a:hover, a:active, a:focus, a:visited { + color:#68b030; +} + + +/* main menu hover color */ +.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { + background-color: #e8e8e8; +} + + +/* format blockquotes */ +blockquote { + background: #fafafa; + color: #333; + margin: 1.8em 12px .8em 0; + padding: 0.5em 12px 1em 12px; + border-left: 12px solid #cdcdcd; + font-style:italic; +} +blockquote:before { + content: '\201C'; + color: #cdcdcd; + font-size: 5em; + line-height: 0.2em; + display:block; + position:relative; + top:6px; +} + + + +/* logo size */ +.navbar-header { + background-image: url(../images/metrics-logo.png); + background-position:left center; + background-repeat:no-repeat; + background-size:contain; +} +.navbar-brand { + padding-left:50px; +} +.navbar-brand img { + height:20px; + width:auto; +} + + +/* back to top button */ +body .topButton { + background-color: #68b030; + position:fixed; + z-index:1; + bottom:1em; + right:1em; +} +.topButton a, .topButton a:hover { + display:block; + padding:.7em 1em 1em 1em; + color:white; + font-weight:bold; + text-decoration:none; +} + + +/* add a no-padding-for-columns class */ +.no-gutter > [class*='col-'] { + padding-right:0; + padding-left:0; +} + + + +/* page footer */ +#footer { + margin-top:2em; + padding-top:2em; + padding-bottom:2em; + background-color: #f5f5f5; + color:#999; + border-top:1px solid #ccc; + +} +#footer .pull-right a { + margin-left:2em; +} +#footer .pull-right a:first-of-type { + margin-left:0; +} +#footer .no-gutter { + margin-bottom:1em; +} + + + +/* mobile navbar colors */ +.navbar-default .navbar-toggle .icon-bar { + background-color:#fff; +} +.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { + background-color: #9d66b8; +} +@media (max-width: 767.99999px) { + .navbar-header { + background-color: #7d4698; + } +} + + +/* align mobile submenu */ +@media (max-width: 767.99999px) { + .navbar-nav .dropdown-menu { + margin-left:1em; + } +} + + +/* format callouts */ +.bs-callout { + padding: 20px 20px 15px 20px; + margin: 20px 0; + border: 1px solid #eee; + border-left-width: 5px; + border-radius: 3px; + border-left-color: #7d4698; +} +.bs-callout h1, .bs-callout h2, .bs-callout h3, .bs-callout h4, .bs-callout h5, .bs-callout h6, +.bs-callout .h1, .bs-callout .h2, .bs-callout .h3, .bs-callout .h4, .bs-callout .h5, .bs-callout .h6 { + margin-top:0; +} + + +/* home dashboard page */ +.dashboard { + padding:3em 5em 0 5em; +} +.dashboard .col-sm-4 { + margin-bottom:2em; + text-align:center; +} +.dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { + text-decoration:none; + display:block; + border:1px solid #ccc; + border-radius:5px; + padding:2em 2em 1em 2em; +} +.dashboard a:hover { + background-color: #F8f8f8; +} +/* fixed box height by screen size: */ +@media (min-width: 1200px) { .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { min-height:260px; } } +@media (min-width: 992px) and (max-width: 1199.99999px) { .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { min-height:290px; } } +@media (min-width: 768px) and (max-width: 991.99999px) { .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { min-height:280px; } } +.dashboard h2 { + color:#68b030; +} +.dashboard p { + color:black; +} +@media (max-width: 767.99999px) { + .dashboard { + padding:1em; + } + .dashboard .row { + margin-right:-13px; /* 15px minus border */ + } + .dashboard .col-sm-4 { + margin-bottom:1em; + } + .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { + text-align:left; + padding:1em 1em 0 1em; + } + .dashboard p { + padding-left:2.1em; + } + .dashboard .fa-4x, .dashboard h2 { + font-size:20px; + margin:0; + display:inline-block; + } +} + + + +/* table of contents side box */ +div.list-group { + margin-top:3em; +} +div.list-group a.list-group-item { + color:#68b030 !important; +} + + + +/* external links */ +a[target="_blank"]:before { + content: " \f08e"; + font-family: 'FontAwesome'; + font-size:14px; + position:relative; + top:1px; + margin-right:3px; +} + + + +/* news page */ +.news .links { + position:relative; + top:-10px; +} +.news .links a { + margin-right:1em; +} +.news h3 .label { + font-size: 12px; + position: relative; + top: -2px; + margin-left: 5px; +} + + +/* faq */ +.faq h2 { + font-size:24px; +} +.faq p { + margin-bottom:2em; +} + + + +/* research download tables */ +td, th { + padding-left:0 !important; +} +td a { + padding-right:1em; +} +th.title { width:34%; } +th.author { width:34%; } +th.date { width:16%; } +th.download { width:16%; } + + +/* tools table */ +th.title-tools { width:15%; } +th.description { width:70%; } +th.link { width:15%; } + + + +/* horizontal line divider */ +hr { + margin-top:50px; + border-top: 1px solid #cdcdcd; +} + + +/* community and featured badge */ +.community, .featured { + position:relative; + overflow:hidden; +} +.community:before, .featured:before { + content: "Community"; + width:150px; + display:block; + position:absolute; + right:-2.7em; + top:1.8em; + background-color: #5cb85c; + font-size: 90%; + padding: .2em 2.6em .3em; + font-weight: 700; + line-height: 1; + color: #fff; + text-align: center; + vertical-align: baseline; + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.featured:before { + content: "Featured"; + background-color: #7d4698; +} +@media (max-width: 991.99999px) { + .community:before, .featured:before { + width:130px; + } +} + + +@media only screen and (max-width: 767.99999px) { + + /* Force table to not be like tables anymore */ + .responsive-table table, + .responsive-table thead, + .responsive-table tbody, + .responsive-table th, + .responsive-table td, + .responsive-table tr { + display: block; + } + + /* Hide table headers (but not display: none;, for accessibility) */ + .responsive-table thead tr { + position: absolute; + top: -9999px; + left: -9999px; + } + + .responsive-table tr { + border: 1px solid #ccc; + margin-bottom:1em; + } + + .responsive-table td { + /* Behave like a "row" */ + border: none; + border-bottom: 1px solid #eee; + position: relative; + padding-left: 50% !important; + white-space: normal; + text-align:left; + } + + .responsive-table td:before { + /* Now like a table header */ + position: absolute; + /* Top/left values mimic padding */ + top: 6px; + left: 6px; + width: 45%; + padding-right: 10px; + white-space: nowrap; + text-align:left; + font-weight: bold; + } + + /* + Label the data + */ + .responsive-table td:before { content: attr(data-title); } +} + + + +/* tools and sources */ +.tools { + margin-top:2em; +} +.tools a:hover, .tools a:active, .tools a:focus { + text-decoration:none; +} +.tools a:before { + content:''; +} +.tools p { + color:black; + line-height:21px; +} +.tools [class*='col-'] { + text-align:center; + margin-bottom:2em; +} +.tools .logo { + width:150px; + height:150px; + margin:0 auto; + background-size:contain; + background-position:center center; + background-repeat:no-repeat; +} +.tools-xs .logo { + width:100px; + height:100px; +} +.tools-xs p { + font-size:14px; + line-height:18px; +} + +@media (max-width: 399.99999px) { + .tools [class*='col-'] { + width:100%; + float:none; + } +} + + + +/* tooltips */ +.tor-tooltip { + position:relative; + color:#68b030; + border-bottom: 1px dotted #68b030; +} +.tor-tooltip-content { + position:absolute; + z-index:1; + color:white; + background-color: rgba(0,0,0,0.8); + padding:10px 14px; + width:300px; + left:-9999px; + top:30px; + opacity:0; + transition: opacity .5s ease-in-out; + -moz-transition: opacity .5s ease-in-out; + -webkit-transition: opacity .5s ease-in-out; + border-radius:3px; + line-height:20px; +} +.tor-tooltip-content:after { + bottom: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-bottom-color: rgba(0,0,0,0.8); + border-width: 6px; + margin-left: -6px; +} +.tor-tooltip:hover .tor-tooltip-content, .tor-tooltip:focus .tor-tooltip-content { + opacity:1; + left:-130px; +} +/* reposition on mobile devices: */ +@media (max-width: 767.99999px) { + .tor-tooltip { + position:static; + } + .tor-tooltip-content { + margin:0 auto; + width:90%; + max-width:500px; + } + + .tor-tooltip:hover .tor-tooltip-content, .tor-tooltip:focus .tor-tooltip-content { + left:1em; + right:1em; + top:inherit; + margin-top:30px; + } + .tor-tooltip-content:after { + display:none; + } +} + + +/* data page */ + +/* tabs */ +ul.nav-tabs { + margin-top:2em; + margin-bottom:1em; +} + +/* graphs */ +img.graph { + width:100%; +} +/* forms and fields */ +form { + margin-top:4em; +} +form label { + width:100%; + max-width:100px; +} +form input, form select { + width:100%; + max-width:200px; +} +form input[type=checkbox] { + width:20px; +} + + + + +/* Show submenu on "hover", desktop: */ +@media (min-width: 768px) { + .dropdown:hover .dropdown-menu { + display: block; + margin-top: 0; + } +} + +/* hide submenus and carets on mobile version, but keep the language submenu: */ +@media (max-width: 767.99999px) { + .navbar-nav :not(.dropdown-language) .dropdown-menu { + display:none; + } + .navbar-nav :not(.dropdown-language) .dropdown-toggle .caret { + display:none; + } +} + + + +/* No JavaScript fallbacks */ + + +/* same for mobile - also for browsers with script enabled, so no ".noscript" here */ +#navbar-toggle-checkbox { + display: none; +} +body.noscript #navbar-toggle-checkbox:checked ~ .collapse { + display: block; +} + + +/* open LANGUAGE submenu in non-js mobile menu */ + +@media (max-width: 767.99999px) { + body.noscript .navbar-nav .dropdown-language .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + display: block !important; + } +} + + + + + diff --git a/website/web/js/script.js b/website/web/js/script.js new file mode 100644 index 0000000..e199cb4 --- /dev/null +++ b/website/web/js/script.js @@ -0,0 +1,58 @@ + +/* Please keep this file [✓] UTF-8 encoded */ + +jQuery(function() { + // jQuery is .ready() - let's do stuff! + + + // remove noscript class to ignore noscript fallback css + jQuery("body").removeClass("noscript"); + + // hide scrollToTop-Button when we're already there + jQuery( window ).scroll(function(){ + if (jQuery( document ).scrollTop() < 100) { + jQuery(".topButton:not(:animated)").stop().fadeOut(); + } else { + jQuery(".topButton:not(:animated)").stop().fadeIn(); + } + }); + jQuery( window ).scroll(); + + + // smooth scolling for all anchor links + jQuery('a[href^="#"]').on('click',function (e) { + e.preventDefault(); + var target = this.hash; + var $target = $(target.split('#').join('#anchor-')); + if ($target.offset() != null) { + $('html, body').stop().animate({ + 'scrollTop': ($target.offset().top + $(document).scrollTop()) + }, 900, 'swing', function () { + window.location.hash = target; + }); + } + }); + + + // toggle tabs by JS: + jQuery('.nav-tabs a').each(function(){ + jQuery(this).click(function(e){ + e.preventDefault(); + // toggle data-tab: + jQuery('.nav-tabs li').removeClass('active'); + jQuery(this).parent().addClass('active'); + jQuery( ".tab-pane" ).hide(); + jQuery( "#tab-" + jQuery(this).data('tab') ).show(); + }); + }); + + + // make main menu items with dropdowns clickable again: + jQuery('.dropdown-toggle').click(function(){ + location.href = jQuery(this).attr('href'); + }); + + +}); + +