isp-theme 0.9.0

data/_sass/font-awesome/font-awesome.scss

@@ -0,0 +1,18 @@
+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables";
+@import "mixins";
+@import "path";
+@import "core";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "animated";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";
+@import "screen-reader";

data/_sass/isp.scss

@@ -0,0 +1,55 @@
+@charset "utf-8";
+
+// Define defaults for each variable.
+
+$base-font-family: Tahoma, Arial, Helvetica, sans-serif !default;
+$base-font-size:   11px !default;
+$base-font-weight: 400 !default;
+$small-font-size:  $base-font-size * 0.875 !default;
+$base-line-height: 1.6 !default;
+$fa-font-path:        "fonts/font-awesome";
+@import "font-awesome/font-awesome";
+
+$spacing-unit:     20px !default;
+
+$standard-padding: 5px !default;
+
+$grey-color:       #F1F1F1 !default;
+$grey-color-light: lighten($grey-color, 40%) !default;
+$grey-color-dark:  darken($grey-color, 25%) !default;
+
+$text-color:       #333 !default;
+$background-color: $grey-color;
+$brand-color:      #B90F22 !default;
+
+$content-width:	   931px !default;
+
+// Width of the content area
+$content-width:    800px !default;
+
+$on-palm:          600px !default;
+$on-laptop:        800px !default;
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+//   .wrapper {
+//     padding-right: $spacing-unit / 2;
+//     padding-left: $spacing-unit / 2;
+//   }
+// }
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+
+@mixin relative-font-size($ratio) {
+  font-size: $base-font-size * $ratio;
+}
+
+// Import partials.
+@import
+  "isp/base",
+  "isp/layout",
+  "isp/syntax-highlighting"
+;

data/_sass/isp/_base.scss

