aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
Diffstat (limited to 'vnext')
-rw-r--r--vnext/package.json1
-rw-r--r--vnext/src/App.js12
-rw-r--r--vnext/src/components/Header.js2
-rw-r--r--vnext/src/components/Message.css193
-rw-r--r--vnext/src/components/Message.js2
-rw-r--r--vnext/src/index.js2
-rw-r--r--vnext/src/style/main.css920
-rw-r--r--vnext/src/views/index.html43
-rw-r--r--vnext/webpack.config.js3
-rw-r--r--vnext/yarn.lock323
10 files changed, 675 insertions, 826 deletions
diff --git a/vnext/package.json b/vnext/package.json
index ead8a09f..3a54831d 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -41,6 +41,7 @@
"mini-css-extract-plugin": "^0.4.5",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
+ "postcss-preset-env": "^6.4.0",
"prop-types": "^15.6.2",
"react-router-prop-types": "^1.0.4",
"react-test-renderer": "^16.6.3",
diff --git a/vnext/src/App.js b/vnext/src/App.js
index a74934ab..6d254d14 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -150,7 +150,19 @@ export default class App extends React.Component {
<Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} />
</Switch>
</section>
+ <aside id="sidebar">
+ SIDESIDESIDE
+ </aside>
</div>
+ <div id="footer">
+ <div id="footer-right"> &middot;
+ <a href="/help/contacts" rel="nofollow">Contacts</a> &middot;
+ <a href="/help/tos" rel="nofollow">TOS</a>
+ </div>
+ <div id="footer-left">juick.com &copy; 2008-2018
+ <br />
+ </div>
+ </div>
</>
</Router>
);
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 69477c16..43b4a676 100644
--- a/vnext/src/components/Header.js
+++ b/vnext/src/components/Header.js
@@ -66,7 +66,7 @@ export default class Header extends React.Component {
this.wScrollBefore = this.wScrollCurrent;
}
render() {
- return (<header ref={this.header}>{this.props.children}</header>);
+ return (<header id="header" ref={this.header}>{this.props.children}</header>);
}
}
diff --git a/vnext/src/components/Message.css b/vnext/src/components/Message.css
new file mode 100644
index 00000000..291ca562
--- /dev/null
+++ b/vnext/src/components/Message.css
@@ -0,0 +1,193 @@
+article {
+ background: #fff;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
+ line-height: 140%;
+ margin-bottom: 10px;
+ padding: 20px;
+}
+article time {
+ color: #999;
+ font-size: 10pt;
+}
+article p {
+ clear: left;
+ margin: 5px 0 15px 0;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+article .ir {
+ text-align: center;
+}
+article .ir a {
+ cursor: zoom-in;
+ display: block;
+}
+article .ir img {
+ max-width: 100%;
+}
+article > nav.l,
+.msg-cont > nav.l {
+ border-top: 1px solid #eee;
+ display: flex;
+ justify-content: space-around;
+ font-size: 10pt;
+}
+article > nav.l a,
+.msg-cont > nav.l a {
+ color: #888;
+ margin-right: 15px;
+}
+article .likes {
+ padding-left: 20px;
+}
+article .replies {
+ margin-left: 18px;
+}
+article .tags {
+ margin-top: 3px;
+}
+.msg-tags {
+ margin-top: 12px;
+ min-height: 1px;
+}
+article .tags > a,
+.badge,
+.msg-tags > a {
+ background: #eee;
+ border: 1px solid #eee;
+ color: #888;
+ display: inline-block;
+ font-size: 10pt;
+ margin-bottom: 5px;
+ margin-right: 5px;
+ padding: 0 10px;
+}
+.l .msg-button {
+ align-items: center;
+ display: flex;
+ flex-basis: 0;
+ flex-direction: column;
+ flex-grow: 1;
+ padding-top: 12px;
+}
+.l .msg-button-icon {
+ font-weight: bold;
+}
+.msgthread {
+ margin-bottom: 0;
+}
+.msg-avatar {
+ float: left;
+ max-height: 48px;
+ margin-right: 10px;
+ max-width: 48px;
+}
+.msg-avatar img {
+ max-height: 48px;
+ vertical-align: top;
+ max-width: 48px;
+}
+.msg-cont {
+ background: #FFF;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
+ line-height: 140%;
+ margin-bottom: 12px;
+ padding: 20px;
+ width: 640px;
+}
+.reply-new .msg-cont {
+ border-right: 5px solid #0C0;
+}
+.msg-ts {
+ font-size: small;
+ vertical-align: top;
+}
+.msg-ts,
+.msg-ts > a {
+ color: #999;
+}
+.msg-txt {
+ clear: both;
+ margin: 0 0 12px;
+ padding-top: 10px;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+.msg-media {
+ text-align: center;
+}
+.msg-links {
+ color: #999;
+ font-size: small;
+ margin: 5px 0 0 0;
+}
+.msg-comments {
+ color: #AAA;
+ font-size: small;
+ margin-top: 10px;
+ overflow: hidden;
+ text-indent: 10px;
+}
+.ta-wrapper {
+ border: 1px solid #DDD;
+ display: flex;
+ flex-grow: 1;
+}
+.msg-comment {
+ display: flex;
+ width: 100%;
+ margin-top: 10px;
+}
+.msg-comment-hidden {
+ display: none;
+}
+.msg-comment textarea {
+ border: 0;
+ flex-grow: 1;
+ outline: none !important;
+ padding: 4px;
+ resize: vertical;
+ vertical-align: top;
+}
+.attach-photo {
+ cursor: pointer;
+}
+.attach-photo-active {
+ color: green;
+}
+.msg-comment input {
+ align-self: flex-start;
+ background: #EEE;
+ border: 1px solid #CCC;
+ color: #999;
+ margin: 0 0 0 6px;
+ position: sticky;
+ top: 70px;
+ vertical-align: top;
+ width: 50px;
+}
+.msg-recomms {
+ color: #AAA;
+ font-size: small;
+ margin-top: 10px;
+ overflow: hidden;
+ text-indent: 10px;
+}
+#replies .msg-txt,
+#private-messages .msg-txt {
+ margin: 0;
+}
+.title2 {
+ background: #fff;
+ margin: 20px 0;
+ padding: 10px 20px;
+ width: 640px;
+}
+.title2-right {
+ float: right;
+ line-height: 24px;
+}
+#content .title2 h2 {
+ font-size: x-large;
+ margin: 0;
+}
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index f303d5eb..aed2a9b1 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -9,6 +9,8 @@ import Avatar from './Avatar';
import { format } from '../utils/embed';
+import './Message.css';
+
const Message = React.memo(({ data, visitor, children, ...rest }) => {
return (
<div className="msg-cont">
diff --git a/vnext/src/index.js b/vnext/src/index.js
index d48d433a..74a332fd 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -30,4 +30,4 @@ const JuickApp = () => (
</Suspense>
);
-ReactDOM.render(<JuickApp />, document.getElementById('body'));
+ReactDOM.render(<JuickApp />, document.getElementById('app'));
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 29a8c374..595222ee 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -1,158 +1,105 @@
-/* #region generic */
+@custom-media --viewport-desktop (width >=62.5rem);
+:root {
+ --main-width: 960px;
+}
-html,
-body,
-div,
-h1,
-h2,
-ul,
-li,
-p,
-form,
-input,
-textarea,
-pre {
+html, body, div, h1, h2, ul, li, p, form, input, textarea, pre {
margin: 0;
padding: 0;
}
-html,
-input,
-textarea,
-button {
+
+textarea {
+ overflow: auto;
+}
+
+html, input, textarea {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 12pt;
-webkit-font-smoothing: subpixel-antialiased;
}
-h1,
-h2 {
+
+h1, h2 {
font-weight: normal;
}
+
ul {
list-style-type: none;
}
+
a {
color: #069;
text-decoration: none;
}
-img,
-hr {
+
+img, hr {
border: none;
}
-hr {
- background: #CCC;
- height: 1px;
- margin: 10px 0;
-}
-pre {
- background: #222;
- color: #0f0;
- overflow-x: auto;
- padding: 6px;
- white-space: pre;
-}
-pre::selection {
- background: #0f0;
- color: #222;
-}
-pre::-moz-selection {
- background: #0f0;
- color: #222;
-}
-.u {
- text-decoration: underline;
-}
-/* #endregion */
+#app {
+ background: #fdfdfe;
+ display: grid;
+ grid-template-areas: "header" "content" "footer";
+ grid-template-columns: 1fr;
+ grid-template-rows: auto minmax(1fr, auto) auto;
+ min-height: 100vh;
+ font: -apple-system-body;
+ font-family: -apple-system, Segoe UI;
+ transition: margin-left 0.4s;
+}
-/* #region overall layout */
+#header {
+ grid-area: header;
+ background: #fff;
+ border-bottom: 1px solid #ccc;
+}
-html {
- background: #f8f8f8;
+#sidebar {
+ border-right: 1px solid #ccc;
color: #222;
-}
-#content {
- margin: 0 auto;
- width: 728px;
- margin-top: 62px;
-}
-noscript article {
- background-image: url("matrix.jpg");
- background-color: #222;
- background-size: cover;
- color: #fff;
- min-height: 480px;
-}
-*::selection {
- background: #006699;
- color: #fff;
-}
-#body > header {
+ transition: width 0.4s;
position: fixed;
+ width: 0;
top: 0;
- width: 100%;
- z-index: 10;
- transition-duration: 0.4s;
- transition-timing-function: ease-in-out;
- transition-property: transform;
-}
-@supports (backdrop-filter: blur(10px)) {
- body > header--background {
- background: rgba(255, 255, 255, 0.8);
- backdrop-filter: blur(10px);
- }
-}
-#header_wrapper {
- margin: 0 auto;
- width: 1000px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
- padding: 4px;
+ left: 0;
+ overflow-x: hidden;
+ height: 100%;
+ z-index: 1;
}
-.header--background {
- box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
- background: #fff;
+
+.nav_content {
+ padding: 10px;
}
-.header--hidden {
- transform: translateY(-100%);
+
+#wrapper {
+ background: #fefdfe;
+ grid-area: content;
+ height: 100%;
+ padding: 10px;
}
+
#footer {
- color: #999;
- font-size: 10pt;
- margin: 40px;
- padding: 10px 0;
+ grid-area: footer;
+ background: #f8f8f8;
+ border-top: 1px solid #ccc;
+ color: #222;
+ padding: 10px;
}
-@media screen and (max-width: 850px) {
- html {
- text-size-adjust: 100%;
- }
- #body,
- #topwrapper,
- #footer {
- margin: 0 auto;
- min-width: 310px;
- width: auto;
- }
- #body > header {
- margin-bottom: 15px;
- }
- #content {
- margin: 52px auto 0;
- }
+.desktop {
+ display: none;
}
-/* #endregion */
-
-/* #region header internals */
+.card {
+ padding: 6px 24px;
+}
#logo {
height: 36px;
width: 110px;
}
+
#logo a {
- background: url("logo@2x.png") no-repeat;
+ background: url("//i.juick.com/logo.png") no-repeat;
background-size: cover;
border: 0;
display: block;
@@ -162,718 +109,89 @@ noscript article {
white-space: nowrap;
width: 110px;
}
-#global {
- display: flex;
-}
-#global a {
- color: #888;
- display: inline-block;
- font-size: 13pt;
- padding: 14px 6px;
-}
-#global li {
- display: inline-block;
-}
-#ctitle a {
- padding: 14px;
-}
-#global a:hover,
-#ctitle a:hover,
-.l a:hover {
- color: #069;
- cursor: pointer;
-}
-#search input {
- background: #FFF;
- border: 1px solid #ccc;
- outline: none !important;
- padding: 4px;
- -webkit-appearance: none;
- border-radius: 0;
-}
-
-/* #endregion */
-
-/* #region left column internals */
-
-.toolbar {
- border-top: 1px solid #CCC;
-}
#ctitle {
+ display: flex;
font-size: 14pt;
}
+
#ctitle img {
margin-right: 5px;
vertical-align: middle;
- width: 48px;
-}
-#ustats li {
- font-size: 10pt;
- margin: 3px 0;
-}
-#column table.iread {
- width: 100%;
-}
-#column table.iread td {
- text-align: center;
+ max-width: 48px;
+ max-height: 48px;
}
-#column table.iread img {
- height: 48px;
- width: 48px;
-}
-
-/* #endregion */
-
-/* #region main content */
-#content > p,
-#content > h1,
-#content > h2,
-#minimal_content > p,
-#minimal_content > h1,
-#minimal_content > h2 {
- margin: 1em 0;
-}
-.page {
- background: #eee;
- padding: 6px;
- text-align: center;
-}
-
-.page a {
- color: #888;
-}
-
-/* #endregion */
-
-/* #region article, message internals */
-article,
-.msg-cont {
- background: #fff;
- box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
- line-height: 140%;
- margin-bottom: 10px;
- padding: 20px;
-}
-article time,
-.msg-cont time {
- color: #999;
- font-size: 10pt;
-}
-article p,
-.msg-cont p {
- clear: left;
- margin: 5px 0 15px 0;
- word-wrap: break-word;
- overflow-wrap: break-word;
-}
-article .ir,
-.msg-cont .ir {
- text-align: center;
-}
-article .ir a,
-.msg-cont .ir a {
- cursor: zoom-in;
- display: block;
-}
-article .ir img,
-.msg-cont .ir img {
- max-width: 100%;
-}
-article > nav.l,
-.msg-cont > nav.l {
- border-top: 1px solid #eee;
+#global {
display: flex;
- justify-content: space-around;
- font-size: 10pt;
}
-article > nav.l a,
-.msg-cont > nav.l a {
- color: #888;
- margin-right: 15px;
-}
-article .likes {
- padding-left: 20px;
-}
-article .replies {
- margin-left: 18px;
-}
-article .tags {
- margin-top: 3px;
-}
-.msg-tags {
- margin-top: 12px;
- min-height: 1px;
-}
-article .tags > a,
-.badge,
-.msg-tags > a {
- background: #eee;
- border: 1px solid #eee;
+
+#global a {
color: #888;
- cursor: pointer;
display: inline-block;
- font-size: 10pt;
- margin-bottom: 5px;
- margin-right: 5px;
- padding: 0 10px;
-}
-.l .msg-button {
- align-items: center;
- display: flex;
- flex-basis: 0;
- flex-direction: column;
- flex-grow: 1;
- padding-top: 12px;
-}
-.l .msg-button-icon {
- font-weight: bold;
-}
-.msgthread {
- margin-bottom: 0;
-}
-.msg-avatar {
- min-height: 48px;
- margin-right: 10px;
- min-width: 48px;
-}
-.msg-avatar img {
- height: 48px;
- vertical-align: top;
- width: 48px;
-}
-.msg-cont {
- background: #FFF;
- box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
- line-height: 140%;
- margin-bottom: 12px;
- padding: 20px;
-}
-.reply-new .msg-cont {
- border-right: 5px solid #0C0;
-}
-.msg-ts {
- font-size: small;
- vertical-align: top;
-}
-.msg-ts,
-.msg-ts > a {
- color: #999;
-}
-.msg-txt {
- clear: both;
- margin: 0 0 12px;
- padding-top: 10px;
- word-wrap: break-word;
- overflow-wrap: break-word;
-}
-.msg-media {
- text-align: center;
-}
-.msg-links {
- color: #999;
- font-size: small;
- margin: 5px 0 0 0;
-}
-.msg-comments {
- color: #AAA;
- font-size: small;
- margin-top: 10px;
- overflow: hidden;
- text-indent: 10px;
-}
-.msg-comment-hidden {
- display: none;
-}
-.msg-comment input {
- align-self: flex-start;
- background: #EEE;
- border: 1px solid #CCC;
- color: #999;
- margin: 0 0 0 6px;
- position: sticky;
- top: 70px;
- vertical-align: top;
- width: 50px;
-}
-.msg-recomms {
- color: #AAA;
- font-size: small;
- margin-top: 10px;
- overflow: hidden;
- text-indent: 10px;
-}
-#replies .msg-cont {
- margin: 0;
- box-shadow: none;
- border-bottom: 1px #eee solid;
-}
-#replies .msg-txt,
-#private-messages .msg-txt {
- margin: 0;
-}
-.title2 {
- background: #fff;
- margin: 20px 0;
- padding: 10px 20px;
- width: 640px;
-}
-.title2-right {
- float: right;
- line-height: 24px;
-}
-#content .title2 h2 {
- font-size: x-large;
- margin: 0;
-}
-
-@media screen and (max-width: 850px) {
- #header_wrapper {
- width: auto;
- }
- #content {
- width: 100%;
- }
- #global {
- justify-content: space-around;
- flex-grow: 1;
- }
- #search {
- padding: 4px;
- }
- article {
- overflow: auto;
- }
- article p {
- margin: 10px 0 8px 0;
- }
- .msg,
- .msg-cont {
- min-width: 280px;
- width: auto;
- }
- .msg-cont {
- margin: 8px 0;
- }
- .msg-media {
- overflow: auto;
- }
- .title2 h2 {
- font-size: large;
- }
- .msg-comment {
- flex-direction: column;
- }
- .msg-comment input {
- align-self: flex-end;
- margin: 6px 0 0 0;
- width: 100px;
- }
-}
-
-@media screen and (max-width: 480px) {
- #content {
- margin-top: 104px;
- width: 100%;
- }
- #search {
- display: none;
- }
- #global a {
- padding: 14px 2px;
- font-size: 11pt;
- }
- .msg-cont > nav.l,
- article > nav.l {
- font-size: 9pt;
- }
- .msg-txt {
- padding-top: 5px;
- }
- .title2 {
- font-size: 11pt;
- width: auto;
- }
- #content .title2 h2 {
- font-size: 11pt;
- }
- .title2-right {
- line-height: initial;
- }
-}
-
-/* #endregion */
-
-/* #region user-generated texts */
-
-q:before,
-q:after {
- content: "";
-}
-q,
-blockquote {
- border-left: 3px solid #CCC;
- color: #666;
- display: block;
- margin: 10px 0 10px 10px;
- padding-left: 10px;
-}
-
-/* #endregion */
-
-/* #region new message form internals */
-
-#newmessage {
- background: #E5E5E0;
- margin-bottom: 20px;
- padding: 15px;
-}
-#newmessage textarea {
- border: 1px solid #CCC;
- box-sizing: border-box;
- margin: 0 0 5px 0;
- margin-top: 20px;
- max-height: 6em;
- min-width: 280px;
- padding: 4px;
- width: 100%;
-}
-#newmessage input {
- border: 1px solid #CCC;
- margin: 5px 0;
- padding: 2px 4px;
-}
-#newmessage .img {
- width: 500px;
-}
-#newmessage .tags {
- width: 500px;
-}
-#newmessage .subm {
- background: #EEEEE5;
- width: 150px;
-}
-@media screen and (max-width: 850px) {
- #newmessage .img,
- #newmessage .tags {
- width: 100%;
- }
-}
-
-/* #endregion */
-
-/* #region user lists */
-
-.users {
- margin: 10px 0;
- width: 100%;
- display: flex;
- flex-wrap: wrap;
-}
-.users > span {
- overflow: hidden;
- padding: 6px 0;
- width: 200px;
-}
-.users img {
- height: 32px;
- margin-right: 6px;
- vertical-align: middle;
- width: 32px;
+ font-size: 13pt;
+ padding: 14px 16px;
}
-/* #endregion */
-
-/* #region signup form */
-
-.signup-h1 > img {
- margin-right: 10px;
- vertical-align: middle;
-}
-.signup-h1 {
- font-size: x-large;
- margin: 20px 0 10px 0;
-}
-.signup-h2 {
- font-size: large;
- margin: 10px 0 5px 0;
-}
-.signup-hr {
- margin: 20px 0;
+#global li {
+ display: inline-block;
}
-/* #endregion */
-
-/* #region PM */
-
-.newpm {
- margin: 20px 60px 30px 60px;
-}
-.newpm textarea {
- resize: vertical;
- width: 100%;
-}
-.newpm-send input {
- width: 100px;
+#ctitle a {
+ padding: 4px 20px;
}
-/* #endregion */
-
-/* #region popup dialog (lightbox) */
-
-#dialogb {
- background: #222;
- height: 100%;
- left: 0;
- opacity: 0.6;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 10;
-}
-#dialogt {
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 10;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-#dialogw {
- z-index: 11;
- max-width: 96%;
- max-height: calc(100% - 100px);
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-#dialogw a {
- display: block;
-}
-#dialogw img {
- max-height: 100%;
- max-height: 90vh;
- max-width: 100%;
-}
-#dialog_header {
- width: 100%;
- height: 44px;
- position: fixed;
- display: flex;
- flex-direction: row-reverse;
- align-items: center;
-}
-.header_image {
- background: rgba(0, 0, 0, 0.28);
-}
-#dialogc {
+#global a:hover, #global li:hover, #ctitle a:hover, .l a:hover .msg-button:hover {
+ background-color: #ec4b98;
+ color: #fff;
cursor: pointer;
- color: #ccc;
- padding-right: 6px;
-}
-.dialoglogin {
- background: #fff;
- padding: 25px;
- width: 300px;
-}
-.dialog-opened {
- overflow: hidden;
-}
-#signfb,
-#signvk {
- display: block;
- line-height: 32px;
- margin: 10px 0;
- text-decoration: none;
- width: 100%;
-}
-#signvk {
- margin-bottom: 30px;
-}
-.dialoglogin form {
- margin-top: 7px;
-}
-.signinput,
-.signsubmit {
- border: 1px solid #CCC;
- margin: 3px 0;
- padding: 3px;
-}
-.signinput {
- width: 292px;
-}
-.signsubmit {
- width: 70px;
-}
-.dialogshare {
- background: #fff;
- min-width: 300px;
- overflow: auto;
- padding: 20px;
-}
-.dialogl {
- background: #fff;
- border: 1px solid #DDD;
- margin: 3px 0 20px;
- padding: 5px;
-}
-.dialogshare li {
- float: left;
- margin: 5px 10px 0 0;
-}
-.dialogshare a {
- display: block;
-}
-.dialogtxt {
- background: #fff;
- padding: 20px;
-}
-
-@media screen and (max-width: 480px) {
- .dialog-opened {
- position: fixed;
- width: 100%;
- }
}
-/* #endregion */
-
-/* #region misc */
-
-#wsthread {
- background: #CCC;
- bottom: 20px;
- cursor: pointer;
- display: none;
- padding: 5px 10px;
- position: fixed;
- right: 20px;
-}
-.sharenew {
- display: inline-block;
- line-height: 32px;
- min-height: 32px;
- min-width: 200px;
- padding: 0 12px 0 37px;
-}
.icon {
margin-top: -2px;
vertical-align: middle;
}
-.icon--ei-link {
- margin-top: -1px;
-}
-.icon--ei-comment {
- margin-top: -5px;
-}
-.newmessage {
- /* textarea on the /post page */
- border: 1px solid #DDD;
- padding: 2px;
- resize: vertical;
- width: 100%;
-}
-
-/* #endregion */
-/* #region footer internals */
-#footer-social {
- float: left;
-}
-#footer-social a {
- border: 0;
- display: inline-block;
-}
-#footer-left {
- margin-left: 286px;
- margin-right: 350px;
-}
-#footer-right {
- float: right;
-}
-
-@media screen and (max-width: 850px) {
- #footer {
- margin: 0 10px;
+@media (--viewport-desktop) {
+ #app {
+ grid-template-areas: "header header" "content content" "footer footer";
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: min-content minmax(min-content, 1fr) min-content;
}
- #footer div {
- float: none;
- margin: 10px 0;
+ #header_wrapper, .footer_container {
+ margin: 0 auto;
+ width: var(--main-width);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ }
+ #wrapper {
+ justify-self: center;
+ width: var(--main-width);
+ display: grid;
+ grid-gap: 10px;
+ grid-template-columns: 200px minmax(auto, max-content);
+ grid-template-areas: "nav feed";
+ }
+ .desktop {
+ display: block;
+ }
+ .mobile {
+ display: none;
}
-}
-
-/* #endregion */
-
-/* #region settings */
-
-fieldset {
- border: 1px dotted #ccc;
- margin-top: 25px;
-}
-
-/* #endregion */
-
-/* #region embeds */
-
-.embedContainer {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- padding: 0;
- margin: 30px -3px 15px -3px;
-}
-.embedContainer > * {
- box-sizing: border-box;
- flex-grow: 1;
- margin: 3px;
- min-width: 49%;
-}
-.embedContainer > .compact {
- flex-grow: 0;
-}
-.embedContainer .picture img {
- display: block;
-}
-.embedContainer img,
-.embedContainer video {
- max-width: 100%;
- max-height: 80vh;
-}
-.embedContainer > .audio,
-.embedContainer > .youtube {
- min-width: 90%;
-}
-.embedContainer audio {
- width: 100%;
-}
-.embedContainer iframe {
- overflow: hidden;
- resize: vertical;
- display: block;
-}
-
-/* #endregion */
-
-/* #region nsfw */
-
-article.nsfw .embedContainer img,
-article.nsfw .embedContainer video,
-article.nsfw .embedContainer iframe,
-article.nsfw .ir img {
- opacity: 0.1;
-}
-article.nsfw .embedContainer img:hover,
-article.nsfw .embedContainer video:hover,
-article.nsfw .embedContainer iframe:hover,
-article.nsfw .ir img:hover {
- opacity: 1;
-}
-
-/* #endregion */
+ .msgs {
+ grid-area: "feed";
+ }
+ #sidebar {
+ border: 0;
+ position: static;
+ grid-area: nav;
+ width: auto;
+ top: inherit;
+ left: inherit;
+ z-index: inherit;
+ overflow-x: inherit;
+ }
+} \ No newline at end of file
diff --git a/vnext/src/views/index.html b/vnext/src/views/index.html
index b26d181f..3b8480d7 100644
--- a/vnext/src/views/index.html
+++ b/vnext/src/views/index.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
+
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -29,29 +30,29 @@
</head>
<body>
- <div id="body">
- <div id="header">
- <div id="header_wrapper">
- <div id="logo"><a href="/">Juick</a></div>
+ <div id="app">
+ <div id="header">
+ <div id="header_wrapper">
+ <div id="logo"><a href="/">Juick</a></div>
+ </div>
</div>
- </div>
- <div id="content">
- <noscript>
- <article>
- Javascript is required to use Juick from browser.<br /> Alternatively we have <a href="mailto:juick@juick.com">maillist-like</a>
- and <a href="xmpp:juick@juick.com">chat</a> interfaces.
- </article>
- </noscript>
- </div>
- </div>
- <div id="footer">
- <div id="footer-right"> &middot;
- <a href="/help/contacts" rel="nofollow">Contacts</a> &middot;
- <a href="/help/tos" rel="nofollow">TOS</a>
+ <div id="content">
+ <noscript>
+ <article>
+ Javascript is required to use Juick from browser.<br /> Alternatively we have <a href="mailto:juick@juick.com">maillist-like</a>
+ and <a href="xmpp:juick@juick.com">chat</a> interfaces.
+ </article>
+ </noscript>
</div>
- <div id="footer-left">juick.com &copy; 2008-2018
- <br />
- <!-- EXT_FOOTER -->
+ <div id="footer">
+ <div id="footer-right"> &middot;
+ <a href="/help/contacts" rel="nofollow">Contacts</a> &middot;
+ <a href="/help/tos" rel="nofollow">TOS</a>
+ </div>
+ <div id="footer-left">juick.com &copy; 2008-2018
+ <br />
+ <!-- EXT_FOOTER -->
+ </div>
</div>
</div>
</body>
diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js
index 35a698e0..3a9b2678 100644
--- a/vnext/webpack.config.js
+++ b/vnext/webpack.config.js
@@ -5,6 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
+const postcssPresetEnv = require('postcss-preset-env');
module.exports = (env, argv) => {
const dev = argv.mode !== 'production';
@@ -43,7 +44,7 @@ module.exports = (env, argv) => {
{
loader: 'postcss-loader', options: {
plugins: () => [
- require('autoprefixer')({})
+ postcssPresetEnv({ stage: 0, autoprefixer: { grid: true } })
]
}
}
diff --git a/vnext/yarn.lock b/vnext/yarn.lock
index d292460c..98c0bc5e 100644
--- a/vnext/yarn.lock
+++ b/vnext/yarn.lock
@@ -840,6 +840,11 @@
lodash "^4.17.10"
to-fast-properties "^2.0.0"
+"@csstools/convert-colors@^1.4.0":
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
+ integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
+
"@types/node@*":
version "10.12.0"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.0.tgz#ea6dcbddbc5b584c83f06c60e82736d8fbb0c235"
@@ -1782,7 +1787,7 @@ browserslist@^4.0.0, browserslist@^4.1.0:
electron-to-chromium "^1.3.80"
node-releases "^1.0.0-alpha.14"
-browserslist@^4.3.3:
+browserslist@^4.3.3, browserslist@^4.3.4:
version "4.3.4"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.3.4.tgz#4477b737db6a1b07077275b24791e680d4300425"
integrity sha512-u5iz+ijIMUlmV8blX82VGFrB9ecnUg5qEt55CMZ/YJEhha+d8qpBfOFuutJ6F/VKRXjZoD33b6uvarpPxcl3RA==
@@ -1922,6 +1927,11 @@ caniuse-lite@^1.0.30000899:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000902.tgz#74eaf6ed7f1d31e5148725081c9df60051c5e2b3"
integrity sha512-EZG6qrRHkW715hOFjOrshH2JygbLfhaC8NjjkE5EdGJZhCYbtnJMaRdicB+2AP8xKX3QzW9g3mkDUTHUoBG5rQ==
+caniuse-lite@^1.0.30000905:
+ version "1.0.30000910"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000910.tgz#755d5181d4b006e5a2b59b1ffa05d0a0470039f5"
+ integrity sha512-u/nxtHGAzCGZzIxt3dA/tpSPOcirBZFWKwz1EPz4aaupnBI2XR0Rbr74g0zc6Hzy41OEM4uMoZ38k56TpYAWjQ==
+
capture-exit@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"
@@ -2383,6 +2393,13 @@ css-loader@^1.0.1:
postcss-value-parser "^3.3.0"
source-list-map "^2.0.0"
+css-prefers-color-scheme@^3.0.0:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
+ integrity sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==
+ dependencies:
+ postcss "^7.0.5"
+
css-select-base-adapter@~0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
@@ -2448,6 +2465,11 @@ css-what@2.1, css-what@^2.1.2:
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"
integrity sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==
+cssdb@^4.2.0:
+ version "4.2.0"
+ resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.2.0.tgz#89623ec696121d0688080ccdcd4627c7e6c6ee0d"
+ integrity sha512-27CuM+rp1/HIH4hkiOvrRUjgv31WamWk7+XSGz7OP/uWR8EOMeXOh4Ncpa/Eq1eO/1eRhQx7HWj8KEbt4nKQBA==
+
cssesc@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -3641,6 +3663,11 @@ flat-cache@^1.2.1:
graceful-fs "^4.1.2"
write "^0.2.1"
+flatten@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+ integrity sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=
+
flush-write-stream@^1.0.0:
version "1.0.3"
resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
@@ -5455,6 +5482,11 @@ locate-path@^3.0.0:
p-locate "^3.0.0"
path-exists "^3.0.0"
+lodash._reinterpolate@~3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+ integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -5485,6 +5517,21 @@ lodash.sortby@^4.7.0:
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
+lodash.template@^4.2.4:
+ version "4.4.0"
+ resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
+ integrity sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=
+ dependencies:
+ lodash._reinterpolate "~3.0.0"
+ lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+ version "4.1.0"
+ resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
+ integrity sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=
+ dependencies:
+ lodash._reinterpolate "~3.0.0"
+
lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -6579,6 +6626,14 @@ posix-character-classes@^0.1.0:
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
+postcss-attribute-case-insensitive@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.0.tgz#807b6a797ad8bf1c821b2d51cf641e9dd3837624"
+ integrity sha512-K/zqdg0/UgUgC8qR0lDuxYzmowPpnvrrNC5YuoqzhHMubR9AuhsPlpVu3jjkLHgDAzR+ohD/m7//iGnN9WxbzQ==
+ dependencies:
+ postcss "^7.0.2"
+ postcss-selector-parser "^5.0.0-rc.3"
+
postcss-calc@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.0.tgz#cf0e78e1d7d9f75119b833abc786fa4b61afedda"
@@ -6589,6 +6644,48 @@ postcss-calc@^7.0.0:
postcss-selector-parser "^5.0.0-rc.3"
postcss-value-parser "^3.3.0"
+postcss-color-functional-notation@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
+ integrity sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==
+ dependencies:
+ postcss "^7.0.2"
+ postcss-values-parser "^2.0.0"
+
+postcss-color-gray@^5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
+ integrity sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==
+ dependencies:
+ "@csstools/convert-colors" "^1.4.0"
+ postcss "^7.0.5"
+ postcss-values-parser "^2.0.0"
+
+postcss-color-hex-alpha@^5.0.2:
+ version "5.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.2.tgz#e9b1886bb038daed33f6394168c210b40bb4fdb6"
+ integrity sha512-8bIOzQMGdZVifoBQUJdw+yIY00omBd2EwkJXepQo9cjp1UOHHHoeRDeSzTP6vakEpaRc6GAIOfvcQR7jBYaG5Q==
+ dependencies:
+ postcss "^7.0.2"
+ postcss-values-parser "^2.0.0"
+
+postcss-color-mod-function@^3.0.3:
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
+ integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
+ dependencies:
+ "@csstools/convert-colors" "^1.4.0"
+ postcss "^7.0.2"
+ postcss-values-parser "^2.0.0"
+
+postcss-color-rebeccapurple@^4.0.1:
+ version "4.0.1"
+ resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77"
+ integrity sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==
+ dependencies:
+ postcss "^7.0.2"
+ postcss-values-parser "^2.0.0"
+
postcss-colormin@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.2.tgz#93cd1fa11280008696887db1a528048b18e7ed99"
@@ -6608,6 +6705,37 @@ postcss-convert-values@^4.0.1:
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
+postcss-custom-media@^7.0.7:
+ version "7.0.7"
+ resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.7.tgz#bbc698ed3089ded61aad0f5bfb1fb48bf6969e73"
+ integrity sha512-bWPCdZKdH60wKOTG4HKEgxWnZVjAIVNOJDvi3lkuTa90xo/K0YHa2ZnlKLC5e2qF8qCcMQXt0yzQITBp8d0OFA==
+ dependencies:
+ postcss "^7.0.5"
+
+postcss-custom-properties@^8.0.9:
+ version "8.0.9"
+ resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.9.tgz#8943870528a6eae4c8e8d285b6ccc9fd1f97e69c"
+ integrity sha512-/Lbn5GP2JkKhgUO2elMs4NnbUJcvHX4AaF5nuJDaNkd2chYW1KA5qtOGGgdkBEWcXtKSQfHXzT7C6grEVyb13w==
+ dependencies:
+ postcss "^7.0.5"
+ postcss-values-parser "^2.0.0"
+
+postcss-custom-selectors@^5.1.2:
+ version "5.1.2"
+ resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba"
+ integrity sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==
+ dependencies:
+ postcss "^7.0.2"
+ postcss-selector-parser "^5.0.0-rc.3"
+
+postcss-dir-pseudo-class@^5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2"
+ integrity sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==
+ dependencies:
+ postcss "^7.0.2"
+ postcss-selector-parser "^5.0.0-rc.3"
+
postcss-discard-comments@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.1.tgz#30697735b0c476852a7a11050eb84387a67ef55d"
@@ -6636,6 +6764,75 @@ postcss-discard-overridden@^4.0.1:
dependencies:
postcss "^7.0.0"
+postcss-double-position-gradients@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e"
+ integrity sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==
+ dependencies:
+ postcss "^7.0.5"
+ postcss-values-parser "^2.0.0"
+
+postcss-env-function@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7"
+ integrity sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==
+ dependencies:
+ postcss "^7.0.2"
+ postcss-values-parser "^2.0.0"
+
+postcss-focus-visible@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
+ integrity sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==
+ dependencies:
+ postcss "^7.0.2"
+
+postcss-focus-within@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680"
+ integrity sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==
+ dependencies:
+ postcss "^7.0.2"
+
+postcss-font-variant@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz#71dd3c6c10a0d846c5eda07803439617bbbabacc"
+ integrity sha512-M8BFYKOvCrI2aITzDad7kWuXXTm0YhGdP9Q8HanmN4EF1Hmcgs1KK5rSHylt/lUJe8yLxiSwWAHdScoEiIxztg==
+ dependencies:
+ postcss "^7.0.2"
+
+postcss-gap-properties@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715"
+ integrity sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==
+ dependencies:
+ postcss "^7.0.2"
+
+postcss-image-set-function@^3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288"
+ integrity sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==
+ dependencies:
+ postcss "^7.0.2"
+ postcss-values-parser "^2.0.0"
+
+postcss-initial@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.0.tgz#1772512faf11421b791fb2ca6879df5f68aa0517"
+ integrity sha512-WzrqZ5nG9R9fUtrA+we92R4jhVvEB32IIRTzfIG/PLL8UV4CvbF1ugTEHEFX6vWxl41Xt5RTCJPEZkuWzrOM+Q==
+ dependencies:
+ lodash.template "^4.2.4"
+ postcss "^7.0.2"
+
+postcss-lab-function@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
+ integrity sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==
+ dependencies:
+ "@csstools/convert-colors" "^1.4.0"
+ postcss "^7.0.2"
+ postcss-values-parser "^2.0.0"
+
postcss-load-config@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.0.0.tgz#f1312ddbf5912cd747177083c5ef7a19d62ee484"
@@ -6654,6 +6851,20 @@ postcss-loader@^3.0.0:
postcss-load-config "^2.0.0"
schema-utils "^1.0.0"
+postcss-logical@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
+ integrity sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==
+ dependencies:
+ postcss "^7.0.2"
+
+postcss-media-minmax@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5"
+ integrity sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==
+ dependencies:
+ postcss "^7.0.2"
+
postcss-merge-longhand@^4.0.9:
version "4.0.9"
resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.9.tgz#c2428b994833ffb2a072f290ca642e75ceabcd6f"
@@ -6747,6 +6958,13 @@ postcss-modules-values@^1.3.0:
icss-replace-symbols "^1.1.0"
postcss "^6.0.1"
+postcss-nesting@^7.0.0:
+ version "7.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.0.tgz#6e26a770a0c8fcba33782a6b6f350845e1a448f6"
+ integrity sha512-WSsbVd5Ampi3Y0nk/SKr5+K34n52PqMqEfswu6RtU4r7wA8vSD+gM8/D9qq4aJkHImwn1+9iEFTbjoWsQeqtaQ==
+ dependencies:
+ postcss "^7.0.2"
+
postcss-normalize-charset@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
@@ -6837,6 +7055,77 @@ postcss-ordered-values@^4.1.1:
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
+postcss-overflow-shorthand@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30"
+ integrity sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==
+ dependencies:
+ postcss "^7.0.2"
+
+postcss-page-break@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf"
+ integrity sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==
+ dependencies:
+ postcss "^7.0.2"
+
+postcss-place@^4.0.1:
+ version "4.0.1"
+ resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62"
+ integrity sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==
+ dependencies:
+ postcss "^7.0.2"
+ postcss-values-parser "^2.0.0"
+
+postcss-preset-env@^6.4.0:
+ version "6.4.0"
+ resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.4.0.tgz#f5466550b177454fc98ca5054b4478e8e5caa714"
+ integrity sha512-0jCyY/T9kWv1i2abt5DOOoh0uHJia0HUTWMV72Tw75tGx3pH628oSS8WBMCE5L1Ou3LvoAl9pe07u8g/afvc3A==
+ dependencies:
+ autoprefixer "^9.3.1"
+ browserslist "^4.3.4"
+ caniuse-lite "^1.0.30000905"
+ css-prefers-color-scheme "^3.0.0"
+ cssdb "^4.2.0"
+ postcss "^7.0.5"
+ postcss-attribute-case-insensitive "^4.0.0"
+ postcss-color-functional-notation "^2.0.1"
+ postcss-color-gray "^5.0.0"
+ postcss-color-hex-alpha "^5.0.2"
+ postcss-color-mod-function "^3.0.3"
+ postcss-color-rebeccapurple "^4.0.1"
+ postcss-custom-media "^7.0.7"
+ postcss-custom-properties "^8.0.9"
+ postcss-custom-selectors "^5.1.2"
+ postcss-dir-pseudo-class "^5.0.0"
+ postcss-double-position-gradients "^1.0.0"
+ postcss-env-function "^2.0.2"
+ postcss-focus-visible "^4.0.0"
+ postcss-focus-within "^3.0.0"
+ postcss-font-variant "^4.0.0"
+ postcss-gap-properties "^2.0.0"
+ postcss-image-set-function "^3.0.1"
+ postcss-initial "^3.0.0"
+ postcss-lab-function "^2.0.1"
+ postcss-logical "^3.0.0"
+ postcss-media-minmax "^4.0.0"
+ postcss-nesting "^7.0.0"
+ postcss-overflow-shorthand "^2.0.0"
+ postcss-page-break "^2.0.0"
+ postcss-place "^4.0.1"
+ postcss-pseudo-class-any-link "^6.0.0"
+ postcss-replace-overflow-wrap "^3.0.0"
+ postcss-selector-matches "^4.0.0"
+ postcss-selector-not "^4.0.0"
+
+postcss-pseudo-class-any-link@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"
+ integrity sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==
+ dependencies:
+ postcss "^7.0.2"
+ postcss-selector-parser "^5.0.0-rc.3"
+
postcss-reduce-initial@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.2.tgz#bac8e325d67510ee01fa460676dc8ea9e3b40f15"
@@ -6857,6 +7146,29 @@ postcss-reduce-transforms@^4.0.1:
postcss "^7.0.0"
postcss-value-parser "^3.0.0"
+postcss-replace-overflow-wrap@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c"
+ integrity sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==
+ dependencies:
+ postcss "^7.0.2"
+
+postcss-selector-matches@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
+ integrity sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==
+ dependencies:
+ balanced-match "^1.0.0"
+ postcss "^7.0.2"
+
+postcss-selector-not@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz#c68ff7ba96527499e832724a2674d65603b645c0"
+ integrity sha512-W+bkBZRhqJaYN8XAnbbZPLWMvZD1wKTu0UxtFKdhtGjWYmxhkUneoeOhRJKdAE5V7ZTlnbHfCR+6bNwK9e1dTQ==
+ dependencies:
+ balanced-match "^1.0.0"
+ postcss "^7.0.2"
+
postcss-selector-parser@^3.0.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
@@ -6900,6 +7212,15 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+postcss-values-parser@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.0.tgz#1ba42cae31367c44f96721cb5eb99462bfb39705"
+ integrity sha512-cyRdkgbRRefu91ByAlJow4y9w/hnBmmWgLpWmlFQ2bpIy2eKrqowt3VeYcaHQ08otVXmC9V2JtYW1Z/RpvYR8A==
+ dependencies:
+ flatten "^1.0.2"
+ indexes-of "^1.0.1"
+ uniq "^1.0.1"
+
postcss@^6.0.1, postcss@^6.0.23:
version "6.0.23"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"