From a86998c446f2741957e29108f31abb2b0030eecb Mon Sep 17 00:00:00 2001 From: BethanyDuMontelle Date: Tue, 6 Nov 2018 09:04:42 -0600 Subject: [PATCH 01/18] 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_styles1_txt.css -> tutorial/tf_styles1.css --- tutorial/tf_flex.css | 98 +++++++++++++++++++ tutorial/tf_flex_txt.css | 49 ---------- tutorial/{tf_home_txt.html => tf_home.html} | 7 +- .../{tf_navicon_txt.css => tf_navicon.css} | 24 +++-- tutorial/{tf_prek_txt.html => tf_prek.html} | 11 ++- .../{tf_styles1_txt.css => tf_styles1.css} | 77 ++++++++++++++- 6 files changed, 203 insertions(+), 63 deletions(-) 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} (64%) rename tutorial/{tf_prek_txt.html => tf_prek.html} (94%) rename tutorial/{tf_styles1_txt.css => tf_styles1.css} (65%) diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css new file mode 100644 index 0000000..667ba25 --- /dev/null +++ b/tutorial/tf_flex.css @@ -0,0 +1,98 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Seth and Bethany + 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..52f11cf 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: Seth and Bethany + 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 64% rename from tutorial/tf_navicon_txt.css rename to tutorial/tf_navicon.css index 3668320..2c77607 100644 --- a/tutorial/tf_navicon_txt.css +++ b/tutorial/tf_navicon.css @@ -5,8 +5,8 @@ Tutorial 5 Tutorial Case - Author: - Date: + Author: Seth and Bethany + Date: 11/6/18 Filename: tf_navicon.css @@ -20,8 +20,9 @@ Base Styles =========== */ - - +a#navicon { + display: none; +} /* =============================== @@ -30,6 +31,17 @@ */ @media only screen and (max-width: 480px) { - - + + a#navicon { + display: block; + } + + nav.horizontal ul { + display: none; + } + + a#navicon:hover+ul, nav.horizontal: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..98e35fe 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: Seth and Bethany + Date: 11/6/18 Filename: tf_prek.html --> Pre-K Classes at Trusted Friends - + + + + + @@ -23,6 +27,7 @@ Trusted Friends