A Pen by Gary Rozanc on CodePen.
Last active
December 15, 2018 18:07
-
-
Save garyrozanc/d70ebfcb47b803f0ee7e4a06bf1ce605 to your computer and use it in GitHub Desktop.
Class Blog Assignment Meta
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
| <ul> | |
| <li>Art 336</li> | |
| <li class="due"> | |
| <a href=""> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M100 50c0 27.7-22.3 50-50 50S0 77.7 0 50 22.3 0 50 0 100 22.3 100 50zM87.5 55.4L72.2 43.3l15.3-12.3L65.4 16.7 50 29.5 34.6 16.7 12.5 31l15.3 12.3L12.5 55.4l22.1 14.5L50 57.1l15.4 12.8L87.5 55.4zM72.2 43.3L50 57.1 27.8 43.3 50 29.5 72.2 43.3zM72.1 69l-6.8 4.3L50 60.6l-15.2 12.6 -6.9-4.2v4.2L50 86.3l22.1-13.2V69z"/></svg> | |
| <span>Tue, Sep 11, 2018</span> | |
| </a> | |
| </li> | |
| <li class="late"> | |
| <a href=""> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M100 50c0 27.7-22.3 50-50 50S0 77.7 0 50 22.3 0 50 0 100 22.3 100 50zM87.5 55.4L72.2 43.3l15.3-12.3L65.4 16.7 50 29.5 34.6 16.7 12.5 31l15.3 12.3L12.5 55.4l22.1 14.5L50 57.1l15.4 12.8L87.5 55.4zM72.2 43.3L50 57.1 27.8 43.3 50 29.5 72.2 43.3zM72.1 69l-6.8 4.3L50 60.6l-15.2 12.6 -6.9-4.2v4.2L50 86.3l22.1-13.2V69z"/></svg> | |
| <span>Tue, Sep 11, 2018</span> | |
| </a> | |
| </li> | |
| <li class="closed"> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M100 50c0 27.7-22.3 50-50 50S0 77.7 0 50 22.3 0 50 0 100 22.3 100 50zM87.5 55.4L72.2 43.3l15.3-12.3L65.4 16.7 50 29.5 34.6 16.7 12.5 31l15.3 12.3L12.5 55.4l22.1 14.5L50 57.1l15.4 12.8L87.5 55.4zM72.2 43.3L50 57.1 27.8 43.3 50 29.5 72.2 43.3zM72.1 69l-6.8 4.3L50 60.6l-15.2 12.6 -6.9-4.2v4.2L50 86.3l22.1-13.2V69z"/></svg> | |
| <span>Tue, Sep 11, 2018</span> | |
| </li> | |
| <li> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M100 50c0 27.6-22.4 50-50 50S0 77.6 0 50 22.4 0 50 0 100 22.4 100 50zM89.3 50c0-21.6-17.7-39.3-39.3-39.3S10.7 28.4 10.7 50 28.4 89.3 50 89.3 89.3 71.6 89.3 50zM53.6 41.9V17.9c0-2-1.6-3.6-3.6-3.6s-3.6 1.6-3.6 3.6v24c-2.1 0.9-3.7 2.6-4.6 4.6H21.4c-2 0-3.6 1.6-3.6 3.6s1.6 3.6 3.6 3.6h20.4c1.4 3.1 4.5 5.4 8.2 5.4 4.9 0 8.9-4 8.9-8.9C58.9 46.3 56.7 43.2 53.6 41.9z"/></svg> | |
| Time: <span>1 hr 50 min</span> | |
| </li> | |
| <li> | |
| <a href=""> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" viewBox="0 0 100 100" xml:space="preserve"><path d="M50 0C22.4 0 0 22.4 0 50c0 27.6 22.4 50 50 50 27.6 0 50-22.4 50-50C100 22.4 77.6 0 50 0zM23.7 38c0.2-0.5 0.7-1 1.2-1H39V21.2c0-0.7 0.3-2.2 1-2.2h20.1c0.7 0 1 1.5 1 2.2V37h14.1c0.5 0 1 0.5 1.2 1 0.1 0.5 0.1 1.2-0.3 1.5L50.9 64.6c-0.3 0.2-0.6 0.4-0.9 0.4s-0.6-0.1-0.9-0.3L24 39.5C23.7 39.2 23.6 38.5 23.7 38zM76 78.8c0 0.7-0.2 1.2-0.9 1.2H24.9C24.2 80 24 79.6 24 78.8v-7.5c0-0.7 0.2-1.3 0.9-1.3h50.2c0.7 0 0.9 0.6 0.9 1.3V78.8z"/></svg> | |
| <span>Assets</span> | |
| </a> | |
| </li> | |
| <li>Points: <strong>5</strong></li> | |
| </ul> |
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
| $black: #262626; | |
| $blue: #6bc7f2; | |
| $green: #81d064; | |
| $grey: #b4b4b4; | |
| $yellow: #f4d506; | |
| $red: #ff8888; | |
| $white: #fff; | |
| $border-radius: .15em; | |
| body { | |
| font-size: 24px; | |
| } | |
| ul { | |
| color: $grey; | |
| list-style-type: none; | |
| li { | |
| margin-bottom: .25em; | |
| &:first-of-type { | |
| background-color: $grey; | |
| border-radius: $border-radius; | |
| color: $white; | |
| display: inline-block; | |
| padding: 2px 6px 0 6px; | |
| text-transform: uppercase; | |
| } | |
| } | |
| a { | |
| color: $grey; | |
| text-decoration: none; | |
| } | |
| a svg + span, | |
| a span { | |
| background-image: linear-gradient(to right, $grey, $grey 50%, transparent 50%, transparent 100%); | |
| background-size: 200% (2em / 15); | |
| background-repeat: repeat-x; | |
| background-position: 100% 100%; | |
| transition: background-position .3s; | |
| } | |
| a svg:hover + span, | |
| a span:hover { | |
| background-position: 0 100%; | |
| } | |
| svg { | |
| fill: $grey; | |
| float: left; | |
| height: 1.5rem; | |
| margin-right: .15em; | |
| transition: fill 300ms ease-in-out; | |
| width: 1.5rem; | |
| } | |
| .due { | |
| svg { | |
| fill: $blue; | |
| } | |
| span { | |
| color: $grey; | |
| &:before { | |
| color: $blue; | |
| content: "Upload: "; | |
| } | |
| } | |
| a svg + span, | |
| a span { | |
| background-image: linear-gradient(to right, $blue, $blue 50%, transparent 50%, transparent 100%); | |
| } | |
| } | |
| .late { | |
| svg { | |
| fill: $yellow; | |
| } | |
| span:before { | |
| color: $yellow; | |
| content: "Late: "; | |
| } | |
| a svg + span, | |
| a span { | |
| background-image: linear-gradient(to right, $yellow, $yellow 50%, transparent 50%, transparent 100%); | |
| } | |
| } | |
| .closed { | |
| span, svg { | |
| cursor: no-drop; | |
| } | |
| svg { | |
| fill: $red; | |
| } | |
| span:before { | |
| color: $red; | |
| content: "Closed: "; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment