jlukic
10 years ago
50 changed files with 931 additions and 131 deletions
@ -0,0 +1,198 @@ |
|||||
|
--- |
||||
|
layout : 'default' |
||||
|
css : 'custom' |
||||
|
title : 'Download' |
||||
|
description : 'Create a custom build of Semantic for your website' |
||||
|
type : 'Semantic' |
||||
|
--- |
||||
|
|
||||
|
<script src="/javascript/customize.js"></script> |
||||
|
<link rel="stylesheet" type="text/css" href="/stylesheets/customize.css"> |
||||
|
|
||||
|
<% uiElements = @getCollection("uiElements").toJSON() %> |
||||
|
<% uiCollections = @getCollection("uiCollections").toJSON() %> |
||||
|
<% uiViews = @getCollection("uiViews").toJSON() %> |
||||
|
<% uiModules = @getCollection("uiModules").toJSON() %> |
||||
|
|
||||
|
<%- @partial('header') %> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
if(window.semantic === undefined) { |
||||
|
window.semantic = {}; |
||||
|
} |
||||
|
if(window.semantic.config === undefined) { |
||||
|
window.semantic.config = {}; |
||||
|
} |
||||
|
|
||||
|
window.semantic.config.packages = { |
||||
|
basic: { |
||||
|
|
||||
|
}, |
||||
|
standard: { |
||||
|
|
||||
|
}, |
||||
|
premium: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<div class="main container"> |
||||
|
<h2 class="ui header">Configurations</h2> |
||||
|
<div class="ui info icon message"> |
||||
|
<i class="circle help icon"></i> |
||||
|
<div class="content"> |
||||
|
<div class="header">Choosing a package</div> |
||||
|
<p> |
||||
|
Semantic is not a stand-alone library, but many separate components.</code> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="ui basic segment"> |
||||
|
<div class="ui two item secondary pointing menu"> |
||||
|
<div class="link item"> |
||||
|
<div class="ui header"> |
||||
|
Basic |
||||
|
</div> |
||||
|
1 Theme, CSS Only |
||||
|
</div> |
||||
|
<div class="active link item"> |
||||
|
<div class="ui header"> |
||||
|
Pro |
||||
|
</div> |
||||
|
LESS + Build System |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h2 class="ui header">Components</h2> |
||||
|
|
||||
|
<div class="ui basic accordion segment"> |
||||
|
|
||||
|
<h3 class="ui header active title"> |
||||
|
<i class="dropdown icon"></i> |
||||
|
Elements |
||||
|
</h3> |
||||
|
<div class="ui active content"> |
||||
|
<div class="ui download divided selection list"> |
||||
|
<% for element in uiElements: %> |
||||
|
<div class="item"> |
||||
|
<div class="ui checkbox"> |
||||
|
<input type="checkbox" checked="checked" name="<%= element.element %>" /> |
||||
|
<label></label> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<a class="ui right floated compact basic icon button" href="<%= element.url %>" target="_blank" data-content="View definition"> |
||||
|
<i class="docs book icon"></i> |
||||
|
</a> |
||||
|
<div class="ui small header"> |
||||
|
<%= element.title %> |
||||
|
<% if element.status?: %> |
||||
|
<span class="ui empty circular yellow label" data-content="This module is undocumented"></span> |
||||
|
<% end %> |
||||
|
</div> |
||||
|
<div class="description"> |
||||
|
<%= element.description %> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<% end %> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h3 class="ui header active title"> |
||||
|
<i class="dropdown icon"></i> |
||||
|
Collections |
||||
|
</h3> |
||||
|
<div class="ui active content"> |
||||
|
<div class="ui download divided selection list"> |
||||
|
<% for collection in uiCollections: %> |
||||
|
<div class="item"> |
||||
|
<div class="ui checkbox"> |
||||
|
<input type="checkbox" checked="checked" name="<%= collection.element %>" /> |
||||
|
<label></label> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<a class="ui right floated compact basic icon button" href="<%= collection.url %>target="_blank" " data-content="View definition"> |
||||
|
<i class="docs book icon"></i> |
||||
|
</a> |
||||
|
<div class="ui small header"> |
||||
|
<%= collection.title %> |
||||
|
<% if collection.status?: %> |
||||
|
<span class="ui empty circular yellow label" data-content="This module is undocumented"></span> |
||||
|
<% end %> |
||||
|
</div> |
||||
|
<div class="description"> |
||||
|
<%= collection.description %> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<% end %> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h3 class="ui header active title"> |
||||
|
<i class="dropdown icon"></i> |
||||
|
Views |
||||
|
</h3> |
||||
|
<div class="ui active content"> |
||||
|
<div class="ui download divided selection list"> |
||||
|
<% for view in uiViews: %> |
||||
|
<div class="item"> |
||||
|
<div class="ui checkbox"> |
||||
|
<input type="checkbox" checked="checked" name="<%= view.element %>" /> |
||||
|
<label></label> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<a class="ui right floated compact basic icon button" href="<%= view.url %>" target="_blank" data-content="View definition"> |
||||
|
<i class="docs book icon"></i> |
||||
|
</a> |
||||
|
<div class="ui small header"> |
||||
|
<%= view.title %> |
||||
|
<% if view.status?: %> |
||||
|
<span class="ui empty circular yellow label" data-content="This module is undocumented"></span> |
||||
|
<% end %> |
||||
|
</div> |
||||
|
<div class="description"> |
||||
|
<%= view.description %> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<% end %> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h3 class="ui header active title"> |
||||
|
<i class="dropdown icon"></i> |
||||
|
Modules |
||||
|
</h3> |
||||
|
<div class="ui active content"> |
||||
|
<div class="ui download divided selection list"> |
||||
|
<% for module in uiModules: %> |
||||
|
<div class="item"> |
||||
|
<div class="ui checkbox"> |
||||
|
<input type="checkbox" checked="checked" name="<%= module.element %>" /> |
||||
|
<label></label> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<a class="ui right floated compact basic icon button" href="<%= module.url %>" target="_blank" data-content="View definition"> |
||||
|
<i class="docs book icon"></i> |
||||
|
</a> |
||||
|
<div class="ui small header"> |
||||
|
<%= module.title %> |
||||
|
<% if module.status?: %> |
||||
|
<span class="ui empty circular yellow label" data-content="This module is undocumented"></span> |
||||
|
<% end %> |
||||
|
</div> |
||||
|
<div class="description"> |
||||
|
<%= module.description %> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<% end %> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,49 @@ |
|||||
|
semantic.customize = {}; |
||||
|
|
||||
|
// ready event
|
||||
|
semantic.customize.ready = function() { |
||||
|
|
||||
|
var |
||||
|
$accordion = $('.main.container .ui.accordion'), |
||||
|
$choice = $('.download .item'), |
||||
|
$popup = $('.main.container [data-content]'), |
||||
|
$checkbox = $('.download .item .checkbox'), |
||||
|
handler = {} |
||||
|
; |
||||
|
|
||||
|
$choice |
||||
|
.on('click', function() { |
||||
|
$(this) |
||||
|
.find($checkbox) |
||||
|
.checkbox('toggle') |
||||
|
; |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
$checkbox |
||||
|
.checkbox() |
||||
|
; |
||||
|
|
||||
|
$accordion |
||||
|
.accordion({ |
||||
|
duration: 0, |
||||
|
exclusive: false, |
||||
|
onChange: function() { |
||||
|
$('.ui.sticky').sticky('refresh'); |
||||
|
} |
||||
|
}) |
||||
|
; |
||||
|
|
||||
|
|
||||
|
$popup |
||||
|
.popup() |
||||
|
; |
||||
|
|
||||
|
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
// attach ready event
|
||||
|
$(document) |
||||
|
.ready(semantic.customize.ready) |
||||
|
; |
||||
@ -0,0 +1,44 @@ |
|||||
|
/******************************* |
||||
|
Customizer |
||||
|
*******************************/ |
||||
|
|
||||
|
#example.custom .download.list { |
||||
|
border: 1px solid rgba(0, 0, 0, 0.15); |
||||
|
border-radius: 0.25em; |
||||
|
} |
||||
|
|
||||
|
#example.custom .download.list .checkbox + .content { |
||||
|
opacity: 0.6; |
||||
|
transition: opacity 0.3s ease; |
||||
|
} |
||||
|
#example.custom .download.list .checkbox + .content .header { |
||||
|
transition: color 0.3s ease; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
#example.custom .download.list .checkbox.checked + .content { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
#example.custom .download.list .checkbox.checked + .content .header { |
||||
|
color: #000000; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
/* Element Lists */ |
||||
|
#example.custom .download.list .item > .checkbox { |
||||
|
display: block; |
||||
|
float: left; |
||||
|
margin-top: 0.75em; |
||||
|
margin-left: 0.5em; |
||||
|
} |
||||
|
#example.custom .download.list .item > .content { |
||||
|
margin-left: 3em; |
||||
|
} |
||||
|
#example.custom .download.list .item .icon.button { |
||||
|
opacity: 0; |
||||
|
margin: 0.3em 0.3em 0em 0em; |
||||
|
transition: opacity 0.5s ease; |
||||
|
} |
||||
|
#example.custom .download.list .item:hover .icon.button { |
||||
|
opacity: 1; |
||||
|
} |
||||
@ -0,0 +1,509 @@ |
|||||
|
/******************************* |
||||
|
Homepage |
||||
|
*******************************/ |
||||
|
|
||||
|
#example.index .pusher > .page { |
||||
|
background-color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Masthead |
||||
|
---------------*/ |
||||
|
|
||||
|
#example.index .masthead { |
||||
|
-webkit-transform-style: preserve-3d; |
||||
|
-moz-transform-style: preserve-3d; |
||||
|
-o-transform-style: preserve-3d; |
||||
|
-ms-transform-style: preserve-3d; |
||||
|
transform-style: preserve-3d; |
||||
|
|
||||
|
-webkit-perspective: 1000px; |
||||
|
-moz-perspective: 1000px; |
||||
|
-o-perspective: 1000px; |
||||
|
-ms-perspective: 1000px; |
||||
|
perspective: 1000px; |
||||
|
} |
||||
|
#example.index .masthead:before { |
||||
|
position: absolute; |
||||
|
z-index: 1; |
||||
|
width: 150%; |
||||
|
height: 200%; |
||||
|
top: -25%; |
||||
|
left: 0px; |
||||
|
content: ''; |
||||
|
background: url(../images/icons-inverted.png); |
||||
|
|
||||
|
-moz-transform-origin: 50% 50%; |
||||
|
-o-transform-origin: 50% 50%; |
||||
|
-ms-transform-origin: 50% 50%; |
||||
|
transform-origin: 50% 50%; |
||||
|
|
||||
|
-webkit-transform-style: preserve-3d; |
||||
|
-moz-transform-style: preserve-3d; |
||||
|
-o-transform-style: preserve-3d; |
||||
|
-ms-transform-style: preserve-3d; |
||||
|
transform-style: preserve-3d; |
||||
|
|
||||
|
-webkit-animation-name: masthead; |
||||
|
-moz-animation-name: masthead; |
||||
|
-o-animation-name: masthead; |
||||
|
animation-name: masthead; |
||||
|
|
||||
|
-ms-transition: opacity 5s ease-in-out, transform 5s ease-in-out; |
||||
|
-webkit-transition: opacity 5s ease-in-out, transform 5s ease-in-out; |
||||
|
-moz-transition: opacity 5s ease-in-out, transform 5s ease-in-out; |
||||
|
transition: opacity 5s ease-in-out, transform 5s ease-in-out; |
||||
|
|
||||
|
opacity: 0.08; |
||||
|
|
||||
|
-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; |
||||
|
|
||||
|
-webkit-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px); |
||||
|
-moz-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px); |
||||
|
transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px); |
||||
|
} |
||||
|
#example.index .masthead { |
||||
|
-ms-transition: background-color 3s ease-in-out 2s; |
||||
|
-moz-transition: background-color 3s ease-in-out 2s; |
||||
|
-webkit-transition: background-color 3s ease-in-out 2s; |
||||
|
transition: background-color 3s ease-in-out 2s; |
||||
|
background-color: #00B5AD; |
||||
|
background-image: radial-gradient(farthest-corner, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.95)); |
||||
|
} |
||||
|
#example.index .masthead.zoomed { |
||||
|
background-color: #444444; |
||||
|
} |
||||
|
#example .masthead.zoomed:before { |
||||
|
opacity: 0.15; |
||||
|
-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); |
||||
|
} |
||||
|
|
||||
|
@keyframes masthead { |
||||
|
0% { |
||||
|
background-position: 0% 0%; |
||||
|
} |
||||
|
100% { |
||||
|
background-position: 0% -410px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@-moz-keyframes masthead { |
||||
|
0% { |
||||
|
background-position: 0% 0%; |
||||
|
} |
||||
|
100% { |
||||
|
background-position: 0% -410px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@-webkit-keyframes masthead { |
||||
|
0% { |
||||
|
background-position: 0% 0%; |
||||
|
} |
||||
|
100% { |
||||
|
background-position: 0% -410px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@-ms-keyframes masthead { |
||||
|
0% { |
||||
|
background-position: 0% 0%; |
||||
|
} |
||||
|
100% { |
||||
|
background-position: 0% -410px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-o-keyframes masthead { |
||||
|
0% { |
||||
|
background-position: 0% 0%; |
||||
|
} |
||||
|
100% { |
||||
|
background-position: 0% -410px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
#example.index .masthead.segment .typed-cursor { |
||||
|
position: relative; |
||||
|
top: -0.05em; |
||||
|
left: -0.25em; |
||||
|
opacity: 1; |
||||
|
-webkit-animation: blink 0.7s infinite; |
||||
|
-moz-animation: blink 0.7s infinite; |
||||
|
animation: blink 0.7s infinite; |
||||
|
} |
||||
|
@keyframes blink { |
||||
|
0% { opacity:1; } |
||||
|
50% { opacity:0; } |
||||
|
100% { opacity:1; } |
||||
|
} |
||||
|
@-webkit-keyframes blink { |
||||
|
0% { opacity:1; } |
||||
|
50% { opacity:0; } |
||||
|
100% { opacity:1; } |
||||
|
} |
||||
|
@-moz-keyframes blink { |
||||
|
0% { opacity:1; } |
||||
|
50% { opacity:0; } |
||||
|
100% { opacity:1; } |
||||
|
} |
||||
|
|
||||
|
|
||||
|
#example.index .masthead { |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
color: rgba(255, 255, 255, 0.9); |
||||
|
margin-bottom: 0px; |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
#example.index .masthead.segment h1 { |
||||
|
font-size: 3em; |
||||
|
color: rgba(255, 255, 255, 0.5); |
||||
|
line-height: 1.2; |
||||
|
margin: 0px 0px 0px; |
||||
|
padding-bottom: 0px; |
||||
|
-moz-perspective: 500px; |
||||
|
-webkit-perspective: 500px; |
||||
|
perspective: 500px; |
||||
|
-moz-transform-style: preserve-3d; |
||||
|
-webkit-transform-style: preserve-3d; |
||||
|
transform-style: preserve-3d; |
||||
|
} |
||||
|
#example.index .masthead.segment h1 > .library { |
||||
|
visibility: hidden; |
||||
|
display: block; |
||||
|
font-size: 1.75em; |
||||
|
color: #FFFFFF; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
#example.index .masthead.segment h1 b { |
||||
|
display: inline-block; |
||||
|
font-weight: 300; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
#example.index .masthead.segment h1 .text { |
||||
|
display: inline-block; |
||||
|
font-weight: 300; |
||||
|
margin-left: -0.4em; |
||||
|
} |
||||
|
#example.index .masthead h2 { |
||||
|
font-weight: normal; |
||||
|
margin: 0px 0 16px 0px; |
||||
|
font-size: 1.75em; |
||||
|
border-bottom: none; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
#example.index .masthead p { |
||||
|
font-size: 1.5em; |
||||
|
margin: 1em 0em 1.5em; |
||||
|
padding: 0px; |
||||
|
} |
||||
|
#example.index .ui.header { |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
#example.index .introduction { |
||||
|
position: relative; |
||||
|
clear: both; |
||||
|
display: block; |
||||
|
text-align: center; |
||||
|
margin: 15rem 0rem; |
||||
|
} |
||||
|
#example.index .introduction .buttons { |
||||
|
margin-top: 3em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
#example.index .advertisement { |
||||
|
padding-left: 0; |
||||
|
position: absolute; |
||||
|
left: auto; |
||||
|
right: 6em; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
#example.index .fixed.launch.button { |
||||
|
background-color: #00b5ad; |
||||
|
top: 45px; |
||||
|
} |
||||
|
#example.index .main.menu { |
||||
|
top: 0px; |
||||
|
} |
||||
|
#example.index pre.console { |
||||
|
height: 120px; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Features |
||||
|
---------------*/ |
||||
|
|
||||
|
#example.index .hidden.code { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
#example.index .following.bar { |
||||
|
position: absolute; |
||||
|
top: 50px; |
||||
|
z-index: 1; |
||||
|
left: 0%; |
||||
|
width: 100%; |
||||
|
} |
||||
|
#example.index .following .logo { |
||||
|
float: left; |
||||
|
width: 35px; |
||||
|
} |
||||
|
#example.index .following .version.label { |
||||
|
margin: 0.25em 0px 0px 1em; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Stripes |
||||
|
---------------*/ |
||||
|
|
||||
|
#example.index .stripe .grid .row { |
||||
|
margin: 2rem 0rem; |
||||
|
} |
||||
|
#example.index .feature.stripe p { |
||||
|
min-height: 100px; |
||||
|
} |
||||
|
#example.index .demo h4 { |
||||
|
font-weight: bold !important; |
||||
|
margin: 0em 0em 1em !important; |
||||
|
} |
||||
|
#example.index .demo .ui.label:not(.empty) { |
||||
|
margin-bottom: 1em; |
||||
|
} |
||||
|
#example .stripe .ui.vertical.divider { |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
#example.index .stripe .icon.header i.icon { |
||||
|
font-size: 2em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Final */ |
||||
|
#example.index .final.stripe { |
||||
|
border-top: 1px solid #DDDDDD; |
||||
|
background-color: #F8F8F8; |
||||
|
} |
||||
|
|
||||
|
/* Alternate */ |
||||
|
#example .alternate.stripe { |
||||
|
background-color: #F2F3F5; |
||||
|
} |
||||
|
|
||||
|
/* Inverted */ |
||||
|
#example.index .inverted.stripe { |
||||
|
background-color: #1B1C1D; |
||||
|
} |
||||
|
#example.index .inverted.stripe p { |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Legacy? |
||||
|
---------------*/ |
||||
|
|
||||
|
/* content */ |
||||
|
#example .solid, |
||||
|
#example .stripe { |
||||
|
padding: 6em 0px; |
||||
|
} |
||||
|
|
||||
|
#example .stripe h1 { |
||||
|
font-size: 40px; |
||||
|
} |
||||
|
#example .stripe h2 { |
||||
|
font-size: 26px; |
||||
|
} |
||||
|
#example .stripe h3 { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
#example .stripe .buttons { |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
#example .stripe .button { |
||||
|
margin-bottom: 0.5em; |
||||
|
} |
||||
|
#example .stripe .column > p { |
||||
|
font-size: 16px; |
||||
|
line-height: 1.6; |
||||
|
margin: 2em 0em; |
||||
|
} |
||||
|
#example .stripe .grid .grid p { |
||||
|
font-size: 15px; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
#example .dark.stripe { |
||||
|
background-color: #333333; |
||||
|
background: url(/images/dark-bg.png) repeat; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
#example .stripe .column > .label { |
||||
|
margin-bottom: 1em; |
||||
|
} |
||||
|
|
||||
|
#example .solid { |
||||
|
background-color: #FFFFFF; |
||||
|
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1); |
||||
|
-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
#example .solid .column { |
||||
|
color: #555555; |
||||
|
} |
||||
|
#example .solid .column p b { |
||||
|
color: rgba(0, 0, 0, 0.9); |
||||
|
} |
||||
|
#example .solid .column p { |
||||
|
color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
#example .stripe .message { |
||||
|
margin: 2em 0em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Newsletter |
||||
|
---------------*/ |
||||
|
|
||||
|
#example.index .email.stripe { |
||||
|
padding: 2em 0em; |
||||
|
} |
||||
|
#example.index .email.stripe p { |
||||
|
margin: -0.5em 0em 1em; |
||||
|
} |
||||
|
#example.index .email.stripe .input { |
||||
|
width: 450px; |
||||
|
} |
||||
|
#example.index .email.stripe .submit.button { |
||||
|
margin-left: 1em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@media only screen and (max-width : 400px) { |
||||
|
#example.index .following.bar { |
||||
|
display: none; |
||||
|
} |
||||
|
#example.index .advertisement { |
||||
|
display: none; |
||||
|
margin-left: -130px !important; |
||||
|
} |
||||
|
#example.index .carbonad { |
||||
|
width: 260px !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
@media only screen and (max-width : 600px) { |
||||
|
#example.index .feature.stripe p { |
||||
|
min-height: 0px; |
||||
|
} |
||||
|
#example.index .following.bar .column { |
||||
|
text-align: center; |
||||
|
} |
||||
|
#example.index .following .logo { |
||||
|
float: none; |
||||
|
} |
||||
|
#example.index .following .version.label { |
||||
|
vertical-align: top; |
||||
|
margin-top: 0em; |
||||
|
} |
||||
|
#example.index .introduction { |
||||
|
margin: 5rem 0rem; |
||||
|
} |
||||
|
#example.index .masthead.segment h1 { |
||||
|
font-size: 2.25em; |
||||
|
} |
||||
|
#example.index .email.stripe .input { |
||||
|
width: auto; |
||||
|
} |
||||
|
#example.index .following .secondary.menu { |
||||
|
display: none; |
||||
|
} |
||||
|
#example.index .email.stripe .submit.button { |
||||
|
margin-top: 0.5em; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media only screen and (min-width : 600px) { |
||||
|
#example.index .main.menu { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* Homepage */ |
||||
|
@media only screen and (max-width : 780px) { |
||||
|
#example.index .container { |
||||
|
margin-left: 2em; |
||||
|
margin-right: 2em; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media only screen and (max-width: 1200px) { |
||||
|
#example.index .advertisement { |
||||
|
position: absolute; |
||||
|
top: auto; |
||||
|
left: 50%; |
||||
|
bottom: 2rem; |
||||
|
margin-left: -175px; |
||||
|
-webkit-transform: none; |
||||
|
-moz-transform: none; |
||||
|
-ms-transform: none; |
||||
|
transform: none; |
||||
|
} |
||||
|
#example.index .inverted.advertisement .carbonad-img { |
||||
|
margin-top: 0px; |
||||
|
} |
||||
|
#example.index #carbonads-container { |
||||
|
float: none; |
||||
|
} |
||||
|
#example.index .carbonad { |
||||
|
width: 340px; |
||||
|
} |
||||
|
#example.index .carbonad-text, |
||||
|
#example.index .carbonad-tag { |
||||
|
float: none; |
||||
|
display: block; |
||||
|
text-align: left; |
||||
|
margin-left: 160px; |
||||
|
width: 170px; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue