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

View File

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