gabriel/tataslate
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add Otavio's fixes.

Browse Source
This commit is contained in:
gabriel becker 2022-07-28 00:07:35 -03:00
parent 4e9c3cc9f6
commit e59a79de07
3 changed files with 178 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
layouts/index.html
View File

@ -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>

54
static/css/tataslate.css
View File

@ -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;
}

179
static/js/tataslate.js
View File

@ -1,34 +1,147 @@
$(document).ready(function () {
//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);
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;
}
.cdiv_2:nth-child(24) {
margin-right:0px;
}
});