Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
107 lines (107 sloc) 4.51 KB
<!DOCTYPE html>
<html>
<head>
<title>Wilmot CSS</title>
<link rel="stylesheet" href="wilmot.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<nav class="navbar">
<div class="navbar-flex">
<div class="title">
<a href="/index.html">Wilmot</a>
</div>
<div class="mobileMenuButton" onclick="toggleMobileMenu()">More</div>
<div id="mobile-menu" class="mobileMenu">
<ul class="links">
<li class="link"><a href="/index.html">Home</a></li>
<li class="link"><a href="/docs.html">Docs</a></li>
<li class="link"><a href="https://github.com/alicerunsonfedora/wilmotcss">GitHub</a></li>
</ul>
</div>
</div>
</nav>
<body>
<div class="jumbotron">
<h1 class="title">Wilmot</h1>
<p class="content">Wilmot CSS is a sytlesheet for websites and web apps to make simple websites or "live" academic papers stand out. Its design is inspired by the UI redesign from Riot.im and is intended to be easy to use and implement.</p>
<div class="buttons">
<a class="button" href="#try-now">Try now</a>
<a class="button" href="./docs.html">Read the docs</a>
<a class="button" href="https://github.com/alicerunsonfedora/wilmotcss">Download source</a>
</div>
</div>
<article class="paper">
<a name="offer">
<h2>What Wilmot offers</h2>
</a>
<section>
<p>
Wilmot.css offers a no-frills stylesheet that includes responsive design that works on mobile devices. Features include:
</p>
<p>
<ul>
<li>Navigation bar</li>
<li>Landing page jumbotron</li>
<li>Dark mode (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">detected by your browser</a>)</li>
<li>Mobile menus</li>
<li>Content-focused paper classes</li>
</ul>
</p>
</section>
<a name="offer">
<h2>Ideal use cases</h2>
</a>
<section>
<p>
While Wilmot is open-source and can be extended with further styling, it is best used natively for these types of sites:
</p>
<p>
<ul>
<li>Basic websites and blogs</li>
<li>Academic papers or web documents</li>
<li>Documentation pages</li>
<li>Presentations</li>
</ul>
</p>
</section>
<hr/>
<a name="try-now">
<h2>Try now</h2>
</a>
<section>
<p>
In your HTML document, add Wilmot.css to your <code>head</code> element and the appropriate JS to your <code>body</code>:
<pre>
<code>
&lt;head>
<br/>
&nbsp; ...
<br/>
&nbsp;&lt;link rel="stylesheet" href="https://wilmotcss.marquiskurt.net/wilmot.css"/>
<br/>
&lt;/head>
</code>
<br/>
<code>
&lt;body>
<br/>
&nbsp; ...
<br/>
&nbsp;&lt;script src="https://wilmotcss.marquiskurt.net/wilmot.js">&lt;/script>
<br/>
&lt;body>
</code>
</pre>
</p>
<div class = "buttons fullwidth">
<a class = "button fullwidth" href="https://github.com/alicerunsonfedora/wilmotcss/blob/master/index.html">Look at example</a>
<a class = "button fullwidth" href="/docs.html">Read the docs</a>
</div>
</section>
</article>
<script src="wilmot.js"></script>
</body>
<footer>
<p>&copy; 2019 Marquis Kurt. Licensed under MIT.</p>
</footer>
</html>
You can’t perform that action at this time.