Difference between revisions of "Template:TUDelft/css/skeleton"

Revision as of 14:07, 24 April 2017 (view source) Hwalinga (Talk | contribs) ← Older edit		Latest revision as of 12:01, 4 May 2017 (view source) Hwalinga (Talk | contribs) (update content)
(11 intermediate revisions by the same user not shown)
Line 1:		Line 1:
	:root {		:root {
		+	#0acd86 #52d8ca #3bcef6 #5999f9 #4f44e7 #089076;
	--background-color: #fefefe;		--background-color: #fefefe;
−	/*  --background-color: #fff;*/
	--border-color: #a2a2a2;		--border-color: #a2a2a2;
		+	/*  #a2a2a2*/
	--border-sec-color: #bbb;		--border-sec-color: #bbb;
	--border-active-color: #888;		--border-active-color: #888;
Line 10:		Line 11:
	--text-color: #222;		--text-color: #222;
	--text-sec-color: #555;		--text-sec-color: #555;
−	--text-active-color: #333;	+	--text-active-color: #fefefe;
		+	/*    #333;*/
		+	--btn-active-color: #3bcef6;
	}		}
		+
	/*		/*
Line 43:		Line 47:
	/* Grid		/* Grid
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
	.container {		.container {
	position: relative;		position: relative;
	width: 100%;		width: 100%;
−	max-width: 960px;	+	max-width: 1250px;
	margin: 0 auto;		margin: 0 auto;
−	padding: 0 20px;	+	box-sizing: border-box;
−	box-sizing: border-box; }	+	}
		+
	.column,		.column,
	.columns {		.columns {
	width: 100%;		width: 100%;
	float: left;		float: left;
−	box-sizing: border-box; }	+	box-sizing: border-box;
		+	}
		+
	/* For devices larger than 400px */		/* For devices larger than 400px */
		+
	@media (min-width: 400px) {		@media (min-width: 400px) {
	.container {		.container {
−	width: 85%;	+	width: 95%;
−	padding: 0; }	+	}
	}		}
		+
	/* For devices larger than 550px */		/* For devices larger than 550px */
		+
	@media (min-width: 550px) {		@media (min-width: 550px) {
	.container {		.container {
−	width: 80%; }	+	width: 90%;
		+	}
	.column,		.column,
	.columns {		.columns {
−	margin-left: 4%; }	+	margin-left: 4%;
		+	}
	.column:first-child,		.column:first-child,
	.columns:first-child {		.columns:first-child {
−	margin-left: 0; }	+	margin-left: 0;
−		+	}
	.one.column,		.one.column,
−	.one.columns                   { width: 4.66666666667%; }	+	.one.columns {
−	.two.columns                   { width: 13.3333333333%; }	+	width: 4.66666666667%;
−	.three.columns                 { width: 22%;           }	+	}
−	.four.columns                   { width: 30.6666666667%; }	+	.two.columns {
−	.five.columns                   { width: 39.3333333333%; }	+	width: 13.3333333333%;
−	.six.columns                   { width: 48%;           }	+	}
−	.seven.columns                 { width: 56.6666666667%; }	+	.three.columns {
−	.eight.columns                 { width: 65.3333333333%; }	+	width: 22%;
−	.nine.columns                   { width: 74.0%;         }	+	}
−	.ten.columns                   { width: 82.6666666667%; }	+	.four.columns {
−	.eleven.columns                 { width: 91.3333333333%; }	+	width: 30.6666666667%;
−	.twelve.columns                 { width: 100%; margin-left: 0; }	+	}
−		+	.five.columns {
−	.one-third.column               { width: 30.6666666667%; }	+	width: 39.3333333333%;
−	.two-thirds.column             { width: 65.3333333333%; }	+	}
−		+	.six.columns {
−	.one-half.column               { width: 48%; }	+	width: 48%;
−		+	}
		+	.seven.columns {
		+	width: 56.6666666667%;
		+	}
		+	.eight.columns {
		+	width: 65.3333333333%;
		+	}
		+	.nine.columns {
		+	width: 74.0%;
		+	}
		+	.ten.columns {
		+	width: 82.6666666667%;
		+	}
		+	.eleven.columns {
		+	width: 91.3333333333%;
		+	}
		+	.twelve.columns {
		+	width: 100%;
		+	margin-left: 0;
		+	}
		+	.one-third.column {
		+	width: 30.6666666667%;
		+	}
		+	.two-thirds.column {
		+	width: 65.3333333333%;
		+	}
		+	.one-half.column {
		+	width: 48%;
		+	}
	/* Offsets */		/* Offsets */
	.offset-by-one.column,		.offset-by-one.column,
−	.offset-by-one.columns         { margin-left: 8.66666666667%; }	+	.offset-by-one.columns {
		+	margin-left: 8.66666666667%;
		+	}
	.offset-by-two.column,		.offset-by-two.column,
−	.offset-by-two.columns         { margin-left: 17.3333333333%; }	+	.offset-by-two.columns {
		+	margin-left: 17.3333333333%;
		+	}
	.offset-by-three.column,		.offset-by-three.column,
−	.offset-by-three.columns       { margin-left: 26%;           }	+	.offset-by-three.columns {
		+	margin-left: 26%;
		+	}
	.offset-by-four.column,		.offset-by-four.column,
−	.offset-by-four.columns         { margin-left: 34.6666666667%; }	+	.offset-by-four.columns {
		+	margin-left: 34.6666666667%;
		+	}
	.offset-by-five.column,		.offset-by-five.column,
−	.offset-by-five.columns         { margin-left: 43.3333333333%; }	+	.offset-by-five.columns {
		+	margin-left: 43.3333333333%;
		+	}
	.offset-by-six.column,		.offset-by-six.column,
−	.offset-by-six.columns         { margin-left: 52%;           }	+	.offset-by-six.columns {
		+	margin-left: 52%;
		+	}
	.offset-by-seven.column,		.offset-by-seven.column,
−	.offset-by-seven.columns       { margin-left: 60.6666666667%; }	+	.offset-by-seven.columns {
		+	margin-left: 60.6666666667%;
		+	}
	.offset-by-eight.column,		.offset-by-eight.column,
−	.offset-by-eight.columns       { margin-left: 69.3333333333%; }	+	.offset-by-eight.columns {
		+	margin-left: 69.3333333333%;
		+	}
	.offset-by-nine.column,		.offset-by-nine.column,
−	.offset-by-nine.columns         { margin-left: 78.0%;         }	+	.offset-by-nine.columns {
		+	margin-left: 78.0%;
		+	}
	.offset-by-ten.column,		.offset-by-ten.column,
−	.offset-by-ten.columns         { margin-left: 86.6666666667%; }	+	.offset-by-ten.columns {
		+	margin-left: 86.6666666667%;
		+	}
	.offset-by-eleven.column,		.offset-by-eleven.column,
−	.offset-by-eleven.columns       { margin-left: 95.3333333333%; }	+	.offset-by-eleven.columns {
−		+	margin-left: 95.3333333333%;
		+	}
	.offset-by-one-third.column,		.offset-by-one-third.column,
−	.offset-by-one-third.columns   { margin-left: 34.6666666667%; }	+	.offset-by-one-third.columns {
		+	margin-left: 34.6666666667%;
		+	}
	.offset-by-two-thirds.column,		.offset-by-two-thirds.column,
−	.offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }	+	.offset-by-two-thirds.columns {
−		+	margin-left: 69.3333333333%;
		+	}
	.offset-by-one-half.column,		.offset-by-one-half.column,
−	.offset-by-one-half.columns     { margin-left: 52%; }	+	.offset-by-one-half.columns {
−		+	margin-left: 52%;
		+	}
	}		}
