diff --git a/i2p2www/pages/site/index.html b/i2p2www/pages/site/index.html index 1b48365708cf778ce33e92eea4077220619e406c..93b06edb9b3dc5b4ce1a9879ecb21a6a3d121c8a 100644 --- a/i2p2www/pages/site/index.html +++ b/i2p2www/pages/site/index.html @@ -4,6 +4,8 @@ {% block metadesc %}{{ _('Anonymous peer-to-peer distributed communication layer built with open source tools and designed to run any traditional Internet service such as email, IRC or web hosting.') }}{% endblock %} {% block content_outer %} <div class="main"> + <img src="{{ url_for('static', filename='images/routerconsole-light.png') }}" class="routerconsole" /> + <img src="{{ url_for('static', filename='images/console-active.png') }}" class="android" /> <h1>{{ _('What does I2P do for you?') }}</h1> <p>{% trans %}The I2P network provides strong privacy protections for communication over the Internet. Many activities that would risk your privacy on the public Internet can be conducted anonymously inside I2P.{% endtrans %}</p> <a class="get-i2p" href="{{ url_for('downloads_list', lang=g.lang) }}">{% trans version=ver() %}Get I2P {{ version }}{% endtrans %}</a> diff --git a/i2p2www/static/images/console-active.png b/i2p2www/static/images/console-active.png new file mode 100644 index 0000000000000000000000000000000000000000..d7042a7610146ee2139fe431fca8c348bfba8b7e Binary files /dev/null and b/i2p2www/static/images/console-active.png differ diff --git a/i2p2www/static/images/routerconsole-light.png b/i2p2www/static/images/routerconsole-light.png new file mode 100644 index 0000000000000000000000000000000000000000..369b56da30afa85c916bfdc8b38059d5bab6de9d Binary files /dev/null and b/i2p2www/static/images/routerconsole-light.png differ diff --git a/i2p2www/static/styles/duck/desktop.css b/i2p2www/static/styles/duck/desktop.css index 89a1197966aca8ff053d1acabf2610b386453d30..7a27485de0f703b99b2f5ff8a817c5ce7b2307bd 100644 --- a/i2p2www/static/styles/duck/desktop.css +++ b/i2p2www/static/styles/duck/desktop.css @@ -206,19 +206,30 @@ menu ul, */ div#content .main { - padding: 4em 35% 4em 10%; + padding: 4em 10% 4em 50%; } -.main .get-i2p { +.main img { position: absolute; - right: 10%; - margin-top: -1em; - max-width: 20%; - -moz-transform: rotate(-5deg); - transform: rotate(-5deg); - -webkit-transform: rotate(-5deg); - -ms-transform: rotate(-5deg); - -o-transform: rotate(-5deg); +} + +.main img.routerconsole { + left: 10%; + max-height: 70%; + max-width: 35%; + top: 10%; +} + +.main img.android { + left: 35%; + max-height: 60%; + max-width: 10%; + top: 30%; +} + +.main .get-i2p { + margin-top: 1em; + max-width: 50%; } .main .get-i2p:hover { diff --git a/i2p2www/static/styles/duck/mobile.css b/i2p2www/static/styles/duck/mobile.css index abcdf7b01f6594bb913277f7b26e207e132a201b..9ea7c1004dba1a6dcd8cb79ad15d467f29f9358b 100644 --- a/i2p2www/static/styles/duck/mobile.css +++ b/i2p2www/static/styles/duck/mobile.css @@ -108,6 +108,22 @@ div#content .main { padding: 4em 10% } +.main img.routerconsole { + float: left; + left: 10%; + margin-bottom: 1em; + max-width: 85%; + top: 10%; +} + +.main img.android { + left: 70%; + max-height: 60%; + max-width: 20%; + position: absolute; + top: 15%; +} + .main .get-i2p { margin-bottom: -1.5em; margin-top: .5em;