New website design

Readme.md

@@ -1,13 +1,14 @@
 # Hi! We warmly welcome you to the main repository of the Open Source things initiative
-## This is an open hardware project focused on the design and development of open hardware products.
-Currently it is a research and development project, that aims to share and publish source code, hardware electronics, CAD models and materials to manufacture, but also improve open designs for commercial products from consumer electronics to industrial machines.
-### Why open hardware appliances and industrial machines
+### Why open hardware appliances and industrial machines are important
 * Open access to the knowledge and DNA of goods, services and products, allow us to enjoy social wealth and share responsibility.
 * Having a commons oriented economy where the knowhow is shared as a fundamental right to act for the common good, prosperity and development is a key element in sustainable development. Open hardware empowers consumers, and producers, but also impact makers, local economies and communities.
 * Moreover the free access to the design of things, facilitates their repair, as well as the systematic, organized and collaborative improvement of such design coming from users all over the world.
 * Free/libre software and open source practices has empowered tremendously many people, the same can happen with hardware. It is happening more and more.
+### How do we make it possible?
+
 ### Get involved
 ### [Read the contributing guidelines](https://github.com/goscommons/goscommons.github.io/blob/master/CONTRIBUTING.md)
+### [Read our code of conduct](https://github.com/goscommons/goscommons.github.io/blob/master/CODE_OF_CONDUCT.md)
 ![The open design workflow](_assets/images/workflow.png)Become a contributor and find a role that matches your capabilities.
 
 ### Want to know more about the project and where we are?

_includes/head.html

@@ -3,9 +3,91 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   {%- seo -%}
-  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <!-- <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}"> -->
   {%- feed_meta -%}
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
+	<style type="text/css">
+	.hidden.menu {
+		display: none;
+	}
+	.masthead.segment {
+		min-height: 500px;
+		padding: 1em 0em;
+	}
+	.masthead .logo.item img {
+		margin-right: 1em;
+	}
+	.masthead .ui.menu .ui.button {
+		margin-left: 0.5em;
+	}
+	.masthead h1.ui.header {
+		margin-top: 3em;
+		margin-bottom: 0em;
+		font-size: 4em;
+		font-weight: normal;
+	}
+	.masthead h2 {
+		font-size: 1.7em;
+		font-weight: normal;
+	}
+	.ui.vertical.stripe {
+		padding: 8em 0em;
+	}
+	.ui.vertical.stripe h3 {
+		font-size: 2em;
+	}
+	.ui.vertical.stripe .button + h3,
+	.ui.vertical.stripe p + h3 {
+		margin-top: 3em;
+	}
+	.ui.vertical.stripe .floated.image {
+		clear: both;
+	}
+	.ui.vertical.stripe p {
+		font-size: 1.33em;
+	}
+	.ui.vertical.stripe .horizontal.divider {
+		margin: 3em 0em;
+	}
+	.quote.stripe.segment {
+		padding: 0em;
+	}
+	.quote.stripe.segment .grid .column {
+		padding-top: 5em;
+		padding-bottom: 5em;
+	}
+	.footer.segment {
+		padding: 5em 0em;
+	}
+	.secondary.pointing.menu .toc.item {
+		display: none;
+	}
+	@media only screen and (max-width: 700px) {
+		.ui.fixed.menu {
+			display: none !important;
+		}
+		.secondary.pointing.menu .item,
+		.secondary.pointing.menu .menu {
+			display: none;
+		}
+		.secondary.pointing.menu .toc.item {
+			display: block;
+		}
+		.masthead.segment {
+			min-height: 350px;
+		}
+		.masthead h1.ui.header {
+			font-size: 2em;
+			margin-top: 1.5em;
+		}
+		.masthead h2 {
+			margin-top: 0.5em;
+			font-size: 1.5em;
+		}
+	}
+
+	</style>
 </head>

_includes/header.html

@@ -1,6 +1,48 @@
-<header class="site-header" role="banner">
+<header class="site-header" role="banner" >
+	<div class="trigger">
+<div class="ui large inverted pointing top fixed menu">
+	<div class="ui container">
+		<a class="active item">Home</a>
+		<a class="item">Work</a>
+		<a class="item">Company</a>
+		<a class="item">Careers</a>
+		<!-- <div class="right menu">
+			<div class="item">
+				<a class="ui button">Log in</a>
+			</div>
+			<div class="item">
+				<a class="ui primary button">Sign Up</a>
+			</div>
+		</div> -->
+	</div>
 
-  <div class="wrapper">
+		{%- for path in page_paths -%}
+			{%- assign my_page = site.pages | where: "path", path | first -%}
+			{%- if my_page.title -%}
+			<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+			{%- endif -%}
+		{% endfor -%}
+	</div>
+	</div>
+
+	<!-- <div class="ui container">
+		<div class="ui large secondary inverted pointing menu">
+			<a class="toc item">
+				<i class="sidebar icon"></i>
+			</a>
+			<a class="active item">Home</a>
+			<a class="item">Work</a>
+			<a class="item">Company</a>
+			<a class="item">Careers</a>
+			<div class="right item">
+				<a class="ui inverted button">Log in</a>
+				<a class="ui inverted button">Sign Up</a>
+			</div>
+		</div>
+	</div> -->
+
+
+  <!-- <div class="wrapper">
     {%- assign default_paths = site.pages | map: "path" -%}
     {%- assign page_paths = site.header_pages | default: default_paths -%}
     <a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
@@ -28,5 +70,5 @@
         </div>
       </nav>
     {%- endif -%}
-  </div>
+  </div> -->
 </header>

