on thumbnails, use inset box shadows instead of borders

2 files changed, 18 insertions, 5 deletions

diff --git a/assets/css/bootswatch.min.css b/assets/css/bootswatch.min.css
index d2ca27ad..35763fb1 100644
--- a/assets/css/bootswatch.min.css
+++ b/assets/css/bootswatch.min.css
@@ -1 +1 @@
-body{padding-top:50px}#banner{min-height:300px;border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 2em;background:#141d27;background:-moz-linear-gradient(70deg, #141d27 0, #233344 72%, #2c4055 89%, #39526e 100%);background:-webkit-gradient(linear, left bottom, right top, color-stop(0, #141d27), color-stop(72%, #233344), color-stop(89%, #2c4055), color-stop(100%, #39526e));background:-webkit-linear-gradient(70deg, #141d27 0, #233344 72%, #2c4055 89%, #39526e 100%);background:-o-linear-gradient(70deg, #141d27 0, #233344 72%, #2c4055 89%, #39526e 100%);background:-ms-linear-gradient(70deg, #141d27 0, #233344 72%, #2c4055 89%, #39526e 100%);background:linear-gradient(70deg, #141d27 0, #233344 72%, #2c4055 89%, #39526e 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#141d27', endColorstr='#39526e', GradientType=1);color:#fff;text-align:center}.splash h1{font-size:4em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.splash .bsa{max-width:350px;margin:0 auto;background:none}.splash .bsa .one .bsa_it_ad{border:1px solid #3e4653 !important;border-color:rgba(255,255,255,0.2) !important}.splash .bsa a{color:#fff}.section-tout{padding:4em 0 3em;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(0,0,0,0.1);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1;border:1px solid rgba(0,0,0,0.1)}.section-preview .preview .options{padding:1em 2em 2em;border-top:1px solid rgba(0,0,0,0.1);text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor img{border:1px solid rgba(0,0,0,0.2);border-radius:4px}.sponsor a:hover{text-decoration:none}@media (max-width:767px){#banner{margin-bottom:2em;text-align:center}}
\ No newline at end of file
+body{padding-top:50px}#banner{min-height:300px;border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 2em;background:#141d27;background:-moz-linear-gradient(70deg, #141d27 0, #233344 72%, #2c4055 89%, #39526e 100%);background:-webkit-gradient(linear, left bottom, right top, color-stop(0, #141d27), color-stop(72%, #233344), color-stop(89%, #2c4055), color-stop(100%, #39526e));background:-webkit-linear-gradient(70deg, #141d27 0, #233344 72%, #2c4055 89%, #39526e 100%);background:-o-linear-gradient(70deg, #141d27 0, #233344 72%, #2c4055 89%, #39526e 100%);background:-ms-linear-gradient(70deg, #141d27 0, #233344 72%, #2c4055 89%, #39526e 100%);background:linear-gradient(70deg, #141d27 0, #233344 72%, #2c4055 89%, #39526e 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#141d27', endColorstr='#39526e', GradientType=1);color:#fff;text-align:center}.splash h1{font-size:4em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.splash .bsa{max-width:350px;margin:0 auto;background:none}.splash .bsa .one .bsa_it_ad{border:1px solid #3e4653 !important;border-color:rgba(255,255,255,0.2) !important}.splash .bsa a{color:#fff}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:""}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor img{border:1px solid rgba(0,0,0,0.2);border-radius:4px}.sponsor a:hover{text-decoration:none}@media (max-width:767px){#banner{margin-bottom:2em;text-align:center}}
\ No newline at end of file
diff --git a/assets/less/bootswatch.less b/assets/less/bootswatch.less
index 123f2be5..e93ee6d5 100644
--- a/assets/less/bootswatch.less
+++ b/assets/less/bootswatch.less
@@ -113,8 +113,7 @@ footer {
 
 .section-tout {
   padding: 4em 0 3em;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   background-color: #eaf1f1;
 
   .fa {
@@ -133,11 +132,25 @@ footer {
 
     margin-bottom: 4em;
     background-color: #eaf1f1;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+
+    .image {
+      position: relative;
+    }
+
+    .image:before {
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      content: "";
+    }
 
     .options {
       padding: 1em 2em 2em;
-      border-top: 1px solid rgba(0, 0, 0, 0.1);
+      border: 1px solid rgba(0, 0, 0, 0.05);
+      border-top: none;
       text-align: center;
 
       p {