Line 130:		Line 196:
	/* Base Styles		/* Base Styles
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
		+
	/* NOTE		/* NOTE
	html is set to 62.5% so that all the REM measurements throughout Skeleton		html is set to 62.5% so that all the REM measurements throughout Skeleton
	are based on 10px sizing. So basically 1.5rem = 15px :) */		are based on 10px sizing. So basically 1.5rem = 15px :) */
		+
	html {		html {
−	font-size: 62.5%; }	+	font-size: 50%;
−	#body {	+	}
−	font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */	+
−	line-height: 1.6;	+	.mediawiki {
		+	font-size: 1.5em;
		+	/* currently ems cause chrome bug misinterpreting rems on body element */
	font-weight: 400;		font-weight: 400;
	font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;		font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
−	color: var(--text-color); }	+	color: var(--text-color);
		+	}
	/* Typography		/* Typography
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
−	#body h1, h2, h3, h4, h5, h6 {	+
		+	.mediawiki h1,
		+	h2,
		+	h3,
		+	h4,
		+	h5,
		+	h6 {
	margin-top: 0;		margin-top: 0;
	margin-bottom: 2rem;		margin-bottom: 2rem;
−	font-weight: 300; }	+	font-weight: 300;
−	#body h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}	+	color: var(--text-color);
−	#body h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }	+	font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
−	#body h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }	+	}
−	#body h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }	+
−	#body h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }	+	.mediawiki h1 {
−	#body h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }	+	font-size: 4.0rem;
		+	line-height: 1.2;
		+	letter-spacing: -.1rem;
		+	}
		+
		+	.mediawiki h2 {
		+	font-size: 3.6rem;
		+	line-height: 1.25;
		+	letter-spacing: -.1rem;
		+	}
		+
		+	.mediawiki h3 {
		+	font-size: 3.0rem;
		+	line-height: 1.3;
		+	letter-spacing: -.1rem;
		+	}
		+
		+	.mediawiki h4 {
		+	font-size: 2.4rem;
		+	line-height: 1.35;
		+	letter-spacing: -.08rem;
		+	}
		+
		+	.mediawiki h5 {
		+	font-size: 1.8rem;
		+	line-height: 1.5;
		+	letter-spacing: -.05rem;
		+	}
		+
		+	.mediawiki h6 {
		+	font-size: 1.5rem;
		+	line-height: 1.6;
		+	letter-spacing: 0;
		+	}
		+
	/* Larger than phablet */		/* Larger than phablet */
		+
	@media (min-width: 550px) {		@media (min-width: 550px) {
−	#body h1 { font-size: 5.0rem; }	+	.mediawiki h1 {
−	#body h2 { font-size: 4.2rem; }	+	font-size: 5.0rem;
−	#body h3 { font-size: 3.6rem; }	+	}
−	#body h4 { font-size: 3.0rem; }	+	.mediawiki h2 {
−	#body h5 { font-size: 2.4rem; }	+	font-size: 4.2rem;
−	#body h6 { font-size: 1.5rem; }	+	}
		+	.mediawiki h3 {
		+	font-size: 3.6rem;
		+	}
		+	.mediawiki h4 {
		+	font-size: 3.0rem;
		+	}
		+	.mediawiki h5 {
		+	font-size: 2.4rem;
		+	}
		+	.mediawiki h6 {
		+	font-size: 1.5rem;
		+	}
	}		}
	p {		p {
−	margin-top: 0; }	+	margin-top: 0;
		+	}
	/* Links		/* Links
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
	a {		a {
−	color: var(--a-color); }	+	color: var(--a-color);
		+	}
		+
	a:hover {		a:hover {
−	color: var(--a-sec-color); }	+	color: var(--a-sec-color);
		+	}
		+
	a:visited {		a:visited {
−	color: var(--a-vis-color);	+	color: var(--a-vis-color);
	}		}
		+
	/* Buttons		/* Buttons
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
		+	.button:visited {
		+	color: var(--text-sec-color);
		+	}
		+
	.button,		.button,
	button,		button,
Line 188:		Line 325:
	input[type="button"] {		input[type="button"] {
	display: inline-block;		display: inline-block;
−	height: 38px;	+	height: 3.8rem;
−	padding: 0 30px;	+	padding: 0 3rem;
	color: var(--text-sec-color);		color: var(--text-sec-color);
	text-align: center;		text-align: center;
	font-size: 1.5rem;		font-size: 1.5rem;
	font-weight: 600;		font-weight: 600;
−	line-height: 38px;	+	line-height: 3.8rem;
	letter-spacing: .1rem;		letter-spacing: .1rem;
	text-transform: uppercase;		text-transform: uppercase;
Line 200:		Line 337:
	white-space: nowrap;		white-space: nowrap;
	background-color: transparent;		background-color: transparent;
−	border-radius: 4px;	+	border-radius: 0.4rem;
	border: 1px solid var(--border-sec-color);		border: 1px solid var(--border-sec-color);
	cursor: pointer;		cursor: pointer;
−	box-sizing: border-box; }	+	box-sizing: border-box;
		+	}
		+
	.button:hover,		.button:hover,
	button:hover,		button:hover,
Line 216:		Line 355:
	color: var(--text-active-color);		color: var(--text-active-color);
	border-color: var(--border-active-color);		border-color: var(--border-active-color);
−	outline: 0;	+	outline: 0;
−	text-decoration: none;}	+	text-decoration: none;
		+	background-color: var(--btn-active-color);
		+	}
		+
	.button.button-primary,		.button.button-primary,
	button.button-primary,		button.button-primary,
Line 225:		Line 367:
	color: #FFF;		color: #FFF;
	background-color: #33C3F0;		background-color: #33C3F0;
−	border-color: #33c4f0; }	+	border-color: #33c4f0;
		+	}
		+
	.button.button-primary:hover,		.button.button-primary:hover,
	button.button-primary:hover,		button.button-primary:hover,
Line 238:		Line 382:
	color: #FFF;		color: #FFF;
	background-color: #1eaedb;		background-color: #1eaedb;
−	border-color: #1eaedb; }	+	border-color: #1eaedb;
−	.button:visited {	+
−	color: var(--text-sec-color);	+
	}		}
		+
	/* Forms		/* Forms
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
	input[type="email"],		input[type="email"],
	input[type="number"],		input[type="number"],
Line 255:		Line 399:
	select {		select {
	height: 38px;		height: 38px;
−	padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */	+	padding: 6px 10px;
		+	/* The 6px vertically centers text on FF, ignored by Webkit */
	background-color: #fff;		background-color: #fff;
	border: 1px solid #D1D1D1;		border: 1px solid #D1D1D1;
	border-radius: 4px;		border-radius: 4px;
	box-shadow: none;		box-shadow: none;
