Skip to content

Commit

Permalink
Moved main action buttons to the top (just below header)
Browse files Browse the repository at this point in the history 
Added tooltips for the buttons
  • Loading branch information
@arpancj
arpancj committed Apr 24, 2013
1 parent 7e4969b commit 8c9bc48
Show file tree
Hide file tree
Showing 8 changed files with 287 additions and 182 deletions.
162 changes: 100 additions & 62 deletions 2013/assets/application.css
View file
Expand Up @@ -403,23 +403,6 @@ a {
padding: 10px;
overflow: hidden; }

ul.actions li a, a.button {
display: block;
margin: 0;
padding: 10px 12px 4px 4px;
font-size: 14px;
line-height: 20px;
font-family: 'brandon-grotesque';
font-weight: 400;
text-decoration: none;
color: white;
text-align: center;
border: none;
color: #f2ecce; }
ul.actions li a span, a.button span {
font-size: 24px;
color: white; }

ul.actions {
width: 100%;
margin: 0;
Expand All @@ -430,13 +413,14 @@ ul.actions {
ul.actions li {
display: block;
margin: 0;
padding: 0 0 4px 0;
padding: 2px 0;
position: relative;
background: #aa0000;
color: #f2ecce;
border-top: dotted 1px #f2ecce; }
ul.actions li:first-child {
border-top: none; }
@media screen and (min-width: 600px) {
@media screen and (min-width: 640px) {
ul.actions li {
display: inline-block;
border-right: dotted 1px #f2ecce;
Expand All @@ -449,6 +433,57 @@ ul.actions {
ul.actions li a {
margin: 0 20px; }

ul.actions li a, a.button {
display: block;
margin: 0;
padding: 8px 12px 4px 12px;
font-size: 14px;
line-height: 20px;
font-family: 'brandon-grotesque';
font-weight: 400;
text-decoration: none;
color: white;
text-align: center;
border: none;
color: #f2ecce; }
ul.actions li a span, a.button span {
display: block;
font-size: 24px;
color: white;
text-align: center; }

.tooltip {
position: absolute;
display: block;
left: -1000em;
margin-left: -130px;
margin-top: 8px;
width: 240px;
padding: 8px 10px;
display: block;
background: #f2ecce;
color: #aa0000;
border: solid 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
z-index: 100; }
.tooltip:before, .tooltip:after {
content: "";
display: block;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
border: solid 10px transparent;
border-bottom-color: rgba(0, 0, 0, 0.3); }
.tooltip:after {
top: -18px;
margin-left: -9px;
border-width: 9px;
border-bottom-color: #f2ecce; }

*:hover > .tooltip, *.hover > .tooltip {
left: 50%; }

#header {
padding: 20px 10px;
border-bottom: solid 4px #aa0000;
Expand Down Expand Up @@ -505,6 +540,8 @@ ul.actions {
margin-top: -72px;
text-align: right; } }

#home #header {
border-bottom: none; }
#home .info {
margin-top: 40px;
margin-bottom: 40px; }
Expand All @@ -520,49 +557,6 @@ ul.actions {
@media screen and (min-width: 800px) {
#home .container h2 {
font-size: 40px; } }
#home .container .speakers {
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center; }
@media screen and (min-width: 600px) {
#home .container .speakers {
margin: 10px; } }
@media screen and (min-width: 800px) {
#home .container .speakers {
margin: 15px; } }
#home .container .speakers li {
margin: 0;
padding: 0;
display: inline-block;
text-align: center;
width: 120px; }
@media screen and (min-width: 600px) {
#home .container .speakers li {
width: 140px; } }
@media screen and (min-width: 900px) {
#home .container .speakers li {
width: 160px; } }
#home .container .speakers li img {
display: block;
margin: 10px auto;
width: 80px;
height: 80px;
border-radius: 40px;
box-shadow: 0 0 0 10px #f2ecce; }
@media screen and (min-width: 600px) {
#home .container .speakers li img {
width: 100px;
height: 100px;
border-radius: 50px; } }
#home .container .speakers li a {
text-decoration: none;
color: #aa0000;
font-weight: 600;
display: block;
margin: 0 auto;
border: none; }
#home .container .speakers li span {
color: #999999; }
#home .container .article {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Expand Down Expand Up @@ -649,3 +643,47 @@ ul.actions {
.twitter-timeline, #twitter-widget-0 {
display: block;
width: 100%; }

