Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
a86998c
new file: tutorial/tf_flex.css
BethanyDuMontelle Nov 6, 2018
2bcafc1
Merge branch 'master' of https://github.com/LewisAndClark-CSD/html05
BethanyDuMontelle Nov 6, 2018
d188850
renamed: tutorial/tf_articles_txt.html -> tutorial/tf_articles.html
BethanyDuMontelle Nov 6, 2018
fc9d07e
modified: tutorial/tf_print.css
BethanyDuMontelle Nov 6, 2018
30d1b56
Merge branch 'master' of https://github.com/LewisAndClark-CSD/html05
BethanyDuMontelle Nov 7, 2018
630a146
modified: tutorial/tf_print.css
BethanyDuMontelle Nov 7, 2018
9bdc9f3
renamed: review/tf_print2_txt.css -> review/tf_print2.css
BethanyDuMontelle Nov 7, 2018
c0ad2c6
It's a mess right now
BethanyDuMontelle Nov 8, 2018
2c4f06c
modified: review/tf_styles4.css
BethanyDuMontelle Nov 8, 2018
44c1af7
modified: review/tf_print2.css
BethanyDuMontelle Nov 8, 2018
d608160
new file: review/.directory
BethanyDuMontelle Nov 12, 2018
b4b7641
renamed: case1/gp_cover_txt.html -> case1/gp_cover.html
BethanyDuMontelle Nov 12, 2018
2eaf557
modified: case1/gp_layout.css
BethanyDuMontelle Nov 12, 2018
c76f4c7
new file: case2/wc_styles.css
BethanyDuMontelle Nov 12, 2018
968f8c7
modified: case2/wc_styles.css
BethanyDuMontelle Nov 13, 2018
da1368b
modified: case3/cw_styles.css
BethanyDuMontelle Nov 13, 2018
67dc3be
modified: case3/cw_styles.css
BethanyDuMontelle Nov 13, 2018
56627b1
modified: case3/cw_styles.css
BethanyDuMontelle Nov 14, 2018
e82be5b
modified: case3/cw_styles.css
BethanyDuMontelle Nov 14, 2018
c861bae
modified: case4/jb_home.html
BethanyDuMontelle Nov 19, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions case1/gp_cover_txt.html → case1/gp_cover.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,18 @@
Case Problem 1

Ghost of the Deep Cover Page
Author:
Date:
Author: seth and bethany
Date: 11/12/18

Filename: gp_cover.html
-->

<title>Ghost of the Deep Cover Page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width="device-width, initial-scale=1" />
<link href="gp_reset.css" rel="stylesheet" media="all" />
<link href="gp_layout.css" rel="stylesheet" media="screen" />
<link href="gp_print.css" rel="stylesheet" media="print"/>

</head>

Expand Down
98 changes: 98 additions & 0 deletions case1/gp_layout.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
@charset "utf-8";

/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 1

Author: seth and bethany
Date: 11/12/18

Filename: gp_layout.css

This file contains the layout styles and media
queries used with sample pages from the Golden
Pulps website.

*/


/* Import Basic Design Styles Used on All Screens */

@import url("gp_designs.css");

/* Flex Layout Styles */
body {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;

}
section#sheet{
-webkit-flex: 3 1 301px;
flex: 3 1 301px;
}
article{
-webkit-flex: 1 3 180px;
flex: 1 3 180px;
}


/* ============================================
Mobile Devices: 0 - 480 pixels
============================================
*/
@media only screen and (max-width: 480px) {

img.panel{
width: 100%;
}
nav.horizontal {
-webkit-order: 99;
order:99;
}
body > footer{
-webkit-order: 100;
order: 100;
}


}
/* ===================================================
Tablet and Desktop Devices: Greater than 480 pixels
===================================================
*/
@media only screen and (min-width: 481px) {

nav.horizontal ul{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
height: 40px;
}

nav.horizontal ul li {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}

img.size1 {
width: 100%;
}

img.size2 {
width: 60%;
}

img.size3 {
width: 40%;
}

img.size4 {
width: 30%;
}
}
42 changes: 0 additions & 42 deletions case1/gp_layout_txt.css

This file was deleted.

