Skip to content

P
Printrun
Commit 16aed939 authored by Guillaume Seguin's avatar Guillaume Seguin
Browse files
Options

Improve css for features part

parent eca41777
Show whitespace changes
Inline Side-by-side
Showing with 52 additions and 33 deletions
css/printrun.css
View file @ 16aed939
...@@ -12,6 +12,11 @@ body { ...@@ -12,6 +12,11 @@ body {
padding: 0; padding: 0;
} }
.spacer {
clear: both;
width: 100%;
}
h2 { h2 {
border-left: 5px solid #333; border-left: 5px solid #333;
padding-left: 10px; padding-left: 10px;
...@@ -135,22 +140,21 @@ h2 { ...@@ -135,22 +140,21 @@ h2 {
/* HOME /* HOME
-------------------------------------------------- */ -------------------------------------------------- */
.container.home { .home {
margin-bottom: 30px; margin-bottom: 30px;
width: 960px;
} }
.home .row .col-md-4, .home .row .col-md-8 { .homecol-4, .homecol-8 {
width: 300px; width: 300px;
} }
@media (max-width: 959px) { .home .homerow {
.home .row {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.home .row .col-md-4, .home .row .col-md-8 { @media (max-width: 639px) {
.homerow .homecol-4, .homerow .homecol-8 {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 0; padding-left: 0;
...@@ -158,14 +162,26 @@ h2 { ...@@ -158,14 +162,26 @@ h2 {
} }
} }
@media (min-width: 960px) { @media (min-width: 639px) and (max-width: 959px) {
.home .row { .home .homerow {
width: 960px; width: 640px;
}
.homerow div:nth-last-child(2) {
float: none;
clear: both;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.home .row .col-md-4, .home .row .col-md-8 { .homerow div:nth-last-child(2) div {
margin-top: 20px;
margin-bottom: 40px;
}
}
@media (min-width: 639px) {
.homerow .homecol-4, .homerow .homecol-8 {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
padding-left: 0; padding-left: 0;
...@@ -173,13 +189,21 @@ h2 { ...@@ -173,13 +189,21 @@ h2 {
float: left; float: left;
} }
.home .row .col-md-8 { .homerow .homecol-8 {
width: 620px; width: 620px;
} }
}
@media (min-width: 960px) {
.homerow {
width: 960px;
}
} }
.homebox { .homebox {
position: relative;
width: 100%;
height: 370px; height: 370px;
color: #fff; color: #fff;
text-align: center; text-align: center;
......
index.html
View file @ 16aed939
...@@ -103,11 +103,12 @@ ...@@ -103,11 +103,12 @@
</div><!-- /.carousel --> </div><!-- /.carousel -->
<div id="features" class="separator bg-lightblue"></div> <div id="features" class="separator bg-lightblue"></div>
<div class="container home"> <div class="container content">
<h2 class="border-lightblue">Features</h2> <h2 class="border-lightblue">Features</h2>
</div>
<div class="row"> <div class="home">
<div class="col-md-8"> <div class="homerow">
<div class="homecol-8">
<div class="homebox homebox-large"> <div class="homebox homebox-large">
<div class="front"> <div class="front">
<img src="images/pronterface-pronsole-printcore.jpg" alt="Pronterface, Pronsole, Printcore" /> <img src="images/pronterface-pronsole-printcore.jpg" alt="Pronterface, Pronsole, Printcore" />
...@@ -127,7 +128,7 @@ ...@@ -127,7 +128,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="homecol-4">
<div class="homebox"> <div class="homebox">
<div class="front"> <div class="front">
<img src="images/customui.jpg" alt="Customizable UI" /> <img src="images/customui.jpg" alt="Customizable UI" />
...@@ -139,10 +140,7 @@ ...@@ -139,10 +140,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> <div class="homecol-4">
<div class="row">
<div class="col-md-4">
<div class="homebox"> <div class="homebox">
<div class="front"> <div class="front">
<img src="images/pronsole-screenshot.jpg" alt="CLI printing" /> <img src="images/pronsole-screenshot.jpg" alt="CLI printing" />
...@@ -153,7 +151,7 @@ ...@@ -153,7 +151,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="homecol-4">
<div class="homebox"> <div class="homebox">
<div class="front"> <div class="front">
<img src="images/slic3r-integration.jpg" alt="Slic3r integration" /> <img src="images/slic3r-integration.jpg" alt="Slic3r integration" />
...@@ -164,7 +162,7 @@ ...@@ -164,7 +162,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="homecol-4">
<div class="homebox"> <div class="homebox">
<div class="front"> <div class="front">
<img src="images/customcontrols.jpg" alt="Macros &amp; custom buttons" /> <img src="images/customcontrols.jpg" alt="Macros &amp; custom buttons" />
...@@ -176,10 +174,7 @@ ...@@ -176,10 +174,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> <div class="homecol-4">
<div class="row">
<div class="col-md-4">
<div class="homebox"> <div class="homebox">
<div class="front"> <div class="front">
<img src="images/part-excluder.jpg" alt="Part excluder" /> <img src="images/part-excluder.jpg" alt="Part excluder" />
...@@ -190,7 +185,7 @@ ...@@ -190,7 +185,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="homecol-4">
<div class="homebox"> <div class="homebox">
<div class="front"> <div class="front">
<img src="images/stlplater.jpg" alt="STL plater" /> <img src="images/stlplater.jpg" alt="STL plater" />
...@@ -201,7 +196,7 @@ ...@@ -201,7 +196,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="homecol-4">
<div class="homebox"> <div class="homebox">
<div class="front"> <div class="front">
<img src="images/gcodeplater.jpg" alt="G-Code plater" /> <img src="images/gcodeplater.jpg" alt="G-Code plater" />
...@@ -212,9 +207,9 @@ ...@@ -212,9 +207,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="spacer"></div>
</div>
</div> </div>
</div> <!-- /container -->
<div class="main"> <div class="main">
<div id="download" class="separator bg-purple"></div> <div id="download" class="separator bg-purple"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment