index.html

---
layout: minimal
title: "Free your computer. Use Linux."
---

<!-- Header -->
<header>
	<div class="row">
		<span class="title">{{ site.title }}</span>
		<span class="subtitle">Free your computer. Use Linux.</span>
	</div>
</header>

<!-- Nav -->
<nav>
	<div class="row">
		<a href="{{ site.baseurl }}/what-is-linux">What Is Linux?</a>
		<a href="{{ site.baseurl }}/why-use-linux">Why Use Linux?</a>
		<a href="{{ site.baseurl }}/switching">Making the Switch</a>
		<span class="search right"><input type="search" id="search-input" placeholder="Search by name, desktop,..."></span>
	</div>
</nav>

<!-- Row -->
<div class="row">
	<!-- results section -->
	<section id="results-container" class="cards text-center">
		<!-- search results appear here -->
	</section>
</div>

<!-- Row -->
<div class="row narrow">
	<section class="text-center">
		<h3>Freedom to Choose</h3>
		<p>There is a virtually endless number of Free and Open Source Software-based operating system, each with its own philosophy and purpose, look and feel, and out-of-the-box experience. This site distills the hundreds available into a curated selection, ranging from the beginner-friendly to the super technical.</p>
		<a class="button" href="{{ site.baseurl }}/about">Read More »</a>
	</section>
</div>

<!-- Row -->
<div class="row wide">
	<section>
		<p class="footnote text-center">These cards are shuffled when the page refreshes.</p>
		<!-- distro list -->
		<div id="distro-list" class="cards">
		{% for post in site.posts %}
			<a href="{{ site.baseurl }}{{ post.url }}" class="card">
				<img src="{{ site.baseurl }}{{ site.dirs.logos }}{{ post.logo }}.svg">
				<div class="card-text">
					<span>{{ post.title }}</span>
					<small class="category {{ post.category }}">{{ post.category }}</small>
					<small class="read-more">Read more »</small>
				</div>
			</a>
		{% endfor %}
		</div>
		<!-- Shuffle list -->
		<script type="text/javascript">
		// For those who may say "This is biased!"
		var list = document.getElementById('distro-list');
		for (var i = list.children.length; i >= 0; i--) {list.appendChild(list.children[Math.random() * i | 0]);}
		</script>
	</section>
</div>
<!-- Page Edit -->
<div class="footnote text-center"><i class="fas fa-exclamation-triangle"></i> Not seeing your favourite distribution? Contribute to the list <a href="{{ site.github.repo }}">here</a>.</div>

<!-- Javascript -->
<script type="text/javascript">
	// search function
	window.simpleJekyllSearch = new SimpleJekyllSearch({
		searchInput: document.getElementById('search-input'),
		resultsContainer: document.getElementById('results-container'),
		json: '/search.json',
		searchResultTemplate: '<a class="card small" href="{url}"><img src="{{ site.baseurl }}{{ site.dirs.logos }}{logo}.svg"><div class="card-text"><span>{title}</span><small class="category {category}">{category}</small><small class="read-more">Read more »</small></div></a>',
		noResultsText: '<div class="infobar">Sorry, no results for that search.</div>',
		fuzzy: false,
		exclude: ['Welcome']
	})
</script>