From 5b61f8bdd6cd3a28af8c6e432af50c6fcca24d2f Mon Sep 17 00:00:00 2001 From: RobBlocker Date: Tue, 6 Nov 2018 09:33:22 -0600 Subject: [PATCH 01/10] renamed: case1/gp_cover_txt.html -> case1/gp_cover.html renamed: tutorial/tf_articles_txt.html -> tutorial/tf_articles.html new file: tutorial/tf_flex.css deleted: tutorial/tf_flex_txt.css renamed: tutorial/tf_home_txt.html -> tutorial/tf_home.html renamed: tutorial/tf_navicon_txt.css -> tutorial/tf_navicon.css renamed: tutorial/tf_prek_txt.html -> tutorial/tf_prek.html renamed: tutorial/tf_print_txt.css -> tutorial/tf_print.css renamed: tutorial/tf_styles1_txt.css -> tutorial/tf_styles1.css --- case1/{gp_cover_txt.html => gp_cover.html} | 0 ...{tf_articles_txt.html => tf_articles.html} | 0 tutorial/tf_flex.css | 95 +++++++++++++++++++ tutorial/tf_flex_txt.css | 49 ---------- tutorial/{tf_home_txt.html => tf_home.html} | 10 +- .../{tf_navicon_txt.css => tf_navicon.css} | 17 +++- tutorial/{tf_prek_txt.html => tf_prek.html} | 12 ++- tutorial/{tf_print_txt.css => tf_print.css} | 0 .../{tf_styles1_txt.css => tf_styles1.css} | 79 ++++++++++++++- 9 files changed, 202 insertions(+), 60 deletions(-) rename case1/{gp_cover_txt.html => gp_cover.html} (100%) rename tutorial/{tf_articles_txt.html => tf_articles.html} (100%) create mode 100644 tutorial/tf_flex.css delete mode 100644 tutorial/tf_flex_txt.css rename tutorial/{tf_home_txt.html => tf_home.html} (91%) rename tutorial/{tf_navicon_txt.css => tf_navicon.css} (72%) 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} (62%) diff --git a/case1/gp_cover_txt.html b/case1/gp_cover.html similarity index 100% rename from case1/gp_cover_txt.html rename to case1/gp_cover.html diff --git a/tutorial/tf_articles_txt.html b/tutorial/tf_articles.html similarity index 100% rename from tutorial/tf_articles_txt.html rename to tutorial/tf_articles.html diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css new file mode 100644 index 0000000..ce7eae1 --- /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: Peter and Rob + Date: 11/06/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 91% rename from tutorial/tf_home_txt.html rename to tutorial/tf_home.html index 31bb7ed..109158e 100644 --- a/tutorial/tf_home_txt.html +++ b/tutorial/tf_home.html @@ -1,5 +1,7 @@ + Trusted Friends Daycare + + + + diff --git a/tutorial/tf_navicon_txt.css b/tutorial/tf_navicon.css similarity index 72% rename from tutorial/tf_navicon_txt.css rename to tutorial/tf_navicon.css index 3668320..087c1d9 100644 --- a/tutorial/tf_navicon_txt.css +++ b/tutorial/tf_navicon.css @@ -5,8 +5,8 @@ Tutorial 5 Tutorial Case - Author: - Date: + Author: Rob and Peter + Date: 11/6/18 Filename: tf_navicon.css @@ -21,6 +21,10 @@ =========== */ +a#navicon { + display: none; +} + @@ -30,6 +34,13 @@ */ @media only screen and (max-width: 480px) { - + a#navicon { + display: block; + } +nav.horizontal ul{ + display: none; +} +a#navicon { +} } 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..24feedc 100644 --- a/tutorial/tf_prek_txt.html +++ b/tutorial/tf_prek.html @@ -7,15 +7,18 @@ Tutorial Case Pre-K Classes offered by Trusted Friends - Author: - Date: + Author: Peter and Rob + Date: 11/06/18 Filename: tf_prek.html --> Pre-K Classes at Trusted Friends - + + + + @@ -23,6 +26,9 @@ Trusted Friends