Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wip(front): update styles for experience aside (#963) #1218

Merged
merged 2 commits into from
Feb 7, 2024
Merged

wip(front): update styles for experience aside (#963) #1218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5926a89
wip(front): update styles for experience aside (#963)
dgrebb Feb 6, 2024
788339c
wip(front): adjust breakpoint padding on CV page (#963)
dgrebb Feb 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion front/src/lib/components/general/Aside/Aside.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
<aside class="collection__aside">
<script>
import '@styles/components/page-nav.css';
</script>

<aside class="collection__aside page-navigation">
<!-- TODO: Each artifact type should have a component
to match, which is dynamically selected by artifact type -->

Expand Down Expand Up @@ -46,6 +50,7 @@
<style lang="postcss">
.collection__aside {
float: right;
opacity: 0.85;
padding-left: 2rem;
width: 25%;
}
Expand Down
15 changes: 12 additions & 3 deletions front/src/lib/components/general/Aside/AsideGroup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,21 @@
</script>

<h2>{title}</h2>
<ul class="{collection}__{title}">
<ul class="{collection}__{title} page-navigation-list">
{#each items as { attributes: { name, slug } }}
<li><a href="/cv/{singleton}/{slug}">{name}</a></li>
{/each}
</ul>

<style>
/* your styles go here */
<style lang="postcss">
.page-navigation-list {
& a {
color: var(--link-clr);
&:hover,
&:focus,
&:focus-visible {
color: var(--link-clr--hover);
}
}
}
</style>
2 changes: 1 addition & 1 deletion front/src/lib/components/general/PageNav/PageNav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
import { categoryClick, relatedClick } from '@utils/uiHelpers.js';
import { focusTrap } from '@utils/actions.js';
import ListIcon from '~icons/gg/list';
import './page-nav.css';
import '@styles/components/page-nav.css';
const { post: postPath, category: categoryPath } = PATHS.one;
const categoriesPath = PATHS.many.categories;

Expand Down
3 changes: 2 additions & 1 deletion ...b/components/general/PageNav/page-nav.css → front/src/lib/styles/components/page-nav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.meat .page-navigation {
h2,
li {
li,
p {
text-align: right;
}
h2 {
Expand Down
3 changes: 2 additions & 1 deletion front/src/lib/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,8 @@ body {
.footer a,
.privacy a,
.category-posts-list .post-item-summary a,
.cv a,
.cv article section a,
.cv .timeline a,
.not-found a {
transition-duration: var(--transition-duration);
transition-property: color, border-color;
Expand Down
4 changes: 2 additions & 2 deletions front/src/lib/styles/pages/cv.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@import '../components/cv-timeline.css';

.cv.meat {
width: 100%;
h1.page-heading {
font-family: var(--font-psbl);
letter-spacing: -0.0875rem;
Expand Down Expand Up @@ -330,7 +329,8 @@
}
}
a {
padding-bottom: 0.5rem;
border: none;
padding-bottom: 0;
}
}
.experience-timeline-date,
Expand Down
13 changes: 12 additions & 1 deletion front/src/routes/cv/[collection]/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
</script>

<PageTransition transitionKey={slug}>
<section class="cv meat {collection}">
<section class="cv meat singleton {collection}">
<span class="flourish" />
<a id="main">Main Content</a>
{#if itemData}
Expand All @@ -56,3 +56,14 @@
<Meta {pageMeta} />
{/key}
{/if}

<style lang="postcss">
.singleton {
max-width: 64rem;
}
@media screen and (min-width: 640px) {
.singleton {
padding: 2.33rem;
}
}
</style>
Loading