Skip to content

Commit

Permalink
Header first commit. Basic Layout
Browse files Browse the repository at this point in the history
  • Loading branch information
pablo-rodriguez-jd committed Aug 19, 2019
1 parent 1e11517 commit 353e73f
Show file tree
Hide file tree
Showing 12 changed files with 233 additions and 62 deletions.
Binary file added .DS_Store
Binary file not shown.
2 changes: 2 additions & 0 deletions Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ source "https://rubygems.org"
gem "jekyll", "~> 3.8.6"
gem 'neat'

gem 'jekyll-font-awesome-sass'

# This is the default theme for new Jekyll sites. You may change this to anything you like.
gem "minima", "~> 2.0"

Expand Down
8 changes: 8 additions & 0 deletions Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ GEM
http_parser.rb (~> 0.6.0)
eventmachine (1.2.7)
ffi (1.11.1)
font-awesome-sass (5.9.0)
sassc (>= 1.11)
forwardable-extended (2.6.0)
http_parser.rb (0.6.0)
i18n (0.9.5)
Expand All @@ -29,6 +31,9 @@ GEM
safe_yaml (~> 1.0)
jekyll-feed (0.12.1)
jekyll (>= 3.7, < 5.0)
jekyll-font-awesome-sass (0.1.1)
font-awesome-sass (>= 4)
jekyll (>= 2.5, < 4.0)
jekyll-sass-converter (1.5.2)
sass (~> 3.4)
jekyll-seo-tag (2.6.1)
Expand Down Expand Up @@ -62,6 +67,8 @@ GEM
sass-listen (4.0.0)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
sassc (2.1.0)
ffi (~> 1.9)
thor (0.20.3)
thread_safe (0.3.6)
tzinfo (1.2.5)
Expand All @@ -76,6 +83,7 @@ PLATFORMS
DEPENDENCIES
jekyll (~> 3.8.6)
jekyll-feed (~> 0.6)
jekyll-font-awesome-sass
minima (~> 2.0)
neat
tzinfo (~> 1.2)
Expand Down
17 changes: 9 additions & 8 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,27 @@
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: Your awesome title
title: Solid Project - DEV
email: [email protected]
description: >- # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
baseurl: '' # the subpath of your site, e.g. /blog
url: '' # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jcamposv
github_username: jcamposv
github_username: jcamposv

# Build settings
markdown: kramdown
theme: minima
plugins:
- jekyll-feed

gems: [neat]

# Exclude from processing.
- jekyll-font-awesome-sass
- neat
font-awesome:
assets: true
# Exclude from processing.
# The following items will not be processed, by default. Create a custom list
# to override the default setting.
# exclude:
Expand Down
28 changes: 20 additions & 8 deletions _includes/head.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
<head>
<title>{{ site.title }}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!--[if lte IE 8]><script src="{{ "assets/js/ie/html5shiv.js" | relative_url }}"></script><![endif]-->
<link rel="stylesheet" href="{{ "assets/main.css" | relative_url }}" />
<!--[if lte IE 9]><link rel="stylesheet" href="{{ "assets/css/ie9.css" | relative_url }}" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="{{ "assets/css/ie8.css" | relative_url }}" /><![endif]-->
</head>
<title>{{ site.title }}</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<link
href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?" />

<link
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="{{ 'assets/main.css' | relative_url }}" />
</head>
82 changes: 54 additions & 28 deletions _includes/header.html
Original file line number Diff line number Diff line change
@@ -1,30 +1,56 @@
<!-- Wrapper -->
<div id="wrapper">

<!-- Header -->
<header id="header"{% if page.layout == "landing" %} class="alt style2"{% endif %}{% if page.layout == "home" %} class="alt"{% endif %}>
<a href="{{ "" | absolute_url }}/" class="logo"><strong>{{ site.title }}</strong> <span>{{ site.subtitle }}</span></a>
<nav>
<a href="#menu">Menu</a>
</nav>
</header>

