Skip to content

Commit

Permalink
Merge pull request #322 from DSACMS/Fix-home-page-cards
Browse files Browse the repository at this point in the history 
Fix home page cards
  • Loading branch information
@DinneK
DinneK authored Feb 11, 2025
2 parents 1acb32b + bc90986 commit ded0138
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 193 deletions.
77 changes: 31 additions & 46 deletions app/site/_includes/nav.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,57 +6,42 @@
<img src="{{ "/assets/img/cms-logo.jpg" | url }}" class="logo" alt="CMS Logo">
<div class="usa-logo">
<em class="usa-logo__text">
<a href="{{ "/" | url}}" title="{{site.title}}">Open Source Respository Metrics Website</a>
<a href="{{ "/" | url}}" title="{{site.title}}">Open Source Repository Metrics Website</a>
</em>
</div>
<button class="usa-menu-btn menu-btn-styling">
<svg
class="usa-icon--size-5 toggle-icon"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="{{ site.baseurl }}/assets/img/sprite.svg#menu">
</svg>
</button>
</div>
</div>
<nav aria-label="Primary navigation" class="usa-nav nav-styling">
<ul class="usa-nav__primary usa-accordion usa-nav__primary-navigation">
<nav aria-label="Primary navigation" class="usa-nav">
<button class="usa-nav__close">
<svg class="usa-icon--size-4 button-styling" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
</svg>
</button>
<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<button
type="button"
class="usa-accordion__button usa-nav__link button-styling"
aria-expanded="false"
aria-controls="basic-nav-section-one"
>
<svg
class="usa-icon--size-7 toggle-icon"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="{{ site.baseurl }}/assets/img/sprite.svg#menu">
</svg>
</button>
<ul id="basic-nav-section-one" class="usa-nav__submenu">
<li class="close-icon">
<svg class="usa-icon--size-4 button-styling" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
</svg>
</li>
<li class="usa-nav__primary-item">
<a href="{{ "/" | url}}" class="usa-nav-link {% if page.url == "/" %}usa-current{% endif %}">
<span>Home</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a
href="{{ "/organizations/" | url}}"
class="usa-nav-link {% if page.url contains "/organizations/" %}usa-current{% endif %}"
>
<span>Organizations</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a
href="{{ "/projects/" | url}}"
class="usa-nav-link {% if page.url contains "/projects/" %}usa-current{% endif %}"
>
<span>Projects</span>
</a>
</li>
</ul>
<a href="{{ "/" | url}}" class="usa-nav-link {% if page.url == "/" %}usa-current{% endif %}">
<span>Home</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a href="{{ "/organizations/" | url}}" class="usa-nav-link {% if page.url contains "/organizations/" %}usa-current{% endif %}">
<span>Organizations</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a href="{{ "/projects/" | url}}" class="usa-nav-link {% if page.url contains "/projects/" %}usa-current{% endif %}">
<span>Projects</span>
</a>
</li>
</ul>
</nav>
Expand Down
1 change: 0 additions & 1 deletion app/site/_layouts/base.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,4 @@
{% include 'footer.liquid' %}
</footer>
</body>
<!-- <script type="module" src="{{ "/src/js/nav.js" | url}}"></script> -->
</html>
14 changes: 4 additions & 10 deletions app/site/index.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,21 @@ layout: base
<div class="grid-container">
<section class="home-page-description">
<div class="description-styling">
<h2>Metrics & Code.JSON</h2>
<h2>Metrics</h2>
</div>
<p>
<p class="home-paragraph">
<strong>Metrics</strong> provides meaningful insights into project performance and code quality,
empowering teams to make informed decisions. By analyzing key data points such as contributor activity,
issue resolution times, code complexity and dependency health, Metrics transforms raw data into actionable visualizations.
With a focus on clarity and accessibility, Metrics enables organizations to monitor progress,
identify improvement opportunities and measure the impact of work.
</p>
<p>
<strong>Code.JSON</strong> serves as a powerful tool for open-source project transparency and compliance.
Code.JSON provides a standerdized metadata format that enables dicoverability, reuse and collaboration on governemnt open-source
projects. Using the <a href="https://github.com/DSACMS/codejson-generator" target="_blank" rel"noopener noreferrer">code.json generator,</a> organizations can effortlessly create and validate their code.json files,
ensuring alignment with federal guidelines while showcasing open-source contributions to the broader community.
</p>
<p>
{{ site.description }}
</p>
</section>
<ul class="usa-card-group-home">
<li class="usa-card tablet:grid-col-6">
<li class="usa-card tablet:grid-col-9">
<div class="usa-card-outer">
<div class="usa-card-middle">
<a href="{{ "/organizations/" | url}}" class="href-home">
Expand All @@ -47,7 +41,7 @@ layout: base
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-6">
<li class="usa-card tablet:grid-col-9">
<div class="usa-card-outer">
<div class="usa-card-middle">
<a href="{{ "/projects/" | url}}" class="href-home">
Expand Down
196 changes: 87 additions & 109 deletions app/src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,104 +57,7 @@ h1 {
font-size: 1.1em;
}