@@ -0,0 +1,216 @@
+/**
+ * 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-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;
+  line-height: $base-line-height;
+}
+
+
+
+/**
+ * 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: underline;
+  }
+
+  .social-media-list &:hover {
+    text-decoration: none;
+
+    .username {
+      text-decoration: underline;
+    }
+  }
+}
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+  color: $grey-color;
+  border-left: 4px solid $grey-color-light;
+  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: #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;
+  }
+}
+
+
+
+/**
+ * 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/isp/_layout.scss

@@ -0,0 +1,432 @@
+.page {
+	width: $content-width;
+	margin: auto;
+	background-color: white;
+	padding-left: $spacing-unit;
+	padding-right: $spacing-unit;
+	box-shadow: 0 0 5px 0 #ddd;
+	padding-top: 5px;
+}
+
+.topnavigation {
+	text-align: right;
+	padding-bottom: 8px;
+	border-bottom: 14px solid $brand-color;
+}
+
+.mainnavigation {
+	margin-top: 2px;
+	border-top: 1px solid black;
+	font-size: 118%;
+	font-weight: 700;
+}
+
+.mainmenu {
+	margin-left: 0;
+	margin-top: 7px;
+
+	li {
+		display: inline;
+		line-height: 1;
+		margin: 0;
+		padding: 0;
+		position: relative;
+		margin-bottom: 7px;
+
+		@extend .float-left;
+
+		a {
+			color: black;
+		}
+	}
+
+	.menuseperator {
+		margin-left: 4px;
+		margin-right: 4px;
+	}
+}
+
+.headerimage-container {
+	position: relative;
+}
+
+.logo {
+	background: white;
+	position: absolute;
+	right: 0;
+	top: 44px;
+}
+
+.breadcrumb {
+	margin-top: 7px;
+	margin-bottom: 10px;
+
+	a {
+		color: #666666;
+
+		&:hover {
+			color: $brand-color;
+			text-decoration: none;
+		}
+	}
+}
+
+.content {
+	min-height: 400px;
+}
+
+.sidenavigation {
+	width: 182px;
+	border-top: 2px solid $brand-color;
+
+	@extend .float-left;
+
+	margin-right: 19px;
+
+	h1 {
+		font-size: 109%;
+		margin-top: 9px;
+		margin-bottom: 1px;
+		padding-bottom: 3px;
+		border-bottom: 1px solid #E5E5E5;
+		font-weight: bold !important;
+	}
+
+	a:visited {
+		color: $brand-color;
+	}
+}
+
+.center-content {
+	@extend .float-left;
+
+	width: 529px;
+	margin-right: 19px;
+
+	h1 {
+		font-size: 145%;
+		color: $brand-color;
+		font-weight: bold;
+	}
+}
+
+.contact {
+	@extend .float-left;
+
+	width: 182px;
+	border-top: 2px solid $brand-color;
+
+	h1 {
+		color: $brand-color;
+		font-size: 109%;
+		line-height: 1.1;
+		border-bottom: 1px solid #E5E5E5;
+		font-weight: bold;
+		padding-top: 9px;
+	}
+
+	p {
+		line-height: 1.0;
+	}
+
+	.institutelogo {
+		margin-top: 8px;
+	}
+}
+
+.to-top {
+	text-align: right;
+	font-size: $base-font-size + 3px;
+	padding-bottom: 9px;
+}
+
+.colored {
+	color: $brand-color;
+}
+
+/**
+* Extend classes
+*/
+
+.float-left {
+	float: left;
+}
+
+/**
+ * Site header
+ */
+.site-header {
+	border-top: 5px solid $grey-color-dark;
+	border-bottom: 1px solid $grey-color-light;
+	min-height: $spacing-unit * 1.865;
+
+	// Positioning context for the mobile navigation icon
+	position: relative;
+}
+
+.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;
+	line-height: $base-line-height * $base-font-size * 2.25;
+
+	.nav-trigger {
+		display: none;
+	}
+
+	.menu-icon {
+		display: none;
+	}
+
+	.page-link {
+		color: $text-color;
+		line-height: $base-line-height;
+
+		// Gaps between nav items, but not on the last one
+		&:not(:last-child) {
+			margin-right: 20px;
+		}
+	}
+
+	@include media-query($on-palm) {
+		position: absolute;
+		top: 9px;
+		right: $spacing-unit / 2;
+		background-color: $background-color;
+		border: 1px solid $grey-color-light;
+		border-radius: 5px;
+		text-align: right;
+
+		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 10px;
+
+			&:not(:last-child) {
+				margin-right: 0;
+			}
+
+			margin-left: 20px;
+		}
+	}
+}
+
+/**
+ * Site footer
+ */
+.site-footer {
+	border-top: 1px solid $grey-color-light;
+	padding: $spacing-unit 0;
+}
+
+.footer-heading {
+	@include relative-font-size(1.125);
+
+	margin-bottom: $spacing-unit / 2;
+}
+
+.contact-list,
+.social-media-list {
+	list-style: none;
+	margin-left: 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;
+}
+
+.footer-col-1 {
+	width: -webkit-calc(35% - (#{$spacing-unit} / 2));
+	width: calc(35% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-2 {
+	width: -webkit-calc(20% - (#{$spacing-unit} / 2));
+	width: calc(20% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-3 {
+	width: -webkit-calc(45% - (#{$spacing-unit} / 2));
+	width: calc(45% - (#{$spacing-unit} / 2));
+}
+
+footer {
+	width: $content-width;
+	margin: auto;
+	padding-left: $spacing-unit;
+	padding-right: $spacing-unit;
+	padding-top: 3px;
+
+	.menu {
+		@extend .mainmenu;
+
+		li {
+			a {
+				color: #333;
+				&:hover {
+			color: $brand-color;	
+				}
+			}
+		}
+
+		.menuseperator {
+			@extend .menuseperator;
+		}
+	}
+}
+
+@include media-query($on-laptop) {
+	.footer-col-1,
+	.footer-col-2 {
+		width: -webkit-calc(50% - (#{$spacing-unit} / 2));
+		width: calc(50% - (#{$spacing-unit} / 2));
+	}
+
+	.footer-col-3 {
+		width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+		width: calc(100% - (#{$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));
+	}
+}
+
+
+/**
+ * Page content
+ */
+.page-content {
+	padding: $spacing-unit 0;
+}
+
+.page-heading {
+	@include relative-font-size(1.25);
+}
+
+.post-list {
+	margin-left: 0;
+	list-style: none;
+
+	> li {
+		margin-bottom: $spacing-unit;
+	}
+}
+
+.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);
+		}
+	}
+}