Skip to content

Instantly share code, notes, and snippets.

@aebsr
Created February 24, 2014 21:48
Show Gist options
  • Save aebsr/9197889 to your computer and use it in GitHub Desktop.
Save aebsr/9197889 to your computer and use it in GitHub Desktop.
A Pen by Antoine Butler.
p
= "A CSS version of the "
a(href="http://bmoresponsive.com/") Bmoresponsive
= " logomark"
h1
span.icon
= "Bmoresponsive"
span.grid
@import url(http://fonts.googleapis.com/css?family=Noticia+Text:700);
*, *:before, *:after {
box-sizing: border-box;
}
@border-width: 2px;
@border-radius: 10px;
h1 {
font: 2.5em/1 'Noticia Text', serif;
text-transform: uppercase;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
white-space: nowrap;
.icon,
.grid {
height: 2.0625em;
width: 2.625em;
display: inline-block;
vertical-align: middle;
margin-right: 0.5em;
transform: translateY(0.25em);
&:before {
width: 50%;
height: 166%;
bottom: -@border-width;
left: 0;
z-index: 1;
}
&:after {
height: 105%;
width: 56%;
bottom: 58%;
left: 17%;
z-index: 2;
}
&:before, &:after {
content: '';
display: block;
position: absolute;
}
&, &:before, &:after {
border-radius: @border-radius;
border: @border-width solid #fff;
}
}
.icon {
background: rgb(38,169,224);
position: relative;
&:before { background: rgb(121,200,234); }
&:after { background: rgb(90,187,229); }
}
.grid {
position: absolute;
left: 0;
z-index: 2;
}
}
p {
font-size: 0.75em;
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
a {
text-decoration: none;
text-transform: uppercase;
color: #fd8c25;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment