From 38b5a620dadf1cb479b5676033e1a27b0dc1f629 Mon Sep 17 00:00:00 2001 From: Ally Kendall Date: Fri, 10 Mar 2017 19:07:54 -0800 Subject: [PATCH] cleaned up HTML and CSS --- demo.html | 529 ++++++++++++++++++++++++++---------------------------- style.css | 181 ++++++++++--------- 2 files changed, 340 insertions(+), 370 deletions(-) diff --git a/demo.html b/demo.html index 10e50ca..cd71fb0 100644 --- a/demo.html +++ b/demo.html @@ -1,212 +1,193 @@ - - - Build Your Own Bootstrap - - - - + + + Build Your Own Bootstrap + + + +

Vast CSS

'Cause Bootstrap is B.S.

-
- -
-

Headings

- -
-

To style headings in various sizes, add the - .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>h1. Vast Quoll</h1> -

-

- <h2>h2. Vast Quoll</h2> -

-

- <h3>h3. Vast Quoll</h3> -

-

- <h4>h4. Vast Quoll</h4> -

-

- <h5>h5. Vast Quoll</h5> -

-

- <h6>h6. Vast Quoll</h6> -

- -
- -
-

Secondary Headings

- +
+

Headings

-

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

To style headings in various sizes, add the + .vast-h1 through + .vast-h6 class to your inline elements or simply use the + <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. Vast Quoll

+

h2. Vast Quoll

+

h3. Vast Quoll

+

h4. Vast Quoll

+
h5. Vast Quoll
+
h6. Vast Quoll
-

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

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

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

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

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

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

- -
-
-
- -
-
-

Body copy

- -
-

Vast CSS global default - font-size is - 13px, with a - line-height of - 1.5. This is applied to the - <body> and all paragraphs. Including, - <p> (paragraphs) receive a bottom margin of 10px. -

-
- -
-

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.

+
- -
-

- <p>...</p> +

+

Secondary Headings

+
+

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

-
- -
-

Lead body copy

- -
-

Make a paragraph stand out by adding .vast-lead. -

+
+

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> +

+ +
- -
-

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. -

-
- -
- +
+
+
+

Body copy

+
+

Vast CSS global default + font-size is + 13px, with a + line-height of + 1.5. This is applied to the + <body> and all paragraphs. Including, + <p> (paragraphs) receive a bottom margin of 10px. +

+
+
+

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.

+
+

- <p - class="vast-lead">...</p>

- +
+
+
+

Lead body copy

+
+

Make a paragraph stand out by adding .vast-lead. +

+
+
+

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. +

+
+
+ +

+ <p + class="vast-lead">...</p> +

+ +
-
- -
-

Addresses

- -
-

Present contact information in our default style by using the <address> tag. Preserve your formatting by ending all lines with <br>. -

-
- -
+
+
+

Addresses

+
+

Present contact information in our default style by using the <address> tag. Preserve your formatting by ending all lines with <br>. +

+
+

Learners Guild
@@ -214,82 +195,73 @@

Addresses

Oakland, CA 94607
P: (123) 456-7890
-
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> +

+ +
+
+
+

Blockquotes

+
+

Style and content changes for simple variation on a standard <blockquote>. +

+
+
+

- <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> + 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.

- +
-
- -
-

Blockquotes

- -
-

Style and content changes for simple variation on a standard <blockquote>. -

-
- -
-
+

- 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. + + <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

- +

Buttons

Use the button classes on an <a>, @@ -297,58 +269,57 @@

Buttons

<input>element.

- -
+
Link -
-
- -

- <a - class="vast-btn" - href="#" - role="button">Link</a> -

-

- <button - class="vast-btn" - type="submit">Button</button> -

-

- <input - class="vast-btn" - type="button" - value= - "Input"> -

-

- <input - class="vast-btn" - type="submit" - value="Submit"> -

- -
-
- - + +
+ +

+ <a + class="vast-btn" + href="#" + role="button">Link</a> +

+

+ <button + class="vast-btn" + type="submit">Button</button> +

+

+ <input + class="vast-btn" + type="button" + value= + "Input"> +

+

+ <input + class="vast-btn" + type="submit" + value="Submit"> +

