Skip to content

Commit 4579c61

Browse files
baschtbascht
committed
Fix floating + sizing of logos and projects #57
Thanks to @moonglum for flexboxing the living s*** out of those grids.
1 parent e4dfb9e commit 4579c61

File tree

2 files changed

+67
-74
lines changed

2 files changed

+67
-74
lines changed

‎source/index.html.haml

Lines changed: 54 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -36,56 +36,60 @@ body_class: index
3636
%div.row
3737
%div.columns.small-12.large-12
3838
%h2 Projekte
39-
%div.columns.small-2.large-2.project_image
40-
= link_to 'http://railsgirlshh.onruby.de/' do
41-
= image_tag "content/projects/rails-girls-hh.svg"
42-
%div.columns.small-2.large-2.project_image
43-
= link_to 'http://rug-b.de/' do
44-
= image_tag "content/projects/rug-b.png"
45-
%div.columns.small-2.large-2.project_image
46-
= link_to 'http://railsgirlsberlin.de' do
47-
= image_tag "content/projects/rails-girls-berlin.svg"
48-
%div.columns.small-2.large-2.project_image
49-
= link_to 'http://rubyberlin.github.io/code-of-conduct/' do
50-
= image_tag "content/projects/berlin-code-of-conduct.svg"
51-
%div.columns.small-2.large-2.project_image
52-
= link_to 'http://railsgirls.com/munich2017.html' do
53-
= image_tag "content/projects/rails-girls-munich.png"
54-
%div.columns.small-2.large-2.project_image
39+
%div.projects.columns.small-12.large-12
40+
%ul.small-block-grid-3.medium-block-grid-6.large-block-grid-6
41+
%li
42+
= link_to 'http://railsgirlshh.onruby.de/', class: "th", role: "button" do
43+
= image_tag "content/projects/rails-girls-hh.svg"
44+
%li
45+
= link_to 'http://rug-b.de/', class: "th", role: "button" do
46+
= image_tag "content/projects/rug-b.png"
47+
%li
48+
= link_to 'http://railsgirlsberlin.de', class: "th", role: "button" do
49+
= image_tag "content/projects/rails-girls-berlin.svg"
50+
%li
51+
= link_to 'http://rubyberlin.github.io/code-of-conduct/', class: "th", role: "button" do
52+
= image_tag "content/projects/berlin-code-of-conduct.svg"
53+
%li
54+
= link_to 'http://railsgirls.com/munich2017.html', class: "th", role: "button" do
55+
= image_tag "content/projects/rails-girls-munich.png"
56+
5557
%div.row
5658
%div.columns.small-12.large-12
5759
%h2 Events
58-
%div.columns.small-2.large-2.project_image
59-
= link_to 'https://www.rubyonice.com/2018' do
60-
= image_tag "content/projects/rubyonice-2018.svg"
61-
%div.columns.small-2.large-2.project_image
62-
= link_to 'http://www.euruko2015.org/' do
63-
= image_tag "content/projects/euruko-2015.png"
64-
%div.columns.small-2.large-2.project_image
65-
= link_to 'http://2015.eurucamp.org/' do
66-
= image_tag "content/projects/eurucamp-2015.svg"
67-
%div.columns.small-2.large-2.project_image
68-
= link_to 'http://2014.eurucamp.org/' do
69-
= image_tag "content/projects/eurucamp-2014.svg"
70-
%div.columns.small-2.large-2.project_image
71-
= link_to 'http://lightning.io/' do
72-
= image_tag "content/projects/lightning-io.svg"
73-
%div.columns.small-2.large-2.project_image
74-
= link_to 'http://2014.railscamp.de' do
75-
= image_tag "content/projects/railscamp-2014.png"
76-
%div.columns.small-2.large-2.project_image
77-
= link_to 'http://2013.eurucamp.org' do
78-
= image_tag "content/projects/eurucamp-2013.png"
79-
%div.columns.small-2.large-2.project_image
80-
= link_to 'http://jrubyconf.eu' do
81-
= image_tag "content/projects/jrubyconf.svg"
82-
%div.columns.small-2.large-2.project_image
83-
= link_to 'http://2013.railscamp.de' do
84-
= image_tag "content/projects/railscamp-2013.png"
85-
%div.columns.small-2.large-2.project_image
86-
= link_to 'http://2012.eurucamp.org' do
87-
= image_tag "content/projects/eurucamp-2012.png"
88-
%div.columns.small-2.large-2.project_image
89-
= link_to 'http://euruko2011.org' do
90-
= image_tag "content/projects/euruko-2011.png"
91-
%div.columns.small-2.large-2.project_image
60+
%div.events.columns.small-12.large-12
61+
%ul.small-block-grid-3.medium-block-grid-6.large-block-grid-6
62+
%li
63+
= link_to 'https://www.rubyonice.com/2018', class: "th", role: "button" do
64+
= image_tag "content/projects/rubyonice-2018.svg"
65+
%li
66+
= link_to 'http://www.euruko2015.org/', class: "th", role: "button" do
67+
= image_tag "content/projects/euruko-2015.png"
68+
%li
69+
= link_to 'http://2015.eurucamp.org/', class: "th", role: "button" do
70+
= image_tag "content/projects/eurucamp-2015.svg"
71+
%li
72+
= link_to 'http://2014.eurucamp.org/', class: "th", role: "button" do
73+
= image_tag "content/projects/eurucamp-2014.svg"
74+
%li
75+
= link_to 'http://lightning.io/', class: "th", role: "button" do
76+
= image_tag "content/projects/lightning-io.svg"
77+
%li
78+
= link_to 'http://2014.railscamp.de', class: "th", role: "button" do
79+
= image_tag "content/projects/railscamp-2014.png"
80+
%li
81+
= link_to 'http://2013.eurucamp.org', class: "th", role: "button" do
82+
= image_tag "content/projects/eurucamp-2013.png"
83+
%li
84+
= link_to 'http://jrubyconf.eu', class: "th", role: "button" do
85+
= image_tag "content/projects/jrubyconf.svg"
86+
%li
87+
= link_to 'http://2013.railscamp.de', class: "th", role: "button" do
88+
= image_tag "content/projects/railscamp-2013.png"
89+
%li
90+
= link_to 'http://2012.eurucamp.org', class: "th", role: "button" do
91+
= image_tag "content/projects/eurucamp-2012.png"
92+
%li
93+
= link_to 'http://euruko2011.org', class: "th", role: "button" do
94+
= image_tag "content/projects/euruko-2011.png"
95+

