propagate from branch 'i2p.www' (head 58b6b0589b4b5e4a45b1be2ac97bba8d253e9368)

to branch 'i2p.www.str4d' (head 2ab3bce2634e8d1dcbf7f2bf89c310c5ae3a7eb6)

i2p2www/static/styles/duck/default.css

@@ -2,7 +2,6 @@
 
 body {
     font-family: Droid Sans, Helvetica, sans-serif;
-    font-size: 10px;
     background-color: #ffffdd;
     min-height: 800px;
     width: 100%;
@@ -46,10 +45,20 @@ div.hide {
     display: none
 }
 
+div#topbar .title, div#content > .title {
+    font-family: "URW Gothic L", "Century Gothic", sans-serif;
+    text-transform: uppercase;
+    font-size: 2.1875rem;
+    font-weight: bold;
+    text-shadow: 1px 1px 1px rgba(0,0,0,.2);
+    color: #333333;
+    line-height:41px;
+    vertical-align:middle;
+}
+
 div#topbar {
     width: 80%;
-    /*margin: 1em auto;*/
-    margin: 1em auto;
+    margin: 0.625em auto;
     position: relative;
 }
 
@@ -83,7 +92,6 @@ div#content .main {
     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;
@@ -94,6 +102,7 @@ div#content .main {
 div#content .main h1 {
     font-family: "URW Gothic L", "Century Gothic", sans-serif;
     font-size: 2.5em;
+    line-height: 1em;
     text-shadow: 1px 1px 2px rgba(0,0,0,.3);
     color: white;
     margin-bottom: .5em;
@@ -119,14 +128,14 @@ div#content .main h1 {
 
 div#content .aside-wrap {
     width: 80%;
-    margin: 2em auto;
+    margin: 1.25em auto;
 }
 
 div#content .aside {
     position: relative;
     display: inline-block;
     vertical-align: top;
-    font-size: 1.2em;
+    font-size: 0.75rem;
 }
 
 div#content .aside a {
@@ -152,7 +161,7 @@ div#content .aside ul {
 div#content .aside ul li {
     list-style-type: none;
     margin: 1em 0;
-    line-height: 1.3em;
+    line-height: 1.5em;
 }
 
 div#content .feed-icon {
@@ -165,53 +174,93 @@ div#content .feed-icon {
     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);
+    background: rgba(0, 0, 0, 0.05);
     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;
+    line-height: 1.5em;
+    position: relative;
+    width: auto;
+}
+
+div#content .inner:before {
+    box-shadow: 0 6px 12px -12px inset;
+    content: " ";
+    height: 12px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+div#content .inner:after {
+    bottom: 0;
+    box-shadow: 0px -6px 12px -12px inset;
+    content: " ";
+    height: 12px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+}
+
+div#content .inner .fluid {
+    background-color: #fefff1;
+}
+
+div#content .sidebar {
+    background: white;
+    border-bottom: 1px solid #abcc71;
+    font-size: 0.875rem;
+}
+
+div#content .sidebar .top {
+    border-bottom: 2px solid #abcc71;
+}
+
+div#content .sidebar nav {
+    background: rgba(171, 204, 113, 0.6);
+    padding: 1em;
+}
+
+div#content .sidebar nav ol {
+    margin: 0;
+    padding-left: 1em;
+}
+
+div#content .sidebar nav ul {
+    margin: 0;
+    padding-left: 0.5em;
+}
+
+div#content .inner .meta,
+div#content .inner .box {
+    background-color: #ffffdd;
+    border: 1px dashed;
+    padding: 0.5em 1em;
+    position: relative;
+}
+
+div#content .inner .meta {
+    text-align: center;
+}
+
+div#content .content-inner {
+    padding: 1em 2em;
 }
 
 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;
@@ -220,7 +269,8 @@ div#content .inner h1 {
 }
 
 div#content .inner h2 {
-    font-size: 1.6em
+    font-size: 1.6em;
+    border-bottom: 1px solid black
 }
 
 div#content .inner h3 {
@@ -258,6 +308,11 @@ div#content .inner td.blue {
     color: blue;
 }
 
