[tor-commits] [metrics-web/master] Include custom CSS and JS.
karsten at torproject.org
karsten at torproject.org
Mon Jan 9 17:03:42 UTC 2017
commit a1b8c870e6de98b8b93c672483fd0984506d8457
Author: Karsten Loesing <karsten.loesing at 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;
+}
+ at media (max-width: 1199.99999px) {
+ .page-header div {
+ max-width:270px;
+ }
+ .page-header div p {
+ font-size:14px;
+ line-height:18px;
+ }
+}
+ at 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;
+}
+ at 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 */
+ at 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;
+}
+ at media (max-width: 767.99999px) {
+ .navbar-header {
+ background-color: #7d4698;
+ }
+}
+
+
+/* align mobile submenu */
+ at 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: */
+ at media (min-width: 1200px) { .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { min-height:260px; } }
+ at media (min-width: 992px) and (max-width: 1199.99999px) { .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { min-height:290px; } }
+ at 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;
+}
+ at 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;
+}
+ at media (max-width: 991.99999px) {
+ .community:before, .featured:before {
+ width:130px;
+ }
+}
+
+
+ at 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;
+}
+
+ at 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: */
+ at 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: */
+ at 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: */
+ at 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 */
+
+ at 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');
+ });
+
+
+});
+
+
More information about the tor-commits
mailing list