Skip to content

Commit

Permalink
Merge #68: fix issues
Browse files Browse the repository at this point in the history 
36e1da4 fix favicon issue (Graeme Byrne)
1ce0e97 fix issues (Graeme Byrne)

Pull request description:

  [Invalid URL: /undefined #5](#5)
  [Missing elements in the new design for blog posts #10](#10)
  [Remove # prefix from table of contents items #33](#33)
  [Missing paragraph separator in About page #34](#34)
  [Ask designer how to implement different types of callouts components #35](#35)
  [Blog post card size is not the same as in the design (full width) #39](#39)
  [Ask the designer how to implement a link inside a key feature card #42](#42)
  [Ask the designer how body content should look for wide screens #46](#46)
  [Homepage hero element is not like the design #51](#51)
  [Blog post footer navigation doesn't change the main image #53](#53)
  [Enable second level of indentation in TableOfContents section #58](#58)
  [Update the favicons #61](#61)
  [First card in key features is not shown #62](#62)

ACKs for top commit:
  josecelano:
    ACK 36e1da4

Tree-SHA512: 3a3665dcbb1a67b34f11ebef3ad7c801203a126219634eeb524c1739268678f3ca17d185e593e4a8e45b958e20d257e5bacb47967a616785c7d72d96cdb41609
  • Loading branch information
@josecelano
josecelano committed Oct 3, 2024
2 parents d1b2b56 + 36e1da4 commit 4fbfc01
Show file tree
Hide file tree
Showing 52 changed files with 725 additions and 595 deletions.
6 changes: 3 additions & 3 deletions histoire.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ export default defineConfig({
theme: {
title: 'Histoire',
logo: {
square: './static/favicons/favicon.png',
light: './static/favicons/favicon.png',
dark: './static/favicons/favicon.png'
square: './static/favicons/favicon.ico',
light: './static/favicons/favicon.ico',
dark: './static/favicons/favicon.ico'
},
favicon: './static/favicons/favicon.ico',
colors: {
Expand Down
8 changes: 2 additions & 6 deletions src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,10 @@
href="%sveltekit.assets%/favicons/favicon-16x16.png"
/>
<link rel="manifest" href="%sveltekit.assets%/favicons/site.webmanifest" />
<link
rel="mask-icon"
href="%sveltekit.assets%/favicons/safari-pinned-tab.svg"
color="#0ca4a5"
/>

<link rel="shortcut icon" href="%sveltekit.assets%/favicons/favicon.ico" />

<link rel="icon" href="%sveltekit.assets%/favicons/favicon.png" />
<link rel="icon" href="%sveltekit.assets%/favicons/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico" />

<!-- Tell browser this site is responsive -->
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/atoms/Banner.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<style lang="scss">
.svg-container {
height: 480px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width='900' height='10' viewBox='0 0 768 480' fill='rgb(254, 74, 30)'><path d='M1005.2 123.646C1027.43 11.7464 953.881 -97.3506 843.527 -126.92L138.041 -315.954C40.5775 -342.07 -63.6767 -288.152 -91.5498 -191.16C-119.946 -92.2144 -61.7805 10.2473 37.2454 36.7812L306.002 108.794L55.7571 263.014C-106.71 363.089 -70.6249 608.894 113.559 658.246C170.006 673.371 230.427 665.068 280.715 635.209L900.796 267.959C954.822 237.428 993.036 184.656 1005.25 123.451L1005.2 123.646Z' fill='rgb(254, 74, 30)' fill-opacity='1'/></svg>");
background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width='900' height='10' viewBox='0 0 768 480' fill='rgb(254, 74, 30)'><path d='M1005.2 123.646C1027.43 11.7464 953.881 -97.3506 843.527 -126.92L138.041 -315.954C40.5775 -342.07 -63.6767 -288.152 -91.5498 -191.16C-119.946 -92.2144 -61.7805 10.2473 37.2454 36.7812L306.002 108.794L55.7571 263.014C-106.71 363.089 -70.6249 608.894 113.559 658.246C170.006 673.371 230.427 665.068 280.715 635.209L900.796 267.959C954.822 237.428 993.036 184.656 1005.25 123.451L1005.2 123.646Z' fill='rgb(245, 245, 245)' fill-opacity='.12'/></svg>");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
Expand Down
6 changes: 3 additions & 3 deletions src/lib/components/atoms/HeroCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@
<style lang="scss">
.details-card {
background-color: rgba(26, 26, 26, 0.48);
padding: 1.5rem;
padding: 1.4rem;
border-radius: 1.5rem;
p {
color: rgba(245, 245, 245, 0.8);
font-size: 16px;
min-height: 100px;
margin-top: 28px;
margin-block: 28px;
line-height: 1.5;
}
}
Expand Down
9 changes: 2 additions & 7 deletions src/lib/components/atoms/Slider.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
<div class="slider-container">
{#each titleArr as item}
<div class={item.link ? 'has-link' : ''}>
<!-- Render title and wrap with a link if available -->
{#if item.link}
<a href={item.link} target="_blank" rel="noopener noreferrer">
<p>{item.title}</p>
Expand All @@ -37,10 +36,6 @@
position: relative;
left: 0;
@media (min-width: 2080px) {
justify-content: center;
}
div {
flex: 0 0 auto;
width: 280px;
Expand All @@ -52,7 +47,7 @@
border-radius: 1.5rem;
background-color: rgba(255, 49, 0, 0.8);
box-sizing: border-box;
border: 1px solid transparent;
border: 2px solid transparent;
a {
color: rgba(245, 245, 245, 0.96);
Expand All @@ -61,7 +56,7 @@
}
div.has-link:hover {
border: 1px solid rgba(245, 245, 245, 0.92);
border: 2px solid rgba(245, 245, 245, 0.92);
cursor: pointer;
}
Expand Down
40 changes: 20 additions & 20 deletions src/lib/components/atoms/Table.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,11 @@
</table>
</div>

<style>
<style lang="scss">
@import '$lib/scss/breakpoints.scss';
.table-container {
overflow-x: auto;
overflow-x: auto; // Allows horizontal scrolling
margin-top: 3rem;
padding-inline: 1.5rem;
}
Expand All @@ -53,27 +55,25 @@
border-bottom: 1px solid black;
padding: 8px;
text-align: left;
white-space: nowrap;
}
/* Scrollbar styles */
.table-container::-webkit-scrollbar {
height: 12px; /* Adjust the height of the scrollbar */
white-space: normal; // Change from nowrap to normal for better wrapping
overflow: hidden; // Hide overflowing content
text-overflow: ellipsis; // Add ellipsis for overflowing text
}
.table-container::-webkit-scrollbar-track {
background: #f1f1f1; /* Background of the scrollbar track */
// Media queries for responsiveness
@include for-phone-only {
th,
td {
padding: 4px; // Reduce padding for smaller screens
font-size: 12px; // Reduce font size for smaller screens
}
}
.table-container::-webkit-scrollbar-thumb {
background-color: rgba(255, 49, 0, 1); /* The sliding part of the scrollbar */
border-radius: 10px; /* Rounded corners for the scrollbar */
border: 2px solid #f1f1f1; /* Optional: border around the scrollbar thumb */
}
/* Firefox scrollbar styling */
.table-container {
scrollbar-width: thin; /* For Firefox */
scrollbar-color: rgba(255, 49, 0, 1) #f1f1f1; /* Thumb color and track color */
@include for-tablet-portrait-up {
th,
td {
padding: 8px; // Normal padding for tablets and up
font-size: 14px; // Normal font size for tablets and up
}
}
</style>
60 changes: 50 additions & 10 deletions src/lib/components/atoms/TableOfContents.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
interface Section {
name: string;
id: string;
subsections?: Section[];
}
export let sections: Section[] = [];
Expand All @@ -30,6 +31,14 @@
if (sectionElement) {
observer.observe(sectionElement);
}
if (section.subsections) {
section.subsections.forEach((subsection) => {
const subsectionElement = document.getElementById(subsection.id);
if (subsectionElement) {
observer.observe(subsectionElement);
}
});
}
});
return () => {
Expand All @@ -43,6 +52,15 @@
{#each sections as section}
<li class={section.id === activeSection ? 'active' : ''}>
<a href={'#' + section.id}>{section.name}</a>
{#if section.subsections && section.subsections.length > 0}
<ul class="sublist">
{#each section.subsections as subsection}
<li class={subsection.id === activeSection ? 'active' : ''}>
<a href={'#' + subsection.id}>{subsection.name}</a>
</li>
{/each}
</ul>
{/if}
</li>
{/each}
</ul>
Expand All @@ -53,7 +71,7 @@
.sticky-nav {
background: rgba(26, 26, 26, 1);
width: 350px;
width: 300px;
padding-inline: 0;
position: sticky;
top: 40px;
Expand All @@ -64,18 +82,40 @@
list-style: none;
padding: 0;
margin: 0;
}
.active {
font-weight: bold;
}
li {
margin-top: 16px;
a {
color: rgba(245, 245, 245, 0.96);
font-size: 0.875rem;
text-decoration: none;
a {
color: rgba(245, 245, 245, 0.96);
font-size: 0.875rem;
&:hover {
color: rgba(255, 49, 0, 0.96);
}
}
&:hover {
color: rgba(255, 49, 0, 0.96);
&.active a {
font-weight: bold;
color: rgba(255, 49, 0, 0.96);
}
/* Sublist styling */
ul.sublist {
margin-left: 20px;
list-style-type: none;
margin-top: 16px;
li {
margin-top: 8px;
ul.sublist {
margin-left: 20px;
list-style-type: circle;
}
}
}
}
}
</style>
50 changes: 17 additions & 33 deletions src/lib/components/molecules/Callout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,54 +18,38 @@
{/if}
</div>
{/if}
<slot />
<div class="content">
<slot />
</div>
</div>

<style lang="scss">
.callout-block {
--bg-color: var(--color--page-background);
--accent-color: transparent;
--text-color: var(--color--text);
margin: 40px 0 30px;
padding: 25px 25px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background: var(--bg-color);
color: var(--text-color);
border-left: 4px solid var(--accent-color);
position: relative;
display: flex;
gap: 1rem;
background: rgba(36, 36, 36, 1);
color: rgba(245, 245, 245, 0.96);
border: 1px solid rgba(245, 245, 245, 0.08);
border-radius: 1.5rem;
padding: 24px;
margin-block: 1.5rem;
.icon-wrapper {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
transform: translate(calc(-50% - 1.5px), -50%);
background: var(--color--post-page-background);
padding: 8px;
border-radius: 50%;
fill: var(--accent-color);
color: var(--accent-color);
background-color: transparent;
flex-shrink: 0;
}
&.info {
--bg-color: var(--color--callout-background--info);
--accent-color: var(--color--callout-accent--info);
background-color: rgba(245, 245, 245, 0.08);
}
&.warning {
--bg-color: var(--color--callout-background--warning);
--accent-color: var(--color--callout-accent--warning);
background-color: rgba(245, 245, 245, 0.08);
}
&.error {
--bg-color: var(--color--callout-background--error);
--accent-color: var(--color--callout-accent--error);
background-color: rgba(245, 245, 245, 0.08);
}
&.success {
--bg-color: var(--color--callout-background--success);
--accent-color: var(--color--callout-accent--success);
background-color: rgba(245, 245, 245, 0.08);
}
}
</style>
8 changes: 4 additions & 4 deletions src/lib/components/molecules/CodeBlock.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
.code-block {
display: block;
position: relative;
background-color: var(--color--code-background);
background-color: rgba(245, 245, 245, 0.08);
color: var(--color--code-text);
font-family: var(--font--mono);
font-size: 1rem;
Expand Down Expand Up @@ -77,15 +77,15 @@
position: absolute;
right: 0;
top: -15px;
background: inherit;
background-color: rgba(36, 36, 36, 1);
border-radius: 8px;
padding: 5px 10px;
z-index: 2;
font-size: 0.85em;
}
.filename {
background: inherit;
background-color: rgba(245, 245, 245, 0.08);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-bottom: -2px;
Expand Down Expand Up @@ -119,7 +119,7 @@
}
.copy-button-gray:hover {
background-color: #2d3748;
background-color: rgba(245, 245, 245, 0.08);
}
}
</style>
Loading

0 comments on commit 4fbfc01

Please sign in to comment.