gabriel becker
2 years ago
16 changed files with 218 additions and 603 deletions
|
Before Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 548 KiB |
|
Before Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 260 KiB |
@ -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 id='here' class='cdiv_1' > |
||||||
<div class="tile-box" |
<a target='_blank' href='{{ .Link.url }}'> |
||||||
data-title='{{ .Link.name }}' |
{{ if .Link.img }} |
||||||
data-url='{{ .Link.url }}' |
<img class="cdiv-img-trs" src='{{ .Link.img }}'></img> |
||||||
{{ 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> |
</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> |
|
||||||
@ -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
@ -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 |
||||||
|
} |
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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); |
||||||
|
} |
||||||
|
}); |
||||||
Loading…
Reference in new issue