Fix container

This commit is contained in:
Jeremy Thomas 2017-03-14 22:25:22 +00:00
parent 8203999949
commit c98dbb77f2
10 changed files with 161 additions and 86 deletions

View File

@ -1,19 +1,28 @@
<section class="hero is-light bsa">
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<section class="hero is-info bsa">
<div class="container">
<div class="bsa-container">
<div class="bsa-cpc"></div>
<div class="columns is-vcentered">
<div class="column is-4">
<p class="title">Bulma <strong>Partners</strong></p>
<p class="subtitle">Keeping the project alive!</p>
</div>
<div class="column is-8">
<div class="bsa-cpc"></div>
</div>
</div>
</div>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
target: '.bsa-cpc',
align: 'horizontal',
disable_css: 'true'
});
}
})();
</script>
</section>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
target: '.bsa-cpc',
align: 'horizontal',
disable_css: 'true'
});
}
})();
</script>

View File

@ -65,7 +65,7 @@
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
<input type="image" src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/gold-rect-paypaldonate-60px.png" border="0" name="submit" alt="PayPal The safer, easier way to pay online." height="30">
<input type="image" src="{{site.url}}/images/paypal-donate.png" border="0" name="submit" alt="PayPal The safer, easier way to pay online." height="30">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
@ -102,57 +102,6 @@
</div>
</footer>
{% if page.route == 'index' %}
<style type="text/css">
.title.is-2 {
position: relative;
}
.title.is-2 a {
color: #242424;
padding-left: 48px;
position: relative;
}
.title.is-2 a:hover {
color: #00d1b2;
}
.title.is-2 .icon.is-medium {
left: 8px;
position: absolute;
top: 10px;
}
.hero .title.is-2 a {
color: white;
}
.hero .title.is-2 a:hover {
color: white;
}
.hero.is-primary a.column,
.hero.is-primary a.column:hover {
color: white;
}
.hero.is-primary a.column:hover .title strong {
border-bottom: 1px solid;
}
@media screen and (max-width: 979px) {
.title.is-2 a {
padding-left: 0;
}
.title.is-2 .icon.is-medium {
display: none;
}
}
</style>
{% endif %}
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>

View File

@ -10,6 +10,7 @@
@import "./sass/specific"
@import "./sass/example"
@import "./sass/bsa"
@import "./sass/route"
html
\::-moz-selection

View File

