Skip to content

Commit

Permalink
Design corrections
Browse files Browse the repository at this point in the history
  • Loading branch information
@arnaucasau
arnaucasau committed Oct 18, 2023
1 parent 6dc2992 commit ab56070
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 25 deletions.
34 changes: 17 additions & 17 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<body class="cds-theme-zone-white custom-theme">

<header>
<div class="cds--grid layout-lead-space-fixed__container">
<div class="inside-header cds--grid layout-lead-space-fixed__container">
<img src = "ecosystem-logo.svg" width="350px" alt="Qiskit Ecosystem"/>
<p class="title">Explore projects that use or extend Qiskit</p>

Expand Down Expand Up @@ -45,8 +45,8 @@ <h5 class="section">Providers</h5>
<cds-tile color-scheme="white">
<h2 class="project-title">Project title</h2>
<div class="tags">
<cds-tag type="purple" title="ibm-quantum" size="sm">Algorithms</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="sm">Physics</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="md">Algorithms</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="md">Physics</cds-tag>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique odio, nostrum voluptatum quidem tempore dolores! Iste vero reprehenderit rerum minima! Laudantium quia nemo aliquid dolorem sit at. Aliquid, consequuntur culpa!</p>
<cds-link href="https://ibm.com">
Expand Down Expand Up @@ -74,8 +74,8 @@ <h5 class="section">Libraries</h5>
<cds-tile color-scheme="white">
<h2 class="project-title">Example 1</h2>
<div class="tags">
<cds-tag type="cyan" title="ibm-quantum" size="sm">IBM Quantum</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="sm">Algorithms</cds-tag>
<cds-tag type="cyan" title="ibm-quantum" size="md">IBM Quantum</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="md">Algorithms</cds-tag>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique odio, nostrum voluptatum quidem tempore dolores! Iste vero reprehenderit rerum minima! Laudantium quia nemo aliquid dolorem sit at. Aliquid, consequuntur culpa!</p>
<cds-link href="https://ibm.com">
Expand All @@ -97,8 +97,8 @@ <h2 class="project-title">Example 1</h2>
<cds-tile color-scheme="white">
<h2 class="project-title">Example 2</h2>
<div class="tags">
<cds-tag type="purple" title="ibm-quantum" size="sm">Algorithms</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="sm">Julia</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="md">Algorithms</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="md">Julia</cds-tag>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique odio, nostrum voluptatum quidem tempore dolores! Iste vero reprehenderit rerum minima! Laudantium quia nemo aliquid dolorem sit at. Aliquid, consequuntur culpa!</p>
<cds-link href="https://ibm.com">
Expand All @@ -120,7 +120,7 @@ <h2 class="project-title">Example 2</h2>
<cds-tile color-scheme="white">
<h2 class="project-title">Example 3</h2>
<div class="tags">
<cds-tag type="cyan" title="ibm-quantum" size="sm">IBM Quantum</cds-tag>
<cds-tag type="cyan" title="ibm-quantum" size="md">IBM Quantum</cds-tag>
</div>
<div class="description">
<input type="checkbox" class="read-more-input" id="extra-1"/>
Expand All @@ -146,7 +146,7 @@ <h2 class="project-title">Example 3</h2>
<cds-tile color-scheme="white">
<h2 class="project-title">Example 4</h2>
<div class="tags">
<cds-tag type="purple" title="ibm-quantum" size="sm">Visualization</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="md">Visualization</cds-tag>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique odio, nostrum voluptatum quidem tempore dolores! Iste vero reprehenderit rerum minima! Laudantium quia nemo aliquid dolorem sit at. Aliquid, consequuntur culpa!</p>
<cds-link href="https://ibm.com">
Expand All @@ -168,9 +168,9 @@ <h2 class="project-title">Example 4</h2>
<cds-tile color-scheme="white">
<h2 class="project-title">Example 5</h2>
<div class="tags">
<cds-tag type="purple" title="ibm-quantum" size="sm">Algorithms</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="sm">Chemistry</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="sm">Physics</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="md">Algorithms</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="md">Chemistry</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="md">Physics</cds-tag>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique odio, nostrum voluptatum quidem tempore dolores! Iste vero reprehenderit rerum minima! Laudantium quia nemo aliquid dolorem sit at. Aliquid, consequuntur culpa!</p>
<div class="links">
Expand Down Expand Up @@ -207,7 +207,7 @@ <h2 class="project-title">Example 5</h2>
<cds-tile color-scheme="white">
<h2 class="project-title">Example 6</h2>
<div class="tags">
<cds-tag type="purple" title="ibm-quantum" size="sm">Finance</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="md">Finance</cds-tag>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique odio, nostrum voluptatum quidem tempore dolores! Iste vero reprehenderit rerum minima! Laudantium quia nemo aliquid dolorem sit at. Aliquid, consequuntur culpa!</p>
<cds-link href="https://ibm.com">
Expand All @@ -229,7 +229,7 @@ <h2 class="project-title">Example 6</h2>
<cds-tile color-scheme="white">
<h2 class="project-title">Example 7</h2>
<div class="tags">
<cds-tag type="cyan" title="ibm-quantum" size="sm">IBM Quantum</cds-tag>
<cds-tag type="cyan" title="ibm-quantum" size="md">IBM Quantum</cds-tag>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique odio, nostrum voluptatum quidem tempore dolores! Iste vero reprehenderit rerum minima! Laudantium quia nemo aliquid dolorem sit at. Aliquid, consequuntur culpa!</p>
<cds-link href="https://ibm.com">
Expand All @@ -251,8 +251,8 @@ <h2 class="project-title">Example 7</h2>
<cds-tile color-scheme="white">
<h2 class="project-title">Example 8</h2>
<div class="tags">
<cds-tag type="cyan" title="ibm-quantum" size="sm">IBM Quantum</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="sm">Algorithms</cds-tag>
<cds-tag type="cyan" title="ibm-quantum" size="md">IBM Quantum</cds-tag>
<cds-tag type="purple" title="ibm-quantum" size="md">Algorithms</cds-tag>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique odio, nostrum voluptatum quidem tempore dolores! Iste vero reprehenderit rerum minima! Laudantium quia nemo aliquid dolorem sit at. Aliquid, consequuntur culpa!</p>
<div class="links">
Expand Down Expand Up @@ -288,4 +288,4 @@ <h2 class="project-title">Example 8</h2>
</div>