−	box-sizing: border-box; }	+	box-sizing: border-box;
		+	}
		+
		+
	/* Removes awkward default styles on some inputs for iOS */		/* Removes awkward default styles on some inputs for iOS */
		+
	input[type="email"],		input[type="email"],
	input[type="number"],		input[type="number"],
Line 271:		Line 420:
	textarea {		textarea {
	-webkit-appearance: none;		-webkit-appearance: none;
−	-moz-appearance: none;	+	-moz-appearance: none;
−	appearance: none; }	+	appearance: none;
		+	}
		+
	textarea {		textarea {
	min-height: 65px;		min-height: 65px;
	padding-top: 6px;		padding-top: 6px;
−	padding-bottom: 6px; }	+	padding-bottom: 6px;
		+	}
		+
	input[type="email"]:focus,		input[type="email"]:focus,
	input[type="number"]:focus,		input[type="number"]:focus,
Line 287:		Line 440:
	select:focus {		select:focus {
	border: 1px solid #33C3F0;		border: 1px solid #33C3F0;
−	outline: 0; }	+	outline: 0;
		+	}
		+
	label,		label,
	legend {		legend {
	display: block;		display: block;
	margin-bottom: .5rem;		margin-bottom: .5rem;
−	font-weight: 600; }	+	font-weight: 600;
		+	}
		+
	fieldset {		fieldset {
	padding: 0;		padding: 0;
−	border-width: 0; }	+	border-width: 0;
		+	}
		+
	input[type="checkbox"],		input[type="checkbox"],
	input[type="radio"] {		input[type="radio"] {
−	display: inline; }	+	display: inline;
−	label > .label-body {	+	}
		+
		+	label>.label-body {
	display: inline-block;		display: inline-block;
	margin-left: .5rem;		margin-left: .5rem;
−	font-weight: normal; }	+	font-weight: normal;
		+	}
	/* Lists		/* Lists
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
	ul {		ul {
−	list-style: circle inside; }	+	list-style: circle inside;
		+	}
		+
	ol {		ol {
−	list-style: decimal inside; }	+	list-style: decimal inside;
−	ol, ul {	+	}
		+
		+	ol,
		+	ul {
	padding-left: 0;		padding-left: 0;
−	margin-top: 0; }	+	margin-top: 0;
		+	}
		+
	ul ul,		ul ul,
	ul ol,		ul ol,
Line 319:		Line 489:
	ol ul {		ol ul {
	margin: 1.5rem 0 1.5rem 3rem;		margin: 1.5rem 0 1.5rem 3rem;
−	font-size: 90%; }	+	font-size: 90%;
		+	}
		+
	li {		li {
−	margin-bottom: 1rem; }	+	margin-bottom: 1rem;
		+	}
	/* Code		/* Code
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
	code {		code {
	padding: .2rem .5rem;		padding: .2rem .5rem;
	margin: 0 .2rem;		margin: 0 .2rem;
−	font-size: 90%;	+	font-size: 120%;
	white-space: nowrap;		white-space: nowrap;
	background: #F1F1F1;		background: #F1F1F1;
	border: 1px solid #E1E1E1;		border: 1px solid #E1E1E1;
−	border-radius: 4px;	+	border-radius: 4px;
	font-family: monospace;		font-family: monospace;
	}		}
−	pre > code {	+
		+	pre>code {
	display: block;		display: block;
	padding: 1rem 1.5rem;		padding: 1rem 1.5rem;
−	white-space: pre; }	+	white-space: pre;
		+	}
	/* Tables		/* Tables
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
	th,		th,
	td {		td {
	padding: 12px 15px;		padding: 12px 15px;
	text-align: left;		text-align: left;
−	border-bottom: 1px solid #E1E1E1; }	+	border-bottom: 1px solid #E1E1E1;
		+	}
		+
	th:first-child,		th:first-child,
	td:first-child {		td:first-child {
−	padding-left: 0; }	+	padding-left: 0;
		+	}
		+
	th:last-child,		th:last-child,
	td:last-child {		td:last-child {
−	padding-right: 0; }	+	padding-right: 0;
		+	}
	/* Spacing		/* Spacing
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
	button,		button,
	.button {		.button {
−	margin-bottom: 1rem; }	+	margin-bottom: 1rem;
		+	}
		+
	input,		input,
	textarea,		textarea,
	select,		select,
	fieldset {		fieldset {
−	margin-bottom: 1.5rem; }	+	margin-bottom: 1.5rem;
		+	}
		+
	pre,		pre,
	blockquote,		blockquote,
Line 376:		Line 563:
	ol,		ol,
	form {		form {
−	margin-bottom: 2.5rem; }	+	margin-bottom: 2.5rem;
		+	}
	/* Utilities		/* Utilities
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
	.u-full-width {		.u-full-width {
	width: 100%;		width: 100%;
−	box-sizing: border-box; }	+	box-sizing: border-box;
		+	}
		+
	.u-max-full-width {		.u-max-full-width {
	max-width: 100%;		max-width: 100%;
−	box-sizing: border-box; }	+	box-sizing: border-box;
		+	}
		+
	.u-pull-right {		.u-pull-right {
−	float: right; }	+	float: right;
		+	}
		+
	.u-pull-left {		.u-pull-left {
−	float: left; }	+	float: left;
		+	}
	/* Misc		/* Misc
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
	hr {		hr {
−	margin-top: 2rem;	+	margin-top: 0;
−	margin-bottom: 2rem;	+	margin-bottom: 0;
	border-width: 0;		border-width: 0;
−	border-top: 1px solid var(--border-color); }	+	border-top: 1px solid var(--border-color);
		+	}
	/* Clearing		/* Clearing
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
	/* Self Clearing Goodness */		/* Self Clearing Goodness */
		+
	.container:after,		.container:after,
	.row:after,		.row:after,
