Last active
August 29, 2015 14:02
-
-
Save telic/922324bb98f7c022339f to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| @charset "utf-8"; | |
| hgroup { | |
| background: linear-gradient(to bottom, black, black 24pt, rgba(0,0,0,.5)); | |
| color: white; | |
| font-variant: small-caps; | |
| font-weight: bold; | |
| border-radius: 0 6px; | |
| overflow: hidden; | |
| padding: 0 10px; | |
| } | |
| hgroup h1, | |
| hgroup h2, | |
| hgroup h3, | |
| hgroup h4, | |
| hgroup h5 { | |
| display: inline-block; | |
| font-size: 24pt; | |
| padding: 10px; | |
| padding-right: 20px; | |
| margin: 0; | |
| color: white; | |
| text-indent: 0; | |
| font-variant: normal; | |
| } | |
| hgroup h1:first-child, | |
| hgroup h2:first-child, | |
| hgroup h3:first-child, | |
| hgroup h4:first-child, | |
| hgroup h5:first-child { | |
| margin-left: -10px; /* consume hgroup padding-left */ | |
| } | |
| hgroup h1 { | |
| background-color: maroon; | |
| } | |
| hgroup h2 { | |
| background-color: darkgreen; | |
| } | |
| hgroup h3 { | |
| background-color: darkslateblue; | |
| } | |
| hgroup h4 { | |
| background-color: darkorange; | |
| } | |
| hgroup h5 { | |
| background-color: teal; | |
| } | |
| h1 { color: maroon; } | |
| h2 { color: darkgreen; } | |
| h3 { color: darkslateblue; } | |
| h4 { color: darkorange; } | |
| h5 { color: teal; } | |
| h1::before, h1::after, | |
| h2::before, h2::after, | |
| h3::before, h3::after, | |
| h4::before, h4::after, | |
| h5::before, h5::after{ | |
| content: "•"; | |
| padding: 0 .25em; | |
| } |
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>test</title> | |
| <link rel="stylesheet" href="lab.css"> | |
| <link rel="stylesheet" href="header.css"> | |
| <script src="reColour.js"></script> | |
| </head> | |
| <body> | |
| <h1>hello world</h1> | |
| <p>does this work?</p> | |
| </body> | |
| </html> |
This file contains hidden or 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
| h1, h2, h3, h4 { color: #3366ff; } | |
| h2 { text-indent: .25em; } | |
| h3 { text-indent: 1.5em; } | |
| h2 small { | |
| font-size: 75%; | |
| font-weight: normal; | |
| color: black; | |
| display: inline; | |
| margin-left: .5em; | |
| } | |
| kbd { font-weight: bold; } | |
| aside.note, figure { | |
| float: right; | |
| width: 300px; | |
| margin: 1em; | |
| padding: 10px; | |
| border: 2px solid #ddd; | |
| border-radius: 5px; | |
| background-color: white; | |
| } | |
| figure { | |
| width: 350px; | |
| text-align: center; | |
| margin-top: -10px; | |
| } | |
| aside.info { | |
| margin: .5em 3em; | |
| padding: 20px; | |
| background-color: #eef; | |
| border-radius: 5px; | |
| } | |
| .icon { | |
| background-color: #5d5f60; /* same as Brackets toolbar background */ | |
| border-radius: 3px; | |
| vertical-align: -30%; | |
| } | |
| li.instructions { | |
| margin-bottom: .28em; | |
| } | |
| p { | |
| text-indent: 1em; | |
| } | |
| section { | |
| border-top: 1px solid black; | |
| margin-top: 2em; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border: 2px solid black; | |
| width: 450px; | |
| table-layout: fixed; | |
| margin: 0 2em; | |
| } | |
| td, th { | |
| border: 1px solid #555; | |
| } | |
| th { | |
| background-color: #ccf; | |
| text-align: left; | |
| padding: 2px 5px; | |
| } | |
| th:nth-child(2), td:last-child { | |
| width:50px; | |
| } | |
| tbody th { | |
| background-color: #eef; | |
| text-indent: 1em; | |
| } | |
| td { | |
| padding: 1px 2px; | |
| } | |
| td:last-child { | |
| text-align: center; | |
| } | |
| tr:last-child td:last-child { | |
| background-color: #ccf; | |
| } | |
| pre { | |
| background-color: black; | |
| color: white; | |
| border: 2px outset gray; | |
| } |
This file contains hidden or 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
| document.addEventListener("DOMContentLoaded", function() { | |
| function reColour(evt) { | |
| var h = Math.floor(Math.random()*180), | |
| hi = 180+h; | |
| evt.target.style.backgroundColor = "hsl("+h+",100%,50%)"; | |
| evt.target.style.color = "hsl("+hi+",100%,50%)"; | |
| } | |
| var hs = document.querySelectorAll("h1,h2,h3,h4,h5"); | |
| for (var i=0; i<hs.length; i++) { | |
| hs[i].addEventListener("click", reColour); | |
| } | |
| var style = document.createElement("style"); | |
| style.textContent = "h1,h2,h3,h4,h5 { cursor: help; }"; | |
| document.head.appendChild(style); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment