mancalledmountain-theme 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 2cf05a936e0e8bc64e8940a3e6f0ca1a06ec76cd817ce4203ff0d36ca2ffc080
+  data.tar.gz: 6baea8a040c75fc26315d5000eb0a7eeb9d127c7d1e8581c29dc38281acd21c2
+SHA512:
+  metadata.gz: '0197a8c7504e56b1c4723a39e01f9cab069ad32786c2177e4a1fe733bccd43978368970c583ee09bcf536473608d9ef938a2d434feb54a6cda8a6c1fdb7e771e'
+  data.tar.gz: 2b7492c0675d45fc46caf937042cd38b4074a3845a8f092d4bd456dc54851e79b824528d2b00be68bc1a7e031c88346ae5ef9f0892c1217b23d495c59036602c

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Richard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,59 @@
+# mancalledmountain-theme
+
+Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
+
+To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
+
+TODO: Delete this and the text above, and describe your gem
+
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "mancalledmountain-theme"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: mancalledmountain-theme
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install mancalledmountain-theme
+
+## Usage
+
+TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `mancalledmountain-theme.gemspec` accordingly.
+
+## Thanks
+This theme wasn't created from scratch, some parts of the theme were borrowed, stolen or copied either way, I've tried my best to acknowledge 
+who I've done this too.
+
+https://github.com/HugoGiraudel/sass-boilerplate
+borrowed the sass boilerplate to make my life a little easier.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+

data/_includes/sidebar.html

