general fixes
This commit is contained in:
sairaj mote
parent
5d830b1168
commit
111fa4f0d3
@ -4399,7 +4399,7 @@ customElements.define('tags-input', class extends HTMLElement {
|
||||
return ['placeholder', 'limit']
|
||||
}
|
||||
get value() {
|
||||
return [...this.tags].join()
|
||||
return [...this.tags]
|
||||
}
|
||||
get isValid() {
|
||||
return this.tags.size
|
||||
|
||||
198
css/main.css
198
css/main.css
@ -1,8 +1,7 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
@ -64,8 +63,7 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:focus-visible {
|
||||
-webkit-box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
|
||||
button,
|
||||
@ -75,22 +73,15 @@ button,
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -101,9 +92,7 @@ button,
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.button--primary {
|
||||
background-color: var(--accent-color);
|
||||
@ -140,10 +129,7 @@ tags-input {
|
||||
|
||||
sm-button {
|
||||
--padding: 0.5rem 0.8rem;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
}
|
||||
sm-button[variant=primary] .icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
@ -217,8 +203,6 @@ ul {
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -255,15 +239,11 @@ ul {
|
||||
}
|
||||
|
||||
.align-start {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
@ -271,15 +251,11 @@ ul {
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: start;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-right {
|
||||
@ -287,8 +263,7 @@ ul {
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.justify-self-center {
|
||||
@ -304,16 +279,11 @@ ul {
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
@ -323,10 +293,7 @@ ul {
|
||||
.interact {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@ -348,8 +315,7 @@ ul {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.button__icon {
|
||||
@ -377,10 +343,7 @@ ul {
|
||||
|
||||
#confirmation_popup,
|
||||
#prompt_popup {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
#confirmation_popup h4,
|
||||
#prompt_popup h4 {
|
||||
@ -410,8 +373,7 @@ button:active,
|
||||
.button:active,
|
||||
sm-button:not([disabled]):active,
|
||||
.interact:active {
|
||||
-webkit-transform: scale(0.96);
|
||||
transform: scale(0.96);
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.popup__header {
|
||||
@ -419,9 +381,7 @@ sm-button:not([disabled]):active,
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0 1.5rem 0 0.5rem;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
@ -432,9 +392,7 @@ sm-button:not([disabled]):active,
|
||||
|
||||
.logo {
|
||||
display: grid;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 0.5rem;
|
||||
@ -453,12 +411,8 @@ sm-button:not([disabled]):active,
|
||||
}
|
||||
|
||||
details summary {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -469,8 +423,7 @@ details[open] > summary {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
details[open] > summary .icon {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
sm-select,
|
||||
@ -537,14 +490,12 @@ sm-copy {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
#landing > section {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
#landing h1 {
|
||||
margin-top: -2ch;
|
||||
font-size: clamp(2rem,5vw,5rem);
|
||||
font-size: clamp(2rem, 5vw, 5rem);
|
||||
}
|
||||
#landing p {
|
||||
max-width: 100%;
|
||||
@ -553,9 +504,7 @@ sm-copy {
|
||||
#sign_in,
|
||||
#sign_up {
|
||||
grid-template-rows: auto 1fr;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
#sign_in section,
|
||||
#sign_up section {
|
||||
@ -595,14 +544,13 @@ sm-copy {
|
||||
}
|
||||
|
||||
#main_header {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
grid-column: 1/-1;
|
||||
background-color: var(--foreground-color);
|
||||
@ -610,6 +558,7 @@ sm-copy {
|
||||
}
|
||||
|
||||
#options_panel {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 6.5rem;
|
||||
z-index: 1;
|
||||
@ -623,9 +572,7 @@ sm-copy {
|
||||
.outline-button {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.outline-button::after {
|
||||
@ -634,10 +581,7 @@ sm-copy {
|
||||
width: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
height: 0.2rem;
|
||||
-webkit-transition: opacity 0.1s, -webkit-transform 0.3s;
|
||||
transition: opacity 0.1s, -webkit-transform 0.3s;
|
||||
transition: transform 0.3s, opacity 0.1s;
|
||||
transition: transform 0.3s, opacity 0.1s, -webkit-transform 0.3s;
|
||||
bottom: 0;
|
||||
background-color: rgba(var(--text-color), 0.5);
|
||||
opacity: 0;
|
||||
@ -648,8 +592,7 @@ sm-copy {
|
||||
}
|
||||
.outline-button:active::after {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleX(2);
|
||||
transform: scaleX(2);
|
||||
transform: scaleX(2);
|
||||
}
|
||||
.outline-button--active::after {
|
||||
opacity: 1;
|
||||
@ -702,10 +645,6 @@ sm-copy {
|
||||
}
|
||||
|
||||
.article-link {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -716,16 +655,14 @@ sm-copy {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.default-article::before {
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
content: "Actively written";
|
||||
margin-bottom: 0.3rem;
|
||||
.default-article::after {
|
||||
content: "";
|
||||
font-size: 0.7rem;
|
||||
background-color: var(--accent-color);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.3rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
margin: auto 0 auto auto;
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
@ -768,18 +705,12 @@ sm-copy {
|
||||
}
|
||||
|
||||
#insert_section_button {
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
#article_wrapper {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 1rem 0;
|
||||
height: 100%;
|
||||
@ -815,21 +746,14 @@ sm-copy {
|
||||
.content-card {
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--foreground-color);
|
||||
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.16) inset;
|
||||
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.16) inset;
|
||||
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.16) inset;
|
||||
}
|
||||
.content-card.selected {
|
||||
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
|
||||
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
|
||||
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
|
||||
}
|
||||
.content-card--empty {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content-card--empty .content__area {
|
||||
min-height: calc(60vh + 3rem);
|
||||
@ -842,7 +766,7 @@ sm-copy {
|
||||
}
|
||||
.content-card .submit-entry sm-spinner {
|
||||
--height: 0.8rem;
|
||||
--width: .8rem;
|
||||
--width: 0.8rem;
|
||||
}
|
||||
|
||||
.content__header {
|
||||
@ -858,10 +782,7 @@ sm-copy {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
border-radius: 0.5rem;
|
||||
-webkit-transition: -webkit-box-shadow 0.1s;
|
||||
transition: -webkit-box-shadow 0.1s;
|
||||
transition: box-shadow 0.1s;
|
||||
transition: box-shadow 0.1s, -webkit-box-shadow 0.1s;
|
||||
height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -872,8 +793,7 @@ sm-copy {
|
||||
}
|
||||
.content__area:focus-within {
|
||||
outline: none;
|
||||
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
|
||||
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
|
||||
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
|
||||
}
|
||||
|
||||
.content__options {
|
||||
@ -903,9 +823,7 @@ sm-copy {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.content__author div:last-of-type {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content__score {
|
||||
@ -939,22 +857,17 @@ sm-copy {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
-webkit-transition: -webkit-transform 0.1s;
|
||||
transition: -webkit-transform 0.1s;
|
||||
transition: transform 0.1s;
|
||||
transition: transform 0.1s, -webkit-transform 0.1s;
|
||||
background-color: var(--foreground-color);
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
padding: 0.2rem;
|
||||
border-radius: 0.3rem;
|
||||
-webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.formatting-button {
|
||||
padding: 0.3rem;
|
||||
border-radius: 0.3rem;
|
||||
-webkit-transition: background-color 0.1s;
|
||||
transition: background-color 0.1s;
|
||||
}
|
||||
.formatting-button.active:hover {
|
||||
@ -974,7 +887,6 @@ sm-copy {
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.2rem;
|
||||
border: solid thin rgba(var(--text-color), 0.3);
|
||||
-webkit-box-shadow: 0.3rem 0.5rem 0 0.1rem rgba(var(--text-color), 0.8);
|
||||
box-shadow: 0.1rem 0.2rem 0 0.1rem rgba(var(--text-color), 0.8);
|
||||
overflow: hidden;
|
||||
justify-self: center;
|
||||
@ -1011,8 +923,6 @@ sm-copy {
|
||||
.history-entry:last-of-type::before {
|
||||
content: "CREATED";
|
||||
letter-spacing: 0.03em;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
justify-self: flex-start;
|
||||
font-weight: 500;
|
||||
@ -1071,10 +981,10 @@ sm-copy {
|
||||
grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
#preview_page header {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
@ -1104,15 +1014,12 @@ sm-copy {
|
||||
}
|
||||
|
||||
.preview-group__buttons {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
background-color: var(--foreground-color);
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
padding: 0.2rem;
|
||||
border-radius: 0.3rem;
|
||||
-webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.06), 0 1rem 1.5rem -0.5rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.preview-group__buttons button {
|
||||
padding: 0.5rem;
|
||||
@ -1138,27 +1045,21 @@ sm-copy {
|
||||
}
|
||||
|
||||
#article_name_wrapper {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.article-section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-scroll-snap-type: x mandatory;
|
||||
scroll-snap-type: x mandatory;
|
||||
overflow-x: auto;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
scroll-snap-align: start;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
width: min(45ch, calc(100% - 2rem));
|
||||
flex-shrink: 0;
|
||||
width: min(45ch, 100% - 2rem);
|
||||
}
|
||||
|
||||
.formatting-button {
|
||||
@ -1303,10 +1204,7 @@ sm-copy {
|
||||
|
||||
.interact,
|
||||
button {
|
||||
-webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
|
||||
transition: background-color 0.3s, -webkit-transform 0.3s;
|
||||
transition: background-color 0.3s, transform 0.3s;
|
||||
transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
|
||||
}
|
||||
.interact:hover,
|
||||
button:hover {
|
||||
@ -1315,7 +1213,6 @@ button:hover {
|
||||
|
||||
.content-card:not(.selected) sm-checkbox {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.content-card:hover sm-checkbox, .content-card:focus-within sm-checkbox {
|
||||
@ -1323,7 +1220,6 @@ button:hover {
|
||||
}
|
||||
|
||||
.preview-group__buttons {
|
||||
-webkit-transition: opacity 0.1s;
|
||||
transition: opacity 0.1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
102
css/main.scss
102
css/main.scss
@ -64,7 +64,7 @@ strong {
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
@ -98,7 +98,7 @@ button,
|
||||
color: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
.icon-only{
|
||||
.icon-only {
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
@ -414,13 +414,13 @@ details {
|
||||
}
|
||||
sm-select,
|
||||
sm-option,
|
||||
strip-option{
|
||||
strip-option {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
strip-select{
|
||||
strip-select {
|
||||
--gap: 0;
|
||||
}
|
||||
strip-option{
|
||||
strip-option {
|
||||
font-weight: 500;
|
||||
--border-radius: 0.3rem;
|
||||
--active-option-color: var(--accent-color);
|
||||
@ -447,7 +447,7 @@ sm-copy {
|
||||
border-radius: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.page{
|
||||
.page {
|
||||
height: 100%;
|
||||
}
|
||||
.page-layout,
|
||||
@ -467,11 +467,11 @@ sm-copy {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
h1{
|
||||
h1 {
|
||||
margin-top: -2ch;
|
||||
font-size: clamp(2rem,5vw,5rem);
|
||||
font-size: clamp(2rem, 5vw, 5rem);
|
||||
}
|
||||
p{
|
||||
p {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -480,7 +480,7 @@ sm-copy {
|
||||
#sign_up {
|
||||
grid-template-rows: auto 1fr;
|
||||
align-items: center;
|
||||
section{
|
||||
section {
|
||||
margin-top: -6rem;
|
||||
justify-self: center;
|
||||
width: min(24rem, 100%);
|
||||
@ -538,14 +538,14 @@ sm-copy {
|
||||
overflow-x: auto;
|
||||
min-height: 3.2rem;
|
||||
}
|
||||
.outline-button{
|
||||
.outline-button {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0;
|
||||
&::after{
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
content: "";
|
||||
width: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
height: 0.2rem;
|
||||
@ -554,16 +554,16 @@ sm-copy {
|
||||
background-color: rgba(var(--text-color), 0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover:not(.outline-button--active)::after{
|
||||
&:hover:not(.outline-button--active)::after {
|
||||
opacity: 1;
|
||||
background-color: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
&:active::after{
|
||||
&:active::after {
|
||||
opacity: 1;
|
||||
transform: scaleX(2);
|
||||
}
|
||||
&--active{
|
||||
&::after{
|
||||
&--active {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
@ -612,7 +612,6 @@ sm-copy {
|
||||
}
|
||||
|
||||
.article-link {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -623,15 +622,14 @@ sm-copy {
|
||||
}
|
||||
}
|
||||
.default-article {
|
||||
&::before {
|
||||
align-self: flex-start;
|
||||
content: "Actively written";
|
||||
margin-bottom: 0.3rem;
|
||||
&::after {
|
||||
content: "";
|
||||
font-size: 0.7rem;
|
||||
background-color: var(--accent-color);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.3rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
margin: auto 0 auto auto;
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
}
|
||||
@ -694,7 +692,7 @@ sm-copy {
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
button{
|
||||
button {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
@ -723,13 +721,13 @@ sm-copy {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.submit-entry{
|
||||
.submit-entry {
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
color: var(--accent-color);
|
||||
sm-spinner{
|
||||
sm-spinner {
|
||||
--height: 0.8rem;
|
||||
--width: .8rem;
|
||||
--width: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -771,25 +769,25 @@ sm-copy {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.content__author{
|
||||
.content__author {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
grid-template-columns: auto max-content;
|
||||
div:first-of-type{
|
||||
div:first-of-type {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
div:last-of-type{
|
||||
div:last-of-type {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.content__score{
|
||||
.content__score {
|
||||
font-size: 0.8rem;
|
||||
margin-left: 0.2rem;
|
||||
line-height: 100%;
|
||||
}
|
||||
.filled-star{
|
||||
.filled-star {
|
||||
fill: var(--yellow);
|
||||
}
|
||||
|
||||
@ -837,23 +835,21 @@ sm-copy {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
border-radius: .2rem;
|
||||
border-radius: 0.2rem;
|
||||
border: solid thin rgba(var(--text-color), 0.3);
|
||||
-webkit-box-shadow: .3rem .5rem 0 .1rem rgba(var(--text-color), 0.8);
|
||||
box-shadow: .1rem .2rem 0 .1rem rgba(var(--text-color), 0.8);
|
||||
-webkit-box-shadow: 0.3rem 0.5rem 0 0.1rem rgba(var(--text-color), 0.8);
|
||||
box-shadow: 0.1rem 0.2rem 0 0.1rem rgba(var(--text-color), 0.8);
|
||||
overflow: hidden;
|
||||
justify-self: center;
|
||||
padding-left: 1.3rem
|
||||
figcaption {
|
||||
margin-top: .5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: .8rem;
|
||||
margin-left: auto
|
||||
padding-left: 1.3rem figcaption {
|
||||
margin-top: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: 0.8rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#version_history_panel{
|
||||
#version_history_panel {
|
||||
border-radius: 0.5rem;
|
||||
width: min(24rem, 100%);
|
||||
background-color: var(--foreground-color);
|
||||
@ -862,7 +858,7 @@ sm-copy {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
#version_timeline{
|
||||
#version_timeline {
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
@ -980,7 +976,7 @@ sm-copy {
|
||||
}
|
||||
}
|
||||
|
||||
#publish_article_popup{
|
||||
#publish_article_popup {
|
||||
--min-height: 50vh;
|
||||
}
|
||||
|
||||
@ -993,21 +989,21 @@ sm-copy {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
#article_name_wrapper{
|
||||
#article_name_wrapper {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.article-section{
|
||||
.article-section {
|
||||
display: flex;
|
||||
scroll-snap-type: x mandatory;
|
||||
overflow-x: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.content-card{
|
||||
.content-card {
|
||||
scroll-snap-align: start;
|
||||
flex-shrink: 0;
|
||||
width: min(45ch, calc(100% - 2rem));
|
||||
}
|
||||
.formatting-button{
|
||||
.formatting-button {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.hide-on-mobile {
|
||||
@ -1053,7 +1049,7 @@ sm-copy {
|
||||
display: none;
|
||||
}
|
||||
#landing h1 {
|
||||
-webkit-text-stroke-width: .1rem;
|
||||
-webkit-text-stroke-width: 0.1rem;
|
||||
}
|
||||
#main_header {
|
||||
padding: 1rem 1.5rem;
|
||||
@ -1084,7 +1080,7 @@ sm-copy {
|
||||
#article_wrapper {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.article-section{
|
||||
.article-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(40ch, 1fr));
|
||||
}
|
||||
@ -1164,4 +1160,4 @@ sm-copy {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
30
index.html
30
index.html
@ -10,8 +10,8 @@
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
|
||||
rel="stylesheet">
|
||||
<script src="purify.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script>
|
||||
@ -1493,8 +1493,9 @@
|
||||
animateTo(getRef('article_name_wrapper'), slideInRight, animOptions)
|
||||
}
|
||||
}
|
||||
} else if (e.target.classList.contains('heading')) {
|
||||
floGlobals.appObjects[floGlobals.currentArticle.id].sections[e.target.dataset.index].title = e.target.value.trim()
|
||||
} else if (e.target.closest('text-field')) {
|
||||
const heading = e.target.closest('.heading');
|
||||
floGlobals.appObjects[floGlobals.currentArticle.id].sections[heading.dataset.index].title = e.target.value.trim()
|
||||
floCloudAPI.updateObjectData(floGlobals.currentArticle.id)
|
||||
.then((res) => {
|
||||
notify('Updated heading', 'success')
|
||||
@ -1693,20 +1694,27 @@
|
||||
if (floGlobals.isSubAdmin) {
|
||||
const category = getRef('published_article_category').value
|
||||
const tags = getRef('article_tags').value
|
||||
console.log(category, tags)
|
||||
return
|
||||
getConfirmation('Request publishing?', {
|
||||
message: 'Send this article as publishing candidate on RanchiMall TImes',
|
||||
confirmText: 'Request'
|
||||
})
|
||||
.then(res => {
|
||||
if (res) {
|
||||
const content = getCleanExportContent();
|
||||
const readTime = getReadingTime(createElement('div', { innerHTML: content }).textContent)
|
||||
let allContributors = new Set()
|
||||
selectedContent.forEach(({ contributors }) => {
|
||||
contributors.forEach(id => allContributors.add(id))
|
||||
});
|
||||
floCloudAPI.sendGeneralData({
|
||||
articleID: pagesData.params.articleID,
|
||||
title: floGlobals.appObjects.cc.articleList[floGlobals.currentArticle.id].title,
|
||||
content: getCleanExportContent(),
|
||||
content,
|
||||
readTime,
|
||||
category,
|
||||
tags,
|
||||
contributors: [...allContributors]
|
||||
|
||||
}, 'publishing_requests', {
|
||||
application: 'Test_RM_Times',
|
||||
receiverID: 'FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf'
|
||||
@ -2563,7 +2571,6 @@
|
||||
}
|
||||
</script>
|
||||
<script id="onLoadStartUp">
|
||||
floGlobals.isSubAdmin = false
|
||||
let maxCardsPerSection
|
||||
|
||||
function onLoadStartUp() {
|
||||
@ -12417,13 +12424,6 @@
|
||||
padding-top: 1.5rem
|
||||
}
|
||||
|
||||
img {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 40vh
|
||||
}
|
||||
|
||||
time,
|
||||
#reading_time {
|
||||
font-size: .8rem
|
||||
|
||||
Loading…
Reference in New Issue
Block a user