Commit 37403c4b authored by Milan's avatar Milan

redesign indexpage

adjust shadows
drop animate.css, use own animations
tidy a bit
parent 3dee7b25
.animated#slow {
-vendor-animation-duration: 8s;
-vendor-animation-delay: 7s;
.fadeindown {
animation-name: fadeindown;
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 @@
src: url(//assets.illuna-minetest.tk/fonts/roboto-regular.ttf) format("opentype");
}
@import 'animate';
@import 'animations';
@import 'back-to-top';
@import 'header';
@import 'images';
......
......@@ -7,15 +7,18 @@ body {
.container {
font-weight: 400
}.button:hover,
body {
}
.button:hover, body {
color: grey
}
#shader,
.shader {
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 {
float: left
}
......@@ -28,19 +31,37 @@ a {
color: #91B0E6;
transition: color ease .4s;
font-weight: 600
}#nohover {
}
#nohover {
pointer-events: none;
border: 0
}.disabled {
}
.disabled {
color: #E4E4E4
}.contact-head {
}
.contact-head {
border-radius: 120px;
border: 1px solid #ccc;
max-width: 500px
}
a:hover {
text-decoration: none;
}
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 {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity
transition-property: opacity;
transition: all ease 2s;
}
.carousel-fade .carousel-inner .active {
opacity: 1
opacity: 1;
transition: all ease 2s;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1
z-index: 1;
transition: all ease 2s;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1
opacity: 1;
transition: all ease 2s;
}
.carousel-fade .carousel-control {
z-index: 2
}
\ No newline at end of file
z-index: 2;
transition: all ease 2s;
}
......@@ -93,7 +93,7 @@ ul {
max-width: 80px;
margin: 20px;
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 {
......@@ -110,7 +110,13 @@ ul {
}
.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 {
......
......@@ -2,6 +2,12 @@ module ApplicationHelper
def is_active(action)
params[:action] == action ? "active" : nil
end
def content_id
content_for(:content_id) || "content"
end
def shader_class
content_for(:shader_class) || "shader"
end
def logged_in?
not request.authorization.nil?
end
......
<% content_for :title, t('home.index.title') %>
<div align="center">
<h2> <%= t('home.index.headline') %></h2>
<p style="color: grey;padding-top:1em;padding-bottom:1em;"> <%= t('home.index.description_html') %></p>
<% content_for :content_id, 'index' %>
<% content_for :shader_class, 'index' %>
<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>
<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>
......@@ -24,8 +26,9 @@
</div>
</div>
</div>
<div class="space-top-sm"></div>
<div class="col-lg-4 col-md-4 thumb">
<div class="thumbnail">
<div class="thumbnail worlds">
<%= image_tag('home/index/vipworld.png') %>
<div class=caption><p>
<h4><strong>VIP World</strong><span class="label label-default" style="float:right;">Port 30000</span></h4></p>
......@@ -33,7 +36,7 @@
</div>
</div>
<div class="col-lg-4 col-md-4 thumb">
<div class=thumbnail>
<div class="thumbnail worlds">
<%= image_tag('home/index/podworld.png') %>
<div class=caption><p>
<h4><strong>Biopodworld</strong><span class="label label-default" style="float:right;">Port 30001</span></h4></p>
......@@ -41,7 +44,7 @@
</div>
</div>
<div class="col-lg-4 col-md-4 thumb">
<div class=thumbnail>
<div class="thumbnail worlds">
<%= image_tag('home/index/technicworld.png') %>
<div class=caption><p>
<h4><strong>Technicworld</strong><span class="label label-default" style="float:right;">Port 30002</span></h4></p>
......@@ -49,27 +52,12 @@
</div>
</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">
<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="1"></li>
</ol>
<div class="carousel-inner">
<!-- <div class="item active">
<img src="//images.illuna-minetest.tk/diashow/1.jpg" alt="...">
</div> -->
<div class="item active">
<img src="//images.illuna-minetest.tk/diashow/2.jpg" alt="...">
</div>
......
......@@ -2,10 +2,10 @@
<div style="text-align:center;">
<h2><%= t('home.stats.headline') %></h2>
<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 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 class="">
<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 @@
</div>
<div class="collapse" id="more_players">
<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 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 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 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 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 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 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">
......@@ -40,23 +40,23 @@
</div>
<div class="collapse" id="more_lw_players">
<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 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 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 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 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 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>
<% content_for :after do %>
......
......@@ -19,6 +19,7 @@
<%= yield(:stylesheet) %>
</head>
<body link="#c7c7c7" vlink="#c7c7c7" alink="#c7c7c7">
<canvas id="pixie"></canvas>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
......@@ -45,8 +46,7 @@
</div>
</nav>
<div class="space-top"></div>
<div class="container shader" id="content">
<canvas id="pixie"></canvas>
<div class="container <%= shader_class %>" id="<%= content_id %>">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% 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