woelper
/
bestofwikipedia


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!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">
  <link href="https://fonts.googleapis.com/css?family=Slabo+27px&display=swap" rel="stylesheet"> 
  <link rel="stylesheet" href="https://rawgit.com/woelper/lilac/master/lilac.min.css">
  <link rel="stylesheet" href="style.css">
  <meta name="theme-color" content="#f7d723">
  <meta name="apple-mobile-web-app-status-bar-style" content="#f7d723">
  <link rel="icon" sizes="128x128" href="icon.png">
  <link rel="apple-touch-icon" sizes="128x128" href="icon.png">

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body,  title{
      font-family: 'Slabo 27px', serif;
    }
    #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, " ").replace("?wprov=sfla1",""))}}</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> -->

<!-- <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 href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Sanchez" rel="stylesheet"> -->