manage assets through npm

first draft

remote assetic totally

work

nearly there

use at least nodejs > 0.12

use proper version of grunt

bump nodejs version for travis

update npm

workaround for materialize

install node 5.0

add grunt-cli

baggy theme & cache node modules

cache bower & npm

make travis build assets on php7 only

exclude installing node & npm if not needed & use bash

clean & try to make icomoon work on baggy

ready

config for travis

rebase

make travis work

more travis work

impove travis & update deps

add missing pixrem deps

add module through oddly lost

ui updates

install latest nodejs

add install_dev.sh, link local binaries for npm/bower/grunt

ui improvements (mostly baggy)

fix travis build

no need to install on travis

Add unread filter to entries pages

Add the ability to filter for unread pages in the filters menu.

Add unread filter test to EntryControllerTest

Add a new test to the EntryControllerTest collection which checks that
only entries which have not been archived (and are treated as "unread")
are retrieved.

Improve English translation

Update FAQ

-Fix grammar
-Add notes about MTA, firewall, and SELinux

Update installation instructions

-Fix grammar
-Add SELinux section

add screenshots of android docu in English

Fix the deletion of Tags/Entries relation when delete an entry
Fix #2121

Move fixtures to the right place

Display a message when saving an entry failed

When saving an entry fail because of database error we previously just returned `false`.
Now we got an error in the log and the displayed notice to the user is updated too.

Change ManyToMany between entry & tag

Following https://gist.github.com/Ocramius/3121916

Be sure to remove the related entity when removing an entity.

Let say you have Entry -> EntryTag -> Tag.
If you remove the entry:

 - before that commit, the EntryTag will stay (at least using SQLite).
 - with that commit, the related entity is removed

Prepare wallabag 2.0.5

enforce older materialize version

1 files changed, 1233 insertions, 0 deletions

