library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

More index sections

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-10 12:48:58 +01:00
parent 8932a3e67f
commit abaf686b25
13 changed files with 173 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/elements/tw.html
View File

@ -1,6 +1,6 @@
{% assign twUrl = "https://twitter.com/" | append: include.tweet.username | append: "/status/" | append: include.tweet.id %}
<article class="bd-tw">
<article class="bd-tw {{ include.modifier }}">
<header class="bd-tw-header">
<a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
<figure class="bd-tw-avatar">

2
docs/_includes/elements/tws.html
View File

@ -24,7 +24,7 @@
<div class="bd-more-loves">
<p class="bd-more-loves-container">
<a class="button is-medium is-danger bd-rainbow" href="{{ site.url }}/love/">
<a class="button is-medium is-danger bd-rainbow" href="{{ love_url }}">
<span>See more <strong>love</strong> 🤗</span>
</a>
</p>

2
docs/_includes/index/columns.html
View File

@ -12,7 +12,7 @@
<section class="bd-columns section is-medium">
<div class="container">
<header class="bd-columns-header">
<header class="bd-index-header">
<h3 class="title is-3">
<a href="{{ site.url }}{{ columns_link.path }}">
The <strong>simplest</strong> grid system

55
docs/_includes/index/customize.html Normal file
View File

@ -0,0 +1,55 @@
{% assign customize_link = site.data.links.by_id['overview-customize'] %}
<section class="bd-easy section is-medium">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<header class="bd-index-header bd-is-left">
<h3 class="title is-3">
<a href="{{ site.url }}{{ customize_link.path }}">
So <strong>quick</strong> to customize
</a>
</h3>
<h4 class="subtitle is-4">
Simply set your own Sass variables before importing Bulma
</h4>
</header>
</div>
<div class="column">
<div class="block">
<div class="field">
<p class="control">
<code>button</code>
</p>
</div>
<a class="button">Button</a>
</div>
<div class="block">
<div class="field">
<p class="control">
<code>button is-primary</code>
</p>
</div>
<a class="button is-primary">Button</a>
</div>
<div class="block">
<div class="field">
<p class="control">
<code>button is-primary is-large</code>
</p>
</div>
<a class="button is-primary is-large">Button</a>
</div>
<div class="block">
<div class="field">
<p class="control">
<code>button is-primary is-large is-loading</code>
</p>
</div>
<a class="button is-primary is-large is-loading">Button</a>
</div>
</div>
</div>
</div>
</section>

2
docs/_includes/index/fullheight.html
View File

@ -13,7 +13,7 @@
<div class="container has-text-centered">
<h3 class="title is-2">
<span class="icon is-medium">
<i class="fas fa-arrows-v"></i>
<i class="fas fa-arrows-alt-v"></i>
</span>
<a href="{{ site.url }}/documentation/layout/hero/">
Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>

29
docs/_includes/index/modifiers.html
View File