Line 411:		Line 611:
	content: "";		content: "";
	display: table;		display: table;
−	clear: both; }	+	clear: both;
		+	}
	/* Media Queries		/* Media Queries
	–––––––––––––––––––––––––––––––––––––––––––––––––– */		–––––––––––––––––––––––––––––––––––––––––––––––––– */
		+
		+
	/*		/*
	Note: The best way to structure the use of media queries is to create the queries		Note: The best way to structure the use of media queries is to create the queries
Line 425:		Line 628:
	/* Larger than mobile */		/* Larger than mobile */
		+
	@media (min-width: 400px) {}		@media (min-width: 400px) {}
		+
	/* Larger than phablet (also point when grid becomes active) */		/* Larger than phablet (also point when grid becomes active) */
		+
	@media (min-width: 550px) {}		@media (min-width: 550px) {}
		+
	/* Larger than tablet */		/* Larger than tablet */
		+
	@media (min-width: 750px) {}		@media (min-width: 750px) {}
		+
	/* Larger than desktop */		/* Larger than desktop */
		+
	@media (min-width: 1000px) {}		@media (min-width: 1000px) {}
		+
	/* Larger than Desktop HD */		/* Larger than Desktop HD */
		+
	@media (min-width: 1200px) {}		@media (min-width: 1200px) {}

