From c05ff76502bcca0a8e3aadcc91170dda4ed97183 Mon Sep 17 00:00:00 2001 From: Ally Kendall Date: Fri, 10 Mar 2017 11:08:49 -0800 Subject: [PATCH 1/2] Stephani's CSS additions --- demo.html | 2 +- style.css | 38 +++++++++++++++++++++++++++++++------- 2 files changed, 32 insertions(+), 8 deletions(-) diff --git a/demo.html b/demo.html index fa7e2e3..1f2abcd 100644 --- a/demo.html +++ b/demo.html @@ -24,7 +24,7 @@

Headings

-
+

h1. Vast Quoll

h2. Vast Quoll

h3. Vast Quoll

diff --git a/style.css b/style.css index f161495..ceb893d 100644 --- a/style.css +++ b/style.css @@ -73,6 +73,14 @@ blockquote { border-left: 5px solid #e5fdfa; } +.flex-container { + display: flex; + flex-direction: column;; + width: 1000px; + height: 300px; + background-color: lightgrey; +} + .section-title { font-family: 'Raleway', sans-serif; color: #2f3733; @@ -107,14 +115,14 @@ blockquote { } .vast-heading { - color: grey; + color: #2f3733; font-family: 'Open Sans Condensed', sans-serif; } .vast-lead { font-family: 'Open Sans Condensed', sans-serif; - font-size: 16px; - font-weight: lighter; + font-size: 27px; + color: #828784; } .sample-code { @@ -122,12 +130,28 @@ blockquote { color: #f6e5d7; } +.sample-text { + font-size: 13px; + +} + + button.vast-btn, input.vast-btn { - font-family: 'Open Sans Condensed', sans-serif; - background-color: coral; + font-family: 'Raleway', sans-serif; + background-color: #f78671; + margin: 5px; + border-radius: 5px; + width: 100px; + height: 50px; + font-size: 23px; + + + } a.vast-btn { - font-family: 'Open Sans Condensed', sans-serif; - color: purple; + font-family: 'Raleway', sans-serif; + font-size: 23px; + color: #6b9488; + padding-right: 5px; } From b3c17a16a0c81202a41b1cdc33835f0461278478 Mon Sep 17 00:00:00 2001 From: Ally Kendall Date: Fri, 10 Mar 2017 15:31:12 -0800 Subject: [PATCH 2/2] Ally's CSS additions --- demo.html | 268 +++++++++++++++++++++++++++++++++--------------------- style.css | 113 +++++++++++++++++------ 2 files changed, 248 insertions(+), 133 deletions(-) diff --git a/demo.html b/demo.html index 1f2abcd..10e50ca 100644 --- a/demo.html +++ b/demo.html @@ -4,97 +4,144 @@ Build Your Own Bootstrap - +
-
-

Vast CSS

-
Because Bootstrap is b.s.
+
+

Vast CSS

+

'Cause Bootstrap is B.S.

-
+ +
+ +

Headings

To style headings in various sizes, add the - .vast-heading class to your + .vast-h1 through + .vast-h6 class to your inline elements or simply use the <h1> through <h6> tags.

-

h1. Vast Quoll

-

h2. Vast Quoll

-

h3. Vast Quoll

-

h4. Vast Quoll

-
h5. Vast Quoll
-
h6. Vast Quoll
+

h1. Vast Quoll

+

h2. Vast Quoll

+

h3. Vast Quoll

+

h4. Vast Quoll

+
h5. Vast Quoll
+
h6. Vast Quoll

- <h1 - class="vast-heading">h1. Vast Quollh1. Vast Quoll</h1>

- <h2 - class="vast-heading">h2. Vast Quollh2. Vast Quoll</h2>

- <h3 - class="vast-heading">h3. Vast Quollh3. Vast Quoll</h3>

- <h4 - class="vast-heading">h4. Vast Quollh4. Vast Quoll</h4> -

-

- <h5 - class="vast-heading">h5. Vast Quollh5. Vast Quoll</h5> -

-

- <h6 - class="vast-heading">h6. Vast Quollh6. Vast Quoll</h6> -

+

- +
+

Secondary Headings

+ +
+

To create secondary text, add the + .small class to your + <h1> through + <h6> tags. +

+
+ +
+

h1. Vast Quoll Secondary text

+

h2. Vast Quoll Secondary text

+

h3. Vast Quoll Secondary text

+

h4. Vast Quoll Secondary text

+
h5. Vast Quoll Secondary text
+
h6. Vast Quoll Secondary text
+
+
+ +

+ <h1>h1. Vast Quoll + <small>Secondary text</small></h1> +

+

+ <h2>h2. Vast Quoll + <small>Secondary text</small></h2> +

+

+ <h3>h3. Vast Quoll + <small>Secondary text</small></h3> +

+

+ <h4>h4. Vast Quoll + <small>Secondary text</small></h4> +

+

+ <h5>h5. Vast Quoll + <small>Secondary text</small></h5> +

+

+ <h6>h6. Vast Quoll + <small>Secondary text</small></h6> +

+ +
+
-
+

Body copy

@@ -109,7 +156,7 @@

Body copy

-
+

Hodor! Hodor hodor, hodor; hodor hodor... Hodor hodor hodor. Hodor. Hodor! Hodor hodor, hodor hodor hodor? Hodor hodor HODOR! Hodor hodor - hodor; hodor hodor. Hodor hodor HODOR! Hodor hodor - hodor... Hodor hodor hodor; hodor hodor hodor! Hodor, hodor. Hodor. Hodor, hodor hodor hodor, hodor. Hodor hodor?!

Hodor. Hodor hodor hodor hodor... Hodor hodor hodor. Hodor hodor - hodor; hodor HODOR hodor, hodor hodor?! Hodor hodor, hodor. Hodor hodor; hodor hodor hodor hodor. Hodor. Hodor HODOR hodor, hodor hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? Hodor. Hodor hodor; hodor hodor, hodor. Hodor hodor. Hodor! Hodor hodor, hodor - HODOR hodor, hodor hodor; hodor hodor, hodor, hodor hodor.

Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor; hodor hodor - hodor? Hodor! Hodor hodor, hodor... Hodor hodor hodor hodor! Hodor, hodor. Hodor. Hodor, hodor... Hodor hodor hodor hodor; hodor hodor - hodor, hodor, hodor hodor. Hodor hodor HODOR! Hodor hodor... Hodor hodor HODOR hodor, hodor hodor; hodor hodor, hodor. Hodor hodor?! Hodor, hodor. Hodor. Hodor, hodor; hodor hodor; hodor hodor. Hodor. Hodor hodor HODOR! Hodor HODOR hodor, hodor hodor, hodor. Hodor hodor hodor.

@@ -124,7 +171,7 @@

Body copy

-
+

Lead body copy

@@ -132,7 +179,7 @@

Lead body copy

-
+

Post-ironic shoreditch chambray whatever fixie, butcher crucifix cronut migas vexillologist microdosing flannel beard. Vinyl cold-pressed echo park pickled, venmo paleo kogi whatever. Organic pitchfork drinking vinegar, microdosing pinterest stumptown live-edge. Chambray green juice fingerstache drinking vinegar. Waistcoat truffaut mlkshk scenester, fingerstache vape yuccie single-origin coffee flannel quinoa man braid polaroid four dollar toast deep v. Glossier cardigan franzen slow-carb kombucha banh mi. Vexillologist mixtape stumptown small batch vinyl, intelligentsia snackwave synth thundercats af unicorn fap ramps seitan.

@@ -151,7 +198,7 @@

Lead body copy

-
+

Addresses

@@ -159,53 +206,58 @@

Addresses

-
-
- Learners Guild
- 492 Ninth Street (Garden Level)
- Oakland, CA 94607
- P: (123) 456-7890 -
+
+

+

+ Learners Guild
+ 492 Ninth Street (Garden Level)
+ Oakland, CA 94607
+ P: (123) 456-7890 +
-
- Full Name
- first.last@example.com -
+
+ Full Name
+ first.last@example.com +
+

- <address>
- <strong>Learners Guild</strong><br>
- 492 Ninth Street (Garden Level)<br>
- Oakland, CA 94607<br>
- <abbr - title="Phone">P:</abbr> - (123) 456-7890
- </address>

- <address>
- <strong>Full Name</strong><br>
- <a - href="mailto:#">first.last@example.com</a>
- </address> +

+ <address>
+ <strong>Learners Guild</strong><br>
+ 492 Ninth Street (Garden Level)<br>
+ Oakland, CA 94607<br>
+ <abbr + title="Phone">P:</abbr> + (123) 456-7890
+ </address>

+ <address>
+ <strong>Full Name</strong><br>
+ <a + href="mailto:#">first.last@example.com</a>
+ </address> +

-
+ +

Blockquotes

@@ -213,7 +265,7 @@

Blockquotes

-
+

I love cheese, especially pepper jack cheese triangles. Fromage queso emmental who moved my cheese melted cheese edam bavarian bergkase jarlsberg. Fondue feta macaroni cheese ricotta cheese and wine feta stinking bishop stinking bishop. Cheesy feet queso queso red leicester. @@ -222,17 +274,20 @@

Blockquotes

- - <blockquote>
- <p>I love cheese, especially pepper jack cheese triangles. Fromage queso emmental who moved my cheese melted cheese edam bavarian bergkase jarlsberg. Fondue feta macaroni cheese ricotta cheese and wine feta stinking bishop stinking bishop. Cheesy feet queso queso red leicester.</p>
- </blockquote> +

+ + <blockquote>
+ <p>I love cheese, especially pepper jack cheese triangles. Fromage queso emmental who moved my cheese melted cheese edam bavarian bergkase jarlsberg. Fondue feta macaroni cheese ricotta cheese and wine feta stinking bishop stinking bishop. Cheesy feet queso queso red leicester.</p>
+ </blockquote> + +

-
+

Buttons

@@ -241,9 +296,9 @@

Buttons

<button>, or <input>element.

-
+
-
+
Link @@ -294,5 +349,6 @@

Buttons
+
diff --git a/style.css b/style.css index ceb893d..a22262c 100644 --- a/style.css +++ b/style.css @@ -4,6 +4,10 @@ body { background-image: url("https://www.transparenttextures.com/patterns/tileable-wood.png"); } +.body-content { + margin: 0px 100px 50px; +} + #main-header { background-color: #f78671; color: #f6e5d7; @@ -11,22 +15,24 @@ body { position: fixed; top: 0px; display: flex; - align-content: center; justify-content: center; + flex-direction: row; + align-items: flex-end; + padding-bottom: 20px; } -#main-header h1 { +#title { font-size: 55px; font-family: 'Raleway', sans-serif; } -#main-header h6 { +#sub-title { font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; } #headings-section { - margin-top: 200px; + margin-top: 220px; background-color: rgba(246, 299, 215, 0.3); } @@ -38,6 +44,11 @@ body { background-color: rgba(246, 299, 215, 0.3); } +small, .small { + color: #6d7370; + font-size: 0.8em; +} + #blockquotes { background-color: rgba(246, 299, 215, 0.3); } @@ -58,7 +69,7 @@ code { } address { - font-size: 14px; + font-size: 20px; line-height: 1.5; margin-bottom: 7px; font-style: normal; @@ -70,15 +81,20 @@ blockquote { font-size: 75%; margin: 0 0 20px; padding: 10px 20px; - border-left: 5px solid #e5fdfa; + border-left: 7px solid #f78671; } -.flex-container { +.flex-container.sample-text { display: flex; - flex-direction: column;; - width: 1000px; - height: 300px; - background-color: lightgrey; + flex-direction: column; + background-color: rgba(201, 210, 203, 0.8); + margin-bottom: -20px; + padding: 5px 200px; +} + +.flex-container.sample-text.buttons { + display: flex; + flex-direction: row; } .section-title { @@ -86,10 +102,8 @@ blockquote { color: #2f3733; background-color: #86baaa; text-align: center; -} - -.breakdown { - + margin-top: 0px; + border-radius: 5px; } .element-color { @@ -114,9 +128,46 @@ blockquote { margin-left: 40px; } -.vast-heading { +h1, .vast-h1 { + color: #2f3733; + font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: 2em; +} + +h2, .vast-h2 { + color: #2f3733; + font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: 1.5em; +} + +h3, .vast-h3 { + color: #2f3733; + font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: 1.17em; +} + +h4, .vast-h4 { color: #2f3733; font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: 1em; +} + +h5, .vast-h5 { + color: #2f3733; + font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: .83em; +} + +h6, .vast-h6 { + color: #2f3733; + font-family: 'Open Sans Condensed', sans-serif; + font-weight: 700; + font-size: .67em; } .vast-lead { @@ -126,32 +177,40 @@ blockquote { } .sample-code { - background-color: rgba(47, 55, 51, 1); + background-color: rgba(47, 55, 51, 0.8); color: #f6e5d7; + padding: 0px 200px 5px 200px; } -.sample-text { - font-size: 13px; - -} - - button.vast-btn, input.vast-btn { font-family: 'Raleway', sans-serif; background-color: #f78671; + color: #2f3733; margin: 5px; border-radius: 5px; width: 100px; height: 50px; font-size: 23px; - - - } -a.vast-btn { +a { font-family: 'Raleway', sans-serif; font-size: 23px; color: #6b9488; padding-right: 5px; + padding-top: 15px; +} + +.breakdown { + padding: 0px 200px; +} + +.sections { + border: 2px solid #2f3733; + border-radius: 5px; + margin-top: 50px; +} + +.secondary-section { + margin-top: 20px; }