woelper
/
bestofwikipedia


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
							<!doctype html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#dddddd">
  <link rel="icon" sizes="128x128" href="icon.png">
  
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #splash {
      background-color: rgb(61, 61, 61);
      color: rgb(207, 207, 207);
      padding: 10%;
      margin: 0%;
      font-size: 4em;
      font-weight: bolder;
      padding-bottom: 200%;
      height: 100%;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>


<body>
  <div id="splash">
    loading
  </div>
  
  
  <div id="app" style="display: none">
    <nav>
      <div class="logo">{{tr.title}}</div>
      Short text <input type="checkbox" v-model="compact">
    </nav>
    
    
    <div class="content">
      <article-new da="defaultArticle"></article-new>
      
      <div class="panel" v-if="!ready">
        Loading articles...
      </div>
      <template v-for="art in articles" v-if="art">
        <div class="panel">
          <div class="title">
            <a class="link" :href="getLink(art)">{{decodeURI(art.title.replace(/_/g, " "))}}</a>
          </div>
          <template v-if="compact">
            <div class="summary">{{shortenParagraph(art.summary)}}</div>
          </template>
          <template v-else>
              <div class="summary">{{art.summary}}</div>
            </template>
  
          
          <a class="link-small" :href="getLink(art)">Read on Wikipedia</a>
        </div>
      </template>
      <!-- {{articles}} -->
    </div> 
  </div>
</body>


<script defer src="vue.min.js"></script>
<script defer src="firebase.js"></script>
<script defer src="lodash.min.js"></script>
<link rel="stylesheet" href="lilac.min.css">

<!-- <script defer src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script> -->
<!-- <link rel="stylesheet" href="https://rawgit.com/woelper/lilac/master/lilac.min.css"> -->
<!-- <script defer src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script> -->
<!-- <script defer src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> -->
<script defer src="app.js"></script>
<link rel="stylesheet" href="style.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Sanchez" rel="stylesheet"> -->