---

Latest revision as of 12:01, 4 May 2017

root {

 #0acd86 #52d8ca #3bcef6 #5999f9 #4f44e7 #089076;
 --background-color: #fefefe;
 --border-color: #a2a2a2;
 /*  #a2a2a2*/
 --border-sec-color: #bbb;
 --border-active-color: #888;
 --a-color: #1EAEDB;
 --a-sec-color: #0FA0CE;
 --a-vis-color: var(--a-color);
 --text-color: #222;
 --text-sec-color: #555;
 --text-active-color: #fefefe;
 /*    #333;*/
 --btn-active-color: #3bcef6;

}

/*

• Skeleton V2.0.4
• Copyright 2014, Dave Gamache
• www.getskeleton.com
• Free to use under the MIT license.
• http://www.opensource.org/licenses/mit-license.php
• 12/29/2014
• /

/* Table of contents –––––––––––––––––––––––––––––––––––––––––––––––––– - Grid - Base Styles - Typography - Links - Buttons - Forms - Lists - Code - Tables - Spacing - Utilities - Clearing - Media Queries

• /

/* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */

.container {

 position: relative;
 width: 100%;
 max-width: 1250px;
 margin: 0 auto;
 box-sizing: border-box;

}

.column, .columns {

 width: 100%;
 float: left;
 box-sizing: border-box;

}

