lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update docs

intro
Jack Lukic 9 years ago
parent
c7df7a9095
commit
62aa086898
3 changed files with 214 additions and 290 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      server/documents/introduction/getting-started.html.eco
  2. 24
      server/files/javascript/home.js
  3. 273
      server/files/stylesheets/home.css

31
server/documents/introduction/getting-started.html.eco
View File

@ -14,8 +14,6 @@ type : 'Main'
<div class="main ui intro container">
<div class="ui active tab" data-tab="install">
<h2 class="ui dividing header">Preface</h2>
<div class="no example">
@ -125,21 +123,26 @@ type : 'Main'
<h4>All Set!</h4>
<p>Well done! Semantic UI is now ready to be used.</p>
<p>Here are some things to check out next</p>
<div class="ui large bulleted list">
<div class="item">See how to use <a href="/introduction/build-tools.html">gulp commands</a> and build tools</div>
<div class="item">Learn about <a href="/usage/theming.html">changing themes</a></div>
<div class="item">See <a href="/introduction/advanced-usage.html">recipes</a> for using Semantic UI in your project</div>
<div class="three column divided stackable center aligned ui grid">
<div class="column">
<div class="ui icon header">
<i class="rocket circular icon"></i>
See how to use <a href="/introduction/build-tools.html">gulp commands</a> and build tools
</div>
</div>
<div class="column">
<div class="ui icon header">
<i class="theme circular icon"></i>
Learn about <a href="/usage/theming.html">changing themes</a>
</div>
</div>
<div class="column">
<div class="ui icon header">
<i class="food circular icon"></i>
See <a href="/introduction/advanced-usage.html">recipes</a> for using Semantic UI in your project
</div>
</div>
</div>
<div class="ui tab" data-tab="packages">
<h2 class="ui dividing header">Other Distributions</h2>
<p>This section will be coming later this week...</p>
</div>
</div>

24
server/files/javascript/home.js
View File

