From 753f3ba1a03d9e150762a52b098c58c8fc1cbc15 Mon Sep 17 00:00:00 2001 From: Klein Maetschke Date: Tue, 19 Feb 2013 20:46:40 -0500 Subject: [PATCH 1/3] Adds Contribute corner ribbon to QUnitJS.com pages. Tossing my hat in the ring on a good way to display this. Corner ribbons were favored, so I went with that. --- themes/jquery/css/base.css | 76 ++++++++++++++++++++++++++++++++++ themes/jquery/footer-qunit.php | 6 +++ 2 files changed, 82 insertions(+) diff --git a/themes/jquery/css/base.css b/themes/jquery/css/base.css index 504ab92a..4082df9e 100644 --- a/themes/jquery/css/base.css +++ b/themes/jquery/css/base.css @@ -2976,6 +2976,82 @@ footer li img { margin: 0; } +.qunitjs .ribbon-wrapper-purple { + width: 150px; + height: 150px; + overflow: hidden; + position: fixed; + bottom: 0px; + right: 0px; + cursor: pointer; +} + +.qunitjs .ribbon-purple { + font: 12px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; + text-transform: uppercase; + color: white; + text-align: center; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + position: relative; + padding: 7px 0; + right: 0px; + bottom: -85px; + width: 200px; + border-top: 1px solid rgba(250, 250, 250, 0.27); + background-color: #6A2165; + background-image: -webkit-gradient(linear, left top, left bottom, from(#6A2165), to(#390F39)); + background-image: -webkit-linear-gradient(top, #6A2165, #390F39); + background-image: -moz-linear-gradient(top, #6A2165, #390F39); + background-image: -ms-linear-gradient(top, #6A2165, #390F39); + background-image: -o-linear-gradient(top, #6A2165, #390F39); + -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); + -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); + box-shadow: 0px 0px 3px rgba(0,0,0,0.3); +} + +.qunitjs .ribbon-purple-base i.icon-github-alt { + font-size: 24px; + color: white; +} + +.qunitjs .ribbon-purple-base .icon-github-alt:before { + padding-right: 8px; +} + +.qunitjs .ribbon-purple:before { + left: 0; +} +.qunitjs .ribbon-purple:after { + right: 0; +} +.qunitjs .ribbon-purple-base { + font-size: 12px; + color: #333; + text-align: center; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + position: relative; + padding: 7px 14px; + left: 82px; + bottom: -51px; + width: 200px; + height: 200px; + background-color: #6A2165; + background-image: -webkit-gradient(linear, left top, left bottom, from(#6A2165), to(#390F39)); + background-image: -webkit-linear-gradient(top, #6A2165, #390F39); + background-image: -moz-linear-gradient(top, #6A2165, #390F39); + background-image: -ms-linear-gradient(top, #6A2165, #390F39); + background-image: -o-linear-gradient(top, #6A2165, #390F39); + color: white; + -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); + -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); + box-shadow: 0px 0px 3px rgba(0,0,0,0.3); +} /* Media Queries ========================================================================== */ diff --git a/themes/jquery/footer-qunit.php b/themes/jquery/footer-qunit.php index 4202139d..60f68090 100644 --- a/themes/jquery/footer-qunit.php +++ b/themes/jquery/footer-qunit.php @@ -40,6 +40,12 @@

+ From 2ec3bc97fec9586343009f12d087ec1eec1a0b7c Mon Sep 17 00:00:00 2001 From: Klein Maetschke Date: Mon, 25 Feb 2013 18:54:17 -0500 Subject: [PATCH 2/3] Fixing ribbon sizing. There were comments that the ribbon was a bit too large, so this is shrinking it a bit. --- themes/jquery/css/base.css | 60 +++++++++++++++++++------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/themes/jquery/css/base.css b/themes/jquery/css/base.css index 4082df9e..1805dea2 100644 --- a/themes/jquery/css/base.css +++ b/themes/jquery/css/base.css @@ -1528,32 +1528,32 @@ iframe { border-right: none; } -#container, +#container, footer { border-top: 1px solid #7ACEF4; } -.jquery-ui #container, +.jquery-ui #container, .jquery-ui footer { border-top-color: #FAA523; } -.jquery-mobile #container, +.jquery-mobile #container, .jquery-mobile footer { border-top-color: #3EB249; } -.sizzlejs #container, +.sizzlejs #container, .sizzlejs footer { border-top-color: #FAA523; } -.qunitjs #container, +.qunitjs #container, .qunitjs footer { border-top-color: #9C3493; } -.jquery-learn #container, +.jquery-learn #container, .jquery-learn footer { border-top-color: #333; } @@ -2154,7 +2154,7 @@ p.author a { padding: 20px; } -#banner-secondary h1, +#banner-secondary h1, #banner-secondary h2 { margin-bottom: 0; color: #fff; @@ -2977,8 +2977,8 @@ footer li img { } .qunitjs .ribbon-wrapper-purple { - width: 150px; - height: 150px; + width: 100px; + height: 100px; overflow: hidden; position: fixed; bottom: 0px; @@ -2987,7 +2987,7 @@ footer li img { } .qunitjs .ribbon-purple { - font: 12px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; + font: 10px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; text-transform: uppercase; color: white; text-align: center; @@ -2997,15 +2997,15 @@ footer li img { -o-transform: rotate(-45deg); position: relative; padding: 7px 0; - right: 0px; - bottom: -85px; - width: 200px; + right: 17px; + bottom: -48px; + width: 150px; border-top: 1px solid rgba(250, 250, 250, 0.27); background-color: #6A2165; - background-image: -webkit-gradient(linear, left top, left bottom, from(#6A2165), to(#390F39)); - background-image: -webkit-linear-gradient(top, #6A2165, #390F39); - background-image: -moz-linear-gradient(top, #6A2165, #390F39); - background-image: -ms-linear-gradient(top, #6A2165, #390F39); + background-image: -webkit-gradient(linear, left top, left bottom, from(#6A2165), to(#390F39)); + background-image: -webkit-linear-gradient(top, #6A2165, #390F39); + background-image: -moz-linear-gradient(top, #6A2165, #390F39); + background-image: -ms-linear-gradient(top, #6A2165, #390F39); background-image: -o-linear-gradient(top, #6A2165, #390F39); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); @@ -3013,7 +3013,7 @@ footer li img { } .qunitjs .ribbon-purple-base i.icon-github-alt { - font-size: 24px; + font-size: 18px; color: white; } @@ -3037,16 +3037,16 @@ footer li img { -o-transform: rotate(-45deg); position: relative; padding: 7px 14px; - left: 82px; - bottom: -51px; - width: 200px; - height: 200px; + left: 50px; + bottom: -16px; + width: 150px; + height: 150px; background-color: #6A2165; - background-image: -webkit-gradient(linear, left top, left bottom, from(#6A2165), to(#390F39)); - background-image: -webkit-linear-gradient(top, #6A2165, #390F39); - background-image: -moz-linear-gradient(top, #6A2165, #390F39); - background-image: -ms-linear-gradient(top, #6A2165, #390F39); - background-image: -o-linear-gradient(top, #6A2165, #390F39); + background-image: -webkit-gradient(linear, left top, left bottom, from(#6A2165), to(#390F39)); + background-image: -webkit-linear-gradient(top, #6A2165, #390F39); + background-image: -moz-linear-gradient(top, #6A2165, #390F39); + background-image: -ms-linear-gradient(top, #6A2165, #390F39); + background-image: -o-linear-gradient(top, #6A2165, #390F39); color: white; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); @@ -3272,7 +3272,7 @@ footer li img { @media only screen and (max-width: 480px) { - #global-nav { + #global-nav { display: none; } @@ -3315,7 +3315,7 @@ footer li img { nav#main ul li, nav#main ul li a { float: none; - padding: 6px 0px 6px 8px; + padding: 6px 0px 6px 8px; } .chzn-container-single .chzn-single span { font: normal normal 16px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; @@ -3328,7 +3328,7 @@ footer li img { padding-right: 10px; } - .content-full #content, + .content-full #content, .content-full.full-width #content, .content-right #content, .content-left #content { From b9d6ad83a980c568a19949dc78eb2178e628cc77 Mon Sep 17 00:00:00 2001 From: Klein Maetschke Date: Mon, 25 Feb 2013 19:00:12 -0500 Subject: [PATCH 3/3] Moving to anchor link. Moving to using an anchor for the ribbon instead of "jacky" javascripting. --- themes/jquery/footer-qunit.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/themes/jquery/footer-qunit.php b/themes/jquery/footer-qunit.php index 60f68090..96864e29 100644 --- a/themes/jquery/footer-qunit.php +++ b/themes/jquery/footer-qunit.php @@ -40,12 +40,12 @@

-