</body>
</html>
</html>
31 changes: 23 additions & 8 deletions docs/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,21 +66,25 @@ body {
}

header{
padding: 20px 0px 20px 0px;
padding: 24px 0px 24px 0px;
background-color: white;
}

.inside-header{
padding: 0px 32px 0px 32px;
}

.content{
padding: 20px 30px 20px 30px;
margin-bottom: 15px;
padding: 24px 32px 24px 32px;
margin-bottom: 16px;
}

.cards{
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 30px;
margin-bottom: 30px;
gap: 32px;
margin-top: 32px;
margin-bottom: 32px;
}

.card{
Expand All @@ -93,15 +97,21 @@ header{
cds-tile{
display: flex;
flex-flow: column;
gap: 15px;
gap: 16px;
background-color: white;
padding-left: 0;
padding-right: 0;
}

.tags{
display: flex;
flex-flow: row wrap;
}

cds-tag{
margin-left: 0;
}

.project-title{
font-size: 23px;
line-height: 1.25;
Expand Down Expand Up @@ -129,6 +139,11 @@ p {
display: block;
}

.link svg{
vertical-align: middle;
margin-left: 4px;
}

/* ##### Read more button ##### */

.read-more-input{
Expand Down Expand Up @@ -184,4 +199,4 @@ p {
.card{
flex: 0 1 95%;
}
}
}

0 comments on commit ab56070

Please sign in to comment.