Add Otavio's fixes.

2 years ago · e59a79de07
3 changed files with 177 additions and 63 deletions
--- a/layouts/index.html
+++ b/layouts/index.html
@ -1,3 +1,4 @@
+<!DOCTYPE html>
 	<html>
 		<head>
    <title>{{ .Title }}</title>{{ if .Site.Params.Favicon }}
@ -13,13 +14,15 @@
 <body>

 	<header>
+		
 		<div id='viewmode-switch'>
 			<input type='button' id='vmsb' class='vms' class='vmsbhl'/>
 		</div>
+
 	</header>

 	<content>
-		<div id="container-x">{{$jump := .Site.Params.OpenLinksInNewWindow | default true }}{{ range .Site.Data.links.tiles }}
+		<div id="container">{{$jump := .Site.Params.OpenLinksInNewWindow | default true }}{{ range .Site.Data.links.tiles }}
 {{ partial "tile.html" (dict "Link" . "Jump" $jump)}}{{ end }}
 		</div>
 	</content>
--- a/static/css/tataslate.css
+++ b/static/css/tataslate.css
@ -77,15 +77,11 @@ content {
 #container {
 	margin:auto;
 	max-width:948px;
-	margin-top:150px;
-	padding-bottom:150px;
+	margin-top:200px;
+	margin-bottom:40px;
 	transition: height 1s;
 }

-a {
-	position: relative;
-}
-
 .cdiv_1 {
 	height:200px;
 	width:200px;
@ -97,7 +93,6 @@ a {
 	margin-bottom:40px;
 	opacity:0.5;
 	background-color: #fff;
-	display: inline-block;
 }

 .cdiv_2{
@ -111,39 +106,42 @@ a {
 	margin-bottom:20px;
 	opacity:0.5;
 	background-color: #e2e2e2;
-	display: inline-block;
 }

 .cdiv_1 img {
-	height:inherit;
-	width:inherit;
+	height:200px;
+	width:200px;
 	border-radius:100%;
 	opacity:0,6;
-	position: absolute;
-	text-align: center;
 }

 .cdiv_2 img {
-	height:inherit;
-	width:inherit;
+	height:100px;
+	width:100px;
 	border-radius:100%;
 	opacity:0,6;
-	position: absolute;
 }

-.cdiv_1 h1 {
-	position: absolute;
-	text-align: center;
-	height: 50px;
-	width: inherit;
-	top: 25%;
+.cdiv_1:nth-child(4) {
+	margin-right:0px;
 }

-.cdiv_2  h1 {
-	position: absolute;
-	text-align: center;
-	height: 50px;
-	width: inherit;
-	top: 10%;
-	font-size: 15px
+.cdiv_1:nth-child(8) {
+	margin-right:0px;
+}
+
+.cdiv_1:nth-child(12) {
+	margin-right:0px;
+}
+
+.cdiv_2:nth-child(8) {
+	margin-right:0px;
+}
+
+.cdiv_2:nth-child(16) {
+	margin-right:0px;
+}
+
+.cdiv_2:nth-child(24) {
+	margin-right:0px;
 }
--- a/static/js/tataslate.js
+++ b/static/js/tataslate.js
@ -1,34 +1,147 @@
-$(document).ready(function () {
+body {
+	margin: 0px;
+	padding: 0px;
+	background-color: #000;
+	height: 100%;
+	width: 100%;
+	position:absolute;
+}
+
+body::-webkit-scrollbar {
+    width: 10px;
+}
+ 
+body::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	border: none;
+}
 
+body::-webkit-scrollbar-thumb {
+  background-color: #cccccc;
+  outline: 1px solid #cccccc;
+}

-    //Content Fade
+@font-face {
+	font-family: Code;
+	src: url('fonts/codelight.otf');
+}

+/*header*/

-        $('.cdiv_1,.cdiv_2').mouseenter(function test2() {
-            $(this).stop(true,true).fadeTo(280 , 1);
-        });
-        $('.cdiv_1,.cdiv_2').mouseleave(function test3(){
-            $(this).stop(true,true).fadeTo(600,0.6);
-        });

+header {
+	height: 40px;
+	width: 100%;
+	/*border-bottom: 1px solid #e8e8e8;*/
+}

-    //Change View Mode
+#viewmode-switch {
+	position:relative;
+	margin:auto;
+	width:100px;
+}

-        $('input.vms').click(function test1() {
-            $('#container>div#here').stop(true, true).fadeTo(500,0);
-            setTimeout(cdivclass,510);
-            setTimeout(c_fadein,550);
-            $(this).toggleClass('vms');
-            $(this).toggleClass('vmshl');
-            $('#viewmode-switch').css('margin', 'auto');
-        });
+#vmsb{
+	outline-color: transparent;
+	position:relative;
+	margin-top:2.5px;
+	width: 100px;
+	color: white;
+	font-family: Code;
+	font-size: 22px;
+	height: 34px;
+	border-radius: 30px;
+	position: absolute;
+}

-        function cdivclass() {
-            $('#container>div#here').toggleClass('cdiv_1');
-            $('#container>div#here').toggleClass('cdiv_2');
-        };
+.vms {
+	background-color: #d9d9d9;
+	border: 1px solid transparent;
+	transition: background-color 1s;
+	position: absolute;
+}
+
+.vmshl {
+	background-color: #4a5d68;
+	transition: background-color 1s;
+	border: 1px solid transparent;
+	position: absolute;
+}
+
+/*content*/
+
+content {
+	
+}
+
+#container {
+	margin:auto;
+	max-width:948px;
+	margin-top:200px;
+	margin-bottom:40px;
+	transition: height 1s;
+}
+
+.cdiv_1 {
+	height:200px;
+	width:200px;
+	border-radius:100%;
+	box-shadow: 0 0 10px black;
+	border: 7px solid #e8e8e8;
+	display: inline-block;
+	margin-right:20px;
+	margin-bottom:40px;
+	opacity:0.5;
+	background-color: #fff;
+}
+
+.cdiv_2{
+	height: 100px;
+	width: 100px;
+	border-radius:100%;
+	box-shadow: 0 0 7px black;
+	border: 3px solid #e8e8e8;
+	display: inline-block;
+	margin-right: 10px;
+	margin-bottom:20px;
+	opacity:0.5;
+	background-color: #e2e2e2;
+}
+
+.cdiv_1 img {
+	height:200px;
+	width:200px;
+	border-radius:100%;
+	opacity:0,6;
+}
+
+.cdiv_2 img {
+	height:100px;
+	width:100px;
+	border-radius:100%;
+	opacity:0,6;
+}
+
+.cdiv_1:nth-child(4) {
+	margin-right:0px;
+}
+
+.cdiv_1:nth-child(8) {
+	margin-right:0px;
+}
+
+.cdiv_1:nth-child(12) {
+	margin-right:0px;
+}
+
+.cdiv_2:nth-child(8) {
+	margin-right:0px;
+}
+
+.cdiv_2:nth-child(16) {
+	margin-right:0px;
+}

-        function c_fadein() {
-            $('#container>div#here').stop(true,true).fadeTo(500,0.5);
+.cdiv_2:nth-child(24) {
+	margin-right:0px;
 }
-    });