@ -1,17 +1,26 @@
<section class="section is-medium">
{% assign modifiers_link = site.data.links.by_id['modifiers-syntax'] %}
<section class="bd-easy section is-medium">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h3 class="title is-2">
<span class="icon is-medium">
<i class="fas fa-cogs"></i>
</span>
<a href="{{ site.url }}/documentation/modifiers/syntax/" style="display: block;">
Compose your element with <strong>modifier</strong> classes
</a>
</h3>
<h4 class="subtitle is-4">Add and combine <code>is-*</code> CSS classes to quickly alter styles</h4>
<header class="bd-index-header bd-is-left">
<h3 class="title is-3">
<a href="{{ site.url }}{{ modifiers_link.path }}">
So <strong>easy</strong> to learn
</a>
</h3>
<h4 class="subtitle is-4">
Get a design started within minutes
</h4>
</header>
<div class="bd-easy-tweet">
{% assign tweet = site.data.love.tweetsById.868829487072464897 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
</div>
</div>
<div class="column">
<div class="block">
<div class="field">

18
docs/_includes/index/start.html
View File

@ -1,12 +1,22 @@
<section class="section is-medium">
{% assign docs_link = site.data.links.by_id['documentation'] %}
{% assign docs_url = site.url | append: docs_link.path %}
<section class="section is-large">
<div class="container">
<p class="title has-text-centered">Get started</p>
<header class="bd-index-header">
<h3 class="title is-3">
<a href="{{ docs_url }}">
Get started
</a>
</h3>
</header>
<div class="hero-buttons">
<a class="button is-link is-large" href="{{ site.data.meta.documentation }}">
<a class="button is-link is-large" href="{{ docs_url }}">
<span class="icon">
<i class="fas fa-book"></i>
</span>
<span>Check the <strong>docs</strong></span>
<span>Read the <strong>docs</strong></span>
</a>
<a class="button is-black is-large" href="{{ site.data.meta.github }}">
<span class="icon">

16
docs/_includes/index/tws.html
View File

@ -1,3 +1,17 @@
<section class="bd-tws-home">
{% assign love_link = site.data.links.by_id['love'] %}
{% assign love_url = site.url | append: love_link.path %}
<section class="bd-tws-home section is-medium">
<header class="bd-index-header">
<h3 class="title is-3">
<a href="{{ love_url }}">
A growing <strong>community</strong>
</a>
</h3>
<h4 class="subtitle is-4">
See what <strong>Bulma fans</strong> are saying
</h4>
</header>
{% include elements/tws.html %}
</section>

20
docs/_sass/index.sass
View File

@ -1,13 +1,27 @@
// Columns
// Index common
.bd-columns-header
.bd-index-header
margin-bottom: 3rem
text-align: center
a
color: currentColor
&:hover
color: $blue
strong
color: currentColor
strong
color: $primary
font-weight: $weight-semibold
.title
strong
color: $primary
.subtitle
color: $grey-light
strong
color: currentColor
&.bd-is-left
text-align: left
// Columns
#grid
.notification

15
docs/_sass/twitter.sass
View File

@ -1,23 +1,24 @@
$tw-black: #1c2022
$tw-blue: #2b7bb9
$tw-grey: #697882
$tw-border: #e1e8ed
.bd-tws-home
background-color: $background
display: flex
flex-wrap: wrap
overflow: auto
padding: 20px
background-color: $white-bis
.bd-tw
background-color: #fff
border: 2px solid #e1e8ed
border: 2px solid $background
border-radius: $radius-large
color: $tw-grey
flex-shrink: 0
font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif
font-size: 16px
max-width: 420px
padding: 20px
&.bd-is-grey
background-color: $white-bis
border: none
.bd-tw-header
align-items: stretch
@ -163,7 +164,7 @@ $tw-grey: #697882
.twitter-tweet:not(.twitter-tweet-rendered)
background-color: $white
border: 1px solid #e1e8ed
border: 1px solid $tw-border
border-radius: 5px
color: $tw-grey
font-size: 14px

2
docs/bulma-docs.sass
View File

@ -46,7 +46,7 @@ $intro-width: 1130px
@import "./_sass/example"
@import "./_sass/callout"
@import "./_sass/bsa"
@import "./_sass/route"
// @import "./_sass/route"
@import "./_sass/twitter"
@import "./_sass/expo"
@import "./_sass/love"

84
docs/css/bulma-docs.css
View File

@ -10095,20 +10095,43 @@ svg {
text-decoration: underline;
}
.bd-columns-header {
.bd-index-header {
margin-bottom: 3rem;
text-align: center;
}
.bd-columns-header strong {
color: #00d1b2;
.bd-index-header a {
color: currentColor;
}
.bd-index-header a:hover {
color: #3273dc;
}
.bd-index-header a:hover strong {
color: currentColor;
}
.bd-index-header strong {
font-weight: 600;
}
.bd-columns-header .subtitle {
.bd-index-header .title strong {
color: #00d1b2;
}
.bd-index-header .subtitle {
color: #b5b5b5;
}
.bd-index-header .subtitle strong {
color: currentColor;
}
.bd-index-header.bd-is-left {
text-align: left;
}
#grid .notification {
padding-left: 0;
padding-right: 0;
@ -11446,64 +11469,27 @@ svg {
}
}
html.route-index .title.is-2,
html.route-index .title.is-3 {
position: relative;
}
html.route-index .title.is-2 a,
html.route-index .title.is-3 a {
color: #363636;
position: relative;
}
html.route-index .title.is-2 a:hover,
html.route-index .title.is-3 a:hover {
color: #3273dc;
}
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;
}
}
.bd-tws-home {
background-color: whitesmoke;
display: flex;
flex-wrap: wrap;
overflow: auto;
padding: 20px;
background-color: #fafafa;
}
.bd-tw {
background-color: #fff;
border: 2px solid #e1e8ed;
border: 2px solid whitesmoke;
border-radius: 6px;
color: #697882;
flex-shrink: 0;
font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif;
font-size: 16px;
max-width: 420px;
padding: 20px;
}
.bd-tw.bd-is-grey {
background-color: #fafafa;
border: none;
}
.bd-tw-header {
align-items: stretch;
display: flex;

7
docs/index.html
View File

@ -9,9 +9,12 @@ fixed_navbar: true
{% include index/sponsor.html %}
{% include index/columns.html %}
{% include index/tws.html %}
{% include index/modifiers.html %}
<hr>
{% include index/customize.html %}
<!-- {% include index/tiles.html %} -->
{% include index/level.html %}
{% include index/media-object.html %}
<!-- {% include index/level.html %} -->
<!-- {% include index/media-object.html %} -->
{% include index/fullheight.html %}
<!-- {% include index/usual.html %} -->
<!-- {% include index/features.html %} -->