index changes

static/index.css

@@ -0,0 +1,245 @@
+body {
+    background: white;
+    max-width: 100%;
+    height:100%;
+    display: inline-table;
+    font-family: Baskerville;
+    bottom: 20px;
+
+}
+
+/*.img {
+        display: inline;
+}
+
+
+.thumb{
+        display: inline;
+}*/
+
+h1{
+  font-size: 20px;
+  margin-left: 20px;
+}
+
+.thumbborder {
+/*margin-bottom: 15px;*/
+/*border : 20px solid blue;*/
+width: 100%;
+height: 100%;
+display: inline-block;
+text-align: left;
+position: relative;
+display: inline-block;
+}
+
+.title{
+    margin-top: 15px;
+    line-height: 1.3;
+}
+    
+/*.smw-row:nth-child(odd) {
+    background-color: purple;
+    float: right;
+}
+.smw-row:nth-child(odd) img {
+    float: right;
+}
+.smw-row:nth-child(even) {
+    background-color: orange;
+    float: left;
+}*/
+.nav .active{
+    /*font-family: helvetica;*/
+    margin-left: 20px;
+    color: black;
+    text-decoration: underline;
+}
+
+.navtab{/*
+    font-family: helvetica;*/
+    margin-left: 20px;
+    color: grey; 
+}
+
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  width: 70px;
+  /*font-family: helvetica;*/
+  font-size: 14px;
+  margin: 20px;
+  vertical-align: top;
+
+}
+
+.tooltip .tooltiptext {
+  display: block;
+  visibility: hidden;
+  width: 300%;
+  height: auto;
+  /*min-height: 100%;*/
+  background-color: #0BEFEB;
+  /*opacity: 80%;*/
+  color: black;
+  text-align: left;
+  padding: 10px;
+  /*border-radius: 6px;*/
+/*  font-family: CothamSans;*/
+  font-size: 14px; 
+  position: absolute;
+  /*top: 0px;*/
+  z-index: 1;
+  margin-top: 0px;
+  /*vertical-align: top;*/
+  line-height: 1.3;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+ul#nav li{
+    display: inline;
+    list-style: none;
+    margin-left: 10px;
+/*    margin-left: 10%
+    margin-right: 10%;*/
+    align-content: initial;
+    font-size: 20px; 
+
+}
+
+ul#nav{
+    margin-left: 20px;
+    margin-top: 20px;
+    margin-right: 10px;
+    margin-bottom: 20px;
+    top:0px;
+    bottom: 10px;
+    padding-left: 0px;
+    border: none;
+    width: 100vw;
+    /*display: inline;*/
+    height:20px;
+    /*overflow-x: scroll;*/
+    left:0px;
+    position: fixed;
+    /*z-index: -1;   */
+}
+
+ul#menu li{
+    display: inline;
+    list-style: none;
+/*    margin-left: 10%
+    margin-right: 10%;*/
+    align-content: initial; 
+
+}
+
+ul#menu{
+    margin-left: 10px;
+    margin-right: 10px;
+    top:40px;
+    bottom: 10px;
+    padding-left: 0px;
+    border: none;
+    width: 85vw;
+    /*display: inline;*/
+    height:100%;
+    /*overflow-x: scroll;*/
+    left:0px;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    position: absolute;
+    /*z-index: -1;   */
+}
+
+
+div#myBtnContainer{
+  background-color: white;
+   /*margin-top: 20px;*/
+   margin-left: 30px;
+   margin-bottom: 30px;
+    border: none;
+    width: 15vw;
+    display: inline;
+   /* visibility: hidden;*/
+    height:100%;
+    right:0px;
+    top:0px;
+    position: fixed;
+    padding:10px;
+    overflow-y: scroll;
+    /*z-index: -1;*/
+
+    /*overflow-y: hidden;*/
+}
+
+div#myBtnContainer:hover{
+  background-color: white;
+  /*z-index: 1;*/
+}
+
+
+.filter {
+    display: inline-block;
+    box-shadow: 8px 8px 8px #9D9C9C;
+}
+
+.show {
+display: inline-block;
+/*box-shadow: 8px 8px 8px #303E88*/;
+box-shadow: 10px 10px 20px #0BEFEB;
+}
+
+/*.container {
+margin-left: 40px;
+  margin-top: 20px;
+  overflow: hidden;
+}*/
+
+
+
+/* Style the buttons */
+.btn {
+  border: none;
+  outline: none;
+  font-family: Baskerville;
+  font-size: 20px;
+  text-align: left;
+  display: block;
+  /*padding: 4px 6px;*/
+  /*text-shadow: 2px 2px 2px #9D9C9C;*/
+  /*background-color: blue;*/
+  cursor: pointer;
+  margin: 4px 4px 2px 2px;
+  color: #E8E8E8;
+  background-color: transparent;
+}
+
+.btn:hover {
+  background-color: #ddd;
+}
+
+.btn.active {
+  background-color: #666;
+  color: white;
+}
+
+.mw-parser-output{
+  display: inline;
+}
+
+::-webkit-scrollbar {
+    display: none;
+}
+
+.line{
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 80vw;
+  height: 2px;
+  background-color: black;
+}

