From 69cc57483e73fd8fba8c778e2bdbc009e0a45e5e Mon Sep 17 00:00:00 2001 From: "[zfredrick91]" Date: Wed, 7 Nov 2018 12:26:21 -0600 Subject: [PATCH 1/4] Tutorial commit --- ...{tf_articles_txt.html => tf_articles.html} | 3 + tutorial/tf_flex.css | 98 ++++++++++++++++ tutorial/tf_flex_txt.css | 49 -------- tutorial/{tf_home_txt.html => tf_home.html} | 8 +- .../{tf_navicon_txt.css => tf_navicon.css} | 20 +++- tutorial/{tf_prek_txt.html => tf_prek.html} | 9 +- tutorial/tf_print.css | 109 ++++++++++++++++++ tutorial/tf_print_txt.css | 68 ----------- .../{tf_styles1_txt.css => tf_styles1.css} | 80 ++++++++++++- 9 files changed, 317 insertions(+), 127 deletions(-) rename tutorial/{tf_articles_txt.html => tf_articles.html} (97%) create mode 100644 tutorial/tf_flex.css delete mode 100644 tutorial/tf_flex_txt.css rename tutorial/{tf_home_txt.html => tf_home.html} (94%) rename tutorial/{tf_navicon_txt.css => tf_navicon.css} (62%) 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} (60%) diff --git a/tutorial/tf_articles_txt.html b/tutorial/tf_articles.html similarity index 97% rename from tutorial/tf_articles_txt.html rename to tutorial/tf_articles.html index f36bf96..68c86d8 100644 --- a/tutorial/tf_articles_txt.html +++ b/tutorial/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..84af7ab --- /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: + Date: + + 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 94% rename from tutorial/tf_home_txt.html rename to tutorial/tf_home.html index 31bb7ed..e4a4e13 100644 --- a/tutorial/tf_home_txt.html +++ b/tutorial/tf_home.html @@ -7,7 +7,7 @@ Tutorial Case Home Page of the Trusted Friends website - Author: + Author: Travis and Zac Date: Filename: tf_home.html @@ -15,7 +15,11 @@ Trusted Friends Daycare - + + + + +
diff --git a/tutorial/tf_navicon_txt.css b/tutorial/tf_navicon.css similarity index 62% rename from tutorial/tf_navicon_txt.css rename to tutorial/tf_navicon.css index 3668320..296d8db 100644 --- a/tutorial/tf_navicon_txt.css +++ b/tutorial/tf_navicon.css @@ -5,7 +5,7 @@ Tutorial 5 Tutorial Case - Author: + Author: Travis and Zac Date: Filename: tf_navicon.css @@ -20,9 +20,10 @@ Base Styles =========== */ - - - + + a#navicon { + display: none; + } /* =============================== Mobile Devices: 0 to 480px @@ -31,5 +32,16 @@ @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..c59cc31 100644 --- a/tutorial/tf_prek_txt.html +++ b/tutorial/tf_prek.html @@ -7,7 +7,7 @@ Tutorial Case Pre-K Classes offered by Trusted Friends - Author: + Author: Travis and Zac Date: Filename: tf_prek.html @@ -16,13 +16,18 @@ Pre-K Classes at Trusted Friends - + + + + +
Trusted Friends