Skip to content

Commit

Permalink
superslides are super responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@frebro
frebro committed Dec 2, 2013
1 parent 2ec5c48 commit 672bf1b
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 26 deletions.
43 changes: 31 additions & 12 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Platsbyggd bokhylla</title>
<meta name="description" content="Rita och beställ din bokhylla direkt. Vi kör hem och platsbygger den åt dig.">
<!-- <meta name="viewport" content="width=1024"> -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr.js"></script>
Expand Down Expand Up @@ -42,12 +42,17 @@ <h1>Platsbyggd bokhylla <small class="text-muted">av Jerker Inredning &amp; Form
<figcaption>
<span class="model">Davidhall</span>
<span class="price-total">70&thinsp;000&thinsp;kr</span>
<span class="price-monthly">~3&thinsp;000&thinsp;kr</span>
/
<span class="price-period">24 mån</span>
<small>
<span class="price-monthly">~3&thinsp;000&thinsp;kr</span>
/
<span class="price-period">24 mån</span>
</small>
<a class="btn btn-info" data-planid="51e9078a15fbf2ba31000033" href="#planner" title="Börja bygga den här hyllan">
<span class="hidden-xs">Bygg den här hyllan</span>
<span class="visible-xs">Bygg</span>
</a>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51e9078a15fbf2ba31000033" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
<li>
<figure>
Expand All @@ -60,9 +65,12 @@ <h1>Platsbyggd bokhylla <small class="text-muted">av Jerker Inredning &amp; Form
/
<span class="price-period">24 mån</span>
</small>
<a class="btn btn-info" data-planid="51ee4dc915fbf2ba31000046" href="#planner" title="Börja bygga den här hyllan">
<span class="hidden-xs">Bygg den här hyllan</span>
<span class="visible-xs">Bygg</span>
</a>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51ee4dc915fbf2ba31000046" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
<li>
<figure>
Expand All @@ -75,9 +83,12 @@ <h1>Platsbyggd bokhylla <small class="text-muted">av Jerker Inredning &amp; Form
/
<span class="price-period">24 mån</span>
</small>
<a class="btn btn-info" data-planid="51e9078a15fbf2ba31000033" href="#planner" title="Börja bygga den här hyllan">
<span class="hidden-xs">Bygg den här hyllan</span>
<span class="visible-xs">Bygg</span>
</a>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51e9078a15fbf2ba31000033" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
<li>
<figure>
Expand All @@ -90,16 +101,18 @@ <h1>Platsbyggd bokhylla <small class="text-muted">av Jerker Inredning &amp; Form
/
<span class="price-period">24 mån</span>
</small>
<a class="btn btn-info" data-planid="51e90d8d15fbf2ba31000037" href="#planner" title="Börja bygga den här hyllan">
<span class="hidden-xs">Bygg den här hyllan</span>
<span class="visible-xs">Bygg</span>
</a>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51e90d8d15fbf2ba31000037" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
<li>
<figure>
<img class="img-responsive" src="images/p/jerker_mg_3693.jpg" alt="Specialbyggd bokhylla, fråga oss om priset">
<figcaption>
<span class="model">Specialbyggd</span>
<span class="price-total">Fråga oss om pris</span>
<span class="model">Special</span>
</figcaption>
</figure>
</li>
Expand All @@ -114,9 +127,12 @@ <h1>Platsbyggd bokhylla <small class="text-muted">av Jerker Inredning &amp; Form
/
<span class="price-period">24 mån</span>
</small>
<a class="btn btn-info" data-planid="51e90d8d15fbf2ba31000037" href="#planner" title="Börja bygga den här hyllan">
<span class="hidden-xs">Bygg den här hyllan</span>
<span class="visible-xs">Bygg</span>
</a>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51e90d8d15fbf2ba31000037" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
<li>
<figure>
Expand All @@ -129,9 +145,12 @@ <h1>Platsbyggd bokhylla <small class="text-muted">av Jerker Inredning &amp; Form
/
<span class="price-period">24 mån</span>
</small>
<a class="btn btn-info" data-planid="51e90b2415fbf2ba31000034" href="#planner" title="Börja bygga den här hyllan">
<span class="hidden-xs">Bygg den här hyllan</span>
<span class="visible-xs">Bygg</span>
</a>
</figcaption>
</figure>
<a class="btn btn-info" data-planid="51e90b2415fbf2ba31000034" href="#planner" title="Börja bygga den här hyllan">Bygg den här hyllan</a>
</li>
</ul>
</div>
Expand Down
27 changes: 13 additions & 14 deletions src/less/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,31 +98,30 @@ body > header nav {
}

.slides-container {
height: 550px;
max-height: 550px;
max-width: 100%;
width: 100%;
height: 280px;
}

figcaption {
background-color: @near-black;
background-color: fade(@near-black, 80);
color: @near-white;
border-top-right-radius: @border-radius-base;
background-color: @near-white;
background-color: fade(@near-white, 80);
color: @near-black;
border-bottom-right-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;

position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: @padding-base-vertical @padding-base-horizontal;

.model,
small {
display: block;
.btn {
.pull-right;
.btn-sm;
}
}

.btn {
position: absolute;
bottom: @padding-base-vertical;
right: @padding-base-horizontal;
}
}

// Responsive tagline
Expand Down

0 comments on commit 672bf1b

Please sign in to comment.