Styled page.

README.md

@@ -1,16 +1,21 @@
+
 Thaumcraft 4.1 Research Helper
 ==========
 
-[Link](http://ythri.github.io/tcresearch/)
+[This script](http://jesuscuenca.github.io/tcresearch/) helps you with your Thaumcraft 4.x research. If you have a research note with two aspects that you don't know how to connect, this is your tool.
+
++ Select the __aspect from wich__ you have to __start__.
++ Select the __aspect__ you have __to get to__.
++ Additionally, you can __specify the minimum number of steps__ needed, that is, the number of empty spaces between the two aspects in your research note.
++ __Hit Go!__
+
+If you are unhappy with the path you got, because you do not have access to those aspects yet or they are quite rare, simply disable those aspects in the config section. Besides, clicking an aspect in the search result will rerun the search again, but with aspect disabled (just momentarily).
+
+
+### Info
+
+This work is licensed under a [Creative Commons Attribution 4.0 License](http://creativecommons.org/licenses/by/4.0/).
 
-This script helps you with your Thaumcraft 4.1 research. If you have a research note with two aspects that you don't 
-know how to connect, simply choose them in the dropdown list above (From: and To:). Additionally, choose the minimum 
-number of steps between those two aspects. If in your research note, the two aspects have two blank spaces between 
-them, choose the value 2 for Min. Steps. Then click Find Connection and the script will search for the shortest path 
-(well, with at least the minimum length) that connects the two aspects. Note that sometimes the length of any path is 
-longer then the given minimum, but this should not be a problem for your research note.
+Original sources are hosted in [ythri GitHub repo](https://github.com/ythri/tcresearch). Original page can be found [here](http://ythri.github.io/tcresearch/).
 
-If your are unhappy with the path you got, because you do not have access to those aspects yet or they are quite rare, 
-simply disable those aspects from Available Aspects:. The script will then try to find paths without these. Note that 
-this may cause the path to grow longer. If too many aspects are disabled and there are no paths left without any of 
-those, the script will try to find the shortest path using the minimal number of disabled aspects.
+Styled by [Jesús Cuenca](http://about.me/jesus.cuenca). Fork hosted in [GitHub](https://github.com/JesusCuenca/tcresearch). Page can be found on its [GitHub page](http://jesuscuenca.github.io/tcresearch/)

css/LESS/_basic.less

@@ -0,0 +1,151 @@
+/**
+ * Basic styles that are common throughout the page.
+ */
+
+@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,600,400');
+
+@media (min-width: 768px) {
+	.full-height {
+		height: 100%;
+	}
+}
+body {
+	font-family: 'Open Sans', Helvetica, sans-serif;
+	font-size: 62.5%;
+
+	background-image: url('../zwartevilt.png');
+	background-repeat: repeat;
+	background-attachment: fixed;
+	color: #fff;
+}
+.tb {
+	display: table;
+	margin: 0 auto;
+}
+.tbc {
+	display: table-cell;
+}
+.vam {
+	vertical-align: middle;
+}
+label.btn {
+	input[type=checkbox],
+	input[type=radio] {
+		display: none;
+	}
+}
+.btn {
+	&:hover,
+	&:focus,
+	&:active,
+	.active {
+		outline: none;
+	}
+}
+.btn.btn-default {
+	border-color: @color-primary-500;
+	color: @color-primary-500;
+	background-color: transparent;
+
+	&:hover,
+	&:focus {
+		color: @color-text-lighter;
+		background-color: @color-primary-600;
+	}
+
+	&:active,
+	&.active  {
+		color: @color-text-lighter;
+		background-color: @color-primary-800;
+		border-color: @color-primary-500;
+		box-shadow: none;
+	}
+}
+.btn.btn-primary {
+	border-color: @color-primary-400;
+	background-color: @color-primary-500;
+	color: @color-text-lighter;
+
+	&:hover,
+	&:focus,
+	&.active {
+		background-color: @color-primary-600;
+	}
+
+	&:active {
+		background-color: @color-primary-800;
+		border-color: @color-primary-500;
+	}
+
+}
+h2 {
+	font-size: 2.5rem;
+	font-weight: 400;
+	font-variant: small-caps;
+	color: @color-secondary-500;
+	text-align: center;
+	padding: 10px 0;
+}
+
+#combination-box-wrapper {
+
+	position: fixed;
+	bottom: 0;
+	text-align: center;
+	width: 100%;
+
+	#combination-box {
+		display: none;
+		padding: 10px 0;
+		background-image: url('../zwartevilt.png');
+		background-repeat: repeat;
+		background-attachment: fixed;
+		border-style: solid;
+		border-color: @color-primary-500;
+		border-width: 1px 1px 0 1px;
+		border-radius: 3px;
+	}
+
+	#left,
+	#right,
+	#equals {
+
+		padding: 0 18px;
+		position: relative;
+
+		img {
+			max-width: 24px;
+			margin: 0 auto;
+		}
+		.aspect-name {
+			font-size: 1.2rem;
+			font-weight: 400;
+			text-transform: capitalize;
+		}
+		.aspect-desc {
+			font-size: 1rem;
+			font-weight: 300;
+			font-style: italic;
+			text-transform: capitalize;
+		}
+	}
+	#right::before,
+	#left::before {
+		font-family: 'FontAwesome';
+		position: absolute;
+		top: 12px;
+		right: -6px;
+		font-size: 1.2rem;
+		margin-left: 5px;
+	}
+	#left::before {
+		content: '\f067';
+	}
+	#right::before {
+		content: '\f054';
+	}
+
+}
+
+
+

css/LESS/_config.less

@@ -0,0 +1,103 @@
+/**
+ * Config Section styles
+ */
+#config {
+	display: none;
+	margin-top: 50px;
+	margin-bottom: 50px;
+
+	.btn-group {
+		margin-right: 15px;
+		padding-bottom: 15px;
+
+		&:last-child {
+			margin: 0;
+		}
+	}
+
+	p.avail-label {
+		font-size: 1.8em;
+		color: @color-text-light;
+		font-weight: 600;
+		text-transform: uppercase;
+		margin: 20px 0;
+		text-align: center;
+	}
+
+	#avail {
+		font-size: 0;
+		text-align: center;
+		padding: 0;
+
+		&::-webkit-scrollbar-track {
+			// -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
+			background-color: transparent;
+			border: 1px solid @color-primary-300;
+		}
+		&::-webkit-scrollbar {
+			width: 6px;
+			background-color: transparent;
+		}
+		&::-webkit-scrollbar-thumb {
+			background-color: @color-primary-300;
+		}
+
+		li.aspect {
+			width: 20%;
+			display: inline-block;
+			text-align: center;
+			cursor: pointer;
+			padding: 5px 5px 10px 5px;
+
+			* {
+				padding: 0;
+				margin: 0;
+				overflow: initial;
+				float: none;
+			}
+
+			img {
+				display: inline-block;
+			}
+
+			.aspect-text {
+				width: 100%;
+				text-align: center;
+				color: @color-text-light;
+
+				h4 {
+					font-size: 1.4rem;
+					font-weight: 400;
+					text-transform: capitalize;
+					margin: 0;
+					padding-top: 5px;
+				}
+				.desc {
+					font-size: 1.2rem;
+					font-weight: 300;
+					text-transform: capitalize;
+					font-style: italic;
+				}
+			}
+
+			&.unavail {
+				background-color: fade(@color-primary-300, 20%);
+				&:hover {
+					background-color: fade(@color-primary-500, 20%);
+				}
+			}
+
+			&:hover {
+				background-color: fade(@color-secondary-300, 30%);
+			}
+		}
+	}
+
+}
+
+@media (max-width: 768px) {
+	#config #avail li.aspect {
+		width: 33.3333%;
+	}
+}
+

css/LESS/_info.less

@@ -0,0 +1,40 @@
+/**
+ * Info section styles
+ */
+#info {
+
+	margin-top: 50px;
+	margin-bottom: 50px;
+
+
+	display: none;
+	font-size: 1.5rem;
+
+	strong {
+		font-weight: 600;
+		color: @color-primary-300;
+	}
+
+	.web-info {
+
+		margin-top: 20px;
+		font-size: 1.2rem;
+
+		p {
+			margin-bottom: 3px;
+			text-align: center;
+			a {
+				color: @color-secondary-500;
+				&:hover,
+				&:focus,
+				&:active {
+					outline: none;
+					color: @color-primary-500;
+				}
+			}
+		}
+
+	}
+
+
+}