minor UI changes
This commit is contained in:
parent
12473767ce
commit
82071ce1f4
17
css/main.css
17
css/main.css
@ -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
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user