14 files changed, 1333 insertions, 30 deletions

diff --git a/app/Resources/static/themes/baggy/css/article.scss b/app/Resources/static/themes/baggy/css/article.scss
new file mode 100644
index 00000000..9094ad55
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/article.scss
@@ -0,0 +1,165 @@
+
+#article {
+  width: 70%;
+  margin-bottom: 3em;
+  text-align: justify;
+
+  .tags {
+    margin-bottom: 1em;
+  }
+
+  i {
+    font-style: normal;
+  }
+
+  h1 {
+    text-align: left;
+  }
+
+  h2::after {
+    content: none;
+  }
+
+  h2,
+  h3,
+  h4 {
+    text-transform: none;
+  }
+}
+
+blockquote {
+  border: 1px solid #999;
+  background-color: #fff;
+  padding: 1em;
+  margin: 0;
+}
+
+.topPosF {
+  position: fixed;
+  right: 20%;
+  bottom: 2em;
+  font-size: 1.5em;
+}
+
+#article_toolbar {
+  margin-bottom: 1em;
+
+  li {
+    display: inline-block;
+    margin: 3px auto;
+  }
+
+  a {
+    background-color: #000;
+    padding: 0.3em 0.5em 0.2em;
+    color: #fff;
+    text-decoration: none;
+
+    &:hover,
+    &: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;
+
+  &::before {
+    position: relative;
+    top: 2px;
+  }
+}
+
+.list-tags {
+  li {
+    margin-bottom: 0.5em;
+  }
+
+  .icon-rss:hover,
+  .icon-rss:focus {
+    background-color: #fff;
+    color: #000;
+    text-decoration: none;
+  }
+
+  a {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+}
+
+pre code {
+  font-family: "Courier New", Courier, monospace;
+}
+
+#filters {
+  position: fixed;
+  width: 20%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 30px 30px 15px 15px;
+  border-left: 1px #333 solid;
+  z-index: 12;
+  min-width: 300px;
+
+  form .filter-group {
+    margin: 5px;
+  }
+}
+
+#download-form {
+  position: fixed;
+  width: 10%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 30px 30px 15px 15px;
+  border-left: 1px #333 solid;
+  z-index: 12;
+  min-width: 200px;
+
+  li {
+    display: block;
+    padding: 0.5em 2em 0.5em 1em;
+    color: #fff;
+    position: relative;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-weight: 400;
+    font-family: PT Sans, sans-serif;
+    transition: all 0.5s ease;
+  }
+}
diff --git a/app/Resources/static/themes/baggy/css/font.css b/app/Resources/static/themes/baggy/css/font.css
deleted file mode 100755
index 47edcb83..00000000
--- a/app/Resources/static/themes/baggy/css/font.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@font-face {
-  font-family: "PT Sans";
-  font-style: normal;
-  font-weight: 700;
-  src: local("PT Sans Bold"), local("PTSans-Bold"), url("../fonts/ptsansbold.woff") format("woff");
-}
diff --git a/app/Resources/static/themes/baggy/css/guide.scss b/app/Resources/static/themes/baggy/css/guide.scss
new file mode 100644
index 00000000..afb47c4a
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/guide.scss
@@ -0,0 +1,263 @@
+
+::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;
+
+  &.nostyle {
+    text-decoration: none;
+  }
+
+  &:hover,
+  &: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;
+  }
+
+  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;
+  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: 20%;
+  background-color: #000;
+  display: block;
+}
+
+.links {
+  padding: 0;
+  margin: 0;
+
+  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;
+
+  > 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;
+    transition: all 0.5s ease;
+
+    &:hover,
+    &:focus {
+      background-color: #999;
+      color: #000;
+    }
+  }
+
+  .current::after {
+    content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: 10px solid transparent;
+    border-right-color: #eee;
+    right: 0;
+    top: 50%;
+    margin-top: -10px;
+  }
+
+  li:last-child {
+    position: fixed;
+    bottom: 1em;
+    width: 10em;
+
+    a::before {
+      font-size: 1.2em;
+      position: relative;
+      top: 2px;
+    }
+  }
+}
+
+#main {
+  margin-left: 12em;
+  position: relative;
+  z-index: 10;
+  padding-right: 5%;
+  padding-bottom: 1em;
+}
+
+#sort {
+  padding: 0;
+  list-style-type: none;
+  opacity: 0.5;
+  display: inline-block;
+
+  li {
+    display: inline;
+    font-size: 0.9em;
+
+    & + li {
+      margin-left: 10px;
+    }
+  }
+
+  a {
+    padding: 2px 2px 0;
+    vertical-align: middle;
+  }
+
+  img {
+    vertical-align: baseline;
+
+    :hover {
+      cursor: pointer;
+    }
+  }
+}
+
+#display-mode {
+  float: right;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  opacity: 0.5;
+}
+
+#listmode {
+  width: 16px;
+  display: inline-block;
+  text-decoration: none;
+
+  &.tablemode {
+    background: url("../../_global/img/table.png") no-repeat bottom;
+  }
+
+  .listmode {
+    background: url("../../_global/img/list.png") no-repeat bottom;
+  }
+}
+
+#warning_message {
+  position: fixed;
+  background-color: #ff6347;
+  z-index: 1000;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  color: #000;
+}
diff --git a/app/Resources/static/themes/baggy/css/index.scss b/app/Resources/static/themes/baggy/css/index.scss
new file mode 100644
index 00000000..e7a11963
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/index.scss
@@ -0,0 +1,13 @@
+/* Style */
+@import 'guide';
+@import 'layout';
+@import 'article';
+@import 'pictos';
+@import 'login';
+@import 'save';
+@import 'messages';
+
+/* Tools */
+@import 'media_queries';
+@import 'print';
+@import 'ratatouille';
diff --git a/app/Resources/static/themes/baggy/css/layout.scss b/app/Resources/static/themes/baggy/css/layout.scss
new file mode 100644
index 00000000..cb14e62d
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/layout.scss
@@ -0,0 +1,300 @@
+#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;
+
+  a {
+    color: #999;
+    font-weight: normal;
+  }
+}
+
+.list-entries {
+  letter-spacing: -5px;
+}
+
+.listmode.entry {
+  width: 100%;
+  height: inherit;
+}
+
+.card-entry-tags {
+  max-height: 2em;
+  overflow-y: hidden;
+  padding: 0;
+  margin: 0;
+}
+
+.card-entry-tags li,
+.card-entry-tags span {
+  display: inline-block;
+  margin: 0 5px;
+  padding: 5px 12px;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 3px;
+  max-height: 2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-entry-tags a,
+.card-entry-labels a {
+  text-decoration: none;
+  font-weight: normal;
+  color: #fff;
+}
+
+.nav-panel-add-tag {
+  margin-top: 10px;
+}
+
+.list-entries + .results {
+  margin-bottom: 2em;
+}
+
+.reading-time,
+.created-at {
+  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-right: 1%;
+  position: relative;
+  overflow: hidden;
+  padding: 1.5em 0 3em;
+  height: 440px;
+
+  img.preview {
+    width: 100%;
+    object-fit: cover;
+    height: 100%;
+  }
+
+  &::before {
+    content: "";
+    width: 0;
+    height: 0;
+    border: 10px solid transparent;
+    border-bottom-color: #000;
+    position: absolute;
+    bottom: 0.7em;
+    z-index: 10;
+    right: 1.5em;
+    transition: all 0.5s ease;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    height: 7px;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background-color: #000;
+    transition: all 0.5s ease;
+  }
+
+  &:hover {
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 1);
+
+    &::after {
+      height: 40px;
+    }
+
+    &::before {
+      bottom: 2.3em;
+    }
+
+    h2 a {
+      color: #666;
+    }
+
+    .tools {
+      bottom: 0;
+    }
+  }
+
+  h2 {
+    text-transform: none;
+    margin-bottom: 0;
+    line-height: 1.2;
+    margin-left: 5px;
+  }
+
+  &::after {
+    content: none;
+  }
+
+  a {
+    display: block;
+    text-decoration: none;
+    color: #000;
+    word-wrap: break-word;
+    transition: all 0.5s ease;
+  }
+
+  p {
+    color: #666;
+    font-size: 0.9em;
+    line-height: 1.7;
+    margin: 5px 5px auto;
+  }
+
+  h2 a::first-letter {
+    text-transform: uppercase;
+  }
+
+  .tools {
+    position: absolute;
+    bottom: -40px;
+    left: 0;
+    background: #000;
+    width: 100%;
+    z-index: 10;
+    padding-right: 0.5em;
+    text-align: right;
+    transition: all 0.5s ease;
+
+    a {
+      color: #666;
+      text-decoration: none;
+      display: block;
+      padding: 0.4em;
+
+      &:hover {
+        color: #fff;
+      }
+    }
+
+    li {
+      display: inline-block;
+      margin-top: 10px;
+    }
+
+    li:first-child {
+      float: left;
+      font-size: 0.9em;
+      max-width: calc(100% - 40px * 4);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-height: 2em;
+      margin-left: 10px;
+    }
+  }
+
+  .card-entry-labels {
+    position: absolute;
+    top: 100px;
+    left: -1em;
+    z-index: 90;
+    max-width: 50%;
+    padding-left: 0;
+
+    li {
+      margin: 10px 10px 10px auto;
+      padding: 5px 12px 5px 25px;
+      background-color: rgba(0, 0, 0, 0.6);
+      border-radius: 0 3px 3px 0;
+      color: #fff;
+      cursor: default;
+      max-height: 2em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      a {
+        color: #fff;
+      }
+    }
+  }
+}
+
+.entry:nth-child(3n+1) {
+  margin-left: 0;
+}
+
+.results {
+  letter-spacing: -5px;
+  padding: 0 0 0.5em;
+
+  > * {
+    display: inline-block;
+    vertical-align: top;
+    letter-spacing: normal;
+    width: 50%;
+    text-align: right;
+  }
+}
+
+div.pagination ul {
+  text-align: right;
+}
+
+.nb-results {
+  text-align: left;
+  font-style: italic;
+  color: #999;
+  display: inline-flex;
+}
+
+div.pagination ul {
+  a {
+    color: #999;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
+  > * {
+    display: inline-block;
+    margin-left: 0.5em;
+  }
+
+  .prev.disabled,
+  .next.disabled {
+    display: none;
+  }
+
+  .current {
+    height: 25px;
+    padding: 4px 8px;
+    border: 1px solid #d5d5d5;
+    text-decoration: none;
+    font-weight: bold;
+    color: #000;
+    background-color: #ccc;
+  }
+}
+
+.hide {
+  display: none;
+}
diff --git a/app/Resources/static/themes/baggy/css/login.scss b/app/Resources/static/themes/baggy/css/login.scss
new file mode 100644
index 00000000..312df670
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/login.scss
@@ -0,0 +1,26 @@
+.login {
+  background-color: #333;
+
+  #main {
+    padding: 0;
+    margin: 0;
+  }
+
+  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;
+  }
+
+  .logo {
+    position: absolute;
+    top: 2em;
+    left: 50%;
+    margin-left: -55px;
+  }
+}
diff --git a/app/Resources/static/themes/baggy/css/main.css b/app/Resources/static/themes/baggy/css/main.css
index e16846ea..f82c6bee 100755
--- a/app/Resources/static/themes/baggy/css/main.css
+++ b/app/Resources/static/themes/baggy/css/main.css
@@ -912,6 +912,14 @@ a.add-to-wallabag-link-after::after {
   content: "\e953";
 }
 
