Initial version of reduced website.

pixelated · Jun 6, 2017 · 61ad179 · 61ad179
1 parent 72a9e82
commit 61ad179
Show file tree

Hide file tree

Showing 23 changed files with 391 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,26 @@
 # pixelated.github.io
+
 Pixelated Github organisation website
+
+
+## Run locally
+
+You can run the Jekyll site locally with the `run_site.sh` script. This requires Jekyll.
+
+    gem install jekyll
+    ./run_site.sh
+
+By default the site is available at [http://localhost:4000](http://localhost:4000)
+
+
+## Publish the website
+
+Simply push the changes to the origin on Github.
+
+
+## TODO
+
+* make flexbozes grow and shrink a bit depending on viewport width
+* maybe make left/right marging smaller on small screens
+* shrink logo on small screens
+* move welcome image below paragraph on small screens
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1,4 @@
+highlight: null
+exclude: [bin, Gemfile, Gemfile.lock, Makefile]
+permalink: pretty
+date_format: "%d %B %Y"
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Pixelated</title>
+    <meta name="description" content="Pixelated is a secure, open source email solution with encryption and decentralised hosting.">
+    <meta name="viewport" content="width=device-width">
+
+    <!-- Theme color on mobile -->
+    <meta name="theme-color" content="#2BA6CB">
+
+     <!-- OpenGraph Description for Facebook etc. -->
+    <meta property="og:title" content="Pixelated" />
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content="Pixelated is a secure, open source email solution with encryption and decentralised hosting." />
+    <meta property="og:url" content="https://pixelated-project.org/" />
+    <meta property="og:image" img src="/assets/images/fb_marca.png" />
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="/assets/stylesheets/styles.css" type="text/css">
+
+  </head>
+
+  <body>
+
+    <div class="wrapper">
+      {{ content }}
+    </div>
+
+  </body>
+
+</html>
diff --git a/_sass/_fonts.scss b/_sass/_fonts.scss
@@ -0,0 +1,27 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local("Open Sans"), local("OpenSans"), url("/assets/fonts/OpenSans-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local("Open Sans Italic"), local("OpenSans-Italic"), url("/assets/fonts/OpenSans-Italic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("/assets/fonts/OpenSans-Semibold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/assets/fonts/OpenSans-Bold.ttf") format("truetype");
+}
diff --git a/_sass/_main.scss b/_sass/_main.scss
@@ -0,0 +1,119 @@
+
+$color-orange: #FF9C00;
+$color-orange-medium-dark: #F6A40A;
+$color-orange-dark: #FF7902;
+$color-orange-dark-transparent: rgba($color-orange-dark, 0.4);
+
+$color-turquoise: #2BA6CB;
+$color-turquoise-dark: #178CA6;
+$color-turquoise-dark-transparent: rgba($color-turquoise-dark, 0.9);
+
+
+/* general styles */
+
+body {
+  margin: 0;
+  color: #333;
+  font-family: "Open Sans","Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+}
+
+
+h2 {
+  margin-top: 1.5em;
+}
+
+a {
+  color: $color-orange;
+  text-decoration: none;
+  font-weight: bolder;
+
+  &:hover,
+  &:focus {
+    color: $color-orange-dark;
+  }
+}
+
+
+/* bands for background across viewport */
+
+.header-band, .features-band {
+  background: url(../images/hive-bg.png) repeat;
+}
+
+.logo-band, .main-band, .status-band {
+  background: white;
+}
+
+.faq-band {
+  background: #DDD;
+}
+
+
+/* content divs that have a maximum width */
+
+@mixin content-div {
+  max-width: 900px;
+  margin: 0 auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+
+header {
+  @include content-div;
+  min-height: 40px;
+}
+
+section.logo {
+  @include content-div;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+section.features {
+  @include content-div;
+  padding-top: 120px;
+  padding-bottom: 15px;
+}
+
+main {
+  @include content-div;
+  padding-top: 2em;
+  padding-bottom: 2em;
+}
+
+section.faq, section.status {
+  @include content-div;
+  padding-top: 0.2em;
+  padding-bottom: 2em;
+}
+
+/* features section with flex boxes */
+
+section.features {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+section.features > div {
+  flex: 1 1 auto;
+  max-width: 260px;
+  margin: 0 40px 15px 0;
+
+  color: white;
+  font-weight: 600;
+}
+
+section.features > div > h2 {
+  margin-top: 0;
+}
+
+
+/* specific formatting */
+
+.welcome-img {
+  float: right;
+  margin-top: 1em;
+  margin-left: 1em;
+}
+
diff --git a/assets/fonts/OpenSans-Bold.ttf b/assets/fonts/OpenSans-Bold.ttf
diff --git a/assets/fonts/OpenSans-BoldItalic.ttf b/assets/fonts/OpenSans-BoldItalic.ttf
diff --git a/assets/fonts/OpenSans-ExtraBold.ttf b/assets/fonts/OpenSans-ExtraBold.ttf
diff --git a/assets/fonts/OpenSans-ExtraBoldItalic.ttf b/assets/fonts/OpenSans-ExtraBoldItalic.ttf
diff --git a/assets/fonts/OpenSans-Italic.ttf b/assets/fonts/OpenSans-Italic.ttf
diff --git a/assets/fonts/OpenSans-Light.ttf b/assets/fonts/OpenSans-Light.ttf
diff --git a/assets/fonts/OpenSans-LightItalic.ttf b/assets/fonts/OpenSans-LightItalic.ttf
diff --git a/assets/fonts/OpenSans-Regular.ttf b/assets/fonts/OpenSans-Regular.ttf
diff --git a/assets/fonts/OpenSans-Semibold.ttf b/assets/fonts/OpenSans-Semibold.ttf
diff --git a/assets/fonts/OpenSans-SemiboldItalic.ttf b/assets/fonts/OpenSans-SemiboldItalic.ttf
diff --git a/assets/images/hive-bg.png b/assets/images/hive-bg.png
diff --git a/assets/images/hive.svg b/assets/images/hive.svg
diff --git a/assets/images/logo-orange.svg b/assets/images/logo-orange.svg
diff --git a/assets/images/pixelated-logo.svg b/assets/images/pixelated-logo.svg
diff --git a/assets/images/welcome.svg b/assets/images/welcome.svg
diff --git a/assets/stylesheets/styles.scss b/assets/stylesheets/styles.scss
@@ -0,0 +1,5 @@
+---
+---
+
+@import "fonts";
+@import "main";
diff --git a/favicon.png b/favicon.png