diff --git a/server/documents/elements/header.html.eco b/server/documents/elements/header.html.eco index 35282cc81..88ab1cbda 100755 --- a/server/documents/elements/header.html.eco +++ b/server/documents/elements/header.html.eco @@ -26,6 +26,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']

Account Settings

+
@@ -35,6 +36,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby'] Account Settings
Manage your account settings and set e-mail preferences.
+

@@ -44,6 +46,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Manage your account settings and set e-mail preferences.

+
@@ -56,6 +59,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Manage your account settings and set e-mail preferences.
+ @@ -64,20 +68,20 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']

Headers may be oriented to give the heirarchy of a section in the context of the page

Page headings size themselves relative to the base font of the entire page not the surrounding text.
- Base Font - Base Font + Base Font + Base Font
-
+

First header

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Second header

-

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Third header

-

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

+

Fourth header

-

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

+
Fifth header
-

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

+
@@ -86,20 +90,20 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']

Headers may be oriented to give the importance of a section in the context of the content that surrounds it

Content headings size themselves relative to the base font of the surrounding text
- Base Font - Base Font + Base Font + Base Font
-
+
Huge Header
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
Large Header
-

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+
Medium Header
-

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

+
Small Header
-

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

+
Tiny Header
-

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

+
@@ -111,6 +115,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Disabled Header
+

Variations

@@ -119,12 +124,11 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']

Dividing

A header can be formatted to divide itself from the content below it

+

- The nature of dogs + Dividing Header

-

Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.

-

When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!

-

Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.

+
@@ -134,29 +138,28 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']

Block Header

-

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +

Attached

A header can be attached to other content, like a segment

-
- Bulldog -
+

+ Top Attached +

-

Bulldog is the name for a breed of dog commonly referred to as the English Bulldog. Other Bulldog breeds include the American Bulldog, Old English Bulldog (now extinct), Olde English Bulldogge, and the French Bulldog. The Bulldog is a muscular, heavy dog with a wrinkled face and a distinctive pushed-in nose.

-

The American Kennel Club (AKC), The Kennel Club (UK), and the United Kennel Club (UKC) oversee breeding standards. Bulldogs are the 5th most popular purebreed in the United States in 2013 according to the American Kennel Club.

+
-
- Catahoula Cur -
+

+ Attached +

-

The Catahoula Cur is an American dog breed named after Catahoula Parish, in the state of Louisiana, in the United States. After becoming the state dog of Louisiana in 1979, its name was officially changed to Louisiana Catahoula Leopard Dog. The Catahoula is believed to be the first dog breed developed in North America.

-

The breed is sometimes referred to as the "Catahoula Hound" or "Catahoula Leopard Hound", although it is not a true hound, but a cur. It is also called the "Catahoula Hog Dog", reflecting its traditional use in hunting wild boar.

+
-
- Thanks for reading -
+

+ Bottom Attached +

@@ -195,27 +198,21 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']

A header can be formatted with different colors

Black -
An excellent color

Blue -
An excellent color

Red -
An excellent color

Green -
An excellent color

Purple -
An excellent color

Teal -
An excellent color

diff --git a/server/documents/elements/image.html.eco b/server/documents/elements/image.html.eco index 46c544a3f..f8cfa1ba3 100755 --- a/server/documents/elements/image.html.eco +++ b/server/documents/elements/image.html.eco @@ -20,15 +20,17 @@ themes : ['Default']

Image

An image

-
Images will, by default, take up the same size as the original image. Specifying an image size will force an image to only take up a specific size.
- +
+ Unless a size if specified, images will use the original dimensions of the image, with a maximum width of its container size max-width: 100%. +
+

Image Link

An image can be formatted to link to other content

- +
@@ -39,7 +41,7 @@ themes : ['Default']

Disabled

An image can show that it is disabled and cannot be selected

- +

Variations

@@ -47,60 +49,116 @@ themes : ['Default']

Avatar

An image may be formatted to appear inline with text as an avatar

- Dog Doggington + Username +
+ +
+

Bordered

+

An image may include a border to emphasize the edges of white or transparent content

+

Rounded

An image may appear rounded

- +

Circular

An image may appear circular

- +
+

Vertically Aligned

- Dog Doggington + Top Aligned
- Dog Doggington + Middle Aligned
- Dog Doggington + Bottom Aligned

Floated

An image can sit to the left or right of other content

- -

Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.

- -

Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.

+ +

Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.

+ +

Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.

-

Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.

+

Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.

Sizes

-

An image may be formatted to be different sizes

- -
- -
- -
- -
- -
- -
- -
- +

An image may appear at different sizes

