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

feat: restyled project ideas page of work program section #910

Merged
merged 5 commits into from
Jan 31, 2025
Merged

feat: restyled project ideas page of work program section #910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8fe715a
added button styling; styled project-ideas page
Queen-codes Jan 23, 2025
b27ffbe
removed comments; added classnames
Queen-codes Jan 23, 2025
c76e144
added a main div around the content and added a classname
Queen-codes Jan 23, 2025
1c315fc
added styles for main-content
Queen-codes Jan 23, 2025
c54003f
Merge branch 'vocab-refresh' into restyle-work-program
TimidRobot Jan 31, 2025
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
56 changes: 46 additions & 10 deletions assets/static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 2.5rem;
font-size: 2.5rem;
}

.home-page main p {
Expand Down Expand Up @@ -81,7 +81,7 @@ table.display {
border-right: 1px solid #ddd;
}

table.display th {
table.display th {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
border-width: 1px;
Expand Down Expand Up @@ -130,6 +130,37 @@ main blockquote {
padding: 1.25em 1.5em;
}

/* BUTTON STYLES FOR PROJECT IDEAS PAGE */
.filter-btn {
border: 2px solid var(--vocabulary-brand-color-tomato);
background-color: transparent;
padding: 0 1rem;
font-size: .81rem;
min-height: 1.81rem;
border-radius: 18.5rem;
cursor: pointer;
margin-bottom: 1rem;
}

/* Hover State */
.filter-btn:hover {
background-color: var(--vocabulary-brand-color-tomato);
color: #fff;
}

/* Active/Selected State */
.filter-btn.btn-dark {
background-color: var(--vocabulary-brand-color-tomato);
color: white;
}

/* Inactive State */
.filter-btn.btn-primary {
background-color: transparent;
color: #000;
border-color: var(--vocabulary-brand-color-tomato);
}

/* PRE STYLES */
pre {
color: rgb(51, 51, 51);
Expand Down Expand Up @@ -261,7 +292,7 @@ main a:has(span.gh-label) {

.hero-section img {
width: auto;
}
}

.hero-section {
display: grid;
Expand All @@ -270,7 +301,7 @@ main a:has(span.gh-label) {
"title title title"
"description description description "
"graphic graphic graphic";

margin-bottom: 6.4em;
gap: 0 4em;
}
Expand All @@ -284,7 +315,7 @@ main a:has(span.gh-label) {
width: 41.67%
}

.projects ul {
.projects ul {
grid-template-columns: 1fr 1fr;

font-size: 1rem;
Expand All @@ -295,7 +326,7 @@ main a:has(span.gh-label) {
margin-bottom: 6rem;
}

.body-container{
.body-container, .main-content{
grid-column: 2 / 10;
}

Expand Down Expand Up @@ -325,12 +356,17 @@ main a:has(span.gh-label) {
font-size: 1rem;
list-style: none;
}
.project-container {
display: flex;
}

.project-description {
margin-left: 10%;
}

@media (min-width: 1314px) {
.hero-image {
grid-column: 3;
margin-top: -6rem;
}
.hero-image {
grid-column: 3;
margin-top: -6rem;
}
}
33 changes: 15 additions & 18 deletions themes/vocabulary_theme/templates/project-ideas.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,21 @@
<h1>Open Source Work Programs: Project Ideas</h1>
<p>This is the project idea list for the <span>current round of open source collaborations at Creative Commons (CC).</span></p>
{% set ideas = site.query('/programs/project-ideas-collection').include_undiscoverable(true) %}
<!--TODO: EVALUATE WHETHER TO KEEP LEGACY DESIGN-->
<div class="filter-labels" id="project-list">
<button type="button" class="button tag btn-dark filter-btn" data-filter="all">All Projects</button>
<button type="button" class="button tag filter-btn" data-filter="difficulty-medium">Difficulty: Medium</button>
<button type="button" class="button tag filter-btn" data-filter="difficulty-hard">Difficulty: Hard</button>
<button type="button" class="button tag filter-btn" data-filter="skill-ansible">Skill: Ansible</button>
<button type="button" class="button tag filter-btn" data-filter="skill-css">Skill: CSS</button>
<button type="button" class="button tag filter-btn" data-filter="skill-docker">Skill: Docker</button>
<button type="button" class="button tag filter-btn" data-filter="skill-javascript">Skill: JavaScript</button>
<button type="button" class="button tag filter-btn" data-filter="skill-php">Skill: PHP</button>
<button type="button" class="button tag filter-btn" data-filter="skill-python">Skill: Python</button>
<button type="button" class="button tag filter-btn" data-filter="skill-wordpress">Skill: WordPress</button>
<button type="button" class="button btn-dark filter-btn" data-filter="all">All Projects</button>
<button type="button" class="button filter-btn" data-filter="difficulty-medium">Difficulty: Medium</button>
<button type="button" class="button filter-btn" data-filter="difficulty-hard">Difficulty: Hard</button>
<button type="button" class="button filter-btn" data-filter="skill-ansible">Skill: Ansible</button>
<button type="button" class="button filter-btn" data-filter="skill-css">Skill: CSS</button>
<button type="button" class="button filter-btn" data-filter="skill-docker">Skill: Docker</button>
<button type="button" class="button filter-btn" data-filter="skill-javascript">Skill: JavaScript</button>
<button type="button" class="button filter-btn" data-filter="skill-php">Skill: PHP</button>
<button type="button" class="button filter-btn" data-filter="skill-python">Skill: Python</button>
<button type="button" class="button filter-btn" data-filter="skill-wordpress">Skill: WordPress</button>
</div>
</header>

<div class="content main-content">
<article class="projects">
<h2>Current Programs</h2>
<p>Here are some highlighted projects currently underway:</p>
Expand All @@ -43,14 +43,11 @@ <h3><a href="#original-ideas">Original Ideas</a></h3>
</ul>
</article>

<!--TODO: EVALUATE WHETHER TO KEEP LEGACY DESIGN/MARKUP-->

<div>
{% for idea in ideas %}
<div>
<h2><a name="{{ idea._slug }}">{{ idea.title }}</a></h2>
<div>
<div>
<div class="project-container">
<div class="project-summary">
<h5>Difficulty</h5>
<p>{{ idea.difficulty }}</p>
<h5>Size</h5>
Expand All @@ -60,7 +57,7 @@ <h5>Skills recommended</h5>
<h5>Project Lead</h5>
{{ idea.lead }}
</div>
<div>
<div class="project-description">
<h3>The Problem</h3>
<p>{{ idea.problem }}</p>
<h3>Expected Outcome</h3>
Expand All @@ -74,7 +71,6 @@ <h3>Resources</h3>
</div>
</div>
<a href="#project-list"><i></i> Back to the Project list</a>
</div>
{% endfor %}
<div>
<h2 class="b-header"><a name="original-ideas">Original Ideas</a></h2>
Expand All @@ -83,4 +79,5 @@ <h2 class="b-header"><a name="original-ideas">Original Ideas</a></h2>
<a href="#project-list"><i></i> Back to the Project list</a>
</div>
</div>
</div>
{% endblock %}