diff --git a/css/style.css b/css/style.css
index e38e797..fc06a40 100644
--- a/css/style.css
+++ b/css/style.css
@@ -155,7 +155,7 @@ button {
 .sidebar a {
   color: #fff;
 }
-.sidebar .settings__fields {
+.sidebar .login-form {
   padding: 20%;
 }
 
@@ -665,6 +665,7 @@ html:not(.no-js) .feed--closed {
 
 .user-login {
   margin: 1em auto;
+  min-width: 250px;
   flex-direction: column;
 }
 
@@ -707,21 +708,55 @@ button.settings-item:focus {
   outline: dotted 1px;
 }
 
-.settings__fields input[type=text],
-.settings__fields input[type=password] {
-  min-width: 7em;
-  width: 35%;
+.login-form {
+  width: 100%;
+}
+
+.login-title {
+  margin-bottom: 20px;
+  font-size: 2rem;
+}
+@media (max-width: 650px) {
+  .login-title {
+    margin-bottom: 10px;
+  }
+}
+
+.login-logo {
+  margin-top: 20px;
+  margin-bottom: 40px;
+  width: 100px;
+  filter: invert(100%);
+}
+@media (max-width: 650px) {
+  .login-logo {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    width: 50px;
+  }
+}
+
+.login-input {
+  width: 60%;
 }
 
-.settings__fields input[type=text],
-.settings__fields input[type=password],
-.settings__fields input[type=submit] {
+.login-input,
+.login-submit {
   display: block;
-  margin: 0.4em auto;
+  margin: 0.4em auto 10px;
   padding: 0.5em;
   color: #303030;
 }
 
+.login-submit {
+  margin-top: 40px;
+}
+
+.login-remember-me {
+  display: block;
+  margin: 20px 0;
+}
+
 .extra-settings {
   display: flex;
   justify-content: center;
diff --git a/css/style.css.map b/css/style.css.map
index b0b7def..4a57557 100644
--- a/css/style.css.map
+++ b/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["// VARS\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/* RESET */\nhtml {\n    font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;\n    font-size: 62.5%;\n    scrollbar-color: grey $sidebar-color-bg-darken;\n}\n\nh1 {\n    margin: 0;\n\n    @media( $breakpoint-max ) {\n        font-size: 1.3em;\n    }\n}\n\na {\n    text-decoration: none;\n}\n\na,\n.feeds-list-toggle,\n.folder__button {\n    touch-action: manipulation;\n}\n\niframe {\n    width: auto;\n}\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\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n    -webkit-appearance: button; // stylelint-disable-line property-no-vendor-prefix\n    cursor: pointer;\n}\n\n/* GENERAL STYLE */\nbody {\n    display: flex;\n    flex-wrap: wrap;\n    width: 99vw;\n    font-size: 1.3rem;\n    background-color: $sidebar-color-bg;\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    padding-bottom: 80px;\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: 0;\n        padding-bottom: 140px;\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: $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\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: 5px solid transparent;\n$border-color-active: white;\n\n.sidebar {\n    flex: 0 0 270px;\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.6rem 0.4em;\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    display: none;\n    padding: 10px 5px;\n    width: 100%;\n    text-align: center;\n    box-sizing: border-box;\n    z-index: 100;\n\n    &[data-is-opened=\"true\"] {\n        display: block;\n    }\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.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\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\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: $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.mobile-toggle,\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.mobile-toggle {\n    @media($breakpoint-max) {\n        width: 100%;\n        max-height: calc(100% - #{$settings-height});\n    }\n\n    &[data-is-opened=\"false\"] {\n        @media($breakpoint-max) {\n            transform: translate3d(0, -100%, 0);\n        }\n    }\n}\n\n.unreads-badge {\n    color: white;\n    background: #555;\n    position: absolute;\n    border-radius: 50%;\n    padding: 2px;\n    z-index: 100;\n    right: 5px;\n    bottom: 0;\n}\n\n.feeds-list {\n    display: block;\n    margin-top: 0;\n    padding: 0;\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\n    @extend %overflow-sidebar;\n}\n\n.folder__button {\n    float: left;\n    margin-right: 5px;\n    padding: 0;\n    width: 10%;\n\n    @extend %button-focused;\n}\n\n.folder-closed {\n    transform: rotate(270deg);\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    @media($breakpoint-max) {\n        margin-right: 0.8em;\n    }\n}\n\n.mark-as-read {\n    padding: 0 0.4rem;\n    color: white;\n    font-size: 0.8em;\n\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\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    line-height: 1.4;\n    vertical-align: middle;\n\n    @media($breakpoint-max) {\n        width: auto;\n        grid-area: site;\n    }\n}\n\n.ui-side-button {\n    @media($breakpoint-min) {\n        display: none;\n    }\n}\n\n.ui-side-reverse .ui-side-button {\n    transform: scaleX(-1);\n}\n\n.ui-side-reverse .article__header {\n    @media($breakpoint-max) {\n        grid-template-areas: \"favicon site date\" \"mark title favorite\";\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    display: inline;\n    font-size: 1em;\n\n    @media($breakpoint-max) {\n        display: inline-block;\n        margin-left: 14%;\n        grid-area: title;\n    }\n\n    [class~=\"event--read\"] & a {\n        color: $feed-event-read-color;\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__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        background-image: linear-gradient(to left, white 48%, rgb(255 255 255 / 0%) 100%);\n\n        .event--focused &,\n        .event:hover & {\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\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\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\n.leedvibes-article-content-top-options {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-evenly;\n    align-items: center;\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    flex-direction: column;\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.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\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.extra-settings {\n    display: flex;\n    justify-content: center;\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% { 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\n.shortcut-key {\n    display: inline-block;\n    margin-right: $shortcut-key-space;\n    padding: 5px 5px 10px;\n    min-width: 20px;\n    color: #777;\n    font-size: 12px;\n    background-color: #DDD;\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.undo-mark-as-read {\n    position: fixed;\n    padding: 10px;\n    right: 10px;\n    bottom: 10px;\n    background-color: $sidebar-color-bg;\n    border-radius: 50%;\n    z-index: 100;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: #333;\n    }\n\n    @media($breakpoint-max) {\n        padding: 20px;\n        bottom: 70px;\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\n.dark-theme {\n    .wrapper {\n        background-color: #202020;\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__title a {\n        color: white;\n    }\n\n    [class~=\"event--read\"] .article__title a {\n        color: #bdbdbd;\n    }\n\n    .article__description::after {\n        background-image: linear-gradient(to left, #202020 48%, rgb(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--focused .article__description::after,\n    .event:hover .article__description::after {\n        background-image: linear-gradient(to left, #333 6em, rgb(51 51 51 / 0%) 100%);\n    }\n}\n","/* RESET */\nhtml {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n  font-size: 62.5%;\n  scrollbar-color: grey #303030;\n}\n\nh1 {\n  margin: 0;\n}\n@media (max-width: 650px) {\n  h1 {\n    font-size: 1.3em;\n  }\n}\n\na {\n  text-decoration: none;\n}\n\na,\n.feeds-list-toggle,\n.folder__button {\n  touch-action: manipulation;\n}\n\niframe {\n  width: auto;\n}\n\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n.leedvibes-article-content img,\n.leedvibes-article-content audio,\n.leedvibes-article-content canvas,\n.leedvibes-article-content iframe,\n.leedvibes-article-content progress,\n.leedvibes-article-content video {\n  display: block;\n  margin: 0 auto;\n}\n\nbutton,\nhtml input[type=button],\ninput[type=reset],\ninput[type=submit] {\n  -webkit-appearance: button;\n  cursor: pointer;\n}\n\n/* GENERAL STYLE */\nbody {\n  display: flex;\n  flex-wrap: wrap;\n  width: 99vw;\n  font-size: 1.3rem;\n  background-color: #424242;\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  padding-bottom: 80px;\n  flex: 1 1 0;\n  min-width: 0;\n  min-height: 100vh;\n  background-color: #FFF;\n}\n@media (max-width: 650px) {\n  .wrapper {\n    margin-bottom: 0;\n    padding-bottom: 140px;\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.article-favorite,\n.article__read-unread, .mark-as-read, .folder__button {\n  border: 1px dashed transparent;\n}\n.article-favorite:focus,\n.article__read-unread:focus, .mark-as-read:focus, .folder__button:focus {\n  border-color: #DDD;\n}\n\n.folder__item a, .sidebar-item-label {\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.event:not(.event--focus):hover, .event--focused:not(.event--focus) {\n  background-color: #DDD;\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 270px;\n  font-size: 0.9em;\n  overflow: hidden;\n}\n.sidebar a {\n  color: #fff;\n}\n.sidebar .settings__fields {\n  padding: 20%;\n}\n\n.folder__item,\n.feed__item {\n  display: flex;\n  position: relative;\n  padding: 0.6rem 0.4em;\n  border-left: 5px solid transparent;\n}\n.folder__item,\n.folder__item a,\n.feed__item,\n.feed__item a {\n  color: #fff;\n}\n.folder__item:hover, .folder__item:active,\n.feed__item:hover,\n.feed__item:active {\n  background-color: #303030;\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; /* 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  display: none;\n  padding: 10px 5px;\n  width: 100%;\n  text-align: center;\n  box-sizing: border-box;\n  z-index: 100;\n}\n.feed-add[data-is-opened=true] {\n  display: block;\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.sidebar > section li {\n  display: flex;\n  color: #fff;\n  justify-content: space-between;\n}\n\n.sidebar > section button,\n.button {\n  padding: 1em 2em;\n  color: #fff;\n  background-color: #484848;\n}\n.sidebar > section button:hover, .sidebar > section button:active, .sidebar > section button:focus,\n.button:hover,\n.button:active,\n.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.is-opened .feeds-list-toggle__label {\n  transform: translate3d(0, 150%, 0);\n}\n\n@media (max-width: 650px) {\n  .mobile-toggle,\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@media (max-width: 650px) {\n  .mobile-toggle {\n    width: 100%;\n    max-height: calc(100% - 60px);\n  }\n}\n@media (max-width: 650px) {\n  .mobile-toggle[data-is-opened=false] {\n    transform: translate3d(0, -100%, 0);\n  }\n}\n\n.unreads-badge {\n  color: white;\n  background: #555;\n  position: absolute;\n  border-radius: 50%;\n  padding: 2px;\n  z-index: 100;\n  right: 5px;\n  bottom: 0;\n}\n\n.feeds-list {\n  display: block;\n  margin-top: 0;\n  padding: 0;\n}\n.feeds-list:target {\n  display: block;\n}\n\n.folder {\n  border-bottom: 0.2em solid #484848;\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.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 (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  color: white;\n  font-size: 0.8em;\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.event--focus .article__header {\n  padding-bottom: 0.6em;\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__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  line-height: 1.4;\n  vertical-align: middle;\n}\n@media (max-width: 650px) {\n  .article__feed-title {\n    width: auto;\n    grid-area: site;\n  }\n}\n\n@media (min-width: 650px) {\n  .ui-side-button {\n    display: none;\n  }\n}\n\n.ui-side-reverse .ui-side-button {\n  transform: scaleX(-1);\n}\n\n@media (max-width: 650px) {\n  .ui-side-reverse .article__header {\n    grid-template-areas: \"favicon site date\" \"mark title favorite\";\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 (max-width: 650px) {\n  .feed-icon {\n    margin: 0;\n  }\n}\n\n.article__title {\n  display: inline;\n  font-size: 1em;\n}\n@media (max-width: 650px) {\n  .article__title {\n    display: inline-block;\n    margin-left: 14%;\n    grid-area: title;\n  }\n}\n[class~=event--read] .article__title a {\n  color: #BBB;\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__description {\n  display: inline-block;\n  margin-left: 0.4em;\n  color: #888;\n}\n[class~=event--read] .article__description {\n  color: #BBB;\n}\n@media (max-width: 650px) {\n  .article__description {\n    display: none;\n  }\n}\n.event--focus .article__description {\n  display: none;\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.event--focused .article__description::after, .event:hover .article__description::after {\n  background-image: linear-gradient(to left, #DDD 6em, rgba(221, 221, 221, 0) 100%);\n}\n@media (max-width: 650px) {\n  .event--focused .article__description::after, .event:hover .article__description::after {\n    background: none;\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@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.article-favorite--favorited {\n  opacity: 1;\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@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.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@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@media (max-width: 650px) {\n  .leedvibes-article-content {\n    padding: 0 1rem;\n    width: auto;\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.leedvibes-article-content__infos a {\n  font-size: 2.8rem;\n  line-height: 1;\n}\n\n.leedvibes-article-content-top-options {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-evenly;\n  align-items: center;\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@media (max-width: 650px) {\n  .leedvibes-article-content__switch-view {\n    top: 2.4em;\n    right: 4em;\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  flex-direction: column;\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@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.settings-item {\n  padding: 0.5em 1.5em;\n  min-width: 15px;\n  min-height: 18px;\n  border-bottom: 5px solid transparent;\n  box-sizing: content-box;\n  transition: border 0.2s ease-in-out 0s;\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}\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.extra-settings {\n  display: flex;\n  justify-content: center;\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.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.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;\n  min-width: 20px;\n  color: #777;\n  font-size: 12px;\n  background-color: #DDD;\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.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.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.undo-mark-as-read {\n  position: fixed;\n  padding: 10px;\n  right: 10px;\n  bottom: 10px;\n  background-color: #424242;\n  border-radius: 50%;\n  z-index: 100;\n}\n.undo-mark-as-read:hover, .undo-mark-as-read:active, .undo-mark-as-read:focus {\n  background-color: #333;\n}\n@media (max-width: 650px) {\n  .undo-mark-as-read {\n    padding: 20px;\n    bottom: 70px;\n  }\n}\n\n/* MEDIA QUERIES */\n@media (max-width: 650px) {\n  td {\n    display: block;\n  }\n}\n.mobile-only {\n  display: none;\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: #202020;\n}\n.dark-theme .article__header .article__feed-title {\n  color: #aaa;\n}\n.dark-theme .event {\n  border-color: #262626;\n}\n.dark-theme .event a,\n.dark-theme .article__date {\n  color: #bdbdbd;\n}\n.dark-theme .article__title a {\n  color: white;\n}\n.dark-theme [class~=event--read] .article__title a {\n  color: #bdbdbd;\n}\n.dark-theme .article__description::after {\n  background-image: linear-gradient(to left, #202020 48%, rgba(0, 0, 0, 0) 100%);\n}\n.dark-theme .article-favorite,\n.dark-theme .article__read-unread {\n  filter: invert(100%);\n}\n.dark-theme .leedvibes-article-content {\n  color: white;\n}\n.dark-theme .event:not(.event--focus):hover,\n.dark-theme .event--focused:not(.event--focus) {\n  background-color: #333;\n}\n.dark-theme .event--focused .article__description::after,\n.dark-theme .event:hover .article__description::after {\n  background-image: linear-gradient(to left, #333 6em, rgba(51, 51, 51, 0) 100%);\n}"]}
\ No newline at end of file
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["// VARS\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/* RESET */\nhtml {\n    font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;\n    font-size: 62.5%;\n    scrollbar-color: grey $sidebar-color-bg-darken;\n}\n\nh1 {\n    margin: 0;\n\n    @media( $breakpoint-max ) {\n        font-size: 1.3em;\n    }\n}\n\na {\n    text-decoration: none;\n}\n\na,\n.feeds-list-toggle,\n.folder__button {\n    touch-action: manipulation;\n}\n\niframe {\n    width: auto;\n}\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\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n    -webkit-appearance: button; // stylelint-disable-line property-no-vendor-prefix\n    cursor: pointer;\n}\n\n/* GENERAL STYLE */\nbody {\n    display: flex;\n    flex-wrap: wrap;\n    width: 99vw;\n    font-size: 1.3rem;\n    background-color: $sidebar-color-bg;\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    padding-bottom: 80px;\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: 0;\n        padding-bottom: 140px;\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: $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\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: 5px solid transparent;\n$border-color-active: white;\n\n.sidebar {\n    flex: 0 0 270px;\n    font-size: 0.9em;\n    overflow: hidden;\n\n    a {\n        color: $sidebar-color;\n    }\n\n    .login-form {\n        padding: 20%;\n    }\n\n}\n\n.folder__item,\n.feed__item {\n    display: flex;\n    position: relative;\n    padding: 0.6rem 0.4em;\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    display: none;\n    padding: 10px 5px;\n    width: 100%;\n    text-align: center;\n    box-sizing: border-box;\n    z-index: 100;\n\n    &[data-is-opened=\"true\"] {\n        display: block;\n    }\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.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\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\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: $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.mobile-toggle,\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.mobile-toggle {\n    @media($breakpoint-max) {\n        width: 100%;\n        max-height: calc(100% - #{$settings-height});\n    }\n\n    &[data-is-opened=\"false\"] {\n        @media($breakpoint-max) {\n            transform: translate3d(0, -100%, 0);\n        }\n    }\n}\n\n.unreads-badge {\n    color: white;\n    background: #555;\n    position: absolute;\n    border-radius: 50%;\n    padding: 2px;\n    z-index: 100;\n    right: 5px;\n    bottom: 0;\n}\n\n.feeds-list {\n    display: block;\n    margin-top: 0;\n    padding: 0;\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\n    @extend %overflow-sidebar;\n}\n\n.folder__button {\n    float: left;\n    margin-right: 5px;\n    padding: 0;\n    width: 10%;\n\n    @extend %button-focused;\n}\n\n.folder-closed {\n    transform: rotate(270deg);\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    @media($breakpoint-max) {\n        margin-right: 0.8em;\n    }\n}\n\n.mark-as-read {\n    padding: 0 0.4rem;\n    color: white;\n    font-size: 0.8em;\n\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\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    line-height: 1.4;\n    vertical-align: middle;\n\n    @media($breakpoint-max) {\n        width: auto;\n        grid-area: site;\n    }\n}\n\n.ui-side-button {\n    @media($breakpoint-min) {\n        display: none;\n    }\n}\n\n.ui-side-reverse .ui-side-button {\n    transform: scaleX(-1);\n}\n\n.ui-side-reverse .article__header {\n    @media($breakpoint-max) {\n        grid-template-areas: \"favicon site date\" \"mark title favorite\";\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    display: inline;\n    font-size: 1em;\n\n    @media($breakpoint-max) {\n        display: inline-block;\n        margin-left: 14%;\n        grid-area: title;\n    }\n\n    [class~=\"event--read\"] & a {\n        color: $feed-event-read-color;\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__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        background-image: linear-gradient(to left, white 48%, rgb(255 255 255 / 0%) 100%);\n\n        .event--focused &,\n        .event:hover & {\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\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\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\n.leedvibes-article-content-top-options {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-evenly;\n    align-items: center;\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    min-width: 250px;\n    flex-direction: column;\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.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.login-form {\n    width: 100%;\n}\n\n.login-title {\n    margin-bottom: 20px;\n    font-size: 2rem;\n\n    @media($breakpoint-max) {\n        margin-bottom: 10px;\n    }\n}\n\n.login-logo {\n    margin-top: 20px;\n    margin-bottom: 40px;\n    width: 100px;\n    filter: invert(100%);\n\n    @media($breakpoint-max) {\n        margin-top: 10px;\n        margin-bottom: 20px;\n        width: 50px;\n    }\n}\n\n.login-input {\n    width: 60%;\n}\n\n.login-input,\n.login-submit {\n    display: block;\n    margin: 0.4em auto 10px;\n    padding: 0.5em;\n    color: $sidebar-color-bg-darken;\n}\n\n.login-submit {\n    margin-top: 40px;\n}\n\n.login-remember-me {\n    display: block;\n    margin: 20px 0;\n}\n\n.extra-settings {\n    display: flex;\n    justify-content: center;\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% { 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\n.shortcut-key {\n    display: inline-block;\n    margin-right: $shortcut-key-space;\n    padding: 5px 5px 10px;\n    min-width: 20px;\n    color: #777;\n    font-size: 12px;\n    background-color: #DDD;\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.undo-mark-as-read {\n    position: fixed;\n    padding: 10px;\n    right: 10px;\n    bottom: 10px;\n    background-color: $sidebar-color-bg;\n    border-radius: 50%;\n    z-index: 100;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: #333;\n    }\n\n    @media($breakpoint-max) {\n        padding: 20px;\n        bottom: 70px;\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\n.dark-theme {\n    .wrapper {\n        background-color: #202020;\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__title a {\n        color: white;\n    }\n\n    [class~=\"event--read\"] .article__title a {\n        color: #bdbdbd;\n    }\n\n    .article__description::after {\n        background-image: linear-gradient(to left, #202020 48%, rgb(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--focused .article__description::after,\n    .event:hover .article__description::after {\n        background-image: linear-gradient(to left, #333 6em, rgb(51 51 51 / 0%) 100%);\n    }\n}\n","/* RESET */\nhtml {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n  font-size: 62.5%;\n  scrollbar-color: grey #303030;\n}\n\nh1 {\n  margin: 0;\n}\n@media (max-width: 650px) {\n  h1 {\n    font-size: 1.3em;\n  }\n}\n\na {\n  text-decoration: none;\n}\n\na,\n.feeds-list-toggle,\n.folder__button {\n  touch-action: manipulation;\n}\n\niframe {\n  width: auto;\n}\n\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n.leedvibes-article-content img,\n.leedvibes-article-content audio,\n.leedvibes-article-content canvas,\n.leedvibes-article-content iframe,\n.leedvibes-article-content progress,\n.leedvibes-article-content video {\n  display: block;\n  margin: 0 auto;\n}\n\nbutton,\nhtml input[type=button],\ninput[type=reset],\ninput[type=submit] {\n  -webkit-appearance: button;\n  cursor: pointer;\n}\n\n/* GENERAL STYLE */\nbody {\n  display: flex;\n  flex-wrap: wrap;\n  width: 99vw;\n  font-size: 1.3rem;\n  background-color: #424242;\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  padding-bottom: 80px;\n  flex: 1 1 0;\n  min-width: 0;\n  min-height: 100vh;\n  background-color: #FFF;\n}\n@media (max-width: 650px) {\n  .wrapper {\n    margin-bottom: 0;\n    padding-bottom: 140px;\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.article-favorite,\n.article__read-unread, .mark-as-read, .folder__button {\n  border: 1px dashed transparent;\n}\n.article-favorite:focus,\n.article__read-unread:focus, .mark-as-read:focus, .folder__button:focus {\n  border-color: #DDD;\n}\n\n.folder__item a, .sidebar-item-label {\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.event:not(.event--focus):hover, .event--focused:not(.event--focus) {\n  background-color: #DDD;\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 270px;\n  font-size: 0.9em;\n  overflow: hidden;\n}\n.sidebar a {\n  color: #fff;\n}\n.sidebar .login-form {\n  padding: 20%;\n}\n\n.folder__item,\n.feed__item {\n  display: flex;\n  position: relative;\n  padding: 0.6rem 0.4em;\n  border-left: 5px solid transparent;\n}\n.folder__item,\n.folder__item a,\n.feed__item,\n.feed__item a {\n  color: #fff;\n}\n.folder__item:hover, .folder__item:active,\n.feed__item:hover,\n.feed__item:active {\n  background-color: #303030;\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; /* 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  display: none;\n  padding: 10px 5px;\n  width: 100%;\n  text-align: center;\n  box-sizing: border-box;\n  z-index: 100;\n}\n.feed-add[data-is-opened=true] {\n  display: block;\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.sidebar > section li {\n  display: flex;\n  color: #fff;\n  justify-content: space-between;\n}\n\n.sidebar > section button,\n.button {\n  padding: 1em 2em;\n  color: #fff;\n  background-color: #484848;\n}\n.sidebar > section button:hover, .sidebar > section button:active, .sidebar > section button:focus,\n.button:hover,\n.button:active,\n.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.is-opened .feeds-list-toggle__label {\n  transform: translate3d(0, 150%, 0);\n}\n\n@media (max-width: 650px) {\n  .mobile-toggle,\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@media (max-width: 650px) {\n  .mobile-toggle {\n    width: 100%;\n    max-height: calc(100% - 60px);\n  }\n}\n@media (max-width: 650px) {\n  .mobile-toggle[data-is-opened=false] {\n    transform: translate3d(0, -100%, 0);\n  }\n}\n\n.unreads-badge {\n  color: white;\n  background: #555;\n  position: absolute;\n  border-radius: 50%;\n  padding: 2px;\n  z-index: 100;\n  right: 5px;\n  bottom: 0;\n}\n\n.feeds-list {\n  display: block;\n  margin-top: 0;\n  padding: 0;\n}\n.feeds-list:target {\n  display: block;\n}\n\n.folder {\n  border-bottom: 0.2em solid #484848;\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.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 (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  color: white;\n  font-size: 0.8em;\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.event--focus .article__header {\n  padding-bottom: 0.6em;\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__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  line-height: 1.4;\n  vertical-align: middle;\n}\n@media (max-width: 650px) {\n  .article__feed-title {\n    width: auto;\n    grid-area: site;\n  }\n}\n\n@media (min-width: 650px) {\n  .ui-side-button {\n    display: none;\n  }\n}\n\n.ui-side-reverse .ui-side-button {\n  transform: scaleX(-1);\n}\n\n@media (max-width: 650px) {\n  .ui-side-reverse .article__header {\n    grid-template-areas: \"favicon site date\" \"mark title favorite\";\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 (max-width: 650px) {\n  .feed-icon {\n    margin: 0;\n  }\n}\n\n.article__title {\n  display: inline;\n  font-size: 1em;\n}\n@media (max-width: 650px) {\n  .article__title {\n    display: inline-block;\n    margin-left: 14%;\n    grid-area: title;\n  }\n}\n[class~=event--read] .article__title a {\n  color: #BBB;\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__description {\n  display: inline-block;\n  margin-left: 0.4em;\n  color: #888;\n}\n[class~=event--read] .article__description {\n  color: #BBB;\n}\n@media (max-width: 650px) {\n  .article__description {\n    display: none;\n  }\n}\n.event--focus .article__description {\n  display: none;\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.event--focused .article__description::after, .event:hover .article__description::after {\n  background-image: linear-gradient(to left, #DDD 6em, rgba(221, 221, 221, 0) 100%);\n}\n@media (max-width: 650px) {\n  .event--focused .article__description::after, .event:hover .article__description::after {\n    background: none;\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@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.article-favorite--favorited {\n  opacity: 1;\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@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.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@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@media (max-width: 650px) {\n  .leedvibes-article-content {\n    padding: 0 1rem;\n    width: auto;\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.leedvibes-article-content__infos a {\n  font-size: 2.8rem;\n  line-height: 1;\n}\n\n.leedvibes-article-content-top-options {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-evenly;\n  align-items: center;\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@media (max-width: 650px) {\n  .leedvibes-article-content__switch-view {\n    top: 2.4em;\n    right: 4em;\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  min-width: 250px;\n  flex-direction: column;\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@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.settings-item {\n  padding: 0.5em 1.5em;\n  min-width: 15px;\n  min-height: 18px;\n  border-bottom: 5px solid transparent;\n  box-sizing: content-box;\n  transition: border 0.2s ease-in-out 0s;\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}\nbutton.settings-item:focus {\n  outline: dotted 1px;\n}\n\n.login-form {\n  width: 100%;\n}\n\n.login-title {\n  margin-bottom: 20px;\n  font-size: 2rem;\n}\n@media (max-width: 650px) {\n  .login-title {\n    margin-bottom: 10px;\n  }\n}\n\n.login-logo {\n  margin-top: 20px;\n  margin-bottom: 40px;\n  width: 100px;\n  filter: invert(100%);\n}\n@media (max-width: 650px) {\n  .login-logo {\n    margin-top: 10px;\n    margin-bottom: 20px;\n    width: 50px;\n  }\n}\n\n.login-input {\n  width: 60%;\n}\n\n.login-input,\n.login-submit {\n  display: block;\n  margin: 0.4em auto 10px;\n  padding: 0.5em;\n  color: #303030;\n}\n\n.login-submit {\n  margin-top: 40px;\n}\n\n.login-remember-me {\n  display: block;\n  margin: 20px 0;\n}\n\n.extra-settings {\n  display: flex;\n  justify-content: center;\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.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.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;\n  min-width: 20px;\n  color: #777;\n  font-size: 12px;\n  background-color: #DDD;\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.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.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.undo-mark-as-read {\n  position: fixed;\n  padding: 10px;\n  right: 10px;\n  bottom: 10px;\n  background-color: #424242;\n  border-radius: 50%;\n  z-index: 100;\n}\n.undo-mark-as-read:hover, .undo-mark-as-read:active, .undo-mark-as-read:focus {\n  background-color: #333;\n}\n@media (max-width: 650px) {\n  .undo-mark-as-read {\n    padding: 20px;\n    bottom: 70px;\n  }\n}\n\n/* MEDIA QUERIES */\n@media (max-width: 650px) {\n  td {\n    display: block;\n  }\n}\n.mobile-only {\n  display: none;\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: #202020;\n}\n.dark-theme .article__header .article__feed-title {\n  color: #aaa;\n}\n.dark-theme .event {\n  border-color: #262626;\n}\n.dark-theme .event a,\n.dark-theme .article__date {\n  color: #bdbdbd;\n}\n.dark-theme .article__title a {\n  color: white;\n}\n.dark-theme [class~=event--read] .article__title a {\n  color: #bdbdbd;\n}\n.dark-theme .article__description::after {\n  background-image: linear-gradient(to left, #202020 48%, rgba(0, 0, 0, 0) 100%);\n}\n.dark-theme .article-favorite,\n.dark-theme .article__read-unread {\n  filter: invert(100%);\n}\n.dark-theme .leedvibes-article-content {\n  color: white;\n}\n.dark-theme .event:not(.event--focus):hover,\n.dark-theme .event--focused:not(.event--focus) {\n  background-color: #333;\n}\n.dark-theme .event--focused .article__description::after,\n.dark-theme .event:hover .article__description::after {\n  background-image: linear-gradient(to left, #333 6em, rgba(51, 51, 51, 0) 100%);\n}"]}
\ No newline at end of file
diff --git a/index.html b/index.html
index e9131ea..ff6ccee 100644
--- a/index.html
+++ b/index.html
@@ -30,17 +30,17 @@
     {if="!$myUser"}
         <div class="user-login">
             {if="($configurationManager->get('articleDisplayAnonymous')=='0')"}
-                <h3>{function="_t('YOU_MUST_BE_LOGGED')"}</h3>
-                <p>{function="_t('IF_ADMIN_THEN_CONFIG')"}</p>
+                <img src="images/leed-logo.svg" alt="" class="login-logo">
+                <h1 class="login-title">{function="_t('LEEDVIBES_AUTHENTICATION')"}</h1>
             {/if}
-            <form action="action.php?action=login" class="settings__fields" method="POST">
-                <input type="text" name="login" placeholder="{function="_t('LOGIN')"}"/>
-                <input type="password" name="password" placeholder="{function="_t('PASSWORD')"}"/>
-                <label class="rememberMe">
+            <form action="action.php?action=login" class="login-form" method="POST">
+                <input type="text" name="login" class="login-input" placeholder="{function="_t('LOGIN')"}" autocapitalize="none" autofocus/>
+                <input type="password" name="password" class="login-input" placeholder="{function="_t('PASSWORD')"}"/>
+                <label class="login-remember-me">
                     <input type="checkbox" name="rememberMe" />
                     <span>{function="_t('REMEMBER_ME')"}</span>
                 </label>
-                <input type="submit" value="{function="_t('LEEDVIBES_CONNECTION')"}" />
+                <input type="submit" class="login-submit" value="{function="_t('LEEDVIBES_CONNECTION')"}" />
             </form>
         </div>
     {else}
diff --git a/locale/en.json b/locale/en.json
index de5206b..faa139e 100644
--- a/locale/en.json
+++ b/locale/en.json
@@ -1,6 +1,7 @@
 {
   "LEEDVIBES_ADD_TO_FAVORITES": "Add to favorites",
   "LEEDVIBES_ALL_FEEDS": "All feeds",
+  "LEEDVIBES_AUTHENTICATION": "Authentication",
   "LEEDVIBES_CONNECTION": "Connection",
   "LEEDVIBES_FEED_MARK_AS_READ": "Mark as read all the events from the $1's feed",
   "LEEDVIBES_FOLDER_MARK_AS_READ": "Mark as read all the events from the $1's folder",
diff --git a/locale/fr.json b/locale/fr.json
index d504cfc..f2f8421 100644
--- a/locale/fr.json
+++ b/locale/fr.json
@@ -1,6 +1,7 @@
 {
   "LEEDVIBES_ADD_TO_FAVORITES": "Ajouter aux favoris",
   "LEEDVIBES_ALL_FEEDS": "Tous les flux",
+  "LEEDVIBES_AUTHENTICATION": "Authentification",
   "LEEDVIBES_CONNECTION": "Connexion",
   "LEEDVIBES_FEED_MARK_AS_READ": "Marquer comme lus tous les événements du flux $1",
   "LEEDVIBES_FOLDER_MARK_AS_READ": "Marquer comme lus tous les événements du dossier $1",
diff --git a/sass/style.scss b/sass/style.scss
index 4d535ce..2763143 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -185,7 +185,7 @@ $border-color-active: white;
         color: $sidebar-color;
     }
 
-    .settings__fields {
+    .login-form {
         padding: 20%;
     }
 
@@ -713,6 +713,7 @@ html:not(.no-js) .feed--closed {
 
 .user-login {
     margin: 1em auto;
+    min-width: 250px;
     flex-direction: column;
 }
 
@@ -758,21 +759,53 @@ button.settings-item {
     }
 }
 
-.settings__fields input[type='text'],
-.settings__fields input[type='password'] {
-    min-width: 7em;
-    width: 35%;
+.login-form {
+    width: 100%;
+}
+
+.login-title {
+    margin-bottom: 20px;
+    font-size: 2rem;
+
+    @media($breakpoint-max) {
+        margin-bottom: 10px;
+    }
 }
 
-.settings__fields input[type='text'],
-.settings__fields input[type='password'],
-.settings__fields input[type='submit'] {
+.login-logo {
+    margin-top: 20px;
+    margin-bottom: 40px;
+    width: 100px;
+    filter: invert(100%);
+
+    @media($breakpoint-max) {
+        margin-top: 10px;
+        margin-bottom: 20px;
+        width: 50px;
+    }
+}
+
+.login-input {
+    width: 60%;
+}
+
+.login-input,
+.login-submit {
     display: block;
-    margin: 0.4em auto;
+    margin: 0.4em auto 10px;
     padding: 0.5em;
     color: $sidebar-color-bg-darken;
 }
 
+.login-submit {
+    margin-top: 40px;
+}
+
+.login-remember-me {
+    display: block;
+    margin: 20px 0;
+}
+
 .extra-settings {
     display: flex;
     justify-content: center;