Add Minima template (ff908700) · Commits · e / documentation / user

_sass/minima.scss

0 → 100644

+56 −0

Original line number	Diff line number	Diff line
		@charset "utf-8";

		// 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-weight: 400 !default;
		$small-font-size: $base-font-size * 0.875 !default;
		$base-line-height: 1.5 !default;

		$spacing-unit: 30px !default;

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

		$grey-color: #828282 !default;
		$grey-color-light: lighten($grey-color, 40%) !default;
		$grey-color-dark: darken($grey-color, 25%) !default;
		$orange-color: #f66a0a !default;
		$table-text-align: left !default;

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

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

		$on-medium: $on-palm !default;
		$on-large: $on-laptop !default;

		// Use media queries like this:
		// @include media-query($on-palm) {
		// .wrapper {
		// padding-right: $spacing-unit / 2;
		// padding-left: $spacing-unit / 2;
		// }
		// }
		// Notice the following mixin uses max-width, in a deprecated, desktop-first
		// approach, whereas media queries used elsewhere now use min-width.
		@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
		"minima/base",
		"minima/layout",
		"minima/syntax-highlighting"
		;

_sass/minima/_base.scss

0 → 100644

+256 −0

Original line number	Diff line number	Diff line
		/**
		* 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;
		display: flex;
		min-height: 100vh;
		flex-direction: column;
		}



		/**
		* 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;
		}



		/**
		* `main` element
		*/
		main {
		display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
		}



		/**
		* 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}));
		max-width: calc(#{$content-width} - (#{$spacing-unit}));
		margin-right: auto;
		margin-left: auto;
		padding-right: $spacing-unit / 2;
		padding-left: $spacing-unit / 2;
		@extend %clearfix;

		@media screen and (min-width: $on-large) {
		max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
		max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
		padding-right: $spacing-unit;
		padding-left: $spacing-unit;
		}
		}



		/**
		* Clearfix
		*/
		%clearfix:after {
		content: "";
		display: table;
		clear: both;
		}



		/**
		* Icons
		*/

		.orange {
		color: $orange-color;
		}

		.grey {
		color: $grey-color;
		}

		.svg-icon {
		width: 16px;
		height: 16px;
		display: inline-block;
		fill: currentColor;
		padding: 5px 3px 2px 5px;
		vertical-align: text-bottom;
		}


		/**
		* Tables
		*/
		table {
		margin-bottom: $spacing-unit;
		width: 100%;
		text-align: $table-text-align;
		color: lighten($text-color, 18%);
		border-collapse: collapse;
		border: 1px solid $grey-color-light;
		tr {
		&:nth-child(even) {
		background-color: lighten($grey-color-light, 6%);
		}
		}
		th, td {
		padding: ($spacing-unit / 3) ($spacing-unit / 2);
		}
		th {
		background-color: lighten($grey-color-light, 3%);
		border: 1px solid darken($grey-color-light, 4%);
		border-bottom-color: darken($grey-color-light, 12%);
		}
		td {
		border: 1px solid $grey-color-light;
		}
		}

_sass/minima/_layout.scss

0 → 100644

+300 −0

