Skip to content

I did a bad thing #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 20, 2017
Merged

I did a bad thing #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
82a1084
I did a bad thing
calebhearth Sep 26, 2017
e3d9883
fixing styles on sponsor and weirdos sections
hannahhearth Oct 20, 2017
58d29c5
adding one more sponsor
hannahhearth Oct 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 103 additions & 51 deletions assets/_sass/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@
text-align: center;

@media (max-width: 500px) {
margin-right: 0;
}

@media (min-width: 910px) {
Expand Down Expand Up @@ -389,22 +390,6 @@
position: relative;
z-index: 1;

a {
text-align: center;
}

.author {
text-align: center;
-webkit-font-smoothing: antialiased;
color: #fff;
font-family: $heading-font-family;
font-size: 48px;
line-height: 0.9;
position: relative;
text-align: center;
margin-top: -3rem;
}

h4 {
color: $dark-gray;
line-height: 1;
Expand All @@ -413,28 +398,56 @@
text-transform: uppercase;
}

a {
display: inline-block;
flex-shrink: 0;
}

img {
@include size(360px);
border-radius: 50%;
display: block;
mix-blend-mode: screen;
}
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: transform 1s;

&:nth-child(2n + 1) img {
@include size(290px);
&:hover {
mix-blend-mode: inherit;
transform: rotate(30deg);
transition: transform 1s;
pointer: cursor;
}
}

a:hover img {
mix-blend-mode: inherit;
transform: rotate(30deg);
@media (max-width: 500px) {
margin: 3em 0;

h4 {
font-size: 26px;
}

p {
font-size: 16px;
}

a {
display: flex;
}

img {
@include size(200px);
margin: 0 auto;
}
}
}

.speaker .author, .sponsor .author {
text-align: center;
-webkit-font-smoothing: antialiased;
color: #fff;
font-family: $heading-font-family;
font-size: 48px;
line-height: 0.9;
position: relative;
text-align: center;
margin-top: -3rem;
}

.commentary {
word-wrap: break-word;
font-family: $heading-font-family;
Expand Down Expand Up @@ -498,8 +511,51 @@
}

.weirdos {
padding: $x-large-spacing $large-spacing;
background-color: $purple;

&::after {
background-color: $dark-purple;
}

h2 {
color: $teal;
}
}

.sponsors {
background-color: $mustard;

&::after {
background-color: $flesh;
}

h2 {
color: $dark-purple;
}
}

.sponsors__list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 3rem;
margin-top: 15vh;

@media (max-width: 500px) {
grid-template-columns: 1fr;

svg, img {
max-width: 280px;
}
}

&-item {
z-index: 1;
align-self: center;
}
}

.sponsors, .weirdos {
padding: 15vh $x-large-spacing;
overflow: hidden;
flex-direction: column;
position: relative;
Expand All @@ -512,7 +568,6 @@
h2 {
position: relative;
display: block;
color: $teal;
z-index: 5;
line-height: 0.9;
font-size: 64px;
Expand All @@ -532,6 +587,11 @@
margin-top: -2rem;
z-index: 0;

@media (max-width: 500px) {
width: 210px;
margin-top: 0rem;
}

@media (min-width: 500px) {
@include size(668px, 80px);
}
Expand All @@ -545,7 +605,6 @@
}

&::after {
background-color: $dark-purple;
bottom: -140px;
content: "";
display: block;
Expand All @@ -556,6 +615,10 @@
width: 100%;
z-index: 0;
}

@media (max-width: 500px) {
padding: 4.5rem 3rem;
}
}

.cfp {
Expand Down Expand Up @@ -625,25 +688,12 @@
}

