From 931dcd1b78785787aed3f6fd3de1e352be774e9a Mon Sep 17 00:00:00 2001
From: JeremySnider01
Date: Tue, 6 Nov 2018 13:32:42 -0600
Subject: [PATCH 01/28] finished tutorial and got halfway through the review; a
lot of this is kind of confusing
---
review/{tf_print2_txt.css => tf_print2.css} | 13 +-
review/tf_styles4.css | 115 ++++++++++++++++++
review/tf_styles4_txt.css | 46 -------
review/{tf_tips_txt.html => tf_tips.html} | 10 +-
...{tf_articles_txt.html => tf_articles.html} | 7 +-
tutorial/tf_flex.css | 91 ++++++++++++++
tutorial/tf_flex_txt.css | 49 --------
tutorial/{tf_home_txt.html => tf_home.html} | 8 +-
.../{tf_navicon_txt.css => tf_navicon.css} | 21 ++--
tutorial/{tf_prek_txt.html => tf_prek.html} | 12 +-
tutorial/tf_print.css | 109 +++++++++++++++++
tutorial/tf_print_txt.css | 68 -----------
.../{tf_styles1_txt.css => tf_styles1.css} | 75 +++++++++++-
13 files changed, 437 insertions(+), 187 deletions(-)
rename review/{tf_print2_txt.css => tf_print2.css} (70%)
create mode 100644 review/tf_styles4.css
delete mode 100644 review/tf_styles4_txt.css
rename review/{tf_tips_txt.html => tf_tips.html} (95%)
rename tutorial/{tf_articles_txt.html => tf_articles.html} (96%)
create mode 100644 tutorial/tf_flex.css
delete mode 100644 tutorial/tf_flex_txt.css
rename tutorial/{tf_home_txt.html => tf_home.html} (93%)
rename tutorial/{tf_navicon_txt.css => tf_navicon.css} (61%)
rename tutorial/{tf_prek_txt.html => tf_prek.html} (94%)
create mode 100644 tutorial/tf_print.css
delete mode 100644 tutorial/tf_print_txt.css
rename tutorial/{tf_styles1_txt.css => tf_styles1.css} (59%)
diff --git a/review/tf_print2_txt.css b/review/tf_print2.css
similarity index 70%
rename from review/tf_print2_txt.css
rename to review/tf_print2.css
index dd4fac8..0076b11 100644
--- a/review/tf_print2_txt.css
+++ b/review/tf_print2.css
@@ -5,8 +5,8 @@
Tutorial 5
Review Assignment
- Author:
- Date:
+ Author: Jeremy and Brett
+ Date: 11/6/18
Filename: tf_print2.css
@@ -18,11 +18,16 @@
/* Hidden Objects */
-
+nav, header, h1, section#left, footer {
+ display: none;
+}
/* Page Box Styles */
-
+@page {
+ size: 8.5in 11in;
+ margin: 0.5in;
+}
/* Header Styles */
diff --git a/review/tf_styles4.css b/review/tf_styles4.css
new file mode 100644
index 0000000..3bcadda
--- /dev/null
+++ b/review/tf_styles4.css
@@ -0,0 +1,115 @@
+@charset "utf-8";
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Review Assignment
+
+ Author: Jeremy and Brett
+ Date: 11/6/18
+
+ Filename: tf_styles4.css
+
+ This file contains the screen styles used with the Trusted
+ Friends blog tips
+
+*/
+
+
+/* Import Basic Design Styles Used on All Screens */
+
+@import url("tf_designs.css");
+
+
+
+/* General Flex Styles */
+body {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+
+section#left {
+ -webkit-flex: 1 8 130px;
+ flex: 1 8 130px;
+}
+
+section#right {
+ -webkit-flex: 1 8 351px;
+ flex: 1 8 351px;
+}
+
+section.tips {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+
+section.tips article {
+ -webkit-flex: 2 1 351px;
+ flex: 2 1 351px;
+}
+
+aside {
+ -webkit-flex: 1 2 250px;
+ flex: 1 2 250px;
+}
+
+nav.horizontal ul {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: column wrap;
+ flex-flow: column wrap;
+}
+
+/* ===============================
+ Mobile Devices: 0 to 480px
+ ===============================
+*/
+@media only screen and (max-width: 480px) {
+ nav.verticle ul {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: column wrap;
+ flex-flow: column wrap;
+ height: 240px;
+ }
+
+ section#left {
+ -webkit-order: 99;
+ order: 99;
+ }
+
+ footer {
+ -webkit-order: 100;
+ order: 100;
+ }
+
+ a#navicon {
+ display: block;
+ }
+
+ nav.horizontal ul {
+ display: none;
+ }
+
+ a#navicon:hover+ul, nav.horizontal ul:hover {
+ display: block;
+ }
+}
+
+
+
+
+/* ============================================
+ Tablet and Desktop Devices: 481px or more
+ ============================================
+*/
+@media only screen and (min-width: 481px) {
+ nav.horizontal ul {
+ height: 160px;
+ }
+}
+
+
diff --git a/review/tf_styles4_txt.css b/review/tf_styles4_txt.css
deleted file mode 100644
index 4aa8789..0000000
--- a/review/tf_styles4_txt.css
+++ /dev/null
@@ -1,46 +0,0 @@
-@charset "utf-8";
-/*
- New Perspectives on HTML5 and CSS3, 7th Edition
- Tutorial 5
- Review Assignment
-
- Author:
- Date:
-
- Filename: tf_styles4.css
-
- This file contains the screen styles used with the Trusted
- Friends blog tips
-
-*/
-
-
-/* Import Basic Design Styles Used on All Screens */
-
-@import url("tf_designs.css");
-
-
-
-/* General Flex Styles */
-
-
-
-
-
-
-/* ===============================
- Mobile Devices: 0 to 480px
- ===============================
-*/
-
-
-
-
-
-/* ============================================
- Tablet and Desktop Devices: 481px or more
- ============================================
-*/
-
-
-
diff --git a/review/tf_tips_txt.html b/review/tf_tips.html
similarity index 95%
rename from review/tf_tips_txt.html
rename to review/tf_tips.html
index 5f89bf6..bb60224 100644
--- a/review/tf_tips_txt.html
+++ b/review/tf_tips.html
@@ -7,14 +7,18 @@
Review Assignment
Trusted Friends Parenting Tips
- Author:
- Date:
+ Author: Jeremy and Brett
+ Date: 11/6/18
Filename: tf_tips.html
-->
Trusted Friends: Education Tips
-
+
+
+
+
diff --git a/tutorial/tf_articles_txt.html b/tutorial/tf_articles.html
similarity index 96%
rename from tutorial/tf_articles_txt.html
rename to tutorial/tf_articles.html
index f36bf96..cf30fc4 100644
--- a/tutorial/tf_articles_txt.html
+++ b/tutorial/tf_articles.html
@@ -7,8 +7,8 @@
Tutorial Case
Trusted Friends Articles of Interest
- Author:
- Date:
+ Author: Brett and Jeremy
+ Date: 11/6/18
Filename: tf_articles.html
-->
@@ -16,6 +16,9 @@
Trusted Friends: Articles of Interest
+
+
+
diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css
new file mode 100644
index 0000000..bd5e826
--- /dev/null
+++ b/tutorial/tf_flex.css
@@ -0,0 +1,91 @@
+@charset "utf-8";
+
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Tutorial Case
+
+ Author: Brett and Jeremy
+ Date: 11/6/18
+
+ Filename: tf_flex.css
+
+ This file contains the flex styles used in the Trusted Friends
+ Pre-K Classes page.
+
+*/
+
+
+/* ================
+ Base Flex Styles
+ ================
+*/
+body {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+
+header, footer {
+ width: 100%;
+}
+
+aside {
+ -webkit-flex: 1 1 120px;
+ flex: 1 1 120px;
+}
+
+section#main {
+ -webkit-flex: 3 1 361px;
+ flex: 3 1 361px;
+}
+
+section#topics {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+
+section#topics article {
+ -webkit-flex: 1 1 200px;
+ flex: 1 1 200px;
+}
+
+/* =========================
+ Mobile Styles: 0 to 480px
+ =========================
+*/
+
+@media only screen and (max-width: 480px) {
+ aside {
+ -webkit-order: 99;
+ order: 99;
+ }
+
+ footer {
+ -webkit-order: 100;
+ order: 100;
+ }
+}
+
+/* ============================================
+ Tablet and Desktop Styles: 481px and greater
+ ============================================
+*/
+
+@media only screen and (min-width: 481px) {
+ nav.horizontal ul {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ }
+
+ nav.horizontal li {
+ -webkit-flex: 1 1 auto;
+ flex: 1 1 auto;
+ }
+}
+
diff --git a/tutorial/tf_flex_txt.css b/tutorial/tf_flex_txt.css
deleted file mode 100644
index e441a76..0000000
--- a/tutorial/tf_flex_txt.css
+++ /dev/null
@@ -1,49 +0,0 @@
-@charset "utf-8";
-
-/*
- New Perspectives on HTML5 and CSS3, 7th Edition
- Tutorial 5
- Tutorial Case
-
- Author:
- Date:
-
- Filename: tf_flex.css
-
- This file contains the flex styles used in the Trusted Friends
- Pre-K Classes page.
-
-*/
-
-
-/* ================
- Base Flex Styles
- ================
-*/
-
-
-
-
-/* =========================
- Mobile Styles: 0 to 480px
- =========================
-*/
-
-@media only screen and (max-width: 480px) {
-
-
-
-}
-
-/* ============================================
- Tablet and Desktop Styles: 481px and greater
- ============================================
-*/
-
-@media only screen and (min-width: 481px) {
-
-
-
-}
-
-
diff --git a/tutorial/tf_home_txt.html b/tutorial/tf_home.html
similarity index 93%
rename from tutorial/tf_home_txt.html
rename to tutorial/tf_home.html
index 31bb7ed..b73bf09 100644
--- a/tutorial/tf_home_txt.html
+++ b/tutorial/tf_home.html
@@ -7,14 +7,18 @@
Tutorial Case
Home Page of the Trusted Friends website
- Author:
- Date:
+ Author: Brett and Jeremy
+ Date: 11/6/18
Filename: tf_home.html
-->
Trusted Friends Daycare
+
+
+
diff --git a/tutorial/tf_navicon_txt.css b/tutorial/tf_navicon.css
similarity index 61%
rename from tutorial/tf_navicon_txt.css
rename to tutorial/tf_navicon.css
index 3668320..76e461f 100644
--- a/tutorial/tf_navicon_txt.css
+++ b/tutorial/tf_navicon.css
@@ -5,8 +5,8 @@
Tutorial 5
Tutorial Case
- Author:
- Date:
+ Author: Brett and Jeremy
+ Date: 11/6/18
Filename: tf_navicon.css
@@ -20,9 +20,9 @@
Base Styles
===========
*/
-
-
-
+a#navicon {
+ display: none;
+}
/* ===============================
Mobile Devices: 0 to 480px
@@ -30,6 +30,13 @@
*/
@media only screen and (max-width: 480px) {
-
-
+ a#navicon {
+ display: block;
+ }
+ nav.horizontal ul {
+ display: none;
+ }
+ a#navicon:hover+ul, nav.horizontal ul:hover {
+ display: block;
+ }
}
diff --git a/tutorial/tf_prek_txt.html b/tutorial/tf_prek.html
similarity index 94%
rename from tutorial/tf_prek_txt.html
rename to tutorial/tf_prek.html
index 3498f36..1388d3e 100644
--- a/tutorial/tf_prek_txt.html
+++ b/tutorial/tf_prek.html
@@ -7,15 +7,19 @@
Tutorial Case
Pre-K Classes offered by Trusted Friends
- Author:
- Date:
+ Author: Brett and Jeremy
+ Date: 11/6/18
Filename: tf_prek.html
-->
Pre-K Classes at Trusted Friends
-
+
+
+
+
+
@@ -23,6 +27,8 @@
-