+.icon-pencil2::before {
+  content: "\e906";
+}
+
+.icon-users::before {
+  content: "\e972";
+}
+
 .icon-time::before {
   content: "\e952";
 }
@@ -947,6 +955,11 @@ a.add-to-wallabag-link-after::after {
   background-image: url("../../_global/img/icons/shaarli.png");
 }
 
+/* scuttle */
+.icon-image--scuttle {
+  background-image: url("../../_global/img/icons/scuttle.png");
+}
+
 /* ==========================================================================
    Icon selected
    ========================================================================== */
@@ -1063,6 +1076,10 @@ blockquote {
   content: "*";
 }
 
+.scuttle::before {
+  content: "*";
+}
+
 .return {
   text-decoration: none;
   margin-top: 1em;
diff --git a/app/Resources/static/themes/baggy/css/media_queries.scss b/app/Resources/static/themes/baggy/css/media_queries.scss
new file mode 100755
index 00000000..c33db0b3
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/media_queries.scss
@@ -0,0 +1,172 @@
+
+@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-height: 770px) {
+  .menu.users,
+  .menu.internal,
+  .menu.developer {
+    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 {
+    height: auto;
+    top: 0.5em;
+    width: 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;
+  }
+
+  .card-entry-labels {
+    display: none;
+  }
+
+  #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%;
+  }
+}
diff --git a/app/Resources/static/themes/baggy/css/messages.css b/app/Resources/static/themes/baggy/css/messages.css
deleted file mode 100755
index bfaf1448..00000000
--- a/app/Resources/static/themes/baggy/css/messages.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.messages.error.install {
-  border: 1px solid #c42608;
-  color: #c00 !important;
-  background: #fff0ef;
-  text-align: left;
-}
-
-.messages.notice.install {
-  border: 1px solid #ebcd41;
-  color: #000;
-  background: #fffcd3;
-  text-align: left;
-}
-
-.messages.success.install {
-  border: 1px solid #6dc70c;
-  background: #e0fbcc !important;
-  text-align: left;
-}
diff --git a/app/Resources/static/themes/baggy/css/messages.scss b/app/Resources/static/themes/baggy/css/messages.scss
new file mode 100755
index 00000000..a388419e
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/messages.scss
@@ -0,0 +1,50 @@
+/* ==========================================================================
+   Messages
+   ========================================================================== */
+
+.messages {
+  text-align: left;
+  width: 60%;
+  margin: auto 17%;
+
+  > * {
+    display: inline-block;
+  }
+
+  .install {
+    text-align: left;
+
+    &.error {
+      border: 1px solid #c42608;
+      color: #c00 !important;
+      background: #fff0ef;
+    }
+
+    &.notice {
+      border: 1px solid #ebcd41;
+      color: #000;
+      background: #fffcd3;
+    }
+
+    &.success {
+      border: 1px solid #6dc70c;
+      background: #e0fbcc !important;
+    }
+  }
+}
+
+.warning {
+  font-weight: bold;
+  display: block;
+  width: 100%;
+}
+
+.more-info {
+  font-size: 0.85em;
+  line-height: 1.5;
+  color: #aaa;
+
+  a {
+    color: #aaa;
+  }
+}
diff --git a/app/Resources/static/themes/baggy/css/pictos.scss b/app/Resources/static/themes/baggy/css/pictos.scss
new file mode 100644
index 00000000..2ff01937
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/pictos.scss
@@ -0,0 +1,210 @@
+/* ==========================================================================
+   Pictos
+   ========================================================================== */
+
+@font-face {
+  font-family: icomoon;
+  src: url('~icomoon-free-npm/Font/IcoMoon-Free.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.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';
+
+  .md-18 { font-size: 18px; }
+  .md-24 { font-size: 24px; }
+  .md-36 { font-size: 36px; }
+  .md-48 { font-size: 48px; }
+
+  .vertical-align-middle {
+    vertical-align: middle !important;
+  }
+}
+
+.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;
+
+  /* Enable Ligatures ================ */
+  letter-spacing: 0;
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  -ms-font-feature-settings: "liga" 1;
+  -o-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+
+  /* 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: "\ea96";
+}
+
+.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-eye::before {
+  content: "\e9ce";
+}
+
+.icon-no-eye::before {
+  content: "\e9d1";
+}
+
+.icon-calendar::before {
+  content: "\e953";
+}
+
+.icon-time::before {
+  content: "\e952";
+}
+
+/* .icon-image class, for image-based icons
+  ========================================================================== */
+
+.icon-image {
+  background: no-repeat center/80%;
+  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-asterisk.svg");
+}
+
+/* Unmark.it */
+.icon-image--unmark {
+  background-image: url("../../_global/img/icons/unmark-icon--black.png");
+}
+
+/* shaarli */
+.icon-image--shaarli {
+  background-image: url("../../_global/img/icons/shaarli.png");
+}
+
+/* ==========================================================================
+   Icon selected
+   ========================================================================== */
+
+.icon-star.fav::before {
+  color: #fff;
+}
+
+.icon-check.archive::before {
+  color: #fff;
+}
diff --git a/app/Resources/static/themes/baggy/css/print.css b/app/Resources/static/themes/baggy/css/print.scss
index f7f6a8ad..a63f62e9 100755
--- a/app/Resources/static/themes/baggy/css/print.css
+++ b/app/Resources/static/themes/baggy/css/print.scss
@@ -17,7 +17,7 @@
   /* ### Content ### */
 
   /* Hide useless blocks */
-  body > header,
+  body > .logo,
   #article_toolbar,
   #links,
   #sort,
@@ -53,11 +53,8 @@
 
   #main {
     width: 100%;
-    padding: 0;
     margin: 0;
-    margin-left: 0;
-    padding-right: 0;
-    padding-bottom: 0;
+    padding: 0;
   }
 
   #article {
diff --git a/app/Resources/static/themes/baggy/css/ratatouille.css b/app/Resources/static/themes/baggy/css/ratatouille.scss
index a6167f34..a6167f34 100644
--- a/app/Resources/static/themes/baggy/css/ratatouille.css
+++ b/app/Resources/static/themes/baggy/css/ratatouille.scss
diff --git a/app/Resources/static/themes/baggy/css/save.scss b/app/Resources/static/themes/baggy/css/save.scss
new file mode 100644
index 00000000..ade77b40
--- /dev/null
+++ b/app/Resources/static/themes/baggy/css/save.scss
@@ -0,0 +1,115 @@
+/* ==========================================================================
+  "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;
+
+  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;
+
+  &:hover,
+  &: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;
+
+  &::after {
+    content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: 10px solid transparent;
+    border-right-color: #eee;
+    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;
+}
+
+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;
+}