.sponsor {
position: relative;
padding-top: $x-large-spacing;
z-index: 1;
position: relative;
clear: both;
max-width: 1000px;
pointer-events: none;

@media (min-width: 890px) {
margin-left: 27%;
}

h2 {
margin-bottom: $large-spacing;
font-size: 42px;

@media screen and (min-width: 500px) {
font-size: 64px;
}
margin-top: 15vh;

h3 {
&:before {
display: block;
position: absolute;
Expand All @@ -668,9 +718,6 @@
}

.button {
display: block;
background-color: $pink;

&:after {
position: absolute;
right: -90px;
Expand All @@ -684,7 +731,12 @@

@media (min-width: 1000px) {
width: 45%;
float: left;
}
}

@media (max-width: 500px) {
a {
width: 100%;
}
}
}
Expand Down
Binary file added assets/images/manifold.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/one-more-cloud.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 44 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,24 +115,35 @@ <h1>What you should expect @ keep ruby weird:</h1>
<h2>Meet the weirdos</h2>

<ul class="speakers">

<li class="speaker keynote">
<a href="https://twitter.com/wycats">
<img alt="Yehuda with Dave's face" src="/assets/images/yehuda.png" />
</a>
<h3 class="author">Yehuda Katz</h3>
<h4>Keynote</h4>
<p>Yehuda Katz is one of the creators of Ember.js, a member of the Rust Core Team, and a retired Ruby on Rails and jQuery Core Team member. During the day he's CTO at Tilde, where he works on Skylight, the smart profiler for Rails, and does Ember.js consulting. He's best known for his open source work, which also includes having created projects like Thor, Handlebars and Bundler. He travels the world doing open source evangelism and web standards work, and has written several successful technology books.</p>
</li>

<li class="speaker keynote">
<a href="https://twitter.com/wycats">
<a href="https://twitter.com/littlecalculist">
<img alt="Dave with Yehuda's face" src="/assets/images/dave.png" />
</a>
<h3 class="author">Dave Herman</h3>
<h4>Keynote</h4>
<p>Dave Herman has served on TC39, the standards committee responsible for evolving JavaScript, since 2006, and founded Mozilla Research in 2011. At Mozilla, Dave advised and contributed to the development of Rust, the parallel browser engine Servo, asm.js, and WebAssembly. Dave has recently joined LinkedIn's build tools team, where he is looking at finding new ways to help developers dare to be ambitious.</p>
</li>

<li class="speaker keynote">
<a href="https://twitter.com/aemeredith">
<img src="/assets/images/elle.jpg" alt="Elle Meredith" />
</a>
<h3 class="author">Elle Meredith</h3>
<h4>Keynote</h4>
<p>Elle works as a consultant for Blackmill. Before Blackmill, she was a Development Director in the New York City office of thoughtbot. She believes in writing clean code, driven by automatic tests, with agile practices, an even work/life balance, and a respectful and inclusive team culture. She constantly works to improve her understanding of technologies, techniques, anti-patterns, and what is considered best practice. Her aim is to deliver clean, functional and user–friendly websites in an appropriate timeframe without wasting money or energy. Elle appreciates the value of strong communities. When she is not immersed in the Ruby community, she is probably immersed in water, or lately, in bread flour.</p>
</li>

{% for speaker in site.data.speakers limit: 8%}
<li class="speaker">
<a href="https://twitter.com/{{ speaker.twitter }}">
Expand All @@ -144,8 +155,39 @@ <h4>{{ speaker.talk }}</h3>
</li>
{% endfor %}
</ul>
<div class="center-button">
<a href="/conduct" class="button">Read Our Code of Conduct.</a>
</div>
<div class="center-button">
<a href="/conduct" class="button">Code of Conduct</a>
</div>
</section>
<section class="sponsors">
<h2>Meet the sponsors</h2>

<ul class="sponsors__list">
<li class="sponsors__list-item">
<a href="https://www.bigcommerce.com/careers/">
<img alt="BigCommerce logo" src="https://s3.amazonaws.com/www1.bigcommerce.com/assets/mediakit/downloads/BigCommerce-logo-dark.png">
</a>
</li>

<li class="sponsors__list-item">
<a href="https://story.manifold.co/">
<img alt="Manifold logo" src="/assets/images/manifold.png">
</a>
</li>

<li class="sponsors__list-item">
<a href="https://omc.io/">
<img alt="One More Cloud logo" src="/assets/images/one-more-cloud.png">
</a>
</li>
</ul>

<div class="sponsor">
<h3 class="headline">PLEASE support our weirdness with the gererosity of Your
Friendship</h3>
<p>Keep Ruby Weird can't happen without help from sponsors. We have a few different sponsorship levels, and of course we're open to other arrangements.</p>
<a href="mailto:organizers@keeprubyweird.com" class="button">Sponsor Us</a>
</div>
</div>
</section>
Expand Down