Commit 37403c4b authored by Milan's avatar Milan
Browse files

redesign indexpage

adjust shadows
drop animate.css, use own animations
tidy a bit
parent 3dee7b25
.animated#slow { .fadeindown {
-vendor-animation-duration: 8s; animation-name: fadeindown;
-vendor-animation-delay: 7s; animation-duration: 2s;
}
.fadeindownfast {
animation-name: fadeindown;
animation-duration: 1s;
}
.fadeintopleft {
animation-name: fadeintopleft;
animation-duration: 1.5s;
}
.fadeintopright {
animation-name: fadeintopright;
animation-duration: 1.5s;
}
.fadeinleft {
animation-name: fadeinleft;
animation-duration: 1.5s;
}
.fadeinright {
animation-name: fadeinright;
animation-duration: 1.5s;
}
@keyframes fadeindown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeintopleft {
from {
opacity: 0;
transform: translate3d(-100%, -100%, 0);
}
to {
transform: none;
}
}
@keyframes fadeintopright {
from {
opacity: 0;
transform: translate3d(200%, -100%, 0);
}
to {
transform: none;
}
}
@keyframes fadeinleft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
transform: none;
}
}
@keyframes fadeinright {
from {
opacity: 0;
transform: translate3d(200%, 0, 0);
}
to {
transform: none;
}
} }
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
src: url(//assets.illuna-minetest.tk/fonts/roboto-regular.ttf) format("opentype"); src: url(//assets.illuna-minetest.tk/fonts/roboto-regular.ttf) format("opentype");
} }
@import 'animate'; @import 'animations';
@import 'back-to-top'; @import 'back-to-top';
@import 'header'; @import 'header';
@import 'images'; @import 'images';
......
...@@ -7,15 +7,18 @@ body { ...@@ -7,15 +7,18 @@ body {
.container { .container {
font-weight: 400 font-weight: 400
}.button:hover, }
body {
.button:hover, body {
color: grey color: grey
} }
#shader, #shader,
.shader { .shader {
margin-bottom: 40px; margin-bottom: 40px;
box-shadow: 0 9px 24px -10px rgba(23, 23, 23, 213.7) box-shadow: 0px 0px 4px 4px rgba(68,126,185,1)
} }
#f-left { #f-left {
float: left float: left
} }
...@@ -28,19 +31,37 @@ a { ...@@ -28,19 +31,37 @@ a {
color: #91B0E6; color: #91B0E6;
transition: color ease .4s; transition: color ease .4s;
font-weight: 600 font-weight: 600
}#nohover { }
#nohover {
pointer-events: none; pointer-events: none;
border: 0 border: 0
}.disabled { }
.disabled {
color: #E4E4E4 color: #E4E4E4
}.contact-head { }
.contact-head {
border-radius: 120px; border-radius: 120px;
border: 1px solid #ccc; border: 1px solid #ccc;
max-width: 500px max-width: 500px
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }
img { img {
max-width:99%; max-width:99%;
}
.container.index {
background-color: #transparent;
}
.container.index p {
font-size: 120%;
color:#E8EBED;
text-shadow: 0 0 0 rgba(68,126,185,.9)
} }
.carousel {
margin: 0 auto;
margin-top: 2.5em;
margin-bottom: 3em;
max-width: 97.5%;
box-shadow: 0px 0px 4px 4px rgba(68,126,185,1)
}
.carousel-fade .carousel-inner .item { .carousel-fade .carousel-inner .item {
opacity: 0; opacity: 0;
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
transition-property: opacity transition-property: opacity;
transition: all ease 2s;
} }
.carousel-fade .carousel-inner .active { .carousel-fade .carousel-inner .active {
opacity: 1 opacity: 1;
transition: all ease 2s;
} }
.carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right { .carousel-fade .carousel-inner .active.right {
left: 0; left: 0;
opacity: 0; opacity: 0;
z-index: 1 z-index: 1;
transition: all ease 2s;
} }
.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { .carousel-fade .carousel-inner .prev.right {
opacity: 1 opacity: 1;
transition: all ease 2s;
} }
.carousel-fade .carousel-control { .carousel-fade .carousel-control {
z-index: 2 z-index: 2;
} transition: all ease 2s;
\ No newline at end of file }
...@@ -93,7 +93,7 @@ ul { ...@@ -93,7 +93,7 @@ ul {
max-width: 80px; max-width: 80px;
margin: 20px; margin: 20px;
border-radius: 60px; border-radius: 60px;
box-shadow: 0 4px 19px -5px rgba(0, 0, 0, 1) box-shadow: 0px 0px 4px 4px rgba(68,126,185,.4);
} }
.circle-border { .circle-border {
...@@ -110,7 +110,13 @@ ul { ...@@ -110,7 +110,13 @@ ul {
} }
.thumbnail { .thumbnail {
box-shadow: 0 9px 19px -5px rgba(0, 0, 0, .7) box-shadow: 0px 0px 4px 4px rgba(68,126,185,.4)
}
.thumbnail.worlds {
background-color: rgba(51,51,51,.8);
border: 0;
box-shadow: 0px 0px 4px 4px rgba(68,126,185,1)
} }
.thumbnail>img,.thumbnail>a>img { .thumbnail>img,.thumbnail>a>img {
......
...@@ -2,6 +2,12 @@ module ApplicationHelper ...@@ -2,6 +2,12 @@ module ApplicationHelper
def is_active(action) def is_active(action)
params[:action] == action ? "active" : nil params[:action] == action ? "active" : nil
end end
def content_id
content_for(:content_id) || "content"
end
def shader_class
content_for(:shader_class) || "shader"
end
def logged_in? def logged_in?
not request.authorization.nil? not request.authorization.nil?
end end
......
<% content_for :title, t('home.index.title') %> <% content_for :title, t('home.index.title') %>
<div align="center"> <% content_for :content_id, 'index' %>
<h2> <%= t('home.index.headline') %></h2> <% content_for :shader_class, 'index' %>
<p style="color: grey;padding-top:1em;padding-bottom:1em;"> <%= t('home.index.description_html') %></p> <div align="center">
<h1 class="fadeindown"> <%= t('home.index.headline') %></h1>
<p style="padding-top:1em;padding-bottom:1em;"> <%= t('home.index.description_html') %></p>
<a href="screenshots" class="btn btn-primary" data-placement="bottom" data-original-title="view the gallery"><i class="glyphicon glyphicon-picture" aria-hidden="true"></i> Screenshots</a> <a href="screenshots" class="btn btn-primary" data-placement="bottom" data-original-title="view the gallery"><i class="glyphicon glyphicon-picture" aria-hidden="true"></i> Screenshots</a>
<button type="button" class="btn btn-success" data-target="#play" data-toggle="modal" data-placement="bottom" data-original-title="nice to have you here :-)"><i class="glyphicon glyphicon-send" aria-hidden="true"></i> <%= t('home.index.join') %> </button> <button type="button" class="btn btn-success" data-target="#play" data-toggle="modal" data-placement="bottom" data-original-title="nice to have you here :-)"><i class="glyphicon glyphicon-send" aria-hidden="true"></i> <%= t('home.index.join') %> </button>
<p style="padding-top:8px;"><strong> <%= t('home.index.release') %> <span id="donate">0.4.15 </span> <a href="http://www.minetest.net/downloads" target="_blank"><i class="glyphicon glyphicon-download"></i></a></strong></p> <p style="padding-top:8px;"><strong> <%= t('home.index.release') %> <span id="donate">0.4.15 </span> <a href="http://www.minetest.net/downloads" target="_blank"><i class="glyphicon glyphicon-download"></i></a></strong></p>
...@@ -24,8 +26,9 @@ ...@@ -24,8 +26,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="space-top-sm"></div>
<div class="col-lg-4 col-md-4 thumb"> <div class="col-lg-4 col-md-4 thumb">
<div class="thumbnail"> <div class="thumbnail worlds">
<%= image_tag('home/index/vipworld.png') %> <%= image_tag('home/index/vipworld.png') %>
<div class=caption><p> <div class=caption><p>
<h4><strong>VIP World</strong><span class="label label-default" style="float:right;">Port 30000</span></h4></p> <h4><strong>VIP World</strong><span class="label label-default" style="float:right;">Port 30000</span></h4></p>
...@@ -33,7 +36,7 @@ ...@@ -33,7 +36,7 @@
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-4 thumb"> <div class="col-lg-4 col-md-4 thumb">
<div class=thumbnail> <div class="thumbnail worlds">
<%= image_tag('home/index/podworld.png') %> <%= image_tag('home/index/podworld.png') %>
<div class=caption><p> <div class=caption><p>
<h4><strong>Biopodworld</strong><span class="label label-default" style="float:right;">Port 30001</span></h4></p> <h4><strong>Biopodworld</strong><span class="label label-default" style="float:right;">Port 30001</span></h4></p>
...@@ -41,7 +44,7 @@ ...@@ -41,7 +44,7 @@
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-4 thumb"> <div class="col-lg-4 col-md-4 thumb">
<div class=thumbnail> <div class="thumbnail worlds">
<%= image_tag('home/index/technicworld.png') %> <%= image_tag('home/index/technicworld.png') %>
<div class=caption><p> <div class=caption><p>
<h4><strong>Technicworld</strong><span class="label label-default" style="float:right;">Port 30002</span></h4></p> <h4><strong>Technicworld</strong><span class="label label-default" style="float:right;">Port 30002</span></h4></p>
...@@ -49,27 +52,12 @@ ...@@ -49,27 +52,12 @@
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<!-- <div id="" align="left" style="color:grey;">
<p><%= t('home.index.ssdb_html') %></p>
</div>
<div id="" align="right" style="color:grey;">
<p><%= t('home.index.kvm_html') %></p>
</div>
<div id="" align="left" style="color:grey;">
<p><%= t('home.index.theme_html') %></p>
</div>
-->
<hr style="margin-top:20px;"/>
<div id="diashow" class="carousel slide carousel-fade" data-ride="carousel"> <div id="diashow" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<!-- <li data-target="#diashow" data-slide-to="0" class="active"></li> -->
<li data-target="#diashow" data-slide-to="0" class="active"></li> <li data-target="#diashow" data-slide-to="0" class="active"></li>
<li data-target="#diashow" data-slide-to="1"></li> <li data-target="#diashow" data-slide-to="1"></li>
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner">
<!-- <div class="item active">
<img src="//images.illuna-minetest.tk/diashow/1.jpg" alt="...">
</div> -->
<div class="item active"> <div class="item active">
<img src="//images.illuna-minetest.tk/diashow/2.jpg" alt="..."> <img src="//images.illuna-minetest.tk/diashow/2.jpg" alt="...">
</div> </div>
......
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<div style="text-align:center;"> <div style="text-align:center;">
<h2><%= t('home.stats.headline') %></h2> <h2><%= t('home.stats.headline') %></h2>
<div class="col-md-6"> <div class="col-md-6">
<img class="stat-img animated fadeInDownBig" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_players-day.png" alt="" width="100%" /> <img class="stat-img fadeintopleft" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_players-day.png" alt="" width="100%" />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<img class="stat-img animated fadeInDownBig" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_players-week.png" alt="" width="100%" /> <img class="stat-img fadeintopright" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_players-week.png" alt="" width="100%" />
</div> </div>
<div class=""> <div class="">
<button class="btn btn-default btn-xs" type="button" data-toggle="collapse" data-target="#more_players" aria-expanded="false" aria-controls="more_players"> <button class="btn btn-default btn-xs" type="button" data-toggle="collapse" data-target="#more_players" aria-expanded="false" aria-controls="more_players">
...@@ -14,24 +14,24 @@ ...@@ -14,24 +14,24 @@
</div> </div>
<div class="collapse" id="more_players"> <div class="collapse" id="more_players">
<div class="col-md-6"> <div class="col-md-6">
<img class="stat-img animated fadeInRight" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_players-month.png" alt="" width="100%" /> <img class="stat-img fadeindownfast" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_players-month.png" alt="" width="100%" />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<img class="stat-img animated fadeInLeft" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_players-year.png" alt="" width="100%" /> <img class="stat-img fadeindownfast" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_players-year.png" alt="" width="100%" />
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<img class="stat-img animated fadeInLeftBig" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_technic_players-day.png" alt="" width="100%" /> <img class="stat-img fadeinleft" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_technic_players-day.png" alt="" width="100%" />
</div> </div>
<div class="col-md-6" style="padding-bottom:0.6em;"> <div class="col-md-6" style="padding-bottom:0.6em;">
<img class="stat-img animated fadeInRightBig" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_technic_players-week.png" alt="" width="100%" /> <img class="stat-img fadeinright" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_technic_players-week.png" alt="" width="100%" />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<img class="stat-img animated fadeInLeft" id="slow" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_lw_players-day.png" alt="" width="100%" /> <img class="stat-img fadeinleft" id="slow" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_lw_players-day.png" alt="" width="100%" />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<img class="stat-img animated fadeInRight" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_lw_players-week.png" alt="" width="100%" /> <img class="stat-img fadeinright" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_lw_players-week.png" alt="" width="100%" />
</div> </div>
<div class=""> <div class="">
<button class="btn btn-default btn-xs" type="button" data-toggle="collapse" data-target="#more_lw_players" aria-expanded="false" aria-controls="more_players"> <button class="btn btn-default btn-xs" type="button" data-toggle="collapse" data-target="#more_lw_players" aria-expanded="false" aria-controls="more_players">
...@@ -40,23 +40,23 @@ ...@@ -40,23 +40,23 @@
</div> </div>
<div class="collapse" id="more_lw_players"> <div class="collapse" id="more_lw_players">
<div class="col-md-6"> <div class="col-md-6">
<img class="stat-img animated fadeInRight" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_lw_players-month.png" alt="" width="100%" /> <img class="stat-img fadeindownfast" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_lw_players-month.png" alt="" width="100%" />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<img class="stat-img animated fadeInLeft" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_lw_players-year.png" alt="" width="100%" /> <img class="stat-img fadeindownfast" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/minetest_lw_players-year.png" alt="" width="100%" />
</div> </div>
</div> </div>
<div class="col-md-6" id="stat-col-sec"> <div class="col-md-6" id="stat-col-sec">
<img class="stat-img animated fadeInLeftBig" src="https://monitor.tchncs.de/tchncs2/tchncs2/ping_-day.png" alt="" width="100%" /> <img class="stat-img fadeinleft" src="https://monitor.tchncs.de/tchncs2/tchncs2/ping_-day.png" alt="" width="100%" />
</div> </div>
<div class="col-md-6" id="stat-col-sec"> <div class="col-md-6" id="stat-col-sec">
<img class="stat-img animated fadeInRightBig" src="https://monitor.tchncs.de/tchncs2/tchncs2/ping_-week.png" alt="" width="100%" /> <img class="stat-img fadeinright" src="https://monitor.tchncs.de/tchncs2/tchncs2/ping_-week.png" alt="" width="100%" />
</div> </div>
<div class="col-md-6" id="stat-col-sec"> <div class="col-md-6" id="stat-col-sec">
<img class="stat-img animated fadeInUpBig" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/ping_-day.png" alt="" width="100%" /> <img class="stat-img fadeinleft" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/ping_-day.png" alt="" width="100%" />
</div> </div>
<div class="col-md-6" id="stat-col-sec"> <div class="col-md-6" id="stat-col-sec">
<img class="stat-img animated fadeInUpBig" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/ping_-week.png" alt="" width="100%" /> <img class="stat-img fadeinright" src="https://monitor.tchncs.de/illuna-minetest/illuna-minetest/ping_-week.png" alt="" width="100%" />
</div> </div>
</div> </div>
<% content_for :after do %> <% content_for :after do %>
......
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
<%= yield(:stylesheet) %> <%= yield(:stylesheet) %>
</head> </head>
<body link="#c7c7c7" vlink="#c7c7c7" alink="#c7c7c7"> <body link="#c7c7c7" vlink="#c7c7c7" alink="#c7c7c7">
<canvas id="pixie"></canvas>
<nav class="navbar navbar-default navbar-fixed-top"> <nav class="navbar navbar-default navbar-fixed-top">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
...@@ -45,8 +46,7 @@ ...@@ -45,8 +46,7 @@
</div> </div>
</nav> </nav>
<div class="space-top"></div> <div class="space-top"></div>
<div class="container shader" id="content"> <div class="container <%= shader_class %>" id="<%= content_id %>">
<canvas id="pixie"></canvas>
<% if notice %> <% if notice %>
<p class="alert alert-success"><%= notice %></p> <p class="alert alert-success"><%= notice %></p>
<% end %> <% end %>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment