diff --git a/server/documents/index.html.eco b/server/documents/index.html.eco index a1816fd98..d6831ab06 100755 --- a/server/documents/index.html.eco +++ b/server/documents/index.html.eco @@ -16,23 +16,46 @@ type : 'Semantic'
+ + Version 1.0.0 Beta +
UI Library - + + + Learn + + Themes - + Layouts - - - Help - +
@@ -42,9 +65,6 @@ type : 'Semantic'

Semantic UI - - 1.0.0 -

UI is the vocabulary of the web. @@ -72,7 +92,7 @@ type : 'Semantic'

- 50+ Components + 50+ UI Definitions

Everything you need to make a website on your own without being a UI designer.

@@ -81,11 +101,11 @@ type : 'Semantic' 3000+ CSS Variables

-

Semantic provides neutral defaults and enough customization options to make every design look fresh.

+

Everything arbitrary is changable. Three levels of theming inheritance.

- + 2+ Years in the Making

Semantic is a mature tool, used in multiple large scale production environments like The New Republic magazine.

@@ -93,15 +113,17 @@ type : 'Semantic'
-
-
-

Unbelievable Theming

-

Do more than just change the colors. Semantic provides true freedom. Change the look and feel of your components with just a few variables.

+
+
+

+ + Unbelievable Theming +

+

Semantic provides true design freedom. Change the look and feel of your components with just a few variables.

-
-
- - Select Theme +
+
+ Select Theme
-
-
+
+
-
-
+
+
-
+

Code Intuitively

-

Use concepts like plurality, adjective/noun relation, and word-order to create meaning

+

Semantic uses concepts like nouns (types), adjectives (variations), and tense (states) to create UI definitions

-
-

Code Intuitively

-

Use concepts like plurality, adjective/noun relation, and word-order to create meaning

+
+

+ + Code Intuitively +

+

Semantic uses concepts like nouns (types), adjectives (variations), and tense (states) to create UI definitions

@@ -158,7 +188,7 @@ type : 'Semantic'

- + Liberate your Development

diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index 87eb9b90e..219a22e31 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -52,7 +52,7 @@ semantic.ready = function() { $pageTabMenu = $('.tab.header.segment .tabular.menu'), $pageTabs = $('.tab.header.segment .menu .item'), - $languageDropdown = $('.ui.main.menu .language.dropdown'), + $languageDropdown = $('.language.dropdown'), $languageModal = $('.language.modal'), $downloadDropdown = $('.download.buttons .dropdown'), @@ -192,6 +192,30 @@ semantic.ready = function() { } }, + showLanguageModal: function(value, text, $choice) { + var + percent = $choice.data('percent') || 0 + ; + window.Transifex.live.translateTo(value, true); + if(percent < 100) { + $('.language.modal') + .find('.header .name') + .html(text) + .end() + .find('.complete') + .html(percent) + .end() + ; + requestAnimationFrame(function() { + $('.language.modal') + .modal('show', function() { + $('.language.modal .progress .bar').css('width', percent + '%'); + }) + ; + }); + } + }, + tryCreateMenu: function(event) { if($(window).width() > 1000) { if($container.find('.following.menu').size() === 0) { @@ -381,6 +405,16 @@ semantic.ready = function() { urlData : urlData, onSuccess: function(content) { less.modifyVars( handler.less.parseFile(content) ); + /*if($('.less.column').size() > 0) { + var $code = $('
') + .addClass('code') + .attr('data-type', 'less') + .attr('data-title', 'button.variables') + .html(content) + ; + $('.less.column').html($code); + $.proxy(handler.initializeCode, $code)(); + }*/ $themeDropdown .api({ on : 'now', @@ -500,8 +534,6 @@ semantic.ready = function() { if($body.hasClass('overview')) { handler.overviewMode(); } - $developer.addClass('active'); - $designer.removeClass('active'); $example .each(function() { $.proxy(handler.createCode, $(this))('developer'); @@ -517,8 +549,6 @@ semantic.ready = function() { if($body.hasClass('overview')) { handler.overviewMode(); } - $designer.addClass('active'); - $developer.removeClass('active'); $example .each(function() { $.proxy(handler.createCode, $(this))('designer'); @@ -908,13 +938,7 @@ semantic.ready = function() { $swap .on('click', handler.swapStyle) ; -/* - $developer - .on('click', handler.developerMode) - ; - $designer - .on('click', handler.designerMode) - ;*/ + $overview .on('click', handler.overviewMode) ; @@ -942,40 +966,30 @@ semantic.ready = function() { onShow: function() { $(this).popup('hide'); }, - onChange: function(value, text, $choice) { - var - percent = $choice.data('percent') || 0 - ; - window.Transifex.live.translateTo(value, true); - if(percent < 100) { - $('.language.modal') - .find('.header .name') - .html(text) - .end() - .find('.complete') - .html(percent) - .end() - ; - requestAnimationFrame(function() { - $('.language.modal') - .modal('show', function() { - $('.language.modal .progress .bar').css('width', percent + '%'); - }) - ; - }); - } - } + onChange: handler.showLanguageModal }) ; if($('body').hasClass('index') ) { + + $themeDropdown + .dropdown('setting', 'action', 'activate') + ; $(window) .one('scroll', function() { $('.masthead').addClass('zoomed'); }) ; + $('.masthead') + .visibility({ + continuous: true, + onPassing: function(calculations) { + //$(this).css('opacity', 1 - calculations.percentagePassed); + } + }) + ; $('.fixed.launch.button') .visibility({ offset: 50, diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 9cda0e6d3..1ba86e8d5 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -574,10 +574,8 @@ body#example.hide { #example.index .introduction .buttons { margin-top: 3em; } -#example.index .introduction .label { - position: absolute; - margin-left: 2em; - top: 2em +#example.index .following .version.label { + margin: 0.25em 0px 0px 1em; } #example.index .introduction { text-align: center; @@ -653,7 +651,7 @@ body#example.hide { width: 100%; } #example.index .stripe .grid .row { - padding: 5rem 0rem; + margin: 2rem 0rem; } #example.index .inverted.stripe { background-color: #1B1C1D; @@ -668,6 +666,12 @@ body#example.hide { #example .alternate.stripe { background-color: #F2F3F5; } +#example .stripe .ui.vertical.divider { + font-size: 1rem; +} +#example.index .stripe .icon.header i.icon { + font-size: 2em; +} /* content */ #example .solid, @@ -684,6 +688,9 @@ body#example.hide { #example .stripe h3 { font-size: 20px; } +#example .stripe .buttons { + vertical-align: top; +} #example .stripe .button { margin-bottom: 0.5em; }