minor UI changes

This commit is contained in:
sairaj mote 2022-01-24 18:38:18 +05:30
parent 12473767ce
commit 82071ce1f4
4 changed files with 31 additions and 10 deletions

View File

@ -501,7 +501,7 @@ sm-copy {
.page-layout, .page-layout,
#preview_page { #preview_page {
display: grid; display: grid;
grid-template-columns: 1rem minmax(0, 1fr) 1rem; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
} }
.page-layout > *, .page-layout > *,
#preview_page > * { #preview_page > * {
@ -627,16 +627,24 @@ theme-toggle {
display: grid; display: grid;
padding: 1.5rem; padding: 1.5rem;
gap: 1.5rem; gap: 1.5rem;
grid-template-columns: minmax(0, 1fr);
}
#news_categories_list {
overflow-x: auto;
} }
.category { .category {
padding: 0.5rem; padding: 0.5rem;
color: inherit; color: inherit;
font-size: 0.9rem; font-size: 0.9rem;
white-space: nowrap;
flex-shrink: 0;
} }
#query_results_list { #query_results_list {
margin: 1rem 0; margin: 1rem 0;
padding-bottom: 2rem;
gap: 1.6rem; gap: 1.6rem;
} }
@ -778,7 +786,7 @@ theme-toggle {
bottom: 0; bottom: 0;
right: 0; right: 0;
margin: 1.5rem; margin: 1.5rem;
padding: 0.8rem; padding: 1rem;
background-color: var(--foreground-color); background-color: var(--foreground-color);
} }
@ -835,7 +843,8 @@ footer {
#preview_popup h1, #preview_popup h1,
#article h1 { #article h1 {
font-size: 1.4rem; font-size: 1.6rem;
line-height: 1.3;
} }
#preview_popup h3:not(:first-of-type), #preview_popup h3:not(:first-of-type),
#article h3:not(:first-of-type) { #article h3:not(:first-of-type) {
@ -913,7 +922,7 @@ footer {
} }
.page-layout { .page-layout {
grid-template-columns: 1fr 90vw 1fr; grid-template-columns: 1fr 80vw 1fr;
} }
.hide-on-desktop { .hide-on-desktop {

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -480,7 +480,7 @@ sm-copy {
.page-layout, .page-layout,
#preview_page { #preview_page {
display: grid; display: grid;
grid-template-columns: 1rem minmax(0, 1fr) 1rem; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
& > * { & > * {
grid-column: 2/3; grid-column: 2/3;
} }
@ -593,18 +593,23 @@ theme-toggle {
display: grid; display: grid;
padding: 1.5rem; padding: 1.5rem;
gap: 1.5rem; gap: 1.5rem;
grid-template-columns: minmax(0, 1fr);
} }
#news_categories_list { #news_categories_list {
overflow-x: auto;
} }
.category { .category {
padding: 0.5rem; padding: 0.5rem;
color: inherit; color: inherit;
font-size: 0.9rem; font-size: 0.9rem;
white-space: nowrap;
flex-shrink: 0;
} }
#query_results_list { #query_results_list {
margin: 1rem 0; margin: 1rem 0;
padding-bottom: 2rem;
gap: 1.6rem; gap: 1.6rem;
} }
.article-card { .article-card {
@ -750,7 +755,7 @@ theme-toggle {
bottom: 0; bottom: 0;
right: 0; right: 0;
margin: 1.5rem; margin: 1.5rem;
padding: 0.8rem; padding: 1rem;
background-color: var(--foreground-color); background-color: var(--foreground-color);
} }
@ -805,7 +810,8 @@ footer {
#preview_popup, #preview_popup,
#article { #article {
h1 { h1 {
font-size: 1.4rem; font-size: 1.6rem;
line-height: 1.3;
} }
h3:not(:first-of-type) { h3:not(:first-of-type) {
@ -874,7 +880,7 @@ footer {
--width: 24rem; --width: 24rem;
} }
.page-layout { .page-layout {
grid-template-columns: 1fr 90vw 1fr; grid-template-columns: 1fr 80vw 1fr;
} }
.hide-on-desktop { .hide-on-desktop {
display: none; display: none;

View File

@ -259,7 +259,7 @@
</svg> </svg>
</button> </button>
</header> </header>
<section id="sign_in" class=""> <section id="sign_in" class="grid gap-1">
<div class="grid gap-0-5"> <div class="grid gap-0-5">
<h3>Sign in</h3> <h3>Sign in</h3>
<p>Liking an article supports and encourages the creators.</p> <p>Liking an article supports and encourages the creators.</p>
@ -595,6 +595,12 @@
case 'preview_popup': case 'preview_popup':
getRef('preview_container').innerHTML = '' getRef('preview_container').innerHTML = ''
break; break;
case 'sign_in_popup':
getRef('sign_in').style = ''
getRef('sign_in').classList.remove('hide')
getRef('sign_up').style = ''
getRef('sign_up').classList.add('hide')
break;
} }
}) })