From 81bb4479ce742c0424177f0119ce0555382d67bc Mon Sep 17 00:00:00 2001
From: suroh <maxefranklin@tuta.io>
Date: Fri, 30 Nov 2018 15:37:14 +0100
Subject: [PATCH] Cleaned up CSS, removed bad commenting and obsolete styles.
 Updated API username and key for annotations.

---
 xppl/getannot.py          |   4 +-
 xppl/static/css/style.css | 678 +++++++++++++++++++++-----------------
 2 files changed, 381 insertions(+), 301 deletions(-)

diff --git a/xppl/getannot.py b/xppl/getannot.py
index df72051..0f0ccf1 100644
--- a/xppl/getannot.py
+++ b/xppl/getannot.py
@@ -6,7 +6,7 @@ from flask import request
 
 def get_annotations():
     # TODO(decentral1se): remove this from the source
-    KEY = "6879-n8AksBoSB7kYoQ3eEwzpEr3nFQEmSp3XN-0PcKL_Sik"
+    KEY = "6879-H5GbA2KyFIeEUM1BubjVTLP8yM3GMyHgOAjjNe_GBxY"
 
     # a dictionary containing necessary http headers
     headers = {
@@ -15,7 +15,7 @@ def get_annotations():
         "Authorization": "Bearer %s" % KEY
     }
 
-    base_url = "https://hypothes.is/api/search?user=xpub@hypothes.is"
+    base_url = "https://hypothes.is/api/search?user=varia_annotator@hypothes.is"
 
     search_url = "".join([base_url])
 
diff --git a/xppl/static/css/style.css b/xppl/static/css/style.css
index 9f3d6a0..bfba43a 100755
--- a/xppl/static/css/style.css
+++ b/xppl/static/css/style.css
@@ -1,27 +1,24 @@
 @import url("../fonts/fonts_style.css");
 