/* For devices larger than 400px */

@media (min-width: 400px) {

 .container {
   width: 95%;
 }

}

/* For devices larger than 550px */

@media (min-width: 550px) {

 .container {
   width: 90%;
 }
 .column,
 .columns {
   margin-left: 4%;
 }
 .column:first-child,
 .columns:first-child {
   margin-left: 0;
 }
 .one.column,
 .one.columns {
   width: 4.66666666667%;
 }
 .two.columns {
   width: 13.3333333333%;
 }
 .three.columns {
   width: 22%;
 }
 .four.columns {
   width: 30.6666666667%;
 }
 .five.columns {
   width: 39.3333333333%;
 }
 .six.columns {
   width: 48%;
 }
 .seven.columns {
   width: 56.6666666667%;
 }
 .eight.columns {
   width: 65.3333333333%;
 }
 .nine.columns {
   width: 74.0%;
 }
 .ten.columns {
   width: 82.6666666667%;
 }
 .eleven.columns {
   width: 91.3333333333%;
 }
 .twelve.columns {
   width: 100%;
   margin-left: 0;
 }
 .one-third.column {
   width: 30.6666666667%;
 }
 .two-thirds.column {
   width: 65.3333333333%;
 }
 .one-half.column {
   width: 48%;
 }
 /* Offsets */
 .offset-by-one.column,
 .offset-by-one.columns {
   margin-left: 8.66666666667%;
 }
 .offset-by-two.column,
 .offset-by-two.columns {
   margin-left: 17.3333333333%;
 }
 .offset-by-three.column,
 .offset-by-three.columns {
   margin-left: 26%;
 }
 .offset-by-four.column,
 .offset-by-four.columns {
   margin-left: 34.6666666667%;
 }
 .offset-by-five.column,
 .offset-by-five.columns {
   margin-left: 43.3333333333%;
 }
 .offset-by-six.column,
 .offset-by-six.columns {
   margin-left: 52%;
 }
 .offset-by-seven.column,
 .offset-by-seven.columns {
   margin-left: 60.6666666667%;
 }
 .offset-by-eight.column,
 .offset-by-eight.columns {
   margin-left: 69.3333333333%;
 }
 .offset-by-nine.column,
 .offset-by-nine.columns {
   margin-left: 78.0%;
 }
 .offset-by-ten.column,
 .offset-by-ten.columns {
   margin-left: 86.6666666667%;
 }
 .offset-by-eleven.column,
 .offset-by-eleven.columns {
   margin-left: 95.3333333333%;
 }
 .offset-by-one-third.column,
 .offset-by-one-third.columns {
   margin-left: 34.6666666667%;
 }
 .offset-by-two-thirds.column,
 .offset-by-two-thirds.columns {
   margin-left: 69.3333333333%;
 }
 .offset-by-one-half.column,
 .offset-by-one-half.columns {
   margin-left: 52%;
 }

}

/* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */

html {

 font-size: 50%;

}

.mediawiki {

 font-size: 1.5em;
 /* currently ems cause chrome bug misinterpreting rems on body element */
 font-weight: 400;
 font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 color: var(--text-color);

}

/* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */

.mediawiki h1, h2, h3, h4, h5, h6 {

 margin-top: 0;
 margin-bottom: 2rem;
 font-weight: 300;
 color: var(--text-color);
 font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.mediawiki h1 {

 font-size: 4.0rem;
 line-height: 1.2;
 letter-spacing: -.1rem;

}

.mediawiki h2 {

 font-size: 3.6rem;
 line-height: 1.25;
 letter-spacing: -.1rem;

}

.mediawiki h3 {

 font-size: 3.0rem;
 line-height: 1.3;
 letter-spacing: -.1rem;

}

.mediawiki h4 {

 font-size: 2.4rem;
 line-height: 1.35;
 letter-spacing: -.08rem;

}

.mediawiki h5 {

 font-size: 1.8rem;
 line-height: 1.5;
 letter-spacing: -.05rem;

}

.mediawiki h6 {

 font-size: 1.5rem;
 line-height: 1.6;
 letter-spacing: 0;

}

/* Larger than phablet */

@media (min-width: 550px) {

 .mediawiki h1 {
   font-size: 5.0rem;
 }
 .mediawiki h2 {
   font-size: 4.2rem;
 }
 .mediawiki h3 {
   font-size: 3.6rem;
 }
 .mediawiki h4 {
   font-size: 3.0rem;
 }
 .mediawiki h5 {
   font-size: 2.4rem;
 }
 .mediawiki h6 {
   font-size: 1.5rem;
 }

}

p {

 margin-top: 0;

}

/* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */

a {

 color: var(--a-color);

}

a:hover {

 color: var(--a-sec-color);

}

a:visited {

 color: var(--a-vis-color);

}

/* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */

.button:visited {

 color: var(--text-sec-color);

}

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {

 display: inline-block;
 height: 3.8rem;
 padding: 0 3rem;
 color: var(--text-sec-color);
 text-align: center;
 font-size: 1.5rem;
 font-weight: 600;
 line-height: 3.8rem;
 letter-spacing: .1rem;
 text-transform: uppercase;
 text-decoration: none;
 white-space: nowrap;
 background-color: transparent;
 border-radius: 0.4rem;
 border: 1px solid var(--border-sec-color);
 cursor: pointer;
 box-sizing: border-box;

}

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {

 color: var(--text-active-color);
 border-color: var(--border-active-color);
 outline: 0;
 text-decoration: none;
 background-color: var(--btn-active-color);

}

.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {

 color: #FFF;
 background-color: #33C3F0;
 border-color: #33c4f0;

}

.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {

 color: #FFF;
 background-color: #1eaedb;
 border-color: #1eaedb;

}

/* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */

input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {

 height: 38px;
 padding: 6px 10px;
 /* The 6px vertically centers text on FF, ignored by Webkit */
 background-color: #fff;
 border: 1px solid #D1D1D1;
 border-radius: 4px;
 box-shadow: none;
 box-sizing: border-box;

}

/* Removes awkward default styles on some inputs for iOS */

input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {

 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;

}

textarea {

 min-height: 65px;
 padding-top: 6px;
 padding-bottom: 6px;

}

input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {

 border: 1px solid #33C3F0;
 outline: 0;

}

label, legend {

 display: block;
 margin-bottom: .5rem;
 font-weight: 600;

}

fieldset {

 padding: 0;
 border-width: 0;

}

input[type="checkbox"], input[type="radio"] {

 display: inline;

}

label>.label-body {

 display: inline-block;
 margin-left: .5rem;
 font-weight: normal;

}

/* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */

ul {

 list-style: circle inside;

}

ol {

 list-style: decimal inside;

}

ol, ul {

 padding-left: 0;
 margin-top: 0;

}

ul ul, ul ol, ol ol, ol ul {

 margin: 1.5rem 0 1.5rem 3rem;
 font-size: 90%;

}

li {

 margin-bottom: 1rem;

}

/* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */

code {

 padding: .2rem .5rem;
 margin: 0 .2rem;
 font-size: 120%;
 white-space: nowrap;
 background: #F1F1F1;
 border: 1px solid #E1E1E1;
 border-radius: 4px;
 font-family: monospace;

}

pre>code {

 display: block;
 padding: 1rem 1.5rem;
 white-space: pre;

}

/* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */

th, td {

 padding: 12px 15px;
 text-align: left;
 border-bottom: 1px solid #E1E1E1;

}

th:first-child, td:first-child {

 padding-left: 0;

}

th:last-child, td:last-child {

 padding-right: 0;

}

/* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */

button, .button {

 margin-bottom: 1rem;

}

input, textarea, select, fieldset {

 margin-bottom: 1.5rem;

}

pre, blockquote, dl, figure, table, p, ul, ol, form {

 margin-bottom: 2.5rem;

}

/* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */

.u-full-width {

 width: 100%;
 box-sizing: border-box;

}

.u-max-full-width {

 max-width: 100%;
 box-sizing: border-box;

}

.u-pull-right {

 float: right;

}

.u-pull-left {

 float: left;

}

/* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */

hr {

 margin-top: 0;
 margin-bottom: 0;
 border-width: 0;
 border-top: 1px solid var(--border-color);

}

/* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */

.container:after, .row:after, .u-cf {

 content: "";
 display: table;
 clear: both;

}

/* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Note: The best way to structure the use of media queries is to create the queries near the relevant code. For example, if you wanted to change the styles for buttons on small devices, paste the mobile query code up in the buttons section and style it there.

• /

/* Larger than mobile */

@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */

@media (min-width: 550px) {}

/* Larger than tablet */

@media (min-width: 750px) {}

/* Larger than desktop */

@media (min-width: 1000px) {}

/* Larger than Desktop HD */

@media (min-width: 1200px) {}