.usa-nav__primary-item {
display: flex;
justify-content: flex-start;
}

.usa-nav {
display: none;
position: relative;
top: 4%;
right: -10%;
background: #fff;
z-index: 1000;
height: fit-content;
}

.usa-nav.is-visible {
display: block;
}

.nav-styling {
width: 5% !important;
}

.nav-styling.usa-nav.is-visible {
height: 35%;
}

.close-icon {
display: flex;
justify-content: flex-end;
margin-top: 1%;
}

.usa-nav__submenu {
padding: 1rem;
border-radius: 10px;
width: fit-content;
background-color: #fff;
list-style: none;
margin: 0;
font-size: 1.5rem;
padding: 10% 15%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.usa-nav__submenu li {
margin-bottom: .6rem;
}

.usa-nav__submenu a {
text-decoration: none;
font-size: 1.125rem;
color: #000;
}

.usa-nav__submenu a.usa-current {
color: #043884;
font-weight: bold;
}

.usa-nav__submenu a:hover {
color: #E7C000;
}

.usa-icon {
fill: #000;
}

.button-styling:hover {
cursor: pointer;
}

.usa-header--basic .usa-nav__primary-item > .usa-current::after,
.usa-header--basic .usa-nav__link:hover::after {
background-color: #fff
}

.usa-nav__primary-navigation button {
text-decoration: none;
}

.usa-nav__primary-navigation button:hover {
text-decoration: none !important;
}

.usa-nav__primary-navigation button:active {
text-decoration: none;
}

.usa-nav__primary-navigation button:focus {
outline: none;
}

.usa-accordion__button.usa-nav__link.button-styling::after {
background-color: #fff;
}

.usa-nav__primary button[aria-expanded="true"] {
.menu-btn-styling {
background-color: #fff;
}

Expand All @@ -180,29 +83,34 @@ h2 {
margin-bottom: 0;
}

.home-paragraph {
font-size: 1.3rem;
}

/* Cards */
.usa-card-group-home {
display: flex;
flex-direction: row;
list-style-type: none;
margin-left: -80px;
flex-direction: column;
width: 95vw;
align-items: center;
margin-left: -8%;
}

.usa-card-outer {
display: flex;
background-color: #043884;
border: none;
border-radius: 70px;
height: 20vh;
width: 25vw;
border-radius: 100px;
height: 15vh;
width: 100%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.usa-card-middle {
display: flex;
background-color: #5C85C1;
border: none;
border-radius: 70px;
border-radius: 100px;
height: 100%;
margin-left: -5px;
width: 98%;
Expand Down Expand Up @@ -230,7 +138,7 @@ h2 {
align-items: center;
background-color: #E0EAF8;
border: none;
border-radius: 70px;
border-radius: 100px;
display: flex;
flex-direction: row;
height: 100%;
Expand All @@ -245,7 +153,7 @@ h2 {
background-color: #fff;
border-radius: 50%;
display: flex;
height: 100px;
height: 75px;
justify-content: center;
margin-left: 6%;
width: 100px;
Expand Down Expand Up @@ -691,7 +599,34 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
outline-offset: 0rem;
}

@media screen and (min-width: 768px) {
@media (max-width: 767px) {
.usa-nav {
display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
background: #fff;
padding: 1rem;
}

.usa-nav.is-visible {
display: block;
}

.usa-menu-btn {
display: block;
}

.usa-nav__close {
display: block;
background: none;
border: none;
cursor: pointer;
}
}

@media (min-width: 768px) {
.logo {
height: 50px;
width: auto;
Expand Down Expand Up @@ -738,10 +673,53 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
.graph-box {
height: 600px;
}

.home-icon-container {
height: 90px;
}
}

@media screen and (min-width: 1024px) {
@media (min-width: 1024px) {
.usa-logo a{
font-size: 1.5em;
}

.usa-menu-btn,
.usa-nav__close {
display: none;
}

.usa-nav {
display: flex;
justify-content: flex-end;
width: 30% !important;
}

.usa-nav__primary-item {
display: inline-block;
}

.usa-nav-link {
text-decoration: none;
}

.usa-card-group-home {
display: flex;
flex-direction: row;
margin-left: 0;
}

.usa-card-outer {
height: 20vh;
}

.usa-card-outer,
.usa-card-middle,
.usa-card__container {
border-radius: 80px;
}

.home-icon-container {
height: 100px;
}
}
Loading

0 comments on commit ded0138

Please sign in to comment.