_layout/default.html

@@ -2,19 +2,18 @@
 	<html>
 		<head>
 			<title>{{ page.title }}</title>
-			<!-- link to main stylesheet -->
-			<link rel="stylesheet" type="text/css" href="/css/main.css">
 		</head>
-		<body>
-			<nav>
+			<!-- link to main stylesheet -->
+			<!-- Minima navbar -->
+			<!-- <nav>
 	    		<ul>
 	        		<li><a href="/">Home</a></li>
 		        	<li><a href="/about">About</a></li>
 	        		<li><a href="/cv">CV</a></li>
 	        		<li><a href="/blog">Blog</a></li>
 	    		</ul>
-			</nav>
-			<div class="container">
+			</nav> -->
+			<div class="">
 
 			{{ content }}
 

_sass/minima.scss

@@ -2,7 +2,7 @@
 
 // Define defaults for each variable.
 
-$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$base-font-family:  Roboto condensed,-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 $base-font-size:   16px !default;
 $base-font-weight: 400 !default;
 $small-font-size:  $base-font-size * 0.875 !default;

_sass/minima/_layout.scss

@@ -1,3 +1,14 @@
+/* Customized CSS by Jose Carlos Urra Llanusa*/
+
+.head-wrapper {
+	background-color: #fff4c6;
+}
+.logo{
+	padding:15px 20px 15px 20px;
+}
+
+
+
 /**
  * Site header
  */

index.html

@@ -2,7 +2,106 @@
 layout: default
 title: Home
 ---
-<div class="blurb">
-	<h1>Welcome to the os appliances project</h1>
-	<p> We are rebuilding the website, but stay in touch ti will come soon<p/>
-	<iframe width="100%" height="420px" src="https://www.youtube.com/embed/a0ZlbdXBNc0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+<div class="">
+	<div class="pusher">
+		<div class="ui inverted vertical masthead center aligned segment">
+
+			<div class="ui text container">
+				<!-- <h1 class="ui inverted header">
+				GO!Commons
+			</h1> -->
+			<div class="" style="height:150px;">
+			</div>
+			<div class="ui massive fluid image">
+				<img src="_assets/images/logo.png" alt="">
+			</div>
+			<h2>Do whatever you want when you want to.</h2>
+			<div class="ui huge primary button">Get Started <i class="right arrow icon"></i></div>
+		</div>
+
+	</div>
+
+	<div class="ui vertical stripe segment">
+		<div class="ui middle aligned stackable grid container">
+			<div class="row">
+				<div class="eight wide column">
+					<h3 class="ui header">We Help Companies and Companions</h3>
+					<p>We can give your company superpowers to do things that they never thought possible. Let us delight your customers and empower your needs...through pure data analytics.</p>
+					<h3 class="ui header">We Make Bananas That Can Dance</h3>
+					<p>Yes that's right, you thought it was the stuff of dreams, but even bananas can be bioengineered.</p>
+				</div>
+				<div class="six wide right floated column">
+					<img src="assets/images/wireframe/white-image.png" class="ui large bordered rounded image">
+				</div>
+			</div>
+			<div class="row">
+				<div class="center aligned column">
+					<a class="ui huge button">Check Them Out</a>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="ui vertical stripe quote segment">
+		<div class="ui equal width stackable internally celled grid">
+			<div class="center aligned row">
+				<div class="column">
+					<h3>"What a Company"</h3>
+					<p>That is what they all say about us</p>
+				</div>
+				<div class="column">
+					<h3>"I shouldn't have gone with their competitor."</h3>
+					<p>
+						<img src="assets/images/avatar/nan.jpg" class="ui avatar image"> <b>Nan</b> Chief Fun Officer Acme Toys
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="ui vertical stripe segment">
+		<div class="ui text container">
+			<h3 class="ui header">Breaking The Grid, Grabs Your Attention</h3>
+			<p>Instead of focusing on content creation and hard work, we have learned how to master the art of doing nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic and worth your attention.</p>
+			<a class="ui large button">Read More</a>
+			<h4 class="ui horizontal header divider">
+				<a href="#">Case Studies</a>
+			</h4>
+			<h3 class="ui header">Did We Tell You About Our Bananas?</h3>
+			<p>Yes I know you probably disregarded the earlier boasts as non-sequitur filler content, but its really true. It took years of gene splicing and combinatory DNA research, but our bananas can really dance.</p>
+			<a class="ui large button">I'm Still Quite Interested</a>
+		</div>
+	</div>
+
+	<div class="ui inverted vertical footer segment">
+		<div class="ui container">
+			<div class="ui stackable inverted divided equal height stackable grid">
+				<div class="three wide column">
+					<h4 class="ui inverted header">About</h4>
+					<div class="ui inverted link list">
+						<a href="#" class="item">Sitemap</a>
+						<a href="#" class="item">Contact Us</a>
+						<a href="#" class="item">Religious Ceremonies</a>
+						<a href="#" class="item">Gazebo Plans</a>
+					</div>
+				</div>
+				<div class="three wide column">
+					<h4 class="ui inverted header">Services</h4>
+					<div class="ui inverted link list">
+						<a href="#" class="item">Banana Pre-Order</a>
+						<a href="#" class="item">DNA FAQ</a>
+						<a href="#" class="item">How To Access</a>
+						<a href="#" class="item">Favorite X-Men</a>
+					</div>
+				</div>
+				<div class="seven wide column">
+					<h4 class="ui inverted header">Footer Header</h4>
+					<p>Extra space for a call to action inside the footer that could help re-engage users.</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js">
+
+</script>