diff --git a/css/style.css b/css/style.css
index 49efb2c..9418dcf 100644
--- a/css/style.css
+++ b/css/style.css
@@ -478,6 +478,7 @@ button {
 @media (max-width: 650px) {
   .wrapper {
     margin-bottom: 0px;
+    padding-bottom: 60px;
   }
 }
 
@@ -617,6 +618,7 @@ button {
 
 .feed-add {
   text-align: center;
+  z-index: 100;
 }
 
 [data-is-opened="false"] {
@@ -719,18 +721,40 @@ button {
   transform: translate3d(0, 150%, 0);
 }
 
+@media (max-width: 650px) {
+  .feeds-list,
+  .feed-add {
+    background-color: #424242;
+    -webkit-transition: all 130ms ease-in;
+    -o-transition: all 130ms ease-in;
+    transition: all 130ms ease-in;
+    will-change: transform;
+    overflow: auto;
+  }
+}
+
 .feeds-list {
   margin-top: 0;
   padding: 0;
 }
 
+@media (max-width: 650px) {
+  .feeds-list {
+    position: fixed;
+    width: 100%;
+    max-height: calc(100vh - 60px);
+    z-index: 1000;
+  }
+}
+
 .feeds-list[data-is-opened="false"] {
   display: block;
 }
 
 @media (max-width: 650px) {
   .feeds-list[data-is-opened="false"] {
-    display: none;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
   }
 }
 
@@ -1106,8 +1130,22 @@ html:not(.no-js) .feed--closed {
 }
 
 .settings {
-  padding: 1em;
+  position: relative;
+  padding: 13px 10px;
+  min-height: 34px;
   background-color: #303030;
+  z-index: 1000;
+}
+
+@media (max-width: 650px) {
+  .settings {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    z-index: 1000;
+  }
 }
 
 .user-login {
@@ -1120,7 +1158,7 @@ html:not(.no-js) .feed--closed {
 .settings-item {
   padding: 0.5em 1.5em;
   min-width: 15px;
-  min-height: 15px;
+  min-height: 18px;
   border-bottom: 0.38462em solid transparent;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
diff --git a/css/style.css.map b/css/style.css.map
index 82cbe89..dc6b711 100644
--- a/css/style.css.map
+++ b/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["_normalize.scss","style.css","style.scss","partials/mixins/_helpers.scss"],"names":[],"mappings":"AAAA,2DAAA;AAEA;;+ECC+E;ADG/E;;ECAE;ADIF;;;;;;;;;;;;EAYI,cAAc;ACFlB;;ADKA;;ECDE;ADKF;;;;EAII,qBAAqB;ACHzB;;ADMA;;;ECDE;ADMF;EACI,aAAa;EACb,SAAS;ACJb;;ADOA;;;ECFE;AACF;;EDQI,aAAa;ACLjB;;ADQA;;+ECJ+E;ADQ/E;;;;ECHE;ADSF;EACI,uBAAuB;EAAE,MAAA;EACzB,0BAA0B;EAAE,MAAA;EAC5B,8BAA8B;EAAE,MAAA;ACJpC;;ADOA;;ECHE;ADOF;EACI,SAAS;ACLb;;ADQA;;+ECJ+E;ADQ/E;;ECLE;ADSF;EACI,uBAAuB;ACP3B;;ADUA;;ECNE;ADUF;;EAEI,UAAU;ACRd;;ADWA;;+ECP+E;ADW/E;;;ECPE;ADYF;EACI,cAAc;EACd,gBAAgB;ACVpB;;ADaA;;ECTE;ADaF;EACI,yBAAyB;ACX7B;;ADcA;;ECVE;ADcF;;EAEI,iBAAiB;ACZrB;;ADeA;;ECXE;ADeF;EACI,kBAAkB;ACbtB;;ADgBA;;ECZE;ADgBF;EAEI,+BAAuB;EAAvB,uBAAuB;EACvB,SAAS;ACdb;;ADiBA;;ECbE;ADiBF;EACI,gBAAgB;EAChB,WAAW;ACff;;ADkBA;;ECdE;ADkBF;;;;EAII,6BAA6B;EAC7B,cAAc;AChBlB;;ADmBA;;ECfE;ADmBF;EACI,qBAAqB;ACjBzB;;ADoBA;;EChBE;ADoBF;EACI,uCAAuC;AClB3C;;ADqBA;;ECjBE;ADqBF;EACI,cAAc;ACnBlB;;ADsBA;;EClBE;ADsBF;;EAEI,cAAc;EACd,cAAc;EACd,kBAAkB;EAClB,wBAAwB;ACpB5B;;ADuBA;EACI,WAAW;ACpBf;;ADuBA;EACI,eAAe;ACpBnB;;ADuBA;;+ECnB+E;ADuB/E;;ECpBE;ADwBF;EACI,SAAS;ACtBb;;ADyBA;;ECrBE;ADyBF;EACI,gBAAgB;ACvBpB;;AD0BA;;+ECtB+E;AD0B/E;;ECvBE;AD2BF;EACI,gBAAgB;ACzBpB;;AD4BA;;+ECxB+E;AD4B/E;;;ECxBE;AD6BF;EACI,yBAAyB;EAAE,MAAA;EAC3B,aAAa;EAAE,MAAA;EACf,YAAY;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","file":"style.css","sourcesContent":["/*! normalize.css v2.1.3 | MIT License | git.io/normalize */\n\n/* ==========================================================================\n   HTML5 display definitions\n   ========================================================================== */\n\n/**\n * Correct `block` display not defined in IE 8/9.\n */\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary {\n    display: block;\n}\n\n/**\n * Correct `inline-block` display not defined in IE 8/9.\n */\n\naudio,\ncanvas,\nprogress,\nvideo {\n    display: inline-block;\n}\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\n\naudio:not([controls]) {\n    display: none;\n    height: 0;\n}\n\n/**\n * Address `[hidden]` styling not present in IE 8/9.\n * Hide the `template` element in IE, Safari, and Firefox < 22.\n */\n\n[hidden],\ntemplate {\n    display: none;\n}\n\n/* ==========================================================================\n   Base\n   ========================================================================== */\n\n/**\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n *    user zoom.\n */\n\nhtml {\n    font-family: sans-serif; /* 1 */\n    -ms-text-size-adjust: 100%; /* 2 */\n    -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/**\n * Remove default margin.\n */\n\nbody {\n    margin: 0;\n}\n\n/* ==========================================================================\n   Links\n   ========================================================================== */\n\n/**\n * Remove the gray background color from active links in IE 10.\n */\n\na {\n    background: transparent;\n}\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\n\na:active,\na:hover {\n    outline: 0;\n}\n\n/* ==========================================================================\n   Typography\n   ========================================================================== */\n\n/**\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari 5, and Chrome.\n */\n\nh1 {\n    font-size: 2em;\n    margin: 0.67em 0;\n}\n\n/**\n * Address styling not present in IE 8/9, Safari 5, and Chrome.\n */\n\nabbr[title] {\n    border-bottom: 1px dotted;\n}\n\n/**\n * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.\n */\n\nb,\nstrong {\n    font-weight: bold;\n}\n\n/**\n * Address styling not present in Safari 5 and Chrome.\n */\n\ndfn {\n    font-style: italic;\n}\n\n/**\n * Address differences between Firefox and other browsers.\n */\n\nhr {\n    -moz-box-sizing: content-box;\n    box-sizing: content-box;\n    height: 0;\n}\n\n/**\n * Address styling not present in IE 8/9.\n */\n\nmark {\n    background: #ff0;\n    color: #000;\n}\n\n/**\n * Correct font family set oddly in Safari 5 and Chrome.\n */\n\ncode,\nkbd,\npre,\nsamp {\n    font-family: monospace, serif;\n    font-size: 1em;\n}\n\n/**\n * Improve readability of pre-formatted text in all browsers.\n */\n\npre {\n    white-space: pre-wrap;\n}\n\n/**\n * Set consistent quote types.\n */\n\nq {\n    quotes: \"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";\n}\n\n/**\n * Address inconsistent and variable font size in all browsers.\n */\n\nsmall {\n    font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\n */\n\nsub,\nsup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n}\n\nsup {\n    top: -0.5em;\n}\n\nsub {\n    bottom: -0.25em;\n}\n\n/* ==========================================================================\n   Embedded content\n   ========================================================================== */\n\n/**\n * Remove border when inside `a` element in IE 8/9.\n */\n\nimg {\n    border: 0;\n}\n\n/**\n * Correct overflow displayed oddly in IE 9.\n */\n\nsvg:not(:root) {\n    overflow: hidden;\n}\n\n/* ==========================================================================\n   Figures\n   ========================================================================== */\n\n/**\n * Address margin not present in IE 8/9 and Safari 5.\n */\n\nfigure {\n    margin: 1em 40px;\n}\n\n/* ==========================================================================\n   Forms\n   ========================================================================== */\n\n/**\n * 1. Define consistent border, margin, and padding.\n * 2. Address width being affected by wide descendants in Chrome and Firefox.\n */\n\nfieldset {\n    border: 1px solid #c0c0c0; /* 1 */\n    margin: 0 2px; /* 1 */\n    min-width: 0; /* 2 */\n    padding: 0.35em 0.625em 0.75em; /* 1 */\n}\n\n/**\n * 1. Correct `color` not being inherited in IE 8/9.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\n\nlegend {\n    border: 0; /* 1 */\n    padding: 0; /* 2 */\n}\n\n/**\n * 1. Correct color not being inherited in all browsers.\n *    Known issue: `select` will not inherit color in Chrome and Safari on OS X.\n * 2. Correct font properties not being inherited in all browsers.\n * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n    color: inherit; /* 1 */\n    font: inherit; /* 2 */\n    margin: 0; /* 3 */\n}\n\n/**\n * Re-apply the `font-weight` to avoid modifying the default UX, and because\n * the default cannot be changed in Chrome and Safari on OS X.\n */\n\noptgroup {\n    font-weight: bold;\n}\n\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\n\nbutton,\ninput {\n    line-height: normal;\n}\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.\n * Correct `select` style inheritance in Firefox 4+ and Opera.\n */\n\nbutton,\nselect {\n    text-transform: none;\n}\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n *    and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n *    `input` and others.\n */\n\nbutton,\nhtml input[type=\"button\"], /* 1 */\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n    -webkit-appearance: button; /* 2 */\n    cursor: pointer; /* 3 */\n}\n\n/**\n * Re-set default cursor for disabled elements.\n */\n\nbutton[disabled],\nhtml input[disabled] {\n    cursor: default;\n}\n\n/**\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n    box-sizing: border-box; /* 1 */\n    padding: 0; /* 2 */\n}\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome\n *    (include `-moz` to future-proof).\n */\n\ninput[type=\"search\"] {\n    -webkit-appearance: textfield; /* 1 */\n    -moz-box-sizing: content-box;\n    -webkit-box-sizing: content-box; /* 2 */\n    box-sizing: content-box;\n}\n\n/**\n * Remove inner padding and search cancel button in Safari 5 and Chrome\n * on OS X.\n */\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n    -webkit-appearance: none;\n}\n\n/**\n * Remove inner padding and border in Firefox 4+.\n */\n\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n}\n\n/**\n * 1. Remove default vertical scrollbar in IE 8/9.\n * 2. Improve readability and alignment in all browsers.\n */\n\ntextarea {\n    overflow: auto; /* 1 */\n    vertical-align: top; /* 2 */\n}\n\n/* ==========================================================================\n   Tables\n   ========================================================================== */\n\n/**\n * Remove most spacing between table cells.\n */\n\ntable {\n    border-collapse: collapse;\n    border-spacing: 0;\n}\n\ntd,\nth {\n    padding: 0;\n}\n","/*! normalize.css v2.1.3 | MIT License | git.io/normalize */\n/* ==========================================================================\n   HTML5 display definitions\n   ========================================================================== */\n/**\n * Correct `block` display not defined in IE 8/9.\n */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary {\n  display: block;\n}\n\n/**\n * Correct `inline-block` display not defined in IE 8/9.\n */\naudio,\ncanvas,\nprogress,\nvideo {\n  display: inline-block;\n}\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\naudio:not([controls]) {\n  display: none;\n  height: 0;\n}\n\n/**\n * Address `[hidden]` styling not present in IE 8/9.\n * Hide the `template` element in IE, Safari, and Firefox < 22.\n */\n[hidden],\ntemplate {\n  display: none;\n}\n\n/* ==========================================================================\n   Base\n   ========================================================================== */\n/**\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n *    user zoom.\n */\nhtml {\n  font-family: sans-serif;\n  /* 1 */\n  -ms-text-size-adjust: 100%;\n  /* 2 */\n  -webkit-text-size-adjust: 100%;\n  /* 2 */\n}\n\n/**\n * Remove default margin.\n */\nbody {\n  margin: 0;\n}\n\n/* ==========================================================================\n   Links\n   ========================================================================== */\n/**\n * Remove the gray background color from active links in IE 10.\n */\na {\n  background: transparent;\n}\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\na:active,\na:hover {\n  outline: 0;\n}\n\n/* ==========================================================================\n   Typography\n   ========================================================================== */\n/**\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari 5, and Chrome.\n */\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/**\n * Address styling not present in IE 8/9, Safari 5, and Chrome.\n */\nabbr[title] {\n  border-bottom: 1px dotted;\n}\n\n/**\n * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.\n */\nb,\nstrong {\n  font-weight: bold;\n}\n\n/**\n * Address styling not present in Safari 5 and Chrome.\n */\ndfn {\n  font-style: italic;\n}\n\n/**\n * Address differences between Firefox and other browsers.\n */\nhr {\n  -moz-box-sizing: content-box;\n  box-sizing: content-box;\n  height: 0;\n}\n\n/**\n * Address styling not present in IE 8/9.\n */\nmark {\n  background: #ff0;\n  color: #000;\n}\n\n/**\n * Correct font family set oddly in Safari 5 and Chrome.\n */\ncode,\nkbd,\npre,\nsamp {\n  font-family: monospace, serif;\n  font-size: 1em;\n}\n\n/**\n * Improve readability of pre-formatted text in all browsers.\n */\npre {\n  white-space: pre-wrap;\n}\n\n/**\n * Set consistent quote types.\n */\nq {\n  quotes: \"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";\n}\n\n/**\n * Address inconsistent and variable font size in all browsers.\n */\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\n */\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsup {\n  top: -0.5em;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\n/* ==========================================================================\n   Embedded content\n   ========================================================================== */\n/**\n * Remove border when inside `a` element in IE 8/9.\n */\nimg {\n  border: 0;\n}\n\n/**\n * Correct overflow displayed oddly in IE 9.\n */\nsvg:not(:root) {\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   Figures\n   ========================================================================== */\n/**\n * Address margin not present in IE 8/9 and Safari 5.\n */\nfigure {\n  margin: 1em 40px;\n}\n\n/* ==========================================================================\n   Forms\n   ========================================================================== */\n/**\n * 1. Define consistent border, margin, and padding.\n * 2. Address width being affected by wide descendants in Chrome and Firefox.\n */\nfieldset {\n  border: 1px solid #c0c0c0;\n  /* 1 */\n  margin: 0 2px;\n  /* 1 */\n  min-width: 0;\n  /* 2 */\n  padding: 0.35em 0.625em 0.75em;\n  /* 1 */\n}\n\n/**\n * 1. Correct `color` not being inherited in IE 8/9.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\nlegend {\n  border: 0;\n  /* 1 */\n  padding: 0;\n  /* 2 */\n}\n\n/**\n * 1. Correct color not being inherited in all browsers.\n *    Known issue: `select` will not inherit color in Chrome and Safari on OS X.\n * 2. Correct font properties not being inherited in all browsers.\n * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  color: inherit;\n  /* 1 */\n  font: inherit;\n  /* 2 */\n  margin: 0;\n  /* 3 */\n}\n\n/**\n * Re-apply the `font-weight` to avoid modifying the default UX, and because\n * the default cannot be changed in Chrome and Safari on OS X.\n */\noptgroup {\n  font-weight: bold;\n}\n\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\nbutton,\ninput {\n  line-height: normal;\n}\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.\n * Correct `select` style inheritance in Firefox 4+ and Opera.\n */\nbutton,\nselect {\n  text-transform: none;\n}\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n *    and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n *    `input` and others.\n */\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n  -webkit-appearance: button;\n  /* 2 */\n  cursor: pointer;\n  /* 3 */\n}\n\n/**\n * Re-set default cursor for disabled elements.\n */\nbutton[disabled],\nhtml input[disabled] {\n  cursor: default;\n}\n\n/**\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */\n}\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome\n *    (include `-moz` to future-proof).\n */\ninput[type=\"search\"] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  -moz-box-sizing: content-box;\n  -webkit-box-sizing: content-box;\n  /* 2 */\n  box-sizing: content-box;\n}\n\n/**\n * Remove inner padding and search cancel button in Safari 5 and Chrome\n * on OS X.\n */\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * Remove inner padding and border in Firefox 4+.\n */\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n/**\n * 1. Remove default vertical scrollbar in IE 8/9.\n * 2. Improve readability and alignment in all browsers.\n */\ntextarea {\n  overflow: auto;\n  /* 1 */\n  vertical-align: top;\n  /* 2 */\n}\n\n/* ==========================================================================\n   Tables\n   ========================================================================== */\n/**\n * Remove most spacing between table cells.\n */\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\ntd,\nth {\n  padding: 0;\n}\n\n/* MIXINS */\n/* RESET */\nhtml {\n  font-size: 62.5%;\n}\n\nbody {\n  font-size: 1.3rem;\n  background-color: #424242;\n}\n\nh1 {\n  margin: 0;\n}\n\n@media (max-width: 650px) {\n  h1 {\n    font-size: 1.3em;\n  }\n}\n\na {\n  text-decoration: none;\n}\n\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n.leedvibes-article-content img, .leedvibes-article-content\naudio, .leedvibes-article-content\ncanvas, .leedvibes-article-content\niframe, .leedvibes-article-content\nprogress, .leedvibes-article-content\nvideo {\n  display: block;\n  margin: 0 auto;\n}\n\niframe {\n  width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n  display: flex;\n  flex-wrap: wrap;\n  width: 99vw;\n}\n\n@media (max-width: 650px) {\n  body {\n    display: block;\n    width: 100vw;\n  }\n}\n\nbutton {\n  background-color: transparent;\n  border: none;\n}\n\n.error {\n  background-color: #c53d3d;\n}\n\n.wrapper {\n  flex: 1 1 0;\n  min-width: 0;\n  min-height: 100vh;\n  background-color: #FFF;\n}\n\n@media (max-width: 650px) {\n  .wrapper {\n    margin-bottom: 0px;\n  }\n}\n\n.selected a {\n  color: #FFF;\n  font-weight: bold;\n}\n\n.notifications {\n  margin: 0;\n  color: #FFF;\n  background-color: #424242;\n}\n\n.notifications__text {\n  display: flex;\n  padding: 1em 0.5em;\n  color: #DDD;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.folder__button, .mark-as-read, .article-favorite,\n.article__read-unread {\n  border: 1px dashed transparent;\n}\n\n.folder__button:focus, .mark-as-read:focus, .article-favorite:focus,\n.article__read-unread:focus {\n  border-color: #DDD;\n}\n\n.sidebar-item-label, .folder__item a {\n  display: block;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* FEED */\n.event {\n  position: relative;\n  padding: 0 0.5em;\n  border-bottom: 0.1em solid #D9D9D9;\n}\n\n.event:not(.event--focus):hover, .event--focused:not(.event--focus) {\n  background-color: #DDD;\n}\n\n.event a {\n  color: #424242;\n}\n\n.event--new-last {\n  border-bottom-color: #424242;\n  border-width: 4px;\n}\n\n/* SIDEBAR */\n.sidebar {\n  flex: 0 0 23.07692em;\n  font-size: 0.9em;\n  overflow: hidden;\n}\n\n.sidebar a {\n  color: #fff;\n}\n\n.sidebar .settings__fields {\n  padding: 20%;\n}\n\n.folder__item,\n.feed__item {\n  display: flex;\n  position: relative;\n  padding-bottom: 0.5em;\n  padding-top: 0.5em;\n  border-left: 0.38462em solid transparent;\n}\n\n.folder__item,\n.folder__item a,\n.feed__item,\n.feed__item a {\n  color: #fff;\n}\n\n.folder__item:hover, .folder__item:active,\n.feed__item:hover,\n.feed__item:active {\n  background-color: #303030;\n}\n\n.folder__item.selected,\n.feed__item.selected {\n  border-color: white;\n}\n\n.sidebar-item {\n  flex-grow: 1;\n  height: 16px;\n  /* Favicon's height */\n  line-height: 16px;\n  overflow: hidden;\n}\n\n@media (max-width: 650px) {\n  .folder__button,\n  .sidebar-item {\n    padding: 12px 0;\n  }\n}\n\n.go-top {\n  display: inline-block;\n  padding: 2px 20px;\n  text-align: center;\n  background-color: #686868;\n  border-radius: 20%;\n}\n\n.feed-add {\n  text-align: center;\n}\n\n[data-is-opened=\"false\"] {\n  display: none;\n}\n\n.feed-add-title {\n  margin: 0 0 1em;\n  color: #fff;\n}\n\n.feed-add-url,\n.feed-add-folders {\n  width: 80%;\n}\n\n.feed-add-url {\n  padding: 0.5em;\n  border: none;\n}\n\n.feed-add-folders {\n  margin: 1em 0;\n  padding: 0.5em 2em;\n}\n\n.sidebar > section {\n  margin: 2em auto 3em;\n  padding: 0 1em;\n}\n\n.sidebar > section li {\n  display: flex;\n  color: #fff;\n  justify-content: space-between;\n}\n\n.sidebar > section button,\n.feed-add-button {\n  padding: 1em 2em;\n  color: #fff;\n  background-color: #484848;\n}\n\n.sidebar > section button:hover, .sidebar > section button:active, .sidebar > section button:focus,\n.feed-add-button:hover,\n.feed-add-button:active,\n.feed-add-button:focus {\n  color: #484848;\n  background-color: #DDD;\n}\n\n.feed-add-button {\n  margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n  position: relative;\n  overflow: hidden;\n}\n\n.feeds-list-toggle:before {\n  position: absolute;\n  width: 15px;\n  height: 15px;\n  left: 35%;\n  top: -20px;\n  content: '';\n  background-image: url(\"../images/close.svg\");\n  transition: transform 0.3s;\n}\n\n.is-opened.feeds-list-toggle:before {\n  transform: translate3d(0, 180%, 0);\n}\n\n.feeds-list-toggle__label {\n  position: absolute;\n  padding: 0.5em 1.5em;\n  top: 0;\n  left: 0;\n  transition: transform 0.3s;\n}\n\n.is-opened .feeds-list-toggle__label {\n  transform: translate3d(0, 150%, 0);\n}\n\n.feeds-list {\n  margin-top: 0;\n  padding: 0;\n}\n\n.feeds-list[data-is-opened=\"false\"] {\n  display: block;\n}\n\n@media (max-width: 650px) {\n  .feeds-list[data-is-opened=\"false\"] {\n    display: none;\n  }\n}\n\n.feeds-list:target {\n  display: block;\n}\n\n.folder {\n  border-bottom: 0.2em solid #484848;\n}\n\n.folder:first-child {\n  border-top: 0.2em solid #484848;\n}\n\n.folder__item a {\n  margin: 0 0.3em;\n}\n\n.folder__button {\n  float: left;\n  margin-right: 5px;\n  padding: 0;\n  width: 10%;\n}\n\n.folder-closed {\n  transform: rotate(270deg);\n}\n\n.folder__item,\n.feed__item {\n  padding-left: 0.4rem;\n  padding-right: 0.8rem;\n}\n\n.feed {\n  padding: 4px 0;\n  background-color: #4b4b4b;\n}\n\nhtml:not(.no-js) .feed--closed {\n  display: none;\n}\n\n.feed__item img {\n  float: left;\n  margin-left: 1.4em;\n  margin-right: 0.3em;\n  vertical-align: middle;\n}\n\n@media (max-width: 650px) {\n  .feed__item img {\n    margin-right: 0.8em;\n  }\n}\n\n.mark-as-read {\n  padding: 0 0.4rem;\n  font-size: 0.8em;\n}\n\n@media (max-width: 650px) {\n  .mark-as-read {\n    padding: 12px;\n  }\n}\n\n/* ARTICLE */\n.article__header {\n  position: relative;\n  padding: 0.5em 0;\n  overflow: hidden;\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.event--focus .article__header {\n  padding-bottom: 0.6em;\n}\n\n@media (max-width: 650px) {\n  .article__header {\n    display: grid;\n    grid-template-columns: 40px auto 80px;\n    grid-template-areas: \"favicon site date\" \"favorite title mark\";\n    align-items: center;\n    white-space: inherit;\n    min-height: 4em;\n  }\n}\n\n.article__header .article__feed-title {\n  display: inline-block;\n  width: 10%;\n  color: #555;\n  font-size: 0.9em;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n@media (max-width: 650px) {\n  .article__header .article__feed-title {\n    width: auto;\n    grid-area: site;\n  }\n}\n\n.feed-icon {\n  margin-right: 0.3em;\n  vertical-align: middle;\n  justify-self: center;\n  grid-area: favicon;\n}\n\n@media (max-width: 650px) {\n  .feed-icon {\n    margin: 0;\n  }\n}\n\n@media (max-width: 650px) {\n  .article__title {\n    margin-left: 14%;\n  }\n}\n\n@media (max-width: 650px) {\n  .article__feed-title,\n  .feed-icon ~ .article__title {\n    margin-left: 0.5em;\n  }\n}\n\n.article__title {\n  display: inline;\n  font-size: 1em;\n}\n\n@media (max-width: 650px) {\n  .article__title {\n    display: inline-block;\n    grid-area: title;\n  }\n}\n\n[class~=\"event--read\"] .article__title a {\n  color: #BBB;\n}\n\n.article__description {\n  display: inline-block;\n  margin-left: 0.4em;\n  color: #888;\n}\n\n[class~=\"event--read\"] .article__description {\n  color: #BBB;\n}\n\n@media (max-width: 650px) {\n  .article__description {\n    display: none;\n  }\n}\n\n.event--focus .article__description {\n  display: none;\n}\n\n.article__description:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  width: 16em;\n  background-image: linear-gradient(to left, white 48%, rgba(255, 255, 255, 0) 100%);\n}\n\n.event:hover .article__description:after,\n.event--focused .article__description:after {\n  background-image: linear-gradient(to left, #DDD 6em, rgba(221, 221, 221, 0) 100%);\n}\n\n@media (max-width: 650px) {\n  .event:hover .article__description:after,\n  .event--focused .article__description:after {\n    background: none;\n  }\n}\n\n@media (max-width: 650px) {\n  .article__description:after {\n    background: none;\n  }\n}\n\n.article__date {\n  position: absolute;\n  right: 65px;\n  color: #424242;\n  font-size: 0.9em;\n}\n\n@media (max-width: 650px) {\n  .article__date {\n    position: relative;\n    right: 0;\n    grid-area: date;\n    justify-self: right;\n  }\n}\n\n.article-favorite {\n  right: 30px;\n  opacity: 0.3;\n}\n\n.article-favorite--favorited {\n  opacity: 1;\n}\n\n@media (max-width: 650px) {\n  .article-favorite {\n    right: 0;\n    grid-area: favorite;\n    justify-self: left;\n  }\n}\n\n.article__read-unread {\n  width: 1.7em;\n  right: 0;\n  color: white;\n  background-color: transparent;\n  opacity: 0.3;\n  cursor: pointer;\n}\n\n@media (max-width: 650px) {\n  .article__read-unread {\n    grid-area: mark;\n    justify-self: right;\n  }\n}\n\n.article-favorite,\n.article__read-unread {\n  position: absolute;\n  display: flex;\n  padding: 0;\n  width: 30px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  top: 0;\n  bottom: 0;\n}\n\n.article-favorite:hover, .article-favorite:active, .article-favorite:focus,\n.article__read-unread:hover,\n.article__read-unread:active,\n.article__read-unread:focus {\n  border-color: #424242;\n}\n\n@media (max-width: 650px) {\n  .article-favorite,\n  .article__read-unread {\n    position: relative;\n    padding: 0;\n    width: 100%;\n    min-height: 50px;\n  }\n}\n\n.article__read-read {\n  opacity: 1;\n}\n\n.leedvibes-article-content {\n  display: none;\n  margin: 0 auto 1em;\n  width: 42.8125em;\n  font-size: 1.6rem;\n  line-height: 1.7;\n  overflow: auto;\n  overflow-wrap: break-word;\n}\n\n@media (max-width: 650px) {\n  .leedvibes-article-content {\n    padding: 0 1rem;\n    width: auto;\n  }\n}\n\n.leedvibes-article-content a {\n  text-decoration: underline;\n}\n\n.leedvibes-article-content--is-opened {\n  display: block;\n}\n\n.leedvibes-article-content__infos {\n  margin: 1em 0;\n}\n\n.leedvibes-article-content__infos a {\n  font-size: 2.8rem;\n  line-height: 1;\n}\n\n.leedvibes-article-content__switch-view {\n  display: none;\n  position: absolute;\n  right: 8em;\n  top: 0.4em;\n  background: none;\n  border: 1px solid #BBB;\n  z-index: 20;\n}\n\n@media (max-width: 650px) {\n  .leedvibes-article-content__switch-view {\n    top: 2.4em;\n    right: 4em;\n  }\n}\n\n.event--focus .leedvibes-article-content__switch-view {\n  display: inherit;\n}\n\n/* USER SETTINGS */\n.user-login,\n.settings {\n  display: flex;\n  justify-content: space-around;\n  padding: 0 1em;\n  color: #CACACA;\n  align-items: center;\n  text-align: center;\n}\n\n.user-login {\n  margin: 1em auto;\n}\n\n.settings {\n  padding: 1em;\n  background-color: #303030;\n}\n\n.user-login {\n  flex-direction: column;\n}\n\n.settings-item {\n  padding: 0.5em 1.5em;\n  min-width: 15px;\n  min-height: 15px;\n  border-bottom: 0.38462em solid transparent;\n  box-sizing: content-box;\n  transition: border 0.2s ease-in-out 0s;\n}\n\n.settings-item:hover, .settings-item:active, .settings-item:focus {\n  border-color: white;\n}\n\nbutton.settings-item {\n  border-top-width: 0;\n  border-right-width: 0;\n  border-left-width: 0;\n  background-color: transparent;\n}\n\nbutton.settings-item:focus {\n  outline: dotted 1px;\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'] {\n  min-width: 7em;\n  width: 35%;\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'],\n.settings__fields input[type='submit'] {\n  display: block;\n  margin: 0.4em auto;\n  padding: 0.5em;\n  color: #303030;\n}\n\n.favorite-inverted {\n  fill: white;\n}\n\n.animation-spin {\n  animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.shortcuts-toggle {\n  display: none;\n}\n\n@media (min-width: 650px) {\n  html:not(.no-js) .shortcuts-toggle {\n    display: block;\n  }\n}\n\n.shortcuts {\n  position: fixed;\n  display: none;\n  left: 0;\n  top: 0;\n  padding: 20px;\n  width: 100%;\n  height: 100%;\n  color: white;\n  background-color: #303030e6;\n  overflow: scroll;\n}\n\n.shortcuts:hover {\n  cursor: pointer;\n}\n\n.shortcuts-list {\n  margin: 0;\n  padding: 0;\n}\n\n.shortcut {\n  display: flex;\n  margin-bottom: 10px;\n  align-items: center;\n}\n\n.shortcut-key {\n  display: inline-block;\n  margin-right: 20px;\n  padding: 5px 5px 10px 5px;\n  min-width: 20px;\n  color: #777777;\n  font-size: 12px;\n  background-color: #DDDDDD;\n  border: 2px solid #F9F7F7;\n  border-bottom: 4px solid #898989;\n  border-right: 4px solid #898989;\n  border-radius: 3px;\n  box-shadow: 0 0 10px #111010;\n}\n\n.shortcut-key + .shortcut-key {\n  margin-left: 20px;\n}\n\n/* MEDIA QUERIES */\n@media (max-width: 650px) {\n  td {\n    display: block;\n  }\n}\n\n.mobile-only {\n  display: none;\n}\n\n@media (max-width: 650px) {\n  .mobile-only {\n    display: inline;\n  }\n}\n\n/* IE9- */\n.no-flexboxlegacy body {\n  display: block;\n}\n\n.no-flexboxlegacy .wrapper {\n  margin-left: 20%;\n}\n\n.no-flexboxlegacy .sidebar {\n  float: left;\n  width: 20%;\n}\n\n/* IE7 */\n.no-flexboxlegacy.no-boxsizing .sidebar {\n  width: 19%;\n}\n\n.hidden {\n  display: none;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n","// VARS\n$font-size-base: 13px;\n$sidebar-button-size: 10%;\n$settings-padding: 0.5em 1.5em;\n$sidebar-color: #fff;\n$sidebar-color-bg: #424242;\n$folder-separator: #484848;\n$sidebar-color-bg-darken: darken( $sidebar-color-bg, 7% );\n$sidebar-color-alt: #686868;\n$feed-entry-color: $sidebar-color-bg;\n$breakpoint: \"650px\";\n$breakpoint-min: \"min-width: #{$breakpoint}\";\n$breakpoint-max: \"max-width: #{$breakpoint}\";\n$feed-bgc-used: #DDD;\n$error-color: #c53d3d;\n$feed-event-read-color: #BBB;\n\n$opacity-low: 0.3;\n$position-top-on-break: 30px;\n$action-icon-width: 30px;\n\n@import \"normalize\";\n\n/* MIXINS */\n@import \"partials/mixins/_helpers.scss\";\n\n/* RESET */\nhtml {\n    font-size: 62.5%;\n}\nbody {\n    font-size: 1.3rem;\n    background-color: $sidebar-color-bg;\n}\nh1 {\n    margin: 0;\n\n    @media( $breakpoint-max ) {\n        font-size: 1.3em;\n    }\n}\na {\n    text-decoration: none;\n}\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n    max-width: 100%;\n    height: auto;\n\n    .leedvibes-article-content & {\n        display: block;\n        margin: 0 auto;\n    }\n}\n\niframe {\n    width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n    display: flex;\n    flex-wrap: wrap;\n    width: 99vw;\n\n    @media($breakpoint-max) {\n        display: block;\n        width: 100vw;\n    }\n}\n\nbutton {\n    background-color: transparent;\n    border: none;\n}\n\n.error {\n    background-color: $error-color;\n}\n\n.wrapper {\n    flex: 1 1 0;\n    min-width: 0;\n    min-height: 100vh;\n    background-color: #FFF;\n\n    @media($breakpoint-max) {\n        // Avoid extra margin-bottom when all\n        // the content is read and infinite-scroll-end\n        // shows up\n        margin-bottom: 0px;\n    }\n}\n.selected a {\n    color: #FFF;\n    font-weight: bold;\n}\n\n.notifications {\n    margin: 0;\n    color: #FFF;\n    background-color: $sidebar-color-bg;\n}\n\n.notifications__text {\n    display: flex;\n    padding: 1em 0.5em;\n    color: $feed-bgc-used;\n    justify-content: space-between;\n    align-items: center;\n}\n\n%text-color-dark {\n    color: #000;\n}\n\n%button-focused {\n    border: 1px dashed transparent;\n\n    &:focus {\n        border-color: $feed-bgc-used;\n    }\n}\n%overflow-sidebar {\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* FEED */\n$entry-space: 0.5em;\n.event {\n    position: relative;\n    padding: 0 $entry-space;\n    border-bottom: 0.1em solid #D9D9D9;\n\n    &:not(.event--focus):hover,\n    &--focused:not(.event--focus) {\n        background-color: $feed-bgc-used;\n    }\n\n    a {\n        color: $feed-entry-color;\n    }\n}\n\n.event--new-last {\n    border-bottom-color: $sidebar-color-bg;\n    border-width: 4px;\n}\n\n/* SIDEBAR */\n$border-base: em( 5px ) solid transparent;\n$border-color-active: white;\n\n.sidebar {\n    flex: 0 0 em( 300px );\n    font-size: 0.9em;\n    overflow: hidden;\n\n    a {\n        color: $sidebar-color;\n    }\n\n    .settings__fields {\n        padding: 20%;\n    }\n\n}\n\n.folder__item,\n.feed__item {\n    display: flex;\n    position: relative;\n    $padding : 0.5em;\n    padding-bottom: $padding;\n    padding-top: $padding;\n    border-left: $border-base;\n\n    &,\n    a {\n        color: $sidebar-color;\n    }\n\n    &:hover,\n    &:active {\n        background-color: $sidebar-color-bg-darken;\n    }\n\n    &.selected {\n        border-color: $border-color-active;\n    }\n}\n\n.sidebar-item {\n    flex-grow: 1;\n    height: 16px; /* Favicon's height */\n    line-height: 16px;\n    overflow: hidden;\n}\n\n.folder__button,\n.sidebar-item {\n    @media($breakpoint-max) {\n        padding: 12px 0;\n    }\n}\n\n.sidebar-item-label {\n    @extend %overflow-sidebar;\n}\n\n.go-top {\n    display: inline-block;\n    padding: 2px 20px;\n    text-align: center;\n    background-color: $sidebar-color-alt;\n    border-radius: 20%;\n}\n\n.feed-add {\n    text-align: center;\n}\n\n[data-is-opened=\"false\"] {\n    display: none;\n}\n\n.feed-add-title {\n    margin: 0 0 1em;\n    color: $sidebar-color;\n}\n\n.feed-add-url,\n.feed-add-folders {\n    width: 80%;\n}\n\n.feed-add-url {\n    padding: 0.5em;\n    border: none;\n}\n\n.feed-add-folders {\n    margin: 1em 0;\n    padding: 0.5em 2em;\n}\n\n.sidebar > section {\n    margin: 2em auto 3em;\n    padding: 0 1em;\n\n    li {\n        display: flex;\n        color: $sidebar-color;\n        justify-content: space-between;\n    }\n}\n\n.sidebar > section button,\n.feed-add-button {\n    padding: 1em 2em;\n    color: $sidebar-color;\n    background-color: $folder-separator;\n\n    &:hover,\n    &:active,\n    &:focus {\n        color: $folder-separator;\n        background-color: $feed-bgc-used;\n    }\n}\n\n.feed-add-button {\n    margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n    position: relative;\n    overflow: hidden;\n}\n$feeds-list-toggle-transition: transform 0.3s;\n.feeds-list-toggle:before {\n    position: absolute;\n    width: 15px;\n    height: 15px;\n    left: 35%;\n    top: -20px;\n    content: '';\n    background-image: url( '../images/close.svg' );\n    transition: $feeds-list-toggle-transition;\n\n    @at-root .is-opened#{&} {\n        transform: translate3d(0, 180%, 0);\n    }\n}\n\n.feeds-list-toggle__label {\n    position: absolute;\n    padding: $settings-padding;\n    top: 0;\n    left: 0;\n    transition: $feeds-list-toggle-transition;\n\n    .is-opened & {\n        transform: translate3d(0, 150%, 0);\n    }\n}\n\n.feeds-list {\n    margin-top:0;\n    padding: 0;\n\n    &[data-is-opened=\"false\"] {\n        display: block;\n\n        @media($breakpoint-max) {\n            display: none;\n        }\n    }\n\n    &:target {\n        display: block;\n    }\n}\n\n.folder {\n    $value: 0.2em solid $folder-separator;\n    border-bottom: $value;\n\n    &:first-child {\n        border-top: $value;\n    }\n}\n\n.folder__item a {\n    margin: 0 0.3em;\n    @extend %overflow-sidebar;\n}\n.folder__button {\n    float: left;\n    margin-right: 5px;\n    padding: 0;\n    width: $sidebar-button-size;\n    @extend %button-focused;\n}\n\n.folder-closed {\n    transform: rotate(270deg);\n}\n\n.folder__item,\n.feed__item {\n    padding-left: 0.4rem;\n    padding-right: 0.8rem;\n}\n.feed {\n    padding: 4px 0;\n    background-color: #4b4b4b;\n}\n\nhtml:not(.no-js) .feed--closed {\n    display: none;\n}\n\n.feed__item img {\n    float: left;\n    margin-left: 1.4em;\n    margin-right: 0.3em;\n    vertical-align: middle;\n\n    @media($breakpoint-max) {\n        margin-right: 0.8em;\n    }\n}\n\n.mark-as-read {\n    padding: 0 0.4rem;\n    font-size: 0.8em;\n    @extend %button-focused;\n\n    @media($breakpoint-max) {\n        padding: 12px;\n    }\n}\n\n/* ARTICLE */\n.article__header {\n    position: relative;\n    padding: $entry-space 0;\n    overflow: hidden;\n    white-space: nowrap;\n    cursor: pointer;\n\n    .event--focus & {\n        padding-bottom: 0.6em;\n    }\n\n    @media($breakpoint-max) {\n        display: grid;\n        grid-template-columns: 40px auto 80px;\n        grid-template-areas: \"favicon site date\" \"favorite title mark\";\n        align-items: center;\n        white-space: inherit;\n        min-height: 4em;\n    }\n\n    .article__feed-title {\n        display: inline-block;\n        width: 10%;\n        color: #555;\n        font-size: 0.9em;\n        overflow-x: hidden;\n        text-overflow: ellipsis;\n        vertical-align: middle;\n\n        @media($breakpoint-max) {\n            width: auto;\n            grid-area: site;\n        }\n    }\n}\n\n.feed-icon {\n    margin-right: 0.3em;\n    vertical-align: middle;\n    justify-self: center;\n    grid-area: favicon;\n\n    @media($breakpoint-max) {\n        margin: 0;\n    }\n}\n\n.article__title {\n    @media($breakpoint-max) {\n        margin-left: 14%;\n    }\n}\n\n.article__feed-title,\n.feed-icon ~ .article__title {\n    @media($breakpoint-max) {\n        margin-left: 0.5em;\n    }\n}\n\n.article__title {\n    display: inline;\n    font-size: 1em;\n\n    @media($breakpoint-max) {\n        display: inline-block;\n        grid-area:title;\n    }\n\n    [class~=\"event--read\"] & a {\n        color: $feed-event-read-color;\n    }\n}\n.article__description {\n    display: inline-block;\n    margin-left: 0.4em;\n    color: #888;\n\n    [class~=\"event--read\"] & {\n        color: $feed-event-read-color;\n    }\n\n    @media($breakpoint-max) {\n        display: none;\n    }\n\n    .event--focus & {\n        display: none;\n    }\n\n    &:after {\n        content: \"\";\n        display: block;\n        position: absolute;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 16em;\n        $support-for-original-webkit-gradients : false;\n        background-image: linear-gradient(to left, white 48%, rgba(255, 255, 255, 0) 100%);\n\n        .event:hover &,\n        .event--focused & {\n            background-image: linear-gradient(to left, $feed-bgc-used 6em, rgba($feed-bgc-used, 0) 100%);\n\n            @media($breakpoint-max) {\n                background: none;\n            }\n\n        }\n\n        @media($breakpoint-max) {\n            background: none;\n        }\n    }\n}\n.article__date {\n    position: absolute;\n    right: $action-icon-width * 2 + 5px;\n    color: $feed-entry-color;\n    font-size: 0.9em;\n\n    @media( $breakpoint-max ) {\n        position: relative;\n        right: 0;\n        grid-area: date;\n        justify-self: right;\n    }\n}\n\n.article-favorite {\n    right: $action-icon-width;\n    opacity: $opacity-low;\n\n    &--favorited {\n        opacity: 1;\n    }\n\n    @media( $breakpoint-max ) {\n        right: 0;\n        grid-area: favorite;\n        justify-self: left;\n    }\n}\n\n.article__read-unread {\n    width: 1.7em;\n    right: 0;\n    color: white;\n    background-color: transparent;\n    opacity: $opacity-low;\n    cursor: pointer;\n\n    @media( $breakpoint-max ) {\n        grid-area: mark;\n        justify-self: right;\n    }\n}\n\n.article-favorite,\n.article__read-unread {\n    position: absolute;\n    display: flex;\n    padding: 0;\n    width: $action-icon-width;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n    top: 0;\n    bottom: 0;\n    @extend %button-focused;\n\n    &:hover,\n    &:active,\n    &:focus {\n        border-color: $sidebar-color-bg;\n    }\n\n    @media( $breakpoint-max ) {\n        position: relative;\n        padding: 0;\n        width: 100%;\n        min-height: 50px;\n    }\n}\n\n.article__read-read {\n    opacity: 1;\n}\n\n.leedvibes-article-content {\n    display: none;\n    margin: 0 auto 1em;\n    width: 42.8125em; // font: 16px / width: 685px (http://www.pearsonified.com/typography/)\n    font-size: 1.6rem;\n    line-height: 1.7;\n    overflow: auto;\n    overflow-wrap: break-word;\n\n    @media($breakpoint-max) {\n        padding: 0 1rem;\n        width: auto;\n    }\n\n    a {\n        text-decoration: underline;\n    }\n}\n\n.leedvibes-article-content--is-opened {\n    display: block;\n}\n\n.leedvibes-article-content__infos {\n    margin: 1em 0;\n\n    a {\n        font-size: 2.8rem;\n        line-height: 1;\n    }\n}\n// [todo] - Do a better style\n.leedvibes-article-content__switch-view {\n    display: none;\n    position: absolute;\n    right: 8em;\n    top: 0.4em;\n    background: none;\n    border: 1px solid $feed-event-read-color;\n    z-index: 20;\n\n    @media($breakpoint-max) {\n        top: 2.4em;\n        right: 4em;\n    }\n\n    .event--focus & {\n        display: inherit;\n    }\n}\n\n/* USER SETTINGS */\n.user-login,\n.settings {\n    display: flex;\n    justify-content: space-around;\n    padding: 0 1em;\n    color: #CACACA;\n    align-items: center;\n    text-align: center;\n}\n\n.user-login {\n    margin: 1em auto;\n}\n\n.settings {\n    padding: 1em;\n    background-color: $sidebar-color-bg-darken;\n}\n\n.user-login {\n    flex-direction: column;\n}\n\n.settings-item {\n    padding: $settings-padding;\n    min-width: 15px;\n    min-height: 15px;\n    border-bottom: $border-base;\n    box-sizing: content-box;\n    transition: border 0.2s ease-in-out 0s;\n\n    &:hover,\n    &:active,\n    &:focus {\n        border-color: $border-color-active;\n    }\n}\n\nbutton.settings-item {\n    border-top-width: 0;\n    border-right-width: 0;\n    border-left-width: 0;\n    background-color: transparent;\n\n    &:focus {\n        outline: dotted 1px;\n    }\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'] {\n    min-width: 7em;\n    width: 35%;\n}\n.settings__fields input[type='text'],\n.settings__fields input[type='password'],\n.settings__fields input[type='submit'] {\n    display: block;\n    margin: 0.4em auto;\n    padding: 0.5em;\n    color: $sidebar-color-bg-darken;\n}\n\n.favorite-inverted {\n    fill: white;\n}\n\n.animation-spin {\n    animation: spin 2s linear infinite;\n}\n@keyframes spin {\n    100% { transform: rotate(360deg); }\n}\n\n.shortcuts-toggle {\n    display: none;\n}\n\n@media( $breakpoint-min ) {\n    html:not(.no-js) .shortcuts-toggle {\n        display: block;\n    }\n}\n\n.shortcuts {\n    position: fixed;\n    display: none;\n    left: 0;\n    top: 0;\n    padding: 20px;\n    width: 100%;\n    height: 100%;\n    color: white;\n    background-color: #{$sidebar-color-bg-darken}e6;\n    overflow: scroll;\n}\n\n.shortcuts:hover {\n    cursor: pointer;\n}\n\n\n.shortcuts-list {\n    margin: 0;\n    padding: 0;\n}\n\n.shortcut {\n    display: flex;\n    margin-bottom: 10px;\n    align-items: center;\n}\n\n$shortcut-key-space: 20px;\n.shortcut-key {\n    display: inline-block;\n    margin-right: $shortcut-key-space;\n    padding: 5px 5px 10px 5px;\n    min-width: 20px;\n    color: #777777;\n    font-size: 12px;\n    background-color: #DDDDDD;\n    border: 2px solid #F9F7F7;\n    border-bottom: 4px solid #898989;\n    border-right: 4px solid #898989;\n    border-radius: 3px;\n    box-shadow: 0 0 10px #111010;\n\n    & + & {\n        margin-left: $shortcut-key-space;\n    }\n}\n\n/* MEDIA QUERIES */\n@media($breakpoint-max) {\n    td {\n        display: block;\n    }\n}\n\n.mobile-only {\n    display: none;\n\n    @media($breakpoint-max) {\n        display: inline;\n    }\n}\n\n/* IE9- */\n.no-flexboxlegacy body {\n    display: block;\n}\n\n.no-flexboxlegacy .wrapper {\n    margin-left: 20%;\n}\n\n.no-flexboxlegacy .sidebar {\n    float: left;\n    width: 20%;\n}\n\n/* IE7 */\n.no-flexboxlegacy.no-boxsizing .sidebar {\n    width: 19%;\n}\n\n// Utils\n\n.hidden {\n    display: none;\n}\n\n.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0,0,0,0);\n    border: 0;\n}\n","@function em($target, $context: $font-size-base) {\n    @if $target == 0 { @return 0 }\n    @return $target / $context + 0em;\n}\n"]}
\ No newline at end of file
+{"version":3,"sources":["_normalize.scss","style.css","style.scss","partials/mixins/_helpers.scss"],"names":[],"mappings":"AAAA,2DAAA;AAEA;;+ECC+E;ADG/E;;ECAE;ADIF;;;;;;;;;;;;EAYI,cAAc;ACFlB;;ADKA;;ECDE;ADKF;;;;EAII,qBAAqB;ACHzB;;ADMA;;;ECDE;ADMF;EACI,aAAa;EACb,SAAS;ACJb;;ADOA;;;ECFE;AACF;;EDQI,aAAa;ACLjB;;ADQA;;+ECJ+E;ADQ/E;;;;ECHE;ADSF;EACI,uBAAuB;EAAE,MAAA;EACzB,0BAA0B;EAAE,MAAA;EAC5B,8BAA8B;EAAE,MAAA;ACJpC;;ADOA;;ECHE;ADOF;EACI,SAAS;ACLb;;ADQA;;+ECJ+E;ADQ/E;;ECLE;ADSF;EACI,uBAAuB;ACP3B;;ADUA;;ECNE;ADUF;;EAEI,UAAU;ACRd;;ADWA;;+ECP+E;ADW/E;;;ECPE;ADYF;EACI,cAAc;EACd,gBAAgB;ACVpB;;ADaA;;ECTE;ADaF;EACI,yBAAyB;ACX7B;;ADcA;;ECVE;ADcF;;EAEI,iBAAiB;ACZrB;;ADeA;;ECXE;ADeF;EACI,kBAAkB;ACbtB;;ADgBA;;ECZE;ADgBF;EAEI,+BAAuB;EAAvB,uBAAuB;EACvB,SAAS;ACdb;;ADiBA;;ECbE;ADiBF;EACI,gBAAgB;EAChB,WAAW;ACff;;ADkBA;;ECdE;ADkBF;;;;EAII,6BAA6B;EAC7B,cAAc;AChBlB;;ADmBA;;ECfE;ADmBF;EACI,qBAAqB;ACjBzB;;ADoBA;;EChBE;ADoBF;EACI,uCAAuC;AClB3C;;ADqBA;;ECjBE;ADqBF;EACI,cAAc;ACnBlB;;ADsBA;;EClBE;ADsBF;;EAEI,cAAc;EACd,cAAc;EACd,kBAAkB;EAClB,wBAAwB;ACpB5B;;ADuBA;EACI,WAAW;ACpBf;;ADuBA;EACI,eAAe;ACpBnB;;ADuBA;;+ECnB+E;ADuB/E;;ECpBE;ADwBF;EACI,SAAS;ACtBb;;ADyBA;;ECrBE;ADyBF;EACI,gBAAgB;ACvBpB;;AD0BA;;+ECtB+E;AD0B/E;;ECvBE;AD2BF;EACI,gBAAgB;ACzBpB;;AD4BA;;+ECxB+E;AD4B/E;;;ECxBE;AD6BF;EACI,yBAAyB;EAAE,MAAA;EAC3B,aAAa;EAAE,MAAA;EACf,YAAY;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","file":"style.css","sourcesContent":["/*! normalize.css v2.1.3 | MIT License | git.io/normalize */\n\n/* ==========================================================================\n   HTML5 display definitions\n   ========================================================================== */\n\n/**\n * Correct `block` display not defined in IE 8/9.\n */\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary {\n    display: block;\n}\n\n/**\n * Correct `inline-block` display not defined in IE 8/9.\n */\n\naudio,\ncanvas,\nprogress,\nvideo {\n    display: inline-block;\n}\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\n\naudio:not([controls]) {\n    display: none;\n    height: 0;\n}\n\n/**\n * Address `[hidden]` styling not present in IE 8/9.\n * Hide the `template` element in IE, Safari, and Firefox < 22.\n */\n\n[hidden],\ntemplate {\n    display: none;\n}\n\n/* ==========================================================================\n   Base\n   ========================================================================== */\n\n/**\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n *    user zoom.\n */\n\nhtml {\n    font-family: sans-serif; /* 1 */\n    -ms-text-size-adjust: 100%; /* 2 */\n    -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/**\n * Remove default margin.\n */\n\nbody {\n    margin: 0;\n}\n\n/* ==========================================================================\n   Links\n   ========================================================================== */\n\n/**\n * Remove the gray background color from active links in IE 10.\n */\n\na {\n    background: transparent;\n}\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\n\na:active,\na:hover {\n    outline: 0;\n}\n\n/* ==========================================================================\n   Typography\n   ========================================================================== */\n\n/**\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari 5, and Chrome.\n */\n\nh1 {\n    font-size: 2em;\n    margin: 0.67em 0;\n}\n\n/**\n * Address styling not present in IE 8/9, Safari 5, and Chrome.\n */\n\nabbr[title] {\n    border-bottom: 1px dotted;\n}\n\n/**\n * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.\n */\n\nb,\nstrong {\n    font-weight: bold;\n}\n\n/**\n * Address styling not present in Safari 5 and Chrome.\n */\n\ndfn {\n    font-style: italic;\n}\n\n/**\n * Address differences between Firefox and other browsers.\n */\n\nhr {\n    -moz-box-sizing: content-box;\n    box-sizing: content-box;\n    height: 0;\n}\n\n/**\n * Address styling not present in IE 8/9.\n */\n\nmark {\n    background: #ff0;\n    color: #000;\n}\n\n/**\n * Correct font family set oddly in Safari 5 and Chrome.\n */\n\ncode,\nkbd,\npre,\nsamp {\n    font-family: monospace, serif;\n    font-size: 1em;\n}\n\n/**\n * Improve readability of pre-formatted text in all browsers.\n */\n\npre {\n    white-space: pre-wrap;\n}\n\n/**\n * Set consistent quote types.\n */\n\nq {\n    quotes: \"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";\n}\n\n/**\n * Address inconsistent and variable font size in all browsers.\n */\n\nsmall {\n    font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\n */\n\nsub,\nsup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n}\n\nsup {\n    top: -0.5em;\n}\n\nsub {\n    bottom: -0.25em;\n}\n\n/* ==========================================================================\n   Embedded content\n   ========================================================================== */\n\n/**\n * Remove border when inside `a` element in IE 8/9.\n */\n\nimg {\n    border: 0;\n}\n\n/**\n * Correct overflow displayed oddly in IE 9.\n */\n\nsvg:not(:root) {\n    overflow: hidden;\n}\n\n/* ==========================================================================\n   Figures\n   ========================================================================== */\n\n/**\n * Address margin not present in IE 8/9 and Safari 5.\n */\n\nfigure {\n    margin: 1em 40px;\n}\n\n/* ==========================================================================\n   Forms\n   ========================================================================== */\n\n/**\n * 1. Define consistent border, margin, and padding.\n * 2. Address width being affected by wide descendants in Chrome and Firefox.\n */\n\nfieldset {\n    border: 1px solid #c0c0c0; /* 1 */\n    margin: 0 2px; /* 1 */\n    min-width: 0; /* 2 */\n    padding: 0.35em 0.625em 0.75em; /* 1 */\n}\n\n/**\n * 1. Correct `color` not being inherited in IE 8/9.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\n\nlegend {\n    border: 0; /* 1 */\n    padding: 0; /* 2 */\n}\n\n/**\n * 1. Correct color not being inherited in all browsers.\n *    Known issue: `select` will not inherit color in Chrome and Safari on OS X.\n * 2. Correct font properties not being inherited in all browsers.\n * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n    color: inherit; /* 1 */\n    font: inherit; /* 2 */\n    margin: 0; /* 3 */\n}\n\n/**\n * Re-apply the `font-weight` to avoid modifying the default UX, and because\n * the default cannot be changed in Chrome and Safari on OS X.\n */\n\noptgroup {\n    font-weight: bold;\n}\n\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\n\nbutton,\ninput {\n    line-height: normal;\n}\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.\n * Correct `select` style inheritance in Firefox 4+ and Opera.\n */\n\nbutton,\nselect {\n    text-transform: none;\n}\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n *    and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n *    `input` and others.\n */\n\nbutton,\nhtml input[type=\"button\"], /* 1 */\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n    -webkit-appearance: button; /* 2 */\n    cursor: pointer; /* 3 */\n}\n\n/**\n * Re-set default cursor for disabled elements.\n */\n\nbutton[disabled],\nhtml input[disabled] {\n    cursor: default;\n}\n\n/**\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n    box-sizing: border-box; /* 1 */\n    padding: 0; /* 2 */\n}\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome\n *    (include `-moz` to future-proof).\n */\n\ninput[type=\"search\"] {\n    -webkit-appearance: textfield; /* 1 */\n    -moz-box-sizing: content-box;\n    -webkit-box-sizing: content-box; /* 2 */\n    box-sizing: content-box;\n}\n\n/**\n * Remove inner padding and search cancel button in Safari 5 and Chrome\n * on OS X.\n */\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n    -webkit-appearance: none;\n}\n\n/**\n * Remove inner padding and border in Firefox 4+.\n */\n\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n}\n\n/**\n * 1. Remove default vertical scrollbar in IE 8/9.\n * 2. Improve readability and alignment in all browsers.\n */\n\ntextarea {\n    overflow: auto; /* 1 */\n    vertical-align: top; /* 2 */\n}\n\n/* ==========================================================================\n   Tables\n   ========================================================================== */\n\n/**\n * Remove most spacing between table cells.\n */\n\ntable {\n    border-collapse: collapse;\n    border-spacing: 0;\n}\n\ntd,\nth {\n    padding: 0;\n}\n","/*! normalize.css v2.1.3 | MIT License | git.io/normalize */\n/* ==========================================================================\n   HTML5 display definitions\n   ========================================================================== */\n/**\n * Correct `block` display not defined in IE 8/9.\n */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary {\n  display: block;\n}\n\n/**\n * Correct `inline-block` display not defined in IE 8/9.\n */\naudio,\ncanvas,\nprogress,\nvideo {\n  display: inline-block;\n}\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\naudio:not([controls]) {\n  display: none;\n  height: 0;\n}\n\n/**\n * Address `[hidden]` styling not present in IE 8/9.\n * Hide the `template` element in IE, Safari, and Firefox < 22.\n */\n[hidden],\ntemplate {\n  display: none;\n}\n\n/* ==========================================================================\n   Base\n   ========================================================================== */\n/**\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n *    user zoom.\n */\nhtml {\n  font-family: sans-serif;\n  /* 1 */\n  -ms-text-size-adjust: 100%;\n  /* 2 */\n  -webkit-text-size-adjust: 100%;\n  /* 2 */\n}\n\n/**\n * Remove default margin.\n */\nbody {\n  margin: 0;\n}\n\n/* ==========================================================================\n   Links\n   ========================================================================== */\n/**\n * Remove the gray background color from active links in IE 10.\n */\na {\n  background: transparent;\n}\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\na:active,\na:hover {\n  outline: 0;\n}\n\n/* ==========================================================================\n   Typography\n   ========================================================================== */\n/**\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari 5, and Chrome.\n */\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/**\n * Address styling not present in IE 8/9, Safari 5, and Chrome.\n */\nabbr[title] {\n  border-bottom: 1px dotted;\n}\n\n/**\n * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.\n */\nb,\nstrong {\n  font-weight: bold;\n}\n\n/**\n * Address styling not present in Safari 5 and Chrome.\n */\ndfn {\n  font-style: italic;\n}\n\n/**\n * Address differences between Firefox and other browsers.\n */\nhr {\n  -moz-box-sizing: content-box;\n  box-sizing: content-box;\n  height: 0;\n}\n\n/**\n * Address styling not present in IE 8/9.\n */\nmark {\n  background: #ff0;\n  color: #000;\n}\n\n/**\n * Correct font family set oddly in Safari 5 and Chrome.\n */\ncode,\nkbd,\npre,\nsamp {\n  font-family: monospace, serif;\n  font-size: 1em;\n}\n\n/**\n * Improve readability of pre-formatted text in all browsers.\n */\npre {\n  white-space: pre-wrap;\n}\n\n/**\n * Set consistent quote types.\n */\nq {\n  quotes: \"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";\n}\n\n/**\n * Address inconsistent and variable font size in all browsers.\n */\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\n */\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsup {\n  top: -0.5em;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\n/* ==========================================================================\n   Embedded content\n   ========================================================================== */\n/**\n * Remove border when inside `a` element in IE 8/9.\n */\nimg {\n  border: 0;\n}\n\n/**\n * Correct overflow displayed oddly in IE 9.\n */\nsvg:not(:root) {\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   Figures\n   ========================================================================== */\n/**\n * Address margin not present in IE 8/9 and Safari 5.\n */\nfigure {\n  margin: 1em 40px;\n}\n\n/* ==========================================================================\n   Forms\n   ========================================================================== */\n/**\n * 1. Define consistent border, margin, and padding.\n * 2. Address width being affected by wide descendants in Chrome and Firefox.\n */\nfieldset {\n  border: 1px solid #c0c0c0;\n  /* 1 */\n  margin: 0 2px;\n  /* 1 */\n  min-width: 0;\n  /* 2 */\n  padding: 0.35em 0.625em 0.75em;\n  /* 1 */\n}\n\n/**\n * 1. Correct `color` not being inherited in IE 8/9.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\nlegend {\n  border: 0;\n  /* 1 */\n  padding: 0;\n  /* 2 */\n}\n\n/**\n * 1. Correct color not being inherited in all browsers.\n *    Known issue: `select` will not inherit color in Chrome and Safari on OS X.\n * 2. Correct font properties not being inherited in all browsers.\n * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  color: inherit;\n  /* 1 */\n  font: inherit;\n  /* 2 */\n  margin: 0;\n  /* 3 */\n}\n\n/**\n * Re-apply the `font-weight` to avoid modifying the default UX, and because\n * the default cannot be changed in Chrome and Safari on OS X.\n */\noptgroup {\n  font-weight: bold;\n}\n\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\nbutton,\ninput {\n  line-height: normal;\n}\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.\n * Correct `select` style inheritance in Firefox 4+ and Opera.\n */\nbutton,\nselect {\n  text-transform: none;\n}\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n *    and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n *    `input` and others.\n */\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n  -webkit-appearance: button;\n  /* 2 */\n  cursor: pointer;\n  /* 3 */\n}\n\n/**\n * Re-set default cursor for disabled elements.\n */\nbutton[disabled],\nhtml input[disabled] {\n  cursor: default;\n}\n\n/**\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */\n}\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome\n *    (include `-moz` to future-proof).\n */\ninput[type=\"search\"] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  -moz-box-sizing: content-box;\n  -webkit-box-sizing: content-box;\n  /* 2 */\n  box-sizing: content-box;\n}\n\n/**\n * Remove inner padding and search cancel button in Safari 5 and Chrome\n * on OS X.\n */\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * Remove inner padding and border in Firefox 4+.\n */\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n/**\n * 1. Remove default vertical scrollbar in IE 8/9.\n * 2. Improve readability and alignment in all browsers.\n */\ntextarea {\n  overflow: auto;\n  /* 1 */\n  vertical-align: top;\n  /* 2 */\n}\n\n/* ==========================================================================\n   Tables\n   ========================================================================== */\n/**\n * Remove most spacing between table cells.\n */\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\ntd,\nth {\n  padding: 0;\n}\n\n/* MIXINS */\n/* RESET */\nhtml {\n  font-size: 62.5%;\n}\n\nbody {\n  font-size: 1.3rem;\n  background-color: #424242;\n}\n\nh1 {\n  margin: 0;\n}\n\n@media (max-width: 650px) {\n  h1 {\n    font-size: 1.3em;\n  }\n}\n\na {\n  text-decoration: none;\n}\n\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n.leedvibes-article-content img, .leedvibes-article-content\naudio, .leedvibes-article-content\ncanvas, .leedvibes-article-content\niframe, .leedvibes-article-content\nprogress, .leedvibes-article-content\nvideo {\n  display: block;\n  margin: 0 auto;\n}\n\niframe {\n  width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n  display: flex;\n  flex-wrap: wrap;\n  width: 99vw;\n}\n\n@media (max-width: 650px) {\n  body {\n    display: block;\n    width: 100vw;\n  }\n}\n\nbutton {\n  background-color: transparent;\n  border: none;\n}\n\n.error {\n  background-color: #c53d3d;\n}\n\n.wrapper {\n  flex: 1 1 0;\n  min-width: 0;\n  min-height: 100vh;\n  background-color: #FFF;\n}\n\n@media (max-width: 650px) {\n  .wrapper {\n    margin-bottom: 0px;\n    padding-bottom: 60px;\n  }\n}\n\n.selected a {\n  color: #FFF;\n  font-weight: bold;\n}\n\n.notifications {\n  margin: 0;\n  color: #FFF;\n  background-color: #424242;\n}\n\n.notifications__text {\n  display: flex;\n  padding: 1em 0.5em;\n  color: #DDD;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.folder__button, .mark-as-read, .article-favorite,\n.article__read-unread {\n  border: 1px dashed transparent;\n}\n\n.folder__button:focus, .mark-as-read:focus, .article-favorite:focus,\n.article__read-unread:focus {\n  border-color: #DDD;\n}\n\n.sidebar-item-label, .folder__item a {\n  display: block;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* FEED */\n.event {\n  position: relative;\n  padding: 0 0.5em;\n  border-bottom: 0.1em solid #D9D9D9;\n}\n\n.event:not(.event--focus):hover, .event--focused:not(.event--focus) {\n  background-color: #DDD;\n}\n\n.event a {\n  color: #424242;\n}\n\n.event--new-last {\n  border-bottom-color: #424242;\n  border-width: 4px;\n}\n\n/* SIDEBAR */\n.sidebar {\n  flex: 0 0 23.07692em;\n  font-size: 0.9em;\n  overflow: hidden;\n}\n\n.sidebar a {\n  color: #fff;\n}\n\n.sidebar .settings__fields {\n  padding: 20%;\n}\n\n.folder__item,\n.feed__item {\n  display: flex;\n  position: relative;\n  padding-bottom: 0.5em;\n  padding-top: 0.5em;\n  border-left: 0.38462em solid transparent;\n}\n\n.folder__item,\n.folder__item a,\n.feed__item,\n.feed__item a {\n  color: #fff;\n}\n\n.folder__item:hover, .folder__item:active,\n.feed__item:hover,\n.feed__item:active {\n  background-color: #303030;\n}\n\n.folder__item.selected,\n.feed__item.selected {\n  border-color: white;\n}\n\n.sidebar-item {\n  flex-grow: 1;\n  height: 16px;\n  /* Favicon's height */\n  line-height: 16px;\n  overflow: hidden;\n}\n\n@media (max-width: 650px) {\n  .folder__button,\n  .sidebar-item {\n    padding: 12px 0;\n  }\n}\n\n.go-top {\n  display: inline-block;\n  padding: 2px 20px;\n  text-align: center;\n  background-color: #686868;\n  border-radius: 20%;\n}\n\n.feed-add {\n  text-align: center;\n  z-index: 100;\n}\n\n[data-is-opened=\"false\"] {\n  display: none;\n}\n\n.feed-add-title {\n  margin: 0 0 1em;\n  color: #fff;\n}\n\n.feed-add-url,\n.feed-add-folders {\n  width: 80%;\n}\n\n.feed-add-url {\n  padding: 0.5em;\n  border: none;\n}\n\n.feed-add-folders {\n  margin: 1em 0;\n  padding: 0.5em 2em;\n}\n\n.sidebar > section {\n  margin: 2em auto 3em;\n  padding: 0 1em;\n}\n\n.sidebar > section li {\n  display: flex;\n  color: #fff;\n  justify-content: space-between;\n}\n\n.sidebar > section button,\n.feed-add-button {\n  padding: 1em 2em;\n  color: #fff;\n  background-color: #484848;\n}\n\n.sidebar > section button:hover, .sidebar > section button:active, .sidebar > section button:focus,\n.feed-add-button:hover,\n.feed-add-button:active,\n.feed-add-button:focus {\n  color: #484848;\n  background-color: #DDD;\n}\n\n.feed-add-button {\n  margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n  position: relative;\n  overflow: hidden;\n}\n\n.feeds-list-toggle:before {\n  position: absolute;\n  width: 15px;\n  height: 15px;\n  left: 35%;\n  top: -20px;\n  content: '';\n  background-image: url(\"../images/close.svg\");\n  transition: transform 0.3s;\n}\n\n.is-opened.feeds-list-toggle:before {\n  transform: translate3d(0, 180%, 0);\n}\n\n.feeds-list-toggle__label {\n  position: absolute;\n  padding: 0.5em 1.5em;\n  top: 0;\n  left: 0;\n  transition: transform 0.3s;\n}\n\n.is-opened .feeds-list-toggle__label {\n  transform: translate3d(0, 150%, 0);\n}\n\n@media (max-width: 650px) {\n  .feeds-list,\n  .feed-add {\n    background-color: #424242;\n    transition: all 130ms ease-in;\n    will-change: transform;\n    overflow: auto;\n  }\n}\n\n.feeds-list {\n  margin-top: 0;\n  padding: 0;\n}\n\n@media (max-width: 650px) {\n  .feeds-list {\n    position: fixed;\n    width: 100%;\n    max-height: calc(100vh - 60px);\n    z-index: 1000;\n  }\n}\n\n.feeds-list[data-is-opened=\"false\"] {\n  display: block;\n}\n\n@media (max-width: 650px) {\n  .feeds-list[data-is-opened=\"false\"] {\n    transform: translate3d(0, -100%, 0);\n  }\n}\n\n.feeds-list:target {\n  display: block;\n}\n\n.folder {\n  border-bottom: 0.2em solid #484848;\n}\n\n.folder:first-child {\n  border-top: 0.2em solid #484848;\n}\n\n.folder__item a {\n  margin: 0 0.3em;\n}\n\n.folder__button {\n  float: left;\n  margin-right: 5px;\n  padding: 0;\n  width: 10%;\n}\n\n.folder-closed {\n  transform: rotate(270deg);\n}\n\n.folder__item,\n.feed__item {\n  padding-left: 0.4rem;\n  padding-right: 0.8rem;\n}\n\n.feed {\n  padding: 4px 0;\n  background-color: #4b4b4b;\n}\n\nhtml:not(.no-js) .feed--closed {\n  display: none;\n}\n\n.feed__item img {\n  float: left;\n  margin-left: 1.4em;\n  margin-right: 0.3em;\n  vertical-align: middle;\n}\n\n@media (max-width: 650px) {\n  .feed__item img {\n    margin-right: 0.8em;\n  }\n}\n\n.mark-as-read {\n  padding: 0 0.4rem;\n  font-size: 0.8em;\n}\n\n@media (max-width: 650px) {\n  .mark-as-read {\n    padding: 12px;\n  }\n}\n\n/* ARTICLE */\n.article__header {\n  position: relative;\n  padding: 0.5em 0;\n  overflow: hidden;\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.event--focus .article__header {\n  padding-bottom: 0.6em;\n}\n\n@media (max-width: 650px) {\n  .article__header {\n    display: grid;\n    grid-template-columns: 40px auto 80px;\n    grid-template-areas: \"favicon site date\" \"favorite title mark\";\n    align-items: center;\n    white-space: inherit;\n    min-height: 4em;\n  }\n}\n\n.article__header .article__feed-title {\n  display: inline-block;\n  width: 10%;\n  color: #555;\n  font-size: 0.9em;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n}\n\n@media (max-width: 650px) {\n  .article__header .article__feed-title {\n    width: auto;\n    grid-area: site;\n  }\n}\n\n.feed-icon {\n  margin-right: 0.3em;\n  vertical-align: middle;\n  justify-self: center;\n  grid-area: favicon;\n}\n\n@media (max-width: 650px) {\n  .feed-icon {\n    margin: 0;\n  }\n}\n\n@media (max-width: 650px) {\n  .article__title {\n    margin-left: 14%;\n  }\n}\n\n@media (max-width: 650px) {\n  .article__feed-title,\n  .feed-icon ~ .article__title {\n    margin-left: 0.5em;\n  }\n}\n\n.article__title {\n  display: inline;\n  font-size: 1em;\n}\n\n@media (max-width: 650px) {\n  .article__title {\n    display: inline-block;\n    grid-area: title;\n  }\n}\n\n[class~=\"event--read\"] .article__title a {\n  color: #BBB;\n}\n\n.article__description {\n  display: inline-block;\n  margin-left: 0.4em;\n  color: #888;\n}\n\n[class~=\"event--read\"] .article__description {\n  color: #BBB;\n}\n\n@media (max-width: 650px) {\n  .article__description {\n    display: none;\n  }\n}\n\n.event--focus .article__description {\n  display: none;\n}\n\n.article__description:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  width: 16em;\n  background-image: linear-gradient(to left, white 48%, rgba(255, 255, 255, 0) 100%);\n}\n\n.event:hover .article__description:after,\n.event--focused .article__description:after {\n  background-image: linear-gradient(to left, #DDD 6em, rgba(221, 221, 221, 0) 100%);\n}\n\n@media (max-width: 650px) {\n  .event:hover .article__description:after,\n  .event--focused .article__description:after {\n    background: none;\n  }\n}\n\n@media (max-width: 650px) {\n  .article__description:after {\n    background: none;\n  }\n}\n\n.article__date {\n  position: absolute;\n  right: 65px;\n  color: #424242;\n  font-size: 0.9em;\n}\n\n@media (max-width: 650px) {\n  .article__date {\n    position: relative;\n    right: 0;\n    grid-area: date;\n    justify-self: right;\n  }\n}\n\n.article-favorite {\n  right: 30px;\n  opacity: 0.3;\n}\n\n.article-favorite--favorited {\n  opacity: 1;\n}\n\n@media (max-width: 650px) {\n  .article-favorite {\n    right: 0;\n    grid-area: favorite;\n    justify-self: left;\n  }\n}\n\n.article__read-unread {\n  width: 1.7em;\n  right: 0;\n  color: white;\n  background-color: transparent;\n  opacity: 0.3;\n  cursor: pointer;\n}\n\n@media (max-width: 650px) {\n  .article__read-unread {\n    grid-area: mark;\n    justify-self: right;\n  }\n}\n\n.article-favorite,\n.article__read-unread {\n  position: absolute;\n  display: flex;\n  padding: 0;\n  width: 30px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  top: 0;\n  bottom: 0;\n}\n\n.article-favorite:hover, .article-favorite:active, .article-favorite:focus,\n.article__read-unread:hover,\n.article__read-unread:active,\n.article__read-unread:focus {\n  border-color: #424242;\n}\n\n@media (max-width: 650px) {\n  .article-favorite,\n  .article__read-unread {\n    position: relative;\n    padding: 0;\n    width: 100%;\n    min-height: 50px;\n  }\n}\n\n.article__read-read {\n  opacity: 1;\n}\n\n.leedvibes-article-content {\n  display: none;\n  margin: 0 auto 1em;\n  width: 42.8125em;\n  font-size: 1.6rem;\n  line-height: 1.7;\n  overflow: auto;\n  overflow-wrap: break-word;\n}\n\n@media (max-width: 650px) {\n  .leedvibes-article-content {\n    padding: 0 1rem;\n    width: auto;\n  }\n}\n\n.leedvibes-article-content a {\n  text-decoration: underline;\n}\n\n.leedvibes-article-content--is-opened {\n  display: block;\n}\n\n.leedvibes-article-content__infos {\n  margin: 1em 0;\n}\n\n.leedvibes-article-content__infos a {\n  font-size: 2.8rem;\n  line-height: 1;\n}\n\n.leedvibes-article-content__switch-view {\n  display: none;\n  position: absolute;\n  right: 8em;\n  top: 0.4em;\n  background: none;\n  border: 1px solid #BBB;\n  z-index: 20;\n}\n\n@media (max-width: 650px) {\n  .leedvibes-article-content__switch-view {\n    top: 2.4em;\n    right: 4em;\n  }\n}\n\n.event--focus .leedvibes-article-content__switch-view {\n  display: inherit;\n}\n\n/* USER SETTINGS */\n.user-login,\n.settings {\n  display: flex;\n  justify-content: space-around;\n  padding: 0 1em;\n  color: #CACACA;\n  align-items: center;\n  text-align: center;\n}\n\n.user-login {\n  margin: 1em auto;\n}\n\n.settings {\n  position: relative;\n  padding: 13px 10px;\n  min-height: 34px;\n  background-color: #303030;\n  z-index: 1000;\n}\n\n@media (max-width: 650px) {\n  .settings {\n    position: fixed;\n    bottom: 0;\n    width: 100%;\n    box-sizing: border-box;\n    z-index: 1000;\n  }\n}\n\n.user-login {\n  flex-direction: column;\n}\n\n.settings-item {\n  padding: 0.5em 1.5em;\n  min-width: 15px;\n  min-height: 18px;\n  border-bottom: 0.38462em solid transparent;\n  box-sizing: content-box;\n  transition: border 0.2s ease-in-out 0s;\n}\n\n.settings-item:hover, .settings-item:active, .settings-item:focus {\n  border-color: white;\n}\n\nbutton.settings-item {\n  border-top-width: 0;\n  border-right-width: 0;\n  border-left-width: 0;\n  background-color: transparent;\n}\n\nbutton.settings-item:focus {\n  outline: dotted 1px;\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'] {\n  min-width: 7em;\n  width: 35%;\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'],\n.settings__fields input[type='submit'] {\n  display: block;\n  margin: 0.4em auto;\n  padding: 0.5em;\n  color: #303030;\n}\n\n.favorite-inverted {\n  fill: white;\n}\n\n.animation-spin {\n  animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.shortcuts-toggle {\n  display: none;\n}\n\n@media (min-width: 650px) {\n  html:not(.no-js) .shortcuts-toggle {\n    display: block;\n  }\n}\n\n.shortcuts {\n  position: fixed;\n  display: none;\n  left: 0;\n  top: 0;\n  padding: 20px;\n  width: 100%;\n  height: 100%;\n  color: white;\n  background-color: #303030e6;\n  overflow: scroll;\n}\n\n.shortcuts:hover {\n  cursor: pointer;\n}\n\n.shortcuts-list {\n  margin: 0;\n  padding: 0;\n}\n\n.shortcut {\n  display: flex;\n  margin-bottom: 10px;\n  align-items: center;\n}\n\n.shortcut-key {\n  display: inline-block;\n  margin-right: 20px;\n  padding: 5px 5px 10px 5px;\n  min-width: 20px;\n  color: #777777;\n  font-size: 12px;\n  background-color: #DDDDDD;\n  border: 2px solid #F9F7F7;\n  border-bottom: 4px solid #898989;\n  border-right: 4px solid #898989;\n  border-radius: 3px;\n  box-shadow: 0 0 10px #111010;\n}\n\n.shortcut-key + .shortcut-key {\n  margin-left: 20px;\n}\n\n/* MEDIA QUERIES */\n@media (max-width: 650px) {\n  td {\n    display: block;\n  }\n}\n\n.mobile-only {\n  display: none;\n}\n\n@media (max-width: 650px) {\n  .mobile-only {\n    display: inline;\n  }\n}\n\n/* IE9- */\n.no-flexboxlegacy body {\n  display: block;\n}\n\n.no-flexboxlegacy .wrapper {\n  margin-left: 20%;\n}\n\n.no-flexboxlegacy .sidebar {\n  float: left;\n  width: 20%;\n}\n\n/* IE7 */\n.no-flexboxlegacy.no-boxsizing .sidebar {\n  width: 19%;\n}\n\n.hidden {\n  display: none;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n","// VARS\n$font-size-base: 13px;\n$sidebar-button-size: 10%;\n$settings-padding: 0.5em 1.5em;\n$sidebar-color: #fff;\n$sidebar-color-bg: #424242;\n$folder-separator: #484848;\n$sidebar-color-bg-darken: darken( $sidebar-color-bg, 7% );\n$sidebar-color-alt: #686868;\n$feed-entry-color: $sidebar-color-bg;\n$breakpoint: \"650px\";\n$breakpoint-min: \"min-width: #{$breakpoint}\";\n$breakpoint-max: \"max-width: #{$breakpoint}\";\n$feed-bgc-used: #DDD;\n$error-color: #c53d3d;\n$feed-event-read-color: #BBB;\n\n$opacity-low: 0.3;\n$position-top-on-break: 30px;\n$action-icon-width: 30px;\n\n$settings-horizontal-padding: 13px;\n$settings-min-height: 34px;\n$settings-height: $settings-horizontal-padding * 2 + $settings-min-height;\n\n@import \"normalize\";\n\n/* MIXINS */\n@import \"partials/mixins/_helpers.scss\";\n\n/* RESET */\nhtml {\n    font-size: 62.5%;\n}\nbody {\n    font-size: 1.3rem;\n    background-color: $sidebar-color-bg;\n}\nh1 {\n    margin: 0;\n\n    @media( $breakpoint-max ) {\n        font-size: 1.3em;\n    }\n}\na {\n    text-decoration: none;\n}\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n    max-width: 100%;\n    height: auto;\n\n    .leedvibes-article-content & {\n        display: block;\n        margin: 0 auto;\n    }\n}\n\niframe {\n    width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n    display: flex;\n    flex-wrap: wrap;\n    width: 99vw;\n\n    @media($breakpoint-max) {\n        display: block;\n        width: 100vw;\n    }\n}\n\nbutton {\n    background-color: transparent;\n    border: none;\n}\n\n.error {\n    background-color: $error-color;\n}\n\n.wrapper {\n    flex: 1 1 0;\n    min-width: 0;\n    min-height: 100vh;\n    background-color: #FFF;\n\n    @media($breakpoint-max) {\n        // Avoid extra margin-bottom when all\n        // the content is read and infinite-scroll-end\n        // shows up\n        margin-bottom: 0px;\n        padding-bottom: 60px;\n    }\n}\n.selected a {\n    color: #FFF;\n    font-weight: bold;\n}\n\n.notifications {\n    margin: 0;\n    color: #FFF;\n    background-color: $sidebar-color-bg;\n}\n\n.notifications__text {\n    display: flex;\n    padding: 1em 0.5em;\n    color: $feed-bgc-used;\n    justify-content: space-between;\n    align-items: center;\n}\n\n%text-color-dark {\n    color: #000;\n}\n\n%button-focused {\n    border: 1px dashed transparent;\n\n    &:focus {\n        border-color: $feed-bgc-used;\n    }\n}\n%overflow-sidebar {\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* FEED */\n$entry-space: 0.5em;\n.event {\n    position: relative;\n    padding: 0 $entry-space;\n    border-bottom: 0.1em solid #D9D9D9;\n\n    &:not(.event--focus):hover,\n    &--focused:not(.event--focus) {\n        background-color: $feed-bgc-used;\n    }\n\n    a {\n        color: $feed-entry-color;\n    }\n}\n\n.event--new-last {\n    border-bottom-color: $sidebar-color-bg;\n    border-width: 4px;\n}\n\n/* SIDEBAR */\n$border-base: em( 5px ) solid transparent;\n$border-color-active: white;\n\n.sidebar {\n    flex: 0 0 em( 300px );\n    font-size: 0.9em;\n    overflow: hidden;\n\n    a {\n        color: $sidebar-color;\n    }\n\n    .settings__fields {\n        padding: 20%;\n    }\n\n}\n\n.folder__item,\n.feed__item {\n    display: flex;\n    position: relative;\n    $padding : 0.5em;\n    padding-bottom: $padding;\n    padding-top: $padding;\n    border-left: $border-base;\n\n    &,\n    a {\n        color: $sidebar-color;\n    }\n\n    &:hover,\n    &:active {\n        background-color: $sidebar-color-bg-darken;\n    }\n\n    &.selected {\n        border-color: $border-color-active;\n    }\n}\n\n.sidebar-item {\n    flex-grow: 1;\n    height: 16px; /* Favicon's height */\n    line-height: 16px;\n    overflow: hidden;\n}\n\n.folder__button,\n.sidebar-item {\n    @media($breakpoint-max) {\n        padding: 12px 0;\n    }\n}\n\n.sidebar-item-label {\n    @extend %overflow-sidebar;\n}\n\n.go-top {\n    display: inline-block;\n    padding: 2px 20px;\n    text-align: center;\n    background-color: $sidebar-color-alt;\n    border-radius: 20%;\n}\n\n.feed-add {\n    text-align: center;\n    z-index: 100;\n}\n\n[data-is-opened=\"false\"] {\n    display: none;\n}\n\n.feed-add-title {\n    margin: 0 0 1em;\n    color: $sidebar-color;\n}\n\n.feed-add-url,\n.feed-add-folders {\n    width: 80%;\n}\n\n.feed-add-url {\n    padding: 0.5em;\n    border: none;\n}\n\n.feed-add-folders {\n    margin: 1em 0;\n    padding: 0.5em 2em;\n}\n\n.sidebar > section {\n    margin: 2em auto 3em;\n    padding: 0 1em;\n\n    li {\n        display: flex;\n        color: $sidebar-color;\n        justify-content: space-between;\n    }\n}\n\n.sidebar > section button,\n.feed-add-button {\n    padding: 1em 2em;\n    color: $sidebar-color;\n    background-color: $folder-separator;\n\n    &:hover,\n    &:active,\n    &:focus {\n        color: $folder-separator;\n        background-color: $feed-bgc-used;\n    }\n}\n\n.feed-add-button {\n    margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n    position: relative;\n    overflow: hidden;\n}\n$feeds-list-toggle-transition: transform 0.3s;\n.feeds-list-toggle:before {\n    position: absolute;\n    width: 15px;\n    height: 15px;\n    left: 35%;\n    top: -20px;\n    content: '';\n    background-image: url( '../images/close.svg' );\n    transition: $feeds-list-toggle-transition;\n\n    @at-root .is-opened#{&} {\n        transform: translate3d(0, 180%, 0);\n    }\n}\n\n.feeds-list-toggle__label {\n    position: absolute;\n    padding: $settings-padding;\n    top: 0;\n    left: 0;\n    transition: $feeds-list-toggle-transition;\n\n    .is-opened & {\n        transform: translate3d(0, 150%, 0);\n    }\n}\n\n.feeds-list,\n.feed-add {\n    @media($breakpoint-max) {\n        background-color: $sidebar-color-bg;\n        transition: all 130ms ease-in;;\n        will-change: transform;\n        overflow: auto;\n    }\n}\n\n.feeds-list {\n    margin-top: 0;\n    padding: 0;\n\n    @media($breakpoint-max) {\n        position: fixed;\n        width: 100%;\n        max-height: calc(100vh - #{$settings-height});\n        z-index: 1000;\n    }\n\n    &[data-is-opened=\"false\"] {\n        display: block;\n\n        @media($breakpoint-max) {\n            transform: translate3d(0, -100%, 0);\n        }\n    }\n\n    &:target {\n        display: block;\n    }\n}\n\n.folder {\n    $value: 0.2em solid $folder-separator;\n    border-bottom: $value;\n\n    &:first-child {\n        border-top: $value;\n    }\n}\n\n.folder__item a {\n    margin: 0 0.3em;\n    @extend %overflow-sidebar;\n}\n.folder__button {\n    float: left;\n    margin-right: 5px;\n    padding: 0;\n    width: $sidebar-button-size;\n    @extend %button-focused;\n}\n\n.folder-closed {\n    transform: rotate(270deg);\n}\n\n.folder__item,\n.feed__item {\n    padding-left: 0.4rem;\n    padding-right: 0.8rem;\n}\n.feed {\n    padding: 4px 0;\n    background-color: #4b4b4b;\n}\n\nhtml:not(.no-js) .feed--closed {\n    display: none;\n}\n\n.feed__item img {\n    float: left;\n    margin-left: 1.4em;\n    margin-right: 0.3em;\n    vertical-align: middle;\n\n    @media($breakpoint-max) {\n        margin-right: 0.8em;\n    }\n}\n\n.mark-as-read {\n    padding: 0 0.4rem;\n    font-size: 0.8em;\n    @extend %button-focused;\n\n    @media($breakpoint-max) {\n        padding: 12px;\n    }\n}\n\n/* ARTICLE */\n.article__header {\n    position: relative;\n    padding: $entry-space 0;\n    overflow: hidden;\n    white-space: nowrap;\n    cursor: pointer;\n\n    .event--focus & {\n        padding-bottom: 0.6em;\n    }\n\n    @media($breakpoint-max) {\n        display: grid;\n        grid-template-columns: 40px auto 80px;\n        grid-template-areas: \"favicon site date\" \"favorite title mark\";\n        align-items: center;\n        white-space: inherit;\n        min-height: 4em;\n    }\n\n    .article__feed-title {\n        display: inline-block;\n        width: 10%;\n        color: #555;\n        font-size: 0.9em;\n        overflow-x: hidden;\n        text-overflow: ellipsis;\n        vertical-align: middle;\n\n        @media($breakpoint-max) {\n            width: auto;\n            grid-area: site;\n        }\n    }\n}\n\n.feed-icon {\n    margin-right: 0.3em;\n    vertical-align: middle;\n    justify-self: center;\n    grid-area: favicon;\n\n    @media($breakpoint-max) {\n        margin: 0;\n    }\n}\n\n.article__title {\n    @media($breakpoint-max) {\n        margin-left: 14%;\n    }\n}\n\n.article__feed-title,\n.feed-icon ~ .article__title {\n    @media($breakpoint-max) {\n        margin-left: 0.5em;\n    }\n}\n\n.article__title {\n    display: inline;\n    font-size: 1em;\n\n    @media($breakpoint-max) {\n        display: inline-block;\n        grid-area: title;\n    }\n\n    [class~=\"event--read\"] & a {\n        color: $feed-event-read-color;\n    }\n}\n.article__description {\n    display: inline-block;\n    margin-left: 0.4em;\n    color: #888;\n\n    [class~=\"event--read\"] & {\n        color: $feed-event-read-color;\n    }\n\n    @media($breakpoint-max) {\n        display: none;\n    }\n\n    .event--focus & {\n        display: none;\n    }\n\n    &:after {\n        content: \"\";\n        display: block;\n        position: absolute;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 16em;\n        $support-for-original-webkit-gradients : false;\n        background-image: linear-gradient(to left, white 48%, rgba(255, 255, 255, 0) 100%);\n\n        .event:hover &,\n        .event--focused & {\n            background-image: linear-gradient(to left, $feed-bgc-used 6em, rgba($feed-bgc-used, 0) 100%);\n\n            @media($breakpoint-max) {\n                background: none;\n            }\n\n        }\n\n        @media($breakpoint-max) {\n            background: none;\n        }\n    }\n}\n.article__date {\n    position: absolute;\n    right: $action-icon-width * 2 + 5px;\n    color: $feed-entry-color;\n    font-size: 0.9em;\n\n    @media( $breakpoint-max ) {\n        position: relative;\n        right: 0;\n        grid-area: date;\n        justify-self: right;\n    }\n}\n\n.article-favorite {\n    right: $action-icon-width;\n    opacity: $opacity-low;\n\n    &--favorited {\n        opacity: 1;\n    }\n\n    @media( $breakpoint-max ) {\n        right: 0;\n        grid-area: favorite;\n        justify-self: left;\n    }\n}\n\n.article__read-unread {\n    width: 1.7em;\n    right: 0;\n    color: white;\n    background-color: transparent;\n    opacity: $opacity-low;\n    cursor: pointer;\n\n    @media( $breakpoint-max ) {\n        grid-area: mark;\n        justify-self: right;\n    }\n}\n\n.article-favorite,\n.article__read-unread {\n    position: absolute;\n    display: flex;\n    padding: 0;\n    width: $action-icon-width;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n    top: 0;\n    bottom: 0;\n    @extend %button-focused;\n\n    &:hover,\n    &:active,\n    &:focus {\n        border-color: $sidebar-color-bg;\n    }\n\n    @media( $breakpoint-max ) {\n        position: relative;\n        padding: 0;\n        width: 100%;\n        min-height: 50px;\n    }\n}\n\n.article__read-read {\n    opacity: 1;\n}\n\n.leedvibes-article-content {\n    display: none;\n    margin: 0 auto 1em;\n    width: 42.8125em; // font: 16px / width: 685px (http://www.pearsonified.com/typography/)\n    font-size: 1.6rem;\n    line-height: 1.7;\n    overflow: auto;\n    overflow-wrap: break-word;\n\n    @media($breakpoint-max) {\n        padding: 0 1rem;\n        width: auto;\n    }\n\n    a {\n        text-decoration: underline;\n    }\n}\n\n.leedvibes-article-content--is-opened {\n    display: block;\n}\n\n.leedvibes-article-content__infos {\n    margin: 1em 0;\n\n    a {\n        font-size: 2.8rem;\n        line-height: 1;\n    }\n}\n// [todo] - Do a better style\n.leedvibes-article-content__switch-view {\n    display: none;\n    position: absolute;\n    right: 8em;\n    top: 0.4em;\n    background: none;\n    border: 1px solid $feed-event-read-color;\n    z-index: 20;\n\n    @media($breakpoint-max) {\n        top: 2.4em;\n        right: 4em;\n    }\n\n    .event--focus & {\n        display: inherit;\n    }\n}\n\n/* USER SETTINGS */\n.user-login,\n.settings {\n    display: flex;\n    justify-content: space-around;\n    padding: 0 1em;\n    color: #CACACA;\n    align-items: center;\n    text-align: center;\n}\n\n.user-login {\n    margin: 1em auto;\n}\n\n.settings {\n    position: relative;\n    padding: $settings-horizontal-padding 10px;\n    min-height: $settings-min-height;\n    background-color: $sidebar-color-bg-darken;\n    z-index: 1000;\n\n    @media($breakpoint-max) {\n        position: fixed;\n        bottom: 0;\n        width: 100%;\n        box-sizing: border-box;\n        z-index: 1000;\n    }\n}\n\n.user-login {\n    flex-direction: column;\n}\n\n.settings-item {\n    padding: $settings-padding;\n    min-width: 15px;\n    min-height: 18px;\n    border-bottom: $border-base;\n    box-sizing: content-box;\n    transition: border 0.2s ease-in-out 0s;\n\n    &:hover,\n    &:active,\n    &:focus {\n        border-color: $border-color-active;\n    }\n}\n\nbutton.settings-item {\n    border-top-width: 0;\n    border-right-width: 0;\n    border-left-width: 0;\n    background-color: transparent;\n\n    &:focus {\n        outline: dotted 1px;\n    }\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'] {\n    min-width: 7em;\n    width: 35%;\n}\n.settings__fields input[type='text'],\n.settings__fields input[type='password'],\n.settings__fields input[type='submit'] {\n    display: block;\n    margin: 0.4em auto;\n    padding: 0.5em;\n    color: $sidebar-color-bg-darken;\n}\n\n.favorite-inverted {\n    fill: white;\n}\n\n.animation-spin {\n    animation: spin 2s linear infinite;\n}\n@keyframes spin {\n    100% { transform: rotate(360deg); }\n}\n\n.shortcuts-toggle {\n    display: none;\n}\n\n@media( $breakpoint-min ) {\n    html:not(.no-js) .shortcuts-toggle {\n        display: block;\n    }\n}\n\n.shortcuts {\n    position: fixed;\n    display: none;\n    left: 0;\n    top: 0;\n    padding: 20px;\n    width: 100%;\n    height: 100%;\n    color: white;\n    background-color: #{$sidebar-color-bg-darken}e6;\n    overflow: scroll;\n}\n\n.shortcuts:hover {\n    cursor: pointer;\n}\n\n\n.shortcuts-list {\n    margin: 0;\n    padding: 0;\n}\n\n.shortcut {\n    display: flex;\n    margin-bottom: 10px;\n    align-items: center;\n}\n\n$shortcut-key-space: 20px;\n.shortcut-key {\n    display: inline-block;\n    margin-right: $shortcut-key-space;\n    padding: 5px 5px 10px 5px;\n    min-width: 20px;\n    color: #777777;\n    font-size: 12px;\n    background-color: #DDDDDD;\n    border: 2px solid #F9F7F7;\n    border-bottom: 4px solid #898989;\n    border-right: 4px solid #898989;\n    border-radius: 3px;\n    box-shadow: 0 0 10px #111010;\n\n    & + & {\n        margin-left: $shortcut-key-space;\n    }\n}\n\n/* MEDIA QUERIES */\n@media($breakpoint-max) {\n    td {\n        display: block;\n    }\n}\n\n.mobile-only {\n    display: none;\n\n    @media($breakpoint-max) {\n        display: inline;\n    }\n}\n\n/* IE9- */\n.no-flexboxlegacy body {\n    display: block;\n}\n\n.no-flexboxlegacy .wrapper {\n    margin-left: 20%;\n}\n\n.no-flexboxlegacy .sidebar {\n    float: left;\n    width: 20%;\n}\n\n/* IE7 */\n.no-flexboxlegacy.no-boxsizing .sidebar {\n    width: 19%;\n}\n\n// Utils\n\n.hidden {\n    display: none;\n}\n\n.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0,0,0,0);\n    border: 0;\n}\n","@function em($target, $context: $font-size-base) {\n    @if $target == 0 { @return 0 }\n    @return $target / $context + 0em;\n}\n"]}
\ No newline at end of file
diff --git a/index.html b/index.html
index 5534ec8..899e9f2 100644
--- a/index.html
+++ b/index.html
@@ -76,7 +76,7 @@ <h3>{function="_t('YOU_MUST_BE_LOGGED')"}</h3>
                         <use xlink:href="#svg-favorite" />
                     </svg>
                 </a>
-                <button class="mobile-only settings-item feeds-list-toggle js-feeds-list-toggle js-toggle-target" data-target="#feeds-list"><span class="feeds-list-toggle__label">
+                <button class="mobile-only settings-item feeds-list-toggle js-feeds-list-toggle js-toggle-target" data-target="#feeds-list" data-toggle-overflow="true"><span class="feeds-list-toggle__label">
                     <svg
                         width="15"
                         height="15"
diff --git a/js/script.js b/js/script.js
index fc05bc1..1539592 100644
--- a/js/script.js
+++ b/js/script.js
@@ -30,24 +30,23 @@ $(function () {
     $('.js-toggle-target').click(function () {
         const button = $(this);
         const targetElement = $(button.data('target'));
+        const bodyOverflowNeeded = button.data('toggle-overflow') || false;
         const isExpanded = targetElement.data('is-opened');
 
         if (isExpanded) {
+            if (bodyOverflowNeeded !== false) {
+                $('body').css('overflow', '');
+            }
             targetElement
-                .slideUp(function () {
-                    $(this)
-                        .attr('data-is-opened', false)
-                        .data('is-opened', false)
-                        .css('display', '');
-                });
+                .attr('data-is-opened', false)
+                .data('is-opened', false);
         } else {
             targetElement
-                .css('display', 'none')
                 .attr('data-is-opened', true)
-                .data('is-opened', true)
-                .slideDown(function () {
-                    $(this).css('display', '');
-                });
+                .data('is-opened', true);
+            if (bodyOverflowNeeded !== false) {
+                $('body').css('overflow', 'hidden');
+            }
         }
     });
 
diff --git a/sass/style.scss b/sass/style.scss
index da8e792..db75368 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -19,6 +19,10 @@ $opacity-low: 0.3;
 $position-top-on-break: 30px;
 $action-icon-width: 30px;
 
+$settings-horizontal-padding: 13px;
+$settings-min-height: 34px;
+$settings-height: $settings-horizontal-padding * 2 + $settings-min-height;
+
 @import "normalize";
 
 /* MIXINS */
@@ -93,6 +97,7 @@ button {
         // the content is read and infinite-scroll-end
         // shows up
         margin-bottom: 0px;
+        padding-bottom: 60px;
     }
 }
 .selected a {
@@ -225,6 +230,7 @@ $border-color-active: white;
 
 .feed-add {
     text-align: center;
+    z-index: 100;
 }
 
 [data-is-opened="false"] {
@@ -312,15 +318,32 @@ $feeds-list-toggle-transition: transform 0.3s;
     }
 }
 
+.feeds-list,
+.feed-add {
+    @media($breakpoint-max) {
+        background-color: $sidebar-color-bg;
+        transition: all 130ms ease-in;;
+        will-change: transform;
+        overflow: auto;
+    }
+}
+
 .feeds-list {
     margin-top: 0;
     padding: 0;
 
+    @media($breakpoint-max) {
+        position: fixed;
+        width: 100%;
+        max-height: calc(100vh - #{$settings-height});
+        z-index: 1000;
+    }
+
     &[data-is-opened="false"] {
         display: block;
 
         @media($breakpoint-max) {
-            display: none;
+            transform: translate3d(0, -100%, 0);
         }
     }
 
@@ -647,8 +670,19 @@ html:not(.no-js) .feed--closed {
 }
 
 .settings {
-    padding: 1em;
+    position: relative;
+    padding: $settings-horizontal-padding 10px;
+    min-height: $settings-min-height;
     background-color: $sidebar-color-bg-darken;
+    z-index: 1000;
+
+    @media($breakpoint-max) {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        box-sizing: border-box;
+        z-index: 1000;
+    }
 }
 
 .user-login {
@@ -658,7 +692,7 @@ html:not(.no-js) .feed--closed {
 .settings-item {
     padding: $settings-padding;
     min-width: 15px;
-    min-height: 15px;
+    min-height: 18px;
     border-bottom: $border-base;
     box-sizing: content-box;
     transition: border 0.2s ease-in-out 0s;