+div#content .inner .box img {
+    height: auto;
+    max-width: 100%;
+}
+
 /*
  * Download page
  */
@@ -271,13 +326,17 @@ div#content .inner td.blue {
 
 .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);
 }
 
+.os img {
+    height: auto;
+    max-width: 100%;
+}
+
 .file {
     margin-bottom: 10px
 }
@@ -297,8 +356,8 @@ div#content .inner td.blue {
     padding: 10px;
 }
 
-.file .default .name {
-    font-size: 1.6em
+.file .default .mirror {
+    font-size: 0.75em;
 }
 
 .file .mirrors,
@@ -307,6 +366,8 @@ div#content .inner td.blue {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     display: inline-block;
+    font-size: 0.75em;
+    line-height: 1em;
     width: 50%;
 }
 
@@ -319,8 +380,13 @@ div#content .inner td.blue {
     vertical-align: top;
 }
 
+.details .hash {
+    overflow: auto;
+}
+
 .details .hash:before {
-    content: 'SHA256: '
+    content: 'SHA256: ';
+    font-size: 0.8125em;
 }
 
 .warning {
@@ -352,8 +418,12 @@ div#content .inner ul.DREAD {
  * Additions to syntax.css
  */
 
-.highlight {
-    overflow: auto
+.highlight > pre {
+    white-space: pre-wrap;                 /* CSS-3 */
+    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
+    white-space: -pre-wrap;                /* Opera 4-6 */
+    white-space: -o-pre-wrap;              /* Opera 7 */
+    word-wrap: break-word;                 /* Internet Explorer 5.5+ */
 }
 
 /*
@@ -402,6 +472,19 @@ div#content .inner ul.DREAD {
     text-align: left !important;
 }
 
+pre.literal-block {
+    overflow: auto;
+}
+
+/*
+ * Papers
+ */
+
+.biblinks {
+    border-bottom: 1px solid;
+}
+
+
 /*
  * Footer
  */
@@ -410,7 +493,7 @@ div#content .inner ul.DREAD {
     width: auto;
     border-top: 3px solid #883333;
     background: #552222;
-    box-shadow: 0px -4px 8px rgba(0,0,0,.3);
+    font-size: 0.75rem;
     padding: 1em 10%;
     background: -moz-linear-gradient(#883333, #772222);
 }

i2p2www/static/styles/duck/default.rtl.css

@@ -8,4 +8,16 @@ div#topbar #logo {
 
 div#content .feed-icon {
     float: left
-}
+}
+
+/** Content **/
+
+div#content .sidebar nav ol {
+    padding-left: 0;
+    padding-right: 1em;
+}
+
+div#content .sidebar nav ul {
+    padding-left: 0;
+    padding-right: 0.5em;
+}

i2p2www/static/styles/duck/desktop.css

@@ -1,9 +1,9 @@
 body {
-    padding-top: 1em;
+    padding-top: 0.625em;
 }
 
 div#topbar {
-    margin: 1em auto 0;
+    margin: 0.625em auto 0;
 }
 
 div#topbar #logo img:hover {
@@ -13,12 +13,6 @@ div#topbar #logo img:hover {
 }
 
 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;
@@ -84,7 +78,7 @@ menu ul,
     color: #d00e0e;
     display: inline-block;
     font-family: "URW Gothic L", "Century Gothic", sans-serif;
-    font-size: 2em;
+    font-size: 1.25em;
     font-weight: bold;
     text-shadow: 1px 1px 1px rgba(100,20,20,.2);
     line-height: 40px;
@@ -234,31 +228,40 @@ div#content .main {
 div#content .aside {
     width: 30.9%;
     margin-left: 3%;
-    font-size: 1.3em;
+    font-size: 0.875rem;
 }
 
 div#content .aside:first-child {
     margin-left: 0%
 }
 
-div#content .lastupdated {
-    left: auto;
-    position: absolute;
-    right: 10%;
-    top: 0;
-    width: 200px;
-}
-
 /**
  * The .inner class is for the content wrapper on inner pages (as opposed to the home page)
  */
 