@ -2618,23 +2618,24 @@ input[type="submit"].button {
@media screen and (min-width: 1000px) {
.container {
margin: 0 auto;
max-width: 960px;
width: 960px;
}
.container.is-fluid {
margin: 0 20px;
max-width: none;
width: auto;
}
}
@media screen and (min-width: 1192px) {
.container {
max-width: 1152px;
width: 1152px;
}
}
@media screen and (min-width: 1384px) {
.container {
max-width: 1344px;
width: 1344px;
}
}
@ -3628,13 +3629,18 @@ a.nav-item.is-tab.is-active {
align-items: stretch;
display: flex;
min-height: 3.25rem;
width: 100%;
}
.nav.has-shadow {
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
}
@media screen and (max-width: 768px) {
.nav > .container {
width: 100%;
}
}
.pagination {
font-size: 1rem;
}
@ -6709,12 +6715,17 @@ html.route-index #carbon {
padding: 2rem;
}
.bsa-cpc {
min-height: 1px;
}
#_default_ .default-ad {
background-color: #00d1b2;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 2px;
color: #fff;
color: white;
display: inline-block;
font-size: 12px;
font-size: 10px;
font-weight: bold;
padding: 0 4px;
text-transform: uppercase;
vertical-align: top;
@ -6724,8 +6735,9 @@ html.route-index #carbon {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
color: #4a4a4a;
display: block;
line-height: 1.25;
line-height: 1.375;
margin-top: 15px;
padding: 15px;
padding-left: 70px;
@ -6765,6 +6777,9 @@ html.route-index #carbon {
}
@media screen and (min-width: 769px) {
.bsa .columns {
min-height: 120px;
}
#_default_ {
display: flex;
justify-content: center;
@ -6784,6 +6799,52 @@ html.route-index #carbon {
}
}
html.route-index .title.is-2 {
position: relative;
}
html.route-index .title.is-2 a {
color: #242424;
padding-left: 48px;
position: relative;
}
html.route-index .title.is-2 a:hover {
color: #00d1b2;
}
html.route-index .title.is-2 .icon.is-medium {
left: 8px;
position: absolute;
top: 10px;
}
html.route-index .hero .title.is-2 a {
color: white;
}
html.route-index .hero .title.is-2 a:hover {
color: white;
}
html.route-index .hero.is-primary a.column,
html.route-index .hero.is-primary a.column:hover {
color: white;
}
html.route-index .hero.is-primary a.column:hover .title strong {
border-bottom: 1px solid;
}
@media screen and (max-width: 979px) {
html.route-index .title.is-2 a {
padding-left: 0;
}
html.route-index .title.is-2 .icon.is-medium {
display: none;
}
}
html ::-moz-selection {
background: #00d1b2;
color: #fff;

View File

@ -138,15 +138,22 @@ doc-subtab: card
<div class="card">
<div class="card-content">
<p class="title">
If Tetris has taught me anything it's that errors pile up and accomplishments disappear.
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
</p>
<p class="subtitle">
Mark Twain
Jeff Atwood
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>More quotes by <a href="#">Mark Twain</a></span>
<span>
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
</span>
</p>
<p class="card-footer-item">
<span>
Share on <a href="#">Facebook</a>
</span>
</p>
</footer>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

View File

@ -1,13 +1,17 @@
.bsa
padding: 2rem
.bsa-cpc
min-height: 1px
#_default_
.default-ad
background-color: $primary
background-color: rgba(black, 0.3)
border-radius: 2px
color: $primary-invert
color: $white
display: inline-block
font-size: 12px
font-size: 10px
font-weight: bold
padding: 0 4px
text-transform: uppercase
vertical-align: top
@ -15,8 +19,9 @@
background-color: $white
border-radius: $radius-large
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
color: $text
display: block
line-height: 1.25
line-height: 1.375
margin-top: 15px
padding: 15px
padding-left: 70px
@ -44,6 +49,9 @@
font-weight: $weight-bold
+tablet
.bsa
.columns
min-height: 120px
#_default_
display: flex
justify-content: center

36
docs/sass/route.sass Normal file
View File

@ -0,0 +1,36 @@
html.route-index
.title.is-2
position: relative
.title.is-2 a
color: #242424
padding-left: 48px
position: relative
.title.is-2 a:hover
color: #00d1b2
.title.is-2 .icon.is-medium
left: 8px
position: absolute
top: 10px
.hero .title.is-2 a
color: white
.hero .title.is-2 a:hover
color: white
.hero.is-primary a.column,
.hero.is-primary a.column:hover
color: white
.hero.is-primary a.column:hover .title strong
border-bottom: 1px solid
@media screen and (max-width: 979px)
.title.is-2 a
padding-left: 0
.title.is-2 .icon.is-medium
display: none

View File

@ -124,7 +124,10 @@ a.nav-item
align-items: stretch
display: flex
min-height: $nav-height
width: 100%
// Modifiers
&.has-shadow
box-shadow: 0 2px 3px rgba($black, 0.1)
// Responsiveness
+mobile
& > .container
width: 100%

View File

@ -5,15 +5,16 @@
position: relative
+desktop
margin: 0 auto
max-width: $desktop - 40px
width: $desktop - 40px
// Modifiers
&.is-fluid
margin: 0 20px
max-width: none
width: auto
+widescreen
max-width: $widescreen - 40px
width: $widescreen - 40px
+fullhd
max-width: $fullhd - 40px
width: $fullhd - 40px
.delete
+delete