Use progressive enhancement instead of graceful degradation for mobile support
The default.css for duck's theme is the same content as the original theme, with some attributes removed or tweaked slightly. The original theme CSS overrides almost all of this file leaving the desktop style unchanged. Once the mobile CSS is more complete and the common CSS is identified, it can be removed from the desktop CSS. The mobile dropdown menu was obtained from http://astuteo.com/mobilemenu and as per the license on the page: "... it’s entirely free for you to download and use, modify for your own applications, or otherwise make millions off of."
This commit is contained in:
str4d
@@ -8,13 +8,17 @@
|
||||
<meta name="description" content="{% block metadesc %}{% endblock %}">
|
||||
{%- endif %}
|
||||
<link rel="canonical" href="{{ canonical() }}" />
|
||||
{% if g.exttheme %}<link rel="stylesheet" type="text/css" href="{{ g.exttheme }}" title="External theme" />{% else -%}
|
||||
<link media="Screen" rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/' + g.theme + '/style.css') }}" title="{{ g.theme }}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
|
||||
<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/' + g.theme + '/mobile.css') }}" />
|
||||
{% if g.exttheme %}<link rel="stylesheet" type="text/css" href="{{ g.exttheme }}" title="External theme" />{% else -%}
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/' + g.theme + '/default.css') }}" media="screen, handheld, print, projection" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/' + g.theme + '/mobile.css') }}" media="screen and (min-device-width:320px) and (max-width:767px)" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/' + g.theme + '/desktop.css') }}" title="{{ g.theme }}" media="screen and (min-device-width:768px) and (min-width:768px), print, projection" />
|
||||
<!--[if IEMobile]>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/' + g.theme + '/mobile.css') }}" media="screen" />
|
||||
<![endif]-->
|
||||
<!--[if lt IE 9]>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/' + g.theme + '/desktop.css') }}" title="{{ g.theme }}" media="all" />
|
||||
<![endif]-->
|
||||
{%- endif %}
|
||||
<link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}" />
|
||||
<meta name="robots" content="NOODP" />
|
||||
|
||||
271
i2p2www/static/styles/duck/default.css
Normal file
271
i2p2www/static/styles/duck/default.css
Normal file
@@ -0,0 +1,271 @@
|
||||
@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 img:hover {
|
||||
filter:alpha(opacity=60);
|
||||
-moz-opacity: 0.6;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
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%;
|
||||
height:1em;
|
||||
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: 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%;
|
||||
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 {
|
||||
color:white;
|
||||
text-shadow:1px 1px 1px rgba(0,0,0,.3);
|
||||
margin:1em 0 .5em;
|
||||
border-bottom:1px solid white;
|
||||
padding-bottom:.2em;
|
||||
}
|
||||
|
||||
div#content .inner h1 {
|
||||
font-size:2.2em;
|
||||
margin:0em 0 1em;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
div#content .inner h2 {
|
||||
font-size:1.6em;
|
||||
}
|
||||
|
||||
div#content .inner h3 {
|
||||
font-size:1.4em;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.package {
|
||||
border: 2px solid #d00e0e;
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.file {
|
||||
border: 1px dashed #d00e0e;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#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 {
|
||||
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;
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('reset.css');
|
||||
|
||||
body {
|
||||
font-family:Droid Sans, Helvetica, sans-serif; font-size:10px;
|
||||
background-color:#ffffdd;
|
||||
@@ -1,7 +1,109 @@
|
||||
#topbar .title h1 {
|
||||
#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%;
|
||||
}
|
||||
@@ -9,12 +111,9 @@ div#content .main {
|
||||
.main .get-i2p {
|
||||
margin-bottom: -1.5em;
|
||||
margin-top: .5em;
|
||||
position: relative;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
div#content .aside {
|
||||
margin-left: 0%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -23,9 +122,10 @@ div#content .aside {
|
||||
}
|
||||
|
||||
#global-footer .aside {
|
||||
margin-left: 1%;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
#global-footer .aside.third, #global-footer .aside.fifth {
|
||||
#global-footer .aside.first, #global-footer .aside.third, #global-footer .aside.fifth {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user