May 2 before crit 1

alinaspatz · May 2, 2022 · 01f7a0d · 01f7a0d
1 parent bd50429
commit 01f7a0d
Show file tree

Hide file tree

Showing 24 changed files with 669 additions and 4 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/fonts.css b/fonts.css
@@ -0,0 +1,59 @@
+@font-face {
+    font-family: IBM SemiBoldItalic;
+    src: url("/fonts/IBMPlexMono-SemiBoldItalic.ttf");
+  }
+  @font-face {
+    font-family: IBM SemiBold;
+    src: url("/fonts/IBMPlexMono-SemiBold.ttf");
+  }
+
+  @font-face {
+    font-family: IBM Regular;
+    src: url("/fonts/IBMPlexMono-Regular.ttf");
+  }
+  @font-face {
+    font-family: IBM Italic;
+    src: url("/fonts/IBMPlexMono-Italic.ttf");
+  }
+  @font-face {
+    font-family: IBM SemiBoldItalic;
+    src: url("/fonts/IBMPlexMono-MediumItalic.ttf");
+  }
+  @font-face {
+    font-family: IBM Medium;
+    src: url("/fonts/IBMPlexMono-Medium.ttf");
+  }
+  @font-face {
+    font-family: IBM LightItalic;
+    src: url("/fonts/IBMPlexMono-LightItalic.ttf");
+}
+@font-face {
+  font-family: IBM Light;
+  src: url("/fonts/IBMPlexMono-Light.ttf");
+}
+  @font-face {
+    font-family: Apple Regular;
+    src: url("/fonts/AppleGaramond.ttf");
+}
+  @font-face {
+    font-family: Apple LightItalic;
+    src: url("/fonts/AppleGaramond-LightItalic.ttf");
+  }
+  @font-face {
+    font-family: Apple Light;
+    src: url("/fonts/AppleGaramond-Light.ttf");
+  }
+    @font-face {
+        font-family: Apple Italic;
+        src: url("/fonts/AppleGaramond-Italic.ttf");
+  }
+
+  @font-face {
+    font-family: Apple BoldItalic;
+    src: url("/fonts/AppleGaramond-BoldItalic.ttf");
+  }
+
+  @font-face {
+    font-family: Apple Bold;
+    src: url("/fonts/AppleGaramond-Bold.ttf");
+  }
diff --git a/fonts/AppleGaramond-Bold.ttf b/fonts/AppleGaramond-Bold.ttf
diff --git a/fonts/AppleGaramond-BoldItalic.ttf b/fonts/AppleGaramond-BoldItalic.ttf
diff --git a/fonts/AppleGaramond-Italic.ttf b/fonts/AppleGaramond-Italic.ttf
diff --git a/fonts/AppleGaramond-Light.ttf b/fonts/AppleGaramond-Light.ttf
diff --git a/fonts/AppleGaramond-LightItalic.ttf b/fonts/AppleGaramond-LightItalic.ttf
diff --git a/fonts/AppleGaramond.ttf b/fonts/AppleGaramond.ttf
diff --git a/fonts/IBMPlexMono-Italic.ttf b/fonts/IBMPlexMono-Italic.ttf
diff --git a/fonts/IBMPlexMono-Light.ttf b/fonts/IBMPlexMono-Light.ttf
diff --git a/fonts/IBMPlexMono-LightItalic.ttf b/fonts/IBMPlexMono-LightItalic.ttf
diff --git a/fonts/IBMPlexMono-Medium.ttf b/fonts/IBMPlexMono-Medium.ttf
diff --git a/fonts/IBMPlexMono-MediumItalic.ttf b/fonts/IBMPlexMono-MediumItalic.ttf
diff --git a/fonts/IBMPlexMono-Regular.ttf b/fonts/IBMPlexMono-Regular.ttf
diff --git a/fonts/IBMPlexMono-SemiBold.ttf b/fonts/IBMPlexMono-SemiBold.ttf
diff --git a/fonts/IBMPlexMono-SemiBoldItalic.ttf b/fonts/IBMPlexMono-SemiBoldItalic.ttf
diff --git a/index.html b/index.html
@@ -9,19 +9,115 @@
     -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" href="file:///Users/alinaspatz/Downloads/GitHub/journalism-11.svg" />
+    <link rel="icon" href="journalism-11.svg" />
     <!-- 
       This is an HTML comment
       You can write text in a comment and the content won't be visible in the page
     -->
     <title>Operation Isolation</title>
     <meta
     name="description"
-    content="Mapping the destruction of independent journalism and civil liberties in Russia." />
+    content="A visual timeline of the deliberate destruction of independent media and human rights in Russia." />
 
     <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="/fonts.css" />
+    <link rel="stylesheet" href="/media.css" />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js" integrity="sha512-w1Bktzax55ZbjW5Mqjz8+mKz4KqRjEUU35Dpq/ath29yskKqIGwNIHiFNp03m/OiJWDXvdQ1/g6aV+l4PeVO7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>    
+
+
 </head>
