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