From c9f286c883a20796820cd286f01c9110b427e286 Mon Sep 17 00:00:00 2001 From: JasonC07 Date: Tue, 6 Nov 2018 10:12:44 -0600 Subject: [PATCH 1/8] Jason and Liz finsihed 5.1 and 5.2 we will start 5.3 tomorrow morning. --- ...{tf_articles_txt.html => tf_articles.html} | 4 +- tutorial/tf_flex.css | 95 +++++++++++++++++++ tutorial/tf_flex_txt.css | 49 ---------- tutorial/{tf_home_txt.html => tf_home.html} | 7 +- .../{tf_navicon_txt.css => tf_navicon.css} | 21 ++-- tutorial/{tf_prek_txt.html => tf_prek.html} | 10 +- tutorial/{tf_print_txt.css => tf_print.css} | 0 .../{tf_styles1_txt.css => tf_styles1.css} | 65 ++++++++++++- 8 files changed, 184 insertions(+), 67 deletions(-) rename tutorial/{tf_articles_txt.html => tf_articles.html} (99%) 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} (63%) rename tutorial/{tf_prek_txt.html => tf_prek.html} (95%) rename tutorial/{tf_print_txt.css => tf_print.css} (100%) rename tutorial/{tf_styles1_txt.css => tf_styles1.css} (68%) diff --git a/tutorial/tf_articles_txt.html b/tutorial/tf_articles.html similarity index 99% rename from tutorial/tf_articles_txt.html rename to tutorial/tf_articles.html index f36bf96..4555e6e 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: Jason Cobb Liz Bequette + Date: 11/6/18 Filename: tf_articles.html --> diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css new file mode 100644 index 0000000..daef001 --- /dev/null +++ b/tutorial/tf_flex.css @@ -0,0 +1,95 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Liz & Jason + 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..0193bf1 100644 --- a/tutorial/tf_home_txt.html +++ b/tutorial/tf_home.html @@ -7,14 +7,17 @@ Tutorial Case Home Page of the Trusted Friends website - Author: - Date: + Author: Jason Cobb Liz Bequette + 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 63% rename from tutorial/tf_navicon_txt.css rename to tutorial/tf_navicon.css index 3668320..b59d532 100644 --- a/tutorial/tf_navicon_txt.css +++ b/tutorial/tf_navicon.css @@ -5,8 +5,8 @@ Tutorial 5 Tutorial Case - Author: - Date: + Author: Jason Cobb and Liz Bequette + 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 95% rename from tutorial/tf_prek_txt.html rename to tutorial/tf_prek.html index 3498f36..a0ccaad 100644 --- a/tutorial/tf_prek_txt.html +++ b/tutorial/tf_prek.html @@ -7,8 +7,8 @@ Tutorial Case Pre-K Classes offered by Trusted Friends - Author: - Date: + Author: Liz & Jason + Date: 11/6/18 Filename: tf_prek.html --> @@ -16,6 +16,9 @@ Pre-K Classes at Trusted Friends + + + @@ -23,6 +26,9 @@ Trusted Friends