From 7d2cd7b71af290f376d3510ccbe39af7bbc61b12 Mon Sep 17 00:00:00 2001 From: Simounet Date: Sun, 6 Jan 2019 13:42:07 +0100 Subject: [PATCH] Use of CSS Grid on mobile view --- css/style.css | 59 ++++++++++++++++++++++++++++++++--------------- css/style.css.map | 2 +- sass/style.scss | 58 ++++++++++++++++++++++++++++------------------ 3 files changed, 76 insertions(+), 43 deletions(-) diff --git a/css/style.css b/css/style.css index bc36a04..2cfa674 100644 --- a/css/style.css +++ b/css/style.css @@ -748,22 +748,19 @@ html:not(.no-js) .feed--closed { display: none; } -.feed__item img, .article__header .feed-icon { +.feed__item img { + float: left; + margin-left: 1.4em; margin-right: 0.3em; vertical-align: middle; } @media (max-width: 650px) { - .feed__item img, .article__header .feed-icon { + .feed__item img { margin-right: 0.8em; } } -.feed__item img { - float: left; - margin-left: 1.4em; -} - .mark-as-read { padding: 0 0.4rem; font-size: 0.8em; @@ -790,8 +787,11 @@ html:not(.no-js) .feed--closed { @media (max-width: 650px) { .article__header { - display: -ms-flexbox; - display: flex; + display: -ms-grid; + display: grid; + -ms-grid-columns: 40px auto 40px; + grid-template-columns: 40px auto 40px; + grid-template-areas: "favicon site date" "favorite title mark"; -ms-flex-align: center; align-items: center; white-space: inherit; @@ -811,13 +811,26 @@ html:not(.no-js) .feed--closed { @media (max-width: 650px) { .article__header .article__feed-title { - display: none; + width: auto; + grid-area: site; } } +.feed-icon { + margin-right: 0.3em; + vertical-align: middle; + justify-self: center; + grid-area: favicon; +} + @media (max-width: 650px) { - .article__title, .feed-icon { + margin: 0; + } +} + +@media (max-width: 650px) { + .article__title { margin-left: 14%; } } @@ -836,7 +849,7 @@ html:not(.no-js) .feed--closed { @media (max-width: 650px) { .article__title { display: inline-block; - width: 65%; + grid-area: title; } } @@ -902,8 +915,10 @@ html:not(.no-js) .feed--closed { @media (max-width: 650px) { .article__date { - right: 1%; - bottom: 5%; + position: relative; + right: 0; + grid-area: date; + justify-self: right; } } @@ -925,9 +940,12 @@ html:not(.no-js) .feed--closed { @media (max-width: 650px) { .article-favorite { - width: 15%; - height: 100%; - left: 0; + position: relative; + padding: 0; + width: 100%; + right: 0; + grid-area: favorite; + justify-self: left; } } @@ -946,9 +964,12 @@ html:not(.no-js) .feed--closed { @media (max-width: 650px) { .article__read-unread { - padding: 0.9em 0.5em 3em 1em; - width: 15%; + position: relative; + padding: 0; + width: 100%; height: 100%; + grid-area: mark; + justify-self: right; } } diff --git a/css/style.css.map b/css/style.css.map index 768b111..26ea948 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":"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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\nul {\n padding: 0;\n}\n\nli {\n list-style: none;\n}\n\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n.article__content img, .article__content\naudio, .article__content\ncanvas, .article__content\niframe, .article__content\nprogress, .article__content\nvideo {\n display: block;\n margin: 0 auto;\n}\n\nimg[src$=\".svg\"] {\n vertical-align: middle;\n}\n\niframe {\n width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n display: flex;\n flex-wrap: wrap;\n width: 99vw;\n}\n\n@media (max-width: 650px) {\n body {\n display: block;\n width: 100vw;\n }\n}\n\nbutton {\n background-color: transparent;\n border: none;\n}\n\n.error {\n background-color: #c53d3d;\n}\n\n.wrapper {\n flex: 1 1 0;\n min-width: 0;\n min-height: 100vh;\n background-color: #FFF;\n}\n\n@media (max-width: 650px) {\n .wrapper {\n margin-bottom: 0px;\n }\n}\n\n.selected a {\n color: #FFF;\n font-weight: bold;\n}\n\n.notifications {\n margin: 0;\n color: #FFF;\n background-color: #424242;\n}\n\n.notifications__text {\n display: flex;\n padding: 1em 0.5em;\n color: #DDD;\n justify-content: space-between;\n align-items: center;\n}\n\n.folder__button, .mark-as-read, .article-favorite {\n border: 1px dashed transparent;\n}\n\n.folder__button:focus, .mark-as-read:focus, .article-favorite: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[class*=\"__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[class*=\"__item\"],\n[class*=\"__item\"] a {\n color: #fff;\n}\n\n[class*=\"__item\"]:hover, [class*=\"__item\"]:active {\n background-color: #303030;\n}\n\n[class*=\"__item\"].selected {\n border-color: white;\n}\n\n.sidebar-item {\n flex-grow: 1;\n height: 16px;\n /* Favicon's height */\n line-height: 16px;\n overflow: hidden;\n}\n\n@media (max-width: 650px) {\n .folder__button,\n .sidebar-item {\n padding: 12px 0;\n }\n}\n\n.go-top {\n display: inline-block;\n padding: 2px 20px;\n text-align: center;\n background-color: #686868;\n border-radius: 20%;\n}\n\n.feed-add {\n text-align: center;\n}\n\n[data-is-opened=\"false\"] {\n display: none;\n}\n\n.feed-add-title {\n margin: 0 0 1em;\n color: #fff;\n}\n\n.feed-add-url,\n.feed-add-folders {\n width: 80%;\n}\n\n.feed-add-url {\n padding: 0.5em;\n border: none;\n}\n\n.feed-add-folders {\n margin: 1em 0;\n padding: 0.5em 2em;\n}\n\n.sidebar > section {\n margin: 2em auto 3em;\n padding: 0 1em;\n}\n\n.sidebar > section li {\n display: flex;\n color: #fff;\n justify-content: space-between;\n}\n\n.sidebar > section button,\n.feed-add-button {\n padding: 1em 2em;\n color: #fff;\n background-color: #484848;\n}\n\n.sidebar > section button:hover, .sidebar > section button:active, .sidebar > section button:focus,\n.feed-add-button:hover,\n.feed-add-button:active,\n.feed-add-button:focus {\n color: #484848;\n background-color: #DDD;\n}\n\n.feed-add-button {\n margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n position: relative;\n overflow: hidden;\n}\n\n.feeds-list-toggle:before {\n position: absolute;\n width: 15px;\n height: 15px;\n left: 35%;\n top: -20px;\n content: '';\n background-image: url(\"../images/close.svg\");\n transition: transform 0.3s;\n}\n\n.is-opened.feeds-list-toggle:before {\n transform: translate3d(0, 180%, 0);\n}\n\n.feeds-list-toggle__label {\n position: absolute;\n padding: 0.5em 1.5em;\n top: 0;\n left: 0;\n transition: transform 0.3s;\n}\n\n.is-opened .feeds-list-toggle__label {\n transform: translate3d(0, 150%, 0);\n}\n\n#feeds-list[data-is-opened=\"false\"] {\n display: block;\n}\n\n@media (max-width: 650px) {\n #feeds-list[data-is-opened=\"false\"] {\n display: none;\n }\n}\n\n#feeds-list:target {\n display: block;\n}\n\n.folder {\n border-bottom: 0.2em solid #484848;\n}\n\n.folder__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 img {\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, .article__header .feed-icon {\n margin-right: 0.3em;\n vertical-align: middle;\n}\n\n@media (max-width: 650px) {\n .feed__item img, .article__header .feed-icon {\n margin-right: 0.8em;\n }\n}\n\n.feed__item img {\n float: left;\n margin-left: 1.4em;\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: flex;\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 display: none;\n }\n}\n\n@media (max-width: 650px) {\n .article__title,\n .feed-icon {\n margin-left: 14%;\n }\n}\n\n@media (max-width: 650px) {\n .feed-icon ~ .article__title {\n margin-left: 0;\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 width: 65%;\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: 5em;\n color: #424242;\n font-size: 0.9em;\n}\n\n@media (max-width: 650px) {\n .article__date {\n right: 1%;\n bottom: 5%;\n }\n}\n\n.article-favorite {\n position: absolute;\n padding: 0.6em;\n top: 0;\n right: 1.7em;\n opacity: 0.3;\n}\n\n.article-favorite--favorited {\n opacity: 1;\n}\n\n.article-favorite:focus {\n border-color: #424242;\n}\n\n@media (max-width: 650px) {\n .article-favorite {\n width: 15%;\n height: 100%;\n left: 0;\n }\n}\n\n.article__read-unread {\n position: absolute;\n padding: 0.6em 0.3em;\n width: 1.7em;\n top: 0;\n right: 0;\n color: white;\n background-color: transparent;\n border: none;\n opacity: 0.3;\n cursor: pointer;\n}\n\n@media (max-width: 650px) {\n .article__read-unread {\n padding: 0.9em 0.5em 3em 1em;\n width: 15%;\n height: 100%;\n }\n}\n\n.article__read-read {\n opacity: 1;\n}\n\n.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-wrap: break-word;\n}\n\n@media (max-width: 650px) {\n .article__content {\n padding: 0 1rem;\n width: auto;\n }\n}\n\n.article__content a {\n text-decoration: underline;\n}\n\n.event--website-view .article__content {\n width: auto;\n}\n\n.event--website-view .article__content iframe {\n width: 100%;\n}\n\n.article__content--is-opened {\n display: block;\n}\n\n.article__content__infos {\n margin: 1em 0;\n}\n\n.article__content__infos a {\n font-size: 2.8rem;\n line-height: 1;\n}\n\n.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 .article__content__switch-view {\n top: 2.4em;\n right: 4em;\n }\n}\n\n.event--focus .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 margin: 1em auto;\n padding: 0 1em;\n color: #CACACA;\n align-items: center;\n text-align: center;\n}\n\n.user-login {\n flex-direction: column;\n}\n\n.settings-item {\n padding: 0.5em 1.5em;\n min-width: 15px;\n min-height: 15px;\n border-bottom: 0.38462em solid transparent;\n box-sizing: content-box;\n transition: border 0.2s ease-in-out 0s;\n}\n\n.settings-item:hover, .settings-item:active, .settings-item:focus {\n border-color: white;\n}\n\nbutton.settings-item {\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n background-color: transparent;\n}\n\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","// 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@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}\nul {\n padding: 0;\n}\nli {\n list-style: none;\n}\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n max-width: 100%;\n height: auto;\n\n .article__content & {\n display: block;\n margin: 0 auto;\n }\n}\nimg[src$=\".svg\"] {\n vertical-align: middle;\n}\n\niframe {\n width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n display: flex;\n flex-wrap: wrap;\n width: 99vw;\n\n @media($breakpoint-max) {\n display: block;\n width: 100vw;\n }\n}\n\nbutton {\n background-color: transparent;\n border: none;\n}\n\n.error {\n background-color: $error-color;\n}\n\n.wrapper {\n flex: 1 1 0;\n min-width: 0;\n min-height: 100vh;\n background-color: #FFF;\n\n @media($breakpoint-max) {\n // Avoid extra margin-bottom when all\n // the content is read and infinite-scroll-end\n // shows up\n margin-bottom: 0px;\n }\n}\n.selected a {\n color: #FFF;\n font-weight: bold;\n}\n\n.notifications {\n margin: 0;\n color: #FFF;\n background-color: $sidebar-color-bg;\n}\n\n.notifications__text {\n display: flex;\n padding: 1em 0.5em;\n color: $feed-bgc-used;\n justify-content: space-between;\n align-items: center;\n}\n\n%text-color-dark {\n color: #000;\n}\n\n%button-focused {\n border: 1px dashed transparent;\n\n &:focus {\n border-color: $feed-bgc-used;\n }\n}\n%overflow-sidebar {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* FEED */\n$entry-space: 0.5em;\n.event {\n position: relative;\n padding: 0 $entry-space;\n border-bottom: 0.1em solid #D9D9D9;\n\n &:not(.event--focus):hover,\n &--focused:not(.event--focus) {\n background-color: $feed-bgc-used;\n }\n\n a {\n color: $feed-entry-color;\n }\n}\n\n.event--new-last {\n border-bottom-color: $sidebar-color-bg;\n border-width: 4px;\n}\n\n/* SIDEBAR */\n$border-base: em( 5px ) solid transparent;\n$border-color-active: white;\n\n.sidebar {\n flex: 0 0 em( 300px );\n font-size: 0.9em;\n overflow: hidden;\n\n a {\n color: $sidebar-color;\n }\n\n .settings__fields {\n padding: 20%;\n }\n\n}\n\n[class*=\"__item\"] {\n display: flex;\n position: relative;\n $padding : 0.5em;\n padding-bottom: $padding;\n padding-top: $padding;\n border-left: $border-base;\n\n &,\n a {\n color: $sidebar-color;\n }\n\n &:hover,\n &:active {\n background-color: $sidebar-color-bg-darken;\n }\n\n &.selected {\n border-color: $border-color-active;\n }\n}\n\n.sidebar-item {\n flex-grow: 1;\n height: 16px; /* Favicon's height */\n line-height: 16px;\n overflow: hidden;\n}\n\n.folder__button,\n.sidebar-item {\n @media($breakpoint-max) {\n padding: 12px 0;\n }\n}\n\n.sidebar-item-label {\n @extend %overflow-sidebar;\n}\n\n.go-top {\n display: inline-block;\n padding: 2px 20px;\n text-align: center;\n background-color: $sidebar-color-alt;\n border-radius: 20%;\n}\n\n.feed-add {\n text-align: center;\n}\n\n[data-is-opened=\"false\"] {\n display: none;\n}\n\n.feed-add-title {\n margin: 0 0 1em;\n color: $sidebar-color;\n}\n\n.feed-add-url,\n.feed-add-folders {\n width: 80%;\n}\n\n.feed-add-url {\n padding: 0.5em;\n border: none;\n}\n\n.feed-add-folders {\n margin: 1em 0;\n padding: 0.5em 2em;\n}\n\n.sidebar > section {\n margin: 2em auto 3em;\n padding: 0 1em;\n\n li {\n display: flex;\n color: $sidebar-color;\n justify-content: space-between;\n }\n}\n\n.sidebar > section button,\n.feed-add-button {\n padding: 1em 2em;\n color: $sidebar-color;\n background-color: $folder-separator;\n\n &:hover,\n &:active,\n &:focus {\n color: $folder-separator;\n background-color: $feed-bgc-used;\n }\n}\n\n.feed-add-button {\n margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n position: relative;\n overflow: hidden;\n}\n$feeds-list-toggle-transition: transform 0.3s;\n.feeds-list-toggle:before {\n position: absolute;\n width: 15px;\n height: 15px;\n left: 35%;\n top: -20px;\n content: '';\n background-image: url( '../images/close.svg' );\n transition: $feeds-list-toggle-transition;\n\n @at-root .is-opened#{&} {\n transform: translate3d(0, 180%, 0);\n }\n}\n\n.feeds-list-toggle__label {\n position: absolute;\n padding: $settings-padding;\n top: 0;\n left: 0;\n transition: $feeds-list-toggle-transition;\n\n .is-opened & {\n transform: translate3d(0, 150%, 0);\n }\n}\n\n#feeds-list {\n &[data-is-opened=\"false\"] {\n display: block;\n\n @media($breakpoint-max) {\n display: none;\n }\n }\n\n &:target {\n display: block;\n }\n}\n\n.folder {\n border-bottom: 0.2em solid $folder-separator;\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 img {\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%img-vertical-align {\n margin-right: 0.3em;\n vertical-align: middle;\n\n @media($breakpoint-max) {\n margin-right: 0.8em;\n }\n}\n\n.feed__item img {\n float: left;\n margin-left: 1.4em;\n\n @extend %img-vertical-align;\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: flex;\n align-items: center;\n white-space: inherit;\n min-height: 4em;\n }\n\n .feed-icon {\n @extend %img-vertical-align;\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 display: none;\n }\n }\n}\n\n.article__title,\n.feed-icon {\n @media($breakpoint-max) {\n margin-left: 14%;\n }\n}\n\n.feed-icon ~ .article__title {\n @media($breakpoint-max) {\n margin-left: 0;\n }\n}\n\n.article__title {\n display: inline;\n font-size: 1em;\n\n @media($breakpoint-max) {\n display: inline-block;\n width: 65%;\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: 5em;\n color: $feed-entry-color;\n font-size: 0.9em;\n\n @media( $breakpoint-max ) {\n right: 1%;\n bottom: 5%;\n }\n}\n\n$opacity-low: 0.3;\n$position-top-on-break: 30px;\n$article-action-padding: 0.6em;\n.article-favorite {\n position: absolute;\n padding: $article-action-padding;\n top: 0;\n right: 1.7em;\n opacity: $opacity-low;\n @extend %button-focused;\n\n &--favorited {\n opacity: 1;\n }\n\n &:focus {\n border-color: $sidebar-color-bg;\n }\n\n @media( $breakpoint-max ) {\n width: 15%;\n height: 100%;\n left: 0;\n }\n}\n\n.article__read-unread {\n position: absolute;\n padding: $article-action-padding 0.3em;\n width: 1.7em;\n top: 0;\n right: 0;\n color: white;\n background-color: transparent;\n border: none;\n opacity: $opacity-low;\n cursor: pointer;\n\n @media( $breakpoint-max ) {\n padding: 0.9em 0.5em 3em 1em;\n width: 15%;\n height: 100%;\n }\n}\n\n.article__read-read {\n opacity: 1;\n}\n\n.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-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 .event--website-view & {\n width: auto;\n\n iframe {\n width: 100%;\n }\n }\n}\n\n.article__content--is-opened {\n display: block;\n}\n\n.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.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 margin: 1em auto;\n padding: 0 1em;\n color: #CACACA;\n align-items: center;\n text-align: center;\n}\n\n.user-login {\n flex-direction: column;\n}\n\n.settings-item {\n padding: $settings-padding;\n min-width: 15px;\n min-height: 15px;\n border-bottom: $border-base;\n box-sizing: content-box;\n transition: border 0.2s ease-in-out 0s;\n\n &:hover,\n &:active,\n &:focus {\n border-color: $border-color-active;\n }\n}\n\nbutton.settings-item {\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n background-color: transparent;\n}\n\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","@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":"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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\nul {\n padding: 0;\n}\n\nli {\n list-style: none;\n}\n\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n.article__content img, .article__content\naudio, .article__content\ncanvas, .article__content\niframe, .article__content\nprogress, .article__content\nvideo {\n display: block;\n margin: 0 auto;\n}\n\nimg[src$=\".svg\"] {\n vertical-align: middle;\n}\n\niframe {\n width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n display: flex;\n flex-wrap: wrap;\n width: 99vw;\n}\n\n@media (max-width: 650px) {\n body {\n display: block;\n width: 100vw;\n }\n}\n\nbutton {\n background-color: transparent;\n border: none;\n}\n\n.error {\n background-color: #c53d3d;\n}\n\n.wrapper {\n flex: 1 1 0;\n min-width: 0;\n min-height: 100vh;\n background-color: #FFF;\n}\n\n@media (max-width: 650px) {\n .wrapper {\n margin-bottom: 0px;\n }\n}\n\n.selected a {\n color: #FFF;\n font-weight: bold;\n}\n\n.notifications {\n margin: 0;\n color: #FFF;\n background-color: #424242;\n}\n\n.notifications__text {\n display: flex;\n padding: 1em 0.5em;\n color: #DDD;\n justify-content: space-between;\n align-items: center;\n}\n\n.folder__button, .mark-as-read, .article-favorite {\n border: 1px dashed transparent;\n}\n\n.folder__button:focus, .mark-as-read:focus, .article-favorite: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[class*=\"__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[class*=\"__item\"],\n[class*=\"__item\"] a {\n color: #fff;\n}\n\n[class*=\"__item\"]:hover, [class*=\"__item\"]:active {\n background-color: #303030;\n}\n\n[class*=\"__item\"].selected {\n border-color: white;\n}\n\n.sidebar-item {\n flex-grow: 1;\n height: 16px;\n /* Favicon's height */\n line-height: 16px;\n overflow: hidden;\n}\n\n@media (max-width: 650px) {\n .folder__button,\n .sidebar-item {\n padding: 12px 0;\n }\n}\n\n.go-top {\n display: inline-block;\n padding: 2px 20px;\n text-align: center;\n background-color: #686868;\n border-radius: 20%;\n}\n\n.feed-add {\n text-align: center;\n}\n\n[data-is-opened=\"false\"] {\n display: none;\n}\n\n.feed-add-title {\n margin: 0 0 1em;\n color: #fff;\n}\n\n.feed-add-url,\n.feed-add-folders {\n width: 80%;\n}\n\n.feed-add-url {\n padding: 0.5em;\n border: none;\n}\n\n.feed-add-folders {\n margin: 1em 0;\n padding: 0.5em 2em;\n}\n\n.sidebar > section {\n margin: 2em auto 3em;\n padding: 0 1em;\n}\n\n.sidebar > section li {\n display: flex;\n color: #fff;\n justify-content: space-between;\n}\n\n.sidebar > section button,\n.feed-add-button {\n padding: 1em 2em;\n color: #fff;\n background-color: #484848;\n}\n\n.sidebar > section button:hover, .sidebar > section button:active, .sidebar > section button:focus,\n.feed-add-button:hover,\n.feed-add-button:active,\n.feed-add-button:focus {\n color: #484848;\n background-color: #DDD;\n}\n\n.feed-add-button {\n margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n position: relative;\n overflow: hidden;\n}\n\n.feeds-list-toggle:before {\n position: absolute;\n width: 15px;\n height: 15px;\n left: 35%;\n top: -20px;\n content: '';\n background-image: url(\"../images/close.svg\");\n transition: transform 0.3s;\n}\n\n.is-opened.feeds-list-toggle:before {\n transform: translate3d(0, 180%, 0);\n}\n\n.feeds-list-toggle__label {\n position: absolute;\n padding: 0.5em 1.5em;\n top: 0;\n left: 0;\n transition: transform 0.3s;\n}\n\n.is-opened .feeds-list-toggle__label {\n transform: translate3d(0, 150%, 0);\n}\n\n#feeds-list[data-is-opened=\"false\"] {\n display: block;\n}\n\n@media (max-width: 650px) {\n #feeds-list[data-is-opened=\"false\"] {\n display: none;\n }\n}\n\n#feeds-list:target {\n display: block;\n}\n\n.folder {\n border-bottom: 0.2em solid #484848;\n}\n\n.folder__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 img {\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 40px;\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 .feed-icon ~ .article__title {\n margin-left: 0;\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: 5em;\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 position: absolute;\n padding: 0.6em;\n top: 0;\n right: 1.7em;\n opacity: 0.3;\n}\n\n.article-favorite--favorited {\n opacity: 1;\n}\n\n.article-favorite:focus {\n border-color: #424242;\n}\n\n@media (max-width: 650px) {\n .article-favorite {\n position: relative;\n padding: 0;\n width: 100%;\n right: 0;\n grid-area: favorite;\n justify-self: left;\n }\n}\n\n.article__read-unread {\n position: absolute;\n padding: 0.6em 0.3em;\n width: 1.7em;\n top: 0;\n right: 0;\n color: white;\n background-color: transparent;\n border: none;\n opacity: 0.3;\n cursor: pointer;\n}\n\n@media (max-width: 650px) {\n .article__read-unread {\n position: relative;\n padding: 0;\n width: 100%;\n height: 100%;\n grid-area: mark;\n justify-self: right;\n }\n}\n\n.article__read-read {\n opacity: 1;\n}\n\n.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-wrap: break-word;\n}\n\n@media (max-width: 650px) {\n .article__content {\n padding: 0 1rem;\n width: auto;\n }\n}\n\n.article__content a {\n text-decoration: underline;\n}\n\n.event--website-view .article__content {\n width: auto;\n}\n\n.event--website-view .article__content iframe {\n width: 100%;\n}\n\n.article__content--is-opened {\n display: block;\n}\n\n.article__content__infos {\n margin: 1em 0;\n}\n\n.article__content__infos a {\n font-size: 2.8rem;\n line-height: 1;\n}\n\n.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 .article__content__switch-view {\n top: 2.4em;\n right: 4em;\n }\n}\n\n.event--focus .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 margin: 1em auto;\n padding: 0 1em;\n color: #CACACA;\n align-items: center;\n text-align: center;\n}\n\n.user-login {\n flex-direction: column;\n}\n\n.settings-item {\n padding: 0.5em 1.5em;\n min-width: 15px;\n min-height: 15px;\n border-bottom: 0.38462em solid transparent;\n box-sizing: content-box;\n transition: border 0.2s ease-in-out 0s;\n}\n\n.settings-item:hover, .settings-item:active, .settings-item:focus {\n border-color: white;\n}\n\nbutton.settings-item {\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n background-color: transparent;\n}\n\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","// 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@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}\nul {\n padding: 0;\n}\nli {\n list-style: none;\n}\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n max-width: 100%;\n height: auto;\n\n .article__content & {\n display: block;\n margin: 0 auto;\n }\n}\nimg[src$=\".svg\"] {\n vertical-align: middle;\n}\n\niframe {\n width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n display: flex;\n flex-wrap: wrap;\n width: 99vw;\n\n @media($breakpoint-max) {\n display: block;\n width: 100vw;\n }\n}\n\nbutton {\n background-color: transparent;\n border: none;\n}\n\n.error {\n background-color: $error-color;\n}\n\n.wrapper {\n flex: 1 1 0;\n min-width: 0;\n min-height: 100vh;\n background-color: #FFF;\n\n @media($breakpoint-max) {\n // Avoid extra margin-bottom when all\n // the content is read and infinite-scroll-end\n // shows up\n margin-bottom: 0px;\n }\n}\n.selected a {\n color: #FFF;\n font-weight: bold;\n}\n\n.notifications {\n margin: 0;\n color: #FFF;\n background-color: $sidebar-color-bg;\n}\n\n.notifications__text {\n display: flex;\n padding: 1em 0.5em;\n color: $feed-bgc-used;\n justify-content: space-between;\n align-items: center;\n}\n\n%text-color-dark {\n color: #000;\n}\n\n%button-focused {\n border: 1px dashed transparent;\n\n &:focus {\n border-color: $feed-bgc-used;\n }\n}\n%overflow-sidebar {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* FEED */\n$entry-space: 0.5em;\n.event {\n position: relative;\n padding: 0 $entry-space;\n border-bottom: 0.1em solid #D9D9D9;\n\n &:not(.event--focus):hover,\n &--focused:not(.event--focus) {\n background-color: $feed-bgc-used;\n }\n\n a {\n color: $feed-entry-color;\n }\n}\n\n.event--new-last {\n border-bottom-color: $sidebar-color-bg;\n border-width: 4px;\n}\n\n/* SIDEBAR */\n$border-base: em( 5px ) solid transparent;\n$border-color-active: white;\n\n.sidebar {\n flex: 0 0 em( 300px );\n font-size: 0.9em;\n overflow: hidden;\n\n a {\n color: $sidebar-color;\n }\n\n .settings__fields {\n padding: 20%;\n }\n\n}\n\n[class*=\"__item\"] {\n display: flex;\n position: relative;\n $padding : 0.5em;\n padding-bottom: $padding;\n padding-top: $padding;\n border-left: $border-base;\n\n &,\n a {\n color: $sidebar-color;\n }\n\n &:hover,\n &:active {\n background-color: $sidebar-color-bg-darken;\n }\n\n &.selected {\n border-color: $border-color-active;\n }\n}\n\n.sidebar-item {\n flex-grow: 1;\n height: 16px; /* Favicon's height */\n line-height: 16px;\n overflow: hidden;\n}\n\n.folder__button,\n.sidebar-item {\n @media($breakpoint-max) {\n padding: 12px 0;\n }\n}\n\n.sidebar-item-label {\n @extend %overflow-sidebar;\n}\n\n.go-top {\n display: inline-block;\n padding: 2px 20px;\n text-align: center;\n background-color: $sidebar-color-alt;\n border-radius: 20%;\n}\n\n.feed-add {\n text-align: center;\n}\n\n[data-is-opened=\"false\"] {\n display: none;\n}\n\n.feed-add-title {\n margin: 0 0 1em;\n color: $sidebar-color;\n}\n\n.feed-add-url,\n.feed-add-folders {\n width: 80%;\n}\n\n.feed-add-url {\n padding: 0.5em;\n border: none;\n}\n\n.feed-add-folders {\n margin: 1em 0;\n padding: 0.5em 2em;\n}\n\n.sidebar > section {\n margin: 2em auto 3em;\n padding: 0 1em;\n\n li {\n display: flex;\n color: $sidebar-color;\n justify-content: space-between;\n }\n}\n\n.sidebar > section button,\n.feed-add-button {\n padding: 1em 2em;\n color: $sidebar-color;\n background-color: $folder-separator;\n\n &:hover,\n &:active,\n &:focus {\n color: $folder-separator;\n background-color: $feed-bgc-used;\n }\n}\n\n.feed-add-button {\n margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n position: relative;\n overflow: hidden;\n}\n$feeds-list-toggle-transition: transform 0.3s;\n.feeds-list-toggle:before {\n position: absolute;\n width: 15px;\n height: 15px;\n left: 35%;\n top: -20px;\n content: '';\n background-image: url( '../images/close.svg' );\n transition: $feeds-list-toggle-transition;\n\n @at-root .is-opened#{&} {\n transform: translate3d(0, 180%, 0);\n }\n}\n\n.feeds-list-toggle__label {\n position: absolute;\n padding: $settings-padding;\n top: 0;\n left: 0;\n transition: $feeds-list-toggle-transition;\n\n .is-opened & {\n transform: translate3d(0, 150%, 0);\n }\n}\n\n#feeds-list {\n &[data-is-opened=\"false\"] {\n display: block;\n\n @media($breakpoint-max) {\n display: none;\n }\n }\n\n &:target {\n display: block;\n }\n}\n\n.folder {\n border-bottom: 0.2em solid $folder-separator;\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 img {\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 40px;\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.feed-icon ~ .article__title {\n @media($breakpoint-max) {\n margin-left: 0;\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: 5em;\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$opacity-low: 0.3;\n$position-top-on-break: 30px;\n$article-action-padding: 0.6em;\n.article-favorite {\n position: absolute;\n padding: $article-action-padding;\n top: 0;\n right: 1.7em;\n opacity: $opacity-low;\n @extend %button-focused;\n\n &--favorited {\n opacity: 1;\n }\n\n &:focus {\n border-color: $sidebar-color-bg;\n }\n\n @media( $breakpoint-max ) {\n position: relative;\n padding: 0;\n width: 100%;\n right: 0;\n grid-area: favorite;\n justify-self: left;\n }\n}\n\n.article__read-unread {\n position: absolute;\n padding: $article-action-padding 0.3em;\n width: 1.7em;\n top: 0;\n right: 0;\n color: white;\n background-color: transparent;\n border: none;\n opacity: $opacity-low;\n cursor: pointer;\n\n @media( $breakpoint-max ) {\n position: relative;\n padding: 0;\n width: 100%;\n height: 100%;\n grid-area: mark;\n justify-self: right;\n }\n}\n\n.article__read-read {\n opacity: 1;\n}\n\n.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-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 .event--website-view & {\n width: auto;\n\n iframe {\n width: 100%;\n }\n }\n}\n\n.article__content--is-opened {\n display: block;\n}\n\n.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.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 margin: 1em auto;\n padding: 0 1em;\n color: #CACACA;\n align-items: center;\n text-align: center;\n}\n\n.user-login {\n flex-direction: column;\n}\n\n.settings-item {\n padding: $settings-padding;\n min-width: 15px;\n min-height: 15px;\n border-bottom: $border-base;\n box-sizing: content-box;\n transition: border 0.2s ease-in-out 0s;\n\n &:hover,\n &:active,\n &:focus {\n border-color: $border-color-active;\n }\n}\n\nbutton.settings-item {\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n background-color: transparent;\n}\n\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","@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/sass/style.scss b/sass/style.scss index 78c6a51..468f046 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -364,7 +364,9 @@ html:not(.no-js) .feed--closed { display: none; } -%img-vertical-align { +.feed__item img { + float: left; + margin-left: 1.4em; margin-right: 0.3em; vertical-align: middle; @@ -373,13 +375,6 @@ html:not(.no-js) .feed--closed { } } -.feed__item img { - float: left; - margin-left: 1.4em; - - @extend %img-vertical-align; -} - .mark-as-read { padding: 0 0.4rem; font-size: 0.8em; @@ -403,16 +398,14 @@ html:not(.no-js) .feed--closed { } @media($breakpoint-max) { - display: flex; + display: grid; + grid-template-columns: 40px auto 40px; + grid-template-areas: "favicon site date" "favorite title mark"; align-items: center; white-space: inherit; min-height: 4em; } - .feed-icon { - @extend %img-vertical-align; - } - .article__feed-title { display: inline-block; width: 10%; @@ -423,13 +416,24 @@ html:not(.no-js) .feed--closed { vertical-align: middle; @media($breakpoint-max) { - display: none; + width: auto; + grid-area: site; } } } -.article__title, .feed-icon { + margin-right: 0.3em; + vertical-align: middle; + justify-self: center; + grid-area: favicon; + + @media($breakpoint-max) { + margin: 0; + } +} + +.article__title { @media($breakpoint-max) { margin-left: 14%; } @@ -447,7 +451,7 @@ html:not(.no-js) .feed--closed { @media($breakpoint-max) { display: inline-block; - width: 65%; + grid-area:title; } [class~="event--read"] & a { @@ -504,8 +508,10 @@ html:not(.no-js) .feed--closed { font-size: 0.9em; @media( $breakpoint-max ) { - right: 1%; - bottom: 5%; + position: relative; + right: 0; + grid-area: date; + justify-self: right; } } @@ -529,9 +535,12 @@ $article-action-padding: 0.6em; } @media( $breakpoint-max ) { - width: 15%; - height: 100%; - left: 0; + position: relative; + padding: 0; + width: 100%; + right: 0; + grid-area: favorite; + justify-self: left; } } @@ -548,9 +557,12 @@ $article-action-padding: 0.6em; cursor: pointer; @media( $breakpoint-max ) { - padding: 0.9em 0.5em 3em 1em; - width: 15%; + position: relative; + padding: 0; + width: 100%; height: 100%; + grid-area: mark; + justify-self: right; } }