Page History

This is the home page for the Tilia Labs knowledge base. You can use the knowledge base to read up on tips, tricks, best practices and common problems.

<link rel="stylesheet" href="https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<style>

body {
	background: #DDD;
	font-size: 15px;
}
#wrap {
  margin: 50px 100px;
  display: inline-block;
  position: relative;
  height: 60px;
  float: right;
  padding: 0;
  position: relative;
}

input[type="text"] {
  height: 60px;
  font-size: 55px;
  display: inline-block;
  font-family: "Lato";
  font-weight: 100;
  border: none;
  outline: none;
  color: #555;
  padding: 3px;
  padding-right: 60px10px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}

input[type="text"]:focus:hover {
  border-bottom: 1px solid #BBB;
}

input[type="text"]{
  width: 700px100%;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
  text-align: center;
}
input[type="submit"] {
  height: 67px;
  width: 63px;
  display: inline-block;
  color:red;
  float: right;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
  text-indent: -10000px;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity .4s ease;
}

input[type="submit"]:hover {
  opacity: 0.8;
}

.flex {
  display: 'flex';
}


</style>

<div id="wrap">
</div>
<div class="flex search-macro search-macro-large conf-macro output-inline" data-hasbody="false" data-macro-name="livesearch">
    <div class="aui-dd-parent"> </div>
    <form class="aui aui-dd-parent" name="livesearchForm" method="POST" action="/dosearchsite.action">
        <fieldset class="search-macro-fields">
            <div class="search-macro-query">
  				<input id="search" name="queryString" type="text" autocomplete="off" placeholder="What're we looking for ?">
                <span class="aui-icon aui-icon-large aui-iconfont-search">Search</span>
            </div>
            <input type="hidden" name="where" value="KB">
            <input type="hidden" name="additional" value="page excerpt">
            <input type="hidden" name="labels" value="">
            <input type="hidden" name="contentType" value="page">
        </fieldset>
    </form>
</div>
</div>

<style>
body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
i,
select {
    margin: 0;
    padding: 0;
}
h1 {
  font-family: sans-serif;
  color: rgb(35,93,166);
/*   margin-bottom: 30px */
}
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
/*     background-color: #2C3138; */
/*     -webkit-perspective: 90rem;
            perspective: 90rem;
    -webkit-perspective-origin: 34% 61%;
            perspective-origin: 34% 61%; */
            
}

img {
    width: 160px;
}

button {
    cursor: pointer;
    outline: 0;
    width: 180px;
    height: 48px;
    border-radius: 8px;
    background-color: rgba(255,255,255,.75);
    margin-top: 40px;
    overflow: hidden;
    -webkit-transform: scale(.7);
            transform: scale(.7);
}

button.prod {
    margin-top: 0px;
}

button::after {
    content: "";
    position: relative;
    top: -40px;
    display: block;
    width: 48px;
    height: 107%;
    background-color: #000;
    margin-top: -1px;
    margin-left: -7px;
    border-radius: 6px 0 0 6px;
    background-repeat: no-repeat;
    background-position: center;
}

button::before {
    content: "";
    display: block;
    width: 48px;
    height: 46px;
    margin-left: -7px;
    -webkit-transition: all 100ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
    transition: all 100ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
}

/* .box-1:hover button::before {
    width: 120%;
    opacity: .8;
    background-color: #00BF9C;
}

.box-2:hover button::before {
    width: 120%;
    opacity: .8;
    background-color: #653EE6;
}

.box-3:hover button::before {
    width: 120%;
    opacity: .8;
    background-color: #008BFF;
}
 */


.container {
    margin-top: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: flex-start;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: 100vh;
    /* transform:rotateX(7deg) rotateZ(-4deg) rotateY(13deg) scale3d(1, 1, -0.9); */
/*     -webkit-transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9);
            transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9); */
}

.box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    will-change: transform;
  margin-bottom: 40px;
}

.box:hover .cover {
    -webkit-transform: translateY(-14px) scale(1.04);
            transform: translateY(-14px) scale(1.04);
}

.box-1 button {
    border: 1px solid rgb(35,93,166);
    color: #fff;
    font-size: 22px;
    padding-right: 20px;
    line-height: 40px;
}

.box-2 button {
    border: 1px solid rgb(35,93,166);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 40px;
}

.box-3 button {
    border: 1px solid rgb(35,93,166);
    color: #fff;
    font-size: 22px;
    text-align: center;
/*     padding-right: 20px; */
    line-height: 40px;
}

.cover {
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    will-change: transform;
}