Original line number	Diff line number	Diff line
		/**
		* Site header
		*/
		.site-header {
		border-top: 5px solid $grey-color-dark;
		border-bottom: 1px solid $grey-color-light;
		min-height: $spacing-unit * 1.865;
		line-height: $base-line-height * $base-font-size * 2.25;

		// Positioning context for the mobile navigation icon
		position: relative;
		}

		.site-title {
		@include relative-font-size(1.625);
		font-weight: 300;
		letter-spacing: -1px;
		margin-bottom: 0;
		float: left;

		@include media-query($on-palm) {
		padding-right: 45px;
		}

		&,
		&:visited {
		color: $grey-color-dark;
		}
		}

		.site-nav {
		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;
		}

		.menu-icon {
		float: right;
		width: 36px;
		height: 26px;
		line-height: 0;
		padding-top: 10px;
		text-align: center;

		> svg path {
		fill: $grey-color-dark;
		}
		}

		label[for="nav-trigger"] {
		display: block;
		float: right;
		width: 36px;
		height: 36px;
		z-index: 2;
		cursor: pointer;
		}

		input ~ .trigger {
		clear: both;
		display: none;
		}

		input:checked ~ .trigger {
		display: block;
		padding-bottom: 5px;
		}

		.page-link {
		color: $text-color;
		line-height: $base-line-height;
		display: block;
		padding: 5px 10px;

		// Gaps between nav items, but not on the last one
		&:not(:last-child) {
		margin-right: 0;
		}
		margin-left: 20px;
		}

		@media screen and (min-width: $on-medium) {
		position: static;
		float: right;
		border: none;
		background-color: inherit;

		label[for="nav-trigger"] {
		display: none;
		}

		.menu-icon {
		display: none;
		}

		input ~ .trigger {
		display: block;
		}

		.page-link {
		display: inline;
		padding: 0;

		&:not(:last-child) {
		margin-right: 20px;
		}
		margin-left: auto;
		}
		}
		}



		/**
		* 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 {
		width: -webkit-calc(100% - (#{$spacing-unit} / 2));
		width: calc(100% - (#{$spacing-unit} / 2));
		margin-bottom: $spacing-unit / 2;
		padding-left: $spacing-unit / 2;
		}

		.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));
		}

		@media screen and (min-width: $on-large) {
		.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));
		}
		}

		@media screen and (min-width: $on-medium) {
		.footer-col {
		float: left;
		}
		}



		/**
		* Page content
		*/
		.page-content {
		padding: $spacing-unit 0;
		flex: 1 0 auto;
		}

		.page-heading {
		@include relative-font-size(2);
		}

		.post-list-heading {
		@include relative-font-size(1.75);
		}

		.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,
		.post-content h1 {
		@include relative-font-size(2.625);
		letter-spacing: -1px;
		line-height: 1;

		@media screen and (min-width: $on-large) {
		@include relative-font-size(2.625);
		}
		}

		.post-content {
		margin-bottom: $spacing-unit;

		h2 {
		@include relative-font-size(1.75);

		@media screen and (min-width: $on-large) {
		@include relative-font-size(2);
		}
		}

		h3 {
		@include relative-font-size(1.375);

		@media screen and (min-width: $on-large) {
		@include relative-font-size(1.625);
		}
		}

		h4 {
		@include relative-font-size(1.125);

		@media screen and (min-width: $on-large) {
		@include relative-font-size(1.25);
		}
		}
		}


		.social-media-list {
		display: table;
		margin: 0 auto;
		li {
		float: left;
		margin: 0 5px;
		&:first-of-type { margin-left: 0 }
		&:last-of-type { margin-right: 0 }
		a {
		display: block;
		padding: $spacing-unit / 4;
		border: 1px solid $grey-color-light
		}
		&:hover .svg-icon { fill: currentColor; }
		}
		}


		/**
		* Grid helpers
		*/
		@media screen and (min-width: $on-large) {
		.one-half {
		width: -webkit-calc(50% - (#{$spacing-unit} / 2));
		width: calc(50% - (#{$spacing-unit} / 2));
		}
		}

_sass/minima/_syntax-highlighting.scss

0 → 100644

+71 −0

Original line number	Diff line number	Diff line
		/**
		* Syntax highlighting styles
		*/
		.highlight {
		background: #fff;
		@extend %vertical-rhythm;

		.highlighter-rouge & {
		background: #eef;
		}

		.c { color: #998; font-style: italic } // Comment
		.err { color: #a61717; background-color: #e3d2d2 } // Error
		.k { font-weight: bold } // Keyword
		.o { font-weight: bold } // Operator
		.cm { color: #998; font-style: italic } // Comment.Multiline
		.cp { color: #999; font-weight: bold } // Comment.Preproc
		.c1 { color: #998; font-style: italic } // Comment.Single
		.cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
		.gd { color: #000; background-color: #fdd } // Generic.Deleted
		.gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
		.ge { font-style: italic } // Generic.Emph
		.gr { color: #a00 } // Generic.Error
		.gh { color: #999 } // Generic.Heading
		.gi { color: #000; background-color: #dfd } // Generic.Inserted
		.gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
		.go { color: #888 } // Generic.Output
		.gp { color: #555 } // Generic.Prompt
		.gs { font-weight: bold } // Generic.Strong
		.gu { color: #aaa } // Generic.Subheading
		.gt { color: #a00 } // Generic.Traceback
		.kc { font-weight: bold } // Keyword.Constant
		.kd { font-weight: bold } // Keyword.Declaration
		.kp { font-weight: bold } // Keyword.Pseudo
		.kr { font-weight: bold } // Keyword.Reserved
		.kt { color: #458; font-weight: bold } // Keyword.Type
		.m { color: #099 } // Literal.Number
		.s { color: #d14 } // Literal.String
		.na { color: #008080 } // Name.Attribute
		.nb { color: #0086B3 } // Name.Builtin
		.nc { color: #458; font-weight: bold } // Name.Class
		.no { color: #008080 } // Name.Constant
		.ni { color: #800080 } // Name.Entity
		.ne { color: #900; font-weight: bold } // Name.Exception
		.nf { color: #900; font-weight: bold } // Name.Function
		.nn { color: #555 } // Name.Namespace
		.nt { color: #000080 } // Name.Tag
		.nv { color: #008080 } // Name.Variable
		.ow { font-weight: bold } // Operator.Word
		.w { color: #bbb } // Text.Whitespace
		.mf { color: #099 } // Literal.Number.Float
		.mh { color: #099 } // Literal.Number.Hex
		.mi { color: #099 } // Literal.Number.Integer
		.mo { color: #099 } // Literal.Number.Oct
		.sb { color: #d14 } // Literal.String.Backtick
		.sc { color: #d14 } // Literal.String.Char
		.sd { color: #d14 } // Literal.String.Doc
		.s2 { color: #d14 } // Literal.String.Double
		.se { color: #d14 } // Literal.String.Escape
		.sh { color: #d14 } // Literal.String.Heredoc
		.si { color: #d14 } // Literal.String.Interpol
		.sx { color: #d14 } // Literal.String.Other
		.sr { color: #009926 } // Literal.String.Regex
		.s1 { color: #d14 } // Literal.String.Single
		.ss { color: #990073 } // Literal.String.Symbol
		.bp { color: #999 } // Name.Builtin.Pseudo
		.vc { color: #008080 } // Name.Variable.Class
		.vg { color: #008080 } // Name.Variable.Global
		.vi { color: #008080 } // Name.Variable.Instance
		.il { color: #099 } // Literal.Number.Integer.Long
		}