diff options
| author | Mark Powers <markppowers0@gmail.com> | 2019-01-26 21:07:03 -0500 |
|---|---|---|
| committer | Mark Powers <markppowers0@gmail.com> | 2019-01-26 21:07:03 -0500 |
| commit | 6825b445ad975d603b4c212aed85f86559642e0f (patch) | |
| tree | 58ae35f58fd7636c2ac2b6a470f80943c4985643 | |
| parent | edc7c8a3abacd7bc5aee50ffda3697333f91905a (diff) | |
Add flexbox styling to bread.html
| -rw-r--r-- | src/css/styles.css | 31 | ||||
| -rw-r--r-- | src/html/bread.html | 97 |
2 files changed, 73 insertions, 55 deletions
diff --git a/src/css/styles.css b/src/css/styles.css index b8bc0aa..4ac97ca 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -25,19 +25,38 @@ img { .card { margin: 3em; - border: 1px solid #777777; + padding: 2%; + border: 1px solid #aaaaaa; + /* width: 400px; */ + display: inline; + /* flex-direction: column; */ } .card img { - width: 43%; - display: inline; - margin-left: auto; - margin-right: 3em; + width: 100%; + padding: 2%; + /* display: inline; */ + /* margin-left: auto; + margin-right: 3em; */ } .feed { - width: 80%; + width: 90%; + display: flex; + flex-direction: column; +} + +@media screen and (min-width: 900px) { + .card-img { + display: flex; + flex-flow: row wrap; + align-content: flex-start; + } + .card img { + width: 400px; + } } + .sidebar { height: 100vh; diff --git a/src/html/bread.html b/src/html/bread.html index 7ad3b41..15194c5 100644 --- a/src/html/bread.html +++ b/src/html/bread.html @@ -10,108 +10,107 @@ </head> <body> - <div class="container"> + <!-- <div class="container"> --> + <div> <br> <h1>Bread</h1> Some highlights (and lowlights) of breadmaking <div class="feed"> <div class="card"> - <div class="card-body"> - <p class="card-text">A good looking loaf. Made a batch of 3 the next day, which took a toll on my - banneton, leaving a lot of residue.</p> + <p class="card-text">A good looking loaf. Made a batch of 3 the next day, which took a toll on my + banneton, leaving a lot of residue.</p> + <div class="card-img"> <img src="photo/pretty.jpg"> - <br> - <p class="date">Dec 4, 2018</p> </div> + <br> + <p class="date">Dec 4, 2018</p> </div> <div class="card"> - <div class="card-body"> - <p class="card-text">Made some pizza crust, it was delicious. The dough was awfully thick, probably - shouldn't have used it all.</p> + <p class="card-text">Made some pizza crust, it was delicious. The dough was awfully thick, probably + shouldn't have used it all.</p> + <div class="card-img"> <img src="photo/pizza1.jpg"> <img src="photo/pizza2.jpg"> - <br> - <p class="date">Nov 21, 2018</p> </div> + <br> + <p class="date">Nov 21, 2018</p> </div> <div class="card"> - <div class="card-body"> - <p class="card-text">Another nice no-knead recipie</p> + <p class="card-text">Another nice no-knead recipie</p> + <div class="card-img"> <img src="photo/good1.jpg"> <img src="photo/good2.jpg"> - <br> - <p class="date">Nov 16, 2018</p> </div> + <br> + <p class="date">Nov 16, 2018</p> </div> <div class="card"> - <div class="card-body"> - <p class="card-text">Tried to make something more sandwich-y. 4 hour warm proof with wheat, rye, - and corn flours. A bit dense, but not bad.</p> + <p class="card-text">Tried to make something more sandwich-y. 4 hour warm proof with wheat, rye, + and corn flours. A bit dense, but not bad.</p> + <div class="card-img"> <img src="photo/wheat.jpg"> - <br> - <p class="date">Sep 30, 2018</p> </div> + <br> + <p class="date">Sep 30, 2018</p> </div> <div class="card"> - <div class="card-body"> - <p class="card-text">A twist on normal beer bread, using hard cider.</p> + <p class="card-text">A twist on normal beer bread, using hard cider.</p> + <div class="card-img"> <img src="photo/cider.jpg"> - <br> - <p class="date">Sep 30, 2018</p> </div> + <br> + <p class="date">Sep 30, 2018</p> </div> <div class="card"> - <div class="card-body"> - <p class="card-text">I wanted to try the NY Times no knead recipie. Bread turned out delicious. - Will try to tranfer to a loaf shape next time for slices.</p> + <p class="card-text">I wanted to try the NY Times no knead recipie. Bread turned out delicious. + Will try to tranfer to a loaf shape next time for slices.</p> + <div class="card-img"> <img src="photo/nyt1.jpg"> <img src="photo/nyt2.jpg"> - <br> - <p class="date">Sep 27, 2018</p> </div> + <br> + <p class="date">Sep 27, 2018</p> </div> <div class="card"> - <div class="card-body"> - <p class="card-text">First time using a banneton, beautiful shape. Tried a different knead style - too. Rye-AP mix</p> + <p class="card-text">First time using a banneton, beautiful shape. Tried a different knead style + too. Rye-AP mix</p> + <div class="card-img"> <img src="photo/ban1.jpg"> <img src="photo/ban2.jpg"> - <br> - <p class="date">Sep 19, 2018</p> </div> + <br> + <p class="date">Sep 19, 2018</p> </div> <div class="card"> - <div class="card-body"> - <p class="card-text">Severely messed up the recipie this time. Tried to double to get two loafs, - both turned out flat.</p> + <p class="card-text">Severely messed up the recipie this time. Tried to double to get two loafs, + both turned out flat.</p> + <div class="card-img"> <img src="photo/flat1.jpg"> <img src="photo/flat2.jpg"> - <br> - <p class="date">Aug 30, 2018</p> </div> + <br> + <p class="date">Aug 30, 2018</p> </div> <div class="card"> - <div class="card-body"> - <p class="card-text">Used more white flour this time</p> + <p class="card-text">Used more white flour this time</p> + <div class="card-img"> <img src="photo/white-1.jpg"> <img src="photo/white-2.jpg"> - <br> - <p class="date">Aug 16, 2018</p> </div> + <br> + <p class="date">Aug 16, 2018</p> </div> <div class="card"> - <div class="card-body"> - <p class="card-text">First sourdough, mainly wheat</p> + <p class="card-text">First sourdough, mainly wheat</p> + <div class="card-img"> <img src="photo/first-1.jpg"> <img src="photo/first-2.jpg"> - <br> - <p class="date">Aug 9, 2018</p> </div> + <br> + <p class="date">Aug 9, 2018</p> </div> </div> </div> - </div> - </div> </body> </html>
\ No newline at end of file |