Merge pull request #3204 from wallabag/better-export-page

Better public sharing page

2 files changed, 408 insertions, 0 deletions

diff --git a/app/Resources/static/themes/_global/share.js b/app/Resources/static/themes/_global/share.js
new file mode 100644
index 00000000..d7078616
--- /dev/null
+++ b/app/Resources/static/themes/_global/share.js
@@ -0,0 +1 @@
+import './share.scss';
diff --git a/app/Resources/static/themes/_global/share.scss b/app/Resources/static/themes/_global/share.scss
new file mode 100644
index 00000000..5a853324
--- /dev/null
+++ b/app/Resources/static/themes/_global/share.scss
@@ -0,0 +1,407 @@
+/* -------------------------- Reset ------------------- */
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+b,
+u,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* -------------------------- General properties ------------------- */
+
+body {
+  background-color: white;
+  color: #444;
+  font-family: Georgia;
+  line-height: 1.7;
+  -ms-content-zooming: none;
+  margin-bottom: 64px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  margin: 0.2em 0;
+}
+
+article h1,
+article h2,
+article h3,
+article h4,
+article h5,
+article h6 {
+  text-align: left !important;
+  line-height: 1.3;
+}
+
+h1 {
+  font-size: 1.4em;
+}
+
+h2 {
+  font-size: 1.3em;
+}
+
+h3,
+h4 {
+  font-size: 1.2em;
+}
+
+h5,
+h6 {
+  font-size: 1.1em;
+}
+
+p {
+  margin-bottom: 0.75em;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+i,
+em {
+  font-style: italic;
+}
+
+a {
+  color: #444;
+  text-decoration: underline;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+p,
+ul,
+ol,
+dl {
+  margin: 0 0 1.75em;
+}
+
+ul,
+ol {
+  padding-left: 1.25em;
+}
+
+li {
+  padding-bottom: 0.2em;
+  line-height: 1.6;
+}
+
+li p:last-child,
+li li:last-child {
+  margin-bottom: -0.2em;
+}
+
+ul li:last-child,
+ol li:last-child {
+  padding-bottom: 0;
+}
+
+mark {
+  padding: 0 0.2em;
+}
+
+mark a {
+  text-decoration: none;
+}
+
+blockquote {
+  font-style: italic;
+  border-left: 0.25em solid black;
+  margin-left: -20px;
+  padding-left: 17px;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+}
+
+blockquote cite {
+  text-transform: uppercase;
+  font-size: 0.8em;
+  font-style: normal;
+}
+
+blockquote cite::before {
+  content: "—";
+  margin-right: 0.5em;
+}
+
+img {
+  display: block;
+  height: auto;
+  margin-bottom: 0.5em;
+  max-width: 100%;
+}
+
+figure {
+  margin: 0;
+}
+
+figure figcaption {
+  display: block;
+  margin-top: 0.3em;
+  font-style: italic;
+  font-size: 0.8em;
+}
+
+button {
+  display: none !important;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: solid #666;
+  border-width: 1px 0 0;
+  margin: 1.6em 0;
+  padding: 0;
+}
+
+small {
+  font-size: 0.7em;
+}
+
+dl {
+  margin: 1.6em 0;
+}
+
+dl dt {
+  float: left;
+  width: 11.25em;
+  overflow: hidden;
+  clear: left;
+  text-align: right;
+  -ms-text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: bold;
+  margin-bottom: 1em;
+}
+
+dl dd {
+  margin-left: 12.5em;
+  margin-bottom: 1em;
+}
+
+pre {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 4em 0;
+  border: 0.0625em solid #efefef;
+  width: 100%;
+  padding: 1em;
+  font-family: Consolas, monospace;
+  white-space: pre;
+  overflow: auto;
+}
+
+pre code {
+  font-size: 0.8em;
+  line-height: 1.6em;
+  white-space: pre-wrap;
+  background: transparent;
+  border: none;
+  padding: 0;
+  vertical-align: inherit;
+}
+
+code {
+  padding: 0.125em 0.375em;
+  margin: 0 0.2em;
+  font-family: Consolas, monospace;
+  font-size: 0.8em;
+  white-space: pre;
+  border: 1px solid lightgray;
+  overflow: auto;
+}
+
+audio,
+video {
+  max-width: 43.75em;
+}
+
+::selection,
+mark {
+  background: #666;
+  color: white;
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 2em;
+  width: 100%;
+}
+
+th,
+td {
+  padding: 0.25em;
+  text-align: left;
+}
+
+thead tr {
+  text-transform: uppercase;
+  font-size: 0.85em;
+  letter-spacing: 1px;
+  font-family: "Segoe UI", sans-serif;
+  font-weight: 600;
+}
+
+tbody tr:nth-child(2n+1) {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+tbody {
+  border: solid #999;
+  border-width: 1px 0;
+}
+
+article {
+  padding: 0 1em;
+}
+
+/* --------------------- Responsive design ------------------------- */
+
+@media (min-width: 720px) {
+  blockquote {
+    margin-left: -1.4375em;
+    padding-left: 1.25em;
+  }
+
+  article {
+    margin: 0 auto;
+    max-width: 43.75em;
+    padding: 0 1.25em;
+  }
+
+  header {
+    max-width: 43.75em;
+    margin: 0 auto;
+    margin-top: 32px;
+    text-align: center;
+  }
+}