index.html

---
layout: default
---

<style>
  .liri-download {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .liri-section {
    width: auto;
    background-color: #ffffff;
  }

  .liri-laptop {
    color: #ffffff;
  }

  @media screen and (min-width: 1024px) {
    .liri-laptop {
      padding: 40px 32px;
    }
  }

  @media screen and (max-width: 1024px) {
    .liri-laptop {
      padding-top: 20px;
    }

    h3 {
      font-size: 24px;
    }
  }

  .liri-laptop-section {
    position: relative;
    padding: 80px 0;
    width: auto;
    background-color: #f3f3f3;
    vertical-align: middle;
  }

  .liri-features-section {
    padding: 40px 0;
    margin-left: 32px;
    margin-right: 32px;
    text-align: justify;
  }

  .md-48 {
    font-size: 64px;
  }
</style>

<div class="liri-laptop mdl-typography--text-center">
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--middle mdl-cell--6-col mdl-cell--12-col-phone mdl-cell--12-col-tablet">
      <img class="responsive-img liri-laptop" src="{{ site.baseurl }}/images/home/screenshot_desktop.png">
    </div>
    <div class="mdl-cell mdl-cell--middle mdl-cell--6-col mdl-cell--12-col-phone mdl-cell--12-col-tablet">
      <h3>An OS and apps built with modern design and features</h3>
      <div class="liri-download">
        <a href="{{ site.baseurl }}/download" id="download-button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent mdl-color--yellow-500">
          <i class="material-icons">file_download</i> Download
        </a>
        <p>
          <span class="mdl-color-text--white-600" style="opacity: 0.7">Nightly alpha | 900 MB</span>
        </p>
      </div>
    </div>
  </div>
</div>

<div class="liri-section">
  <div class="liri-features-section">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4-col mdl-cell--12-col-phone mdl-cell--12-col-tablet">
        <div class="mdl-typography--text-center"><i class="material-icons md-48">flash_on</i></div>
        <h5 class="mdl-typography--text-center">Modern Features</h5>

        <p>
          We are building some exciting features including atomic upgrades, powerful notifications support, and much more. We're leveraging
          the latest and greatest Linux technologies, including OSTree, Wayland, Qt 5, and much more.
        </p>
      </div>
      <div class="mdl-cell mdl-cell--4-col mdl-cell--12-col-phone mdl-cell--12-col-tablet">
        <div class="mdl-typography--text-center"><i class="material-icons md-48">group</i></div>
        <h5 class="mdl-typography--text-center">User Experience Focused</h5>

        <p>
          By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components
          and animations that provide more feedback to users. Additionally, a single underlying responsive system across
          all platforms allow for a more unified user experience.
        </p>
      </div>
      <div class="mdl-cell mdl-cell--4-col mdl-cell--12-col-phone mdl-cell--12-col-tablet">
        <div class="mdl-typography--text-center"><i class="material-icons md-48">settings</i></div>
        <h5 class="mdl-typography--text-center">Open Source and Open Governance</h5>

        <p>
          Liri is a meritocratic, consensus-based community interested in developing an OS and apps with modern design in mind. We
          believe in the power of Open Source, Free Software and worldwide collaboration as we want to build, share and improve
          software together and make it available to everyone.
        </p>
      </div>
    </div>
  </div>
</div>



<!--

<div class="container">

    <div class="section">
      <h1 class="center">Liri</h1>
      <div class="row center">
        <h5 class="col s12">An OS and apps built with modern design and features</h5>
      </div>
      <div class="row center">
        <img class="responsive-img" src="{{ site.baseurl }}/images/home/screenshot_desktop.png" />
	  </div>
      <div class="row center">
        <a href="https://liri.io/download" id="download-button" class="btn-large waves-effect waves-light center">Download</a>
        <p class="grey-text" style="margin-top: 7px;">Nightly alpha | 900 MB</p>
	  </div>
	</div>
	
    <div class="section">

    <div class="row">
      <div class="col s12 m4">
        <div class="icon-block">
          <h2 class="center primary-text"><i class="material-icons">flash_on</i></h2>
          <h5 class="center">Modern Features</h5>

          <p class="light">
            We are building some exciting features including atomic upgrades, powerful notifications support, and much more.
            We're leveraging the latest and greatest Linux technologies, including OSTree, Wayland, Qt 5, and much more.
          </p>
        </div>
      </div>

      <div class="col s12 m4">
        <div class="icon-block">
          <h2 class="center primary-text"><i class="material-icons">group</i></h2>
          <h5 class="center">User Experience Focused</h5>

          <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
        </div>
      </div>

      <div class="col s12 m4">
        <div class="icon-block">
          <h2 class="center primary-text"><i class="material-icons">settings</i></h2>
          <h5 class="center">Open Source and Open Governance</h5>

          <p class="light">
            Liri is a meritocratic, consensus-based community interested in developing an OS and apps with modern design in mind.
            We believe in the power of Open Source, Free Software and worldwide collaboration as we want to build, share and improve software together and make it available to everyone.
          </p>
        </div>
      </div>
    </div>

  </div>
</div>


<div class="parallax-container valign-wrapper">
  <div class="section no-pad-bot">
    <div class="container">
      <div class="row center">
        <h5 class="header col s12 light">A modern responsive framework based on Material Design and Universal</h5>
      </div>
    </div>
  </div>
  <div class="parallax"><img src="{{ site.baseurl }}/images/parallax/background_02.png" alt="Unsplashed background img 2"></div>
</div>

<div class="container">
  <div class="section">

    <div class="row">
      <div class="col s12 center">
        <h3><i class="mdi-content-send primary-text"></i></h3>
        <h4>Integrated Apps</h4>
        <p class="left-align light">
          Liri OS ships with a set of modern and flexible apps. There are core apps very tightly integrated into the OS
          and cross-platform apps that can be used on all operating systems and form factors.
        </p>
      </div>
    </div>

  </div>
</div>


<div class="parallax-container valign-wrapper">
  <div class="section no-pad-bot">
    <div class="container">
      <div class="row center">
        <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
      </div>
    </div>
  </div>
  <div class="parallax"><img src="{{ site.baseurl }}/images/parallax/background_02.png" alt="Unsplashed background img 3"></div>
</div>

-->