Worked on homepage accessibility
This commit is contained in:
parent 489c201c6b
commit 6a833ad4e4
10 changed files with 67 additions and 444 deletions
| @ -30,7 +30,7 @@ | |||
<h2 id="features">Features</h2> | ||||
<div class="row"> | ||||
<div class="col-sm-4"> | ||||
<h4><span class="icon">{{partial "icon/code.svg"}}</span>Free & Open Source</h4> | ||||
<h4><span class="icon" aria-hidden="true">{{partial "icon/code.svg"}}</span>Free & Open Source</h4> | ||||
<p>BookStack is fully free and open, MIT licensed. The source is available on GitHub. There is no cost to downloading and installing your own instance of bookstack. | ||||
</p> | ||||
<p> | ||||
| @ -38,16 +38,18 @@ | |||
</p> | ||||
</div> | ||||
<div class="col-sm-4" > | ||||
<h4><span class="icon">{{partial "icon/laptop_chromebook.svg"}}</span>Easy, Simple Interface</h4> | ||||
<h4><span class="icon" aria-hidden="true">{{partial "icon/laptop_chromebook.svg"}}</span>Easy, Simple Interface</h4> | ||||
<p> | ||||
Simplicity has been the top priority when building BookStack. The page editor has a simple WYSIWYG interface and all content is broken into three simple real world groups: | ||||
</p> | ||||
<p> | ||||
<span class="icon book">{{partial "icon/book.svg"}}</span>Books <span class="icon chapter">{{partial "icon/collections_bookmark.svg"}}</span>Chapters <span class="icon page">{{partial "icon/description.svg"}}</span>Pages | ||||
<span class="icon book" aria-hidden="true">{{partial "icon/book.svg"}}</span>Books | ||||
<span class="icon chapter" aria-hidden="true">{{partial "icon/collections_bookmark.svg"}}</span>Chapters | ||||
<span class="icon page" aria-hidden="true">{{partial "icon/description.svg"}}</span>Pages | ||||
</p> | ||||
</div> | ||||
<div class="col-sm-4" > | ||||
<h4><span class="icon">{{partial "icon/search.svg"}}</span>Searchable and Connected</h4> | ||||
<h4><span class="icon" aria-hidden="true">{{partial "icon/search.svg"}}</span>Searchable and Connected</h4> | ||||
<p> | ||||
The content in BookStack is fully searchable. You are able to search at book level or across all books, chapters & pages. The ability to link directly to any paragraph allows you to keep your documentation connected. | ||||
</p> | ||||
| @ -58,19 +60,19 @@ | |||
</p> | ||||
<div class="row"> | ||||
<div class="col-sm-4"> | ||||
<h4><span class="icon">{{partial "icon/build.svg"}}</span>Configurable</h4> | ||||
<h4><span class="icon" aria-hidden="true">{{partial "icon/build.svg"}}</span>Configurable</h4> | ||||
<p> | ||||
Configuration options allow you to set-up BookStack to suit your use case. You can change the name, Logo and registration options. You can also change whether the whole system is publicly viewable or not. | ||||
</p> | ||||
</div> | ||||
<div class="col-sm-4" > | ||||
<h4><span class="icon">{{partial "icon/storage.svg"}}</span>Simple Requirements</h4> | ||||
<h4><span class="icon" aria-hidden="true">{{partial "icon/storage.svg"}}</span>Simple Requirements</h4> | ||||
<p> | ||||
BookStack is built using PHP, on top of the Laravel framework and it uses MySQL to store data. Performance has been kept in mind and BookStack can run happily on a $5 Digital Ocean VPS. | ||||
</p> | ||||
</div> | ||||
<div class="col-sm-4" > | ||||
<h4><span class="icon">{{partial "icon/directions_boat.svg"}}</span>Powerful Features</h4> | ||||
<h4><span class="icon" aria-hidden="true">{{partial "icon/directions_boat.svg"}}</span>Powerful Features</h4> | ||||
<p> | ||||
On top of the powerful search and linking there is also cross-book sorting, page revisions and image management. A full role and permission system allow you to lock down content and actions as required. | ||||
</p> | ||||
| @ -81,19 +83,19 @@ | |||
</p> | ||||
<div class="row"> | ||||
<div class="col-sm-4"> | ||||
<h4><span class="icon">{{partial "icon/language.svg"}}</span>Multi-lingual</h4> | ||||
<h4><span class="icon" aria-hidden="true">{{partial "icon/language.svg"}}</span>Multi-lingual</h4> | ||||
<p> | ||||
BookStack users can set their preferred language. Thanks to great community contributors, Current languages built into BookStack include EN, FR, DE, ES, IT, JA, NL, PL, RU and more. | ||||
</p> | ||||
</div> | ||||
<div class="col-sm-4" > | ||||
<h4><span class="icon">{{partial "icon/edit.svg"}}</span>Optional Markdown Editor</h4> | ||||
<h4><span class="icon" aria-hidden="true">{{partial "icon/edit.svg"}}</span>Optional Markdown Editor</h4> | ||||
<p> | ||||
If you prefer to write in Markdown then BookStack supports you. A markdown editor is provided and includes a live-preview as you write your documentation. | ||||
</p> | ||||
</div> | ||||
<div class="col-sm-4" > | ||||
<h4><span class="icon">{{partial "icon/lock.svg"}}</span>Integrated Authentication</h4> | ||||
<h4><span class="icon" aria-hidden="true">{{partial "icon/lock.svg"}}</span>Integrated Authentication</h4> | ||||
<p> | ||||
As well as the default email/password login social providers such as GitHub, Google, Slack, AzureAD and more can be used. Okta and LDAP options are available for enterprise environments. | ||||
</p> | ||||
| @ -122,8 +124,8 @@ | |||
<div class="col-sm-6 text-center"> | ||||
<div class="demo-box text-left " > | ||||
<label>Demo site url</label> <br><a href="https://demo.bookstackapp.com" target="_blank">https://demo.bookstackapp.com</a> <br> | ||||
<label>Admin email</label> <br><input type="text" onclick="this.select();" value="admin@example.com" readonly="true"><br> | ||||
<label>Admin password</label> <br><input type="text" onclick="this.select();" value="password" readonly="true"> <br><br> | ||||
<label for="demo-email">Admin email</label> <br><input id="demo-email" type="text" onclick="this.select();" value="admin@example.com" readonly="true"><br> | ||||
<label for="demo-password">Admin password</label> <br><input id="demo-password" type="text" onclick="this.select();" value="password" readonly="true"> <br><br> | ||||
<a href="https://demo.bookstackapp.com/login?email=admin@example.com&password=password" class="button" target="_blank">Open demo site</a> | ||||
</div> | ||||
</div> | ||||
| @ -138,8 +140,8 @@ | |||
<div class="row"> | ||||
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2"> | ||||
<h4>Page View</h4> | ||||
<p>How core content is viewed in BookStack</p> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figcaption>How core content is viewed in BookStack</figcaption> | ||||
<a href="images/screenshots/page-view.png" data-size="1666x910"> | ||||
<img src="images/screenshots/thumb_page-view.png" alt="Page View" loading="lazy"> | ||||
</a> | ||||
| @ -147,8 +149,8 @@ | |||
</div> | ||||
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2"> | ||||
<h4>Page Editor</h4> | ||||
<p>The WYSIWYG interface for editing pages</p> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figcaption>The WYSIWYG interface for editing pages</figcaption> | ||||
<a href="images/screenshots/page-edit.png" data-size="1666x910"> | ||||
<img src="images/screenshots/thumb_page-edit.png" alt="Page Editing" loading="lazy"> | ||||
</a> | ||||
| @ -156,8 +158,8 @@ | |||
</div> | ||||
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2"> | ||||
<h4>Image Manager</h4> | ||||
<p>How images are uploaded and managed</p> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figcaption>How images are uploaded and managed</figcaption> | ||||
<a href="images/screenshots/image-manager.png" data-size="1666x910"> | ||||
<img src="images/screenshots/thumb_image-manager.png" alt="Image Manager" loading="lazy"> | ||||
</a> | ||||
| @ -170,8 +172,8 @@ | |||
<div class="row"> | ||||
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2"> | ||||
<h4>All Books Overview</h4> | ||||
<p>An overview of the top-level categorisation</p> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figcaption>An overview of the top-level categorisation</figcaption> | ||||
<a href="images/screenshots/books-view.png" data-size="1666x910"> | ||||
<img src="images/screenshots/thumb_books-view.png" alt="View of all books" loading="lazy"> | ||||
</a> | ||||
| @ -179,8 +181,8 @@ | |||
</div> | ||||
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2"> | ||||
<h4>Book Overview</h4> | ||||
<p>A view of the main content container: A book</p> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figcaption>A view of the main content container: A book</figcaption> | ||||
<a href="images/screenshots/book-overview.png" data-size="1666x910"> | ||||
<img src="images/screenshots/thumb_book-overview.png" alt="Book Overview" loading="lazy"> | ||||
</a> | ||||
| @ -188,8 +190,8 @@ | |||
</div> | ||||
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2"> | ||||
<h4>Book Sorting</h4> | ||||
<p>How created content can be sorted within a book</p> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figcaption>How created content can be sorted within a book</figcaption> | ||||
<a href="images/screenshots/book-sorting.png" data-size="1666x910"> | ||||
<img src="images/screenshots/thumb_book-sorting.png" alt="Book Content Sorting View" loading="lazy"> | ||||
</a> | ||||
| @ -202,8 +204,8 @@ | |||
<div class="row"> | ||||
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2"> | ||||
<h4>Global Search</h4> | ||||
<p>The main interface for searching created content</p> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figcaption>The main interface for searching created content</figcaption> | ||||
<a href="images/screenshots/search.png" data-size="1666x910"> | ||||
<img src="images/screenshots/thumb_search.png" alt="Searching all content" loading="lazy"> | ||||
</a> | ||||
| @ -211,8 +213,8 @@ | |||
</div> | ||||
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2"> | ||||
<h4>App Settings</h4> | ||||
<p>A view the of application system settings</p> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figcaption>A view the of application system settings</figcaption> | ||||
<a href="images/screenshots/settings-view.png" data-size="1666x910"> | ||||
<img src="images/screenshots/thumb_settings-view.png" alt="Settings View" loading="lazy"> | ||||
</a> | ||||
| @ -220,8 +222,8 @@ | |||
</div> | ||||
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2"> | ||||
<h4>Profile Page</h4> | ||||
<p>A user profile page, showing their activity and content</p> | ||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> | ||||
<figcaption>A user profile page, showing their activity and content</figcaption> | ||||
<a href="images/screenshots/profile-page.png" data-size="1666x910"> | ||||
<img src="images/screenshots/thumb_profile-page.png" alt="Profile Editing Screen" loading="lazy"> | ||||
</a> | ||||
| |
| @ -4,7 +4,7 @@ | |||
<div class="container"> | ||||
<div class="row"> | ||||
<div class="col-lg-4"> | ||||
<p class="muted text-small"> | ||||
<p class="text-small"> | ||||
BookStack - Created By <a href="https://danb.me" title="danb.me" target="_blank" rel="noopener">Dan Brown</a> and developed with the <a href="https://github.com/BookStackApp/BookStack/graphs/contributors" target="_blank" rel="noopener">community</a>. | ||||
<br> | ||||
<!-- Thanks to <a href="https://www.browserstack.com/" target="_blank">BrowserStack</a> for providing easy cross-browser testing. <br> --> | ||||
| @ -12,12 +12,12 @@ | |||
</p> | ||||
</div> | ||||
<div class="col-lg-8 col-md-9 menu"> | ||||
<a href="{{.Site.BaseURL}}docs"><span class="icon">{{partial "icon/book.svg"}}</span>Documentation</a> | ||||
<a href="{{.Site.BaseURL}}#features"><span class="icon">{{partial "icon/star.svg"}}</span>Features</a> | ||||
<a href="{{.Site.BaseURL}}#demo"><span class="icon">{{partial "icon/touch_app.svg"}}</span>Demo</a> | ||||
<a href="https://github.com/BookStackApp/BookStack" target="_blank"><span class="icon">{{partial "icon/github.svg"}}</span>Github</a> | ||||
<a href="https://discord.gg/ztkBqR2" target="_blank"><span class="icon">{{partial "icon/discord.svg"}}</span>Discord</a> | ||||
<a href="{{.Site.BaseURL}}blog" target="_blank"><span class="icon">{{partial "icon/rss_feed.svg"}}</span>Blog</a> | ||||
<a href="{{.Site.BaseURL}}docs"><span class="icon" aria-hidden="true">{{partial "icon/book.svg"}}</span>Documentation</a> | ||||
<a href="{{.Site.BaseURL}}#features"><span class="icon" aria-hidden="true">{{partial "icon/star.svg"}}</span>Features</a> | ||||
<a href="{{.Site.BaseURL}}#demo"><span class="icon" aria-hidden="true">{{partial "icon/touch_app.svg"}}</span>Demo</a> | ||||
<a href="https://github.com/BookStackApp/BookStack" target="_blank"><span class="icon" aria-hidden="true">{{partial "icon/github.svg"}}</span>Github</a> | ||||
<a href="https://discord.gg/ztkBqR2" target="_blank"><span class="icon" aria-hidden="true">{{partial "icon/discord.svg"}}</span>Discord</a> | ||||
<a href="{{.Site.BaseURL}}blog" target="_blank"><span class="icon" aria-hidden="true">{{partial "icon/rss_feed.svg"}}</span>Blog</a> | ||||
</div> | ||||
</div> | ||||
<p class="text-small"> | ||||
| |
| @ -124,12 +124,12 @@ | |||
<div class="col-md-9 col-sm-6 menu col-xs-4"> | ||||
<button tabindex="1" id="menu-button" class="button muted" type="button">{{partial "icon/menu.svg"}}</button> | ||||
<div class="inner"> | ||||
<a href="/docs"><span class="icon">{{partial "icon/book.svg"}}</span>Documentation</a> | ||||
<a href="/#features"><span class="icon">{{partial "icon/star.svg"}}</span>Features</a> | ||||
<a href="/#demo"><span class="icon">{{partial "icon/touch_app.svg"}}</span>Demo</a> | ||||
<a href="https://github.com/BookStackApp/BookStack" target="_blank"><span class="icon">{{partial "icon/github.svg"}}</span>Github</a> | ||||
<a href="https://discord.gg/ztkBqR2" target="_blank"><span class="icon">{{partial "icon/discord.svg"}}</span>Discord</a> | ||||
<a href="/blog"><span class="icon">{{partial "icon/rss_feed.svg"}}</span>Blog</a> | ||||
<a href="/docs"><span class="icon" aria-hidden="true">{{partial "icon/book.svg"}}</span>Documentation</a> | ||||
<a href="/#features"><span class="icon" aria-hidden="true">{{partial "icon/star.svg"}}</span>Features</a> | ||||
<a href="/#demo"><span class="icon" aria-hidden="true">{{partial "icon/touch_app.svg"}}</span>Demo</a> | ||||
<a href="https://github.com/BookStackApp/BookStack" target="_blank"><span class="icon" aria-hidden="true">{{partial "icon/github.svg"}}</span>Github</a> | ||||
<a href="https://discord.gg/ztkBqR2" target="_blank"><span class="icon" aria-hidden="true">{{partial "icon/discord.svg"}}</span>Discord</a> | ||||
<a href="/blog"><span class="icon" aria-hidden="true">{{partial "icon/rss_feed.svg"}}</span>Blog</a> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
| |
| @ -1,13 +1,13 @@ | |||
<svg id="svg4200" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="61.699mm" width="65.023mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 230.39711 218.6199"> | ||||
<g id="layer1" stroke-linejoin="round" fill-rule="evenodd" transform="translate(-245.27 -58.434)" stroke="#0288d1" stroke-width="6" fill="#fff"> | ||||
<svg xmlns="http://www.w3.org/2000/svg" height="61.699mm" width="65.023mm" version="1.1" viewBox="0 0 230.39711 218.6199" aria-label="BookStack Logo"> | ||||
<g stroke-linejoin="round" fill-rule="evenodd" transform="translate(-245.27 -58.434)" stroke="#0288d1" stroke-width="6" fill="#fff"> | ||||
<g stroke-linecap="round"> | ||||
<path id="path5686" d="m343.79 238.6 128.88-74.409-92.058-53.15-128.88 74.409z"/> | ||||
<path id="path5688" d="m251.73 185.45v21.26l92.058 53.15 128.88-74.409v-21.26"/> | ||||
<path id="path5694" d="m343.79 274.03-92.058-53.15s-7.5-16.918 0-28.346l92.058 53.15 128.88-74.409v28.346l-128.88 74.409"/> | ||||
<path id="path5686-5" d="m343.79 188.99 128.88-74.41-92.06-53.146-128.88 74.406z"/> | ||||
<path id="path5692-7" d="m343.79 188.99 128.88-74.409 0.00001 28.346-128.88 74.409-92.058-53.15s-6.0714-17.632 0-28.346z"/> | ||||
<path id="path5694-5" d="m343.79 245.69-92.058-53.15s-7.5-16.918 0-28.346l92.058 53.15 128.88-74.409-0.00001 28.346-128.88 74.409"/> | ||||
<path d="m343.79 238.6 128.88-74.409-92.058-53.15-128.88 74.409z"/> | ||||
<path d="m251.73 185.45v21.26l92.058 53.15 128.88-74.409v-21.26"/> | ||||
<path d="m343.79 274.03-92.058-53.15s-7.5-16.918 0-28.346l92.058 53.15 128.88-74.409v28.346l-128.88 74.409"/> | ||||
<path d="m343.79 188.99 128.88-74.41-92.06-53.146-128.88 74.406z"/> | ||||
<path d="m343.79 188.99 128.88-74.409 0.00001 28.346-128.88 74.409-92.058-53.15s-6.0714-17.632 0-28.346z"/> | ||||
<path d="m343.79 245.69-92.058-53.15s-7.5-16.918 0-28.346l92.058 53.15 128.88-74.409-0.00001 28.346-128.88 74.409"/> | ||||
</g> | ||||
<path id="path5831" d="m402.09 73.836-55.234 31.89 21.48 1.7716 3.0686 12.402 55.235-31.89z"/> | ||||
<path d="m402.09 73.836-55.234 31.89 21.48 1.7716 3.0686 12.402 55.235-31.89z"/> | ||||
</g> | ||||
</svg> | ||||
| |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 973 B |
| @ -11,6 +11,10 @@ | |||
&:active { | ||||
background-color: darken($backgroundColor, 8%); | ||||
} | ||||
&:focus { | ||||
outline: 1px solid $primary; | ||||
outline-offset: 3px; | ||||
} | ||||
} | ||||
| ||||
// Button Specific Variables | ||||
| @ -31,51 +35,13 @@ $button-border-radius: 2px; | |||
cursor: pointer; | ||||
transition: all ease-in-out 120ms; | ||||
box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21); | ||||
@include generate-button-colors(#EEE, $primary); | ||||
@include generate-button-colors(#FFF, $primary); | ||||
} | ||||
| ||||
.button, input[type="button"], input[type="submit"] { | ||||
@extend .button-base; | ||||
&.pos { | ||||
@include generate-button-colors(#EEE, $positive); | ||||
} | ||||
&.neg { | ||||
@include generate-button-colors(#EEE, $negative); | ||||
} | ||||
&.secondary { | ||||
@include generate-button-colors(#EEE, $secondary); | ||||
} | ||||
&.muted { | ||||
@include generate-button-colors(#EEE, #888); | ||||
} | ||||
} | ||||
| ||||
.text-button { | ||||
@extend .link; | ||||
background-color: transparent; | ||||
padding: 0; | ||||
margin: 0; | ||||
border: none; | ||||
&:focus, &:active { | ||||
outline: 0; | ||||
} | ||||
&.neg { | ||||
color: $negative; | ||||
} | ||||
} | ||||
| ||||
.button-group { | ||||
@include clearfix; | ||||
.button, button[type="button"] { | ||||
margin: $-xs 0 $-xs 0; | ||||
float: left; | ||||
border-radius: 0; | ||||
&:first-child { | ||||
border-radius: $button-border-radius 0 0 $button-border-radius; | ||||
} | ||||
&:last-child { | ||||
border-radius: 0 $button-border-radius $button-border-radius 0; | ||||
} | ||||
@include generate-button-colors(#FFF, #888); | ||||
} | ||||
} | ||||
| ||||
| |
| @ -1,27 +1,3 @@ | |||
| ||||
/** Flexbox styling rules **/ | ||||
body.flexbox { | ||||
display: flex; | ||||
flex-direction: column; | ||||
align-items: stretch; | ||||
height: 100%; | ||||
min-height: 100%; | ||||
max-height: 100%; | ||||
overflow: hidden; | ||||
#content { | ||||
flex: 1; | ||||
display: flex; | ||||
} | ||||
} | ||||
| ||||
.flex-fill { | ||||
display: flex; | ||||
align-items: stretch; | ||||
.flex, &.flex { | ||||
flex: 1; | ||||
} | ||||
} | ||||
| ||||
/** Rules for all columns */ | ||||
div[class^="col-"] img { | ||||
max-width: 100%; | ||||
| @ -41,20 +17,6 @@ div[class^="col-"] img { | |||
} | ||||
} | ||||
| ||||
.center-box { | ||||
margin: $-xl auto 0 auto; | ||||
padding: $-m $-xxl $-xl*2 $-xxl; | ||||
max-width: 346px; | ||||
display: inline-block; | ||||
text-align: left; | ||||
vertical-align: top; | ||||
&.login { | ||||
background-color: #EEE; | ||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1); | ||||
border: 1px solid #DDD; | ||||
} | ||||
} | ||||
| ||||
.row { | ||||
margin-left: -$-m; | ||||
margin-right: -$-m; | ||||
| @ -131,84 +93,6 @@ div[class^="col-"] img { | |||
.col-xs-1 { | ||||
width: 8.33333333%; | ||||
} | ||||
.col-xs-pull-12 { | ||||
right: 100%; | ||||
} | ||||
.col-xs-pull-11 { | ||||
right: 91.66666667%; | ||||
} | ||||
.col-xs-pull-10 { | ||||
right: 83.33333333%; | ||||
} | ||||
.col-xs-pull-9 { | ||||
right: 75%; | ||||
} | ||||
.col-xs-pull-8 { | ||||
right: 66.66666667%; | ||||
} | ||||
.col-xs-pull-7 { | ||||
right: 58.33333333%; | ||||
} | ||||
.col-xs-pull-6 { | ||||
right: 50%; | ||||
} | ||||
.col-xs-pull-5 { | ||||
right: 41.66666667%; | ||||
} | ||||
.col-xs-pull-4 { | ||||
right: 33.33333333%; | ||||
} | ||||
.col-xs-pull-3 { | ||||
right: 25%; | ||||
} | ||||
.col-xs-pull-2 { | ||||
right: 16.66666667%; | ||||
} | ||||
.col-xs-pull-1 { | ||||
right: 8.33333333%; | ||||
} | ||||
.col-xs-pull-0 { | ||||
right: auto; | ||||
} | ||||
.col-xs-push-12 { | ||||
left: 100%; | ||||
} | ||||
.col-xs-push-11 { | ||||
left: 91.66666667%; | ||||
} | ||||
.col-xs-push-10 { | ||||
left: 83.33333333%; | ||||
} | ||||
.col-xs-push-9 { | ||||
left: 75%; | ||||
} | ||||
.col-xs-push-8 { | ||||
left: 66.66666667%; | ||||
} | ||||
.col-xs-push-7 { | ||||
left: 58.33333333%; | ||||
} | ||||
.col-xs-push-6 { | ||||
left: 50%; | ||||
} | ||||
.col-xs-push-5 { | ||||
left: 41.66666667%; | ||||
} | ||||
.col-xs-push-4 { | ||||
left: 33.33333333%; | ||||
} | ||||
.col-xs-push-3 { | ||||
left: 25%; | ||||
} | ||||
.col-xs-push-2 { | ||||
left: 16.66666667%; | ||||
} | ||||
.col-xs-push-1 { | ||||
left: 8.33333333%; | ||||
} | ||||
.col-xs-push-0 { | ||||
left: auto; | ||||
} | ||||
.col-xs-offset-12 { | ||||
margin-left: 100%; | ||||
} | ||||
| @ -288,84 +172,6 @@ div[class^="col-"] img { | |||
.col-sm-1 { | ||||
width: 8.33333333%; | ||||
} | ||||
.col-sm-pull-12 { | ||||
right: 100%; | ||||
} | ||||
.col-sm-pull-11 { | ||||
right: 91.66666667%; | ||||
} | ||||
.col-sm-pull-10 { | ||||
right: 83.33333333%; | ||||
} | ||||
.col-sm-pull-9 { | ||||
right: 75%; | ||||
} | ||||
.col-sm-pull-8 { | ||||
right: 66.66666667%; | ||||
} | ||||
.col-sm-pull-7 { | ||||
right: 58.33333333%; | ||||
} | ||||
.col-sm-pull-6 { | ||||
right: 50%; | ||||
} | ||||
.col-sm-pull-5 { | ||||
right: 41.66666667%; | ||||
} | ||||
.col-sm-pull-4 { | ||||
right: 33.33333333%; | ||||
} | ||||
.col-sm-pull-3 { | ||||
right: 25%; | ||||
} | ||||
.col-sm-pull-2 { | ||||
right: 16.66666667%; | ||||
} | ||||
.col-sm-pull-1 { | ||||
right: 8.33333333%; | ||||
} | ||||
.col-sm-pull-0 { | ||||
right: auto; | ||||
} | ||||
.col-sm-push-12 { | ||||
left: 100%; | ||||
} | ||||
.col-sm-push-11 { | ||||
left: 91.66666667%; | ||||
} | ||||
.col-sm-push-10 { | ||||
left: 83.33333333%; | ||||
} | ||||
.col-sm-push-9 { | ||||
left: 75%; | ||||
} | ||||
.col-sm-push-8 { | ||||
left: 66.66666667%; | ||||
} | ||||
.col-sm-push-7 { | ||||
left: 58.33333333%; | ||||
} | ||||
.col-sm-push-6 { | ||||
left: 50%; | ||||
} | ||||
.col-sm-push-5 { | ||||
left: 41.66666667%; | ||||
} | ||||
.col-sm-push-4 { | ||||
left: 33.33333333%; | ||||
} | ||||
.col-sm-push-3 { | ||||
left: 25%; | ||||
} | ||||
.col-sm-push-2 { | ||||
left: 16.66666667%; | ||||
} | ||||
.col-sm-push-1 { | ||||
left: 8.33333333%; | ||||
} | ||||
.col-sm-push-0 { | ||||
left: auto; | ||||
} | ||||
.col-sm-offset-12 { | ||||
margin-left: 100%; | ||||
} | ||||
| @ -446,84 +252,6 @@ div[class^="col-"] img { | |||
.col-md-1 { | ||||
width: 8.33333333%; | ||||
} | ||||
.col-md-pull-12 { | ||||
right: 100%; | ||||
} | ||||
.col-md-pull-11 { | ||||
right: 91.66666667%; | ||||
} | ||||
.col-md-pull-10 { | ||||
right: 83.33333333%; | ||||
} | ||||
.col-md-pull-9 { | ||||
right: 75%; | ||||
} | ||||
.col-md-pull-8 { | ||||
right: 66.66666667%; | ||||
} | ||||
.col-md-pull-7 { | ||||
right: 58.33333333%; | ||||
} | ||||
.col-md-pull-6 { | ||||
right: 50%; | ||||
} | ||||
.col-md-pull-5 { | ||||
right: 41.66666667%; | ||||
} | ||||
.col-md-pull-4 { | ||||
right: 33.33333333%; | ||||
} | ||||
.col-md-pull-3 { | ||||
right: 25%; | ||||
} | ||||
.col-md-pull-2 { | ||||
right: 16.66666667%; | ||||
} | ||||
.col-md-pull-1 { | ||||
right: 8.33333333%; | ||||
} | ||||
.col-md-pull-0 { | ||||
right: auto; | ||||
} | ||||
.col-md-push-12 { | ||||
left: 100%; | ||||
} | ||||
.col-md-push-11 { | ||||
left: 91.66666667%; | ||||
} | ||||
.col-md-push-10 { | ||||
left: 83.33333333%; | ||||
} | ||||
.col-md-push-9 { | ||||
left: 75%; | ||||
} | ||||
.col-md-push-8 { | ||||
left: 66.66666667%; | ||||
} | ||||
.col-md-push-7 { | ||||
left: 58.33333333%; | ||||
} | ||||
.col-md-push-6 { | ||||
left: 50%; | ||||
} | ||||
.col-md-push-5 { | ||||
left: 41.66666667%; | ||||
} | ||||
.col-md-push-4 { | ||||
left: 33.33333333%; | ||||
} | ||||
.col-md-push-3 { | ||||
left: 25%; | ||||
} | ||||
.col-md-push-2 { | ||||
left: 16.66666667%; | ||||
} | ||||
.col-md-push-1 { | ||||
left: 8.33333333%; | ||||
} | ||||
.col-md-push-0 { | ||||
left: auto; | ||||
} | ||||
.col-md-offset-12 { | ||||
margin-left: 100%; | ||||
} | ||||
| @ -604,84 +332,6 @@ div[class^="col-"] img { | |||
.col-lg-1 { | ||||
width: 8.33333333%; | ||||
} | ||||
.col-lg-pull-12 { | ||||
right: 100%; | ||||
} | ||||
.col-lg-pull-11 { | ||||
right: 91.66666667%; | ||||
} | ||||
.col-lg-pull-10 { | ||||
right: 83.33333333%; | ||||
} | ||||
.col-lg-pull-9 { | ||||
right: 75%; | ||||
} | ||||
.col-lg-pull-8 { | ||||
right: 66.66666667%; | ||||
} | ||||
.col-lg-pull-7 { | ||||
right: 58.33333333%; | ||||
} | ||||
.col-lg-pull-6 { | ||||
right: 50%; | ||||
} | ||||
.col-lg-pull-5 { | ||||
right: 41.66666667%; | ||||
} | ||||
.col-lg-pull-4 { | ||||
right: 33.33333333%; | ||||
} | ||||
.col-lg-pull-3 { | ||||
right: 25%; | ||||
} | ||||
.col-lg-pull-2 { | ||||
right: 16.66666667%; | ||||
} | ||||
.col-lg-pull-1 { | ||||
right: 8.33333333%; | ||||
} | ||||
.col-lg-pull-0 { | ||||
right: auto; | ||||
} | ||||
.col-lg-push-12 { | ||||
left: 100%; | ||||
} | ||||
.col-lg-push-11 { | ||||
left: 91.66666667%; | ||||
} | ||||
.col-lg-push-10 { | ||||
left: 83.33333333%; | ||||
} | ||||
.col-lg-push-9 { | ||||
left: 75%; | ||||
} | ||||
.col-lg-push-8 { | ||||
left: 66.66666667%; | ||||
} | ||||
.col-lg-push-7 { | ||||
left: 58.33333333%; | ||||
} | ||||
.col-lg-push-6 { | ||||
left: 50%; | ||||
} | ||||
.col-lg-push-5 { | ||||
left: 41.66666667%; | ||||
} | ||||
.col-lg-push-4 { | ||||
left: 33.33333333%; | ||||
} | ||||
.col-lg-push-3 { | ||||
left: 25%; | ||||
} | ||||
.col-lg-push-2 { | ||||
left: 16.66666667%; | ||||
} | ||||
.col-lg-push-1 { | ||||
left: 8.33333333%; | ||||
} | ||||
.col-lg-push-0 { | ||||
left: auto; | ||||
} | ||||
.col-lg-offset-12 { | ||||
margin-left: 100%; | ||||
} | ||||
| |
| @ -144,7 +144,6 @@ em, i, .italic { | |||
| ||||
small, p.small, span.small, .text-small { | ||||
font-size: 0.8em; | ||||
color: lighten($text-dark, 20%); | ||||
} | ||||
| ||||
sup, .superscript { | ||||
| |
| @ -33,8 +33,8 @@ $fs-m: 16px; | |||
$fs-s: 14px; | ||||
| ||||
// Colours | ||||
$primary: #0288D1; | ||||
$primary-dark: #0288D1; | ||||
$primary: #0078b9; | ||||
$primary-dark: #0078b9; | ||||
$secondary: #e27b41; | ||||
$positive: #52A256; | ||||
$negative: #E84F4F; | ||||
| |
| @ -241,8 +241,15 @@ input[type=text] { | |||
box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.1); | ||||
} | ||||
} | ||||
figcaption { | ||||
margin-bottom: .5rem; | ||||
} | ||||
h4 { | ||||
margin-bottom: 0; | ||||
} | ||||
} | ||||
| ||||
| ||||
.docs-content { | ||||
padding-bottom: $-xxl; | ||||
.edit-link { | ||||
| |
| @ -33,7 +33,7 @@ var initPhotoSwipeFromDOM = function(gallerySelector) { | |||
continue; | ||||
} | ||||
| ||||
linkEl = figureEl.children[0]; // <a> element | ||||
linkEl = figureEl.querySelector('a'); // <a> element | ||||
| ||||
size = linkEl.getAttribute('data-size').split('x'); | ||||
| ||||
| @ -45,10 +45,9 @@ var initPhotoSwipeFromDOM = function(gallerySelector) { | |||
}; | ||||
| ||||
| ||||
| ||||
if(figureEl.children.length > 1) { | ||||
// <figcaption> content | ||||
item.title = figureEl.children[1].innerHTML; | ||||
item.title = figureEl.querySelector('figcaption').innerHTML; | ||||
} | ||||
| ||||
if(linkEl.children.length > 0) { | ||||
| |
Loading…
Add table
Add a link
Reference in a new issue