Commits

Ralph Bean committed ba6d1ed

Ribbons!

Comments (0)

Files changed (3)

htdocs/css/pygments-native.css

 .syntax {
         padding: 10px;
+        padding-top: 35px;
         -webkit-border-radius: 15px;
         -moz-border-radius: 15px;
         border-radius: 15px;
 }
+div.highlight { margin-top: -70px; }
 .syntax .hll { background-color: #404040 }
 .syntax  { background: #202020; color: #d0d0d0 }
 .syntax .c { color: #999999; font-style: italic } /* Comment */

htdocs/css/ribbons.css

+.ribbon {
+        /* nothing, lebowski. */
+}
+
+.ribbon h2 {
+        text-align: left;
+        position: relative;
+        margin-left: 270px;
+        margin-right: -20px;
+        padding: 8px;
+        background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
+        background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
+        background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
+        background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
+        background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
+        -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
+        -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
+        box-shadow: 0 2px 0 rgba(0,0,0,.3);
+        color: #fff;
+        background: #5c5c5c;
+}
+
+.ribbon h2:after {
+        content: '';
+        position: absolute;
+        border-style: solid;
+        border-color: transparent;
+        bottom: -10px;
+}
+
+.ribbon h2:after {
+        border-width: 0 0 10px 10px;
+        border-left-color: #3a3a3a;
+        right: 0;
+}
     <link href="css/tosca.css" rel="stylesheet">
     <link href="css/panes.css" rel="stylesheet">
     <link href="css/pygments-native.css" rel="stylesheet">
+    <link href="css/ribbons.css" rel="stylesheet">
     <link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon">
     <title>ToscaWidgets</title>
   </head>
             <p><a href="http://toscawidgets.org/documentation/ToscaWidgets/">
               ToscaWidgets 1</a> is battle-hardened.  It has been used for years
             in the TurboGears community.  You can depend on it.</p>
+
             <div class="syntax">
+              <div class="ribbon"><h2>Stable.  Older.</h2></div>
               <div class="highlight"><pre><span class="sd">&quot;&quot;&quot; The most basic form with ToscaWidgets 1 &quot;&quot;&quot;</span>
 
 <span class="kn">import</span> <span class="nn">tw.forms</span> <span class="kn">as</span> <span class="nn">twf</span>
     <span class="p">]</span>
 <span class="p">)</span>
 </pre></div>
+              </div>
+
             </div>
-
-          </div>
-          <div id="right" class="pane">
-            <p><a href="http://tw2core.rtfd.org">ToscaWidgets 2</a> is where
-            all the new development is happening.  It is approaching
-            <em>stable</em>.</p>
-            <div class="syntax">
-              <div class="highlight"><pre><span class="sd">&quot;&quot;&quot; The most basic form with ToscaWidgets 2 &quot;&quot;&quot;</span>
+            <div id="right" class="pane">
+              <p><a href="http://tw2core.rtfd.org">ToscaWidgets 2</a> is where
+              all the new development is happening.  It is approaching
+              <em>stable</em>.</p>
+              <div class="syntax">
+                <div class="ribbon"><h2>ZOMG New!</h2></div>
+                <div class="highlight"><pre><span class="sd">&quot;&quot;&quot; The most basic form with ToscaWidgets 2 &quot;&quot;&quot;</span>
 
 <span class="kn">import</span> <span class="nn">tw2.core</span> <span class="kn">as</span> <span class="nn">twc</span>
 <span class="kn">import</span> <span class="nn">tw2.forms</span> <span class="kn">as</span> <span class="nn">twf</span>
 </pre></div>
 
 
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="clear"></div>
-    <div id="footer">
-      © 2008-2012 Alberto Valverde Gonzalez and contributors,
-      Webdesign Theme by Daniel Haus,
-      <a href="http://ematia.de/" title="Ematia">ematia.de</a>.
-      <div>All times are UTC.</div>
-    </div>
-    <script type="text/javascript">
-      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script><script src="index_files/ga.js" type="text/javascript"></script>
-    <script type="text/javascript">
-      if (window._gat) {
-        var pageTracker = _gat._getTracker("UA-4615122-1");
-        pageTracker._initData();
-        pageTracker._setDomainName("toscawidgets.org");
-        pageTracker._trackPageview();
-      }
-    </script>
-    <script type="text/javascript">
-      Calendar.setup({"ifFormat": "%m/%d/%Y", "button": "demo1_date_trigger", "showsTime": false, "inputField": "demo1_date"})
-    </script>
-</body></html>
+      <div class="clear"></div>
+      <div id="footer">
+        © 2008-2012 Alberto Valverde Gonzalez and contributors,
+        Webdesign Theme by Daniel Haus,
+        <a href="http://ematia.de/" title="Ematia">ematia.de</a>.
+        <div>All times are UTC.</div>
+      </div>
+      <script type="text/javascript">
+        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+      </script><script src="index_files/ga.js" type="text/javascript"></script>
+      <script type="text/javascript">
+        if (window._gat) {
+          var pageTracker = _gat._getTracker("UA-4615122-1");
+          pageTracker._initData();
+          pageTracker._setDomainName("toscawidgets.org");
+          pageTracker._trackPageview();
+        }
+      </script>
+      <script type="text/javascript">
+        Calendar.setup({"ifFormat": "%m/%d/%Y", "button": "demo1_date_trigger", "showsTime": false, "inputField": "demo1_date"})
+      </script>
+  </body></html>