<!-- Menu -->
<nav id="menu">
<ul class="links">
{% for page in site.pages %}
{% if page.layout == "home" %}
<li><a href="{{ "" | absolute_url }}/">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
{% for page in site.pages %}
{% if page.layout != "home" and page.nav-menu == true %}
<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
<header class="solid-header">
<div class="logo"><img src="/assets/img/solid-emblem.svg" /></div>
<nav>
<ul class="links">
<li>
<a href="#">Learn About Solid <i class="fas fa-angle-down"></i></a>
<ul class="sub-links">
<li><a href="#">What is Solid</a></li>
<li><a href="#">The Solid Roadmap</a></li>
<li><a href="#">Solid Fundamentals</a></li>
<li><a href="#">Solid Specification</a></li>
<li><a href="#">Solid Team</a></li>
</ul>
<ul class="actions vertical">
<li><a href="#" class="button special fit">Get Started</a></li>
<li><a href="#" class="button fit">Log In</a></li>
</li>
<li>
<a href="#">Build on Solid <i class="fas fa-angle-down"></i></a>
<ul class="sub-links">
<li><a href="#">Writing Solid Applications</a></li>
<li><a href="#">Building a Solid Server</a></li>
<li><a href="#">Running a Solid Server</a></li>
</ul>
</nav>
</li>
<li>
<a href="#">Use Solid <i class="fas fa-angle-down"></i></a>
<ul class="sub-links">
<li><a href="#">Get a Pod</a></li>
<li><a href="#">Use a Solid App</a></li>
<li><a href="#">Specification</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Press</a></li>
</ul>
</li>
<li>
<a href="#">Community <i class="fas fa-angle-down"></i></a>
<ul class="sub-links">
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Chat</a></li>
</ul>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="actions">
<li><i class="fas fa-search"></i></li>
<li>
<a href="#"><i class="fab fa-github"></i></a>
</li>
</ul>
</nav>
</header>
96 changes: 96 additions & 0 deletions _sass/layout/_header.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}

.solid-header {
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
width: 100%;
background: $brand-color;
color: #fff;
position: relative;
padding: 0 2em;
box-sizing: border-box;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.7);
.logo {
height: 60px;
width: 60px;
}

nav {
display: flex;
justify-content: flex-end;
align-items: center;
align-self: stretch;
width: 60%;
.links {
display: flex;
align-self: stretch;
align-items: center;
width: fit-content;
list-style: none;
margin: 0 2em 0 0;
& > li {
position: relative;
align-self: stretch;
align-items: center;
a {
display: flex;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #fff;
padding: 0 1em;
align-items: center;
justify-content: space-between;
transition: all 300ms ease;
height: 100%;
&:hover {
text-decoration: none;
opacity: 0.8;
}
i {
opacity: 0.6;
padding-left: 6px;
}
}

&:hover .sub-links {
transform: translateY(0);
opacity: 1;
z-index: 1;
}
.sub-links {
position: absolute;
background: $brand-color;
width: 100%;
right: 0;
opacity: 0;
transform: translateY(-100%);
z-index: 0;
transition: all 300ms ease-in-out;
& > li > a {
padding: 0.5em 1em;
}
}
}
}
.actions {
margin: 0;
list-style: none;
display: flex;
font-size: 2rem;
li {
a {
color: #fff;
}
padding: 0 0.4em;
}
}
}
}
35 changes: 17 additions & 18 deletions _sass/minima.scss
Original file line number Diff line number Diff line change
@@ -1,32 +1,33 @@
@charset "utf-8";
@import 'neat';


// 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-size: 16px !default;
$base-font-family: 'Lato', sans-serif;
$fa-font-path: 'fonts/font-awesome';

$base-font-size: 16px !default;
$base-font-weight: 400 !default;
$small-font-size: $base-font-size * 0.875 !default;
$small-font-size: $base-font-size * 0.875 !default;
$base-line-height: 1.5 !default;

$spacing-unit: 30px !default;
$spacing-unit: 30px !default;

$text-color: #111 !default;
$text-color: #111 !default;
$background-color: #fdfdfd !default;
$brand-color: #2a7ae2 !default;
$brand-color: #3f1ca0 !default;

$grey-color: #828282 !default;
$grey-color: #828282 !default;
$grey-color-light: lighten($grey-color, 40%) !default;
$grey-color-dark: darken($grey-color, 25%) !default;
$grey-color-dark: darken($grey-color, 25%) !default;

$table-text-align: left !default;

// Width of the content area
$content-width: 800px !default;
$content-width: 800px !default;

$on-palm: 600px !default;
$on-laptop: 800px !default;
$on-palm: 600px !default;
$on-laptop: 800px !default;

// Use media queries like this:
// @include media-query($on-palm) {
Expand All @@ -45,10 +46,8 @@ $on-laptop: 800px !default;
font-size: $base-font-size * $ratio;
}

@import 'font-awesome';

// Import partials.
@import
"minima/normalize",
"minima/base",
"minima/layout",
"minima/syntax-highlighting"
;
@import 'minima/normalize', 'minima/base', 'minima/layout',
'minima/syntax-highlighting', 'layout/header';
Binary file added assets/.DS_Store
Binary file not shown.
Loading

0 comments on commit 353e73f

Please sign in to comment.