Skip to content

reorganized photo directors and set up images to be replaced for next… #12

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

Open
tjamjam wants to merge 1 commit into
base: main
Choose a base branch
from
Open

reorganized photo directors and set up images to be replaced for next… #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
31 changes: 27 additions & 4 deletions css/cs-template.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,34 @@ Table of contents
margin-bottom: 20px;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
background-image: url("map-background.png");
background-repeat: no-repeat;
background-size: cover;
box-shadow: 5px -15px 25px 1px #ededed;
/* box-shadow: 5px -15px 25px 1px #ededed; */
}

.divider-icon {
border-radius: 100px;
background-color: #D5DCE4;
margin-right: 20px;
height: 65px;
width: 65px;
}

.divider-icon img {
width: 100%;
height: 100%;
}

.large-icon {
border-radius: 100px;
background-color: #D5DCE4;
height: 75px;
width: 75px;
}

.large-icon img {
width: 100%;
height: 100%;
}

.divider-header {
Expand Down Expand Up @@ -94,9 +112,10 @@ Table of contents

/* Special cover at the top of the page */
.cover, .footer {
background-image: url('../images/cover-image.jpg'), linear-gradient(to right,rgba(56,63,69,0.9),rgba(138, 121, 70, 0.75));
background-image: url('../images/client/cover-image.jpg'), linear-gradient(to right,rgba(56,63,69,0.9),rgba(138, 121, 70, 0.75));
background-size: cover;
background-blend-mode: multiply;
background-repeat: no-repeat;
padding: 50px 0;
margin-top: 0px;
color: white;
Expand Down Expand Up @@ -210,6 +229,9 @@ Table of contents
}

.box {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 0 20px;
}
Expand Down Expand Up @@ -573,6 +595,7 @@ p.large-number {
font-family: "Roboto Condensed", sans-serif;
font-weight: 1000;
line-height: 1;
letter-spacing:-.15rem;
}

p.large-emoji {
Expand Down Expand Up @@ -756,7 +779,7 @@ input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #2D3338;
background-color: #CFD4DB;
border: 2px solid #2D3338;
border: 1px solid #2D3338;
margin: 5px;
padding: 0px 15px;
border-radius: 8px;
Expand Down
Binary file removed images/Demand.png
View file
Open in desktop
Binary file not shown.
Binary file removed images/Overview.png
View file
Open in desktop
Binary file not shown.
Binary file removed images/People.png
View file
Open in desktop
Binary file not shown.
Binary file removed images/Place.png
View file
Open in desktop
Binary file not shown.
0 images/Greenfield sankey - demand AMI.png → ...charts/Greenfield sankey - demand AMI.png
View file
Open in desktop
File renamed without changes
0 images/Greenfield sankey - simple demand.png → ...rts/Greenfield sankey - simple demand.png
View file
Open in desktop
File renamed without changes
0 images/Greenfield aerial photo.jpg → images/client/Greenfield aerial photo.jpg
View file
Open in desktop
File renamed without changes
0 images/Greenfield development map.PNG → images/client/Greenfield development map.PNG
View file
Open in desktop
File renamed without changes
0 images/community.png → images/client/client-logo.png
View file
Open in desktop
File renamed without changes
0 images/cover-image.jpg → images/client/cover-image.jpg
View file
Open in desktop
File renamed without changes
Binary file removed images/cover.jpg
View file
Open in desktop
Binary file not shown.
0 images/CommunityScale-logo.png → images/theme/CommunityScale-logo.png
View file
Open in desktop
File renamed without changes
0 images/Demand.svg → images/theme/Demand.svg
View file
Open in desktop
File renamed without changes
0 images/People.svg → images/theme/People.svg
View file
Open in desktop
File renamed without changes
0 images/Place.svg → images/theme/Place.svg
View file
Open in desktop
File renamed without changes
0 images/Results.png → images/theme/Results.png
View file
Open in desktop
File renamed without changes
9 changes: 9 additions & 0 deletions images/theme/Results.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 images/affordable.png → images/theme/affordable.png
View file
Open in desktop
File renamed without changes
Binary file added images/theme/demand-background.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 images/favicon.png → images/theme/favicon.png
View file
Open in desktop
File renamed without changes
0 css/map-background.png → images/theme/map-background.png
View file
Open in desktop
File renamed without changes
0 images/new.png → images/theme/new.png
View file
Open in desktop
File renamed without changes
Binary file added images/theme/people-background.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/theme/place-background.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 images/preserve.png → images/theme/preserve.png
View file
Open in desktop
File renamed without changes
Binary file added images/theme/results-background.jpg
View file
Open in desktop
53 changes: 34 additions & 19 deletions index-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@

<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="icon" type="image/png" href="images/theme/favicon.png">



Expand All @@ -58,7 +58,7 @@
<div class="sticky">
<div class="nav-container" >
<p class="inline-text">
<img src="images/community.png" alt="Greenfield" class="inline-logo">
<img src="images/client/client-logo.png" alt="Greenfield" class="inline-logo">
<span class="title">Housing Plan 2024</span>
</p>
<div class="navbar">
Expand Down Expand Up @@ -103,7 +103,7 @@ <h1>City of Greenfield
<!-- Row with image and text -->
<div class="row">
<div class="six columns" style="margin-top: 2%">
<p><img src="./images/Greenfield aerial photo.jpg" height=auto width=100% title="CommunityScale" alt="CommunityScale"></a></p>
<p><img src="./images/client/Greenfield aerial photo.jpg" height=auto width=100% title="CommunityScale" alt="CommunityScale"></a></p>
</div>
<div class="six columns" style="margin-top: 2%">
<h4>Greenfield is developing a city-wide housing plan</h4>
Expand Down Expand Up @@ -202,15 +202,24 @@ <h6>Greenfield has set three guiding housing goals for Greenfield which encompas
<div class="row">
<div class="boxes">
<div class="box">
<p><img src="images/new.png" style="width:50%; max-width: 80px; min-width: 50px;"></p>
<div class="large-icon">
<img src="images/theme/new.svg" class="inline-image" title="People"/>
</div>
<!-- <p><img src="images/new.png" style="width:50%; max-width: 80px; min-width: 50px;"></p> -->
<h5>Build new housing for all income levels</h5>
</div>
<div class="box">
<p><img src="images/affordable.png" style="width:50%; max-width: 80px; min-width: 50px;"></p>
<div class="large-icon">
<img src="images/theme/affordable.svg" class="inline-image" title="People"/>
</div>
<!-- <p><img src="images/affordable.png" style="width:50%; max-width: 80px; min-width: 50px;"></p> -->
<h5>Provide affordable options for seniors</h5>
</div>
<div class="box">
<p><img src="images/preserve.png" style="width:50%; max-width: 80px; min-width: 50px;"></p>
<div class="large-icon">
<img src="images/theme/preserve.svg" class="inline-image" title="People"/>
</div>
<!-- <p><img src="images/preserve.png" style="width:50%; max-width: 80px; min-width: 50px;"></p> -->
<h5>Fill affordable housing gaps, especially "missing middle"</h5>
</div>
</div>
Expand Down Expand Up @@ -241,12 +250,12 @@ <h5>(To be completed later in the analysis...)</h5>
</div>

<!-- People Divider row -->
<div class="divider" id="People">
<div class="divider" id="People" style="background:linear-gradient(to right,rgba(255, 255, 255, 0.9),rgba(255, 255, 255, 0.8)), url(images/theme/people-background.jpg)">
<div class="container">
<div class="twelve columns center-align">
<div class="divider-header">
<div class="divider-icon">
<img src="images/People.svg" class="inline-image" title="People">
<img src="images/theme/People.svg" class="inline-image" title="People">
</div>
<h2 class="inline-text">People</h2>
</div>
Expand Down Expand Up @@ -519,12 +528,12 @@ <h4>Lower-income households are much more likely cost-burdened (homeowners and r
</div>
</div>

<div class="divider" id="Place">
<div class="divider" id="Place" style="background:linear-gradient(to right,rgba(255, 255, 255, 0.9),rgba(255, 255, 255, 0.8)), url(images/theme/place-background.jpg)">
<div class="container">
<div class="twelve columns center-align">
<div class="divider-header">
<div class="divider-icon">
<img src="images/Place.svg" class="inline-image" title="Place">
<img src="images/theme/Place.svg" class="inline-image" title="Place">
</div>
<h2 class="inline-text">Place</h2>
</div>
Expand Down Expand Up @@ -804,7 +813,7 @@ <h6>There are numerous new projects in the pipeline, especially downtown.</h6>
<div class="row">
<div class="insight">
<div class="five columns">
<p><img src="./images/Greenfield development map.PNG" height=auto width=100% title="CommunityScale" alt="CommunityScale"></a></p>
<p><img src="./images/client/Greenfield development map.PNG" height=auto width=100% title="CommunityScale" alt="CommunityScale"></a></p>
</div>
<div class="seven columns">
<div class="scroll-container">
Expand Down Expand Up @@ -882,12 +891,12 @@ <h6>There are numerous new projects in the pipeline, especially downtown.</h6>
</div>
</div>

<div class="divider" id="Demand">
<div class="divider" id="Demand" style="background:linear-gradient(to right,rgba(255, 255, 255, 0.9),rgba(255, 255, 255, 0.8)), url(images/theme/demand-background.jpg)">
<div class="container">
<div class="twelve columns center-align">
<div class="divider-header">
<div class="divider-icon">
<img src="images/Demand.svg" class="inline-image" title="People"/>
<img src="images/theme/Demand.svg" class="inline-image" title="People"/>
</div>
<h2 class="inline-text">Demand</h2>
</div>
Expand All @@ -904,7 +913,7 @@ <h3>Sources of housing demand in Greenfield</h3>
</div>
<div class="row insight">
<div class="six columns" style="margin-top: 2%">
<p><img src="./images/Greenfield sankey - simple demand.png" height=auto width=100% title="CommunityScale" alt="CommunityScale"></a></p>
<p><img src="./images/charts/Greenfield sankey - simple demand.png" height=auto width=100% title="CommunityScale" alt="CommunityScale"></a></p>
</div>
<div class="six columns" style="margin-top: 2%">
<h4>Greenfield's housing demand orginates from both current and new households.</h4>
Expand Down Expand Up @@ -1116,7 +1125,7 @@ <h3>Housing demand by income level</h3>
<h4>Each source of demand includes a different mix of household incomes.</h4>
</div>
<div class="six columns" style="margin-top: 2%">
<p><img src="./images/Greenfield sankey - demand AMI.png" height=auto width=100% title="CommunityScale" alt="CommunityScale"></a></p>
<p><img src="./images/charts/Greenfield sankey - demand AMI.png" height=auto width=100% title="CommunityScale" alt="CommunityScale"></a></p>
<figcaption>This diagram illustrates how Greenfield’s 10-year housing demand translate into income levels. While this distribution reflects expected demand over the next 10 years, it does not necessarily coincide with the housing production target in the following Results section. Housing for each income level requires a different set of policies, programs, and subsidies to build. In many cases, there simply is not enough capacity to meet the full demand right away.</figcaption>
</div>
</div>
Expand Down Expand Up @@ -1218,10 +1227,16 @@ <h4>Homeownership</h4>
</div>
</div>

<div class="divider">
<div class="divider" id="Results" style="background:linear-gradient(to right,rgba(255, 255, 255, 0.9),rgba(255, 255, 255, 0.8)), url(images/theme/results-background.jpg)">
<div class="container">
<div class="twelve columns center-align">
<h2 id="Results" class="inline-text"><img src="images/Results.png" class="inline-image" title="Results">Results</h2>
<div class="divider-header">
<div class="divider-icon">
<img src="images/theme/Results.svg" class="inline-image" title="People"/>
</div>
<h2 class="inline-text">Results</h2>
</div>
<!-- <h2 id="Results" class="inline-text"><img src="images/theme/Results.png" class="inline-image" title="Results">Results</h2> -->
</div>
</div>
</div>
Expand All @@ -1239,12 +1254,12 @@ <h3>Housing production target</h3>
<div class="footer">
<div class="container">
<div class="unresponsive" style="margin-bottom: 30px;">
<img src="./images/community.png" height=auto width=30px title="Greenfield" alt="Greenfield">
<img src="./images/client/client-logo.png" height=auto width=30px title="Greenfield" alt="Greenfield">
<p><a href="https://greenfield-ma.gov/departments/community_and_economic_development/index.php">Greenfield's Community and Economic Development Department</a> works to improve the quality of life for all in Greenfield by supporting the development of business, housing, and community.</p>
</div>

<div class="unresponsive">
<img src="./images/CommunityScale-logo.png" height=auto width=30px title="CommunityScale" alt="CommunityScale">
<img src="./images/theme/CommunityScale-logo.png" height=auto width=30px title="CommunityScale" alt="CommunityScale">
<p><a href="http://communityscale.io">CommunityScale</a> is a pioneering urban planning and spatial data analysis company serving clients across the United States. <br> Follow CommunityScale on <a href="https://www.linkedin.com/company/communityscale">LinkedIn</a> and <a href="https://twitter.com/CommunityScale">Twitter/X</a>. This dashboard is <a href="https://github.com/CommunityScale/Greenfield">open source</a> MIT license.</p>
</div>
</div>
Expand Down