diff --git a/app/Resources/static/themes/baggy/css/main.css b/app/Resources/static/themes/baggy/css/main.css
new file mode 100755
index 00000000..d46fae1a
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/main.css
@@ -0,0 +1,1233 @@
+/* ==========================================================================
+   Sommaire
+
+   1 = Style Guide
+   2 = Layout
+   3 = Pictos
+   4 = Messages
+   5 = Article
+   6 = Media queries
+
+   ========================================================================== */
+
+html {
+  min-height: 100%;
+}
+
+body {
+  background-color: #eee;
+}
+
+.login {
+  background-color: #333;
+}
+
+.login #main {
+  padding: 0;
+  margin: 0;
+}
+
+.login form {
+  background-color: #fff;
+  padding: 1.5em;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
+  width: 20em;
+  position: absolute;
+  top: 8em;
+  left: 50%;
+  margin-left: -10em;
+}
+
+.login .logo {
+  position: absolute;
+  top: 2em;
+  left: 50%;
+  margin-left: -55px;
+}
+
+/* ==========================================================================
+   1 = Style Guide
+   ========================================================================== */
+
+::selection {
+  color: #fff;
+  background-color: #000;
+}
+
+.desktopHide {
+  display: none;
+}
+
+.logo {
+  position: fixed;
+  z-index: 20;
+  top: 0.4em;
+  left: 0.6em;
+}
+
+h2,
+h3,
+h4 {
+  font-family: "PT Sans", sans-serif;
+  text-transform: uppercase;
+}
+
+p,
+li,
+label {
+  color: #666;
+}
+
+a {
+  color: #000;
+  font-weight: bold;
+}
+
+a.nostyle {
+    text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  text-decoration: none;
+}
+
+form fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+form input[type="text"],
+form input[type="number"],
+select,
+form input[type="password"],
+form input[type="url"],
+form input[type="email"] {
+  border: 1px solid #999;
+  padding: 0.5em 1em;
+  min-width: 12em;
+  color: #666;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  select {
+    -webkit-appearance: none;
+    border-radius: 0;
+    background: #fff url("../../_global/img/bg-select.png") no-repeat right center;
+  }
+}
+
+.inline .row {
+  display: inline-block;
+  margin-right: 0.5em;
+}
+
+.inline label {
+  min-width: 6em;
+}
+
+fieldset label {
+  display: inline-block;
+  min-width: 12.5em;
+  color: #666;
+}
+
+label {
+  margin-right: 0.5em;
+}
+
+form .row {
+  margin-bottom: 0.5em;
+}
+
+form button,
+input[type="submit"] {
+  cursor: pointer;
+  background-color: #000;
+  color: #fff;
+  border: 0;
+  padding: 0.5em 1em;
+  display: inline-block;
+  border: 1px solid #000;
+}
+
+form button:hover,
+form button:focus,
+input[type="submit"]:hover,
+input[type="submit"]:focus {
+  background-color: #fff;
+  color: #000;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -ms-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+#bookmarklet {
+  cursor: move;
+}
+
+h2::after {
+  content: "";
+  height: 4px;
+  width: 70px;
+  background-color: #000;
+  display: block;
+}
+
+.links {
+  padding: 0;
+  margin: 0;
+}
+
+.links li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+#links {
+  position: fixed;
+  top: 0;
+  width: 10em;
+  left: 0;
+  text-align: right;
+  background-color: #333;
+  padding-top: 9.5em;
+  height: 100%;
+  box-shadow: inset -4px 0 20px rgba(0, 0, 0, 0.6);
+  z-index: 15;
+}
+
+#main {
+  margin-left: 13em;
+  position: relative;
+  z-index: 10;
+  padding-right: 5%;
+  padding-bottom: 1em;
+}
+
+#links > li > a {
+  display: block;
+  padding: 0.5em 2em 0.5em 1em;
+  color: #fff;
+  position: relative;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-weight: normal;
+  font-family: "PT Sans", sans-serif;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -ms-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+#links > li > a:hover,
+#links > li > a:focus {
+  background-color: #999;
+  color: #000;
+}
+
+#links .current::after {
+  content: "";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-style: solid;
+  border-width: 10px;
+  border-color: transparent #eee transparent transparent;
+  right: 0;
+  top: 50%;
+  margin-top: -10px;
+}
+
+#links li:last-child {
+  position: fixed;
+  bottom: 1em;
+  width: 10em;
+}
+
+#links li:last-child a::before {
+  font-size: 1.2em;
+  position: relative;
+  top: 2px;
+}
+
+#sort {
+  padding: 0;
+  list-style-type: none;
+  opacity: 0.5;
+  display: inline-block;
+}
+
+#sort li {
+  display: inline;
+  font-size: 0.9em;
+}
+
+#sort li + li {
+  margin-left: 10px;
+}
+
+#sort a {
+  padding: 2px 2px 0;
+  vertical-align: middle;
+}
+
+#sort img {
+  vertical-align: baseline;
+}
+
+#sort img:hover {
+  cursor: pointer;
+}
+
+#display-mode {
+  float: right;
+  vertical-align: middle;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  opacity: 0.5;
+}
+
+#listmode {
+  width: 16px;
+  display: inline-block;
+  text-decoration: none;
+}
+
+#listmode a:hover {
+  opacity: 1;
+}
+
+#listmode.tablemode {
+  background-image: url("../img/baggy/table.png");
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
+
+#listmode.listmode {
+  background-image: url("../img/baggy/list.png");
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
+
+#warning_message {
+  position: fixed;
+  background-color: #ff6347;
+  z-index: 1000;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  color: #000;
+}
+
+/* ==========================================================================
+   2 = Layout
+   ========================================================================== */
+
+#content {
+  margin-top: 2em;
+  min-height: 30em;
+}
+
+footer {
+  text-align: right;
+  position: relative;
+  bottom: 0;
+  right: 5em;
+  color: #999;
+  font-size: 0.8em;
+  font-style: italic;
+  z-index: 20;
+}
+
+footer a {
+  color: #999;
+  font-weight: normal;
+}
+
+.list-entries {
+  letter-spacing: -5px;
+}
+
+.listmode .entry {
+  width: 100% !important;
+  margin-left: 0 !important;
+}
+
+.list-entries + .results {
+  margin-bottom: 2em;
+}
+
+.estimatedTime .reading-time {
+  color: #999;
+  font-style: italic;
+  font-weight: normal;
+  font-size: 0.9em;
+}
+
+.estimatedTime small {
+  position: relative;
+  top: -1px;
+}
+
+.entry {
+  background-color: #fff;
+  letter-spacing: normal;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  display: inline-block;
+  width: 32%;
+  margin-bottom: 1.5em;
+  vertical-align: top;
+  margin-left: 1.5%;
+  position: relative;
+  overflow: hidden;
+  padding: 1.5em 1.5em 3em 1.5em;
+}
+
+.entry::before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-color: transparent transparent #000 transparent;
+  border-width: 10px;
+  position: absolute;
+  bottom: 0.3em;
+  z-index: 10;
+  right: 1.5em;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -ms-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+.entry::after {
+  content: "";
+  position: absolute;
+  height: 7px;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  background-color: #000;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -ms-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+.entry:hover {
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 1);
+}
+
+.entry:hover::after {
+  height: 40px;
+}
+
+.entry:hover::before {
+  bottom: 2.4em;
+}
+
+.entry:hover h2 a {
+  color: #666;
+}
+
+.entry h2 {
+  text-transform: none;
+  margin-bottom: 0;
+  line-height: 1.2;
+}
+
+.entry h2::after {
+  content: none;
+}
+
+.entry h2 a {
+  display: block;
+  text-decoration: none;
+  color: #000;
+  word-wrap: break-word;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -ms-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+img.preview {
+  max-width: 100%;
+}
+
+.entry p {
+  color: #666;
+  font-size: 0.9em;
+  line-height: 1.7;
+}
+
+.entry h2 a::first-letter {
+  text-transform: uppercase;
+}
+
+.entry:hover .tools {
+  bottom: 0;
+}
+
+.entry .tools {
+  position: absolute;
+  bottom: -50px;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  padding-right: 0.5em;
+  text-align: right;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -ms-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+.entry .tools a {
+  color: #666;
+  text-decoration: none;
+  display: block;
+  padding: 0.4em;
+}
+
+.entry .tools a:hover {
+  color: #fff;
+}
+
+.entry .tools li {
+  display: inline-block;
+}
+
+.entry:nth-child(3n+1) {
+  margin-left: 0;
+}
+
+.results {
+  letter-spacing: -5px;
+  padding: 0 0 0.5em;
+}
+
+.results > * {
+  display: inline-block;
+  vertical-align: top;
+  letter-spacing: normal;
+  width: 50%;
+  text-align: right;
+}
+
+div.pagination ul {
+  text-align: right;
+  margin-bottom: 50px;
+}
+
+.nb-results {
+  text-align: left;
+  font-style: italic;
+  color: #999;
+}
+
+div.pagination ul > * {
+  display: inline-block;
+  margin-left: 0.5em;
+}
+
+div.pagination ul a {
+  color: #999;
+  text-decoration: none;
+}
+
+div.pagination ul a:hover,
+div.pagination ul a:focus {
+  text-decoration: underline;
+}
+
+div.pagination ul .prev.disabled,
+div.pagination ul .next.disabled {
+  display: none;
+}
+
+div.pagination ul .current {
+  height: 25px;
+  padding: 4px 8px;
+  border: 1px solid #d5d5d5;
+  text-decoration: none;
+  font-weight: bold;
+  color: #000;
+  background-color: #ccc;
+}
+
+/* ==========================================================================
+  2.1 = "save a link" related styles
+  ========================================================================== */
+
+.popup-form {
+  background: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 0;
+  left: 10em;
+  z-index: 20;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  margin-top: -30% !important;
+  padding: 2em;
+  display: none;
+  border-left: 1px #eee solid;
+}
+
+.popup-form form {
+  background-color: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  border: 10px solid #000;
+  width: 400px;
+  height: 200px;
+  padding: 2em;
+}
+
+#bagit-form-form .addurl {
+  margin-left: 0;
+}
+
+.closeMessage,
+.close-button {
+  background-color: #000;
+  color: #fff;
+  font-size: 1.2em;
+  line-height: 1.6;
+  width: 1.6em;
+  height: 1.6em;
+  text-align: center;
+  text-decoration: none;
+}
+
+.closeMessage:hover,
+.closeMessage:focus,
+.close-button:hover,
+.close-button:focus {
+  background-color: #999;
+  color: #000;
+}
+
+.close-button--popup {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 1.4em;
+}
+
+.active-current {
+  background-color: #999;
+}
+
+.active-current::after {
+  content: "";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-style: solid;
+  border-width: 10px;
+  border-color: transparent #eee transparent transparent;
+  right: 0;
+  top: 50%;
+  margin-top: -10px;
+}
+
+.opacity03 {
+  opacity: 0.3;
+}
+
+.add-to-wallabag-link-after {
+  background-color: #000;
+  color: #fff;
+  padding: 0 3px 2px 3px;
+}
+
+a.add-to-wallabag-link-after {
+  visibility: hidden;
+  position: absolute;
+  opacity: 0;
+  transition-duration: 2s;
+  transition-timing-function: ease-out;
+}
+
+#article article a:hover + a.add-to-wallabag-link-after,
+a.add-to-wallabag-link-after:hover {
+  opacity: 1;
+  visibility: visible;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in;
+}
+
+a.add-to-wallabag-link-after::after {
+  content: "w";
+}
+
+#add-link-result {
+  font-weight: bold;
+  font-size: 0.9em;
+}
+
+.btn-clickable {
+    cursor: pointer;
+}
+
+/* ==========================================================================
+   3 = Pictos
+   ========================================================================== */
+
+@font-face {
+  font-family: icomoon;
+  src: url("../fonts/icomoon.eot?-s0mcsx");
+  src:
+    url("../fonts/icomoon.eot?#iefix-s0mcsx")   format("embedded-opentype"),
+    url("../fonts/icomoon.woff?-s0mcsx")        format("woff"),
+    url("../fonts/icomoon.ttf?-s0mcsx")         format("truetype"),
+    url("../fonts/icomoon.svg?-s0mcsx#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/MaterialIcons-Regular.eot);
+  /* For IE6-8 */
+  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1em;  /* Preferred icon size */
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+.material-icons.md-18 { font-size: 18px; }
+.material-icons.md-24 { font-size: 24px; }
+.material-icons.md-36 { font-size: 36px; }
+.material-icons.md-48 { font-size: 48px; }
+
+.icon span,
+.icon-image span {
+  position: absolute;
+  top: -9999px;
+}
+
+[class^="icon-"]::before,
+[class*=" icon-"]::before {
+  font-family: icomoon;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-flattr::before {
+  content: "\ead4";
+}
+
+.icon-mail::before {
+  content: "\ea86";
+}
+
+.icon-up-open::before {
+  content: "\e80b";
+}
+
+.icon-star::before {
+  content: "\e9d9";
+}
+
+.icon-check::before {
+  content: "\ea10";
+}
+
+.icon-link::before {
+  content: "\e9cb";
+}
+
+.icon-reply::before {
+  content: "\e806";
+}
+
+.icon-menu::before {
+  content: "\e9bd";
+}
+
+.icon-clock::before {
+  content: "\e803";
+}
+
+.icon-twitter::before {
+  content: "\ea91";
+}
+
+.icon-down-open::before {
+  content: "\e809";
+}
+
+.icon-trash::before {
+  content: "\e9ac";
+}
+
+.icon-delete::before {
+  content: "\ea0d";
+}
+
+.icon-power::before {
+  content: "\ea14";
+}
+
+.icon-arrow-up-thick::before {
+  content: "\ea3a";
+}
+
+.icon-rss::before {
+  content: "\e808";
+}
+
+.icon-print::before {
+  content: "\e954";
+}
+
+.icon-reload::before {
+  content: "\ea2e";
+}
+
+.icon-price-tags::before {
+  content: "\e936";
+}
+
+/* .icon-image class, for image-based icons
+  ========================================================================== */
+
+.icon-image {
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+  padding-right: 1em !important;
+  padding-left: 1em !important;
+}
+
+/* Carrot (http://carrot.org) */
+.icon-image--carrot {
+  background-image: url("../../_global/img/icons/carrot-icon--white.png");
+}
+
+/* Diaspora */
+.icon-image--diaspora {
+  background-image: url("../../_global/img/icons/diaspora-icon--black.png");
+}
+
+/* ==========================================================================
+   Icon selected
+   ========================================================================== */
+
+.icon-star.fav::before {
+  color: #fff;
+}
+
+.icon-check.archive::before {
+  color: #fff;
+}
+
+/* ==========================================================================
+   4 = Messages
+   ========================================================================== */
+
+.messages {
+  text-align: left;
+  margin-top: 1em;
+}
+
+.messages > * {
+  display: inline-block;
+}
+
+.warning {
+  font-weight: bold;
+  display: block;
+  width: 100%;
+}
+
+.more-info {
+  font-size: 0.85em;
+  line-height: 1.5;
+  color: #aaa;
+}
+
+.more-info a {
+  color: #aaa;
+}
+
+/* ==========================================================================
+   5 = Article
+   ========================================================================== */
+
+#article {
+  width: 70%;
+  margin-bottom: 3em;
+  text-align: justify;
+}
+
+#article .tags {
+  margin-bottom: 1em;
+}
+
+#article i {
+  font-style: normal;
+}
+
+blockquote {
+  border: 1px solid #999;
+  background-color: #fff;
+  padding: 1em;
+  margin: 0;
+}
+
+#article h1 {
+  text-align: left;
+}
+
+#article h2,
+#article h3,
+#article h4 {
+  text-transform: none;
+}
+
+#article h2::after {
+  content: none;
+}
+
+.topPosF {
+  position: fixed;
+  right: 20%;
+  bottom: 2em;
+  font-size: 1.5em;
+}
+
+#article_toolbar {
+  margin-bottom: 1em;
+}
+
+#article_toolbar li {
+  display: inline-block;
+}
+
+#article_toolbar a {
+  background-color: #000;
+  padding: 0.3em 0.5em 0.2em;
+  color: #fff;
+  text-decoration: none;
+}
+
+#article_toolbar a:hover,
+#article_toolbar a:focus {
+  background-color: #999;
+}
+
+#nav-btn-add-tag {
+  cursor: pointer;
+}
+
+.shaarli::before {
+  content: "*";
+}
+
+.return {
+  text-decoration: none;
+  margin-top: 1em;
+  display: block;
+}
+
+.return::before {
+  margin-right: 0.5em;
+}
+
+.notags {
+  font-style: italic;
+  color: #999;
+}
+
+.icon-rss {
+  background-color: #000;
+  color: #fff;
+  padding: 0.2em 0.5em;
+}
+
+.icon-rss::before {
+  position: relative;
+  top: 2px;
+}
+
+.list-tags li {
+  margin-bottom: 0.5em;
+}
+
+.list-tags .icon-rss:hover,
+.list-tags .icon-rss:focus {
+  background-color: #fff;
+  color: #000;
+  text-decoration: none;
+}
+
+.list-tags a {
+  text-decoration: none;
+}
+
+.list-tags a:hover,
+.list-tags a:focus {
+  text-decoration: underline;
+}
+
+pre code {
+  font-family: "Courier New", Courier, monospace;
+}
+
+#filter-form {
+  position: fixed;
+  width: 20%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 15px;
+  padding-right: 30px;
+  padding-top: 30px;
+  border-left: 1px #333 solid;
+  z-index: 12;
+  min-width: 300px;
+}
+
+#filter-form form .filter-group {
+  margin: 5px;
+}
+
+#download-form {
+    position: fixed;
+    width: 10%;
+    height: 100%;
+    top: 0;
+    right: 0;
+    background-color: #fff;
+    padding: 15px;
+    padding-right: 30px;
+    padding-top: 30px;
+    border-left: 1px #333 solid;
+    z-index: 12;
+    min-width: 200px;
+}
+
+#download-form li {
+    display: block;
+    padding: .5em 2em .5em 1em;
+    color: #fff;
+    position: relative;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-weight: 400;
+    font-family: PT Sans,sans-serif;
+    transition: all .5s ease;
+}
+
+/* ==========================================================================
+   6 = Media Queries
+   ========================================================================== */
+
+@media screen and (max-width: 1050px) {
+  .entry {
+    width: 49%;
+  }
+  .entry:nth-child(3n+1) {
+    margin-left: 1.5%;
+  }
+  .entry:nth-child(2n+1) {
+    margin-left: 0;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  #article {
+    width: 80%;
+  }
+  .topPosF {
+    right: 2.5em;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .entry {
+    width: 100%;
+    margin-left: 0;
+  }
+  #display-mode {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .entry {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  body > header {
+    background-color: #333;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 3em;
+    z-index: 11;
+  }
+
+  #links li:last-child {
+    position: static;
+    width: auto;
+  }
+
+  #links li:last-child a::before {
+    content: none;
+  }
+
+  .logo {
+    width: 1.25em;
+    height: 1.25em;
+    left: 0;
+    top: 0;
+  }
+
+  .login > header {
+    position: static;
+  }
+
+  .login form {
+    width: 100%;
+    position: static;
+    margin-left: 0;
+  }
+
+  .login .logo {
+    width: auto;
+    height: auto;
+    top: 0.5em;
+    width: 75px;
+    height: 75px;
+    margin-left: -37.5px;
+  }
+
+  .desktopHide {
+    display: block;
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    right: 0;
+    border: 0;
+    width: 2.5em;
+    height: 2.5em;
+    cursor: pointer;
+    background-color: #999;
+    font-size: 1.2em;
+  }
+  .desktopHide:hover,
+  .desktopHide:focus {
+    background-color: #fff;
+  }
+
+  #links {
+    display: none;
+    width: 100%;
+    height: auto;
+    padding-top: 3em;
+  }
+
+  #links.menu--open {
+    display: block;
+  }
+
+  footer {
+    position: static;
+    margin-right: 3em;
+  }
+
+  #main {
+    margin-left: 1.5em;
+    padding-right: 1.5em;
+    position: static;
+    margin-top: 3em;
+  }
+
+  #article_toolbar .topPosF {
+    display: none;
+  }
+
+  #article {
+    width: 100%;
+  }
+
+  #article h1 {
+    font-size: 1.5em;
+  }
+
+  #article_toolbar a {
+    padding: 0.3em 0.4em 0.2em;
+  }
+
+  #display-mode {
+    display: none;
+  }
+
+  .popup-form,
+  #bagit-form,
+  #search-form {
+    left: 0;
+    width: 100%;
+    border-left: none;
+  }
+
+  .popup-form form,
+  #bagit-form form,
+  #search-form form {
+    width: 100%;
+  }
+}