Skip to content

Commit

Permalink
Use vars in css
Browse files Browse the repository at this point in the history
  • Loading branch information
mruwnik committed Feb 21, 2024
1 parent 0404e0a commit b1b615b
Show file tree
Hide file tree
Showing 24 changed files with 97 additions and 298 deletions.
7 changes: 3 additions & 4 deletions app/components/Article/article.css
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,8 @@ article .link-popup {
font-style: normal;
font-weight: 300;
line-height: 170%; /* 30.6px */
margin-left: 10px;
z-index: 2;
transform: translate(-20vw, 40px);
transform: translate(-20vw, var(--spacing-40));
transition:
visibility 0s 300ms,
opacity cubic-bezier(1, 0, 1, 1) 300ms;
Expand All @@ -97,8 +96,8 @@ article .defintion {
}
article .link-popup .glossary-popup > img {
width: 100%;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}

article .link-popup.shown {
Expand Down
20 changes: 5 additions & 15 deletions app/components/ArticlesDropdown/dropdown.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,19 @@

.articles-dropdown-container {
z-index: 100;
position: absolute;
padding: 56px;

background-color: #fff;
width: 756px;
top: 80px;
left: 300px;
position: absolute;
padding: var(--spacing-56);
justify-content: space-between;
display: flex;

transition: visibility 0.2s;
visibility: hidden;
}

.articles-dropdown-title.top-margin-large {
margin-top: 56px;
margin-top: var(--spacing-56);
}
.articles-dropdown-entry {
margin: 12px 0;
}
.articles-dropdown-teal-entry {
color: var(--colors-teal-500);
}
.dropdown-button {
padding: 7px 17px;
font-size: 16px;
margin: var(--spacing-12) 0;
}
9 changes: 2 additions & 7 deletions app/components/ArticlesDropdown/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
)

return shown ? null : (
<div className="articles-dropdown-container bordered">
<div className="articles-dropdown-container bordered col-8">
<div>
<ArticlesSection category={INTRODUCTORY} toc={toc} className="padding-bottom-32" />
<ArticlesSection category={ADVANCED} toc={toc} />
Expand All @@ -63,12 +63,7 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
?.sort(sortFuncs['by number of questions'])
.slice(0, 12)
.map((tag) => (
<Link
key={tag.rowId}
className="articles-dropdown-teal-entry"
to={tagUrl(tag)}
text={tag.name}
/>
<Link key={tag.rowId} className="teal-500" to={tagUrl(tag)} text={tag.name} />
))}

<Button action={tagsUrl()} className="secondary">
Expand Down
55 changes: 27 additions & 28 deletions app/components/ArticlesNav/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ type Article = {
article: TOCItem
path?: string[]
current?: string
hideChildren?: boolean
}

const DropdownIcon = ({article, path}: Article) => {
Expand All @@ -17,40 +18,44 @@ const DropdownIcon = ({article, path}: Article) => {
}

const Title = ({article, path, current}: Article) => {
const selectedClass = article?.pageid === current ? ' selected' : ''
if (article.pageid === (path && path[0])) {
return (
<Link to={questionUrl(article)}>
<div className={'article' + selectedClass}>
<div className="articles-headerLine">{article?.title}</div>
</div>
</Link>
)
}
const isHeader = article.pageid === (path && path[0])
const classes = [
isHeader && 'small-bold',
isHeader && 'header',
article?.pageid === current && 'selected',
]
.filter(Boolean)
.join(' ')

return (
<summary className={'articles-title' + selectedClass}>
<summary className={'articles-title ' + classes}>
{!article.hasText ? article.title : <Link to={questionUrl(article)}>{article.title}</Link>}
<DropdownIcon article={article} path={path} />
{!isHeader && <DropdownIcon article={article} path={path} />}
</summary>
)
}

const ArticleLevel = ({article, path, current}: Article) => {
const ArticleLevel = ({article, path, current, hideChildren}: Article) => {
if (!article.hasText && (!article.children || article.children.length === 0)) return null
const isParentClass =
article.pageid !== current && (path || []).includes(article.pageid) ? ' parent' : ''

const currentPage = article.pageid === current
const isParent = (path || []).includes(article.pageid)
const isParentClass = !hideChildren && !currentPage && isParent ? ' parent' : ''

return (
<details
key={article.pageid}
open={path?.includes(article.pageid)}
className={'article' + isParentClass}
>
<Title article={article} path={path} current={current} />
<div className={'articles-dropdown' + (path?.includes(article.pageid) ? ' active' : '')}>
{article.children?.map((child) => (
<ArticleLevel key={child.pageid} article={child} path={path} current={current} />
))}
</div>
{!hideChildren && (
<div className={'articles-dropdown' + (path?.includes(article.pageid) ? ' active' : '')}>
{article.children?.map((child) => (
<ArticleLevel key={child.pageid} article={child} path={path} current={current} />
))}
</div>
)}
</details>
)
}
Expand All @@ -59,10 +64,8 @@ export const ArticlesNav = ({article, path}: Article) => {
const current = path ? path[path.length - 1] : ''

return (
<div className="articles-group">
{/* Section Header */}
<Title article={article} path={path} current={current} />

<div className="articles-group col-4-5 bordered small">
<ArticleLevel article={article} path={path} current={current} hideChildren />
<hr />

{article.children?.map((item) => (
Expand All @@ -71,7 +74,3 @@ export const ArticlesNav = ({article, path}: Article) => {
</div>
)
}

export const EmtpyArticlesNav = () => {
return <div className="articles-group empty"></div>
}
40 changes: 6 additions & 34 deletions app/components/ArticlesNav/menu.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,17 @@
display: none;
}
.articles-group {
height: fit-content;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
width: 22.78vw;
position: relative;
text-align: left;
font-size: 16px;
border-radius: 6px;
border: 1px solid var(--colors-cool-grey-200);
height: fit-content;
/* max-width: 328px; */

overflow-y: scroll;
overflow-x: hidden;
}

.articles-group.empty {
border-color: transparent;
}

.articles-headerLine {
font-weight: 600;
margin: 8px 0px;
padding: 8px 0px 8px 14px; /* top, right, bottom, left */
}

.articles-title {
position: relative;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--text-black);
text-align: left;
display: inline-flex;
align-items: center;
padding: 8px 10px 8px 24px;
padding: var(--spacing-8);
cursor: pointer;
}
.articles-group .dropdown-icon {
Expand All @@ -54,28 +31,23 @@
display: flex;
flex-direction: column;
justify-content: flex-start;
/*gap: 8px;*/
align-items: flex-start;
margin: 5px;
margin: var(--spacing-8);
position: relative;
cursor: pointer;
/* margin-right: 30px; */
}

.articles-dropdown {
padding-left: 48px;
padding-left: var(--spacing-40);
}

.articles-group .selected {
background-color: rgba(237.0000010728836, 250.00000029802322, 249.00000035762787, 1);
}
.articles-group .parent::before {
content: ' ';
background-image: url(/assets/green-dot.svg);
background-repeat: no-repeat;
width: 31px;
width: var(--spacing-32);
height: 8px;
position: relative;
top: 25px;
margin-left: -5px;
left: -5px;
}
23 changes: 11 additions & 12 deletions app/components/Button/button.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
cursor: pointer;
display: inline-flex;
height: var(--spacing-56, 56px);
padding: 7px 21px;
padding: var(--spacing-8) var(--spacing-24);
justify-content: center;
align-items: center;
gap: var(--spacing-4, 4px);
box-shadow: 0px 16px 40px 0px rgba(32, 44, 89, 0.05);
border-radius: 6px;
box-shadow: 0px var(--spacing-16) var(--spacing-40) 0px rgba(32, 44, 89, 0.05);
border-radius: var(--border-radius);
box-sizing: border-box;
}

Expand Down Expand Up @@ -52,7 +52,7 @@

/* #### Composite button #### */
.composite-button {
box-shadow: 0px 16px 40px rgba(175, 183, 194, 0.2);
box-shadow: 0px var(--spacing-16) var(--spacing-40) 0px rgba(175, 183, 194, 0.2);
}

.composite-button > form .button,
Expand All @@ -66,16 +66,16 @@

.composite-button > form:first-child .button,
.composite-button > .button:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
border-left-width: 1px;
border-right: 1px solid transparent;
}

.composite-button > form:last-child .button,
.composite-button > .button:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border-right-width: 1px;
border-left: 1px solid transparent;
}
Expand All @@ -95,14 +95,13 @@
content: attr(data-tooltip);
position: absolute;
transform: translateY(var(--spacing-56, 56px));
padding: 5px;
padding: var(--spacing-4);
color: var(--colors-white);
background: var(--text-black);
background: #333;
background: var(--colors-black);
border-radius: 5px;
display: none;
z-index: 1;
font-size: 16px;
font-size: 16px; /* hard to set via classes, what with this being a pseudoclass */
}

.tooltip:hover::after {
Expand Down
7 changes: 3 additions & 4 deletions app/components/CategoriesNav/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,9 @@ export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps
<Link
key={tagId}
to={tagUrl({tagId, name})}
className={[
styles.categoryTitle,
activeCategoryId == tagId ? 'teal-50-background' : '',
].join(' ')}
className={[styles.categoryTitle, activeCategoryId == tagId ? 'selected' : ''].join(
' '
)}
>
{name} ({questions.length})
</Link>
Expand Down
2 changes: 1 addition & 1 deletion app/components/ContentBox/box.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
padding: var(--spacing-8) var(--spacing-24);
display: inline-flex;
align-items: center;
gap: 4px;
gap: var(--spacing-4);
}

.eclipse-team-bottom {
Expand Down
44 changes: 3 additions & 41 deletions app/components/Footer/footer.css
Original file line number Diff line number Diff line change
@@ -1,50 +1,12 @@
.footer {
margin-top: 104px;
margin-top: var(--spacing-104);
}

.footer-icon {
position: absolute;
top: 231px;
left: 748px;
width: 12px;
height: 12px;
object-fit: contain;
}

.footer-description {
top: 154px;
left: 192px;
display: inline-block;
max-width: 403px;
}

.footer-ecosystem {
margin: 0;
}

.footer-box {
position: absolute;
height: 14.16%;
width: 19.44%;
top: 35.16%;
left: 65.21%;
letter-spacing: -0.01em;
display: inline-block;
}

.footer-volunteers {
height: 12.33%;
top: 35.16%;
left: 45.76%;
letter-spacing: -0.01em;
display: inline-block;
}

.footer-grid {
.footer-contents {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: baseline;
margin: 104px 13.33vw 80px 13.33vw;
margin: var(--spacing-104) 13.33vw var(--spacing-80) 13.33vw;
}
2 changes: 1 addition & 1 deletion app/components/Footer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const FooterBar: FunctionComponent = () => {
return (
<div className="footer" key="footer">
<hr />
<div className="footer-grid">
<div className="footer-contents">
<div className="col-5">
<p className="large-bold teal-500">
<a href="/">AISafety.info</a>
Expand Down
Loading

0 comments on commit b1b615b

Please sign in to comment.