mirror of
https://github.com/beetbox/beets.git
synced 2026-01-26 18:15:01 +01:00
Bootstrap 2.0 & responsive design
This commit is contained in:
Adrian Sampson
parent
3f290ef552
commit
80b0ff22bf
6 changed files with 131 additions and 441 deletions
|
|
@ -2,7 +2,9 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>beets: {{ page.shorttitle }}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="bootstrap.min.css">
|
||||
<link rel="stylesheet" href="bootstrap-responsive.min.css">
|
||||
<link rel="stylesheet" href="beets.css">
|
||||
{% if page.section == 'main' %}
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
|
||||
|
|
@ -35,108 +37,105 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
{% if page.section == 'main' %}
|
||||
<div class="page-header leader">
|
||||
<h1>
|
||||
<div class="span12 leader" id="header">
|
||||
<h1 class="rotating-header">
|
||||
Beets is
|
||||
<span id="beetsis">the media library management system
|
||||
for obsessive-compulsive music geeks.</span>
|
||||
</h1>
|
||||
<h1 class="fixed-header">
|
||||
Beets is the media library management system for
|
||||
obsessive-compulsive music geeks.
|
||||
</h1>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="page-header">
|
||||
<div class="span12" id="header">
|
||||
<h1>
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
|
||||
<!-- ********************************************************************** -->
|
||||
|
||||
<div class="span10 screen" id="{{ page.section }}">
|
||||
<div class="span8 screen" id="{{ page.section }}">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ********************************************************************** -->
|
||||
|
||||
<div class="span4" id="sidebar">
|
||||
<div class="span4" id="sidebar">
|
||||
<!-- SIDEBAR -->
|
||||
<section>
|
||||
<h3>Get Beets</h3>
|
||||
<p>
|
||||
Install with <a
|
||||
href="http://www.pip-installer.org/">pip</a>
|
||||
by typing <code>pip install beets</code>,
|
||||
then read the
|
||||
<a href="http://readthedocs.org/docs/beets/-/guides/main.html">Getting
|
||||
Started</a> guide.
|
||||
</p>
|
||||
<h3>Get Beets</h3>
|
||||
<p>
|
||||
Install with <a
|
||||
href="http://www.pip-installer.org/">pip</a>
|
||||
by typing <code>pip install beets</code>,
|
||||
then read the
|
||||
<a href="http://readthedocs.org/docs/beets/-/guides/main.html">Getting
|
||||
Started</a> guide.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Project</h3>
|
||||
<ul>
|
||||
<li><a href="http://github.com/sampsyo/beets">beets on github</a></li>
|
||||
<li><a href="http://bitbucket.org/adrian/beets">beets on bitbucket</a></li>
|
||||
<li><a href="http://beets.readthedocs.org/">documentation</a></li>
|
||||
<li><a href="http://code.google.com/p/beets/issues/list">bug tracker</a></li>
|
||||
<li><a href="http://groups.google.com/group/beets-users">mailing
|
||||
list</a></li>
|
||||
<li><a href="irc://irc.freenode.net/beets">#beets on
|
||||
freenode</a></li>
|
||||
</ul>
|
||||
<h3>Project</h3>
|
||||
<ul>
|
||||
<li><a href="http://github.com/sampsyo/beets">beets on github</a></li>
|
||||
<li><a href="http://bitbucket.org/adrian/beets">beets on bitbucket</a></li>
|
||||
<li><a href="http://beets.readthedocs.org/">documentation</a></li>
|
||||
<li><a href="http://code.google.com/p/beets/issues/list">bug tracker</a></li>
|
||||
<li><a href="http://groups.google.com/group/beets-users">mailing
|
||||
list</a></li>
|
||||
<li><a href="irc://irc.freenode.net/beets">#beets on
|
||||
freenode</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
{% if page.section == 'main' %}
|
||||
<h3>News</h3>
|
||||
<ul id="twitterStatus">
|
||||
</ul>
|
||||
{% endif %}
|
||||
<p>
|
||||
<a href="http://twitter.com/b33ts" class="twitter-follow-button">Follow @b33ts</a>
|
||||
</p>
|
||||
{% if page.section == 'main' %}
|
||||
<h3>News</h3>
|
||||
<ul id="twitterStatus">
|
||||
</ul>
|
||||
{% endif %}
|
||||
<p id="twitterFollow">
|
||||
<a href="http://twitter.com/b33ts" class="twitter-follow-button">Follow @b33ts</a>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Contact</h3>
|
||||
<p>
|
||||
Email <a href="mailto:adrian@radbox.org">Adrian Sampson</a> with comments, questions, and fan mail.
|
||||
You can <a href="{{ site.url }}/donate.html">donate with PayPal or Amazon</a>,
|
||||
but please consider a donation to
|
||||
<a href="http://www.publicampaign.org/donate">Public
|
||||
Campaign</a> instead.
|
||||
Thanks!
|
||||
</p>
|
||||
<h3>Contact</h3>
|
||||
<p>
|
||||
Email <a href="mailto:adrian@radbox.org">Adrian Sampson</a> with comments, questions, and fan mail.
|
||||
You can <a href="{{ site.url }}/donate.html">donate with PayPal or Amazon</a>,
|
||||
but please consider a donation to
|
||||
<a href="http://www.publicampaign.org/donate">Public
|
||||
Campaign</a> instead.
|
||||
Thanks!
|
||||
</p>
|
||||
</section>
|
||||
<section class="flair">
|
||||
<!-- tweet button -->
|
||||
<a href="http://twitter.com/share" class="twitter-share-button"
|
||||
data-text="Beets: an awesome open-source music library manager and MusicBrainz tagger."
|
||||
data-count="none" data-via="b33ts"
|
||||
data-url="http://beets.radbox.org/">tweet beets</a>
|
||||
<script type="text/javascript"
|
||||
src="http://platform.twitter.com/widgets.js"></script>
|
||||
<!-- tweet button -->
|
||||
<a href="http://twitter.com/share" class="twitter-share-button"
|
||||
data-text="Beets: an awesome open-source music library manager and MusicBrainz tagger."
|
||||
data-count="none" data-via="b33ts"
|
||||
data-url="http://beets.radbox.org/">tweet beets</a>
|
||||
<script type="text/javascript"
|
||||
src="http://platform.twitter.com/widgets.js"></script>
|
||||
|
||||
<!-- google +1 button -->
|
||||
<g:plusone count="false" size="medium"
|
||||
href="http://beets.radbox.org/"></g:plusone>
|
||||
<!-- google +1 button -->
|
||||
<g:plusone count="false" size="medium"
|
||||
href="http://beets.radbox.org/"></g:plusone>
|
||||
|
||||
<!-- flattr button -->
|
||||
<a class="FlattrButton" style="display:none;"
|
||||
rev="flattr;button:compact;" href="http://beets.radbox.org/"></a>
|
||||
<!-- flattr button -->
|
||||
<a class="FlattrButton" style="display:none;"
|
||||
rev="flattr;button:compact;" href="http://beets.radbox.org/"></a>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ********************************************************************** -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="http://github.com/sampsyo/beets"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
<a href="http://github.com/sampsyo/beets" class="hidden-phone"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
57
beets.css
57
beets.css
|
|
@ -1,18 +1,26 @@
|
|||
.container {
|
||||
/* Remove 2 columns from the Bootstrap 16-col grid. */
|
||||
width: 820px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
border-bottom: 0;
|
||||
box-shadow: 0;
|
||||
-webkit-box-shadow: 0;
|
||||
-moz-box-shadow: 0;
|
||||
#header {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leader {
|
||||
#header.leader {
|
||||
margin-top: 20px;
|
||||
height: 6em;
|
||||
height: 7em;
|
||||
}
|
||||
.fixed-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Landscape phone to portrait tablet */
|
||||
@media (max-width: 767px) {
|
||||
#header.leader {
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.rotating-header {
|
||||
display: none;
|
||||
}
|
||||
.fixed-header {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.flair {
|
||||
|
|
@ -31,10 +39,9 @@ ul, ol {
|
|||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#sidebar h3:first-of-type {
|
||||
margin-top: -10px;
|
||||
#twitterStatus {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#twitterStatus, #twitterStatus li {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
|
|
@ -50,6 +57,26 @@ ul, ol {
|
|||
color: #999;
|
||||
}
|
||||
|
||||
/* Responsive video embed.
|
||||
* http://amobil.se/2011/11/responsive-embeds/
|
||||
*/
|
||||
.embed {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16/9 ratio */
|
||||
padding-top: 30px; /* IE6 workaround*/
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.embed iframe,
|
||||
.embed object,
|
||||
.embed embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Undo Bootstrap's form styling for donate buttons. */
|
||||
#donate input[type=image] {
|
||||
width: auto;
|
||||
|
|
|
|||
2
beets.js
2
beets.js
|
|
@ -3,7 +3,7 @@ var INTERVAL_SUBSEQUENT = 5000;
|
|||
var BEETS_IS = [
|
||||
'the media library management system for obsessive-compulsive music geeks',
|
||||
'an infinitely flexible automatic metadata corrector and file renamer',
|
||||
'the best command-line tool for viewing, querying, renaming, and updating your music collection',
|
||||
'the best command-line tool for viewing, querying, and renaming your music collection',
|
||||
'an album art downloader, lyrics fetcher, and genre identifier',
|
||||
'a simple music metadata inspection and modification tool for tons of audio file types',
|
||||
'an MPD-compatible music player',
|
||||
|
|
|
|||
9
bootstrap-responsive.min.css
vendored
Normal file
9
bootstrap-responsive.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
365
bootstrap.min.css
vendored
365
bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
4
index.md
4
index.md
|
|
@ -3,7 +3,9 @@ layout: main
|
|||
section: main
|
||||
shorttitle: the music geek’s media organizer
|
||||
---
|
||||
<iframe width="560" height="345" src="http://www.youtube.com/embed/ZaqJmjM23D0" frameborder="0"></iframe>
|
||||
<div class="embed">
|
||||
<iframe width="560" height="345" src="http://www.youtube.com/embed/ZaqJmjM23D0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
|
||||
</div>
|
||||
|
||||
The purpose of beets is to get your music collection right once and for all. It
|
||||
catalogs your collection, automatically improving its metadata as it goes using
|
||||
|
|
|
|||
Loading…
Reference in a new issue