Skip to content

Commit cc4ff18

Browse files
jlukicjlukic
committed
Update global template
1 parent a215264 commit cc4ff18

File tree

4 files changed

+114
-76
lines changed

4 files changed

+114
-76
lines changed

‎server/files/stylesheets/docs.css‎

Lines changed: 93 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -254,9 +254,11 @@ blockquote .author {
254254
margin: 0em;
255255
}
256256

257+
#example .masthead iframe.github {
258+
width: 101px !important;
259+
}
257260
#example .masthead iframe {
258261
margin-left: 5px;
259-
width: 101px !important;
260262
float: right;
261263
}
262264

@@ -2103,14 +2105,21 @@ code .chunk {
21032105
Style Overrides
21042106
-----------------*/
21052107

2108+
#example .masthead .advertisement {
2109+
width: 285px;
2110+
height: 130px;
2111+
}
2112+
#example .masthead .advertisement #carbonads {
2113+
width: 100%;
2114+
height: 130px;
2115+
}
21062116
#example .advertisement #carbonads {
21072117
position: relative;
21082118
display: block;
2109-
width: auto;
21102119
margin: 0 auto;
2111-
background-color: #F5F8F9;
2112-
border: 1px solid #9ECAD3;
2113-
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
2120+
background-color: #F5F5F5;
2121+
border: 1px solid #CCCCCC;
2122+
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08) inset;
21142123
padding: 1em;
21152124
font-family: "Helvetica Neue", Arial, sans-serif;
21162125
overflow: hidden;
@@ -2180,82 +2189,71 @@ code .chunk {
21802189
width: auto;
21812190
}
21822191

2183-
#example .bsa-cpc #_default_ {
2192+
#semantic-sponsor {
21842193
position: relative;
2194+
z-index: 3;
2195+
margin-top: -1px;
2196+
min-height: 40px;
2197+
border-top: solid 1px #dddddd;
21852198
border-bottom: solid 1px #dddddd;
2186-
text-align: center;
2187-
font-size: 14px;
2188-
line-height: 1.5;
2189-
transition: background 0.3s ease;
21902199
}
2191-
#example .bsa-cpc #_default_:hover {
2192-
background-color: #FAFAFA;
2193-
}
2194-
2195-
#example .bsa-cpc .default-ad {
2196-
display: none;
2200+
#semantic-sponsor:hover {
2201+
border-color: #87C7D0;
21972202
}
21982203

2199-
#example .bsa-cpc ._default_ {
2200-
display: inline-block;
2201-
overflow: hidden;
2202-
padding: 10px 3em;
2203-
max-width: 1044px;
2204-
color: #415a5a;
2205-
text-align: left;
2206-
line-height: 1;
2207-
margin-right: 344px;
2204+
.native-link {
22082205
display: block;
2206+
width: 100%;
2207+
background-color: #F5F5F5;
2208+
padding: 5px 3em;
2209+
color: #415a5a;
22092210
}
2210-
2211-
#example .bsa-cpc ._default_ > * {
2212-
vertical-align: middle;
2211+
.native-link:hover {
2212+
color: #000000;
2213+
background-color: #F0F8F9;
22132214
}
22142215

2215-
#example .bsa-cpc a {
2216+
.native-link,
2217+
.native-ad {
22162218
text-decoration: none;
22172219
}
2218-
2219-
#example .bsa-cpc .default-image {
2220-
display: inline-block;
2221-
margin-right: 6px;
2222-
line-height: 0;
2223-
}
2224-
2225-
#example .bsa-cpc .default-image img {
2226-
height: 18px;
2227-
border-radius: 3px;
2220+
.native-ad {
2221+
position: absolute;
2222+
right: 1rem;
22282223
}
22292224

2230-
#example .bsa-cpc .default-title:after {
2231-
content: " — ";
2225+
.native-inline,
2226+
.native-link {
2227+
display: flex;
2228+
align-items: center;
22322229
}
22332230

2234-
#example .bsa-cpc .default-title,
2235-
#example .bsa-cpc .default-description {
2236-
display: inline;
2231+
.native-img {
2232+
margin-right: 10px;
2233+
display: block;
2234+
padding: 5px;
2235+
height: 30px;
2236+
flex: 0 0 auto;
2237+
width: 30px;
2238+
border-radius: 50%;
22372239
}
22382240

2239-
#example .bsa-cpc .default-title {
2240-
position: relative;
2241-
font-weight: 600;
2241+
.native-text {
2242+
margin-right: 38px;
22422243
}
22432244

2244-
#example .bsa-cpc .default-description:after {
2245-
position: relative;
2246-
top: 0px;
2247-
right: 0px;
2248-
padding: 4px 6px;
2249-
float: right;
2245+
.native-ad {
2246+
padding: 4px 7px 4px;
2247+
line-height: 1;
22502248
border-radius: 3px;
22512249
background-color: #848484;
22522250
color: #fff;
2253-
content: "Ad";
2254-
text-transform: uppercase;
2255-
font-size: 9px;
2256-
font-family: Verdana, sans-serif;
2251+
font-size: 10px;
22572252
}
22582253

