Add a third size scale, style .meta and .box the same

i2p2www/pages/global/layout.html

@@ -13,6 +13,7 @@
     <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" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/' + g.theme + '/widescreen.css') }}" title="{{ g.theme }}" media="screen and (min-device-width:1120px) and (min-width:1120px), print, projection" />
     <!--[if IEMobile]>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/' + g.theme + '/mobile.css') }}" media="screen" />
     <![endif]-->
@@ -67,8 +68,9 @@
           </aside>
           {%- endif %}
 
+          <article class="content-inner">
           {% if self.lastupdated() or self.accuratefor() -%}
-          <div class="meta lastupdated">
+          <div class="meta">
             <!--
             {% block lastupdated %}{% endblock %}
             {% block accuratefor %}{% endblock %}
@@ -89,7 +91,6 @@
           </div>
           {%- endif %}
 
-          <article class="content-inner">
           {% block content %}{% endblock %}
           </article>
         </div>

i2p2www/static/styles/duck/default.css

@@ -175,8 +175,6 @@ div#content .inner:before {
 
 div#content .inner .fluid {
     background: white;
-    border-left: 2px solid #abcc71;
-    border-right: 2px solid #abcc71;
 }
 
 div#content .sidebar {
@@ -203,16 +201,16 @@ div#content .sidebar nav ul {
     padding-left: 0.5em;
 }
 
-div#content .meta {
+div#content .inner .meta,
+div#content .inner .box {
     background-color: #ffffdd;
     border: 1px dashed;
     padding: 0.5em 1em;
     position: relative;
-    text-align: center;
 }
 
-div#content .lastupdated {
-    margin: 1em 2em;
+div#content .inner .meta {
+    text-align: center;
 }
 
 div#content .content-inner {

i2p2www/static/styles/duck/desktop.css

@@ -240,7 +240,8 @@ div#content .aside:first-child {
  */
 
 div#content .inner .fluid {
-    margin: 0 30% 0 0.625rem;
+    border-left: 2px solid #abcc71;
+    margin-left: 0.625rem;
 }
 
 div#content .inner .sidebar {
@@ -250,15 +251,6 @@ div#content .inner .sidebar {
     width: 250px;
 }
 
-div#content .inner .meta {
-    border: 1px dashed;
-    position: absolute;
-    left: 72%;
-    margin: 1em 0;
-    right: 2%;
-    text-align: left;
-}
-
 div#content .content-inner {
     margin-left: 252px;
 }

i2p2www/static/styles/duck/widescreen.css

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