ons-jt 1.0.0

data/_layouts/postwrapper.html

@@ -0,0 +1,8 @@
+---
+layout: base
+---
+<main class="page-content" aria-label="Content">
+	<div class="wrapper">
+		{{ content }}
+	</div>
+</main>

data/_sass/ons/_base.scss

@@ -0,0 +1,228 @@
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+  margin: 0;
+  padding: 0;
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+  color: $text-color;
+  background-color: $background-color;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-feature-settings: "kern" 1;
+     -moz-font-feature-settings: "kern" 1;
+       -o-font-feature-settings: "kern" 1;
+          font-feature-settings: "kern" 1;
+  font-kerning: normal;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+  margin-bottom: $spacing-unit / 2;
+}
+
+
+
+/**
+ * Images
+ */
+img {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+  display: block;
+}
+
+figcaption {
+  font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+  margin-left: $spacing-unit;
+}
+
+li {
+  > ul,
+  > ol {
+    margin-bottom: 0;
+  }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: $base-font-weight;
+}
+
+
+
+/**
+ * Links
+ */
+a {
+  color: $brand-color;
+  text-decoration: none;
+
+  &:visited {
+    color: darken($brand-color, 15%);
+  }
+
+  &:hover {
+    color: $text-color;
+    text-decoration: none; /*underline;*/
+  }
+
+  .social-media-list &:hover {
+    text-decoration: none;
+
+    .username {
+      text-decoration: underline;
+    }
+  }
+}
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+  color: $grey-color;
+  border-left: 4px solid $brand-color;
+  padding-left: $spacing-unit / 2;
+  @include relative-font-size(1.125);
+  letter-spacing: -1px;
+  font-style: italic;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+  @include relative-font-size(0.9375);
+  border: 1px solid $grey-color-light;
+  border-radius: 3px;
+  background-color: $brand-color-light; /*#eef*/
+}
+
+code {
+  padding: 1px 5px;
+}
+
+pre {
+  padding: 8px 12px;
+  overflow-x: auto;
+
+  > code {
+    border: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+  max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+  max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $spacing-unit;
+  padding-left: $spacing-unit;
+  @extend %clearfix;
+
+  @include media-query($on-laptop) {
+    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
+    max-width:         calc(#{$content-width} - (#{$spacing-unit}));
+    padding-right: $spacing-unit / 2;
+    padding-left: $spacing-unit / 2;
+  }
+}
+
+.txtcentered {
+	margin-top: 10px;
+	margin-bottom: 10px;
+ 	text-align: center;
+}
+
+.imgcentered {
+    width: 200px;
+    height: auto;
+    display: block;
+    margin: auto;
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+
+
+/**
+ * Icons
+ */
+.icon > svg {
+  display: inline-block;
+  vertical-align: middle;
+
+  path {
+    fill: $grey-color;
+  }
+}
+
+.social-media-list {
+  .icon {
+    padding-right: 5px;
+  }
+
+  li + li {
+    padding-top: 5px;
+  }
+}

data/_sass/ons/_layout.scss

@@ -0,0 +1,246 @@
+/**
+ * Site header
+ */
+.site-header {
+  /*border-top: 5px solid $grey-color-dark;*/
+  /*border-bottom: 1px solid $grey-color-light;*/
+  min-height: $spacing-unit * 4.90;
+
+  // Positioning context for the mobile navigation icon
+  position: relative;
+}
+
+.site-logo {
+    margin-top: 5px;
+    margin-left: 1%;
+	height: 36px;
+	width: auto; 
+	float: left;
+	fill: $brand-color;
+}
+
+.site-logo > svg {
+  display: inline-block;
+  vertical-align: middle;
+
+  path {
+    fill: $brand-color;
+  }
+}
+
+.site-title {
+  @include relative-font-size(1.625);
+  font-weight: 300;
+  line-height: $base-line-height * $base-font-size * 2.25;
+  letter-spacing: -1px;
+  margin-bottom: 0;
+  float: left;
+
+  &,
+  &:visited {
+    color: $grey-color-dark;
+  }
+}
+
+.site-nav {
+	float: right;
+	margin-right: $spacing-unit;
+	/*line-height: $base-line-height* $base-font-size* 2.25;*/
+	z-index: 3;
+	position: absolute;
+	top: 9px;
+	right: $spacing-unit/2;
+	background-color: $background-color;
+	border: 1px solid$grey-color-light;
+	border-radius: 5px;
+	text-align: right;
+	
+	.nav-trigger {
+		display: none;
+	}
+
+	label[for="nav-trigger"] {
+		display: block;
+		float: right;
+		width: 36px;
+		height: 36px;
+		z-index: 2;
+		cursor: pointer;
+	}
+
+	.menu-icon {
+		display: block;
+		float: right;
+		width: 36px;
+		height: 26px;
+		line-height: 0;
+		padding-top: 10px;
+		text-align: center;
+		> svg path {
+				fill: $grey-color-dark;
+			}
+	}
+	
+	input ~ .trigger {
+		clear: both;
+		display: none;
+	}
+
+	input:checked ~ .trigger {
+		display: block;
+		padding-bottom: 5px;
+	}
+
+	.page-link {
+      	display: block;
+      	padding: 5px 5px;
+
+      	&:not(:last-child) {
+        	margin-right: 0;
+      	}
+      	margin-left: 20px;
+    }
+}
+
+/* Big cover image on the home page */
+.main-cover {
+    padding: 30px 0;
+    position: relative;
+    display: table;
+    width: 100%;
+    height: 85vh;
+    margin-bottom: 1rem;
+    text-align: center;
+    vertical-align: bottom;
+    background: transparent no-repeat center center;
+    background-size: auto 100%;
+    overflow: hidden;
+}
+
+.main-cover-vertical {
+    display: table-cell;
+    vertical-align: middle;
+    font-size: 4em;
+    font-weight: 800;
+    
+    @media only screen and (max-width: $on-palm) {
+		font-size: 2em;
+		 font-weight: 400;
+	}	
+}
+
+.main-cover-vertical .downarrow {
+    font-size: 5em;  
+    @media only screen and (max-width: $on-palm) {
+		font-size: 4em;
+	}	
+}
+
+.main-cover-vertical .downarrow a {
+  color: $grey-color;
+  text-decoration: none;
+
+  &:visited {
+    color: darken($grey-color, 15%);
+  }
+
+  &:hover {
+    color: lighten($grey-color, 15%);
+    text-decoration: none; /*underline;*/
+  }
+}
+
+/**
+ * Page content
+ */
+.page-content {
+  padding: $spacing-unit 0;
+}
+
+.page-heading {
+  @include relative-font-size(1.25);
+}
+
+.post-meta {
+  font-size: $small-font-size;
+  color: $grey-color;
+}
+
+.post-link {
+  display: block;
+  @include relative-font-size(1.5);
+}
+
+/**
+ * Posts
+ */
+.post-header {
+  margin-bottom: $spacing-unit;
+}
+
+.post-title {
+  @include relative-font-size(2.625);
+  letter-spacing: -1px;
+  line-height: 1;
+
+  @include media-query($on-laptop) {
+    @include relative-font-size(2.25);
+  }
+}
+
+.post-content {
+  margin-bottom: $spacing-unit;
+
+  h2 {
+    @include relative-font-size(2);
+
+    @include media-query($on-laptop) {
+      @include relative-font-size(1.75);
+    }
+  }
+
+  h3 {
+    @include relative-font-size(1.625);
+
+    @include media-query($on-laptop) {
+      @include relative-font-size(1.375);
+    }
+  }
+
+  h4 {
+    @include relative-font-size(1.25);
+
+    @include media-query($on-laptop) {
+      @include relative-font-size(1.125);
+    }
+  }
+}
+
+/**
+ * Site footer
+ */
+.site-footer {
+  border-top: 1px solid $grey-color-light;
+  padding: $spacing-unit 0;
+}
+
+.footer-col-wrapper {
+  @include relative-font-size(0.9375);
+  color: $grey-color;
+  margin-left: -$spacing-unit / 2;
+  @extend %clearfix;
+}
+
+.footer-col {
+  float: left;
+  margin-bottom: $spacing-unit / 2;
+  padding-left: $spacing-unit / 2;
+}
+
+@include media-query($on-palm) {
+  .footer-col {
+    float: none;
+    width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+    width:         calc(100% - (#{$spacing-unit} / 2));
+  }
+}

data/_sass/ons/_postgrid.scss

@@ -0,0 +1,36 @@
+/* ---- grid ---- */
+.grid {
+	background: transparent;
+	margin: 0 auto;
+}
+
+/* clear fix */
+.grid:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+/* ---- .grid-item ---- */
+.grid-sizer, .grid-item {
+	width: 250px;
+}
+
+.grid-item {
+	float: left;
+	margin-bottom: 10px;
+    background: transparent;
+    border: 1px solid black;
+    border-radius: 3px;
+}
+
+.grid-item img {
+	display: block;
+	max-width: 98%;
+	padding-top: 3px;
+	margin: auto;
+}
+
+.grid-item h2, p {
+	margin: 5px;
+}

data/_sass/ons/_postnav.scss

@@ -0,0 +1,170 @@
+/* ==========================================================================
+   Post Nav
+   ========================================================================== */
+
+.post-nav {
+	position: relative;
+
+	@media only screen and (max-width: $on-laptop) {
+		height: 7em;
+		margin: 2em 0;
+	}
+
+	&:after {
+		clear: both;
+		content: '';
+		display: table;
+	}
+
+	.post-nav-item {
+		position: fixed;
+		top: 50%;
+		display: block;
+		margin-top: -4em;
+		overflow: hidden;
+		border-radius: 10em;
+		transition: none;
+
+		@media only screen and (max-width: $on-laptop) {
+			position: absolute;
+			top: auto;
+			margin: auto;
+			max-width: 50%;
+		}
+
+		&:hover,
+		&:focus {
+			border-radius: 0;
+
+			.post-nav-teaser {
+
+				.post-nav-icon {
+					border: 2px solid $brand-color-light;
+					box-shadow: 0 0 0 25em $brand-color-light;
+
+					@media only screen and (max-width: $on-laptop) {
+						border: 2px solid $brand-color-light;
+						box-shadow: 0 0 0 2px $brand-color-light;
+					}
+				}
+
+				.post-nav-info {
+					display: block;
+
+					@media only screen and (max-width: $on-laptop) {
+						display: none;
+					}
+
+					.post-nav-title {
+						color: $grey-color-dark;
+					}
+
+					.post-nav-excerpt {
+						color: #fff;
+					}
+				}
+			}
+		}
+
+		&.post-nav-next {
+			left: 0;
+			text-align: left;
+
+			.post-nav-icon {
+				float: left;
+
+				i {
+					left: -0.05em;
+				}
+			}
+
+			.post-nav-info {
+				padding-left: 6em;
+			}
+		}
+
+		&.post-nav-prev {
+			right: 0;
+			text-align: right;
+
+			.post-nav-icon {
+				float: right;
+
+				i {
+					right: -0.05em;
+				}
+			}
+
+			.post-nav-info {
+				padding-right: 6em;
+			}
+		}
+
+		.post-nav-teaser {
+			display: block;
+			padding: 1em;
+			transition: all ease-out 0.2s;
+			max-width: 25em;
+			overflow: visible;
+
+			&:after {
+				clear: both;
+				content: '';
+				display: table;
+			}
+
+			.post-nav-icon {
+				display: block;
+				width: 5em;
+				height: 5em;
+				line-height: 5em;
+				text-align: center;
+				box-sizing: border-box;
+				border-radius: 10em;
+				border: 2px solid $brand-color;
+				box-shadow: 0 0 0 0 transparent;
+				transition: all ease-out 0.1s;
+				background: transparent;
+
+				@media only screen and (max-width: $on-palm) {
+					width: 4em;
+					height: 4em;
+					line-height: 4em;
+				}			
+			}
+
+			.post-nav-info {
+				display: none;
+				width: 100%;
+				box-sizing: border-box;
+				transition: all ease-out 0.2s;
+
+				.post-nav-title {
+					display: block;
+					max-height: 1.25em;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					margin: 1.25em 0 0.25em;
+					font-size: 1em;
+					line-height: 1.25em;
+					font-weight: 700;
+					color: $grey-color-dark;
+				}
+
+				.post-nav-excerpt {
+					display: block;
+					max-height: 1.334em;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					margin: 0;
+					font-size: 0.75em;
+					line-height: 1.334em;
+					font-weight: 400;
+					color: $grey-color-dark;
+				}
+			}
+		}
+	}
+}