{{ $.Scratch.Set "NoCustomCSS" true }}
  {{ partial "header.tmpl" . }}
  <meta name="description" content="µhttpd is a self-contained instant micro web server. You can use it to share files from your local computer with others.">
  <meta name="author" content="Maximilian Möhring">
<style>
  {{readFile "static/font.css" | safeCSS}}
	/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
	html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}a:active,a:hover{outline:0}strong{font-weight:700}img{border:0}code{font-family:monospace,monospace}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box}.column{width:100%;float:left;box-sizing:border-box}.demos{position:relative}.demo{position: relative;max-width: 100%;top:20px;/*margin: 3rem auto -12rem*/}
	@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}.column{margin-left:4%}.column:first-child{margin-left:0}.one-third.column{width:30.6666666667%}.one-half.column{width:48%}}html{font-size:62.5%}body{font-size:1.5em;line-height:1.6;font-weight:400;color:#222}h2,h3,h4{margin-top:0;margin-bottom:2rem;font-weight:300}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}

@media (min-width:550px){h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}}p{margin-top:0}a{color:#1EAEDB}a:hover{color:#0FA0CE}.button{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}.button:focus,.button:hover{color:#333;border-color:#888;outline:0}.button.button-primary{color:#FFF;background-color:#33C3F0;border-color:#33C3F0}.button.button-primary:focus,.button.button-primary:hover{color:#FFF;background-color:#1EAEDB;border-color:#1EAEDB}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px}.button{margin-bottom:1rem}p{margin-bottom:2.5rem}.u-max-full-width{max-width:100%;box-sizing:border-box}.container:after,.row:after{content:"";display:table;clear:both}.button{border-radius:100px}.section{padding:8rem 0 7rem;text-align:center}.section-description,.section-heading{margin-bottom:1.2rem}.values{background:#179089;background-image:linear-gradient(to right,#179089,#169f81);color:#fff;padding-bottom:5rem}.value-heading{margin-bottom:.3rem}.value-description{opacity:.8;font-weight:300}.installation{border-bottom:1px solid #ddd}.categories{background:#179089;color:#fff}.categories .section-description{margin-bottom:4rem}@media (min-width:550px){.section{padding:12rem 0 11rem}.hero{padding-bottom:12rem;text-align:left;height:165px}.hero-heading{font-size:2.4rem}.demo{top:-20px}}@media (min-width:750px){.hero{height:190px}.hero-heading{font-size:2.6rem}.section{padding:14rem 0 15rem}.hero{padding:16rem 0 14rem}.section-description{max-width:60%;margin-left:auto;margin-right:auto}.categories{padding:15rem 0 8rem}.demo{top:-120px}}@media (min-width:1000px){.section{padding:20rem 0 19rem}.hero{padding:22rem 0}.hero-heading{font-size:3rem}.categories{background-image:linear-gradient(to right,#179089,#169f81)}.demo{top:-120px;transform:skew(-10deg)}}</style>
  <style>
.navigation {
  border-bottom: 0px solid;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  box-shadow: 0 -3px 10px rgba(0,0,0,.23);
}
nav.primary{
  display: table;
  margin: 0 auto;
}

nav.primary ul, nav.primary ul li {
  margin: 0px;
}

nav.primary select {
  width:  100%;
  height: 40px;
  /*
  margin: 21px 0;
  */
}

nav.primary ul li {
  display: inline;
  /*position: relative;*/
}

nav.primary ul li a {
  display: inline-block;
  line-height: 49px;
  padding:  0 14px;
	  /*
  color: white;
  text-transform: uppercase;
*/
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.06em;
  background: ##999999;
}

nav.primary ul li a:hover {
  background-color:#33C3F0;
  color: white;
  cursor: pointer;
}
  </style>
  {{ partial "favicon.tmpl" .}} 

</head>

<body>
<!--Navigation-->
<div class="band navigation">
    <nav class="container primary">
        <div class="sixteen columns">
            <ul>
		<li><a href=".." title="start page">home</a></li>
                <li><a href="https://www.complicissimus.de/" title="my blog">my blog</a></li>
                <li><a href="/projects/" title="side projects">projects</a></li>
                <li><a href="https://www.complicissimus.de/about/#kontakt" title="contact">contact</a></li>
	    </ul>
        </div>
    </nav>
</div>
  <div class="section hero">
    <div class="container">
      <div id="top" class="row">
        <div class="one-half column">
		<h4 class="hero-heading"><strong>µhttpd</strong> is a self-contained instant micro web server.<br>
	  	Use it to share files from your local computer with others.</h4>
          <a class="button button-primary" href="https://downloads.iamfabulous.de/uhttpd/">Download uhttpd</a>
        </div>
        <div class="one-half column demos">
          <!--img class="u-max-full-width" src="/static/demo.png"-->
	  <img class="demo" src="{{$.Site.BaseURL}}img/demo.png">
        </div>
      </div>
    </div>
  </div>

  <div class="section values">
    <div class="container">
      <div id="description" class="row">
        <div class="one-third column value">
          <h2 class="value-heading">It's Simple</h2>
	  <p class="value-description">Run <strong>µhttpd</strong> and it serves the directory content via web server, so you can access it with your web browser.</p>
        </div>
        <div class="one-third column value">
          <h2 class="value-heading">Stream Media</h2>
	  <p class="value-description">Access e.g. your music from your local net on every device. Just open a web browser and point it to a running <strong>µhttpd</strong>.</p>
        </div>
        <div class="one-third column value">
          <h2 class="value-heading">Uploads</h2>
	  <p class="value-description"><strong>µhttpd</strong> is able to recieve uploads from your browser. The target directory is fully customizable.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="section installation">
    <div class="container">
      <h3 id="installation" class="section-heading">Installation</h3>
      <p class="section-description">The installation of <strong>µhttpd</strong> is very straightforward. Download the precompiled binary and run it.</p>
	<p class="section-description">To compile from source you need a working Go environment (with cgo) and flex installed. Clone the repo and run <code>make</code></p>
	<br>
      <a class="button" href="https://git.iamfabulous.de/uhttpd">View source code</a>
    </div>
  </div>

  <div class="section categories">
    <div class="container">
      <h3 id="usage" class="section-heading">Usage</h3>
      <p class="section-description">You can modify <strong>µhttpd</strong> with some simple command line flags. Run '<strong>µhttpd</strong> -h' for more help. </p>
      <p class="section-description"><strong>-dir:</strong> The directory to serve. Defaults to the working directory.<br>
	      <strong>-ip:</strong> The ip <strong>µhttpd</strong> binds to. If not given, it binds to all interfaces µhttpd finds.<br>
      <strong>-port:</strong> The port µhttpd will listen on.<br>
      <strong>-quiet:</strong> When given µhttpd will not log the access. Only error messages will be issued.<br>
      <strong>-disallow-upload:</strong> When given µhttpd does not allow to upload files.<br>
      <strong>-upload-dir:</strong> Specify the directory to save uploaded files. Defaults to the working directory.</p>
      <p class="section-description">To upload open <strong>/upload</strong> with your browser.</p>
    </div>
  </div>

  <div class="section">
    <div class="container">
      <h3 id="credits" class="section-heading">Created By</h3>
	    <p class="section-description">Written by Maximilian Möhring.</p>
	    <a class="button button-primaryy" href="{{$.Site.BaseURL}}">Read Here More</a>
    </div>
  </div>
  {{partial "footer.tmpl"}}