-<body>
-    <h1>wo</h1>
+<body style="background-image:url('/media/wall.png');
+background-repeat:no-repeat;
+background-size:contain;
+background-position:center;
+">
+
+    <!-- <p class="horizon"><br>
+        <hr>
+    </p> -->
+
+    <div id="timeline" class="timeline-container">
+
+        <div class="container">
+
+
+        <div class="leadrow">
+      <div class="leadcolumn1" >
+        <p class="lead" >OPERATION<br>ISOLATION</p>
+      </div>
+
+      <div class="leadcolumn2" >
+       <p>
+        A visual timeline of the deliberate destruction<br>of independent media and human rights in Russia.
+        </p>
+      </div>
+    </div>
+
+    <div class="row2">
+
+        <div class="row2column1">      
+        </div>
+        <div class="row2column2">     
+        </div>
+
+        <div class="row2column3">  
+        </div>
+    </div>
+
+    <div class="row3">   
+        <div class="row3column1">        
+        </div>
+        <div class="row3column2">    
+          <img src="/media/1.gif" class="media1" >
+          </div> 
+          <div class="row3column3">  
+            <p class="date">2000</p>
+            <p class="month">January 1, 2000</p>
+            <p  class="event">President Boris Yeltsin resigns and gives the presidency to Prime Minister, and former KGB officer, Vladimir Putin. Months later Putin wins the 2000 presidential election. </p>
+          </div>  
+        </div>
+
+        <div class="row4">   
+          <div class="row4column1">    
+            <img src="/media/2.gif" class="media2" >    
+          </div>
+          <div class="row4column2">    
+            <p class="month">May 11, 2000</p>
+            <p class="event">Media Most, the parent company of Russia's<br>largest independent TV network, is raided. </p>
+            </div> 
+            <div class="row4column3">  
+               </div>  
+          </div>
+
+
+          <div class="row5">   
+            <div class="row5column1"> <br>   
+            </div>
+            <div class="row5column2">    
+              <p class="month">June, 2000</p>
+              <p class="event">Vladimir Gusinsky, the owner of Media Most, is arrested. To get out, he gives control of the NTV independent channel to state-dominated gas monopoly Gazprom. </p>
+              </div> 
+              <div class="row5column3">  
+                <img src="/media/3.gif" class="media3" >    
+
+                 </div>  
+            </div>
+
+            <div class="row6">   
+              <div class="row6column1">  
+              </div>
+              <div class="row6column2">   
+                 </div> 
+                <div class="row6column3">   
+                   </div>  
+              </div>
+
+    </div>
+  </div>
+
+
+
+
 </body>
 </html>
diff --git a/journalism-11.svg b/journalism-11.svg
diff --git a/media.css b/media.css
@@ -0,0 +1,128 @@
+
+
+@media screen and (max-width: 768px) {
+
+    * {
+        max-width: 460px;
+    }
+
+    body {
+        font-size: large;
+    }
+
+    .leadcolumn2 {
+        max-width: 100%;
+        margin-left: 0px;
+        margin-right: 0px;
+        float: left;
+        text-align: left;
+      }
+
+      .leadcolumn1 {
+        max-width: 100%;
+        margin-left: 0px;
+        margin-right: 0px;
+float: left;
+text-align: left;
+      }
+
+      .lead {
+        max-width: 100%;
+        font-size: 9vw;
+        float: left;
+        text-align: left;
+                margin-left: 0px;
+        margin-right: 0px;
+
+    }
+    .container {
+       padding:10px;
+    }
+
+    div.timelineToggle {
+       float:none;
+    }
+
+    .timelineEvent div.media {
+        display:none;
+        float:none;
+    }
+
+    .timelineMinor dt {
+       font-size:1.2em;
+       white-space: normal;
+    }
+
+    .timelineMinor dd h3 {
+       font-size:1em;
+       white-space: normal;
+    }
+
+    div#timelineContainer {
+    }
+
+    .timelineMinor dd {
+        margin-left:20px;
+        padding-left:0;
+        width:100%;
+    }
+
+    .timelineEvent .media p {
+       font-size:1em;
+    }
+
+    dl.timelineMinor {
+       float:none;
+       max-width:100%;
+    }
+
+    .timelineEvent p {
+       float:none;
+       width:100%;
+    }
+
+    .timelineEvent blockquote {
+       float:none;
+       width:200px;
+       font-size:1em;
+    }
+}
+/* Smartphones (portrait) ----------- */
+@media only screen and (max-width : 320px) {
+
+    * {
+        max-width: 300px;
+    }
+
+}
+
+@media screen and (max-width: 600px) {
+  .leadcolumn2 {
+    max-width: 100%;
+    margin-right: 0px;
+    float: left;
+
+    margin-left: 0px;
+
+  }
+  .leadcolumn1 {
+    margin-right: 0px;
+float: left;
+    max-width: 100%;
+    margin-left: 0px;
+
+  }
+  .lead {
+    max-width: 100%;
+    font-size: 12vw;
+    margin-right: 0px;
+    float: left;
+
+    text-align: left;
+    margin-left: 0px;
+
+  }
+  .logos{
+    width:80%;
+  }
+}
diff --git a/media/1.gif b/media/1.gif
diff --git a/media/2.gif b/media/2.gif
diff --git a/media/3.gif b/media/3.gif
diff --git a/media/wall.png b/media/wall.png