-*{
-font-family: "Archivo Narrow";
+* {
+  font-family: "Archivo Narrow";
 }
 
-p{
+p {
   font-size: 20px;
-
-
 }
 
-a{
-
+a {
   text-decoration: underline;
   color: black;
 }
-a:hover{
 
+a:hover {
   text-decoration: underline;
   color: #0000FF;
 }
 
-.navigation ul{
+.navigation ul {
   list-style-type: none;
   margin: 0;
   margin-top: 40px;
@@ -29,10 +26,10 @@ a:hover{
 }
 
 .navigation ul li {
-float: left;
+  float: left;
 }
 
-.navigation ul li a{
+.navigation ul li a {
   display: block;
   color: black;
   text-align: center;
@@ -41,79 +38,78 @@ float: left;
   text-decoration: none;
 }
 
-.navigation ul li:active a{
-font-style: italic;
-
+.navigation ul li:active a {
+  font-style: italic;
 }
 
 .clearfix::after {
-    content: "";
-    clear: both;
-    display: table;
+  content: "";
+  clear: both;
+  display: table;
 }
 
-.container{
-padding: 0px 10px;
-
-
+.container {
+  padding: 0px 10px;
 }
 
-#fileformat{
+#fileformat {
   text-align: center;
 }
 
-.lead{
+.lead {
   font-size: 18px;
-
 }
 
-.about{
-font-size: 18px;
+.about {
+  font-size: 18px;
+}
 
+.library_table {
+  /* Removes the cell spacing via CSS */
+  border-spacing: 0;
 }
-.library_table{
-border-spacing:0; /* Removes the cell spacing via CSS */
-}
-.library_table a{
+
+.library_table a {
   text-decoration: none;
   color: black;
 }
 
-.library_table th{
-font-size: 20px;
-cursor: pointer;
-}
-.library_table td{
-padding: 5px;
+.library_table th {
+  font-size: 20px;
+  cursor: pointer;
 }
 
-th.headerSortUp{
-background-color: #E8E8E8!important;
-}
-th.headerSortDown{
-background-color: #E8E8E8!important;
+.library_table td {
+  padding: 5px;
 }
 
-.library_table tbody tr:hover{
-  background-color: #E8E8E8!important;
+th.headerSortUp {
+  background-color: #E8E8E8 !important;
 }
 
+th.headerSortDown {
+  background-color: #E8E8E8 !important;
+}
 
-.library_table .title_col{
+.library_table tbody tr:hover {
+  background-color: #E8E8E8 !important;
+}
+
+.library_table .title_col {
   font-size: 20px;
   padding-left: 90px;
   padding-right: 20px;
 }
 
-.library_table .author_col{
+.library_table .author_col {
   font-size: 18px;
 }
 
-.library_table li{
-list-style-type:none;
-text-align: center;
-padding-right: 5px;
-display: inline-block;
+.library_table li {
+  list-style-type: none;
+  text-align: center;
+  padding-right: 5px;
+  display: inline-block;
 }
 
 #plus {
@@ -125,95 +121,94 @@ display: inline-block;
   text-align: center;
 }
 
-
-.library_table tr:nth-child(even){
-background-color: #fafafa;
+.library_table tr:nth-child(even) {
+  background-color: #fafafa;
 }
 
-#title_xppl{
-font-size: 46px;
-cursor: pointer;
+#title_xppl {
+  font-size: 46px;
+  cursor: pointer;
 }
 
-.header input{
-height:40px;
-width: 500px;
-font-size: 24px;
-font-weight: bold;
+.header input {
+  height: 40px;
+  width: 500px;
+  font-size: 24px;
+  font-weight: bold;
 }
 
-.author input{
-height:20px;
-width: 500px;
-font-size: 18px;
+.author input {
+  height: 20px;
+  width: 500px;
+  font-size: 18px;
 }
 
-.search input{
-margin: 0;
-float: left;
-width: 320px;
-height: 36px;
-font-size: 18px;
-font-weight: regular;
-padding: 2px;
-background:rgb(240, 240, 240);
-border:0px;
-box-shadow: inset 0 0 5px rgba(000,000,000, 0.2);
+.search input {
+  margin: 0;
+  float: left;
+  width: 320px;
+  height: 36px;
+  font-size: 18px;
+  font-weight: regular;
+  padding: 2px;
+  background: rgb(240, 240, 240);
+  border: 0px;
+  box-shadow: inset 0 0 5px rgba(000, 000, 000, 0.2);
 }
 
 .button {
-height:40px;
-font-size: 18px;
-padding:6px 15px;
-left:0px;
-border:0px solid #dbdbdb;
-background-color: #686d72;
-color:#fafafa;
+  height: 40px;
+  font-size: 18px;
+  padding: 6px 15px;
+  left: 0px;
+  border: 0px solid #dbdbdb;
+  background-color: #686d72;
+  color: #fafafa;
 }
 
-.button:hover  {
-background-color:red;
-color: #fafafa;
+.button:hover {
+  background-color: red;
+  color: #fafafa;
 }
 
 .ui-autocomplete {
-position: absolute;
-top: 100%;
-left: 0;
-z-index: 1000;
-float: left;
-display: none;
-min-width: 160px;
-padding: 4px 0;
-margin: 0 0 10px 25px;
-list-style: none;
-background-color: #ffffff;
-border-color: #ccc;
-border-color: rgba(0, 0, 0, 0.2);
-border-style: solid;
-border-width: 1px;
--webkit-border-radius: 5px;
--moz-border-radius: 5px;
-border-radius: 5px;
--webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
--moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
--webkit-background-clip: padding-box;
--moz-background-clip: padding;
-background-clip: padding-box;
-*border-right-width: 2px;
-*border-bottom-width: 2px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  float: left;
+  display: none;
+  min-width: 160px;
+  padding: 4px 0;
+  margin: 0 0 10px 25px;
+  list-style: none;
+  background-color: #ffffff;
+  border-color: #ccc;
+  border-color: rgba(0, 0, 0, 0.2);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
 }
 
-.ui-menu-item > a.ui-corner-all {
-display: block;
-padding: 3px 15px;
-clear: both;
-font-weight: normal;
-line-height: 18px;
-color: #555555;
-white-space: nowrap;
-text-decoration: none;
+.ui-menu-item>a.ui-corner-all {
+  display: block;
+  padding: 3px 15px;
+  clear: both;
+  font-weight: normal;
+  line-height: 18px;
+  color: #555555;
+  white-space: nowrap;
+  text-decoration: none;
 }
 
 .ui-menu-item {
@@ -221,80 +216,142 @@ text-decoration: none;
 }
 
 .ui-state-hover, .ui-state-active {
-color: #ffffff;
-text-decoration: none;
-background-color: #0088cc;
-border-radius: 0px;
--webkit-border-radius: 0px;
--moz-border-radius: 0px;
-background-image: none;
+  color: #ffffff;
+  text-decoration: none;
+  background-color: #0088cc;
+  border-radius: 0px;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  background-image: none;
 }
 
 .ui-helper-hidden-accessible {
-    display: none;
+  display: none;
 }
 
-
-
-.footer{
+.footer {
   width: 100%;
-  font-family:'Courier New';
-  font-weight:100;
-  font-size:12px;
+  font-family: 'Courier New';
+  font-weight: 100;
+  font-size: 12px;
   margin-top: 200px;
 }
 
-.footer pre{
+.footer pre {
   width: 60px;
-  margin:0 auto;
-font-family:'Courier New';
-
+  margin: 0 auto;
+  font-family: 'Courier New';
 }
-.footer p{
+
+.footer p {
   width: 30%;
-    margin:0 auto;
-    text-align: center;
-font-family:'Courier New';
-font-size: 12px;
+  margin: 0 auto;
+  text-align: center;
+  font-family: 'Courier New';
+  font-size: 12px;
 }
 
-.ui-tabs-vertical { width: 100em; border-top: 0;}
-<<<<<<< HEAD
-<<<<<<< HEAD
-.ui-tabs-vertical .ui-tabs-nav { padding: .2em .2em .2em .2em; float: left; width: 15em; }
-.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 0 !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
-=======
-.ui-tabs-vertical a { text-decoration: none; color: black;}
-.ui-tabs-vertical .ui-tabs-nav { padding: .2em .2em .2em .2em; float: left; width: 15em; -webkit-appearance: none;}
-.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 0 !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; list-style-type: none; }
->>>>>>> stack_stuff
-=======
-.ui-tabs-vertical a { text-decoration: none; color: black;}
-.ui-tabs-vertical .ui-tabs-nav { padding: .2em .2em .2em .2em; float: left; width: 15em; -webkit-appearance: none;}
-.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 0 !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; list-style-type: none; }
->>>>>>> master
-.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
-.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 0; background-color: yellow !important; list-style-type: none;}
-.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: left; width: 50em; font-size: 12px; list-style-type: none;}
+.ui-tabs-vertical {
+  width: 100em;
+  border-top: 0;
+}
 
-#creator{
+/* HEAD */
+.ui-tabs-vertical .ui-tabs-nav {
+  padding: .2em .2em .2em .2em;
+  float: left;
+  width: 15em;
+}
+
+.ui-tabs-vertical .ui-tabs-nav li {
+  clear: left;
+  width: 100%;
+  border-bottom-width: 0 !important;
+  border-right-width: 0 !important;
+  margin: 0 -1px .2em 0;
+}
+
+.ui-tabs-vertical a {
+  text-decoration: none;
+  color: black;
+}
+
+.ui-tabs-vertical .ui-tabs-nav {
+  padding: .2em .2em .2em .2em;
+  float: left;
+  width: 15em;
+  -webkit-appearance: none;
+}
+
+.ui-tabs-vertical .ui-tabs-nav li {
+  clear: left;
+  width: 100%;
+  border-bottom-width: 0 !important;
+  border-right-width: 0 !important;
+  margin: 0 -1px .2em 0;
+  list-style-type: none;
+}
+
+/* Stack_Stuff */
+.ui-tabs-vertical a {
+  text-decoration: none;
+  color: black;
+}
+
+.ui-tabs-vertical .ui-tabs-nav {
+  padding: .2em .2em .2em .2em;
+  float: left;
+  width: 15em;
+  -webkit-appearance: none;
+}
+
+.ui-tabs-vertical .ui-tabs-nav li {
+  clear: left;
+  width: 100%;
+  border-bottom-width: 0 !important;
+  border-right-width: 0 !important;
+  margin: 0 -1px .2em 0;
+  list-style-type: none;
+}
+
+/* Master */
+.ui-tabs-vertical .ui-tabs-nav li a {
+  display: block;
+}
+
+.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
+  padding-bottom: 0;
+  padding-right: .1em;
+  border-right-width: 0;
+  background-color: yellow !important;
+  list-style-type: none;
+}
+
+.ui-tabs-vertical .ui-tabs-panel {
+  padding: 1em;
+  float: left;
+  width: 50em;
+  font-size: 12px;
+  list-style-type: none;
+}
+
+#creator {
   font-size: 12px;
   color: grey;
-
 }
 
-#newstext{
+#newstext {
   width: 100%;
   margin: 0;
   padding: 3px;
-  top:0;
-  left:0;
+  top: 0;
+  left: 0;
   position: fixed;
   font-size: 18px;
   background-color: yellow;
 }
 
-#annotindication{
+#annotindication {
   width: 30%;
   margin: 0;
   padding: 3px;
@@ -303,22 +360,22 @@ font-size: 12px;
 }
 
 div.marquee {
-    white-space:no-wrap;
-    overflow:hidden;
-}
-div.marquee > div.marquee-text {
-    font-style: italic;
-    white-space:nowrap;
-    display:inline;
-    width:auto;
+  white-space: no-wrap;
+  overflow: hidden;
 }
 
-#home_content{
+div.marquee>div.marquee-text {
+  font-style: italic;
+  white-space: nowrap;
+  display: inline;
+  width: auto;
+}
+
+#home_content {
   width: 70%;
-
 }
 
-#app{
+#app {
   position: fixed;
   bottom: 0;
   right: 0;
@@ -326,121 +383,126 @@ div.marquee > div.marquee-text {
   height: 100%;
 }
 
-.messages{
+.messages {
   position: absolute;
   bottom: 40px;
   display: block;
-  width:100%;
+  width: 100%;
   padding: 10px;
   margin: 0px;
   height: 100%;
-  /*background-color: #b4b9be;*/
   overflow-y: scroll;
   overflow-x: hidden;
   color: white;
-  word-wrap:break-word;
+  word-wrap: break-word;
   box-sizing: border-box;
--webkit-box-sizing: border-box;
--moz-box-sizing: border-box;
-z-index: -100000;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  z-index: -100000;
 }
 
-.messageback1{
+.messageback1 {
+  position: absolute;
+  bottom: 40px;
+  display: block;
+  width: 100%;
+  padding: 0px;
+  margin: 0px;
+  height: 100%;
+  background-color: #b4b9be;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  color: white;
+  word-wrap: break-word;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  z-index: -100000;
+}
 
-position: absolute;
-bottom: 40px;
-display: block;
-width:100%;
-padding: 0px;
-margin: 0px;
-height: 100%;
-background-color: #b4b9be;
-overflow-y: scroll;
-overflow-x: hidden;
-color: white;
-word-wrap:break-word;
-box-sizing: border-box;
--webkit-box-sizing: border-box;
--moz-box-sizing: border-box;
-z-index: -100000;}
-
-.messageback2{
-position: absolute;
-bottom: 40px;
-display: block;
-width:100%;
-padding: 0px;
-margin: 0px;
-height: 100%;
-background-color: #b4b9be;
-overflow-y: scroll;
-overflow-x: hidden;
-color: white;
-word-wrap:break-word;
-box-sizing: border-box;
--webkit-box-sizing: border-box;
--moz-box-sizing: border-box;
-z-index: -100000;}
+.messageback2 {
+  position: absolute;
+  bottom: 40px;
+  display: block;
+  width: 100%;
+  padding: 0px;
+  margin: 0px;
+  height: 100%;
+  background-color: #b4b9be;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  color: white;
+  word-wrap: break-word;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  z-index: -100000;
+}
 
 .new-message {
   position: absolute;
   bottom: 0;
   display: block;
-width:100%;
-margin:0;
-padding:0;
-z-index: 100000;
-opacity: 1!important;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  z-index: 100000;
+  opacity: 1 !important;
 }
-.control{
-  display: block;
-  margin:0!important;
-  padding:0!important;
 
-}
-.field{
+.control {
   display: block;
-  margin:0!important;
-  padding:0!important;
+  margin: 0 !important;
+  padding: 0 !important;
 }
-.new-message input{
+
+.field {
+  display: block;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.new-message input {
   width: 80%;
   display: block;
-  margin:0px!important;
-  padding:0px!important;
+  margin: 0px !important;
+  padding: 0px !important;
   height: 40px;
   font-size: 16px;
   word-wrap: break-word;
   word-break: break-all;
   float: left;
   box-sizing: border-box;
--webkit-box-sizing: border-box;
--moz-box-sizing: border-box;
-}
-.new-message button{
-  display: block;
-  width: 20%;
-float: right;
-margin:0px!important;
-padding:0px!important;
-box-sizing: border-box;
--webkit-box-sizing: border-box;
--moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
 }
 
-.messages .user{
+.new-message button {
+  display: block;
+  width: 20%;
+  float: right;
+  margin: 0px !important;
+  padding: 0px !important;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+.messages .user {
   font-size: 16px;
   margin-bottom: -15px;
   margin-top: 20px;
 }
-.messages .msg{
+
+.messages .msg {
   font-size: 24px;
   margin: 0px;
   margin-top: -15px;
   margin-bottom: 10px;
   padding: 0;
 }
-.messages .time{
+
+.messages .time {
   font-size: 16px;
   font-style: italic;
 }
@@ -453,11 +515,9 @@ box-sizing: border-box;
   display: inline-block;
   position: relative;
   left: 400px;
-
 }
 
 .widget iframe {
-
   width: 100%;
   height: 100%;
   border: none;
@@ -472,23 +532,23 @@ box-sizing: border-box;
 }
 
 @media screen and (max-width: 1000px) {
-.grid{
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-gap: 2px;
-  align-items: top;
-  justify-items: center;
-}
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-gap: 2px;
+    align-items: top;
+    justify-items: center;
+  }
 }
 
 @media screen and (max-width: 600px) {
-.grid{
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-gap: 2px;
-  align-items: top;
-  justify-items: center;
-}
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 2px;
+    align-items: top;
+    justify-items: center;
+  }
 }
 
 .gridbox {
@@ -498,62 +558,82 @@ box-sizing: border-box;
   justify-items: center;
 }
 
-.gridbox:hover{
+.gridbox:hover {
   opacity: 0.5;
 }
 
 /* The Modal (background) */
 .modal {
-    display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
-    z-index: 1; /* Sit on top */
-    left: 0;
-    top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: rgb(0,0,0); /* Fallback color */
-    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
+  /* Hidden by default */
+  display: none;
+  /* Stay in place */
+  position: fixed;
+  /* Sit on top */
+  z-index: 1;
+  left: 0;
+  top: 0;
+  /* Full width */
+  width: 100%;
+  /* Full height */
+  height: 100%;
+  /* Enable scroll if needed */
+  overflow: auto;
+  /* Fallback color */
+  background-color: rgb(0, 0, 0);
+  /* Black w/ opacity */
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 /* Modal Content/Box */
 .modal-content {
-    background-color: yellow;
-    margin: 15% auto; /* 15% from the top and centered */
-    padding: 15px;
-    border: 1px solid #888;
-    width: 40%; /* Could be more or less, depending on screen size */
+  background-color: yellow;
+  /* 15% from the top and centered */
+  margin: 15% auto;
+  padding: 15px;
+  border: 1px solid #888;
+  /* Could be more or less, depending on screen size */
+  width: 40%;
 }
 
 /* The Close Button */
 .close {
-    color: grey;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
+  color: grey;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
 }
 
 .close:hover,
 .close:focus {
-    color: red;
-    text-decoration: none;
-    cursor: pointer;
+  color: red;
+  text-decoration: none;
+  cursor: pointer;
 }
 
+body {
+  font-family: "Archivo Narrow"
+}
 
-body { font-family: "Archivo Narrow"}
-nav { font-size: .7em }
+nav {
+  font-size: .7em
+}
+
+@page {
+  size: A5;
+  margin: 1cm
+}
 
-@page { size: A5; margin: 1cm }
 @media print {
-    nav { display: none }
+  nav {
+    display: none
+  }
 }
 
-
-#interface_links{
+#interface_links {
   font-size: 32px;
   margin-top: 40px;
 }
-#interface_links a{
-  margin-right:10px;
+
+#interface_links a {
+  margin-right: 10px;
 }