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.
Created
May 22, 2014 19:21
-
-
Save thethp/4f3b86f143ea19ad1544 to your computer and use it in GitHub Desktop.
A Pen by Todd H Page.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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