templates/index.html

@@ -9,14 +9,13 @@
 </head>
 <body>
   <div id="myBtnContainer">
-  <h2><span class="mw-headline" id="Filters">Topics</span></h2>
+  <button class="btn active" onclick="filterSelection('All')">All</button>
-  <button class="btn active" onclick="filterSelection('All')">~All</button>
+  <button class="btn" onclick="filterSelection('Arts and Culture')">Arts and Culture</button>
-  <button class="btn" onclick="filterSelection('Arts and Culture')">~Arts and Culture</button>
+  <button class="btn" onclick="filterSelection('Civil Rights')">Civil Rights</button>
-  <button class="btn" onclick="filterSelection('Civil Rights')">~Civil Rights</button>
+  <button class="btn" onclick="filterSelection('Clergy / Religion')">Clergy / Religion</button>
-  <button class="btn" onclick="filterSelection('Clergy / Religion')">~Clergy / Religion</button>
+  <button class="btn" onclick="filterSelection('Economics')">Economics</button>
-  <button class="btn" onclick="filterSelection('Economics')">~Economics</button>
+  <button class="btn" onclick="filterSelection('Education')">Education</button>
-  <button class="btn" onclick="filterSelection('Education')">~Education</button>
+  <button class="btn" onclick="filterSelection('Elections')">Elections</button>
-  <button class="btn" onclick="filterSelection('Elections')">~Elections</button>
   <button class="btn" onclick="filterSelection('Food Production / Nutrition / Food')">Food Production / Nutrition / Food</button>
   <button class="btn" onclick="filterSelection('Healthcare')">Healthcare</button>
   <button class="btn" onclick="filterSelection('Imprisonment')">Imprisonment</button>
@@ -33,7 +32,7 @@
   <button class="btn" onclick="filterSelection('Social Policies')">Social Policies</button>
   <button class="btn" onclick="filterSelection('US Foreign Policy')">US Foreign Policy</button>
   <button class="btn" onclick="filterSelection('Workers Rights')">Workers Rights</button>
-  <h2><span class="mw-headline" id="Filters">Formats</span></h2>
+  <div class="line"></div>
   <button class="btn" onclick="filterSelection('Agenda')">Agenda</button>
   <button class="btn" onclick="filterSelection('Article')">Article</button>
   <button class="btn" onclick="filterSelection('Bulletin')">Bulletin</button>
@@ -57,9 +56,9 @@
   <button class="btn" onclick="filterSelection('Song')">Song</button>
   <button class="btn" onclick="filterSelection('Statement')">Statement</button>
 </div>
-  <ul id="menu">
+<ul id="menu">
-    <div id="body">{{ body|safe }}</div>
+    {{ body|safe }}
-  </ul>
+</ul>
 
 </body>
 </html>