From 9bf4f790abf3d795448839fa4a88d9f99d8f9c6c Mon Sep 17 00:00:00 2001 From: str4d Date: Thu, 28 May 2015 21:48:16 +0000 Subject: [PATCH 1/4] Shortlinks for blog posts --- i2p2www/blog/README | 5 +++++ i2p2www/blog/shortlinks.py | 12 ++++++++++++ i2p2www/blog/views.py | 16 +++++++++++++++- i2p2www/pages/global/macros | 1 + i2p2www/urls.py | 1 + 5 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 i2p2www/blog/shortlinks.py diff --git a/i2p2www/blog/README b/i2p2www/blog/README index 3659bea7..cbe2c797 100644 --- a/i2p2www/blog/README +++ b/i2p2www/blog/README @@ -43,6 +43,11 @@ with this suffix will be visible at their post URL, but will not be shown in the blog index. To publish the draft post, change the filename to remove the '.draft' suffix. +Creating shortlinks +------------------- + +See the comments in shortlinks.py. + How to make a release notice ---------------------------- diff --git a/i2p2www/blog/shortlinks.py b/i2p2www/blog/shortlinks.py new file mode 100644 index 00000000..1ccab512 --- /dev/null +++ b/i2p2www/blog/shortlinks.py @@ -0,0 +1,12 @@ +############ +# Shortlinks +# +# To create the URL https://geti2p.net/b/ +# linking to https://geti2p.net/en/blog/post/, +# add a new line below containing +# +# '': '', + +BLOG_SHORTLINKS = { + 'toronto': '2015/05/25/Toronto-Meetup', +} diff --git a/i2p2www/blog/views.py b/i2p2www/blog/views.py index a162e76d..ba7b735a 100644 --- a/i2p2www/blog/views.py +++ b/i2p2www/blog/views.py @@ -1,8 +1,9 @@ -from flask import abort, render_template, request +from flask import abort, g, redirect, render_template, request, url_for from werkzeug.contrib.atom import AtomFeed from i2p2www import BLOG_DIR, BLOG_POSTS_PER_FEED, BLOG_POSTS_PER_PAGE, cache from i2p2www.blog.helpers import get_blog_posts, get_blog_feed_items, get_date_from_slug, get_metadata_from_meta, render_blog_post +from i2p2www.blog.shortlinks import BLOG_SHORTLINKS from i2p2www.helpers import Pagination, get_for_page @@ -38,6 +39,19 @@ def blog_post(slug): else: abort(404) +@cache.memoize(600) +def blog_post_shortlink(shortlink): + lang = 'en' + if hasattr(g, 'lang') and g.lang: + lang = g.lang + + try: + slug = BLOG_SHORTLINKS[shortlink] + except KeyError: + abort(404) + + return redirect(url_for('blog_post', lang=lang, slug=slug)) + def blog_rss(): # TODO: implement pass diff --git a/i2p2www/pages/global/macros b/i2p2www/pages/global/macros index d832ab47..3615014b 100644 --- a/i2p2www/pages/global/macros +++ b/i2p2www/pages/global/macros @@ -5,6 +5,7 @@ {%- else -%}{{ url_for('blog_index', lang=lang) }} {%- endif -%} {%- elif request.endpoint == 'blog_post' -%}{{ url_for('blog_post', lang=lang, slug=slug) }} +{%- elif request.endpoint == 'blog_post_shortlink' -%}{{ url_for('blog_post_shortlink', lang=lang, shortlink=shortlink) }} {%- elif request.endpoint == 'meetings_show' -%}{{ url_for('meetings_show', lang=lang, id=id) }} {%- elif request.endpoint == 'downloads_debian' -%}{{ url_for('downloads_debian', lang=lang) }} {%- elif request.endpoint == 'downloads_select' -%}{{ url_for('downloads_select', lang=lang, version=version, file=file) }} diff --git a/i2p2www/urls.py b/i2p2www/urls.py index 9e226447..a46a2f6c 100644 --- a/i2p2www/urls.py +++ b/i2p2www/urls.py @@ -59,6 +59,7 @@ url('//blog/post/', 'blog.views.blog_post') url('//feed/blog/rss', 'blog.views.blog_rss') url('//feed/blog/atom', 'blog.views.blog_atom') url('//feed/blog/category//atom', 'blog.views.blog_atom') +url('/b/', 'blog.views.blog_post_shortlink') url('//meetings/', 'meetings.views.meetings_index', defaults={'page': 1}) url('//meetings/page/', 'meetings.views.meetings_index') From 2f76c91b516fa9c04b6760a0e6c4037089119237 Mon Sep 17 00:00:00 2001 From: str4d Date: Fri, 29 May 2015 14:03:20 +0000 Subject: [PATCH 2/4] Consistent CSS formatting Via http://tools.maxcdn.com/process --- i2p2www/static/styles/duck/default.css | 865 +++++++++++---------- i2p2www/static/styles/duck/default.rtl.css | 20 +- i2p2www/static/styles/duck/desktop.css | 794 ++++++++++++------- i2p2www/static/styles/duck/desktop.rtl.css | 137 ++-- i2p2www/static/styles/duck/mobile.css | 280 +++---- 5 files changed, 1173 insertions(+), 923 deletions(-) diff --git a/i2p2www/static/styles/duck/default.css b/i2p2www/static/styles/duck/default.css index 3a0619b6..d0163272 100644 --- a/i2p2www/static/styles/duck/default.css +++ b/i2p2www/static/styles/duck/default.css @@ -1,424 +1,441 @@ -@import url('reset.css'); - -body { - font-family: Droid Sans, Helvetica, sans-serif; - font-size: 10px; - background-color: #ffffdd; - min-height:800px; - width:100%; - background:-moz-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc; - background:-webkit-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc; -} - -a { - color:#d00e0e; - text-decoration:none; -} - -a:hover { - color:#f00e0e; -} - -div.hide { - display:none; -} - -div#topbar { - width:80%; - /*margin:1em auto;*/ - margin: 1em auto; - position:relative; -} - -div#topbar #logo { - float: left; -} - -div#topbar #logo img:hover { - filter:alpha(opacity=60); - -moz-opacity: 0.6; - opacity: 0.6; -} - -nav { - clear: both; -} - -div#content { - display:block; -} - -/** - * The .main class is for content wrapper on the home page (with the big banner) - */ -div#content .main { - background:url('../../images/dots.png') 0 10% no-repeat rgba(171, 204, 113, 0.6); - background-size:100% auto; - width:auto; - padding:4em 10% 4em 10%; - position:relative; - margin:0 auto; - text-shadow:1px 1px 1px rgba(255,255,255,.5); - font-size:1.6em; - line-height:1.5em; - border:2px solid #abcc71; - border-left:none; - border-right:none; - box-shadow:0px 2px 8px rgba(0,0,0,.2) -} - -div#content .main h1 { - font-family:"URW Gothic L", "Century Gothic", sans-serif; - font-size:2.5em; - text-shadow:1px 1px 2px rgba(0,0,0,.3); - color:white; - margin-bottom:.5em; -} - -.main .get-i2p { - display:block; - top:50%; - padding:.5em; - line-height:1em; - font-size:2em; - color:white; - font-family:Arial, Helvetica, sans-serif; - font-weight:bold; - text-transform:uppercase; - text-decoration:none; - text-align:center; - background:green; - border-radius:.3em; - text-shadow:1px 1px 1px rgba(0,0,0,.2); - box-shadow:2px 2px 4px rgba(0, 0, 0, 0.3), 1em 3em 2em 0.5em rgba(255, 255, 255, 0.3) inset, inset -.2em -.5em 1em -0em rgba(0,0,0,.3) -} - -div#content .aside-wrap { - width:80%; - margin:2em auto; -} - -div#content .aside { - position:relative; - display:inline-block; - vertical-align:top; - font-size:1.2em -} - -div#content .aside a { - font-weight:bold; -} - -div#content .aside h1 { - padding:1em 0; - border-bottom:1px solid rgba(171, 204, 113, 0.6); - font-size:1.4em; - color:#222200; - text-shadow:1px 1px 1px rgba(0,0,0,.3) -} - -div#content .aside p { - margin:1em 0; -} - -div#content .aside ul { - margin:1em 0; -} - -div#content .aside ul li { - list-style-type:none; - margin:1em 0; - line-height:1.3em; -} - -div#content .feed-icon { - background-image: url('../../images/feed-icon-28x28.png'); - display: block; - float: right; - height: 28px; - margin: 1em; - text-indent: -9999px; - width: 28px; -} - -div#content .lastupdated { - background-color: #ffffdd; - border-radius: 0 0 5px 5px; - padding: 2px 4px; - position: relative; - left: 8%; - text-align: right; - width: 80%; -} - -/** - * The .inner class is for the content wrapper on inner pages (as opposed to the home page) - */ -div#content .inner { - width:auto; - margin: 0 5%; - padding: 0 5% 0.1em; - position:relative; - background: rgba(171, 204, 113, 0.6); - border-top:2px solid #abcc71; - border-left: 2px solid #abcc71; - border-right: 2px solid #abcc71; - border-radius: 5px 5px 0 0; - color:black; - font-size:1.2em; - line-height:1.4em; -} - -div#content .inner h1, div#content .inner h2, div#content .inner h3, div#content .inner h4 { - color:white; - text-shadow:1px 1px 1px rgba(0,0,0,.3); - margin:1em 0 .5em; - padding-bottom:.2em; - clear:both; - line-height: 110%; -} - -div#content .inner h2, div#content .inner h3, div#content .inner h4 { - border-bottom:1px solid white; -} - -div#content .inner h1 { - font-size:2.2em; - margin:1em 0 0.5em; - text-align: center; - width:auto; -} - -div#content .inner h2 { - font-size:1.6em; -} - -div#content .inner h3 { - font-size:1.4em; -} - -div#content .inner h4 { - font-size:1.2em; - font-style: italic; -} - -div#content .inner ol { - margin:1.5em; -} - -div#content .inner ul { - margin:1.5em; 1em; -} - -div#content .inner p { - margin:1em 0; -} - -div#content .inner th { - padding:2px 5px; -} - -div#content .inner td { - border: 1px solid; - padding:2px 5px; -} - -div#content .inner td.blue { - border: 2px solid blue; - color: blue; -} - -/* - * Download page - */ - -.package { - border: 6px solid rgba(171, 204, 113, 0.7); - border-radius: 5px; - margin: 10px; - padding: 10px; -} - -.os { - color: white; - font-size: 1.6em; - font-weight: bold; - text-align: center; - text-decoration: underline; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); -} - -.file { - margin-bottom: 10px; -} -.file > a, .filedownload { - padding: 5px; - background-color: rgba(255,255,255,0.2); - box-shadow: -1px -1px 1px 1px rgb(51, 51, 51) inset; - text-align: center; -} -.file .default { - border-radius: 5px 5px 0 0; - display: block; - overflow: hidden; - padding: 10px; -} -.file .default .name { - font-size: 1.6em; -} -.file .mirrors, .file .sig { - box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - display: inline-block; - width: 50%; -} -.file .mirrors { - border-radius: 0 0 0 5px; -} -.file .sig { - border-radius: 0 0 5px 0; - vertical-align: top; -} -.details .hash:before { - content: 'SHA256: '; -} - -.warning { - background-color: rgba(171, 204, 113, 0.7); - border: 1px dashed rgb(208, 14, 14); - border-radius: 5px; - margin: 5px; - padding: 5px; -} - -.filedownload { - border-radius: 5px; - text-align: center; -} - -/* - * Threat model - */ - -div#content .inner ul.DREAD { - border: 2px solid red; - float: left; - list-style: none; - margin: 1em 1.5em 1em 0; - padding: 0.5em; -} - -/* - * Additions to syntax.css - */ - -.highlight { - overflow: auto; -} - -/* - * Blog - */ - -#posts { - list-style: none; - margin: 1.5em 0 !important; -} - -#posts article { - border: 2px solid #d00e0e; - border-radius: 5px; - margin: 10px 0; - padding: 10px; -} - -#posts header { - font-size: 1.6em; -} - -#posts header:before { - content: "»"; -} - -#posts footer { - font-style: italic; -} - -#post-info { - list-style: none; - margin: 0 !important; -} - -.system-messages { - background-color: rgba(171, 204, 113, 0.7); - border: 1px dashed rgb(208, 14, 14); - border-radius: 5px; - margin: 5px; - padding: 5px; -} -.system-messages > h1 { - font-size: 1.2em !important; - text-align: left !important; -} - -/* - * Footer - */ - -#global-footer { - width:auto; - border-top:3px - solid #883333; - background:#552222; - box-shadow:0px -4px 8px rgba(0,0,0,.3); - padding:1em 10%; - background:-moz-linear-gradient(#883333, #772222); -} - -#global-footer .aside { - display:inline-block; - vertical-align:top; -} - -#global-footer .aside h1 { - color:#ffdd88; - font-size:1.2em; - text-shadow:-1px -1px 1px rgba(0,0,0,.2); - border-bottom:1px solid #ccaa66; - margin:1em 0; - line-height:1.3em; -} - -#global-footer .aside ul { - margin:0; - padding:0; -} - -#global-footer .aside ul li { - color:#ffdd88; - list-style-type:none; - line-height:1.5em; -} - -#global-footer .aside ul li a { - color:#ccaa66; - font-weight:bold; -} - -#global-footer .aside ul li a:hover { - text-decoration:underline; -} - -#global-footer a.button { - padding:.5em 2em; - background-color:#cc2222; - border:1px solid #bb2222; - border-radius:3px; - display:inline-block; - color:white; - margin:1em auto; - text-align:center; - width:auto; - font-weight:bold; -} +@import url('reset.css'); + +body { + font-family: Droid Sans, Helvetica, sans-serif; + font-size: 10px; + background-color: #ffffdd; + min-height: 800px; + width: 100%; + background: -moz-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc; + background: -webkit-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc; +} + +a { + color: #d00e0e; + text-decoration: none; +} + +a:hover { + color: #f00e0e +} + +div.hide { + display: none +} + +div#topbar { + width: 80%; + /*margin: 1em auto;*/ + margin: 1em auto; + position: relative; +} + +div#topbar #logo { + float: left +} + +div#topbar #logo img:hover { + filter: alpha(opacity=60); + -moz-opacity: 0.6; + opacity: 0.6; +} + +nav { + clear: both +} + +div#content { + display: block +} + +/** + * The .main class is for content wrapper on the home page (with the big banner) + */ + +div#content .main { + background: url('../../images/dots.png') 0 10% no-repeat rgba(171, 204, 113, 0.6); + background-size: 100% auto; + width: auto; + padding: 4em 10% 4em 10%; + position: relative; + margin: 0 auto; + text-shadow: 1px 1px 1px rgba(255,255,255,.5); + font-size: 1.6em; + line-height: 1.5em; + border: 2px solid #abcc71; + border-left: none; + border-right: none; + box-shadow: 0px 2px 8px rgba(0,0,0,.2); +} + +div#content .main h1 { + font-family: "URW Gothic L", "Century Gothic", sans-serif; + font-size: 2.5em; + text-shadow: 1px 1px 2px rgba(0,0,0,.3); + color: white; + margin-bottom: .5em; +} + +.main .get-i2p { + display: block; + top: 50%; + padding: .5em; + line-height: 1em; + font-size: 2em; + color: white; + font-family: Arial, Helvetica, sans-serif; + font-weight: bold; + text-transform: uppercase; + text-decoration: none; + text-align: center; + background: green; + border-radius: .3em; + text-shadow: 1px 1px 1px rgba(0,0,0,.2); + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 1em 3em 2em 0.5em rgba(255, 255, 255, 0.3) inset, inset -.2em -.5em 1em -0em rgba(0,0,0,.3); +} + +div#content .aside-wrap { + width: 80%; + margin: 2em auto; +} + +div#content .aside { + position: relative; + display: inline-block; + vertical-align: top; + font-size: 1.2em; +} + +div#content .aside a { + font-weight: bold +} + +div#content .aside h1 { + padding: 1em 0; + border-bottom: 1px solid rgba(171, 204, 113, 0.6); + font-size: 1.4em; + color: #222200; + text-shadow: 1px 1px 1px rgba(0,0,0,.3); +} + +div#content .aside p { + margin: 1em 0 +} + +div#content .aside ul { + margin: 1em 0 +} + +div#content .aside ul li { + list-style-type: none; + margin: 1em 0; + line-height: 1.3em; +} + +div#content .feed-icon { + background-image: url('../../images/feed-icon-28x28.png'); + display: block; + float: right; + height: 28px; + margin: 1em; + text-indent: -9999px; + width: 28px; +} + +div#content .lastupdated { + background-color: #ffffdd; + border-radius: 0 0 5px 5px; + padding: 2px 4px; + position: relative; + left: 8%; + text-align: right; + width: 80%; +} + +/** + * The .inner class is for the content wrapper on inner pages (as opposed to the home page) + */ + +div#content .inner { + width: auto; + margin: 0 5%; + padding: 0 5% 0.1em; + position: relative; + background: rgba(171, 204, 113, 0.6); + border-top: 2px solid #abcc71; + border-left: 2px solid #abcc71; + border-right: 2px solid #abcc71; + border-radius: 5px 5px 0 0; + color: black; + font-size: 1.2em; + line-height: 1.4em; +} + +div#content .inner h1, +div#content .inner h2, +div#content .inner h3, +div#content .inner h4 { + color: white; + text-shadow: 1px 1px 1px rgba(0,0,0,.3); + margin: 1em 0 .5em; + padding-bottom: .2em; + clear: both; + line-height: 110%; +} + +div#content .inner h2, +div#content .inner h3, +div#content .inner h4 { + border-bottom: 1px solid white +} + +div#content .inner h1 { + font-size: 2.2em; + margin: 1em 0 0.5em; + text-align: center; + width: auto; +} + +div#content .inner h2 { + font-size: 1.6em +} + +div#content .inner h3 { + font-size: 1.4em +} + +div#content .inner h4 { + font-size: 1.2em; + font-style: italic; +} + +div#content .inner ol { + margin: 1.5em +} + +div#content .inner ul { + margin: 1.5em; + 1em: ; +} + +div#content .inner p { + margin: 1em 0 +} + +div#content .inner th { + padding: 2px 5px +} + +div#content .inner td { + border: 1px solid; + padding: 2px 5px; +} + +div#content .inner td.blue { + border: 2px solid blue; + color: blue; +} + +/* + * Download page + */ + +.package { + border: 6px solid rgba(171, 204, 113, 0.7); + border-radius: 5px; + margin: 10px; + padding: 10px; +} + +.os { + color: white; + font-size: 1.6em; + font-weight: bold; + text-align: center; + text-decoration: underline; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); +} + +.file { + margin-bottom: 10px +} + +.file > a, +.filedownload { + padding: 5px; + background-color: rgba(255,255,255,0.2); + box-shadow: -1px -1px 1px 1px rgb(51, 51, 51) inset; + text-align: center; +} + +.file .default { + border-radius: 5px 5px 0 0; + display: block; + overflow: hidden; + padding: 10px; +} + +.file .default .name { + font-size: 1.6em +} + +.file .mirrors, +.file .sig { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + display: inline-block; + width: 50%; +} + +.file .mirrors { + border-radius: 0 0 0 5px +} + +.file .sig { + border-radius: 0 0 5px 0; + vertical-align: top; +} + +.details .hash:before { + content: 'SHA256: ' +} + +.warning { + background-color: rgba(171, 204, 113, 0.7); + border: 1px dashed rgb(208, 14, 14); + border-radius: 5px; + margin: 5px; + padding: 5px; +} + +.filedownload { + border-radius: 5px; + text-align: center; +} + +/* + * Threat model + */ + +div#content .inner ul.DREAD { + border: 2px solid red; + float: left; + list-style: none; + margin: 1em 1.5em 1em 0; + padding: 0.5em; +} + +/* + * Additions to syntax.css + */ + +.highlight { + overflow: auto +} + +/* + * Blog + */ + +#posts { + list-style: none; + margin: 1.5em 0 !important; +} + +#posts article { + border: 2px solid #d00e0e; + border-radius: 5px; + margin: 10px 0; + padding: 10px; +} + +#posts header { + font-size: 1.6em +} + +#posts header:before { + content: "»" +} + +#posts footer { + font-style: italic +} + +#post-info { + list-style: none; + margin: 0 !important; +} + +.system-messages { + background-color: rgba(171, 204, 113, 0.7); + border: 1px dashed rgb(208, 14, 14); + border-radius: 5px; + margin: 5px; + padding: 5px; +} + +.system-messages > h1 { + font-size: 1.2em !important; + text-align: left !important; +} + +/* + * Footer + */ + +#global-footer { + width: auto; + border-top: 3px solid #883333; + background: #552222; + box-shadow: 0px -4px 8px rgba(0,0,0,.3); + padding: 1em 10%; + background: -moz-linear-gradient(#883333, #772222); +} + +#global-footer .aside { + display: inline-block; + vertical-align: top; +} + +#global-footer .aside h1 { + color: #ffdd88; + font-size: 1.2em; + text-shadow: -1px -1px 1px rgba(0,0,0,.2); + border-bottom: 1px solid #ccaa66; + margin: 1em 0; + line-height: 1.3em; +} + +#global-footer .aside ul { + margin: 0; + padding: 0; +} + +#global-footer .aside ul li { + color: #ffdd88; + list-style-type: none; + line-height: 1.5em; +} + +#global-footer .aside ul li a { + color: #ccaa66; + font-weight: bold; +} + +#global-footer .aside ul li a:hover { + text-decoration: underline +} + +#global-footer a.button { + padding: .5em 2em; + background-color: #cc2222; + border: 1px solid #bb2222; + border-radius: 3px; + display: inline-block; + color: white; + margin: 1em auto; + text-align: center; + width: auto; + font-weight: bold; +} \ No newline at end of file diff --git a/i2p2www/static/styles/duck/default.rtl.css b/i2p2www/static/styles/duck/default.rtl.css index 249a77a2..dc80ef1c 100644 --- a/i2p2www/static/styles/duck/default.rtl.css +++ b/i2p2www/static/styles/duck/default.rtl.css @@ -1,9 +1,11 @@ -/** Topbar **/ -div#topbar #logo { - float: right; -} - -/** Frontpage **/ -div#content .feed-icon { - float: left; -} +/** Topbar **/ + +div#topbar #logo { + float: right +} + +/** Frontpage **/ + +div#content .feed-icon { + float: left +} \ No newline at end of file diff --git a/i2p2www/static/styles/duck/desktop.css b/i2p2www/static/styles/duck/desktop.css index 99eaa065..dc6e4bc4 100644 --- a/i2p2www/static/styles/duck/desktop.css +++ b/i2p2www/static/styles/duck/desktop.css @@ -1,290 +1,504 @@ -body { - font-family:Droid Sans, Helvetica, sans-serif; font-size:10px; - background-color:#ffffdd; - min-height:800px; width:100%; padding-top:1em; - background:-moz-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc; - background:-webkit-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc; -} -a {color:#d00e0e; text-decoration:none;} - a:hover {color:#f00e0e;} - -div.hide {display:none;} - -div#topbar {width:80%; /*margin:1em auto;*/ margin: 1em auto 0; position:relative;} - div#topbar #logo img:hover { - filter:alpha(opacity=60); - -moz-opacity: 0.6; - opacity: 0.6; - } - div#topbar .title { - font-family:"URW Gothic L", "Century Gothic", sans-serif; text-transform:uppercase; font-size:3.5em; - font-weight:bold; text-shadow:1px 1px 1px rgba(0,0,0,.2); color:#333333; - /*position:absolute;*/ top:0; right:0; line-height:41px; vertical-align:middle; - /*max-width: 70%;*/ text-align: right; - } - div#topbar .languages { - display: none; - } - -div.navigation {position:relative;} - ul.languages {margin: 0 2px !important;} - ul.languages li {display:inline-block; *display:inline; *zoom:1; margin: 0 -2px !important;} - -.langname { - background: green; - display: none; - padding: 0.5em; - position: absolute; - right: 0; - text-align: center; - top: 4em; - z-index: 1; -} - -/* Dropdown menu CSS */ - -menu ul, -#cssmenu li, -#cssmenu span, -#cssmenu div.menuitem { - margin: 0; - padding: 0; - position: relative; -} -#cssmenu { - height: 40px; -} -#cssmenu:after, -#cssmenu ul:after { - content: ''; - display: block; - clear: both; -} -#cssmenu div.menuitem { - color: #d00e0e; - display: inline-block; - font-family: "URW Gothic L", "Century Gothic", sans-serif; - font-size: 2em; - font-weight: bold; - text-shadow: 1px 1px 1px rgba(100,20,20,.2); - line-height: 40px; - padding: 0 10px; - text-decoration: none; -} -#cssmenu ul { - list-style: none; -} -#cssmenu > ul { - float: left; - padding: 0 10%; -} -#cssmenu > ul > li { - float: left; -} -#cssmenu > ul > li.right { - position: absolute; - right: 10%; -} -#cssmenu > ul > li:hover:after { - content: ''; - display: block; - width: 0; - height: 0; - position: absolute; - left: 50%; - bottom: 0; - border-left: 10px solid transparent; - border-right: 10px solid transparent; - border-bottom: 10px solid #abcc71; - margin-left: -10px; -} -#cssmenu > ul > li > div.menuitem { - border-radius: 5px 5px 0 0; - -moz-border-radius: 5px 5px 0 0; - -webkit-border-radius: 5px 5px 0 0; -} -#cssmenu > ul > li.active > div.menuitem { - box-shadow: inset 0 0 3px #000000; - -moz-box-shadow: inset 0 0 3px #000000; - -webkit-box-shadow: inset 0 0 3px #000000; - background: #070707; - background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); - background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); - background: -o-linear-gradient(top, #26262c 0%, #070707 100%); - background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); - background: linear-gradient(to bottom, #26262c 0%, #070707 100%); - filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0); -} -#cssmenu .has-sub { - z-index: 1; -} -#cssmenu .has-sub:hover > ul { - display: block; -} -#cssmenu .has-sub ul { - display: none; - position: absolute; - width: 200px; - top: 100%; - left: 0; -} -#cssmenu .has-sub ul li { - border-left: 1px solid #ffffcc; -} -#cssmenu .has-sub ul li.has-sub > div.menuitem:after { - content: "►"; - color: rgba(255,255,255,.5); - float: right; -} -#cssmenu .has-sub ul li div.menuitem { - background: #abcc71; - border-bottom: 1px dotted #ffffcc; - color: #ffffff; - font-size: 9pt; - display: block; - line-height: 120%; - padding: 10px; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); -} -#cssmenu .has-sub ul li div.menuitem:hover .langname { - display: block; -} -#cssmenu .has-sub ul li:hover > div.menuitem, -#cssmenu .has-sub ul li:hover > a > div.menuitem { - background: #8bbc51; -} -#cssmenu .has-sub .has-sub:hover > ul { - display: block; -} -#cssmenu .has-sub .has-sub ul { - display: none; - position: absolute; - left: 100%; - top: 0; -} -#cssmenu .has-sub .has-sub ul li:first-child { - border-left: none; -} - -/* End of dropdown menu CSS */ - -div#content {display:block;} - /** - * The .main class is for content wrapper on the home page (with the big banner) - */ -div#content .main { - background:url('../../images/dots.png') 0 10% no-repeat rgba(171, 204, 113, 0.6); background-size:100% auto; width:auto; padding:4em 35% 4em 10%; position:relative; - margin:0 auto; text-shadow:1px 1px 1px rgba(255,255,255,.5); font-size:1.6em; line-height:1.5em; - border:2px solid #abcc71; border-left:none; border-right:none; box-shadow:0px 2px 8px rgba(0,0,0,.2)} - div#content .main h1 {font-family:"URW Gothic L", "Century Gothic", sans-serif; font-size:2.5em; - text-shadow:1px 1px 2px rgba(0,0,0,.3); color:white; margin-bottom:.5em;} - .main .get-i2p { - position:absolute; display:block; top:50%; right: 10%; - margin-top:-1em; max-width:20%; padding:.5em; line-height:1em; - font-size:2em; color:white; font-family:Arial, Helvetica, sans-serif; font-weight:bold; - text-transform:uppercase; text-decoration:none; text-align:center; - background:green; border-radius:.3em; -moz-transform:rotate(-5deg); - transform:rotate(-5deg); -webkit-transform:rotate(-5deg); - -ms-transform:rotate(-5deg); -o-transform:rotate(-5deg); - text-shadow:1px 1px 1px rgba(0,0,0,.2); - box-shadow:2px 2px 4px rgba(0, 0, 0, 0.3), 1em 3em 2em 0.5em rgba(255, 255, 255, 0.3) inset, inset -.2em -.5em 1em -0em rgba(0,0,0,.3)} - .main .get-i2p:hover {box-shadow:2px 2px 2px rgba(0, 0, 0, 0.3), inset 0 -2.2em 2.2em rgba(255, 255, 255, 0.3), inset .2em .5em 1em 0em rgba(0,0,0,.3);} - div#content .aside-wrap {width:80%; margin:2em auto;} - div#content .aside {position:relative; width:30.9%; margin-left:3%; display:inline-block; vertical-align:top; font-size:1.3em} - div#content .aside:first-child {margin-left:0%;} - div#content .aside a {font-weight:bold;} - div#content .aside h1 {padding:1em 0; border-bottom:1px solid rgba(171, 204, 113, 0.6); font-size:1.4em; color:#222200; text-shadow:1px 1px 1px rgba(0,0,0,.3)} - div#content .aside p {margin:1em 0;} - div#content .aside ul {margin:1em 0;} - div#content .aside ul li {list-style-type:none; margin:1em 0; line-height:1.3em;} - - div#content .feed-icon { - background-image: url('../../images/feed-icon-28x28.png'); - display: block; - float: right; - height: 28px; - margin: 1em; - text-indent: -9999px; - width: 28px; - } - - div#content .lastupdated { - left: auto; - position: absolute; - right: 10%; - text-align: right; - top: 0; - width: 200px; - } - - /** - * The .inner class is for the content wrapper on inner pages (as opposed to the home page) - */ - div#content .inner { - width:auto; margin: 0 5%; padding: 4em 5% 2em; position:relative; - background: rgba(171, 204, 113, 0.6); border-top:2px solid #abcc71; - border-left: 2px solid #abcc71; border-right: 2px solid #abcc71; border-radius: 5px 5px 0 0; - color:black; font-size:1.3em; line-height:1.4em; - } - -div#content .inner > .title { - display: none; -} - - div#content .inner ol {margin:1.5em;} - div#content .inner ul {margin:1.5em; 1em;} - div#content .inner p {margin:1em 0;} - div#content .inner td {padding:2px 5px;} - -/* CSS for downloads list */ - -.package { - overflow: hidden; -} -.package .os { - float: left; - width: 20%; -} -.package .details { - float: right; - width: 80%; -} -.file { - float: left; - width: 40%; -} -.file > a:hover { - box-shadow: 1px 1px 1px 1px rgb(51, 51, 51) inset; -} -.details .hash { - float: right; - overflow: auto; - width: 50%; -} -.details > p, .details > ol { - clear: both; -} -.filedownload { - margin-left: 29%; -} - -/* End of downloads list CSS */ - -.biblinks { - left: auto; - position: absolute; - right: 10%; - top: 0; -} - -#global-footer {width:auto; border-top:3px solid #883333; background:#552222; box-shadow:0px -4px 8px rgba(0,0,0,.3); padding:1em 10%; background:-moz-linear-gradient(#883333, #772222);} - #global-footer .aside {display:inline-block; width:15%; margin-left:1%; vertical-align:top;} - #global-footer .aside.first {margin-left:0;} - #global-footer .aside.third, div##global-footer .aside.fifth {margin-left:2.5%} - #global-footer .aside h1 {color:#ffdd88; font-size:1.2em; text-shadow:-1px -1px 1px rgba(0,0,0,.2); border-bottom:1px solid #ccaa66; margin:1em 0; line-height:1.3em;} - #global-footer .aside ul {margin:0; padding:0;} - #global-footer .aside ul li {list-style-type:none; line-height:1.5em;} - #global-footer .aside ul li a {color:#ccaa66; font-weight:bold;} - #global-footer .aside ul li a:hover {text-decoration:underline;} - #global-footer a.button {padding:.5em 2em; background-color:#cc2222; border:1px solid #bb2222; border-radius:3px; display:inline-block; color:white; margin:1em auto; text-align:center; width:auto; font-weight:bold;} +body { + font-family: Droid Sans, Helvetica, sans-serif; + font-size: 10px; + background-color: #ffffdd; + min-height: 800px; + width: 100%; + padding-top: 1em; + background: -moz-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc; + background: -webkit-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc; +} + +a { + color: #d00e0e; + text-decoration: none; +} + +a:hover { + color: #f00e0e +} + +div.hide { + display: none +} + +div#topbar { + width: 80%; /*margin: 1em auto;*/ margin: 1em auto 0; position:relative;; +} + +div#topbar #logo img:hover { + filter: alpha(opacity=60); + -moz-opacity: 0.6; + opacity: 0.6; +} + +div#topbar .title { + font-family: "URW Gothic L", "Century Gothic", sans-serif; + text-transform: uppercase; + font-size: 3.5em; + font-weight: bold; + text-shadow: 1px 1px 1px rgba(0,0,0,.2); + color: #333333; + /*position: absolute;*/ top:0; right:0; line-height:41px; vertical-align:middle;; + /*max-width: 70%;*/ text-align: right;; +} + +div#topbar .languages { + display: none +} + +div.navigation { + position: relative +} + +ul.languages { + margin: 0 2px !important +} + +ul.languages li { + display: inline-block; + *display: inline; + *zoom: 1; + margin: 0 -2px !important; +} + +.langname { + background: green; + display: none; + padding: 0.5em; + position: absolute; + right: 0; + text-align: center; + top: 4em; + z-index: 1; +} + +/* Dropdown menu CSS */ + +menu ul, +#cssmenu li, +#cssmenu span, +#cssmenu div.menuitem { + margin: 0; + padding: 0; + position: relative; +} + +#cssmenu { + height: 40px +} + +#cssmenu:after, +#cssmenu ul:after { + content: ''; + display: block; + clear: both; +} + +#cssmenu div.menuitem { + color: #d00e0e; + display: inline-block; + font-family: "URW Gothic L", "Century Gothic", sans-serif; + font-size: 2em; + font-weight: bold; + text-shadow: 1px 1px 1px rgba(100,20,20,.2); + line-height: 40px; + padding: 0 10px; + text-decoration: none; +} + +#cssmenu ul { + list-style: none +} + +#cssmenu > ul { + float: left; + padding: 0 10%; +} + +#cssmenu > ul > li { + float: left +} + +#cssmenu > ul > li.right { + position: absolute; + right: 10%; +} + +#cssmenu > ul > li:hover:after { + content: ''; + display: block; + width: 0; + height: 0; + position: absolute; + left: 50%; + bottom: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid #abcc71; + margin-left: -10px; +} + +#cssmenu > ul > li > div.menuitem { + border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + -webkit-border-radius: 5px 5px 0 0; +} + +#cssmenu > ul > li.active > div.menuitem { + box-shadow: inset 0 0 3px #000000; + -moz-box-shadow: inset 0 0 3px #000000; + -webkit-box-shadow: inset 0 0 3px #000000; + background: #070707; + background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); + background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); + background: -o-linear-gradient(top, #26262c 0%, #070707 100%); + background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); + background: linear-gradient(to bottom, #26262c 0%, #070707 100%); + filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0); +} + +#cssmenu .has-sub { + z-index: 1 +} + +#cssmenu .has-sub:hover > ul { + display: block +} + +#cssmenu .has-sub ul { + display: none; + position: absolute; + width: 200px; + top: 100%; + left: 0; +} + +#cssmenu .has-sub ul li { + border-left: 1px solid #ffffcc +} + +#cssmenu .has-sub ul li.has-sub > div.menuitem:after { + content: "►"; + color: rgba(255,255,255,.5); + float: right; +} + +#cssmenu .has-sub ul li div.menuitem { + background: #abcc71; + border-bottom: 1px dotted #ffffcc; + color: #ffffff; + font-size: 9pt; + display: block; + line-height: 120%; + padding: 10px; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); +} + +#cssmenu .has-sub ul li div.menuitem:hover .langname { + display: block +} + +#cssmenu .has-sub ul li:hover > div.menuitem, +#cssmenu .has-sub ul li:hover > a > div.menuitem { + background: #8bbc51 +} + +#cssmenu .has-sub .has-sub:hover > ul { + display: block +} + +#cssmenu .has-sub .has-sub ul { + display: none; + position: absolute; + left: 100%; + top: 0; +} + +#cssmenu .has-sub .has-sub ul li:first-child { + border-left: none +} + +/* End of dropdown menu CSS */ + +div#content { + display: block +} + +/** + * The .main class is for content wrapper on the home page (with the big banner) + */ + +div#content .main { + background: url('../../images/dots.png') 0 10% no-repeat rgba(171, 204, 113, 0.6); + background-size: 100% auto; + width: auto; + padding: 4em 35% 4em 10%; + position: relative; + margin: 0 auto; + text-shadow: 1px 1px 1px rgba(255,255,255,.5); + font-size: 1.6em; + line-height: 1.5em; + border: 2px solid #abcc71; + border-left: none; + border-right: none; + box-shadow: 0px 2px 8px rgba(0,0,0,.2); +} + +div#content .main h1 { + font-family: "URW Gothic L", "Century Gothic", sans-serif; + font-size: 2.5em; + text-shadow: 1px 1px 2px rgba(0,0,0,.3); + color: white; + margin-bottom: .5em; +} + +.main .get-i2p { + position: absolute; + display: block; + top: 50%; + right: 10%; + margin-top: -1em; + max-width: 20%; + padding: .5em; + line-height: 1em; + font-size: 2em; + color: white; + font-family: Arial, Helvetica, sans-serif; + font-weight: bold; + text-transform: uppercase; + text-decoration: none; + text-align: center; + background: green; + border-radius: .3em; + -moz-transform: rotate(-5deg); + transform: rotate(-5deg); + -webkit-transform: rotate(-5deg); + -ms-transform: rotate(-5deg); + -o-transform: rotate(-5deg); + text-shadow: 1px 1px 1px rgba(0,0,0,.2); + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 1em 3em 2em 0.5em rgba(255, 255, 255, 0.3) inset, inset -.2em -.5em 1em -0em rgba(0,0,0,.3); +} + +.main .get-i2p:hover { + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3), inset 0 -2.2em 2.2em rgba(255, 255, 255, 0.3), inset .2em .5em 1em 0em rgba(0,0,0,.3) +} + +div#content .aside-wrap { + width: 80%; + margin: 2em auto; +} + +div#content .aside { + position: relative; + width: 30.9%; + margin-left: 3%; + display: inline-block; + vertical-align: top; + font-size: 1.3em; +} + +div#content .aside:first-child { + margin-left: 0% +} + +div#content .aside a { + font-weight: bold +} + +div#content .aside h1 { + padding: 1em 0; + border-bottom: 1px solid rgba(171, 204, 113, 0.6); + font-size: 1.4em; + color: #222200; + text-shadow: 1px 1px 1px rgba(0,0,0,.3); +} + +div#content .aside p { + margin: 1em 0 +} + +div#content .aside ul { + margin: 1em 0 +} + +div#content .aside ul li { + list-style-type: none; + margin: 1em 0; + line-height: 1.3em; +} + +div#content .feed-icon { + background-image: url('../../images/feed-icon-28x28.png'); + display: block; + float: right; + height: 28px; + margin: 1em; + text-indent: -9999px; + width: 28px; +} + +div#content .lastupdated { + left: auto; + position: absolute; + right: 10%; + text-align: right; + top: 0; + width: 200px; +} + +/** + * The .inner class is for the content wrapper on inner pages (as opposed to the home page) + */ + +div#content .inner { + width: auto; + margin: 0 5%; + padding: 4em 5% 2em; + position: relative; + background: rgba(171, 204, 113, 0.6); + border-top: 2px solid #abcc71; + border-left: 2px solid #abcc71; + border-right: 2px solid #abcc71; + border-radius: 5px 5px 0 0; + color: black; + font-size: 1.3em; + line-height: 1.4em; +} + +div#content .inner > .title { + display: none +} + +div#content .inner ol { + margin: 1.5em +} + +div#content .inner ul { + margin: 1.5em; + 1em: ; +} + +div#content .inner p { + margin: 1em 0 +} + +div#content .inner td { + padding: 2px 5px +} + +/* CSS for downloads list */ + +.package { + overflow: hidden +} + +.package .os { + float: left; + width: 20%; +} + +.package .details { + float: right; + width: 80%; +} + +.file { + float: left; + width: 40%; +} + +.file > a:hover { + box-shadow: 1px 1px 1px 1px rgb(51, 51, 51) inset +} + +.details .hash { + float: right; + overflow: auto; + width: 50%; +} + +.details > p, +.details > ol { + clear: both +} + +.filedownload { + margin-left: 29% +} + +/* End of downloads list CSS */ + +.biblinks { + left: auto; + position: absolute; + right: 10%; + top: 0; +} + +#global-footer { + width: auto; + border-top: 3px solid #883333; + background: #552222; + box-shadow: 0px -4px 8px rgba(0,0,0,.3); + padding: 1em 10%; + background: -moz-linear-gradient(#883333, #772222); +} + +#global-footer .aside { + display: inline-block; + width: 15%; + margin-left: 1%; + vertical-align: top; +} + +#global-footer .aside.first { + margin-left: 0 +} + +#global-footer .aside.third, +div##global-footer .aside.fifth { + margin-left: 2.5% +} + +#global-footer .aside h1 { + color: #ffdd88; + font-size: 1.2em; + text-shadow: -1px -1px 1px rgba(0,0,0,.2); + border-bottom: 1px solid #ccaa66; + margin: 1em 0; + line-height: 1.3em; +} + +#global-footer .aside ul { + margin: 0; + padding: 0; +} + +#global-footer .aside ul li { + list-style-type: none; + line-height: 1.5em; +} + +#global-footer .aside ul li a { + color: #ccaa66; + font-weight: bold; +} + +#global-footer .aside ul li a:hover { + text-decoration: underline +} + +#global-footer a.button { + padding: .5em 2em; + background-color: #cc2222; + border: 1px solid #bb2222; + border-radius: 3px; + display: inline-block; + color: white; + margin: 1em auto; + text-align: center; + width: auto; + font-weight: bold; +} \ No newline at end of file diff --git a/i2p2www/static/styles/duck/desktop.rtl.css b/i2p2www/static/styles/duck/desktop.rtl.css index c9bd1c57..757ede8e 100644 --- a/i2p2www/static/styles/duck/desktop.rtl.css +++ b/i2p2www/static/styles/duck/desktop.rtl.css @@ -1,61 +1,76 @@ -/** Topbar **/ -div#topbar .title { - text-align: left; -} - -/** Dropdown menu **/ -#cssmenu > ul, #cssmenu > ul > li { - float: right; -} -#cssmenu > ul > li.right { - left: 10%; - right: auto; -} -#cssmenu .has-sub ul { - left: auto; - right: 0; -} -#cssmenu .has-sub ul li { - border-left: 0 none; - border-right: 1px solid #ffffcc; -} -#cssmenu .has-sub ul li.has-sub > div.menuitem:after { - content: "◄"; - float: left; -} -#cssmenu .has-sub .has-sub ul { - left: auto; - right: 100%; -} -#cssmenu .has-sub .has-sub ul li:first-child { - border-right: none; -} - -/** Frontpage **/ -div#content .main { - padding-left: 35%; - padding-right: 10%; -} -.main .get-i2p { - left: 10%; - right: auto; - transform:rotate(5deg); - -moz-transform:rotate(5deg); - -webkit-transform:rotate(5deg); - -ms-transform:rotate(5deg); - -o-transform:rotate(5deg); -} - -/** Downloads list **/ -.package .os { - float: right; -} -.package .details { - float: left; -} -.file { - float: right; -} -.details .hash { - float: left; -} +/** Topbar **/ + +div#topbar .title { + text-align: left +} + +/** Dropdown menu **/ + +#cssmenu > ul, +#cssmenu > ul > li { + float: right +} + +#cssmenu > ul > li.right { + left: 10%; + right: auto; +} + +#cssmenu .has-sub ul { + left: auto; + right: 0; +} + +#cssmenu .has-sub ul li { + border-left: 0 none; + border-right: 1px solid #ffffcc; +} + +#cssmenu .has-sub ul li.has-sub > div.menuitem:after { + content: "◄"; + float: left; +} + +#cssmenu .has-sub .has-sub ul { + left: auto; + right: 100%; +} + +#cssmenu .has-sub .has-sub ul li:first-child { + border-right: none +} + +/** Frontpage **/ + +div#content .main { + padding-left: 35%; + padding-right: 10%; +} + +.main .get-i2p { + left: 10%; + right: auto; + transform: rotate(5deg); + -moz-transform: rotate(5deg); + -webkit-transform: rotate(5deg); + -ms-transform: rotate(5deg); + -o-transform: rotate(5deg); +} + +/** Downloads list **/ + +.package .os { + float: right +} + +.package .details { + float: left +} + +.file { + float: right +} + +.details .hash { + float: left +} \ No newline at end of file diff --git a/i2p2www/static/styles/duck/mobile.css b/i2p2www/static/styles/duck/mobile.css index 71ee2ecd..a59b12c2 100644 --- a/i2p2www/static/styles/duck/mobile.css +++ b/i2p2www/static/styles/duck/mobile.css @@ -1,139 +1,141 @@ -#topbar .title { - display: none; -} - -/* Dropdown menu CSS */ - -#cssmenu > ul { - width: 100%; - float: none; - background-color: #abcc71; /* change the menu color */ - background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)); - background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)); - background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)); - background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)); - display: block; - /*height: 0;*/ - height: auto; - margin: 0; - padding: 0; - overflow: hidden; - box-shadow: 0 1px 2px rgba(0,0,0,.6); - /*position: absolute;*/ - top: 0px; - left: 0px; - z-index: 998; - clear: both; -} - -#cssmenu > ul li { - /*display: none;*/ - display: block; - width: 100%; - font-family: Arial; -} - -#cssmenu > ul li div.menuitem { - display: block; - width: 90%; - padding: 10px 5%; - font-size: 14px; - font-weight: bold; - text-shadow: -1px -1px 0 rgba(0,0,0,.15); - color: white; - text-decoration: none; - border-bottom: 1px solid rgba(0,0,0,.2); - border-top: 1px solid rgba(255,255,255,.1); -} - -#cssmenu > ul li div.menuitem:hover { - background-color: rgba(0,0,0,.5); - border-top-color: transparent; -} - -#cssmenu > ul > li:first-child { - border-top: 1px solid rgba(0,0,0,.2); -} - -/* Toggle the navigation bar open */ - -#cssmenu > ul.open { - height: auto; - /*padding-top: 50px;*/ -} - -#cssmenu > ul.open li { - display: block; -} - -/* Submenus – .has-sub class indicates dropdowns */ - -#cssmenu > ul > li:hover > div.menuitem { - background: rgba(0,0,0,.5); - border-bottom-color: transparent; -} - -#cssmenu > ul li.has-sub > div.menuitem:after { - content: "▼"; - color: rgba(255,255,255,.5); - float: right; -} - -#cssmenu > ul li.has-sub > div.menuitem:hover { - background: rgba(0,0,0,.75); -} - -#cssmenu > ul li ul { - display: none; - background: rgba(0,0,0,.5); - border-top: 0 none; - padding: 0; -} - -#cssmenu > ul li ul div.menuitem { - border: 0 none; - font-size: 12px; - padding: 10px 5%; - font-weight: normal; -} - -#cssmenu > ul li:hover > ul { - display: block; - border-top: 0 none; -} - -/* End of dropdown menu CSS */ - -div#content .main { - padding: 4em 10%; -} - -.main .get-i2p { - margin-bottom: -1.5em; - margin-top: .5em; -} - -div#content .aside { - width: 100%; -} - -div#content .inner { - margin-top: 1em; -} - -div#content .inner .title { - margin-top: 1em; -} - -.details .hash { - display: none; -} - -#global-footer .aside { - margin-left: 1%; - width: 49%; -} - -#global-footer .aside.first, #global-footer .aside.third, #global-footer .aside.fifth { - margin-left: 0; -} +#topbar .title { + display: none +} + +/* Dropdown menu CSS */ + +#cssmenu > ul { + width: 100%; + float: none; + background-color: #abcc71; /* change the menu color */ + background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)); + background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)); + background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)); + background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)); + display: block; + /*height: 0;*/ + height: auto; + margin: 0; + padding: 0; + overflow: hidden; + box-shadow: 0 1px 2px rgba(0,0,0,.6); + /*position: absolute;*/ + top: 0px; + left: 0px; + z-index: 998; + clear: both; +} + +#cssmenu > ul li { + /*display: none;*/ + display: block; + width: 100%; + font-family: Arial; +} + +#cssmenu > ul li div.menuitem { + display: block; + width: 90%; + padding: 10px 5%; + font-size: 14px; + font-weight: bold; + text-shadow: -1px -1px 0 rgba(0,0,0,.15); + color: white; + text-decoration: none; + border-bottom: 1px solid rgba(0,0,0,.2); + border-top: 1px solid rgba(255,255,255,.1); +} + +#cssmenu > ul li div.menuitem:hover { + background-color: rgba(0,0,0,.5); + border-top-color: transparent; +} + +#cssmenu > ul > li:first-child { + border-top: 1px solid rgba(0,0,0,.2) +} + +/* Toggle the navigation bar open */ + +#cssmenu > ul.open { + height: auto; + /*padding-top: 50px;*/ +} + +#cssmenu > ul.open li { + display: block +} + +/* Submenus – .has-sub class indicates dropdowns */ + +#cssmenu > ul > li:hover > div.menuitem { + background: rgba(0,0,0,.5); + border-bottom-color: transparent; +} + +#cssmenu > ul li.has-sub > div.menuitem:after { + content: "▼"; + color: rgba(255,255,255,.5); + float: right; +} + +#cssmenu > ul li.has-sub > div.menuitem:hover { + background: rgba(0,0,0,.75) +} + +#cssmenu > ul li ul { + display: none; + background: rgba(0,0,0,.5); + border-top: 0 none; + padding: 0; +} + +#cssmenu > ul li ul div.menuitem { + border: 0 none; + font-size: 12px; + padding: 10px 5%; + font-weight: normal; +} + +#cssmenu > ul li:hover > ul { + display: block; + border-top: 0 none; +} + +/* End of dropdown menu CSS */ + +div#content .main { + padding: 4em 10% +} + +.main .get-i2p { + margin-bottom: -1.5em; + margin-top: .5em; +} + +div#content .aside { + width: 100% +} + +div#content .inner { + margin-top: 1em +} + +div#content .inner .title { + margin-top: 1em +} + +.details .hash { + display: none +} + +#global-footer .aside { + margin-left: 1%; + width: 49%; +} + +#global-footer .aside.first, +#global-footer .aside.third, +#global-footer .aside.fifth { + margin-left: 0 +} \ No newline at end of file From 847a1feca872434f1ebdaa96a999c8efe83e7fc3 Mon Sep 17 00:00:00 2001 From: str4d Date: Fri, 29 May 2015 14:20:14 +0000 Subject: [PATCH 3/4] Bugfix --- i2p2www/static/styles/duck/default.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/i2p2www/static/styles/duck/default.css b/i2p2www/static/styles/duck/default.css index d0163272..64b6288e 100644 --- a/i2p2www/static/styles/duck/default.css +++ b/i2p2www/static/styles/duck/default.css @@ -214,8 +214,7 @@ div#content .inner ol { } div#content .inner ul { - margin: 1.5em; - 1em: ; + margin: 1.5em 1em; } div#content .inner p { @@ -438,4 +437,4 @@ div#content .inner ul.DREAD { text-align: center; width: auto; font-weight: bold; -} \ No newline at end of file +} From 32c73d0672c564718bbb23c6f37ef7e735531164 Mon Sep 17 00:00:00 2001 From: str4d Date: Fri, 29 May 2015 14:20:25 +0000 Subject: [PATCH 4/4] Removed duplicate CSS --- i2p2www/static/styles/duck/desktop.css | 202 ++----------------------- 1 file changed, 12 insertions(+), 190 deletions(-) diff --git a/i2p2www/static/styles/duck/desktop.css b/i2p2www/static/styles/duck/desktop.css index dc6e4bc4..c4de8bb1 100644 --- a/i2p2www/static/styles/duck/desktop.css +++ b/i2p2www/static/styles/duck/desktop.css @@ -1,29 +1,9 @@ body { - font-family: Droid Sans, Helvetica, sans-serif; - font-size: 10px; - background-color: #ffffdd; - min-height: 800px; - width: 100%; padding-top: 1em; - background: -moz-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc; - background: -webkit-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc; -} - -a { - color: #d00e0e; - text-decoration: none; -} - -a:hover { - color: #f00e0e -} - -div.hide { - display: none } div#topbar { - width: 80%; /*margin: 1em auto;*/ margin: 1em auto 0; position:relative;; + margin: 1em auto 0; } div#topbar #logo img:hover { @@ -39,8 +19,13 @@ div#topbar .title { font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,.2); color: #333333; - /*position: absolute;*/ top:0; right:0; line-height:41px; vertical-align:middle;; - /*max-width: 70%;*/ text-align: right;; + /*position: absolute;*/ + top:0; + right:0; + line-height:41px; + vertical-align:middle; + /*max-width: 70%;*/ + text-align: right; } div#topbar .languages { @@ -222,80 +207,33 @@ menu ul, /* End of dropdown menu CSS */ -div#content { - display: block -} - /** - * The .main class is for content wrapper on the home page (with the big banner) - */ + * The .main class is for content wrapper on the home page (with the big banner) + */ div#content .main { - background: url('../../images/dots.png') 0 10% no-repeat rgba(171, 204, 113, 0.6); - background-size: 100% auto; - width: auto; padding: 4em 35% 4em 10%; - position: relative; - margin: 0 auto; - text-shadow: 1px 1px 1px rgba(255,255,255,.5); - font-size: 1.6em; - line-height: 1.5em; - border: 2px solid #abcc71; - border-left: none; - border-right: none; - box-shadow: 0px 2px 8px rgba(0,0,0,.2); -} - -div#content .main h1 { - font-family: "URW Gothic L", "Century Gothic", sans-serif; - font-size: 2.5em; - text-shadow: 1px 1px 2px rgba(0,0,0,.3); - color: white; - margin-bottom: .5em; } .main .get-i2p { position: absolute; - display: block; - top: 50%; right: 10%; margin-top: -1em; max-width: 20%; - padding: .5em; - line-height: 1em; - font-size: 2em; - color: white; - font-family: Arial, Helvetica, sans-serif; - font-weight: bold; - text-transform: uppercase; - text-decoration: none; - text-align: center; - background: green; - border-radius: .3em; -moz-transform: rotate(-5deg); transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); - text-shadow: 1px 1px 1px rgba(0,0,0,.2); - box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 1em 3em 2em 0.5em rgba(255, 255, 255, 0.3) inset, inset -.2em -.5em 1em -0em rgba(0,0,0,.3); } .main .get-i2p:hover { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3), inset 0 -2.2em 2.2em rgba(255, 255, 255, 0.3), inset .2em .5em 1em 0em rgba(0,0,0,.3) } -div#content .aside-wrap { - width: 80%; - margin: 2em auto; -} - div#content .aside { - position: relative; width: 30.9%; margin-left: 3%; - display: inline-block; - vertical-align: top; font-size: 1.3em; } @@ -303,91 +241,27 @@ div#content .aside:first-child { margin-left: 0% } -div#content .aside a { - font-weight: bold -} - -div#content .aside h1 { - padding: 1em 0; - border-bottom: 1px solid rgba(171, 204, 113, 0.6); - font-size: 1.4em; - color: #222200; - text-shadow: 1px 1px 1px rgba(0,0,0,.3); -} - -div#content .aside p { - margin: 1em 0 -} - -div#content .aside ul { - margin: 1em 0 -} - -div#content .aside ul li { - list-style-type: none; - margin: 1em 0; - line-height: 1.3em; -} - -div#content .feed-icon { - background-image: url('../../images/feed-icon-28x28.png'); - display: block; - float: right; - height: 28px; - margin: 1em; - text-indent: -9999px; - width: 28px; -} - div#content .lastupdated { left: auto; position: absolute; right: 10%; - text-align: right; top: 0; width: 200px; } /** - * The .inner class is for the content wrapper on inner pages (as opposed to the home page) - */ + * The .inner class is for the content wrapper on inner pages (as opposed to the home page) + */ div#content .inner { - width: auto; - margin: 0 5%; padding: 4em 5% 2em; - position: relative; - background: rgba(171, 204, 113, 0.6); - border-top: 2px solid #abcc71; - border-left: 2px solid #abcc71; - border-right: 2px solid #abcc71; - border-radius: 5px 5px 0 0; - color: black; font-size: 1.3em; - line-height: 1.4em; } div#content .inner > .title { display: none } -div#content .inner ol { - margin: 1.5em -} - -div#content .inner ul { - margin: 1.5em; - 1em: ; -} - -div#content .inner p { - margin: 1em 0 -} - -div#content .inner td { - padding: 2px 5px -} - /* CSS for downloads list */ .package { @@ -437,20 +311,9 @@ div#content .inner td { top: 0; } -#global-footer { - width: auto; - border-top: 3px solid #883333; - background: #552222; - box-shadow: 0px -4px 8px rgba(0,0,0,.3); - padding: 1em 10%; - background: -moz-linear-gradient(#883333, #772222); -} - #global-footer .aside { - display: inline-block; width: 15%; margin-left: 1%; - vertical-align: top; } #global-footer .aside.first { @@ -461,44 +324,3 @@ div#content .inner td { div##global-footer .aside.fifth { margin-left: 2.5% } - -#global-footer .aside h1 { - color: #ffdd88; - font-size: 1.2em; - text-shadow: -1px -1px 1px rgba(0,0,0,.2); - border-bottom: 1px solid #ccaa66; - margin: 1em 0; - line-height: 1.3em; -} - -#global-footer .aside ul { - margin: 0; - padding: 0; -} - -#global-footer .aside ul li { - list-style-type: none; - line-height: 1.5em; -} - -#global-footer .aside ul li a { - color: #ccaa66; - font-weight: bold; -} - -#global-footer .aside ul li a:hover { - text-decoration: underline -} - -#global-footer a.button { - padding: .5em 2em; - background-color: #cc2222; - border: 1px solid #bb2222; - border-radius: 3px; - display: inline-block; - color: white; - margin: 1em auto; - text-align: center; - width: auto; - font-weight: bold; -} \ No newline at end of file