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