+ +
+ + + diff --git a/style.css b/style.css index a22262c..0d41633 100644 --- a/style.css +++ b/style.css @@ -4,57 +4,8 @@ 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; - width: 100%; - position: fixed; - top: 0px; - display: flex; - justify-content: center; - flex-direction: row; - align-items: flex-end; - padding-bottom: 20px; -} - -#title { - font-size: 55px; - font-family: 'Raleway', sans-serif; -} - -#sub-title { +code { font-family: 'Open Sans Condensed', sans-serif; - font-size: 30px; -} - -#headings-section { - margin-top: 220px; - background-color: rgba(246, 299, 215, 0.3); -} - -#body-copy { - background-color: rgba(246, 299, 215, 0.3); -} - -#address { - 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); -} - -#buttons { - background-color: rgba(246, 299, 215, 0.3); } p { @@ -64,24 +15,31 @@ p { margin-bottom: 10px; } -code { - font-family: 'Open Sans Condensed', sans-serif; +.body-content { + margin: 0px 100px 50px; } -address { - font-size: 20px; - line-height: 1.5; - margin-bottom: 7px; - font-style: normal; - font-family: 'Open Sans Condensed', sans-serif; +.sections { + border: 2px solid #2f3733; + border-radius: 5px; + margin-top: 50px; } -blockquote { - font-family: 'Open Sans Condensed', sans-serif; - font-size: 75%; - margin: 0 0 20px; - padding: 10px 20px; - border-left: 7px solid #f78671; +.secondary-section { + margin-top: 20px; +} + +.section-title { + font-family: 'Raleway', sans-serif; + color: #2f3733; + background-color: #86baaa; + text-align: center; + margin-top: 0px; + border-radius: 5px; +} + +.breakdown { + padding: 0px 200px; } .flex-container.sample-text { @@ -97,13 +55,14 @@ blockquote { flex-direction: row; } -.section-title { - font-family: 'Raleway', sans-serif; - color: #2f3733; - background-color: #86baaa; - text-align: center; - margin-top: 0px; - border-radius: 5px; +.sample-code { + background-color: rgba(47, 55, 51, 0.8); + color: #f6e5d7; + padding: 0px 200px 5px 200px; +} + +.tab { + margin-left: 40px; } .element-color { @@ -123,9 +82,48 @@ blockquote { color: #c9d2cb; } +#body-copy { + background-color: rgba(246, 299, 215, 0.3); +} -.tab { - margin-left: 40px; +#address { + background-color: rgba(246, 299, 215, 0.3); +} + +#blockquotes { + background-color: rgba(246, 299, 215, 0.3); +} + +#buttons { + background-color: rgba(246, 299, 215, 0.3); +} + +#main-header { + background-color: #f78671; + color: #f6e5d7; + width: 100%; + position: fixed; + top: 0px; + display: flex; + justify-content: center; + flex-direction: row; + align-items: flex-end; + padding-bottom: 20px; +} + +#title { + font-size: 55px; + font-family: 'Raleway', sans-serif; +} + +#sub-title { + font-family: 'Open Sans Condensed', sans-serif; + font-size: 30px; +} + +#headings-section { + margin-top: 220px; + background-color: rgba(246, 299, 215, 0.3); } h1, .vast-h1 { @@ -170,16 +168,31 @@ h6, .vast-h6 { font-size: .67em; } +small, .small { + color: #6d7370; + font-size: 0.8em; +} + .vast-lead { font-family: 'Open Sans Condensed', sans-serif; font-size: 27px; color: #828784; } -.sample-code { - background-color: rgba(47, 55, 51, 0.8); - color: #f6e5d7; - padding: 0px 200px 5px 200px; +address { + font-size: 20px; + line-height: 1.5; + margin-bottom: 7px; + font-style: normal; + font-family: 'Open Sans Condensed', sans-serif; +} + +blockquote { + font-family: 'Open Sans Condensed', sans-serif; + font-size: 75%; + margin: 0 0 20px; + padding: 10px 20px; + border-left: 7px solid #f78671; } button.vast-btn, input.vast-btn { @@ -200,17 +213,3 @@ a { 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; -}