Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Light, simple and responsive website update #180

Open
wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

Light, simple and responsive website update #180

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56d066a
Light, simple and responsive website update
pajadam Jul 7, 2018
3f0c11c
Fix wrong padding, stray style tag and firefox github buttons rendering
pajadam Jul 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
296 changes: 251 additions & 45 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,73 +1,279 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>OpenSnitch</title>
<title>OpenSnitch - Linux application firewall</title>
<meta name="description" content="OpenSnitch is a GNU/Linux port of the Little Snitch application firewall.">

<!-- TODO: Consider serving favicon.ico from root of project domain -->
<link rel="icon" href="https://www.evilsocket.net/images/favicon.ico">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/3.3/examples/cover/cover.css">
<!--
TODO: Consider self-hosting of Google Fonts (https://google-webfonts-helper.herokuapp.com/fonts).
Make sure that you're using `font-display: swap;` at `@font-face {...}`.
Optionally you can preload fonts before styles are even parsed (https://www.keycdn.com/support/preload-directive/)
-->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet">

<!-- TODO: Consider removing Google Analytics or load it defferred from external file -->
<script defer>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
ga('create', 'UA-98436807-1', 'auto');
ga('send', 'pageview');
</script>
</head>

<body>

<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<nav>
<ul class="nav masthead-nav">
<li><a href="https://github.com/evilsocket/opensnitch">Download</a></li>
<li><a href="https://github.com/evilsocket/opensnitch/issues">Bug Tracker</a></li>
</ul>
</nav>
</div>
</div>

<div class="inner cover">
<h1 class="cover-heading">OpenSnitch</h1>
<p class="lead">OpenSnitch is a GNU/Linux port of the Little Snitch application firewall.</p>
<p class="lead" align="center">
<img src="https://raw.githubusercontent.com/evilsocket/opensnitch/master/screenshot.png" alt="OpenSnitch"/>
</p>
<p class="lead" align="center">
<iframe src="https://ghbtns.com/github-btn.html?user=evilsocket&repo=opensnitch&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
</p>
<p class="lead">
<a href="https://github.com/evilsocket/opensnitch" class="btn btn-lg btn-default">Learn more</a>
</p>
</div>
<main>

<div class="mastfoot">
<div class="inner">
<p>OpenSnitch was made <span style="color:red">♥</span> by <a href="https://twitter.com/evilsocket" target="_blank" >Simone 'evilsocket' Margaritelli</a></p>
<div class="aligner">

<div class="item top">
<nav>
<div class="navbar">
<a href="/" class="item" title="OpenSnitch - Linux application firewall">OpenSnitch</a>
<div class="menu">
<a class="github-button" href="https://github.com/evilsocket/opensnitch/issues" data-icon="octicon-issue-opened" data-size="large"
aria-label="Issues OpenSnitch on GitHub">Bug tracker</a>
<a class="github-button" href="https://github.com/evilsocket/opensnitch" data-size="large" aria-label="OpenSnitch on GitHub">GitHub</a>
</div>
</div>
</nav>
</div>

<div class="item">
<div class="content">
<header>
<img src="https://raw.githubusercontent.com/evilsocket/opensnitch/master/ui/opensnitch/res/icon.png" alt="OpenSnitch - Logo"
class="logo">
<h1>
OpenSnitch
</h1>
</header>

<h2>
OpenSnitch is a GNU/Linux port of the Little Snitch application firewall.
</h2>

<a href="https://raw.githubusercontent.com/evilsocket/opensnitch/master/screenshot.png" title="OpenSnitch - Screenshot" class="screen"
target="_blank">
<!-- TODO: Screenshot should be smaller in dimensions and size (`optipng -o7 -strip all screenshot.png`) -->
<img src="https://raw.githubusercontent.com/evilsocket/opensnitch/master/screenshot.png" alt="OpenSnitch - Screenshot" class="screen">
</a>

<footer>
<div class="links">
<a class="github-button" href="https://github.com/evilsocket/opensnitch/archive/master.zip" data-icon="octicon-cloud-download"
data-size="large" aria-label="Download evilsocket/opensnitch on GitHub">
Download
</a>
<a class="github-button" href="https://github.com/evilsocket/opensnitch" data-icon="octicon-star" data-size="large" data-show-count="true"
aria-label="Star evilsocket/opensnitch on GitHub">
Star
</a>
<a class="github-button" href="https://github.com/evilsocket/opensnitch" data-size="large" aria-label="Learn more about OpenSnitch on GitHub">
Learn more
</a>
</div>
</footer>
</div>
</div>

<div class="item bottom">
<footer>
<div class="footer">
<span class="product">OpenSnitch</span> was made
<span class="love">♥</span> by
<a href="https://twitter.com/evilsocket" target="_blank"> Simone&nbsp;'evilsocket'&nbsp;Margaritelli</a>
</div>
</footer>
</div>

</div>

</div>
</main>

<!-- Github buttons created using: https://github.com/ntkme/github-buttons -->
<script async defer src="https://buttons.github.io/buttons.js"></script>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
<style>
/* TODO: Ideally move CSS to separate file and minify it (Jekyll would be nice) */

ga('create', 'UA-98436807-1', 'auto');
ga('send', 'pageview');
</script>
/* Some basic styling */

body {
color: #eaeaea;
margin: 0;
font-family: 'Noto Sans', sans-serif;
background: #232526;
background: -webkit-linear-gradient(to right, #414345, #232526);
background: linear-gradient(to right, #414345, #232526);
}

a,
a:link,
a:visited {
color: #ffffff;
transition: .3s;
text-decoration: none;
}

a:hover {
color: #ffffff;
text-decoration: underline;
}

/* Vertical aligner */

.aligner {
display: flex;
flex-wrap: wrap;
min-height: 100vh;
align-items: center;
justify-content: center;
}

.aligner .top {
align-self: flex-start;
}

.aligner>.item {
width: 100%;
margin: 0 auto;
z-index: 20;
text-align: center;
}

.aligner .bottom {
align-self: flex-end;
}

/* Navbar */

.navbar {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
max-width: 1000px;
justify-content: space-between;
}

.navbar .menu {
display: flex;
}

.navbar .menu>span,
.navbar .menu>iframe {
padding: 6px;
}

.navbar>.item {
display: block;
padding: 12px 16px;
font-weight: bold;
}

.navbar .menu>.github-button {
padding: 12px 16px;
}

/* Content styling */

.content {
margin: 0 auto;
padding: 64px 16px;
max-width: 1000px;
}

.content h1 {
margin-bottom: .2em;
}

.content h2 {
margin-top: .2em;
font-weight: normal;
}

.content .logo {
width: 25%;
margin: -32px;
filter: drop-shadow(0px 0px 8px #ffffff) invert(100%);
min-width: 150px;
max-width: 200px;
}

.content a.screen {
width: 85%;
margin: 0 auto;
border: 4px #293d50 solid;
display: block;
border-radius: 8px;
}

.content img.screen {
width: 100%;
display: block;
transition: .3s;
border-radius: 4px;
}

.content a.screen:hover {
border: 4px #435f79 solid;
}

.content a.screen:hover>img {
filter: contrast(110%)
}

/* Links section */

.links {
margin: 16px 0;
}

.links>span,
.links>iframe {
margin: 2px;
display: inline-block;
}

.links .github-button {
margin: 4px;
display: inline-block;
padding: 8px 16px;
font-weight: bold;
border-radius: 4px;
background-color: #315c85;
}

.links .github-button:hover {
text-decoration: none;
background-color: #1c63a5;
}

/* Footer styling */

.footer {
color: #e0e0e0;
padding: 16px 8px;
}

.footer .product {
color: #ffffff;
}

.footer .love {
color: #ff0000;
}
</style>
</body>

</html>