+
+ Semantic uses arbitrary default values for image sizes from mini to massive. It is recommended to update these with values used in your project in image.variables. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Class NameSize
Mini20px
Tiny80px
Small150px
Medium300px
Large450px
Big600px
Huge800px
Massive960px
+ + + + + + + + +
+ + + + + + + + +
+
@@ -110,19 +168,19 @@ themes : ['Default']

Sizes

A group of images can be formatted to have the same size.

-
- - - - +
+ + + +
-
- - - - +
+ + + +
diff --git a/server/files/images/animals/2033_m3.jpg b/server/files/images/animals/moose-love.jpg old mode 100755 new mode 100644 similarity index 100% rename from server/files/images/animals/2033_m3.jpg rename to server/files/images/animals/moose-love.jpg diff --git a/server/files/images/animals/2032_m3.jpg b/server/files/images/animals/moose.jpg old mode 100755 new mode 100644 similarity index 100% rename from server/files/images/animals/2032_m3.jpg rename to server/files/images/animals/moose.jpg diff --git a/server/files/images/animals/2045_m3.jpg b/server/files/images/animals/poney.jpg old mode 100755 new mode 100644 similarity index 100% rename from server/files/images/animals/2045_m3.jpg rename to server/files/images/animals/poney.jpg diff --git a/server/files/images/leaves/10.png b/server/files/images/leaves/10.png index d70ea4e31..318946f6c 100755 Binary files a/server/files/images/leaves/10.png and b/server/files/images/leaves/10.png differ diff --git a/server/files/images/wireframe/centered-paragraph.png b/server/files/images/wireframe/centered-paragraph.png new file mode 100644 index 000000000..ea15612a9 Binary files /dev/null and b/server/files/images/wireframe/centered-paragraph.png differ diff --git a/server/files/images/wireframe/image-square.png b/server/files/images/wireframe/image-square.png new file mode 100644 index 000000000..246405c63 Binary files /dev/null and b/server/files/images/wireframe/image-square.png differ diff --git a/server/files/images/wireframe/image-text.png b/server/files/images/wireframe/image-text.png new file mode 100644 index 000000000..50a718581 Binary files /dev/null and b/server/files/images/wireframe/image-text.png differ diff --git a/server/files/images/wireframe/image.png b/server/files/images/wireframe/image.png new file mode 100644 index 000000000..11ce432e9 Binary files /dev/null and b/server/files/images/wireframe/image.png differ diff --git a/server/files/images/wireframe/media-paragraph-alt.png b/server/files/images/wireframe/media-paragraph-alt.png new file mode 100644 index 000000000..de79fc99f Binary files /dev/null and b/server/files/images/wireframe/media-paragraph-alt.png differ diff --git a/server/files/images/wireframe/media-paragraph.png b/server/files/images/wireframe/media-paragraph.png new file mode 100644 index 000000000..a2e5e24fd Binary files /dev/null and b/server/files/images/wireframe/media-paragraph.png differ diff --git a/server/files/images/wireframe/paragraph.png b/server/files/images/wireframe/paragraph.png new file mode 100644 index 000000000..d02b66dbb Binary files /dev/null and b/server/files/images/wireframe/paragraph.png differ diff --git a/server/files/images/wireframe/short-paragraph.png b/server/files/images/wireframe/short-paragraph.png new file mode 100644 index 000000000..408acea69 Binary files /dev/null and b/server/files/images/wireframe/short-paragraph.png differ diff --git a/server/files/images/wireframe/square-image.png b/server/files/images/wireframe/square-image.png new file mode 100644 index 000000000..5a2644e69 Binary files /dev/null and b/server/files/images/wireframe/square-image.png differ diff --git a/server/files/images/wireframe/text-image.png b/server/files/images/wireframe/text-image.png new file mode 100644 index 000000000..f3e108cc3 Binary files /dev/null and b/server/files/images/wireframe/text-image.png differ diff --git a/server/files/images/wireframe/white-image.png b/server/files/images/wireframe/white-image.png new file mode 100644 index 000000000..b9d0d3e87 Binary files /dev/null and b/server/files/images/wireframe/white-image.png differ diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index 591bfc67f..409b617d7 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -223,7 +223,7 @@ semantic.ready = function() { }, tryCreateMenu: function(event) { - if($(window).width() > 1000) { + if($(window).width() > 640) { if($container.find('.following.menu').size() === 0) { handler.createMenu(); handler.createWaypoints(); diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 666496b25..d1c5d6518 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -1091,6 +1091,13 @@ body.progress.animated .ui.progress .bar { height: 165px; vertical-align: middle; } +/*-------------- + Header +---------------*/ + +#example.header .sizer { + padding: 1rem 0em; +} /*-------------- Flag diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco index e4e7d4e82..b5b5b669b 100755 --- a/server/layouts/default.html.eco +++ b/server/layouts/default.html.eco @@ -185,7 +185,7 @@ - UI Docs + UI Docs
Download