.speakers {
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center; }
@media screen and (min-width: 600px) {
.speakers {
margin: 10px; } }
@media screen and (min-width: 800px) {
.speakers {
margin: 15px; } }
.speakers li {
margin: 0;
padding: 0;
display: inline-block;
text-align: center;
width: 120px; }
@media screen and (min-width: 600px) {
.speakers li {
width: 140px; } }
@media screen and (min-width: 900px) {
.speakers li {
width: 160px; } }
.speakers li img {
display: block;
margin: 10px auto;
width: 80px;
height: 80px;
border-radius: 40px;
box-shadow: 0 0 0 10px #f2ecce; }
@media screen and (min-width: 600px) {
.speakers li img {
width: 100px;
height: 100px;
border-radius: 50px; } }
.speakers li a {
text-decoration: none;
color: #aa0000;
font-weight: 600;
display: block;
margin: 0 auto;
border: none; }
.speakers li span {
color: #999999; }
62 changes: 29 additions & 33 deletions 2013/index.html
View file
Expand Up @@ -16,24 +16,42 @@ <h2>India's premier Ruby Conference</h2>
<h3>22-23 June 2013</h3>
</div>

<ul class="actions">
<li><a href="http://rubyconfindia.doattend.com/" target="_blank">
<span>Early Bird tickets</span>
closes 30th April
</a>
<p class="tooltip">Registrations for RubyConf 2013 are now open!</p>
</li><li>
<a href="https://docs.google.com/spreadsheet/viewform?fromEmail=true&formkey=dDFuUVdkY2pkd0I4TTZhRmdSaEdVcFE6MQ" target="_blank">
<span>Submit a Talk</span>
closes 30th April
</a>

</li><li>
<a href="/stock/rubyconfindia_sponsors.pdf" target="_blank">
<span>Sponsor</span>
closes 10th June
</a>
<p class="tooltip">
Become a sponsor and support the community!<br/>
Download sponsorship collateral <br/><br/>
We understand that some organisations have restrictions on making direct cash contributions to certain events or business entities. If you are interested in sponsorship, but are unable to directly contribute funds to RubyConf India 2013, please email us to explore other opportunities for sponsorship. After parties, event pre-launch dinners and many other sponsorship opportunities exists.
</p>
</li><li>
<a href="https://maps.google.com/maps?q=Hyatt+Regency,+Pune&hl=en&ll=18.560618,73.91225&spn=0.00359,0.003852&sll=18.569782,73.911724&sspn=0.114883,0.123253&hq=Hyatt+Regency,+Pune&t=m&z=18" target="_blank">
<span>Map to Venue</span>
Hyatt Regency Pune</li>
</a>
</ul>

<div id="page" role="main">
<div class="container info">
<div class="article twitter">
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/rubyconfindia" data-widget-id="323510720396402689">Tweets by @rubyconfindia</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="article news">
<h3>Registrations for RubyConf India 2013 are open now!</h3>
<p>
<a href="http://rubyconfindia.doattend.com" target="_blank">Early Bird Tickets</a>

<h3>Become a sponsor and support the community!</h3>
<p>
<a href="/stock/rubyconfindia_sponsors.pdf" target="_blank">Download sponsorship collateral</a>
</p>
<p>
We understand that some organisations have restrictions on making direct cash contributions to certain events or business entities. If you are interested in sponsorship, but are unable to directly contribute funds to RubyConf India 2013, please email us to explore other opportunities for sponsorship. After parties, event pre-launch dinners and many other sponsorship opportunities exists.</p>

<h3>For the first time ever: A 5K run at the conference!</h3>
<p>
<a href="http://www.ruby5k.in" target="_blank">Ruby5K</a>
Expand Down Expand Up @@ -78,28 +96,6 @@ <h3>Previous Conf</h3>
</div>
</div>

<ul class="actions">
<li><a href="http://rubyconfindia.doattend.com/" target="_blank">
<span>Early Bird tickets</span>
<br/>closes 30th April
</a>
</li><li>
<a href="https://docs.google.com/spreadsheet/viewform?fromEmail=true&formkey=dDFuUVdkY2pkd0I4TTZhRmdSaEdVcFE6MQ" target="_blank">
<span>Submit a Talk</span>
<br/>closes 30th April
</a>

</li><li>
<a href="/stock/rubyconfindia_sponsors.pdf" target="_blank">
<span>Sponsor</span>
<br/>closes 10th June
</a>
</li><li>
<a href="https://maps.google.com/maps?q=Hyatt+Regency,+Pune&hl=en&ll=18.560618,73.91225&spn=0.00359,0.003852&sll=18.569782,73.911724&sspn=0.114883,0.123253&hq=Hyatt+Regency,+Pune&t=m&z=18" target="_blank">
<span>Map to Venue</span>
<br/>Hyatt Regency Pune</li>
</a>
</ul>

<div class="container">
<h2>Speakers</h2>
Expand Down
5 changes: 4 additions & 1 deletion 2013/scss/application.scss
View file
Expand Up @@ -16,5 +16,8 @@ $secondary-color: $cream;
@import "typography";

@import "layout";
@import "components";
@import "header";
@import "home";

@import "home";
@import "speakers";
86 changes: 86 additions & 0 deletions 2013/scss/components.scss
View file
@@ -0,0 +1,86 @@
ul.actions{
width: 100%;
margin: 0;
padding: 0;
text-align: center;
background: $primary-color;
clear: both;

li{
display: block; margin: 0; padding: 2px 0;
position: relative;
background: $primary-color;
color: $secondary-color;
border-top: dotted 1px $secondary-color;
&:first-child{border-top: none;}

@media screen and (min-width: 640px){
display: inline-block;
border-right: dotted 1px $secondary-color;
border-bottom: none;
border-top: none;
&:first-child{border-left: dotted 1px $secondary-color;}
}
&:hover{background: #000;}
}
li a{margin: 0 20px;}
}

ul.actions li a, a.button{
display: block;
margin: 0;
padding: 8px 12px 4px 12px;
font-size: 14px;
line-height: 20px;
font-family: 'brandon-grotesque';
font-weight: 400;
text-decoration: none;
color: $white;
text-align: center;
border: none;
color: $secondary-color;

span{
display: block;
font-size: 24px;
color: $white;
text-align: center;
}
}

.tooltip{
position: absolute;
display: block;
left: -1000em;
margin-left: -130px;
margin-top: 8px;
width: 240px;
padding: 8px 10px;
display: block;
background: $secondary-color;
color: $primary-color;
border: solid 1px rgba($black, 0.1);
box-shadow: 0 0 3px rgba($black, 0.1);
z-index: 100;

&:before, &:after{
content: "";
display: block;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;

border: solid 10px transparent;
border-bottom-color: rgba($black, 0.3);
}

&:after{
top: -18px;
margin-left: -9px;
border-width: 9px;
border-bottom-color: $secondary-color;
}
}

*:hover>.tooltip, *.hover>.tooltip{left: 50%;}

0 comments on commit 8c9bc48

Please sign in to comment.