RanchiMall/rmtimes
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor UI fixes

Browse Source
This commit is contained in:
sairaj mote 2022-02-19 17:47:32 +05:30
parent 1297a87fe1
commit bb9fd9baa9
4 changed files with 34 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
css/main.css
View File

@ -186,7 +186,6 @@ h4,
h5, h5,
h6 { h6 {
font-weight: 400; font-weight: 400;
letter-spacing: 0.01em;
font-family: "Calistoga", cursive; font-family: "Calistoga", cursive;
} }
@ -470,8 +469,8 @@ h3 {
} }
details { details {
border-top: thin rgba(var(--text-color), 0.1) solid; border-top: thin rgba(var(--text-color), 0.3) solid;
border-bottom: thin rgba(var(--text-color), 0.1) solid; border-bottom: thin rgba(var(--text-color), 0.3) solid;
} }
details summary { details summary {
display: flex; display: flex;
@ -806,6 +805,7 @@ theme-toggle {
left: 0; left: 0;
top: 5rem; top: 5rem;
padding: 1.5rem; padding: 1.5rem;
z-index: 5;
} }
#article_map_container { #article_map_container {
@ -827,23 +827,11 @@ theme-toggle {
position: relative; position: relative;
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
align-content: flex-end;
width: 100%;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.hero-section p { .hero-section p {
color: inherit; color: inherit;
} }
.hero-section .overlay {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
z-index: -1;
}
#article_image { #article_image {
margin-top: 1.5rem; margin-top: 1.5rem;
@ -925,7 +913,7 @@ theme-toggle {
.floating-button { .floating-button {
position: fixed; position: fixed;
z-index: 2; z-index: 5;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
border-radius: 2rem; border-radius: 2rem;
bottom: 0; bottom: 0;
@ -1274,14 +1262,6 @@ theme-toggle {
line-height: 1.3; line-height: 1.3;
} }
#article {
padding: 0 4vw;
}
#article main {
width: 60ch;
margin-left: 4vw;
}
#article_aside { #article_aside {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
@ -1302,6 +1282,18 @@ theme-toggle {
color: var(--accent-color) !important; color: var(--accent-color) !important;
} }
#article {
padding: 0 4vw;
}
#article main {
display: grid;
grid-template-columns: 60ch 1fr;
margin-left: 4vw;
}
#article main > * {
grid-column: 1/2;
}
.hero-section { .hero-section {
margin-top: 1.5rem; margin-top: 1.5rem;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

38
css/main.scss
View File

@ -175,7 +175,6 @@ h4,
h5, h5,
h6 { h6 {
font-weight: 400; font-weight: 400;
letter-spacing: 0.01em;
font-family: "Calistoga", cursive; font-family: "Calistoga", cursive;
} }
@ -451,8 +450,8 @@ h3 {
} }
} }
details { details {
border-top: thin rgba(var(--text-color), 0.1) solid; border-top: thin rgba(var(--text-color), 0.3) solid;
border-bottom: thin rgba(var(--text-color), 0.1) solid; border-bottom: thin rgba(var(--text-color), 0.3) solid;
summary { summary {
display: flex; display: flex;
user-select: none; user-select: none;
@ -763,6 +762,7 @@ theme-toggle {
left: 0; left: 0;
top: 5rem; top: 5rem;
padding: 1.5rem; padding: 1.5rem;
z-index: 5;
} }
#article_map_container { #article_map_container {
margin-top: 1.5rem; margin-top: 1.5rem;
@ -782,22 +782,10 @@ theme-toggle {
position: relative; position: relative;
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
align-content: flex-end;
width: 100%;
margin-top: 0.5rem; margin-top: 0.5rem;
p { p {
color: inherit; color: inherit;
} }
.overlay {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
z-index: -1;
}
} }
#article_image { #article_image {
margin-top: 1.5rem; margin-top: 1.5rem;
@ -880,7 +868,7 @@ theme-toggle {
.floating-button { .floating-button {
position: fixed; position: fixed;
z-index: 2; z-index: 5;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
border-radius: 2rem; border-radius: 2rem;
bottom: 0; bottom: 0;
@ -1204,13 +1192,6 @@ theme-toggle {
line-height: 1.3; line-height: 1.3;
} }
} }
#article {
padding: 0 4vw;
main {
width: 60ch;
margin-left: 4vw;
}
}
#article_aside { #article_aside {
position: sticky; position: sticky;
top: 0; top: 0;
@ -1229,6 +1210,17 @@ theme-toggle {
color: var(--accent-color) !important; color: var(--accent-color) !important;
} }
} }
#article {
padding: 0 4vw;
main {
display: grid;
grid-template-columns: 60ch 1fr;
margin-left: 4vw;
& > * {
grid-column: 1/2;
}
}
}
.hero-section { .hero-section {
margin-top: 1.5rem; margin-top: 1.5rem;
} }

4
index.html
View File

@ -241,7 +241,7 @@
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z" /> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z" />
</svg> </svg>
<a href="" class="capitalize" id="article_category"></a> <div id="article_category"></div>
</div> </div>
<h1 id="article_title"></h1> <h1 id="article_title"></h1>
<p id="article_summary"></p> <p id="article_summary"></p>
@ -1243,7 +1243,7 @@
frag.append(createElement('a', { frag.append(createElement('a', {
className: 'article-card__category interact', className: 'article-card__category interact',
attributes: { href: `#/explore?type=category&query=${category}` }, attributes: { href: `#/explore?type=category&query=${category}` },
textContent: category textContent: category.charAt(0).toUpperCase() + category.slice(1)
})) }))
}) })
getRef('article_category').innerHTML = '' getRef('article_category').innerHTML = ''