‎source/stylesheets/_custom.scss

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -54,32 +54,21 @@ h3 {
5454
}
5555
}
5656

57-
.project_image {
58-
background: darken($body-bg, 8%);
59-
border-radius: 10%;
60-
border: 10px $body-bg solid;
61-
overflow: hidden;
62-
padding: 15% 0 0;
63-
position: relative;
57+
.projects, .events {
58+
ul {
59+
display: flex;
60+
align-items: stretch;
61+
flex-wrap: wrap;
6462

65-
a {
66-
left: 50%;
67-
max-height: 100%;
68-
position: absolute;
69-
top: 50%;
70-
-moz-transform: translateX(-50%) translateY(-50%);
71-
-ms-transform: translateX(-50%) translateY(-50%);
72-
-webkit-transform: translateX(-50%) translateY(-50%);
73-
transform: translateX(-50%) translateY(-50%);
74-
@media only screen and (min-width: 28em) {
75-
width: 90%;
63+
li {
64+
a {
65+
height: 100%;
66+
display: flex;
67+
align-items: center;
68+
background-color: $white;
69+
}
70+
}
7671
}
77-
}
78-
79-
img {
80-
vertical-align: middle;
81-
width: 100%;
82-
}
8372
}
8473

8574
.secondary-navigation {

0 commit comments

Comments
 (0)