diff --git a/css/style.css b/css/style.css
index 8bb9582..b095b0b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1227,21 +1227,29 @@ button.settings-item:focus {
   }
 }
 
-.shortcuts {
+.popin {
   position: fixed;
-  display: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   left: 0;
   top: 0;
   padding: 20px;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   color: white;
   background-color: #303030e6;
-  overflow: scroll;
-}
-
-.shortcuts:hover {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   cursor: pointer;
+  overflow: auto;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  z-index: 1000;
 }
 
 .shortcuts-list {
@@ -1279,6 +1287,34 @@ button.settings-item:focus {
   margin-left: 20px;
 }
 
+.brightness-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.brightness-item {
+  margin-bottom: 20px;
+}
+
+.brightness-item:last-of-type {
+  margin-bottom: 0;
+}
+
+.brightness-button {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.brightness-img {
+  margin-right: 10px;
+  width: 30px;
+}
+
 /* MEDIA QUERIES */
 @media (max-width: 650px) {
   td {
@@ -1330,4 +1366,49 @@ button.settings-item:focus {
   border: 0;
 }
 
+.dark-theme .wrapper {
+  background-color: black;
+}
+
+.dark-theme .article__header .article__feed-title {
+  color: #aaa;
+}
+
+.dark-theme .event {
+  border-color: #262626;
+}
+
+.dark-theme .event a,
+.dark-theme .article__date {
+  color: #bdbdbd;
+}
+
+.dark-theme .article__description::after {
+  background-image: -webkit-gradient(linear, right top, left top, color-stop(48%, black), to(rgba(0, 0, 0, 0)));
+  background-image: -o-linear-gradient(right, black 48%, rgba(0, 0, 0, 0) 100%);
+  background-image: linear-gradient(to left, black 48%, rgba(0, 0, 0, 0) 100%);
+}
+
+.dark-theme .article-favorite,
+.dark-theme .article__read-unread {
+  -webkit-filter: invert(100%);
+  filter: invert(100%);
+}
+
+.dark-theme .leedvibes-article-content {
+  color: white;
+}
+
+.dark-theme .event:not(.event--focus):hover,
+.dark-theme .event--focused:not(.event--focus) {
+  background-color: #333;
+}
+
+.dark-theme .event:hover .article__description::after,
+.dark-theme .event--focused .article__description::after {
+  background-image: -webkit-gradient(linear, right top, left top, color-stop(6em, #333), to(rgba(51, 51, 51, 0)));
+  background-image: -o-linear-gradient(right, #333 6em, rgba(51, 51, 51, 0) 100%);
+  background-image: linear-gradient(to left, #333 6em, rgba(51, 51, 51, 0) 100%);
+}
+
 /*# sourceMappingURL=style.css.map */
diff --git a/css/style.css.map b/css/style.css.map
index 00d733e..db5bf98 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    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  padding: 10px 5px;\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.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    position: fixed;\n    background-color: #424242;\n    transition: all 130ms ease-in;\n    will-change: transform;\n    overflow: auto;\n    z-index: 1000;\n  }\n}\n\n.feeds-list {\n  margin-top: 0;\n  padding: 0;\n}\n\n@media (max-width: 650px) {\n  .feeds-list {\n    width: 100%;\n    max-height: calc(100vh - 60px);\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    padding: 10px 5px;\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.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        position: fixed;\n        background-color: $sidebar-color-bg;\n        transition: all 130ms ease-in;;\n        will-change: transform;\n        overflow: auto;\n        z-index: 1000;\n    }\n}\n\n.feeds-list {\n    margin-top: 0;\n    padding: 0;\n\n    @media($breakpoint-max) {\n        width: 100%;\n        max-height: calc(100vh - #{$settings-height});\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
+{"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  padding: 10px 5px;\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.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    position: fixed;\n    background-color: #424242;\n    transition: all 130ms ease-in;\n    will-change: transform;\n    overflow: auto;\n    z-index: 1000;\n  }\n}\n\n.feeds-list {\n  margin-top: 0;\n  padding: 0;\n}\n\n@media (max-width: 650px) {\n  .feeds-list {\n    width: 100%;\n    max-height: calc(100vh - 60px);\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.popin {\n  position: fixed;\n  display: flex;\n  left: 0;\n  top: 0;\n  padding: 20px;\n  width: 100%;\n  height: 100vh;\n  color: white;\n  background-color: #303030e6;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  overflow: auto;\n  box-sizing: border-box;\n  z-index: 1000;\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.brightness-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.brightness-item {\n  margin-bottom: 20px;\n}\n\n.brightness-item:last-of-type {\n  margin-bottom: 0;\n}\n\n.brightness-button {\n  display: flex;\n  align-items: center;\n}\n\n.brightness-img {\n  margin-right: 10px;\n  width: 30px;\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\n.dark-theme .wrapper {\n  background-color: black;\n}\n\n.dark-theme .article__header .article__feed-title {\n  color: #aaa;\n}\n\n.dark-theme .event {\n  border-color: #262626;\n}\n\n.dark-theme .event a,\n.dark-theme .article__date {\n  color: #bdbdbd;\n}\n\n.dark-theme .article__description::after {\n  background-image: linear-gradient(to left, black 48%, rgba(0, 0, 0, 0) 100%);\n}\n\n.dark-theme .article-favorite,\n.dark-theme .article__read-unread {\n  filter: invert(100%);\n}\n\n.dark-theme .leedvibes-article-content {\n  color: white;\n}\n\n.dark-theme .event:not(.event--focus):hover,\n.dark-theme .event--focused:not(.event--focus) {\n  background-color: #333;\n}\n\n.dark-theme .event:hover .article__description::after,\n.dark-theme .event--focused .article__description::after {\n  background-image: linear-gradient(to left, #333 6em, rgba(51, 51, 51, 0) 100%);\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    padding: 10px 5px;\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.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        position: fixed;\n        background-color: $sidebar-color-bg;\n        transition: all 130ms ease-in;;\n        will-change: transform;\n        overflow: auto;\n        z-index: 1000;\n    }\n}\n\n.feeds-list {\n    margin-top: 0;\n    padding: 0;\n\n    @media($breakpoint-max) {\n        width: 100%;\n        max-height: calc(100vh - #{$settings-height});\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.popin {\n    position: fixed;\n    display: flex;\n    left: 0;\n    top: 0;\n    padding: 20px;\n    width: 100%;\n    height: 100vh;\n    color: white;\n    background-color: #{$sidebar-color-bg-darken}e6;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    overflow: auto;\n    box-sizing: border-box;\n    z-index: 1000;\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.brightness-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.brightness-item {\n    margin-bottom: 20px;\n\n    &:last-of-type {\n        margin-bottom: 0;\n    }\n}\n\n.brightness-button {\n    display: flex;\n    align-items: center;\n}\n\n.brightness-img {\n    margin-right: 10px;\n    width: 30px;\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\n.dark-theme {\n    .wrapper {\n        background-color: black;\n    }\n\n    .article__header .article__feed-title {\n        color: #aaa;\n    }\n\n    .event {\n        border-color: #262626;\n    }\n\n    .event a,\n    .article__date {\n        color: #bdbdbd;\n    }\n\n    .article__description::after {\n        background-image: linear-gradient(to left, black 48%, rgba(0, 0, 0, 0) 100%)\n    }\n\n    .article-favorite,\n    .article__read-unread {\n        filter: invert(100%);\n    }\n\n    .leedvibes-article-content {\n        color: white;\n    }\n\n    .event:not(.event--focus):hover,\n    .event--focused:not(.event--focus) {\n        background-color: #333;\n    }\n\n    .event:hover .article__description::after,\n    .event--focused .article__description::after {\n        background-image: linear-gradient(to left, #333 6em, rgba(51, 51, 51, 0) 100%);\n    }\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/images/brightness.svg b/images/brightness.svg
new file mode 100644
index 0000000..76f5b55
--- /dev/null
+++ b/images/brightness.svg
@@ -0,0 +1,18 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill="#fff" viewBox="0 0 1 1" xmlns:xlink='http://www.w3.org/1999/xlink'>
+<view id="brightness_auto" viewBox="12042 0 24 24" preserveAspectRatio="xMidYMid meet" />
+<view id="brightness_high" viewBox="12106 0 24 24" preserveAspectRatio="xMidYMid meet" />
+<view id="brightness_low" viewBox="12170 0 24 24" preserveAspectRatio="xMidYMid meet" />
+<view id="brightness_medium" viewBox="12234 0 24 24" preserveAspectRatio="xMidYMid meet" />
+<!-- brightness_auto --><svg x='12042'>
+<path d="M0 0h24v24H0z" fill="none"/><path d="M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM14.3 16l-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9z"/>
+</svg>
+<!-- brightness_high --><svg x='12106'>
+<path d="M0 0h24v24H0z" fill="none"/><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/>
+</svg>
+<!-- brightness_low --><svg x='12170'>
+<path d="M0 0h24v24H0z" fill="none"/><path d="M20 15.31L23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/>
+</svg>
+<!-- brightness_medium --><svg x='12234'>
+<path d="M0 0h24v24H0z" fill="none"/><path d="M20 15.31L23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69zM12 18V6c3.31 0 6 2.69 6 6s-2.69 6-6 6z"/>
+</svg>
+</svg>
diff --git a/index.html b/index.html
index ee7e284..14997c7 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{$language}" class="no-js">
+<html lang="{$language}" class="{if="isset($_COOKIE['theme']) && $_COOKIE['theme'] === 'dark'"}dark-theme {/if}no-js">
 <head>
     <meta charset="UTF-8">
     <title>{$delimiter=' · '}{if="isset($currentFeed)"}{$currentFeed->getName()}{$delimiter}{/if}{if="isset($currentFolder)"}{$currentFolder->getName()}{$delimiter}{/if}LeedVibes</title>
@@ -65,6 +65,9 @@ <h3>{function="_t('YOU_MUST_BE_LOGGED')"}</h3>
                         <use xlink:href="#svg-settings" />
                     </svg>
                 </a>
+                <button class="settings-item js-brightness-toggle">
+                    <img src="images/brightness.svg?#brightness_medium">
+                </button>
                 <a href="./?action=favorites" data-link="favorites" class="settings-item">
                     <svg
                         width="15"
@@ -236,8 +239,13 @@ <h2 class="feed-add-title">{function="_t('ADD_FEED')"}</h2>
                 </div>
             </div>
         </main>
-        <section class="shortcuts js-shortcuts">
-            <ul class="shortcuts-list">
+        <section class="popin hidden js-popin">
+            <ul class="brightness-list js-brightness-list">
+                <li class="brightness-item"><button class="brightness-button js-theme-toggle-set" data-theme="light"><img src="images/brightness.svg?#brightness_high" alt="" class="brightness-img"> Clair</button></li>
+                <li class="brightness-item"><button class="brightness-button js-theme-toggle-set" data-theme="dark"><img src="images/brightness.svg?#brightness_low" alt="" class="brightness-img"> Sombre</button></li>
+                <li class="brightness-item"><button class="brightness-button js-theme-toggle-set" data-theme="auto"><img src="images/brightness.svg?#brightness_auto" alt="" class="brightness-img"> Auto</button></li>
+            </ul>
+            <ul class="shortcuts-list js-shortcuts-list">
                 <li class="shortcut"><span class="shortcut-key">M</span> <span class="shortcut-text">Mark the current folder as read</span></li>
                 <li class="shortcut"><span class="shortcut-key">X</span> <span class="shortcut-text">Mark the current article as read</span></li>
                 <li class="shortcut"><span class="shortcut-key">F</span> <span class="shortcut-text">Mark the current article as favorited / unfavorited</span></li>
diff --git a/js/script.js b/js/script.js
index 880c760..4255a01 100644
--- a/js/script.js
+++ b/js/script.js
@@ -12,10 +12,95 @@ function _t (key, args) {
     return value;
 }
 
+function darkTheme () {
+    const rootEl = document.querySelector('html');
+    const themeDom = {
+        darkClass: 'dark-theme',
+
+        toggleClass (el) {
+            return el.classList.toggle(this.darkClass);
+        },
+
+        addClass (el) {
+            return el.classList.add(this.darkClass);
+        },
+
+        removeClass (el) {
+            return el.classList.remove(this.darkClass);
+        }
+    };
+    const themeCookie = {
+        values: {
+            light: 'light',
+            dark: 'dark'
+        },
+
+        name: 'theme',
+
+        getValue (isDarkTheme) {
+            return isDarkTheme ? this.values.dark : this.values.light;
+        },
+
+        setCookie (isDarkTheme) {
+            const value = this.getValue(isDarkTheme);
+            document.cookie = `${this.name}=${value};samesite=Lax;path=/;max-age=31536000`;
+        },
+
+        removeCookie () {
+            document.cookie = `${this.name}=auto;samesite=Lax;path=/;max-age=0`;
+        },
+
+        exists () {
+            return document.cookie.split(';').map((cookie) => cookie.split('=')).filter((cookie) => cookie[0].trim() === 'theme').length;
+        }
+    };
+    const preferedColorScheme = {
+        choose () {
+            if (this.isAvailable() && themeCookie.exists() === 0) {
+                const isPreferedColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
+                if (themeCookie.exists() === 0) {
+                    themeDom[isPreferedColorSchemeDark ? 'addClass' : 'removeClass'](rootEl);
+                }
+            }
+        },
+
+        isAvailable () {
+            return typeof window.matchMedia === 'function';
+        },
+
+        init () {
+            if (!this.isAvailable()) {
+                return false;
+            }
+            this.choose();
+            window.matchMedia('(prefers-color-scheme: dark)').addListener(() => {
+                this.choose();
+            });
+        }
+    };
+    preferedColorScheme.init();
+    const themeButtonLow = document.querySelector('.js-theme-toggle-set[data-theme="light"]');
+    themeButtonLow.addEventListener('click', () => {
+        themeDom.removeClass(rootEl);
+        themeCookie.setCookie(false);
+    });
+    const themeButtonHigh = document.querySelector('.js-theme-toggle-set[data-theme="dark"]');
+    themeButtonHigh.addEventListener('click', () => {
+        themeDom.addClass(rootEl);
+        themeCookie.setCookie(true);
+    });
+    const themeButtonAuto = document.querySelector('.js-theme-toggle-set[data-theme="auto"]');
+    themeButtonAuto.addEventListener('click', () => {
+        themeCookie.removeCookie();
+        preferedColorScheme.choose();
+    });
+}
+
 $(function () {
     'use strict';
 
     anonymousState = $('[data-anonymous-state]').data('anonymous-state');
+    darkTheme();
 
     $('.wrapper').on('click keypress', '.js-event', function (event) {
         if (event.type === 'click' || event.which === 13) {
@@ -70,17 +155,57 @@ $(function () {
         markAsRead(button);
     });
 
-    const shortcutsContainer = $('.js-shortcuts');
+    const popin = {
+        el: document.querySelector('.js-popin'),
+        previousFocusedEl: null,
+
+        brightnessClass: 'js-brightness-list',
+        shortcutsClass: 'js-shortcuts-list',
+
+        show: function (name) {
+            Mousetrap.bind('esc', () => { this.close(); });
+            const isShortcuts = name === this.shortcutsClass;
+            this.previousFocusedEl = document.activeElement;
+            this.el.querySelector('.js-brightness-list').classList[isShortcuts ? 'add' : 'remove']('hidden');
+            this.el.querySelector('.js-shortcuts-list').classList[isShortcuts ? 'remove' : 'add']('hidden');
+            this.el.classList.remove('hidden');
+            this.el.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').focus();
+        },
+
+        close: function () {
+            this.el.classList.add('hidden');
+            this.previousFocusedEl.focus();
+        },
+
+        showShortcuts: function () {
+            this.show(this.shortcutsClass);
+        },
+
+        toggleShortcuts: function () {
+            this.el.querySelector('.js-brightness-list').classList.add('hidden');
+            this.el.querySelector('.js-shortcuts-list').classList.remove('hidden');
+            this.el.classList.toggle('hidden');
+        },
+
+        showBrightness: function () {
+            this.show(this.brightnessClass);
+        },
+
+        init: function () {
+            this.el.addEventListener('click', this.close.bind(this));
+        }
+    };
+    popin.init();
+
     $('.js-shortcuts-toggle').on('click', function () {
-        shortcutsContainer.show();
+        popin.showShortcuts();
     });
-    shortcutsContainer.on('click', function () {
-        $(this).hide();
+    $('.js-brightness-toggle').on('click', function () {
+        popin.showBrightness();
     });
 
     pushIdsDisplayed($('.js-event'));
 
-
     const userAction = new UserActionObject();
     Mousetrap.bind('j', function () { userAction.moveForward(); });
     Mousetrap.bind('k', function () { userAction.moveBackward(); });
@@ -90,7 +215,7 @@ $(function () {
     Mousetrap.bind('g f', function () { window.location.href = $('[data-link="favorites"]')[0].href; });
     Mousetrap.bind('g s', function () { window.location.href = $('[data-link="settings"]')[0].href; });
     Mousetrap.bind('r', function () { refreshEvents(syncCode); });
-    Mousetrap.bind('?', function () { userAction.toggleHelp(shortcutsContainer); });
+    Mousetrap.bind('?', function () { popin.toggleShortcuts(); });
 
     Mousetrap.bind('m', function () {
         const button = $('.selected').find('.js-mark-as-read');
@@ -203,10 +328,6 @@ UserActionObject.prototype = {
             return false;
         }
         this.focusedEl.find(selector).first().click();
-    },
-
-    toggleHelp: function (el) {
-        el.toggle();
     }
 };
 
diff --git a/sass/style.scss b/sass/style.scss
index 356f04a..66b7209 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -747,24 +747,24 @@ button.settings-item {
     }
 }
 
-.shortcuts {
+.popin {
     position: fixed;
-    display: none;
+    display: flex;
     left: 0;
     top: 0;
     padding: 20px;
     width: 100%;
-    height: 100%;
+    height: 100vh;
     color: white;
     background-color: #{$sidebar-color-bg-darken}e6;
-    overflow: scroll;
-}
-
-.shortcuts:hover {
+    justify-content: center;
+    align-items: center;
     cursor: pointer;
+    overflow: auto;
+    box-sizing: border-box;
+    z-index: 1000;
 }
 
-
 .shortcuts-list {
     margin: 0;
     padding: 0;
@@ -796,6 +796,30 @@ $shortcut-key-space: 20px;
     }
 }
 
+.brightness-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.brightness-item {
+    margin-bottom: 20px;
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+}
+
+.brightness-button {
+    display: flex;
+    align-items: center;
+}
+
+.brightness-img {
+    margin-right: 10px;
+    width: 30px;
+}
+
 /* MEDIA QUERIES */
 @media($breakpoint-max) {
     td {
@@ -846,3 +870,45 @@ $shortcut-key-space: 20px;
     clip: rect(0,0,0,0);
     border: 0;
 }
+
+.dark-theme {
+    .wrapper {
+        background-color: black;
+    }
+
+    .article__header .article__feed-title {
+        color: #aaa;
+    }
+
+    .event {
+        border-color: #262626;
+    }
+
+    .event a,
+    .article__date {
+        color: #bdbdbd;
+    }
+
+    .article__description::after {
+        background-image: linear-gradient(to left, black 48%, rgba(0, 0, 0, 0) 100%)
+    }
+
+    .article-favorite,
+    .article__read-unread {
+        filter: invert(100%);
+    }
+
+    .leedvibes-article-content {
+        color: white;
+    }
+
+    .event:not(.event--focus):hover,
+    .event--focused:not(.event--focus) {
+        background-color: #333;
+    }
+
+    .event:hover .article__description::after,
+    .event--focused .article__description::after {
+        background-image: linear-gradient(to left, #333 6em, rgba(51, 51, 51, 0) 100%);
+    }
+}