Add themeing styles

This commit is contained in:
Alex Carpenter 2015-12-03 19:12:42 -05:00
parent 623ef876f5
commit 32578905f5
14 changed files with 120 additions and 37 deletions

View file

@ -8,7 +8,7 @@ description: >
baseurl: "/material-jekyll-theme" baseurl: "/material-jekyll-theme"
url: "http://alexcarpenter.me" url: "http://alexcarpenter.me"
fixedNav: 'true' # true or false fixedNav: 'true' # true or false
theme: purple # green, blue, orange, purple, grey theme: grey # green, blue, orange, purple, grey
twitterUsername: jekyllrb twitterUsername: jekyllrb
githubUsername: jekyll githubUsername: jekyll

View file

@ -1,4 +1,4 @@
<head class="t-{{ site.theme }}"> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="t-{{ site.theme }}">
{% include head.html %} {% include head.html %}
<body> <body>
{% include navigation.html %} {% include navigation.html %}

15
_sass/themes/_blue.scss Normal file
View file

@ -0,0 +1,15 @@
/* ==========================================================================
Blue Theme
========================================================================== */
.t-blue {
.c-navigation,
.c-header {
background: $c__blue;
}
.c-article__main a:not(.c-btn) {
color: $c__blue;
}
}

15
_sass/themes/_green.scss Normal file
View file

@ -0,0 +1,15 @@
/* ==========================================================================
Green Theme
========================================================================== */
.t-green {
.c-navigation,
.c-header {
background: $c__green;
}
.c-article__main a:not(.c-btn) {
color: $c__green;
}
}

15
_sass/themes/_grey.scss Normal file
View file

@ -0,0 +1,15 @@
/* ==========================================================================
Grey Theme
========================================================================== */
.t-grey {
.c-navigation,
.c-header {
background: $c__blue-grey;
}
.c-article__main a:not(.c-btn) {
color: $c__blue-grey;
}
}

15
_sass/themes/_orange.scss Normal file
View file

@ -0,0 +1,15 @@
/* ==========================================================================
Grey Theme
========================================================================== */
.t-orange {
.c-navigation,
.c-header {
background: $c__deep-orange;
}
.c-article__main a:not(.c-btn) {
color: $c__deep-orange;
}
}

15
_sass/themes/_purple.scss Normal file
View file

@ -0,0 +1,15 @@
/* ==========================================================================
Grey Theme
========================================================================== */
.t-purple {
.c-navigation,
.c-header {
background: $c__deep-purple;
}
.c-article__main a:not(.c-btn) {
color: $c__deep-purple;
}
}

View file

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="t-grey">
<head class="t-purple"> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -11,18 +11,18 @@
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700|Roboto+Mono:400,500' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700|Roboto+Mono:400,500' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/material-jekyll-theme/css/main.css">
<link rel="canonical" href="http://yourdomain.com/about/"> <link rel="canonical" href="http://alexcarpenter.me/material-jekyll-theme/about/">
<link rel="alternate" type="application/rss+xml" title="Alex Carpenter" href="http://yourdomain.com/feed.xml"> <link rel="alternate" type="application/rss+xml" title="Alex Carpenter" href="http://alexcarpenter.me/material-jekyll-theme/feed.xml">
</head> </head>
<body> <body>
<nav class="c-navigation is-fixed"> <nav class="c-navigation is-fixed">
<div class="c-navigation__container u-container"> <div class="c-navigation__container u-container">
<a class="c-navigation__item " href="/">Home</a> <a class="c-navigation__item " href="/material-jekyll-theme/">Home</a>
<a class="c-navigation__item " href="/articles/">Articles</a> <a class="c-navigation__item " href="/material-jekyll-theme/articles/">Articles</a>
<a class="c-navigation__item is-active" href="/about/">About</a> <a class="c-navigation__item is-active" href="/material-jekyll-theme/about/">About</a>
<a class="c-navigation__item " href="/contact/">Contact</a> <a class="c-navigation__item " href="/material-jekyll-theme/contact/">Contact</a>
</div> </div>
</nav> </nav>

File diff suppressed because one or more lines are too long

View file

@ -4,10 +4,10 @@
<title>Alex Carpenter</title> <title>Alex Carpenter</title>
<description>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. <description>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.
</description> </description>
<link>http://yourdomain.com/</link> <link>http://alexcarpenter.me/material-jekyll-theme/</link>
<atom:link href="http://yourdomain.com/feed.xml" rel="self" type="application/rss+xml"/> <atom:link href="http://alexcarpenter.me/material-jekyll-theme/feed.xml" rel="self" type="application/rss+xml"/>
<pubDate>Wed, 02 Dec 2015 20:02:14 -0500</pubDate> <pubDate>Thu, 03 Dec 2015 19:12:05 -0500</pubDate>
<lastBuildDate>Wed, 02 Dec 2015 20:02:14 -0500</lastBuildDate> <lastBuildDate>Thu, 03 Dec 2015 19:12:05 -0500</lastBuildDate>
<generator>Jekyll v3.0.1</generator> <generator>Jekyll v3.0.1</generator>
<item> <item>
@ -28,8 +28,8 @@
</description> </description>
<pubDate>Tue, 01 Dec 2015 18:52:21 -0500</pubDate> <pubDate>Tue, 01 Dec 2015 18:52:21 -0500</pubDate>
<link>http://yourdomain.com/jekyll/update/2015/12/01/welcome-to-jekyll.html</link> <link>http://alexcarpenter.me/material-jekyll-theme/jekyll/update/2015/12/01/welcome-to-jekyll.html</link>
<guid isPermaLink="true">http://yourdomain.com/jekyll/update/2015/12/01/welcome-to-jekyll.html</guid> <guid isPermaLink="true">http://alexcarpenter.me/material-jekyll-theme/jekyll/update/2015/12/01/welcome-to-jekyll.html</guid>
<category>jekyll</category> <category>jekyll</category>

View file

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="t-grey">
<head class="t-purple"> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -11,18 +11,18 @@
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700|Roboto+Mono:400,500' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700|Roboto+Mono:400,500' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/material-jekyll-theme/css/main.css">
<link rel="canonical" href="http://yourdomain.com/"> <link rel="canonical" href="http://alexcarpenter.me/material-jekyll-theme/">
<link rel="alternate" type="application/rss+xml" title="Alex Carpenter" href="http://yourdomain.com/feed.xml"> <link rel="alternate" type="application/rss+xml" title="Alex Carpenter" href="http://alexcarpenter.me/material-jekyll-theme/feed.xml">
</head> </head>
<body> <body>
<nav class="c-navigation is-fixed"> <nav class="c-navigation is-fixed">
<div class="c-navigation__container u-container"> <div class="c-navigation__container u-container">
<a class="c-navigation__item is-active" href="/">Home</a> <a class="c-navigation__item is-active" href="/material-jekyll-theme/">Home</a>
<a class="c-navigation__item " href="/articles/">Articles</a> <a class="c-navigation__item " href="/material-jekyll-theme/articles/">Articles</a>
<a class="c-navigation__item " href="/about/">About</a> <a class="c-navigation__item " href="/material-jekyll-theme/about/">About</a>
<a class="c-navigation__item " href="/contact/">Contact</a> <a class="c-navigation__item " href="/material-jekyll-theme/contact/">Contact</a>
</div> </div>
</nav> </nav>

View file

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="t-grey">
<head class="t-purple"> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -10,18 +10,18 @@
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700|Roboto+Mono:400,500' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700|Roboto+Mono:400,500' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/material-jekyll-theme/css/main.css">
<link rel="canonical" href="http://yourdomain.com/jekyll/update/2015/12/01/welcome-to-jekyll.html"> <link rel="canonical" href="http://alexcarpenter.me/material-jekyll-theme/jekyll/update/2015/12/01/welcome-to-jekyll.html">
<link rel="alternate" type="application/rss+xml" title="Alex Carpenter" href="http://yourdomain.com/feed.xml"> <link rel="alternate" type="application/rss+xml" title="Alex Carpenter" href="http://alexcarpenter.me/material-jekyll-theme/feed.xml">
</head> </head>
<body> <body>
<nav class="c-navigation is-fixed"> <nav class="c-navigation is-fixed">
<div class="c-navigation__container u-container"> <div class="c-navigation__container u-container">
<a class="c-navigation__item " href="/">Home</a> <a class="c-navigation__item " href="/material-jekyll-theme/">Home</a>
<a class="c-navigation__item " href="/articles/">Articles</a> <a class="c-navigation__item " href="/material-jekyll-theme/articles/">Articles</a>
<a class="c-navigation__item " href="/about/">About</a> <a class="c-navigation__item " href="/material-jekyll-theme/about/">About</a>
<a class="c-navigation__item " href="/contact/">Contact</a> <a class="c-navigation__item " href="/material-jekyll-theme/contact/">Contact</a>
</div> </div>
</nav> </nav>

View file

@ -25,6 +25,14 @@
'components/buttons', 'components/buttons',
'components/footer'; 'components/footer';
// Themes
@import
'themes/blue',
'themes/green',
'themes/grey',
'themes/orange',
'themes/purple';
// Vendor // Vendor
@import @import
'vendor/syntax-highlighting'; 'vendor/syntax-highlighting';