-div#content .inner {
-    padding: 4em 5% 2em;
-    font-size: 1.3em;
+div#content .inner .fluid {
+    background-image: url('images/bg-sidebar.png');
+    background-repeat: repeat-y;
+    border-left: 1px solid #abcc71;
+    margin-left: 0.625rem;
 }
 
-div#content .inner > .title {
+div#content .inner .sidebar {
+    border-right: 1px solid #abcc71;
+    float: left;
+    width: 250px;
+}
+
+div#content .inner .sidebar, div#content .inner .sidebar > nav {
+    border-radius: 0 0 10px 0;
+}
+
+div#content .content-inner {
+    margin-left: 252px;
+    padding-right: 4em;
+}
+
+div#content > .title {
     display: none
 }
 
@@ -275,24 +278,41 @@ div#content .inner > .title {
 
 .package .details {
     float: right;
-    width: 80%;
+    width: 78%;
 }
 
 .file {
     float: left;
-    width: 40%;
+    width: 100%;
+}
+
+.file .default {
+    clear: left;
+    border-radius: 5px;
+    float: left;
+    max-width: 67%;
+}
+
+.file .mirrors,
+.file .sig {
+    clear: right;
+    float: right;
+    width: 25%;
+}
+
+.file .mirrors {
+    border-radius: 5px 5px 0 0;
+}
+
+.file .sig {
+    border-radius: 0 0 5px 5px;
 }
 
 .file > a:hover {
     box-shadow: 1px 1px 1px 1px rgb(51, 51, 51) inset
 }
 
-.details .hash {
-    float: right;
-    overflow: auto;
-    width: 50%;
-}
-
+.details > div,
 .details > p,
 .details > ol {
     clear: both
@@ -304,13 +324,6 @@ div#content .inner > .title {
 
 /* End of downloads list CSS */
 
-.biblinks {
-    left: auto;
-    position: absolute;
-    right: 10%;
-    top: 0;
-}
-
 #global-footer .aside {
     width: 15%;
     margin-left: 1%;

i2p2www/static/styles/duck/desktop.rtl.css

@@ -57,6 +57,31 @@ div#content .main {
     -o-transform: rotate(5deg);
 }
 
+/** Content **/
+
+div#content .inner .fluid {
+    background-position: right;
+    border-left: none;
+    border-right: 2px solid #abcc71;
+    margin-left: 0;
+    margin-right: 0.625rem;
+}
+
+div#content .inner .sidebar {
+    border-radius: 0 0 0 10px;
+    border-left: 2px solid #abcc71;
+    border-right: none;
+    float: right;
+}
+
+div#content .content-inner {
+    margin-left: 0;
+    margin-right: 252px;
+    padding-left: 4em;
+    padding-right: 2em;
+}
+
+
 /** Downloads list **/
 
 .package .os {
@@ -71,6 +96,13 @@ div#content .main {
     float: right
 }
 
-.details .hash {
-    float: left
-}
+.file .default {
+    clear: right;
+    float: right;
+}
+
+.file .mirrors,
+.file .sig {
+    clear: left;
+    float: left;
+}

i2p2www/static/styles/duck/mobile.css

@@ -117,18 +117,15 @@ div#content .aside {
     width: 100%
 }
 
+div#content > .title {
+    margin-top: 0.5em;
+    text-align: center;
+}
+
 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%;
@@ -138,4 +135,4 @@ div#content .inner .title {
 #global-footer .aside.third,
 #global-footer .aside.fifth {
     margin-left: 0
-}
+}

i2p2www/static/styles/duck/widescreen.css

@@ -0,0 +1,12 @@
+div#content .inner .fluid {
+    border-right: 1px solid #abcc71;
+    margin-right: 30%;
+}
+
+div#content .inner .meta {
+    position: absolute;
+    left: 72%;
+    margin: 1em 0;
+    right: 2%;
+    text-align: left;
+}

i2p2www/static/styles/duck/widescreen.rtl.css

@@ -0,0 +1,11 @@
+div#content .inner .fluid {
+    border-left: 2px solid #abcc71;
+    margin-left: 30%;
+}
+
+div#content .inner .meta {
+    position: absolute;
+    left: 2%;
+    right: 72%;
+    text-align: right;
+}