Initialize repository
This commit is contained in:
Michael Hartl
@@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
@@ -0,0 +1,2 @@
|
||||
I am a string about things. Some of those things are more important than others, so I
|
||||
will <strong>make them strong</strong> to stand out among less spectacular neighbors.
|
||||
@@ -0,0 +1,14 @@
|
||||
<p>
|
||||
William Shakespeare's <em>Sonnets</em> consists of 154 poems, each fourteen
|
||||
lines long (three
|
||||
<a href="https://en.wikipedia.org/wiki/Quatrain">quatrains</a>
|
||||
followed by a rhyming
|
||||
<a href="https://en.wikipedia.org/wiki/Couplet">couplet</a>).
|
||||
<strong>Sonnet 18</strong> is perhaps the most famous, and begins like this:
|
||||
</p>
|
||||
<blockquote>
|
||||
<p>
|
||||
Shall I compare thee to a summer's day?<br>
|
||||
Thou art more lovely and more temperate.
|
||||
</p>
|
||||
</blockquote>
|
||||
@@ -0,0 +1 @@
|
||||
https://<username>.github.io/<repo_name>
|
||||
@@ -0,0 +1 @@
|
||||
<p>Hello, world!</p>
|
||||
@@ -0,0 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Page Title</title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Page Title</title>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Page Title</title>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello, world!</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Page Title
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Who am I?</title>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
Jean Valjean
|
||||
55 Rue Plumet
|
||||
Amonate, VA 24601
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% include head.html %}
|
||||
<body>
|
||||
{% include header.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
.full-hero:after {
|
||||
border: 10px solid;
|
||||
border-color: #000 red purple blue;
|
||||
bottom: 2vh;
|
||||
content: "";
|
||||
height: 0;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 0);
|
||||
width: 0;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.full-hero:after {
|
||||
bottom: 2vh;
|
||||
border: 10px solid;
|
||||
border-color: #fff transparent transparent;
|
||||
content: "";
|
||||
height: 0;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 0);
|
||||
width: 0;
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
<div class="home-callout">
|
||||
<h1 class="callout-title">The Learn Enough Story</h1>
|
||||
<div class="callout-copy">
|
||||
<p>
|
||||
Learn Enough to Be Dangerous is a leader in the movement to teach the world
|
||||
<em>technical sophistication</em>, which includes both "hard skills" like
|
||||
coding, command lines, and version control, and "soft skills" like guessing
|
||||
keyboard shortcuts, Googling error messages, and knowing when to just
|
||||
reboot the darn thing.
|
||||
</p>
|
||||
<p>
|
||||
We believe there are <strong>at least a billion people</strong> who can
|
||||
benefit from learning technical sophistication, probably more. To join our
|
||||
movement, <a href="https://learnenough.com/#email_list">sign up for our
|
||||
official email list</a> now.
|
||||
</p>
|
||||
<h3>Background</h3>
|
||||
<p>
|
||||
Learn Enough to Be Dangerous is an outgrowth of the
|
||||
<a href="https://www.railstutorial.org/">Ruby on Rails Tutorial</a> and the
|
||||
<a href="https://www.softcover.io/">Softcover publishing platform</a>. This
|
||||
page is part of the sample site for <a
|
||||
href="https://learnenough.com/css-tutorial"><em>Learn Enough CSS and Layout
|
||||
to Be Dangerous</em></a>, which teaches the basicics of
|
||||
<strong>C</strong>ascading <strong>S</strong>tyle
|
||||
<strong>S</strong>heets, the language that
|
||||
allows web pages to be styled. Other related tutorials can be found at
|
||||
<a href="https://learnenough.com/">learnenough.com</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-section">
|
||||
<h2>THE FOUNDERS</h2>
|
||||
<p>
|
||||
Learn Enough to Be Dangerous was founded in 2015 by Michael Hartl, Lee
|
||||
Donahoe, and Nick Merwin. We believe that the kind of technical
|
||||
sophistication taught by the Learn Enough tutorials can benefit at least a
|
||||
billion people, and probably more.
|
||||
</p>
|
||||
|
||||
<div class="bio-wrapper">
|
||||
<div class="bio-box">
|
||||
<img src="https://placekitten.com/g/400/400">
|
||||
<h3>Michael Hartl</h3>
|
||||
<a href="https://twitter.com/mhartl" class="social-link">
|
||||
Tw
|
||||
</a>
|
||||
<div class="bio-copy">
|
||||
<p>
|
||||
Known for his dazzling charm, rapier wit, and unrivaled humility,
|
||||
Michael is the creator of the
|
||||
<a href="https://www.railstutorial.org/">Ruby on Rails
|
||||
Tutorial</a> and principal author of the
|
||||
<a href="https://learnenough.com/">
|
||||
Learn Enough to Be Dangerous</a> introductory sequence.
|
||||
</p>
|
||||
<p>
|
||||
Michael is also notorious as the founder of
|
||||
<a href="http://tauday.com/">Tau Day</a> and
|
||||
author of <a href="http://tauday.com/tau-manifesto"><em>The Tau
|
||||
Manifesto</em></a>, but rumors that he's secretly a supervillain are
|
||||
slightly exaggerated.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bio-box">
|
||||
<img src="https://placekitten.com/g/400/400">
|
||||
<h3>Lee Donahoe</h3>
|
||||
<a href="https://twitter.com/leedonahoe" class="social-link">
|
||||
Tw
|
||||
</a>
|
||||
<div class="bio-copy">
|
||||
<p>
|
||||
When he's not literally swimming with sharks or hunting powder stashes
|
||||
on his snowboard, you can find Lee in front of his computer designing
|
||||
interfaces, doing front-end development, or writing some of the
|
||||
interface-related Learn Enough tutorials.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bio-box">
|
||||
<img src="https://placekitten.com/g/400/400">
|
||||
<h3>Nick Merwin</h3>
|
||||
<a href="https://twitter.com/nickmerwin" class="social-link">
|
||||
Tw
|
||||
</a>
|
||||
<div class="bio-copy">
|
||||
<p>
|
||||
You may have seen him shredding guitar live with Capital Cities on
|
||||
Jimmy Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true
|
||||
nerd at heart. He's just as happy shredding well-spec'd lines of code
|
||||
from a tour bus as he is from his kitchen table.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
/* HOMEPAGE STYLES */
|
||||
.home-section {
|
||||
margin: 6rem auto;
|
||||
max-width: 980px;
|
||||
width: 90vw;
|
||||
}
|
||||
.home-section h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.home-callout {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
padding: 7vh 0;
|
||||
}
|
||||
.callout-title {
|
||||
font-size: 5.75vw;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.callout-copy {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.bio-box {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
font-size: 1rem;
|
||||
margin: 6rem 0 0;
|
||||
padding: 0 3%;
|
||||
width: 33%;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
.bio-box h3 {
|
||||
color: #fff;
|
||||
font-size: 1.5em;
|
||||
margin: -40px 0 1em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
.bio-box .social-link {
|
||||
display: block;
|
||||
margin: 2em auto 1em;
|
||||
}
|
||||
.bio-copy {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
/* GLOBAL STYLES */
|
||||
.
|
||||
.
|
||||
.
|
||||
h1 {
|
||||
font-size: 7vw;
|
||||
margin-top: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
a {
|
||||
color: #6397b5;
|
||||
}
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
I'm a 3 col page!
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="full-hero hero-home">
|
||||
<h1>I'm an h1</h1>
|
||||
<ul class="social-list">
|
||||
<li>
|
||||
<a href="https://example.com/" class="social-link">Fb</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://example.com/" class="social-link">Tw</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://example.com/" class="social-link">Gh</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="home-callout">
|
||||
<h1 class="callout-title">The Learn Enough Story</h1>
|
||||
<div class="callout-copy">
|
||||
<p>
|
||||
Learn Enough to Be Dangerous is a leader in the movement to teach the world
|
||||
<em>technical sophistication</em>, which includes both "hard skills" like
|
||||
coding, command lines, and version control, and "soft skills" like guessing
|
||||
keyboard shortcuts, Googling error messages, and knowing when to just
|
||||
reboot the darn thing.
|
||||
</p>
|
||||
<p>
|
||||
We believe there are <strong>at least a billion people</strong> who can
|
||||
benefit from learning technical sophistication, probably more. To join our
|
||||
movement, <a href="https://learnenough.com/#email_list">sign up for our
|
||||
official email list</a> now.
|
||||
</p>
|
||||
<h3>Background</h3>
|
||||
<p>
|
||||
Learn Enough to Be Dangerous is an outgrowth of the
|
||||
<a href="https://www.railstutorial.org/">Ruby on Rails Tutorial</a> and the
|
||||
<a href="https://www.softcover.io/">Softcover publishing platform</a>. This
|
||||
page is part of the sample site for <a
|
||||
href="https://learnenough.com/css-tutorial"><em>Learn Enough CSS and Layout
|
||||
to Be Dangerous</em></a>, which teaches the basicics of
|
||||
<strong>C</strong>ascading <strong>S</strong>tyle
|
||||
<strong>S</strong>heets, the language that
|
||||
allows web pages to be styled. Other related tutorials can be found at
|
||||
<a href="https://learnenough.com/">learnenough.com</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-section">
|
||||
<h2>THE FOUNDERS</h2>
|
||||
<p>
|
||||
Learn Enough to Be Dangerous was founded in 2015 by Michael Hartl, Lee
|
||||
Donahoe, and Nick Merwin. We believe that the kind of technical
|
||||
sophistication taught by the Learn Enough tutorials can benefit at least a
|
||||
billion people, and probably more.
|
||||
</p>
|
||||
|
||||
<div class="bio-wrapper">
|
||||
<div class="bio-box">
|
||||
<img src="https://placekitten.com/g/400/400">
|
||||
<h3>Michael Hartl</h3>
|
||||
<a href="https://twitter.com/mhartl" class="social-link">
|
||||
Tw
|
||||
</a>
|
||||
<div class="bio-copy">
|
||||
<p>
|
||||
Known for his dazzling charm, rapier wit, and unrivaled humility,
|
||||
Michael is the creator of the
|
||||
<a href="https://www.railstutorial.org/">Ruby on Rails
|
||||
Tutorial</a> and principal author of the
|
||||
<a href="https://learnenough.com/"> Learn Enough to Be Dangerous</a>
|
||||
introductory sequence.
|
||||
</p>
|
||||
<p>
|
||||
Michael is also notorious as the founder of
|
||||
<a href="http://tauday.com/">Tau Day</a> and author of
|
||||
<a href="http://tauday.com/tau-manifesto"><em>The Tau
|
||||
Manifesto</em></a>, but rumors that he's secretly a supervillain are
|
||||
slightly exaggerated.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bio-box">
|
||||
<img src="https://placekitten.com/g/400/400">
|
||||
<h3>Lee Donahoe</h3>
|
||||
<a href="https://twitter.com/leedonahoe" class="social-link">
|
||||
Tw
|
||||
</a>
|
||||
<div class="bio-copy">
|
||||
<p>
|
||||
When he's not literally swimming with sharks or hunting powder stashes
|
||||
on his snowboard, you can find Lee in front of his computer designing
|
||||
interfaces, doing front-end development, or writing some of the
|
||||
interface-related Learn Enough tutorials.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bio-box">
|
||||
<img src="https://placekitten.com/g/400/400">
|
||||
<h3>Nick Merwin</h3>
|
||||
<a href="https://twitter.com/nickmerwin" class="social-link">
|
||||
Tw
|
||||
</a>
|
||||
<div class="bio-copy">
|
||||
<p>
|
||||
You may have seen him shredding guitar live with Capital Cities on
|
||||
Jimmy Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true
|
||||
nerd at heart. He's just as happy shredding well-spec'd lines of code
|
||||
from a tour bus as he is from his kitchen table.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
/* HERO STYLES */
|
||||
.full-hero {
|
||||
background-color: #c7dbfc;
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
.hero-home {
|
||||
background-image: url(/images/shark.jpg);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.full-hero {
|
||||
background-color: #c7dbfc;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
.hero-home {
|
||||
background-image: url(/images/shark.jpg);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.full-hero {
|
||||
background-color: #c7dbfc;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
.hero-home {
|
||||
background-image: url(/images/shark.jpg);
|
||||
background-position: center top;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="full-hero hero-home">
|
||||
<div class="hero-content">
|
||||
<h1>CODE DANGEROUSLY</h1>
|
||||
<ul class="social-list">
|
||||
<li>
|
||||
<a href="https://example.com/" class="social-link">Fb</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://example.com/" class="social-link">Tw</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://example.com/" class="social-link">Gh</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
.hero-content {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
.hero-content h1 {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 7vw;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
.hero-content .social-link {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
color: #557c83;
|
||||
}
|
||||
.hero-content .social-link:hover {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/* HERO STYLES */
|
||||
.
|
||||
.
|
||||
.
|
||||
.hero-content h1:before {
|
||||
color: blue;
|
||||
content: "B";
|
||||
}
|
||||
.hero-content h1:after {
|
||||
color: red;
|
||||
content: "A";
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
/* HERO STYLES */
|
||||
.full-hero {
|
||||
background-color: #c7dbfc;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
height: 100vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
.full-hero:after {
|
||||
bottom: 2vh;
|
||||
color: #fff;
|
||||
content: "﹀";
|
||||
font-size: 36px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% include head.html %}
|
||||
<body>
|
||||
{% include header.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
padding-top: 10vh;
|
||||
width: 100%;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
/* COLUMN STYLES */
|
||||
|
||||
.col-three {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="gallery col-three">
|
||||
<div class="col col-nav gallery-thumbs" id="gallery-thumbs">
|
||||
<div class="current">
|
||||
<img src="/images/small/slide1.jpg" alt="Image title 1">
|
||||
</div>
|
||||
<div>
|
||||
<img src="/images/small/slide1.jpg" alt="Image title 2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-content">
|
||||
<div class="gallery-photo" id="gallery-photo">
|
||||
<img src="/images/large/slide1.jpg" alt="Image title 1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-aside gallery-info" id="gallery-info">
|
||||
<h3>Image Title 1</h3>
|
||||
<p>Image description 1</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
/* GALLERY STYLES */
|
||||
.gallery-thumbs {
|
||||
height: 90vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
.gallery-thumbs > div {
|
||||
cursor: pointer;
|
||||
}
|
||||
.gallery-thumbs img {
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 0 5px transparent;
|
||||
display: inline-block;
|
||||
margin: 0 0 10px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.5s ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
.gallery-thumbs img:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.gallery-thumbs .current img {
|
||||
box-shadow: 0 0 0 5px #ed6e2f;
|
||||
opacity: 1;
|
||||
}
|
||||
.gallery-photo {
|
||||
position: relative;
|
||||
}
|
||||
.gallery-photo img {
|
||||
width: 100%;
|
||||
}
|
||||
.gallery-info {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.gallery-info h3 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="home">
|
||||
<div class="full-hero hero-home">
|
||||
.
|
||||
.
|
||||
.
|
||||
</div>
|
||||
|
||||
<div class="home-callout">
|
||||
.
|
||||
.
|
||||
.
|
||||
</div>
|
||||
|
||||
<div class="home-section">
|
||||
.
|
||||
.
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% include head.html %}
|
||||
<body>
|
||||
{% include header.html %}
|
||||
|
||||
<div class="content-container">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: helvetica, arial, sans;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.content-container {
|
||||
flex-grow: 1;
|
||||
padding-top: 10vh;
|
||||
width: 100%;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
/* HERO STYLES */
|
||||
.
|
||||
.
|
||||
.
|
||||
.full-hero {
|
||||
background-color: #c7dbfc;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
height: 90vh;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/* GLOBAL STYLES */
|
||||
.
|
||||
.
|
||||
.
|
||||
p {
|
||||
line-height: 1.5;
|
||||
margin: 0.75em 0;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
/* HOMEPAGE STYLES */
|
||||
.
|
||||
.
|
||||
.
|
||||
.home-callout {
|
||||
align-items: center;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
padding: 7vh 0;
|
||||
}
|
||||
.home-callout h3 {
|
||||
color: inherit;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.callout-title {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
font-size: 5.75vw;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.callout-copy {
|
||||
flex-basis: 45em;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.8rem;
|
||||
padding: 0 3vw;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.content-container {
|
||||
flex: 1 1 auto;
|
||||
padding-top: 10vh;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.callout-title {
|
||||
flex: 1;
|
||||
font-size: 5.75vw;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.callout-copy {
|
||||
flex: 0 0 45em;
|
||||
font-size: 0.8rem;
|
||||
padding: 0 3vw;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
@@ -0,0 +1,4 @@
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/gallery">Gallery</a></li>
|
||||
<li><a href="">Nav 2</a></li>
|
||||
<li><a href="">Nav 3</a></li>
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="gallery col-three">
|
||||
<div class="col col-nav">
|
||||
I'm the nav
|
||||
</div>
|
||||
<div class="col col-content">
|
||||
I'm the 3col page!
|
||||
</div>
|
||||
<div class="col col-aside">
|
||||
I'm over on the right
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
/* COLUMN STYLES */
|
||||
.col-three {
|
||||
display: flex;
|
||||
}
|
||||
.col {
|
||||
box-sizing: border-box;
|
||||
padding: 2em;
|
||||
}
|
||||
.col-three .col ~ .col {
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.col-three .col-nav {
|
||||
flex: 0 1 15em;
|
||||
}
|
||||
.col-three .col-content {
|
||||
flex: 1;
|
||||
}
|
||||
.col-three .col-aside {
|
||||
flex: 0 1 20em;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
layout: post
|
||||
title: This is the title of the post
|
||||
postHero: /images/shark.jpg
|
||||
author: Me, Myself, and I
|
||||
authorTwitter: https://twitter.com/mhartl
|
||||
gravatar: https://gravatar.com/avatar/ffda7d145b83c4b118f982401f962ca6?s=150
|
||||
postFooter: Additional information, and maybe a <a href="#">link or two</a>
|
||||
---
|
||||
|
||||
Call me *Ishmael*. Some years ago–*never mind how long
|
||||
precisely*–having little or no money in my purse, and nothing
|
||||
particular to interest me on shore, I thought I would sail about a little
|
||||
and see the watery part of the world. It is a way I have of driving off
|
||||
the spleen and regulating the circulation.
|
||||
|
||||
<img class="pull-left" src="https://placekitten.com/g/400/200"
|
||||
alt="kitten">
|
||||
|
||||
Whenever I find myself growing grim about the mouth; whenever it is a damp,
|
||||
drizzly November in my soul; whenever I find myself involuntarily pausing
|
||||
before coffin warehouses, and bringing up the rear of every funeral I meet;
|
||||
and especially whenever my hypos get such an upper hand of me, that it
|
||||
requires a strong moral principle to prevent me from deliberately stepping
|
||||
into the street, and methodically knocking people’s hats off—then, I
|
||||
account it high time to get to sea as soon as I can. This is my substitute
|
||||
for pistol and ball.
|
||||
|
||||
With a philosophical flourish Cato throws himself upon
|
||||
his sword; I quietly take to the ship. There is nothing surprising in this.
|
||||
If they but knew it, almost all men in their degree, some time or other,
|
||||
cherish very nearly the same feelings towards the ocean with me.
|
||||
@@ -0,0 +1,9 @@
|
||||
/* HERO STYLES */
|
||||
.
|
||||
.
|
||||
.
|
||||
.half-hero {
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
height: 40vh;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/gallery">Gallery</a></li>
|
||||
<li><a href="/blog">Blog</a></li>
|
||||
<li><a href="{{ site.posts.first.url }}">Newest Post</a></li>
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="home-section">
|
||||
<h4>Most recent post</h4>
|
||||
<div class="blog-posts">
|
||||
<header class="post-header">
|
||||
<h2>
|
||||
<a href="{{ site.posts.first.url }}">
|
||||
{{ site.posts.first.title }}</a>
|
||||
</h2>
|
||||
<div class="post-byline">
|
||||
<img src="{{ site.posts.first.gravatar }}">
|
||||
<a href="{{ site.posts.first.authorTwitter }}"
|
||||
class="social-link">Tw</a>
|
||||
by: {{ site.posts.first.author }}
|
||||
<span> - {{ site.posts.first.date | date: '%B %d, %Y' }}</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="posts-image"
|
||||
style="background-image:url({{ site.posts.first.postHero }})"></div>
|
||||
{{ site.posts.first.excerpt }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-section">
|
||||
<h2>THE FOUNDERS</h2>
|
||||
.
|
||||
.
|
||||
.
|
||||
@@ -0,0 +1,15 @@
|
||||
.home-section h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.home-section h4 {
|
||||
margin-bottom: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
.home-section .post-header {
|
||||
text-align: center;
|
||||
}
|
||||
.home-section .blog-posts {
|
||||
margin: auto;
|
||||
width: 75%;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="page blog-index">
|
||||
<h1>Bloggie Blog</h1>
|
||||
<div class="col-two blog-cols">
|
||||
<div class="col col-aside blog-recent">
|
||||
<h4>Recent Posts</h4>
|
||||
<ul class="blog-title-list">
|
||||
<li>
|
||||
<a href="">Blog post title</a>
|
||||
<span>Posted: Month Day, Year</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col col-content blog-previews">
|
||||
<div class="blog-posts">
|
||||
<header class="post-header">
|
||||
<h2><a href="">I am the title of an article</a></h2>
|
||||
<div class="post-byline">
|
||||
<img src="https://gravatar.com/avatar/ffda7d145b83c4b118f982401f962ca6?s=150">
|
||||
<a href="#" class="social-link">Tw</a>
|
||||
by: Me, Myself, and I
|
||||
<span> - Month Day, year</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="posts-image" style="background-image:url('/images/shark.jpg')">
|
||||
</div>
|
||||
<p>
|
||||
Blurb
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/gallery">Gallery</a></li>
|
||||
<li><a href="/blog">Blog</a></li>
|
||||
<li><a href="">Nav 3</a></li>
|
||||
@@ -0,0 +1,86 @@
|
||||
h4 {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* COLUMN STYLES */
|
||||
.
|
||||
.
|
||||
.
|
||||
.col-two {
|
||||
display: flex;
|
||||
}
|
||||
.col-two .col-aside {
|
||||
flex: 0 0 20em;
|
||||
order: 1;
|
||||
}
|
||||
.col-two .col-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* PAGE STYLES */
|
||||
.page {
|
||||
margin: 10vh auto 15vh;
|
||||
max-width: 980px;
|
||||
width: 85vw;
|
||||
}
|
||||
.page h1 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
.page h2 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.page h4 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
/* BLOG STYLES */
|
||||
.blog-recent {
|
||||
text-align: right;
|
||||
}
|
||||
.blog-title-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.blog-title-list li ~ li {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.blog-title-list span {
|
||||
color: #999;
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
font-style: italic;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.blog-posts ~ .blog-posts {
|
||||
border-top: 1px dotted rgba(0, 0, 0, 0.1);
|
||||
margin-top: 4em;
|
||||
padding-top: 4em;
|
||||
}
|
||||
.blog-posts .post-header {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.post-header {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.post-header img,
|
||||
.post-header .social-link {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.post-header img {
|
||||
border-radius: 99px;
|
||||
display: inline-block;
|
||||
height: 2.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.posts-image {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 6em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="page blog-index">
|
||||
<h1>Bloggie Blog</h1>
|
||||
<div class="col-two blog-cols">
|
||||
<div class="col col-aside blog-recent">
|
||||
<h4>Recent Posts</h4>
|
||||
<ul class="blog-title-list">
|
||||
<li>
|
||||
<a href="">Blog post title</a>
|
||||
<span>Posted: Month Day, Year</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col col-content blog-previews">
|
||||
{% for post in site.posts %}
|
||||
<div class="blog-posts">
|
||||
<header class="post-header">
|
||||
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
|
||||
<div class="post-byline">
|
||||
<img src="{{ post.gravatar }}" />
|
||||
<a href="{{ post.authorTwitter }}" class="social-link">Tw</a>
|
||||
by: {{ post.author }}
|
||||
<span> - {{ post.date | date: '%B %d, %Y' }}</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="posts-image"
|
||||
style="background-image:url({{ post.postHero }})"></div>
|
||||
{{ post.excerpt }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="page blog-index">
|
||||
<h1>Bloggie Blog</h1>
|
||||
<div class="col-two blog-cols">
|
||||
<div class="col col-aside blog-recent">
|
||||
<h4>Recent Posts</h4>
|
||||
<ul class="blog-title-list">
|
||||
{% for post in site.posts limit:5 %}
|
||||
<li>
|
||||
<a href="{{ post.url }}">{{ post.title }}</a>
|
||||
<span>Posted: {{ post.date | date: '%B %d, %Y' }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col col-content blog-previews">
|
||||
{% for post in site.posts %}
|
||||
<div class="blog-posts">
|
||||
<header class="post-header">
|
||||
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
|
||||
<div class="post-byline">
|
||||
<img src="{{ post.gravatar }}" />
|
||||
<a href="{{ post.authorTwitter }}" class="social-link">Tw</a>
|
||||
by: {{ post.author }}
|
||||
<span> - {{ post.date | date: '%B %d, %Y' }}</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="posts-image"
|
||||
style="background-image:url({{ post.postHero }})"></div>
|
||||
{{ post.excerpt }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="post">
|
||||
<div class="half-hero" style="background-image:url({{ page.postHero }})"></div>
|
||||
|
||||
<article class="page">
|
||||
<header class="post-header">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<div class="post-byline">
|
||||
<img src="{{ page.gravatar }}">
|
||||
<a href="{{ page.authorTwitter }}" class="social-link">Tw</a>
|
||||
by: {{ page.author }}
|
||||
<span> - {{ page.date | date: '%B %d, %Y' }}</span>
|
||||
</div>
|
||||
</header>
|
||||
<aside class="post-aside">
|
||||
<h4>Recent Posts</h4>
|
||||
<ul class="blog-title-list">
|
||||
{% for post in site.posts limit:5 %}
|
||||
<li>
|
||||
<a href="{{ post.url }}">{{ post.title }}</a>
|
||||
<span>Posted: {{ post.date | date: '%B %d, %Y' }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</aside>
|
||||
<div class="post-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
<footer class="post-footer">
|
||||
{{ page.postFooter }}
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
@@ -0,0 +1,41 @@
|
||||
/* BLOG STYLES*/
|
||||
.
|
||||
.
|
||||
.
|
||||
.post {
|
||||
width: 100%;
|
||||
}
|
||||
.post-content,
|
||||
.post-footer {
|
||||
margin: auto;
|
||||
max-width: 40em;
|
||||
width: 85vw;
|
||||
}
|
||||
.pull-left {
|
||||
float: left;
|
||||
margin: 2em 2em 2em -2%;
|
||||
}
|
||||
.pull-right {
|
||||
float: right;
|
||||
margin: 2em -2% 2em 2em;
|
||||
}
|
||||
.post-aside {
|
||||
background-color: rgba(0, 0, 0, 0.01);
|
||||
float: right;
|
||||
margin: 0 0 2em 2em;
|
||||
padding: 2em;
|
||||
}
|
||||
.post .post-header {
|
||||
margin-bottom: 2.5em;
|
||||
text-align: center;
|
||||
}
|
||||
.post-content {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.post-footer {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
margin-top: 3em;
|
||||
padding-top: 2em;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
@media (max-width: 800px) {
|
||||
html {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
.post-aside {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.header-nav a,
|
||||
.drop-trigger {
|
||||
color: #fff;
|
||||
}
|
||||
.nav-links a,
|
||||
.drop-trigger {
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/* DROPDOWN STYLES */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown:hover .drop-menu {
|
||||
display: block;
|
||||
}
|
||||
.drop-trigger {
|
||||
display: inline-block;
|
||||
padding-right: 1.5em;
|
||||
position: relative;
|
||||
}
|
||||
.drop-trigger:after {
|
||||
border: 0.3em solid;
|
||||
border-color: #fff transparent transparent;
|
||||
content: "";
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0.3em;
|
||||
width: 0;
|
||||
}
|
||||
.drop-menu {
|
||||
display: none;
|
||||
list-style: none;
|
||||
padding: 1em 0 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
.drop-menu li {
|
||||
background-color: #fff;
|
||||
}
|
||||
.drop-menu a {
|
||||
color: #333;
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/* DROPDOWN STYLES */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown:hover .drop-menu {
|
||||
display: block;
|
||||
}
|
||||
.dropdown:hover .drop-trigger:after {
|
||||
border-color: #ed6e2f transparent transparent;
|
||||
}
|
||||
.drop-trigger {
|
||||
display: inline-block;
|
||||
padding-right: 1.5em;
|
||||
position: relative;
|
||||
}
|
||||
.drop-trigger:after {
|
||||
border: 0.3em solid;
|
||||
border-color: #fff transparent transparent;
|
||||
content: "";
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0.3em;
|
||||
width: 0;
|
||||
}
|
||||
.drop-menu {
|
||||
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
|
||||
display: none;
|
||||
list-style: none;
|
||||
padding: 1em 0 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
.drop-menu:before {
|
||||
border: 0.6em solid;
|
||||
border-color: transparent transparent #fff;
|
||||
content: "";
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: -0.1em;
|
||||
width: 0;
|
||||
}
|
||||
.drop-menu li {
|
||||
background-color: #fff;
|
||||
}
|
||||
.drop-menu li ~ li {
|
||||
border-top: 1px dotted rgba(0,0,0,0.1)
|
||||
}
|
||||
.drop-menu li:first-child {
|
||||
border-radius: 5px 5px 0 0;
|
||||
color: #999;
|
||||
font-size: 0.5em;
|
||||
padding: 1em 1em 0.25em;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.drop-menu li:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
.drop-menu a {
|
||||
color: #333;
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
padding: 0.5em 2em 0.5em 1em;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.drop-menu a:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
color: #333;
|
||||
}
|
||||
/* HIDE IN THE FOOTER */
|
||||
.footer .dropdown:hover .drop-menu,
|
||||
.footer .drop-trigger:after {
|
||||
display: none;
|
||||
}
|
||||
.footer .drop-trigger {
|
||||
padding-right: 0;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/gallery">Gallery</a></li>
|
||||
<li class="dropdown">
|
||||
<span class="drop-trigger">Blog</span>
|
||||
<ul class="drop-menu">
|
||||
<li>Recent Posts</li>
|
||||
{% for post in site.posts limit:5 %}
|
||||
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="{{ site.posts.first.url }}">Newest Post</a></li>
|
||||
@@ -0,0 +1,12 @@
|
||||
<header class="header">
|
||||
<nav>
|
||||
<input type="checkbox" id="mobile-menu" class="mobile-menu-check">
|
||||
<label class="show-mobile-menu">Menu</label>
|
||||
<ul class="header-nav nav-links">
|
||||
{% include nav-links.html %}
|
||||
</ul>
|
||||
</nav>
|
||||
<a href="/" class="header-logo">
|
||||
<img src="/images/logo.png" alt="Learn Enough">
|
||||
</a>
|
||||
</header>
|
||||
@@ -0,0 +1,12 @@
|
||||
<header class="header">
|
||||
<nav>
|
||||
<input type="checkbox" id="mobile-menu" class="mobile-menu-check">
|
||||
<label for="mobile-menu" class="show-mobile-menu">Menu</label>
|
||||
<ul class="header-nav nav-links">
|
||||
{% include nav-links.html %}
|
||||
</ul>
|
||||
</nav>
|
||||
<a href="/" class="header-logo">
|
||||
<img src="/images/logo.png" alt="Learn Enough">
|
||||
</a>
|
||||
</header>
|
||||
@@ -0,0 +1,14 @@
|
||||
@media (max-width: 800px) {
|
||||
.
|
||||
.
|
||||
.
|
||||
/* HEADER STYLES */
|
||||
.
|
||||
.
|
||||
.
|
||||
/* MOBILE MENU */
|
||||
.mobile-menu-check,
|
||||
.show-mobile-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@media (max-width: 800px) {
|
||||
.
|
||||
.
|
||||
.
|
||||
/* HEADER STYLES */
|
||||
.
|
||||
.
|
||||
.
|
||||
/* MOBILE MENU */
|
||||
.show-mobile-menu {
|
||||
display: block;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin-top: 1.5vh;
|
||||
padding: 1.5em;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.header-nav {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.mobile-menu-check:checked ~ .header-nav {
|
||||
max-height: 1000px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
.nav-links a,
|
||||
.drop-trigger,
|
||||
.show-mobile-menu {
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
@media (max-width: 800px) {
|
||||
.
|
||||
.
|
||||
.
|
||||
/* MOBILE MENU */
|
||||
.show-mobile-menu {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-top: 1.5vh
|
||||
padding: 1.5em;
|
||||
position: relative;
|
||||
}
|
||||
.header-nav {
|
||||
background-color: #444;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 10vh;
|
||||
transition: all 0.5s ease-in-out;
|
||||
width: 100vw;
|
||||
z-index: 9;
|
||||
}
|
||||
.header-nav li {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.header-nav li ~ li {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.header-nav li:last-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.header-nav li:first-child a {
|
||||
color: #fff;
|
||||
}
|
||||
/* HIDE DROPDOWN IN THE NAV MENU */
|
||||
.header-nav .dropdown:hover .drop-menu,
|
||||
.header-nav .drop-trigger:after {
|
||||
display: none;
|
||||
}
|
||||
.header-nav .drop-trigger {
|
||||
padding-right: 0;
|
||||
}
|
||||
.mobile-menu-check:checked ~ .header-nav {
|
||||
max-height: 1000px;
|
||||
}
|
||||
.mobile-menu-check:checked ~ .show-mobile-menu:after {
|
||||
background-color: #000;
|
||||
color: #ed6e2f;
|
||||
content: "CLOSE";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 1.5em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@media (max-width: 800px) {
|
||||
html {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* HEADER STYLES */
|
||||
.header-nav {
|
||||
padding: 2vh 1em 0 0;
|
||||
}
|
||||
.header-nav > li {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
.header-nav > li ~ li {
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
.nav-links a {
|
||||
font-size: 3.25vw;
|
||||
}
|
||||
.header-logo {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/* BLOG STYLES */
|
||||
.post-aside {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@media (max-width: 800px) {
|
||||
.
|
||||
.
|
||||
.
|
||||
/* HOME STYLES */
|
||||
.home-callout {
|
||||
flex-direction: column;
|
||||
}
|
||||
.callout-copy {
|
||||
flex: 1;
|
||||
}
|
||||
.bio-box {
|
||||
float: none;
|
||||
font-size: 1.3rem;
|
||||
width: auto;
|
||||
}
|
||||
/* BLOG STYLES */
|
||||
.
|
||||
.
|
||||
.
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
@media (max-width: 800px) {
|
||||
.
|
||||
.
|
||||
.
|
||||
/* GALLERY STYLES */
|
||||
.gallery {
|
||||
flex-direction: column;
|
||||
}
|
||||
.gallery .col {
|
||||
padding: 1em;
|
||||
}
|
||||
.gallery .gallery-thumbs {
|
||||
flex: 1;
|
||||
height: auto;
|
||||
white-space: nowrap;
|
||||
width: 100vw;
|
||||
}
|
||||
.gallery-thumbs > div {
|
||||
display: inline-block;
|
||||
}
|
||||
.gallery-thumbs img {
|
||||
height: 7vh;
|
||||
margin: 0 10px 0 0;
|
||||
width: auto;
|
||||
}
|
||||
.gallery .gallery-info {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@media (max-width: 800px) {
|
||||
.
|
||||
.
|
||||
.
|
||||
/* BLOG STYLES */
|
||||
.blog-recent {
|
||||
display: none;
|
||||
}
|
||||
.blog-previews {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
$ git add -A
|
||||
$ git commit -m "Finish mobile prototype"
|
||||
$ git push
|
||||
@@ -0,0 +1 @@
|
||||
https://<username>.github.io/blog
|
||||
@@ -0,0 +1,6 @@
|
||||
<head>
|
||||
<title>Test Page: Don't panic</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
</head>
|
||||
@@ -0,0 +1,12 @@
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/gallery">Gallery</a></li>
|
||||
<li class="dropdown">
|
||||
<a class="drop-trigger" href="/blog">Blog</a>
|
||||
<ul class="drop-menu">
|
||||
<li>Recent Posts</li>
|
||||
{% for post in site.posts limit:5 %}
|
||||
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="{{ site.posts.first.url }}">Newest Post</a></li>
|
||||
@@ -0,0 +1,8 @@
|
||||
<head>
|
||||
<title>Test Page: Don't panic</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet"
|
||||
href="/fonts/fontawesome-free-5.12.0-web/css/all.min.css">
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
</head>
|
||||
@@ -0,0 +1,20 @@
|
||||
<head>
|
||||
{% if page.title %}
|
||||
<title>{{ page.title }} | Test Page</title>
|
||||
{% else %}
|
||||
<title>Test Page: Don't Panic</title>
|
||||
{% endif %}
|
||||
{% if page.description %}
|
||||
<meta name="description" content="{{ page.description }}">
|
||||
{% else %}
|
||||
<meta name="description" content="This is a dangerous site.">
|
||||
{% endif %}
|
||||
<link href="/favicon.png" rel="icon">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:100"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet"
|
||||
href="/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
</head>
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
title: Dangerous Blog
|
||||
description: A dangerous site deserves a dangerous blog.
|
||||
---
|
||||
@@ -0,0 +1,22 @@
|
||||
<div class="full-hero hero-home">
|
||||
<div class="hero-content">
|
||||
<h1>CODE DANGEROUSLY</h1>
|
||||
<ul class="social-list">
|
||||
<li>
|
||||
<a href="https://facebook.com/learnenough" class="social-link">
|
||||
<i class="fab fa-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/learnenough" class="social-link">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/learnenough" class="social-link">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
.social-link {
|
||||
background: rgba(150,150,150,0.5);
|
||||
border-radius: 99px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-family: helvetica, arial, sans;
|
||||
font-size: 1.7em;
|
||||
font-weight: bold;
|
||||
height: 1.5em;
|
||||
line-height: 1;
|
||||
padding-top: 0.25em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
width: 1.5em;
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&
|
||||
family=Raleway:wght@100&display=swap" rel="stylesheet">
|
||||
@@ -0,0 +1,10 @@
|
||||
<head>
|
||||
<title>Test Page: Don't panic</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&
|
||||
family=Raleway:wght@100&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet"
|
||||
href="/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
</head>
|
||||
@@ -0,0 +1,13 @@
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: 'Open Sans', helvetica, arial, sans;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: 'Raleway', helvetica, sans;
|
||||
font-weight: 100;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<head>
|
||||
<title>Test Page: Don't panic</title>
|
||||
<link href="/favicon.png" rel="icon">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&
|
||||
family=Raleway:wght@100&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet"
|
||||
href="/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
</head>
|
||||
@@ -0,0 +1,15 @@
|
||||
<head>
|
||||
{% if page.title %}
|
||||
<title>{{ page.title }} | Test Page</title>
|
||||
{% else %}
|
||||
<title>Test Page: Don't Panic</title>
|
||||
{% endif %}
|
||||
<link href="/favicon.png" rel="icon">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:100"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet"
|
||||
href="/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
</head>
|
||||
@@ -0,0 +1,4 @@
|
||||
---
|
||||
layout: default
|
||||
title: Dangerous Blog
|
||||
---
|
||||
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid">
|
||||
<div>
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
8
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
.
|
||||
.
|
||||
.
|
||||
.grid-feature {
|
||||
grid-column: span 2;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.grid-container > div {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.grid-header {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.grid-menu {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
.grid-content {
|
||||
|
||||
}
|
||||
.grid-panel {
|
||||
background-color: #eee;
|
||||
}
|
||||
.grid-footer {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
|
||||
grid-auto-rows: minmax(10em,1fr);
|
||||
grid-gap: 1em;
|
||||
}
|
||||
.grid > div {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.grid-feature {
|
||||
grid-column: span 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid-container">
|
||||
<header class="grid-header">
|
||||
I am a Header
|
||||
</header>
|
||||
<nav class="grid-menu">
|
||||
I am a Menu
|
||||
</nav>
|
||||
<article class="grid-content">
|
||||
I am Content
|
||||
</article>
|
||||
<aside class="grid-panel">
|
||||
I am Info
|
||||
</aside>
|
||||
<footer class="grid-footer">
|
||||
I am a Footer
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!--
|
||||
<div class="grid">
|
||||
<div>
|
||||
<h2>Big news today</h2>
|
||||
Quick sync win-win-win or workflow ecosystem.
|
||||
</div>
|
||||
<div class="grid-feature">
|
||||
<h2>We are really excited to announce that we will soon have an exciting
|
||||
announcement!</h2>
|
||||
We're ahead of the curve on that one we just need to put these last issues
|
||||
to bed where do we stand on the latest client ask.
|
||||
</div>
|
||||
<div>
|
||||
<h2>Currying favor performance review bench mark</h2>
|
||||
No need to talk to users, just base it on the space calculator lift and
|
||||
shift.
|
||||
</div>
|
||||
<div>
|
||||
<h2>Level the playing field</h2>
|
||||
Take five, punch the tree, and come back in here with a clear head. We need
|
||||
to follow protocol obviously, rock Star/Ninja encourage & support business
|
||||
growth yet curate.
|
||||
</div>
|
||||
<div>
|
||||
<h2>Usability closing these latest prospects </h2>
|
||||
Customer centric where do we stand on the latest client ask back of the net
|
||||
4-blocker fast track make it look like digital, like putting socks on an
|
||||
octopus.
|
||||
</div>
|
||||
<div>
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
8
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
@@ -0,0 +1,15 @@
|
||||
.
|
||||
.
|
||||
.
|
||||
.grid-menu {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
.grid-content {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.grid-panel {
|
||||
background-color: #eee;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
@@ -0,0 +1,16 @@
|
||||
.
|
||||
.
|
||||
.
|
||||
.grid-menu {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
.grid-content {
|
||||
grid-column: 2 / 4;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
.grid-panel {
|
||||
background-color: #eee;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
@@ -0,0 +1,12 @@
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 10em 1fr 15em;
|
||||
grid-template-rows: auto 1fr minmax(10em, auto);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
.grid-content {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-areas: "header header header" "menu content panel"
|
||||
"footer footer footer";
|
||||
grid-template-columns: 10em 1fr 15em;
|
||||
grid-template-rows: minmax(4em, auto) 1fr auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.grid-header {
|
||||
background-color: #ccc;
|
||||
grid-area: header;
|
||||
}
|
||||
.grid-menu {
|
||||
background-color: #c0c0c0;
|
||||
grid-area: menu;
|
||||
}
|
||||
.grid-content {
|
||||
grid-area: content;
|
||||
}
|
||||
.grid-panel {
|
||||
background-color: #eee;
|
||||
grid-area: panel;
|
||||
}
|
||||
.grid-footer {
|
||||
background-color: #ddd;
|
||||
grid-area: footer;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.grid-footer {
|
||||
background-color: #ddd;
|
||||
grid-area: footer;
|
||||
}
|
||||
.grid-expand {
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
|
||||
grid-column: content;
|
||||
grid-row: header-start / footer-end;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.grid-expand {
|
||||
.
|
||||
.
|
||||
.
|
||||
}
|
||||
.grid-banner {
|
||||
align-self: start;
|
||||
background-color: rgba(168,214,247,0.9);
|
||||
grid-column: content-start / panel-end;
|
||||
grid-row-start: content-start;
|
||||
padding: 1em;
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.
|
||||
.
|
||||
.
|
||||
<nav class="grid-menu">
|
||||
I am a Menu
|
||||
</nav>
|
||||
<article class="grid-content">
|
||||
I am Content
|
||||
</article>
|
||||
<aside class="grid-panel">
|
||||
I am Info
|
||||
</aside>
|
||||
<footer class="grid-footer">
|
||||
I am a Footer
|
||||
</footer>
|
||||
<div class="grid-banner">
|
||||
I am a banner
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
.
|
||||
.
|
||||
.
|
||||
.grid-header {
|
||||
background-color: #ccc;
|
||||
grid-area: header;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
.grid-menu {
|
||||
background-color: #c0c0c0;
|
||||
grid-area: menu;
|
||||
padding: 1em;
|
||||
}
|
||||
.grid-menu ul,
|
||||
.grid-panel ul,
|
||||
.grid-footer ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.grid-content {
|
||||
grid-area: content;
|
||||
padding: 3em 3em 4em;
|
||||
}
|
||||
.grid-panel {
|
||||
border-left: 1px solid rgba(0,0,0,0.1);
|
||||
grid-area: panel;
|
||||
padding: 4em 2em 4em 3em;
|
||||
}
|
||||
.grid-footer {
|
||||
background-color: #ddd;
|
||||
grid-area: footer;
|
||||
padding: 4em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
.grid-footer li {
|
||||
display: inline-block;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
.grid-banner {
|
||||
align-self: start;
|
||||
background-color: rgba(168,214,247,0.9);
|
||||
grid-column: content-start / panel-end;
|
||||
grid-row-start: content-start;
|
||||
padding: 1em;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.
|
||||
.
|
||||
.
|
||||
@@ -0,0 +1,134 @@
|
||||
.
|
||||
.
|
||||
.
|
||||
<nav class="grid-menu">
|
||||
I am a Menu
|
||||
<!-- from here -->
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">
|
||||
Menu item
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
Menu item
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
Menu item
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- to here -->
|
||||
</nav>
|
||||
<article class="grid-content">
|
||||
<!-- from here -->
|
||||
<h1>
|
||||
I am Content
|
||||
</h1>
|
||||
<div class="grid">
|
||||
<div>
|
||||
<h2>Big news today</h2>
|
||||
Quick sync win-win-win or workflow ecosystem.
|
||||
</div>
|
||||
<div class="grid-feature">
|
||||
<h2>We are really excited to announce that we will soon have an exciting
|
||||
announcement!</h2>
|
||||
We're ahead of the curve on that one we just need to put these last
|
||||
issues to bed where do we stand on the latest client ask.
|
||||
</div>
|
||||
<div>
|
||||
<h2>Currying favor performance review bench mark</h2>
|
||||
No need to talk to users, just base it on the space calculator lift and
|
||||
shift.
|
||||
</div>
|
||||
<div>
|
||||
<h2>Level the playing field</h2>
|
||||
Take five, punch the tree, and come back in here with a clear head. We
|
||||
need to follow protocol obviously, rock Star/Ninja encourage & support
|
||||
business growth yet curate.
|
||||
</div>
|
||||
<div>
|
||||
<h2>Usability closing these latest prospects </h2>
|
||||
Customer centric where do we stand on the latest client ask back of the
|
||||
net 4-blocker fast track make it look like digital, like putting socks
|
||||
on an octopus.
|
||||
</div>
|
||||
<div>
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
8
|
||||
</div>
|
||||
</div>
|
||||
<!-- to here -->
|
||||
</article>
|
||||
<aside class="grid-panel">
|
||||
I am Info
|
||||
<!-- from here -->
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">
|
||||
Panel link
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
Panel link
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
Panel link
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Call me Ishmael. Some years ago–never mind how long
|
||||
precisely–having little or no money in my purse, and nothing
|
||||
particular to interest me on shore, I thought I would sail about a
|
||||
little and see the watery part of the world. It is a way I have of
|
||||
driving off the spleen and regulating the circulation.
|
||||
</p>
|
||||
<!-- to here -->
|
||||
</aside>
|
||||
<footer class="grid-footer">
|
||||
I am a Footer
|
||||
<!-- from here -->
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">
|
||||
Footer link
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
Footer link
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- to here -->
|
||||
</footer>
|
||||
.
|
||||
.
|
||||
.
|
||||
@@ -0,0 +1,18 @@
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-areas: "header header header" "menu banner banner"
|
||||
"menu content panel" "footer footer footer";
|
||||
grid-template-columns: 10em 1fr 15em;
|
||||
grid-template-rows: minmax(4em, auto) auto 1fr auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.grid-banner {
|
||||
align-self: start;
|
||||
background-color: rgba(168,214,247,0.9);
|
||||
grid-area: banner;
|
||||
/* grid-column: content-start / panel-end; */
|
||||
/* grid-row-start: content-start; */
|
||||
padding: 1em;
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
}
|
||||
.menulist {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.landing_cta {
|
||||
margin-top: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
.header {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
.hero {
|
||||
background-color: #a8d6f7;
|
||||
min-height: 50vh;
|
||||
text-align: center;
|
||||
}
|
||||
.options {
|
||||
background-color: #4a7696;
|
||||
color: #fff;
|
||||
padding: 4em 0;
|
||||
}
|
||||
.options_item-img {
|
||||
width: 100%;
|
||||
}
|
||||
.info {
|
||||
padding: 8em 0;
|
||||
}
|
||||
.feature {
|
||||
min-height: 70vh;
|
||||
}
|
||||
.footer {
|
||||
background-color: #ddd;
|
||||
padding: 4em 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="header_content">
|
||||
I am a Header
|
||||
</div>
|
||||
</header>
|
||||
<section class="hero">
|
||||
<h1 class="hero_title">
|
||||
I am an Important Message
|
||||
</h1>
|
||||
<div class="hero_content">
|
||||
And I am a less important, but still a very important
|
||||
thing to consider.
|
||||
</div>
|
||||
</section>
|
||||
<section class="options">
|
||||
<h2 class="options_title">
|
||||
Here are Some Choices
|
||||
</h2>
|
||||
<div class="options_content">
|
||||
<div>
|
||||
Stuff
|
||||
</div>
|
||||
<div>
|
||||
Different Stuff
|
||||
</div>
|
||||
<div>
|
||||
All the Stuff
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="info">
|
||||
<h2 class="info_title">
|
||||
I am Some More info
|
||||
</h2>
|
||||
<div class="subtitle">
|
||||
Say you are in the country.
|
||||
</div>
|
||||
<div class="info_content">
|
||||
<p>
|
||||
In some high land of lakes. Take almost any path you
|
||||
please, and ten to one it carries you down in a dale,
|
||||
and leaves you there by a pool in the stream. There
|
||||
is magic in it. But here is an artist. He desires to
|
||||
paint you the dreamiest, shadiest, quietest, most
|
||||
enchanting bit of romantic landscape in all the
|
||||
valley of the Saco.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="feature">
|
||||
<div class="feature_img"></div>
|
||||
<div class="feature_content feature_content-1">
|
||||
Let the most absent-minded of men be plunged in his
|
||||
deepest reveries—stand that man on his legs, set his
|
||||
feet a-going, and he will infallibly lead you to water,
|
||||
if water there be in all that region.
|
||||
</div>
|
||||
<div class="feature_content feature_content-2">
|
||||
Take almost any path you please, and ten to one it
|
||||
carries you down in a dale, and leaves you there by a
|
||||
pool in the stream. There is magic in it.
|
||||
</div>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<h3 class="footer_title">
|
||||
I am a Footer
|
||||
</h3>
|
||||
<ul class="menulist footer_menu-first">
|
||||
<li>
|
||||
Products
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menulist">
|
||||
<li>
|
||||
About
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menulist">
|
||||
<li>
|
||||
Links
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menulist">
|
||||
<li>
|
||||
Account
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
.landing_cta {
|
||||
margin-top: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid {
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(2em,1fr) repeat(6,minmax(auto,10em))
|
||||
minmax(2em,1fr);
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
}
|
||||
.menulist {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.landing_cta {
|
||||
margin-top: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: #a8d6f7;
|
||||
min-height: 50vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.options {
|
||||
background-color: #4a7696;
|
||||
color: #fff;
|
||||
padding: 4em 0;
|
||||
}
|
||||
.options_item-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 8em 0;
|
||||
}
|
||||
|
||||
.feature {
|
||||
min-height: 70vh;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #ddd;
|
||||
padding: 4em 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="header_content">
|
||||
I am a Header
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<h1 class="hero_title">
|
||||
I am an Important Message
|
||||
</h1>
|
||||
<div class="hero_content">
|
||||
And I am a less important, but still a very important
|
||||
thing to consider.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="options">
|
||||
<h2 class="options_title">
|
||||
Here are Some Choices
|
||||
</h2>
|
||||
<div class="options_content">
|
||||
<div>
|
||||
Stuff
|
||||
</div>
|
||||
<div>
|
||||
Different Stuff
|
||||
</div>
|
||||
<div>
|
||||
All the Stuff
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="info">
|
||||
<h2 class="info_title">
|
||||
I am Some More info
|
||||
</h2>
|
||||
<div class="subtitle">
|
||||
Say you are in the country.
|
||||
</div>
|
||||
<div class="info_content">
|
||||
<p>
|
||||
In some high land of lakes. Take almost any path you
|
||||
please, and ten to one it carries you down in a dale,
|
||||
and leaves you there by a pool in the stream. There
|
||||
is magic in it. But here is an artist. He desires to
|
||||
paint you the dreamiest, shadiest, quietest, most
|
||||
enchanting bit of romantic landscape in all the
|
||||
valley of the Saco.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="feature">
|
||||
<div class="feature_img"></div>
|
||||
<div class="feature_content feature_content-1">
|
||||
Let the most absent-minded of men be plunged in his
|
||||
deepest reveries—stand that man on his legs, set his
|
||||
feet a-going, and he will infallibly lead you to water,
|
||||
if water there be in all that region.
|
||||
</div>
|
||||
<div class="feature_content feature_content-2">
|
||||
Take almost any path you please, and ten to one it
|
||||
carries you down in a dale, and leaves you there by a
|
||||
pool in the stream. There is magic in it.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<h3 class="footer_title">
|
||||
I am a Footer
|
||||
</h3>
|
||||
<ul class="menulist footer_menu-first">
|
||||
<li>
|
||||
Products
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menulist">
|
||||
<li>
|
||||
About
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menulist">
|
||||
<li>
|
||||
Links
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menulist">
|
||||
<li>
|
||||
Account
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Footer link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
.landing_cta {
|
||||
margin-top: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid {
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(2em,1fr) repeat(6,minmax(auto,10em))
|
||||
minmax(2em,1fr);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user