mirror of
https://github.com/LinkStackOrg/LinkStack.git
synced 2025-02-03 12:37:39 +01:00
62c9baba23
Added the long planned button editor. This solution does not look optimal, but works... mostly. This solution is implemented with JavaScript and the current versions code is very unorganized mostly uncommented and the HTML is still mostly done with inline code. I hope I will fix this in future revisions. To learn more about the new button editor, read: https://littlelink-custom.com/blog/upcoming-features/ https://littlelink-custom.com/blog/progress-of-the-new-button-editor/
485 lines
9.1 KiB
CSS
Vendored
485 lines
9.1 KiB
CSS
Vendored
|
|
|
|
|
|
html
|
|
{
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.home_nav .grid_12
|
|
{
|
|
text-align: center;
|
|
position: absolute;
|
|
z-index: 50;
|
|
margin-top: -57px;
|
|
|
|
-webkit-transition: opacity 0.2s ease;
|
|
-moz-transition: opacity 0.2s ease;
|
|
-o-transition: opacity 0.2s ease;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.home_nav button
|
|
{
|
|
border: none;
|
|
|
|
-webkit-transition: background-position 0.2s ease;
|
|
-moz-transition: background-position 0.2s ease;
|
|
-o-transition: background-position 0.2s ease;
|
|
transition: background-position 0.2s ease;
|
|
}
|
|
|
|
.home_nav .sides
|
|
{
|
|
width: 11px;
|
|
height: 17px;
|
|
background: url('navarrow.png');/*side arrows of navigation*/
|
|
background-position: -17px 0;
|
|
margin-right: 10px;
|
|
margin-top:20px;
|
|
}
|
|
|
|
.home_nav .right
|
|
{
|
|
margin-right: 0px;
|
|
margin-left: 10px;
|
|
background-position: -28px 0;
|
|
}
|
|
|
|
.home_nav .left:hover{ background-position: -17px -17px; }
|
|
.home_nav .right:hover{ background-position: -28px -17px; }
|
|
|
|
.home_nav .direct
|
|
{
|
|
width: 14px;
|
|
height: 14px;
|
|
background: url('nav.png'); /*the center navigation buttons*/
|
|
background-position: 0 0px;
|
|
|
|
}
|
|
|
|
.home_nav .direct:hover, .home_nav .selected{ background-position: 0px -16px; }
|
|
|
|
|
|
|
|
|
|
#home_slider
|
|
{
|
|
margin-left: 0;
|
|
height: 616px;
|
|
position: relative;
|
|
-webkit-transition: margin 1s ease;
|
|
-moz-transition: margin 1s ease;
|
|
-o-transition: margin 1s ease;
|
|
transition: margin 1s ease;
|
|
width: 50000px;
|
|
background: #fafafa;
|
|
}
|
|
|
|
|
|
|
|
.webmadeclean, .imake, .welcome, .menuslide, .myphotoblog
|
|
{
|
|
height: 616px;
|
|
width: 2000px;
|
|
overflow: hidden;
|
|
float: left;
|
|
z-index: 1;
|
|
background: #ececee
|
|
}
|
|
|
|
#home_loader
|
|
{
|
|
background: #66a6be;
|
|
position: absolute;
|
|
height: 616px;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
#home_loader img
|
|
{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -8px;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
|
|
.welcome
|
|
{
|
|
background-image: url('sliderfront.jpg');
|
|
}
|
|
|
|
.welcome h1
|
|
{ color:white; /*the color of melange*/
|
|
font-size: 187px;
|
|
text-transform: uppercase;
|
|
line-height: 218px;
|
|
padding-top: 24px;
|
|
font-weight: 900;
|
|
font-family: "Proxima-Nova-1", Arial, sans-serif;
|
|
}
|
|
|
|
.white
|
|
{
|
|
color: #fff;
|
|
text-shadow: 1px 1px 1px rgba( 0,0,0,0.3 );
|
|
}
|
|
|
|
.welcome p
|
|
{
|
|
font-size: 28px;
|
|
color: #fff;
|
|
padding-top: 3px;
|
|
text-transform: uppercase;
|
|
font-weight: 300;
|
|
text-shadow: 1px 1px 0px rgba( 0,0,0,0.22 );
|
|
}
|
|
|
|
.welcome .image
|
|
{
|
|
text-align: center;
|
|
line-height: 0;
|
|
font-size: 0;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.welcome div.grid_4
|
|
{
|
|
margin-top: 19px;
|
|
display: block;
|
|
width: 500px;
|
|
height: 13px;
|
|
|
|
}
|
|
|
|
.welcome div.grid_4:after
|
|
{
|
|
content: "";
|
|
position: absolute;
|
|
width: 500px;
|
|
margin-top: 15px;
|
|
height: 1px;
|
|
|
|
}
|
|
|
|
.welcome p
|
|
{
|
|
text-align: center;
|
|
}
|
|
|
|
.welcome .start
|
|
{
|
|
font-size: 111px;
|
|
margin-top: -35px;
|
|
|
|
-webkit-transition: opacity 0.5s ease;
|
|
-moz-transition: opacity 0.5s ease;
|
|
-o-transition: opacity 0.5s ease;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.welcome .keyboard_help
|
|
{
|
|
position: absolute;
|
|
font-size: 41px;
|
|
margin-top: -35px;
|
|
|
|
-webkit-transition: opacity 0.5s ease;
|
|
-moz-transition: opacity 0.5s ease;
|
|
-o-transition: opacity 0.5s ease;
|
|
transition: opacity 0.5s ease;
|
|
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE < 8 */
|
|
}
|
|
|
|
.welcome .start_tour:hover .keyboard_help
|
|
{
|
|
opacity: 1;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* IE < 8 */
|
|
}
|
|
|
|
.welcome .start_tour:hover .start
|
|
{
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE < 8 */
|
|
}
|
|
|
|
|
|
.webmadeclean h1, .imake h1, .myphotoblog h1
|
|
{
|
|
font-size: 50px;/*controlling the heading of eadh slider page*/
|
|
|
|
margin-top: 60px;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 15px;
|
|
font-family:Arial Narrow;
|
|
/*padding-left: 55px;*/
|
|
}
|
|
|
|
.webmadeclean h1:before, .imake h1:before, .myphotoblog h1:before
|
|
{
|
|
content: '';
|
|
position: absolute;
|
|
width: 45px;
|
|
height: 36px;
|
|
|
|
background-position: -20px 0;
|
|
margin-left: -60px;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.imake h1:before{ background-position: -64px 4px; }
|
|
.myphotoblog h1:before{ background-position: -110px 0px; }
|
|
|
|
.webmadeclean p, .imake p, .myphotoblog p
|
|
{
|
|
font-size: 18px;
|
|
line-height: 29px;
|
|
}
|
|
|
|
.webmadeclean img.approved
|
|
{
|
|
position: absolute;
|
|
margin-left: 230px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.webmadeclean a, .imake a, .myphotoblog a
|
|
{
|
|
color: #fff;
|
|
text-decoration: none;
|
|
background: #c2c3c8;
|
|
background-position: right center;
|
|
font-size: 13px;
|
|
|
|
padding: 6px 50px 5px 10px;
|
|
line-height: 60px;
|
|
|
|
-webkit-transition: background 0.3s ease;
|
|
-moz-transition: background 0.3s ease;
|
|
-o-transition: background 0.3s ease;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.webmadeclean a:hover, .imake a:hover, .myphotoblog a:hover
|
|
{
|
|
background: #4a4b4f no-repeat;
|
|
background-position: right;
|
|
}
|
|
|
|
.webmadeclean aside
|
|
{
|
|
text-align: right;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.imake aside
|
|
{
|
|
text-align: left;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.imake .approved
|
|
{
|
|
margin-left: 200px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.myphotoblog aside figure
|
|
{
|
|
line-height: 0;
|
|
width: 680px;
|
|
height: 443px;
|
|
background: #fff;
|
|
padding: 10px;
|
|
|
|
-webkit-box-shadow: 0px 1px 3px rgba( 0,0,0,0.23 );
|
|
-moz-box-shadow: 0px 1px 3px rgba( 0,0,0,0.23 );
|
|
-o-box-shadow: 0px 1px 3px rgba( 0,0,0,0.23 );
|
|
box-shadow: 0px 1px 3px rgba( 0,0,0,0.23 );
|
|
|
|
margin-top: 55px;
|
|
}
|
|
|
|
.myphotoblog .coverpic
|
|
{
|
|
position: absolute;
|
|
margin-top: -443px;
|
|
display: block;
|
|
|
|
opacity: 0;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE < 8 */
|
|
|
|
-webkit-transition: opacity 0.5s ease;
|
|
-moz-transition: opacity 0.5s ease;
|
|
-o-transition: opacity 0.5s ease;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.myphotoblog figure:hover .coverpic
|
|
{
|
|
opacity: 1;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE < 8 */
|
|
}
|
|
|
|
.menuslide
|
|
{
|
|
padding-top: 12px;
|
|
height: 604px;
|
|
}
|
|
|
|
.menuslide a
|
|
{
|
|
color: #353639;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
padding-bottom: 20px;
|
|
background: #f9f9fb;
|
|
background: rgba( 255,255,255,0.5 );
|
|
|
|
border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
-o-border-radius: 3px;
|
|
|
|
-webkit-box-shadow: 0px 0px 1px rgba( 0,0,0,0.2 );
|
|
-moz-box-shadow: 0px 0px 1px rgba( 0,0,0,0.2 );
|
|
-o-box-shadow: 0px 0px 1px rgba( 0,0,0,0.2 );
|
|
box-shadow: 0px 0px 1px rgba( 0,0,0,0.2 );
|
|
|
|
-webkit-transition: background 0.3s ease;
|
|
-moz-transition: background 0.3s ease;
|
|
-o-transition: background 0.3s ease;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
#welcometab{
|
|
margin-left:270px;
|
|
}
|
|
.menuslide a.grid_3
|
|
{ align:center;
|
|
width: 218px;
|
|
font-size: 18px;
|
|
line-height: 50px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.menuslide a span.icon
|
|
{
|
|
|
|
display: block;
|
|
width: 54px;
|
|
height: 54px;
|
|
margin-left: 124px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.menuslide a.grid_3 span.icon
|
|
{
|
|
margin-left: 80px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.menuslide a span
|
|
{
|
|
display: block;
|
|
text-transform: none;
|
|
font-size: 15px;
|
|
font-weight: normal;
|
|
font-family: "Proxima-Nova-1", Arial, sans-serif;
|
|
color: #777777;
|
|
}
|
|
|
|
.menuslide a:hover
|
|
{
|
|
background: rgba( 255,255,255,0.9 );
|
|
color: #b6d76e;
|
|
}
|
|
|
|
.menuslide a span.portfolio{ background-position: 0 0; }
|
|
.menuslide a:hover span.portfolio{ background-position: 0 -54px; }
|
|
.menuslide a span.resources{ background-position: -54px 0; }
|
|
.menuslide a:hover span.resources{ background-position: -54px -54px; }
|
|
.menuslide a span.photoblog{ background-position: -108px 0; }
|
|
.menuslide a:hover span.photoblog{ background-position: -108px -54px; }
|
|
.menuslide a span.experiments{ background-position: -162px 0; }
|
|
.menuslide a:hover span.experiments{ background-position: -162px -54px; }
|
|
.menuslide a span.about{ background-position: -216px 0; }
|
|
.menuslide a:hover span.about{ background-position: -216px -54px; }
|
|
.menuslide a span.contact{ background-position: -269px 0; }
|
|
.menuslide a:hover span.contact{ background-position: -269px -54px; }
|
|
.menuslide a span.deviantart{ background-position: -323px 0; }
|
|
.menuslide a:hover span.deviantart{ background-position: -323px -54px; }
|
|
.menuslide a span.twitter{ background-position: -377px 0; width: 55px; }
|
|
.menuslide a:hover span.twitter{ background-position: -377px -54px; }
|
|
.menuslide a span.flickr{ background-position: -432px 0; }
|
|
.menuslide a:hover span.flickr{ background-position: -432px -54px; }
|
|
.menuslide a span.facebook{ background-position: -486px 0; }
|
|
.menuslide a:hover span.facebook{ background-position: -486px -54px; }
|
|
|
|
/*logo management*/
|
|
#wikiicon{
|
|
background:url('wikiicon.png');
|
|
}
|
|
|
|
#giticon{
|
|
background:url('github.png');
|
|
}
|
|
#abouticon{
|
|
background:url('aboutus.jpg');
|
|
}
|
|
#fbicon{
|
|
background:url('fb.jpg');
|
|
}
|
|
#blogicon{
|
|
background:url('blogicon.png');
|
|
}
|
|
#resourceicon{
|
|
background:url('rssb.png');
|
|
}
|
|
|
|
|
|
#twittericon{
|
|
background:url('twitter.png');
|
|
}
|
|
|
|
#contacticon{
|
|
background:url('contacticon.jpg');
|
|
}
|
|
#poster{
|
|
margin-right:30px;
|
|
width:700px;
|
|
margin-top:-120px;
|
|
}
|
|
.menuslide a span.grid4logo
|
|
{
|
|
|
|
display: block;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-left: 85px;
|
|
margin-top: 15px;
|
|
}
|
|
.menuslide a span.grid3logo
|
|
{
|
|
|
|
display: block;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-left: 170px;
|
|
margin-top: 15px;
|
|
}
|
|
|