New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Issue #730 - Content Sectioning - header #789
Changes from 4 commits
7d7910a
e3bab45
bd7c65d
760b1e0
4180749
82ae5a8
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
header.page-header { | ||
background: no-repeat left/cover url(/media/examples/puppy-header-logo.jpg); | ||
display: flex; | ||
height: 120px; | ||
min-width: 120px; | ||
align-items: center; | ||
color: #fff; | ||
text-shadow: #000 0 0 0.2em; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sorry, didn't know we were supposed to have perfected layout given the space constraint. Will adjust it. |
||
|
||
header.page-header > h1 { | ||
font: bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script", cursive, fantasy; | ||
margin: 2%; | ||
} | ||
|
||
main { | ||
font: 1rem "Fira Sans", sans-serif; | ||
} | ||
|
||
@font-face { | ||
font-family: "Dancing Script"; | ||
src: url("/media/examples/DancingScript-Regular.ttf"); | ||
} | ||
|
||
@font-face { | ||
font-family: "Fira Sans"; | ||
src: local("FiraSans-Regular"), | ||
url("/media/fonts/FiraSans-Regular.woff2") format("woff2"); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<header class="page-header"> | ||
<h1>Cute Puppies Express!</h1> | ||
</header> | ||
|
||
<main> | ||
<p>I love Beagles <strong>so</strong> much! Like really, a lot. | ||
They're adorable and their ears are so, so snuggly soft!</p> | ||
<p>Photo licensed by Wikimedia Commons under the | ||
<a href="https://creativecommons.org/licenses/by-sa/3.0/deed.en"> | ||
CC-ShareAlike 3.0 Unported license</a></p> | ||
</main> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -23,6 +23,14 @@ | |
"fileName": "aside.html", | ||
"title": "HTML Demo: <aside>", | ||
"type": "tabbed" | ||
}, | ||
"header": { | ||
"baseTmpl": "tmpl/live-tabbed-tmpl.html", | ||
"exampleCode": "live-examples/html-examples/content-sectioning/header.html", | ||
"cssExampleSrc": "live-examples/html-examples/content-sectioning/css/header.css", | ||
"fileName": "header.html", | ||
"title": "HTML Demo: <header>", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since #777 landed, we don't need to encode There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Contributor doc needs to be updated then. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please un-encode these characters. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Whoops - thought I saw on IRC that they still needed to be encoded pending a production push, so I left it alone. Fixing it now. |
||
"type": "tabbed" | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you don't need this line (it's also got a tab in)