8 changes: 6 additions & 2 deletions case1/gp_page1_txt.html → case1/gp_page1.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,18 @@
Case Problem 1

Ghost of the Deep Page 1
Author:
Date:
Author: seth and bethany
Date: 11/12/18

Filename: gp_page1.html
-->

<title>Ghost of the Deep Page 1</title>
<meta charset="utf-8" />
<meta name="viewport" content="width="device-width, initial-scale=1" />
<link href="gp_reset.css" rel="stylesheet" media="all" />
<link href="gp_layout.css" rel="stylesheet" media="screen" />
<link href="gp_print.css" rel="stylesheet" media="print"/>
</head>

<body>
Expand Down
8 changes: 6 additions & 2 deletions case1/gp_page2_txt.html → case1/gp_page2.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,18 @@
Case Problem 1

Ghost of the Deep Page 2
Author:
Date:
Author: seth and bethany
Date: 11/12/18

Filename: gp_page2.html
-->

<title>Ghost of the Deep Page 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width="device-width, initial-scale=1" />
<link href="gp_reset.css" rel="stylesheet" media="all" />
<link href="gp_layout.css" rel="stylesheet" media="screen" />
<link href="gp_print.css" rel="stylesheet" media="print"/>
</head>

<body>
Expand Down
8 changes: 6 additions & 2 deletions case1/gp_page3_txt.html → case1/gp_page3.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,18 @@
Case Problem 1

Ghost of the Deep Page 3
Author:
Date:
Author: seth bethany
Date: 11/12/18

Filename: gp_page3.html
-->

<title>Ghost of the Deep Page 3</title>
<meta charset="utf-8" />
<meta name="viewport" content="width="device-width, initial-scale=1" />
<link href="gp_reset.css" rel="stylesheet" media="all" />
<link href="gp_layout.css" rel="stylesheet" media="screen" />
<link href="gp_print.css" rel="stylesheet" media="print"/>
</head>

<body>
Expand Down
36 changes: 28 additions & 8 deletions case1/gp_print_txt.css → case1/gp_print.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
Tutorial 5
Case Problem 1

Author:
Date:
Author: seth and bethany
Date: 11/12/18

Filename: gp_print.css

Expand All @@ -18,14 +18,34 @@

/* Hidden Objects */






nav, footer, article {
display: none;
}

/* Comic Book Sheet Styles */

section#sheet {
width: 6in;
margin-top: 0in;
margin-bottom: 0in;
margin-left: auto;
margin-right: auto;
}

img.size1 {
width: 5in;
}

img.size2 {
width: 3in;
}

img.size3 {
width: 2in;
}

img.size4 {
width: 1.5in;
}



Expand Down
118 changes: 118 additions & 0 deletions case2/wc_styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
@charset "utf-8";

/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Case Problem 2

Author: Seth and Bethany
Date: 11/12/18

Filename: wc_styles.css

This file contains the layout styles and media
queries used with sample pages from the Willet
Creek Golf Course website.

*/

@import url("wc_designs.css");

/* Import Design Styles */



/* Flex Layout Styles */
body {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

nav#hole_list {
-webkit-flex: 1 3 140px;
flex: 1 3 140px;
}

article {
-webkit-flex: 3 1 341px;
flex: 3 1 341px;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

section#stats {
-webkit-flex: 1 4 120px;
flex: 1 4 120px;
}

section#summary {
-webkit-flex: 4 1 361px;
flex: 1 4 361px;
}

aside {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

aside div {
-webkit-flex: 1 1 180px;
flex: 1 1 180px;
}

/* =============================
Mobile Styles: 0 - 480 pixels
=============================
*/
@media only screen and (max-width: 480px) {
nav#hole_list {
-webkit-order: 99;
order: 99;
}

footer {
-webkit-order: 100;
order: 100;
}

nav.horizontal ul {
display: none;
}

a#navicon:hover+ul, nav.horizontal:hover {
display: block;
}

aside {
display: none;
}

}


/* =================================================
Tablet and Desktop Styles: 481 pixels and greater
=================================================
*/
@media only screen and (min-width: 481px) {

a#navicon {
display: none;
}

nav.horizontal ul {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
}
Loading