learn-javascript-the-hard-way
/
ljsthw-blog-code
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add an all and sidebar demo.

Browse Source
main
Zed A. Shaw 2 years ago
parent 3da5a44881
commit 681046f229
2 changed files with 210 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 111
      17-equal-height-holy-grail-layout-in-modern-css/all.html
  2. 99
      17-equal-height-holy-grail-layout-in-modern-css/sidebar.html

111
17-equal-height-holy-grail-layout-in-modern-css/all.html
Unescape View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="description" content="Learn JavaScript the Hard Way">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<title>Holy Grail Starter</title>
<style>
:root {
--height-header: 80px;
--height-footer: 200px;
}
body {
margin: 0px;
padding: 0px;
}
footer {
display: flex;
background-color: hsl(0, 0%, 80%);
min-height: var(--height-footer);
}
header {
display: flex;
background-color: hsl(0, 0%, 80%);
height: var(--height-header);
}
main {
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--height-header) - var(--height-footer));
}
main > columns {
display: flex;
flex-direction: row;
flex: 1 1 auto;
}
main > columns left {
display: block;
flex: 0 1 300px;
background-color: hsl(0, 70%, 80%);
}
main > columns right {
display: block;
flex: 3 1 100%;
background-color: hsl(200, 70%, 80%);
}
@media only screen and (max-width: 700px) {
main > columns {
flex-direction: column-reverse;
}
main > columns left,
main > columns right {
display: block;
flex: 1 1 auto;
}
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main>
<columns>
<left>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
</left>
<right>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
</right>
</columns>
</main>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>

99
17-equal-height-holy-grail-layout-in-modern-css/sidebar.html
Unescape View File

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="description" content="Learn JavaScript the Hard Way">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<title>Holy Grail Starter</title>
<style>
:root {
--height-header: 80px;
--height-footer: 200px;
}
body {
margin: 0px;
padding: 0px;
}
footer {
display: flex;
background-color: hsl(0, 0%, 80%);
min-height: var(--height-footer);
}
header {
display: flex;
background-color: hsl(0, 0%, 80%);
height: var(--height-header);
}
main {
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--height-header) - var(--height-footer));
}
main > columns {
display: flex;
flex-direction: row;
flex: 1 1 auto;
}
main > columns left {
display: block;
flex: 0 1 300px;
background-color: hsl(0, 70%, 80%);
}
main > columns right {
display: block;
flex: 3 1 100%;
background-color: hsl(200, 70%, 80%);
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main>
<columns>
<left>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
</left>
<right>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
</right>
</columns>
</main>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>
Write Preview
Loading…
Cancel
Save