@@ -0,0 +1,34 @@
+<div class="col align-self-end">
+	
+	<div class="user-profile">
+
+		<div class="avatar">
+			<a href="/"><img src="{{ prepend: site.baseurl}}/assets/images/richard_mountain.jpg" class="circle brand-border"></a>
+		</div>
+		<strong class="my-name">Richard Mountain</strong>
+		<span class="job-title">Software Developer</span>
+
+		<div class="about-me">
+
+			<p>I create things.  I am a software developer and I enjoy bringing other peoples ideas to life.</p>
+			<p>One of my favorite pass times is playing online computer games with friends.</p>
+
+		</div>
+
+		<div class="latest-posts">
+			
+			<h3 class="header">Latest Posts</h3>
+
+			<ul>
+				{% for post in site.posts limit:5 %}
+					<li class="{% if post.url == page.url %}active{% endif %}">
+						<a href="{{ post.url }}">{{ post.title }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+
+		</div>
+
+	</div>
+
+</div>

data/_layouts/default.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>{{ page.title }}</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+    <link rel="stylesheet" href="/assets/style.css">
+</head>
+<body>
+    <header>
+    </header>
+
+    <div class="container wrapper">
+        
+        <div class="row">
+
+            <div class="col-12 col-sm-4 sidebar">
+
+                {% include sidebar.html %}
+
+            </div>
+
+            <div class="offset-sm-4 col-12 col-sm-8">
+                
+                {{ content }}
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <footer class="text-center">
+        &copy; 2019 - Powered by Jekyll, designed by Richard Mountain
+    </footer>
+</body>
+</html>

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+<article class="item">
+	
+	{{ page.date | date: '%B %d, %Y' }}
+	
+	{{ content }}
+
+</article>

data/_sass/README.md

@@ -0,0 +1,7 @@
+# Main file
+
+The main file (usually labelled `main.scss`) should be the only Sass file from the whole code base not to begin with an underscore. This file should not contain anything but `@import` and comments.
+
+*Note: when using [Eyeglass](https://github.com/sass-eyeglass/eyeglass) for distribution, it might be a fine idea to name this file `index.scss` rather than `main.scss` in order to stick to [Eyeglass modules specifications](https://github.com/sass-eyeglass/eyeglass#writing-an-eyeglass-module-with-sass-files). See [#21](https://github.com/HugoGiraudel/sass-boilerplate/issues/21) for reference.*
+
+Reference: [Sass Guidelines](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Main file](http://sass-guidelin.es/#main-file)

data/_sass/_main.scss

@@ -0,0 +1,38 @@
+@charset 'UTF-8';
+
+// 1. Configuration and helpers
+@import
+  'abstracts/variables',
+  'abstracts/functions',
+  'abstracts/mixins';
+
+// 2. Vendors
+@import
+  'vendors/normalize',
+  'vendors/bootstrap/bootstrap-_grid';
+
+// 3. Base stuff
+@import
+  'base/base',
+  'base/fonts',
+  'base/typography',
+  'base/helpers';
+
+// 4. Layout-related sections
+@import
+  'layout/header',
+  'layout/sidebar',
+  'layout/footer';
+
+// 5. Components
+@import
+  'components/button';
+
+// 6. Page-specific styles
+@import
+  'pages/default',
+  'pages/home';
+
+// 7. Themes
+@import
+  'themes/default';

data/_sass/abstracts/README.md

@@ -0,0 +1,7 @@
+# Abstracts
+
+The `abstracts/` folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here.
+
+The rule of thumb for this folder is that it should not output a single line of CSS when compiled on its own. These are nothing but Sass helpers.
+
+Reference: [Sass Guidelines](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Abstracts folder](http://sass-guidelin.es/#abstracts-folder)

data/_sass/abstracts/_functions.scss

@@ -0,0 +1,30 @@
+// -----------------------------------------------------------------------------
+// This file contains all application-wide Sass functions.
+// -----------------------------------------------------------------------------
+
+/// Native `url(..)` function wrapper
+/// @param {String} $base - base URL for the asset
+/// @param {String} $type - asset type folder (e.g. `fonts/`)
+/// @param {String} $path - asset path
+/// @return {Url}
+@function asset($base, $type, $path) {
+  @return url($base + $type + $path);
+}
+
+/// Returns URL to an image based on its path
+/// @param {String} $path - image path
+/// @param {String} $base [$base-url] - base URL
+/// @return {Url}
+/// @require $base-url
+@function image($path, $base: $base-url) {
+  @return asset($base, 'images/', $path);
+}
+
+/// Returns URL to a font based on its path
+/// @param {String} $path - font path
+/// @param {String} $base [$base-url] - base URL
+/// @return {Url}
+/// @require $base-url
+@function font($path, $base: $base-url) {
+  @return asset($base, 'fonts/', $path);
+}

data/_sass/abstracts/_mixins.scss

@@ -0,0 +1,33 @@
+// -----------------------------------------------------------------------------
+// This file contains all application-wide Sass mixins.
+// -----------------------------------------------------------------------------
+
+/// Event wrapper
+/// @author Harry Roberts
+/// @param {Bool} $self [false] - Whether or not to include current selector
+/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
+@mixin on-event($self: false) {
+  @if $self {
+    &,
+    &:hover,
+    &:active,
+    &:focus {
+      @content;
+    }
+  } @else {
+    &:hover,
+    &:active,
+    &:focus {
+      @content;
+    }
+  }
+}
+
+/// Make a context based selector a little more friendly
+/// @author Hugo Giraudel
+/// @param {String} $context
+@mixin when-inside($context) {
+  #{$context} & {
+    @content;
+  }
+}

data/_sass/abstracts/_variables.scss

@@ -0,0 +1,71 @@
+// -----------------------------------------------------------------------------
+// This file contains all application-wide Sass variables.
+// -----------------------------------------------------------------------------
+
+
+
+
+
+/// Regular font family
+/// @type List
+$text-font-stack: 'Roboto', Arial, sans-serif !default;
+
+/// Code (monospace) font family
+/// @type List
+$code-font-stack: 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace !default;
+
+
+
+
+
+/// Copy text color
+/// @type Color
+$text-color: rgb(34, 34, 34) !default;
+
+/// Main brand color
+/// @type Color
+$brand-color: rgb(229, 0, 80) !default;
+
+/// Light grey
+/// @type Color
+$light-grey: rgb(237, 237, 237) !default;
+
+/// Medium grey
+/// @type Color
+$mid-grey: rgb(153, 153, 153) !default;
+
+/// Dark grey
+/// @type Color
+$dark-grey: rgb(68, 68, 68) !default;
+
+
+
+
+
+/// Container's maximum width
+/// @type Length
+$max-width: 1180px !default;
+
+
+
+
+
+/// Breakpoints map
+/// @prop {String} keys - Keys are identifiers mapped to a given length
+/// @prop {Map} values - Values are actual breakpoints expressed in pixels
+$breakpoints: (
+  'small': 320px,
+  'medium': 768px,
+  'large': 1024px,
+) !default;
+
+
+
+
+
+
+/// Relative or absolute URL where all assets are served from
+/// @type String
+/// @example scss - When using a CDN
+///   $base-url: 'http://cdn.example.com/assets/';
+$base-url: '/assets/' !default;

data/_sass/base/README.md

@@ -0,0 +1,5 @@
+# Base
+
+The `base/` folder holds what we might call the boilerplate code for the project. In there, you might find some typographic rules, and probably a stylesheet (that I’m used to calling `_base.scss`), defining some standard styles for commonly used HTML elements.
+
+Reference: [Sass Guidelines](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Base folder](http://sass-guidelin.es/#base-folder)

data/_sass/base/_base.scss

@@ -0,0 +1,35 @@
+// -----------------------------------------------------------------------------
+// This file contains very basic styles.
+// -----------------------------------------------------------------------------
+
+/**
+ * Set up a decent box model on the root element
+ */
+html {
+  box-sizing: border-box;
+}
+
+/**
+ * Make all elements from the DOM inherit from the parent box-sizing
+ * Since `*` has a specificity of 0, it does not override the `html` value
+ * making all elements inheriting from the root box-sizing value
+ * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+ */
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/**
+ * Basic styles for links
+ */
+a {
+  color: $brand-color;
+  text-decoration: none;
+
+  @include on-event {
+    color: $text-color;
+    text-decoration: underline;
+  }
+}

data/_sass/base/_fonts.scss

@@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains all @font-face declarations, if any.
+// -----------------------------------------------------------------------------

data/_sass/base/_helpers.scss

@@ -0,0 +1,72 @@
+// -----------------------------------------------------------------------------
+// This file contains CSS helper classes.
+// -----------------------------------------------------------------------------
+
+/**
+ * Clear inner floats
+ */
+.clearfix::after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+/**
+ * Main content containers
+ * 1. Make the container full-width with a maximum width
+ * 2. Center it in the viewport
+ * 3. Leave some space on the edges, especially valuable on small screens
+ */
+.container {
+  max-width: $max-width; /* 1 */
+  margin-left: auto; /* 2 */
+  margin-right: auto; /* 2 */
+  padding-left: 20px; /* 3 */
+  padding-right: 20px; /* 3 */
+  width: 100%; /* 1 */
+ }
+
+/**
+ * Hide text while making it readable for screen readers
+ * 1. Needed in WebKit-based browsers because of an implementation bug;
+ *    See: https://code.google.com/p/chromium/issues/detail?id=457146
+ */
+.hide-text {
+  overflow: hidden;
+  padding: 0; /* 1 */
+  text-indent: 101%;
+  white-space: nowrap;
+}
+
+/**
+ * Hide element while making it readable for screen readers
+ * Shamelessly borrowed from HTML5Boilerplate:
+ * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
+ */
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+/**
+ * turn square image into circle
+ */
+.circle {
+
+    border-radius: 50%;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+
+    &.brand-border {
+
+        border: 3px solid $brand-color;
+
+    }
+
+}

data/_sass/base/_typography.scss

@@ -0,0 +1,15 @@
+/**
+ * Basic typography style for copy text
+ */
+body {
+  color: $text-color;
+  font: 400 14px/1 $text-font-stack;
+}
+
+.bold {
+	font-weight: 700;
+}
+
+.text-center {
+	text-align: center;
+}

data/_sass/components/README.md

@@ -0,0 +1,5 @@
+# Components
+
+For small components, there is the `components/` folder. While `layout/` is macro (defining the global wireframe), `components/` is more focused on widgets. It contains all kind of specific modules like a slider, a loader, a widget, and basically anything along those lines. There are usually a lot of files in components/ since the whole site/application should be mostly composed of tiny modules.
+
+Reference: [Sass Guidelines](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Components folder](http://sass-guidelin.es/#components-folder)

data/_sass/components/_button.scss

@@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the button component.
+// -----------------------------------------------------------------------------

data/_sass/layout/README.md

@@ -0,0 +1,5 @@
+# Layout
+
+The `layout/` folder contains everything that takes part in laying out the site or application. This folder could have stylesheets for the main parts of the site (header, footer, navigation, sidebar…), the grid system or even CSS styles for all the forms.
+
+Reference: [Sass Guidelines](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Layout folder](http://sass-guidelin.es/#layout-folder)

data/_sass/layout/_footer.scss

@@ -0,0 +1,11 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the footer of the site/application.
+// -----------------------------------------------------------------------------
+
+footer {
+
+	color: #ccc;
+	font-size: 11px;
+	padding: 15px;
+
+}

data/_sass/layout/_header.scss

@@ -0,0 +1,6 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the header of the site/application.
+// -----------------------------------------------------------------------------
+header {
+	border-top: 10px solid $brand-color;
+}

data/_sass/layout/_sidebar.scss

@@ -0,0 +1,106 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the sidebar of the site/application.
+// -----------------------------------------------------------------------------
+
+.sidebar {
+	
+	@include make-col-ready();
+
+	@include media-breakpoint-up(sm) {
+
+		position: fixed;
+
+	}
+
+}
+
+.user-profile {
+
+	text-align: center;
+
+	.avatar {
+
+
+		margin-bottom: 25px;
+
+	}
+
+	.my-name {
+
+		color: #333;
+		display: block;
+		font-size: 24px;
+		font-weight: 700;
+		line-height: 30px;
+
+	}
+
+	.job-title {
+
+		font-size: 14px;
+		font-weight: 300;
+		margin: 5px 0 0;
+		
+	}
+
+	.about-me {
+
+		p {
+
+			font-size: 16px;
+			font-weight: 400;
+			line-height: 24px;
+			text-align: left;
+			
+		}
+
+	}
+	
+	.latest-posts {
+
+		text-align: left;
+
+		ul {
+
+			box-shadow: 0 2px 3px rgba(0,0,0,0.05);
+			border: 1px solid #eee;
+			list-style: none;
+			padding: 0;
+
+			li {
+
+				a {
+
+					background: #fff;
+					border-bottom: 1px solid #eee;
+					color: #aaa;
+					display: block;
+					padding: 10px 15px;
+
+					&:hover {
+
+						background: #f6f6f6;
+						box-shadow: inset 4px 0 0 $brand-color;
+						text-decoration: none;
+
+					}
+
+				}
+
+				&.active {
+ 
+					a {
+
+						background: #f6f6f6;
+
+					}
+
+				}
+
+			}
+
+		}
+
+	}
+
+}

data/_sass/pages/README.md

@@ -0,0 +1,7 @@
+# Pages
+
+If you have page-specific styles, it is better to put them in a `pages/` folder, in a file named after the page. For instance, it’s not uncommon to have very specific styles for the home page hence the need for a `_home.scss` file in `pages/`.
+
+*Note — Depending on your deployment process, these files could be called on their own to avoid merging them with the others in the resulting stylesheet. It is really up to you.*
+
+Reference: [Sass Guidelines](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Pages folder](http://sass-guidelin.es/#pages-folder)