@ -19,14 +19,16 @@ semantic.home.ready = function() {
;
handler = {
endAnimation: function() {
$header
.addClass('stopped')
;
getRandomInt: function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
introduction: function() {
var
background = 'bg' + handler.getRandomInt(1, 14)
;
// zoom out
$header
.addClass(background)
.removeClass('zoomed')
;
},
@ -200,11 +202,8 @@ semantic.home.ready = function() {
}
};
$('.logo.shape')
.shape({
duration: 400
})
;
// intro
handler.introduction();
if($(window).width() > 600) {
$('body')
@ -248,12 +247,6 @@ semantic.home.ready = function() {
position: 'bottom center'
})
;
/*
$('.following.bar .network')
.find('.item')
.on('mouseenter', handler.changeLogo)
.on('mouseleave', handler.returnLogo)
;*/
$('.email.stripe form')
.form({
@ -276,7 +269,6 @@ semantic.home.ready = function() {
;
handler.introduction();
$themeDropdown
.dropdown('setting', 'transition', 'drop')

273
server/files/stylesheets/home.css
View File

@ -26,6 +26,17 @@
Masthead
---------------*/
#example.index .masthead.segment.zoomed h1 {
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0);
color: rgba(255, 255, 255, 1);
}
#example.index .masthead.zoomed:after {
opacity: 0;
}
#example.index .masthead.zoomed {
background-color: #252D2F;
}
#example.index .masthead {
position: relative;
overflow: hidden;
@ -35,15 +46,10 @@
margin-bottom: 0px;
border-bottom: none;
background-color: #2C3432;
background-color: #202020;
background-position: 50% 50%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-ms-transition: background-color 3s ease 1s;
-moz-transition: background-color 3s ease 1s;
-webkit-transition: background-color 3s ease 1s;
transition: background-color 3s ease 1s;
}
#example.index .masthead:after {
position: absolute;
@ -53,23 +59,91 @@
width: 100%;
height: 100%;
content: '';
background: url("/images/backgrounds/2.jpg");
background-size: cover;
opacity: 0.5;
-ms-transition: opacity 3s ease 0s;
-moz-transition: opacity 3s ease 0s;
-webkit-transition: opacity 3s ease 0s;
transition: opacity 3s ease 0s;
opacity: 0.3;
}
#example.index .masthead.bg1:after {
background-image: url("/images/backgrounds/1.jpg");
}
#example.index .masthead.bg2:after {
background-image: url("/images/backgrounds/2.jpg");
}
#example.index .masthead.bg3:after {
background-image: url("/images/backgrounds/3.jpg");
}
#example.index .masthead.bg4:after {
background-image: url("/images/backgrounds/4.jpg");
}
#example.index .masthead.bg5:after {
background-image: url("/images/backgrounds/5.jpg");
}
#example.index .masthead.bg6:after {
background-image: url("/images/backgrounds/6.jpg");
}
#example.index .masthead.bg7:after {
background-image: url("/images/backgrounds/7.jpg");
}
#example.index .masthead.bg8:after {
background-image: url("/images/backgrounds/8.jpg");
}
#example.index .masthead.bg9:after {
background-image: url("/images/backgrounds/9.jpg");
}
#example.index .masthead.bg10:after {
background-image: url("/images/backgrounds/10.jpg");
}
#example.index .masthead.bg11:after {
background-image: url("/images/backgrounds/11.jpg");
}
#example.index .masthead.bg12:after {
background-image: url("/images/backgrounds/12.jpg");
}
#example.index .masthead.bg13:after {
background-image: url("/images/backgrounds/13.jpg");
}
#example.index .masthead.bg14:after {
background-image: url("/images/backgrounds/14.jpg");
}
#example.index .masthead,
#example.index .masthead:after {
-ms-transition:
background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,
opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s
;
-moz-transition:
background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,
opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s
;
-webkit-transition:
background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,
opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s
;
transition:
background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s,
opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) 0s
;
}
#example.index .masthead .container {
height: 65vh;
margin-left: auto !important;
margin-right: auto !important;
}
#example.index .masthead.zoomed:after {
opacity: 0;
min-height: 600px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
#example .masthead .container {
padding: 15rem 0em;
@ -91,158 +165,6 @@
padding-left: 0em;
}
/* Animation */
/*#example.index .masthead:before {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0%;
left: 0px;
content: '';
background: url(/images/before.jpg);
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation-name: masthead;
-moz-animation-name: masthead;
-o-animation-name: masthead;
animation-name: masthead;
-ms-transition: opacity 2.5s ease-in-out, transform 5s ease-in-out;
-webkit-transition: opacity 2.5s ease-in-out, transform 5s ease-in-out;
-moz-transition: opacity 2.5s ease-in-out, transform 5s ease-in-out;
transition: opacity 2.5s ease-in-out, transform 5s ease-in-out;
opacity: 0;
-webkit-animation-duration: 15s;
-moz-animation-duration: 15s;
-ms-animation-duration: 15s;
-o-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#example.index .masthead:after {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0%;
left: 0px;
content: '';
background: url(/images/ui.png);
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation-name: masthead;
-moz-animation-name: masthead;
-o-animation-name: masthead;
animation-name: masthead;
-ms-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
-webkit-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
-moz-transition: opacity 3s ease-in-out, transform 5s ease-in-out;
transition: opacity 3s ease-in-out, transform 5s ease-in-out;
opacity: 0.06;
-webkit-animation-duration: 15s;
-moz-animation-duration: 15s;
-ms-animation-duration: 15s;
-o-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#example .masthead.zoomed:before {
opacity: 0.05;
-webkit-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
-moz-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
}
#example.index .masthead.zoomed:after {
opacity: 0;
-webkit-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateY(-6%) translateZ(0px);
-moz-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateY(-6%) translateZ(0px);
transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateY(-6%) translateZ(0px);
}
@keyframes masthead {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
}
@-moz-keyframes masthead {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
}
@-webkit-keyframes masthead {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
}
@-ms-keyframes masthead {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
}
@-o-keyframes masthead {
0% {
background-position: 0% 0%;
}
100% {
background-position: 0% -475px;
}
}
*/
#example.index .light.following.bar {
padding: 1em 0em;
background-color: #FFFFFF;
@ -291,7 +213,7 @@
#example.index .masthead.segment h1 {
font-size: 3em;
color: #FFFFFF;
color: rgba(255, 255, 255, 1);
line-height: 1.2;
margin: 0px 0px 0px;
padding-bottom: 0px;
@ -308,18 +230,15 @@
#example.index .masthead.segment h1 > .library {
display: block;
font-size: 1.75em;
color: #FFFFFF;
font-weight: bold;
}
#example.index .masthead.segment h1 b {
display: inline-block;
font-weight: 500;
color: #FFFFFF;
}
#example.index .masthead.segment h1 .text {
display: inline-block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
margin-left: -0.4em;
}
#example.index .masthead h2 {
@ -751,6 +670,7 @@
#example.index .main.menu {
display: none;
}
#example.index .fixed.launch.button {
display: none;
}
@ -760,6 +680,9 @@
/* Homepage */
@media only screen and (max-width : 810px) {
#example.index .masthead.segment h1 > .library {
font-size: 1.75em;
}
#example.index .feature.stripe p {
height: auto;
min-height: 0px;
@ -771,6 +694,9 @@
#example .solid, #example .stripe {
padding: 6em 0em;
}
#example.index .masthead .container {
margin-top: 50px;
}
#example.index .following.bar span.additional.item {
display: none;
visibility: hidden !important;
@ -778,6 +704,9 @@
#example.index .following.bar .network.menu .view-ui {
margin-right: 0.75em;
}
#example.index .masthead .container {
min-height: 350px;
}
}

Write Preview
Loading…
Cancel
Save