.cover img {
    -webkit-transition: all 260ms ease-in-out;
    transition: all 260ms ease-in-out;
}

.box .cover::after {
    content: "";
    z-index: -99;
    position: absolute;
    top: 20px;
    left: -20px;
    display: block;
    width: 160px;
    height: 214px;
    opacity: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 160px 214px;
    -webkit-filter: blur(24px);
            filter: blur(24px);
    -webkit-transition: all 260ms ease-in-out;
    transition: all 260ms ease-in-out;
    will-change: transform;
    -webkit-transform: scale(.6);
            transform: scale(.6);
}

.box:hover .cover::after {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}

/* .box-1 .cover::after {
  box-shadow: 0 19px 38px rgba(234,170,73,1), 0 15px 12px rgba(234,170,73,1)
} */

/* .box-2 .cover::after {
  box-shadow: 0 19px 38px rgb(110, 174, 220), 0 19px 38px rgb(110, 174, 220)
} */

/* .box-3 .cover::after {
  box-shadow: 0 19px 38px rgb(110, 174, 220), 0 19px 38px rgb(110, 174, 220)
} */


.box-1 button div::before {
    content: 'Phoenix';
    position: relative;
    top: -44px;
    left: 10px;
    color: rgb(35,93,166);
    font-size: 21px;
    font-weight: 300;
}

box-1 button .grif::before {
    content: 'Griffin';
}

button:hover {
  background-color: rgba(35,93,166,.1);
  border: 2px solid rgb(35,93,166);
}

.box-2 button div::before {
    content: 'Knowledge Base';
    position: relative;
    top: -44px;
    left: 0px;
    color: rgb(35,93,166);
    font-size: 21px;
    font-weight: 300;
}

.box-3 button div::before {
    content: 'Phoenix';
    position: relative;
    top: -44px;
    left: 3px;
    color: rgb(35,93,166);
    font-size: 21px;
    font-weight: 300;
}

.box-3 button .grif::before {
    content: 'Griffin';
}

#ariDown::before {
    content: 'Aries';
}
#ariDocument::before {
    content: 'Aries';
}
#grifDocument::before {
    content: 'Griffin';
}
#grifDown::before {
    content: 'Griffin';
}
</style> 
   
        <div class="container">
        <div class="box box-1">
            <div class="cover"><img src="https://confluence.atlassian.com/download/attachments/775520306/Tutorials_Icon_scaled.png" alt=""></div><h1>Documentation</h1>
            <button><div></div></button>
          <button class="prod"><div class='grif' id='grifDocument'></div></button>
          <button class="prod"><div class='ari' id='ariDocument'></div></button>
        </div>
        <div class="box box-2">
            <div class="cover"><img src="https://confluence.atlassian.com/download/attachments/775520306/Atlassian_Content_Icon_scaled.png" alt=""></div><h1>Knowledge Base</h1>
            <button><div></div></button>
        </div>
        <div class="box box-3">
          <div class="cover"><img src="https://confluence.atlassian.com/download/attachments/775520306/Install_Icon_scaled.png" alt=""></div><h1>Downloads</h1>
            <button><div></div></button>
          <button class="prod"><div class='grif' id='grifDown'></div></button>
          <button class="prod"><div id='ariDown'></div></button>
        </div>
    </div>

<div class="searchimage" style="background-image:url('https://docs.tilialabs.com/download/attachments/67166/kimberly-farmer-lUaaKCUANVI-unsplash.jpg?version=1&modificationDate=1562933626038&api=v2');background-repeat: no-repeat;background-size: 100% 500px;align:center;height:300px">
<div class="search" style="padding-left:55%;padding-top:100px"><p style="color:white;font-size:2em;font-family:Lucida Sans Unicode, Lucida Grande, sans-serif">Search the Knowledge Base</p>
<div class="search-macro search-macro-large conf-macro output-inline" data-hasbody="false" data-macro-name="livesearch">
    <div class="aui-dd-parent"> </div>
    <form class="aui aui-dd-parent" name="livesearchForm" method="POST" action="/dosearchsite.action">
        <fieldset class="search-macro-fields">
            <div class="search-macro-query">
                <input class="text" type="text" name="queryString" autocomplete="off" placeholder="Search for a solution">
                <span class="aui-icon aui-icon-large aui-iconfont-search">Search</span>
            </div>
            <input type="hidden" name="where" value="KB">
            <input type="hidden" name="additional" value="page excerpt">
            <input type="hidden" name="labels" value="">
            <input type="hidden" name="contentType" value="page">
        </fieldset>
    </form>
</div>
</div>
</div>