GNOME.org
 

[gimp-web/static-html5] lousy beginning on the button styling

commit eebff9e3b4530fa43f0d9784c02a361b69994763
Author: Jakub Steiner <jimmac novell com>
Date:   Sun Jun 20 22:36:16 2010 +0200

    lousy beginning on the button styling

 css/gimp.css     |   26 ++++++++++++++++++++++++++
 css/gimp.sass    |   30 ++++++++++++++++++++++++++++++
 inc/_header.html |    2 +-
 index.html       |    8 +++++++-
 4 files changed, 64 insertions(+), 2 deletions(-)
---
diff --git a/css/gimp.css b/css/gimp.css
index 5e6e523..3c27d43 100644
--- a/css/gimp.css
+++ b/css/gimp.css
@@ -112,6 +112,9 @@ a {
 #gegl {
   background-position: -65px 0; }
 
+#download {
+  margin-top: 1em; }
+
 .notebox {
   font-size: 90%;
   background-color: #6b849f;
@@ -132,6 +135,29 @@ a {
     height: 197px;
     background: url(/img/baloons.png) no-repeat 0 0; }
 
+.button {
+  background-color: #f57900;
+  color: white;
+  display: inline-block;
+  padding: 6px 12px;
+  font-family: "RaveIn Condensed", "Avenir Condensed", Avenir, Prelude, sans-serif;
+  font-size: 110%;
+  font-weight: bold;
+  text-decoration: none;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
+  -o-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
+  -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  -o-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  border: 1px solid #7a3c00;
+  outline: none; }
+
 #freesoftware {
   margin: 100px 0 10px;
   position: relative; }
diff --git a/css/gimp.sass b/css/gimp.sass
index 8951396..3dddf06 100644
--- a/css/gimp.sass
+++ b/css/gimp.sass
@@ -24,6 +24,18 @@ $headline: 'RaveIn Condensed', 'Avenir Condensed', Avenir, Prelude, sans-serif
 =colorgradient($from, $to)
   color: -moz-linear-gradient(0% 100% 90deg, $from, $to)
   color: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to))
+
+=box-shadow($x,$y,$r,$color)
+  -moz-box-shadow: $x $y $r $color
+  -webkit-box-shadow: $x $y $r $color
+  -o-box-shadow: $x $y $r $color
+  box-shadow: $x $y $r $color
+
+=text-shadow($x,$y,$r,$color)
+  -moz-text-shadow: $x $y $r $color
+  -webkit-text-shadow: $x $y $r $color
+  -o-text-shadow: $x $y $r $color
+  text-shadow: $x $y $r $color
   
 body
   font-family: $text
@@ -131,6 +143,9 @@ a
 #gegl
   background-position: -65px 0
 
+#download
+  margin-top: 1em
+
 .notebox
   font-size: 90%
   background-color: #6b849f
@@ -149,6 +164,21 @@ a
     height: 197px
     background: url(/img/baloons.png) no-repeat 0 0
 
+.button
+  background-color: $select
+  color: #fff
+  display: inline-block
+  padding: 6px 12px
+  font-family: $headline
+  font-size: 110%
+  font-weight: bold
+  text-decoration: none
+  +border-radius(10px)
+  +box-shadow(0,2px,2px,rgba(0,0,0,0.3))
+  +text-shadow(0,1px,2px,rgba(0,0,0,0.6))
+  border: 1px solid $select * 0.5
+  outline: none
+
 #freesoftware
   margin: 100px 0 10px
   position: relative
diff --git a/inc/_header.html b/inc/_header.html
index 7b8166f..50bc5e1 100644
--- a/inc/_header.html
+++ b/inc/_header.html
@@ -1,4 +1,4 @@
-<div id="header" class="container-12">
+<div id="header" class="container-12 clearfix">
   <div class="grid-3"><h1 id="logo"><a href="/">GIMP</a></h1></div>
   <div class="grid-9">
     <ul id="mainmenu">
diff --git a/index.html b/index.html
index b3e2bb5..0e1d543 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
 </head>
 <body>
 <!--#include virtual="/inc/_header.html" -->
-<div id="splash" class="container-12">
+<div id="splash" class="container-12 clearfix">
   <div class="grid-12">
     <img alt="" src="/img/frontsplash.jpg">
     <div class="subtitle">
@@ -14,6 +14,12 @@
     </div>
   </div>
 </div>
+<!-- download button -->
+<div class="container-12 clearfix" id="download">
+  <div class="grid-4"><a href="/download" class="button">Download GIMP 2.8</a></div>
+  <div class="grid-8">Describe the download</div>
+</div>
+
 <!-- triplet -->
 <div class="container-12 clearfix">
   <div class="grid-4">
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]