Skip to content

Instantly share code, notes, and snippets.

@thethp

thethp/"Everything-good-proceeds-from-enthusiasm"-with-single-element-hexagons.markdown

Created May 22, 2014 19:21
Show Gist options
  • Save thethp/4f3b86f143ea19ad1544 to your computer and use it in GitHub Desktop.
Save thethp/4f3b86f143ea19ad1544 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Todd H Page.
Raw
"Everything-good-proceeds-from-enthusiasm"-with-single-element-hexagons.markdown

"Everything good proceeds from enthusiasm" with single element hexagons

I decided to put my single element hexagons to good use and put a quote in front of them. The quote is fully responsive down to a stupid size. And it's something I believe.

A Pen by Todd H Page on CodePen.

License.

Raw
index.jade
.text "Everything <i>good</i> <smallbreak>proceeds from</smallbreak> <span><u>enthusiasm.</u><quote>"</quote></span>
.attribution - Brian Eno
.wrapper
.hexagon.red.first
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
br
.hexagon.aqua.second
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
br
.hexagon.green.first
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
br
.hexagon.red.second
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
br
.hexagon.blue.first
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
br
.hexagon.green.second
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
br
.hexagon.orange.first
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
br
.hexagon.blue.second
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
br
.hexagon.red.first
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
br
.hexagon.aqua.second
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
br
.hexagon.green.first
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
br
.hexagon.red.second
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
br
.hexagon.blue.first
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
br
.hexagon.green.second
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
br
.hexagon.orange.first
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
br
.hexagon.blue.second
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
.hexagon.blue
.hexagon.red
.hexagon.orange
.hexagon.green
.hexagon.aqua
Raw
style.less
@red: #F7352D;
@orange: #FF7B0F;
@aqua: #2790B0;
@green: #64C601;
@blue: #35557A;
@side: 70px;
@percentageNum: @side/@sqrt2;
@width: @side+(2*@percentageNum);
@height: @width;
@firstPercentage: @percentageNum;
@secondPercentage: @percentageNum+@side;
@sqrt2: 1.41421356237;
@hexFirst: 21%;
@hexSecond: 79%;
@font-face {
font-family: 'mission';
src: url('http://toddhpage.com/prettyfonts/Mission%20Gothic%20Bold.otf');
}
@font-face {
font-family: 'lilmission';
src: url('http://toddhpage.com/prettyfonts/Mission%20Gothic%20Light%20Italic.otf');
}
* {
box-sizing: border-box;
}
body,html {
background-color: #2B2B29;
position: fixed;
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
overflow: hidden;
}
.text {
position: absolute;
top: 15%;
left: 20%;
right: 10%;
bottom: 0;
z-index: 1000;
color: #FFF;
font-family: mission;
font-size: 55px;
text-align: right;
text-shadow: 2px 1px 1px #2B2B29;
span {
display: block;
u {
font-size: 140px;
}
quote {
vertical-align: 60px;
}
}
.attribution {
font-family: lilmission;
font-size: 45px;
}
}
.wrapper {
margin-top: -25px;
width: 10000%;
height: 100%;
}
.hexagon {
width: @width;
height: @height;
position: relative;
display: inline-block;
margin-top: -26px;
margin-left: -4px;
&.first {
margin-left: -10px;
}
&.second {
margin-left: -95px;
}
&:before {
position: absolute;
content: "";
transform: rotate(120deg);
width: @width;
height: @height;
}
&:after {
position: absolute;
content: "";
transform: rotate(240deg);
width: @width;
height: @height;
}
&.red {
background: linear-gradient(transparent @hexFirst, @red @hexFirst, @red @hexSecond, transparent @hexSecond);
&:before {
background: linear-gradient(transparent @hexFirst, @red @hexFirst, @red @hexSecond, transparent @hexSecond);
}
&:after {
background: linear-gradient(transparent @hexFirst, @red @hexFirst, @red @hexSecond, transparent @hexSecond);
}
}
&.orange {
background: linear-gradient(transparent @hexFirst, @orange @hexFirst, @orange @hexSecond, transparent @hexSecond);
&:before {
background: linear-gradient(transparent @hexFirst, @orange @hexFirst, @orange @hexSecond, transparent @hexSecond);
}
&:after {
background: linear-gradient(transparent @hexFirst, @orange @hexFirst, @orange @hexSecond, transparent @hexSecond);
}
}
&.aqua {
background: linear-gradient(transparent @hexFirst, @aqua @hexFirst, @aqua @hexSecond, transparent @hexSecond);
&:before {
background: linear-gradient(transparent @hexFirst, @aqua @hexFirst, @aqua @hexSecond, transparent @hexSecond);
}
&:after {
background: linear-gradient(transparent @hexFirst, @aqua @hexFirst, @aqua @hexSecond, transparent @hexSecond);
}
}
&.green {
background: linear-gradient(transparent @hexFirst, @green @hexFirst, @green @hexSecond, transparent @hexSecond);
&:before {
background: linear-gradient(transparent @hexFirst, @green @hexFirst, @green @hexSecond, transparent @hexSecond);
}
&:after {
background: linear-gradient(transparent @hexFirst, @green @hexFirst, @green @hexSecond, transparent @hexSecond);
}
}
&.blue {
background: linear-gradient(transparent @hexFirst, @blue @hexFirst, @blue @hexSecond, transparent @hexSecond);
&:before {
background: linear-gradient(transparent @hexFirst, @blue @hexFirst, @blue @hexSecond, transparent @hexSecond);
}
&:after {
background: linear-gradient(transparent @hexFirst, @blue @hexFirst, @blue @hexSecond, transparent @hexSecond);
}
}
}
@media all and (max-width: 1125px) {
.text {
font-size: 50px;
text-shadow: 2px 1px 1px #2B2B29;
span {
u {
font-size: 120px;
}
quote {
vertical-align: 50px;
}
}
.attribution {
font-size: 40px;
}
}
}
@media all and (max-width: 1005px) {
.text {
font-size: 45px;
text-shadow: 2px 1px 1px #2B2B29;
span {
u {
font-size: 110px;
}
quote {
vertical-align: 40px;
}
}
.attribution {
font-size: 37px;
}
}
}
@media all and (max-width: 900px) {
.text {
top: 22%;
font-size: 35px;
text-shadow: 2px 1px 1px #2B2B29;
span {
u {
font-size: 85px;
}
quote {
vertical-align: 30px;
}
}
.attribution {
font-size: 30px;
text-shadow: 1px 1px #000;
}
}
}
@media all and (max-width: 720px) {
.text {
top: 15%;
right: 15%;
left: 10%;
font-size: 60px;
text-shadow: 2px 1px 1px #2B2B29;
smallbreak {
display: block;
font-size: 50px;
margin-top: -5px;
}
span {
margin-top: -5px;
u {
font-size: 75px;
}
quote {
vertical-align: 15px;
}
}
.attribution {
font-size: 30px;
text-shadow: 1px 1px #000;
}
}
}
@media all and (max-width: 620px) {
.text {
top: 15%;
right: 10%;
left: 10%;
font-size: 50px;
text-shadow: 2px 1px 1px #2B2B29;
smallbreak {
display: block;
font-size: 40px;
margin-top: -5px;
}
span {
margin-top: -5px;
u {
font-size: 65px;
}
quote {
vertical-align: 10px;
}
}
.attribution {
font-size: 28px;
text-shadow: 1px 1px #000;
}
}
}
@media all and (max-width: 485px) {
.text {
top: 10%;
right: 10%;
left: 10%;
font-size: 40px;
text-shadow: 2px 1px 1px #2B2B29;
smallbreak {
display: block;
font-size: 30px;
margin-top: -5px;
}
span {
margin-top: -5px;
u {
font-size: 52px;
}
quote {
vertical-align: 10px;
}
}
.attribution {
font-size: 28px;
text-shadow: 1px 1px #000;
}
}
}
@media all and (max-width: 393px) {
.text {
top: 10%;
right: 15%;
left: 5%;
font-size: 30px;
text-shadow: 2px 1px 1px #2B2B29;
smallbreak {
display: block;
font-size: 20px;
margin-top: -5px;
}
span {
margin-top: -5px;
u {
font-size: 37px;
}
quote {
vertical-align: 3px;
}
}
.attribution {
font-size: 20px;
text-shadow: 1px 1px #000;
}
}
}
@media all and (max-width: 300px) {
.text {
top: 15%;
right: 10%;
left: 5%;
font-size: 25px;
smallbreak {
font-size: 17px;
margin-top: 0px;
}
span {
u {
font-size: 32px;
}
}
.attribution {
font-size: 17px;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment