Change theme
This commit is contained in:
gabriel becker
parent
8a62aa2e75
commit
4e9c3cc9f6
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 548 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
BIN
images/tn.png
BIN
images/tn.png
Binary file not shown.
|
Before Width: | Height: | Size: 260 KiB |
@ -1,6 +1,6 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/slate.css">
|
||||
<link rel="stylesheet" href="css/tataslate.css">
|
||||
<title>slate</title>
|
||||
</head>
|
||||
|
||||
@ -39,5 +39,5 @@
|
||||
|
||||
</body>
|
||||
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
|
||||
<script src="js/slate.js"></script>
|
||||
<script src="js/tataslate.js"></script>
|
||||
</html>
|
||||
|
||||
@ -2,18 +2,29 @@
|
||||
<head>
|
||||
<title>{{ .Title }}</title>{{ if .Site.Params.Favicon }}
|
||||
<link rel="shortcut icon" href="{{ .Site.Params.Favicon }}">{{ end }}
|
||||
<link rel="stylesheet" href="css/slate.css">
|
||||
<link type='text/css' rel='stylesheet' href='css/tataslate.css'/>
|
||||
<script src='js/jq.min.js'></script>
|
||||
<script src='js/tataslate.js'></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
</head>
|
||||
|
||||
<body{{ if .Site.Params.BackgroundStyle }} style='background: {{ .Site.Params.BackgroundStyle | safeCSS }};'{{ end }}
|
||||
{{- if .Site.Params.BackgroundImages }} data-backgrounds='{{ range .Site.Params.BackgroundImages }}{{ . }},{{ end }}'{{- end }}>
|
||||
|
||||
{{ partial "nav.html" . }}
|
||||
<body>
|
||||
|
||||
<div class="container">{{ partial "tile_slate.html" . }}
|
||||
</div>
|
||||
<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 }}
|
||||
{{ partial "tile.html" (dict "Link" . "Jump" $jump)}}{{ end }}
|
||||
</div>
|
||||
</content>
|
||||
|
||||
</body>
|
||||
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
|
||||
<script src="js/slate.js"></script>
|
||||
<!-- <script src="js/tataslate.js"></script> -->
|
||||
</html>
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<a class="tile tile-link" href="{{ .Link.url }}" data-groups='{{ if .Link.tags }}{{ delimit .Link.tags "," }}{{ end }}'{{ if .Jump }} target="_blank"{{ end }}>
|
||||
<div class="tile-box"
|
||||
data-title='{{ .Link.name }}'
|
||||
data-url='{{ .Link.url }}'
|
||||
{{ if .Link.bg_color }}data-bg-color='{{ .Link.bg_color | safeCSS }}'{{ end -}}
|
||||
{{ if .Link.txt_color }}data-txt-color='{{ .Link.txt_color | safeCSS }}'{{ end -}}
|
||||
{{ if .Link.img }}data-img='{{ .Link.img }}'{{ end -}}
|
||||
{{ if or .Link.bg_color .Link.txt_color }}style='{{ if .Link.bg_color }}background-color:{{ .Link.bg_color | safeCSS }};{{ end }} {{ if .Link.txt_color }}color:{{ .Link.txt_color | safeCSS }}{{end}}'{{ end -}}>
|
||||
{{ if .Link.img }}<img class="logo" src="{{ .Link.img }}"></img>{{ else }}{{ .Link.name }}{{ end }}</div>
|
||||
<div class="tile-title">{{ .Link.name }}</div>
|
||||
</a>
|
||||
<div id='here' class='cdiv_1' >
|
||||
<a target='_blank' href='{{ .Link.url }}'>
|
||||
{{ if .Link.img }}
|
||||
<img class="cdiv-img-trs" src='{{ .Link.img }}'></img>
|
||||
</a>
|
||||
{{ else }}
|
||||
</a>
|
||||
|
||||
{{ .Link.name }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
<div class="tile-container">{{$jump := .Site.Params.OpenLinksInNewWindow | default true }}{{ range .Site.Data.links.tiles }}
|
||||
{{ partial "tile.html" (dict "Link" . "Jump" $jump)}}{{ end }}
|
||||
</div>
|
||||
301
src/js/slate.js
301
src/js/slate.js
@ -1,301 +0,0 @@
|
||||
|
||||
|
||||
|
||||
String.prototype.hashCode = function(){
|
||||
// djb2 hash algorithm
|
||||
var hash = 5381;
|
||||
for (i = 0; i < this.length; i++) {
|
||||
char = this.charCodeAt(i);
|
||||
hash = ((hash << 5) + hash) + char; /* hash * 33 + c */
|
||||
}
|
||||
return hash >>> 0;
|
||||
};
|
||||
|
||||
var Color = tinycolor;
|
||||
|
||||
|
||||
var Shuffle = window.shuffle;
|
||||
|
||||
var shuffle = new Shuffle(document.querySelector('.tile-container'), {
|
||||
group: shuffle.ALL_ITEMS,
|
||||
itemSelector: '.tile',
|
||||
gutterWidth: 16,
|
||||
columnWidth: 188,
|
||||
buffer: 1,
|
||||
delimeter: ",",
|
||||
useTransforms: false,
|
||||
});
|
||||
|
||||
var filterTiles = function(tag) {
|
||||
shuffle.filter(location.hash.slice(1));
|
||||
};
|
||||
|
||||
window.onhashchange = filterTiles;
|
||||
|
||||
var getUrlParts = function(baseUrl) {
|
||||
var urlParts = {
|
||||
domain: "",
|
||||
before: "",
|
||||
after: ""
|
||||
};
|
||||
var url = new URL(baseUrl);
|
||||
var host = url.host;
|
||||
urlParts.domain = host.replace(/^www\./i, "");
|
||||
|
||||
if (host.match(/^\d+\.\d+\.\d+\.\d+$/)) {
|
||||
urlParts.domain = host;
|
||||
return urlParts;
|
||||
} else if (host.match(/^(\d+\.\d+\.\d+\.\d+)(:(\d+))?$/)) {
|
||||
hostParts = host.match(/^(\d+\.\d+\.\d+\.\d+)(:(\d+))?$/);
|
||||
urlParts.domain = hostParts[1];
|
||||
urlParts.after = hostParts[3];
|
||||
return urlParts;
|
||||
}
|
||||
|
||||
var hostParts = urlParts.domain.split(".");
|
||||
var longestPartIndex = 0;
|
||||
for (var i = 1; i < hostParts.length - 1; i++) {
|
||||
if (hostParts[i].length > hostParts[longestPartIndex].length) {
|
||||
longestPartIndex = i;
|
||||
}
|
||||
}
|
||||
|
||||
urlParts.domain = hostParts[longestPartIndex];
|
||||
urlParts.before = hostParts.slice(0, longestPartIndex).join(".");
|
||||
urlParts.after = hostParts.slice(longestPartIndex + 1).join(".");
|
||||
|
||||
if(!urlParts.domain && url.pathname) {
|
||||
urlParts.domain = url.pathname.split("/").filter(Boolean).pop();
|
||||
}
|
||||
return urlParts;
|
||||
};
|
||||
|
||||
var fitText = function(text, boxWidth, boxHeight) {
|
||||
var resizer = document.createElement("div");
|
||||
resizer.style.visibility = "hidden";
|
||||
resizer.style.position = "absolute";
|
||||
document.body.appendChild(resizer);
|
||||
|
||||
var size = 40;
|
||||
|
||||
resizer.innerHTML = text;
|
||||
resizer.style.fontSize = size;
|
||||
while (resizer.offsetWidth > boxWidth) {
|
||||
size = size - 1;
|
||||
resizer.style.fontSize = size;
|
||||
}
|
||||
|
||||
var textInfo = {
|
||||
size: size,
|
||||
width: resizer.offsetWidth,
|
||||
height: resizer.offsetHeight
|
||||
};
|
||||
resizer.remove();
|
||||
return textInfo;
|
||||
};
|
||||
|
||||
|
||||
var getTileColor = function(domain) {
|
||||
var colorMap = [
|
||||
"#B42424",
|
||||
"#C83D1D",
|
||||
"#BB7231",
|
||||
"#E06B00",
|
||||
"#55931F",
|
||||
"#1C941B",
|
||||
"#189365",
|
||||
"#189196",
|
||||
"#2D85A4",
|
||||
"#2B6C90",
|
||||
"#205396",
|
||||
"#39448F",
|
||||
"#55338E",
|
||||
"#683089",
|
||||
"#963A97",
|
||||
"#A43343",
|
||||
"#982F2F",
|
||||
"#D30000",
|
||||
"#E54C29",
|
||||
"#DA7E2C",
|
||||
// "#F0C92C",
|
||||
"#73B43A",
|
||||
"#3AB43A",
|
||||
"#3AB487",
|
||||
"#3AB0B4",
|
||||
"#47A6C7",
|
||||
"#3A88B4",
|
||||
"#3A6FB4",
|
||||
"#3A4AB4",
|
||||
"#673AB4",
|
||||
"#863AB4",
|
||||
"#C846C9",
|
||||
"#C44A5B",
|
||||
"#AA4444",
|
||||
"#E84545",
|
||||
"#FF6946",
|
||||
"#EC9344",
|
||||
// "#F4D34F",
|
||||
// "#8BD34B",
|
||||
// "#4AD449",
|
||||
// "#6FDFB5",
|
||||
// "#45D3D9",
|
||||
// "#5CC4E8",
|
||||
"#3CA4DF",
|
||||
"#3A83E3",
|
||||
"#4056E3",
|
||||
"#9058F0",
|
||||
"#B467E2",
|
||||
"#DF7CDF",
|
||||
"#E5576B",
|
||||
"#D35A5A",
|
||||
// "#FF9C44",
|
||||
// "#F2B722",
|
||||
// "#4DCC7B",
|
||||
"#3DC53D",
|
||||
"#2DBBB1",
|
||||
"#5E95D5",
|
||||
// "#41BBF5",
|
||||
"#5E5BE7",
|
||||
"#1B7EFF",
|
||||
"#5F74FF",
|
||||
"#8A45FF",
|
||||
"#B856F3",
|
||||
"#DD66DD"
|
||||
];
|
||||
|
||||
return colorMap[domain.hashCode() % colorMap.length];
|
||||
|
||||
};
|
||||
|
||||
var renderImgTile = function(tile) {
|
||||
tile.innerHTML = "";
|
||||
|
||||
var bgColor = tile.getAttribute("data-bg-color");
|
||||
if (!bgColor) {
|
||||
bgColor = "rgba(255,255,255,.8)";
|
||||
}
|
||||
bgColor = Color(bgColor);
|
||||
bgColor.setAlpha(0.8);
|
||||
tile.style.backgroundColor = bgColor;
|
||||
|
||||
var img = new Image();
|
||||
img.src = tile.getAttribute("data-img");
|
||||
img.className = "logo";
|
||||
tile.appendChild(img);
|
||||
};
|
||||
|
||||
var renderPlainTile = function(tile) {
|
||||
var urlParts = getUrlParts(tile.getAttribute("data-url"));
|
||||
tile.innerHTML = "";
|
||||
|
||||
var bgColor = tile.getAttribute("data-bg-color");
|
||||
if (!bgColor) {
|
||||
bgColor = "rgba(255,255,255,.8)";
|
||||
}
|
||||
bgColor = Color(bgColor);
|
||||
bgColor.setAlpha(0.8);
|
||||
tile.style.backgroundColor = bgColor;
|
||||
|
||||
var txtColor = tile.getAttribute("data-txt-color");
|
||||
if (!txtColor) {
|
||||
txtColor = getTileColor(urlParts.domain);
|
||||
if (bgColor.isDark()) {
|
||||
tile.style.color = "white";
|
||||
}
|
||||
}
|
||||
txtColor = Color(txtColor);
|
||||
tile.style.color = txtColor;
|
||||
|
||||
var boxWidth = 188, boxHeight = 120;
|
||||
var margin = 8;
|
||||
|
||||
var textInfo = fitText(urlParts.domain, boxWidth-margin*2, boxHeight);
|
||||
|
||||
var domainDiv = document.createElement("div");
|
||||
domainDiv.style.fontSize = textInfo.size;
|
||||
domainDiv.style.position = "absolute";
|
||||
tile.appendChild(domainDiv);
|
||||
|
||||
var beforeDiv = document.createElement("div");
|
||||
beforeDiv.innerHTML = urlParts.before;
|
||||
// original forumla is 7/18*size-10
|
||||
beforeDiv.style.top = 0.35*textInfo.size-10;
|
||||
beforeDiv.className = "pre-domain";
|
||||
beforeDiv.style.textShadow = "-1px 0 "+bgColor+",0 1px "+bgColor+",1px 0 "+bgColor+",0 -1px "+bgColor;
|
||||
|
||||
var afterDiv = document.createElement("div");
|
||||
afterDiv.innerHTML = urlParts.after;
|
||||
afterDiv.style.top = textInfo.size-0.05*textInfo.size;
|
||||
afterDiv.className = "post-domain";
|
||||
afterDiv.style.textShadow = "-1px 0 "+bgColor+",0 1px "+bgColor+",1px 0 "+bgColor+",0 -1px "+bgColor;
|
||||
|
||||
|
||||
domainDiv.appendChild(beforeDiv);
|
||||
domainDiv.appendChild(document.createTextNode(urlParts.domain));
|
||||
domainDiv.appendChild(afterDiv);
|
||||
|
||||
var top = (boxHeight + margin)/2 - domainDiv.clientHeight/2;
|
||||
var left = (boxWidth + margin)/2 + margin - domainDiv.clientWidth/2;
|
||||
domainDiv.style.top = top;
|
||||
domainDiv.style.left = left;
|
||||
|
||||
// console.log(urlParts.domain+"="+urlParts.domain.hashCode().toString());
|
||||
};
|
||||
|
||||
var renderTiles = function() {
|
||||
var tiles = document.getElementsByClassName("tile-box");
|
||||
for(var i = 0; i < tiles.length; i++)
|
||||
{
|
||||
try {
|
||||
if (tiles.item(i).getAttribute("data-img")) {
|
||||
renderImgTile(tiles.item(i));
|
||||
} else {
|
||||
renderPlainTile(tiles.item(i));
|
||||
}
|
||||
}
|
||||
catch(err) {
|
||||
console.log("err:"+err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
renderTiles();
|
||||
|
||||
var getBackgroundImages = function() {
|
||||
var backgrounds = document.getElementsByTagName("body");
|
||||
var images = [];
|
||||
var imgString = backgrounds[0].getAttribute("data-backgrounds");
|
||||
if (imgString) {
|
||||
images = imgString.split(/[\s,]+/).filter(Boolean);
|
||||
}
|
||||
return images;
|
||||
};
|
||||
|
||||
var preloadBackgrounds = function() {
|
||||
var images = getBackgroundImages();
|
||||
for(var i = 0; i < images.length; i++)
|
||||
{
|
||||
// caches images, avoiding white flash between background replacements
|
||||
new Image().src = images[i];
|
||||
}
|
||||
};
|
||||
|
||||
var rotateBackground = function(count) {
|
||||
if (count === undefined || count === null) {
|
||||
count = 0;
|
||||
}
|
||||
|
||||
var images = getBackgroundImages();
|
||||
if (images.length > 0) {
|
||||
count = (count+1) % images.length;
|
||||
// console.log("rotating background to "+count);
|
||||
|
||||
document.body.style.background = 'url("' + images[count] +'")';
|
||||
document.body.style.backgroundSize = "cover";
|
||||
if (images.length > 1) {
|
||||
setTimeout(rotateBackground.bind(null, count), 30000);
|
||||
}
|
||||
}
|
||||
};
|
||||
preloadBackgrounds();
|
||||
rotateBackground();
|
||||
@ -1,272 +0,0 @@
|
||||
// Slate CSS
|
||||
|
||||
$tile-width: 188px;
|
||||
$tile-height: 120px;
|
||||
$tile-spacing: 16px;
|
||||
$title-height: 16px;
|
||||
$transition-time: .3s;
|
||||
|
||||
$menu-bar-width: 50px;
|
||||
|
||||
$background: #657383;
|
||||
$text-color: #000;
|
||||
$text-title-color: #fff;
|
||||
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Exo', sans-serif;
|
||||
font-weight: bold;
|
||||
background-color: $background;
|
||||
margin-left: 50px;
|
||||
color: $text-color;
|
||||
background-image: radial-gradient(ellipse farthest-side at center top, #FCFCFC 0%, #657383 100%);
|
||||
}
|
||||
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
min-height: 10px;
|
||||
padding: 48px 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin min-width($width) {
|
||||
@media screen and (min-width: $width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.tile-container {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
min-width: calc(#{$tile-width} + #{$tile-spacing});
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
@include min-width((($tile-width + $tile-spacing) * ($i + 1))) {
|
||||
width: (($tile-width + $tile-spacing) * $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tile {
|
||||
width: $tile-width;
|
||||
max-width: $tile-width;
|
||||
padding: 8px;
|
||||
-webkit-flex: 0 0 188px;
|
||||
flex: 0 0 188px;
|
||||
transition: top 0.3s, left 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.tile-box {
|
||||
height: $tile-height;
|
||||
max-height: $tile-height;
|
||||
width: $tile-width;
|
||||
max-width: $tile-width;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.2);
|
||||
box-sizing: border-box;
|
||||
background: rgba(255,255,255,.8);
|
||||
font-size: 28px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.tile-link {
|
||||
color: $text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tile-title {
|
||||
display: block;
|
||||
width: $tile-width;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
color: $text-title-color;
|
||||
display: block;
|
||||
height: 32px;
|
||||
line-height: 16px;
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
transition: color 0.3s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width:170px;
|
||||
max-height:100px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
// nav menu
|
||||
|
||||
.nav-panel {
|
||||
/*background-image: linear-gradient(hsla(0, 0%, 0%, .2), hsla(0, 0%, 0%, .2));*/
|
||||
background: rgba(0,0,0,.1);
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
/*transition: background-image 3s;*/
|
||||
transition: all 0.8s ease-in-out;
|
||||
transition-delay: 1s;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.nav-panel:hover {
|
||||
/*background-image: linear-gradient(hsla(0, 0%, 0%, .5), hsla(0, 0%, 0%, .5));*/
|
||||
background: rgba(0,0,0,.5);
|
||||
transition: background .5s ease-in-out;
|
||||
}
|
||||
|
||||
nav {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
height: 100%;
|
||||
padding: 7px 4px 4px;
|
||||
width: 50px;
|
||||
-webkit-user-select: none;
|
||||
color: #fff;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul::after {
|
||||
content: '';
|
||||
display: list-item;
|
||||
flex: 1;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
li {
|
||||
height: 40px;
|
||||
padding: 10px 0 0 0;
|
||||
position: relative;
|
||||
order: 1;
|
||||
transition: height $transition-time;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
opacity: .6;
|
||||
transition: background-color $transition-time,
|
||||
opacity $transition-time,
|
||||
-webkit-mask-size $transition-time;
|
||||
-webkit-mask-position: 50% 15px;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 23px;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
// text tile parts
|
||||
|
||||
.pre-domain, .post-domain {
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
text-shadow:
|
||||
-1px 0 rgba(255,255,255,.8),
|
||||
0 1px rgba(255,255,255,.8),
|
||||
1px 0 rgba(255,255,255,.8),
|
||||
0 -1px rgba(255,255,255,.8);
|
||||
}
|
||||
|
||||
.pre-domain {
|
||||
top: 5px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.post-domain {
|
||||
top: 40px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
// nav menu tooltips
|
||||
|
||||
*[data-tooltip] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
*[data-tooltip]::after {
|
||||
content: attr(data-tooltip);
|
||||
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 30px;
|
||||
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity .15s ease-in-out;
|
||||
-moz-transition: opacity .15s ease-in-out;
|
||||
-ms-transition: opacity .15s ease-in-out;
|
||||
-o-transition: opacity .15s ease-in-out;
|
||||
transition: opacity .15s ease-in-out;
|
||||
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 2px 2px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
*[data-tooltip]:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
// background image rotation
|
||||
|
||||
body {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
background-size: cover;
|
||||
background-blend-mode: darken;
|
||||
-webkit-transition: background 1.4s linear;
|
||||
-moz-transition: background 1.4s linear;
|
||||
-ms-transition: background 1.4s linear;
|
||||
-o-transition: background 1.4s linear;
|
||||
transition: background 1.4s linear;
|
||||
background-position-x: center;
|
||||
background-position-y: center;
|
||||
background-repeat-x: no-repeat;
|
||||
background-repeat-y: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
149
static/css/tataslate.css
Normal file
149
static/css/tataslate.css
Normal file
@ -0,0 +1,149 @@
|
||||
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:150px;
|
||||
padding-bottom:150px;
|
||||
transition: height 1s;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.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;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cdiv_1 img {
|
||||
height:inherit;
|
||||
width:inherit;
|
||||
border-radius:100%;
|
||||
opacity:0,6;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cdiv_2 img {
|
||||
height:inherit;
|
||||
width:inherit;
|
||||
border-radius:100%;
|
||||
opacity:0,6;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cdiv_1 h1 {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
width: inherit;
|
||||
top: 25%;
|
||||
}
|
||||
|
||||
.cdiv_2 h1 {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
width: inherit;
|
||||
top: 10%;
|
||||
font-size: 15px
|
||||
}
|
||||
1
static/js/jq.min.js
vendored
Normal file
1
static/js/jq.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
34
static/js/tataslate.js
Normal file
34
static/js/tataslate.js
Normal file
@ -0,0 +1,34 @@
|
||||
$(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);
|
||||
}
|
||||
});
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
name = "Slate"
|
||||
name = "tataslate"
|
||||
license = "MIT"
|
||||
licenselink = "https://github.com/gesquive/slate/blob/master/LICENSE.md"
|
||||
description = "A speed dial theme"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user