2254+
.native-ad:hover {
2255+
color: #fff;
2256+
}
22592257

22602258

22612259
/*******************************
@@ -2325,21 +2323,26 @@ code .chunk {
23252323
/* Table Ad */
23262324
@media only screen and (max-width: 1272px) {
23272325

2326+
#example .masthead > .container:first-child {
2327+
display: flex;
2328+
flex-direction: row;
2329+
}
23282330
#example .masthead > .container {
23292331
margin-right: 2em !important;
23302332
max-width: none !important;
23312333
}
23322334
#example .masthead .introduction {
2333-
display: table-cell;
23342335
vertical-align: top;
2335-
width: 100%;
2336+
flex: 1 0 auto;
23362337
}
23372338
#example .masthead .advertisement {
23382339
position: static;
23392340
float: none;
2340-
display: table-cell;
2341+
flex: 0 1 auto;
23412342
vertical-align: bottom;
2342-
padding-left: 3em;
2343+
padding-left: 0em;
2344+
margin-left: 2rem;
2345+
margin-top: -0.5rem;
23432346
padding-right: 0em;
23442347
}
23452348
#example .bsa-cpc ._default_ {
@@ -2350,14 +2353,30 @@ code .chunk {
23502353
/* Squish Content (Just For Small Computers) */
23512354
@media only screen and (max-width: 1272px) {
23522355

2356+
/* Resize TOC */
2357+
#example .full.height > .toc {
2358+
width: 200px;
2359+
}
2360+
#example .article {
2361+
margin-left: 200px;
2362+
}
2363+
#example .masthead > .container,
2364+
#example .main.container,
2365+
#example .fixed.menu > .container {
2366+
margin-left: 2rem !important;
2367+
margin-right: 2rem !important;
2368+
}
23532369
/* Resize Main Container */
23542370
#example .main.container {
23552371
margin-right: 318px !important;
23562372
}
23572373

2358-
/* Resize TOC */
2359-
#example .full.height > .toc {
2360-
width: 200px;
2374+
.native-link {
2375+
padding-left: 2rem;
2376+
padding-right: 2rem;
2377+
}
2378+
.native-ad {
2379+
right: 2rem;
23612380
}
23622381

23632382
/* Resize Rail */
@@ -2506,6 +2525,16 @@ code .chunk {
25062525

25072526
@media only screen and (max-width: 768px) {
25082527

2528+
#example .masthead > .container:first-child {
2529+
flex-direction: column;
2530+
}
2531+
#example .masthead .advertisement #carbonads {
2532+
height: auto;
2533+
}
2534+
#example .masthead .advertisement {
2535+
height: auto;
2536+
margin: 1rem 0rem;
2537+
}
25092538
/* Hide Some Fixed Menu Content (Pagination, Search) */
25102539
#example .fixed.menu > .container > .section.item {
25112540
display: none;

‎server/layouts/default.html.eco‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<%- @partial('javascript') %>
66
<%- @partial('css') %>
77
<%- @partial('tracking') %>
8+
<%- @partial('site-ads') %>
89
<%- @partial('transifex') %>
910
</head>
1011
<body id="example" class="<%= @document.css %>" ontouchstart="">

‎server/partials/header.html.eco‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<script type="text/javascript">
2121
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
2222
</script>
23-
<iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
23+
<iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=star&amp;count=true&amp;" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
2424
<% end %>
2525
<%=@document.description %>
2626
</div>
@@ -180,18 +180,22 @@
180180
</div>
181181
<% if 'development' in @getEnvironments(): %>
182182
<% else: %>
183-
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
184-
<div class="bsa-cpc"></div>
183+
<div id="semantic-sponsor"></div>
185184
<script>
186-
(function(){
187-
if(typeof _bsa !== 'undefined' && _bsa) {
188-
_bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
189-
target: '.bsa-cpc',
190-
align: 'horizontal',
191-
disable_css: 'true'
192-
});
193-
}
194-
})();
185+
_bsa.init('custom', 'CVAIKK7I', 'placement:semanticuicom',
186+
{
187+
target: '#semantic-sponsor',
188+
template: `
189+
<div class="native-inline">
190+
<a href="##link##" class="native-link">
191+
<img src="##image##" style="background-color: ##backgroundColor##" class="native-img">
192+
<div class="native-text">##company## — ##description##</div>
193+
</a>
194+
<a href="##adViaLink##" class="native-ad">AD</a>
195+
</div>
196+
`
197+
}
198+
);
195199
</script>
196200
<div class="ui vertical beg transition hidden segment">
197201
<i class="large red delete link icon"></i>

‎server/partials/site-ads.html.eco‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<% if ('development' in @getEnvironments()): %>
2+
<% else: %>
3+
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
4+
<% end %>

0 commit comments

Comments
 (0)