From e59a79de07d1ab8f9c5036394a6bdb24acf26313 Mon Sep 17 00:00:00 2001 From: gabriel becker Date: Thu, 28 Jul 2022 00:07:35 -0300 Subject: [PATCH] Add Otavio's fixes. --- layouts/index.html | 9 +- static/css/tataslate.css | 54 ++++++------ static/js/tataslate.js | 177 ++++++++++++++++++++++++++++++++------- 3 files changed, 177 insertions(+), 63 deletions(-) diff --git a/layouts/index.html b/layouts/index.html index c41a36f..afa1da7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,5 +1,6 @@ - - + + + {{ .Title }}{{ if .Site.Params.Favicon }} {{ end }} @@ -13,13 +14,15 @@
+
+
-
{{$jump := .Site.Params.OpenLinksInNewWindow | default true }}{{ range .Site.Data.links.tiles }} +
{{$jump := .Site.Params.OpenLinksInNewWindow | default true }}{{ range .Site.Data.links.tiles }} {{ partial "tile.html" (dict "Link" . "Jump" $jump)}}{{ end }}
diff --git a/static/css/tataslate.css b/static/css/tataslate.css index 1634ee2..5bc2db3 100644 --- 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; +} \ No newline at end of file diff --git a/static/js/tataslate.js b/static/js/tataslate.js index 229dc11..5bc2db3 100644 --- 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; +} + +@font-face { + font-family: Code; + src: url('fonts/codelight.otf'); +} + +/*header*/ + + +header { + height: 40px; + width: 100%; + /*border-bottom: 1px solid #e8e8e8;*/ +} + +#viewmode-switch { + position:relative; + margin:auto; + width:100px; +} + +#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; +} + +.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; +} - //Content Fade - - - $('.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); - }); - - - //Change View Mode - - $('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'); - }); - - function cdivclass() { - $('#container>div#here').toggleClass('cdiv_1'); - $('#container>div#here').toggleClass('cdiv_2'); - }; - - function c_fadein() { - $('#container>div#here').stop(true,true).fadeTo(500,0.5); - } - }); \ No newline at end of file +.cdiv_2:nth-child(24) { + margin-right:0px; +} \ No newline at end of file