Skip to content
Browse files

Tweaked layout of featured sites on homepage

  • Loading branch information...
davidmerfield committed Mar 14, 2019
1 parent e2d99bf commit b8168426fab4f3ee94ec96ccac3d4a84f58d47b0
Showing with 2 additions and 159 deletions.
  1. +0 −149 app/brochure/views/css/blot.css
  2. +2 −10 app/brochure/views/index.html
@@ -415,155 +415,6 @@ overlay .close:after {
margin: 0 1em;

.sites {
list-style-type: none;
display: flex;
padding: 0;
max-width: none;
margin-top: 3em;
text-align: center;
flex-wrap: wrap;

.sites li {
box-sizing: border-box;
margin: 1em 0;
float: left;
position: relative;

@media screen and (min-width: 1200px) {

.sites li {
width: calc(33% - 2em);

.sites li:nth-child(3n+2) {
margin: 1em 3em


@media screen and (min-width: 540px) and (max-width: 1200px) {

.sites li {
width: calc(50% - 1.5em);

.sites li:nth-child(2n) {


.sites li:nth-child(2) {background: #739780}
.sites li:nth-child(3) {background: #dba394}
.sites li:nth-child(4) {background: #f1d9a0}

.sites li img {
position: absolute;
top: 0.2em;
left: 1.5em

.sites img {
display: none;

.sites li>a {
color: #afaba8;
border-radius: 4px;
display: block;
position: relative;
text-align: center;
padding: 2em 0 45% 1em;
height: 0;
box-sizing: border-box;
border: 1px solid #bfbcba;

.sites li a span.domain {
position: absolute;
top: 50%;
margin-top: -0.3em;
text-align: center;
left: 0;
right: 0

.sites dots {
position: absolute;
top: .35rem;
left: 0;
right: 0;
border-bottom: 1px solid #bfbcba;
padding-left: .4rem;

.sites li>a:before,
.sites .new {
color: white;
border: 2px solid #fff;
position: absolute;
vertical-align: middle;
text-align: center;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
text-transform: uppercase;
border-radius: 50%;
top: -0.85rem;
z-index: 1;
right: -1.25rem;
opacity: 0;
content: "";
z-index: 2;
transition-property: opacity;
transition-duration: 0.1s;
transition-timing-function: ease-out;
background: #111111;
text-indent: 0;

.sites .new {
text-indent: .1rem;
font-size: 12px;
text-transform: uppercase;
background: rgb(192, 39, 45);
letter-spacing: .05em;
opacity: 1.0;
z-index: 1

.sites li p {
font-size: 15px;

.sites li>a:hover:before {
opacity: 1.0;

.sites dot {
display: block;
float: left;
margin-right: 5px;
margin-bottom: .3rem;
border-radius: 100%;
width: .25rem;
height: .25rem;
border: 1px solid #afaba8;
background: 0 0;
box-shadow: none;

.clients {margin:2em 0;list-style-type: none;padding: 0;max-width: none;}
.clients li {display: inline-block;width: 33%;margin-right: 2em;}
@@ -28,18 +28,10 @@

<p>Why a blogging platform with no interface? So you can blog with your favorite tools. Use your favorite text-editor to write and <a href="/videos/publishing-with-blot.mp4">Blot does the rest</a>. Here's a handful of the people who host their website on Blot:</p>

<ul class="sites">

<a target="_blank" rel="noopener" href="{{{url}}}">
{{#first}}<span class="new">New</span>{{/first}}
<span class='domain'>{{domain}}</span>
<p><a target="_blank" rel="noopener" href="{{{url}}}">{{name}}</a> {{description}} uses {{#custom}}a <a href="/templates">custom</a> template{{/custom}}{{^custom}}the <a href="/templates/{{templateLower}}">{{template}}</a> template{{/custom}}.</li>
<p style="width:50%;float:left;max-width:none;position:relative;padding-left:1.5em;padding-right:1em;box-sizing:border-box"><a target="_blank" rel="noopener" href="{{{url}}}"> <b> <img style="position:absolute;left:0px;top:3px;width:16px;height:16px;" src="/images/featured/{{image}}">
{{name}}</b></a> {{description}} uses {{#custom}}a <a href="/templates">custom</a> template{{/custom}}{{^custom}}the <a href="/templates/{{templateLower}}">{{template}}</a> template{{/custom}}.</li>


0 comments on commit b816842

Please sign in to comment.
You can’t perform that action at this time.