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.

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

This PR fixes #2 issue for making website responsive #5

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
.LSOverride

# Icon must end with two \r
Icon
Icon


# Thumbnails
._*
Expand All @@ -22,3 +23,5 @@ Icon
Network Trash Folder
Temporary Items
.apdisk

.idea/
111 changes: 74 additions & 37 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,40 +1,62 @@
<html>
<head>
<title>PyData Chicago</title>
<link href="styles/style.css" rel="stylesheet" type="text/css"/>
<link href="styles/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>PyData Chicago</title>

<!-- Bootstrap core CSS -->
<link href="styles/bootstrap.min.css" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet" type="text/css"/>

<!-- Custom styles for this template -->
<!--<link href="styles/jumbotron-narrow.css" rel="stylesheet">-->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<div class="container">
<div class="header clearfix">

<body>
<div class="container text-center">
<a href="/" class="header-link">
<strong>Meetup</strong>
</a>
<a href="http://pydata.org/chicago2016/" class="header-link">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can probably remove this link altogether.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would work fine if we remove the tag altogether

PyData Chicago 2016
PyData Chicago
</a>
</div>

<div class="container text-center">
<header>
<h1>PyData Chicago</h1>
<h2>We love <span class="header-swap"></span>.</h2>
</header>
<img src="images/pydata.png" height="75%"/>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
<div class="container" style="text-align: center">
<img class="img-responsive logo" src="images/pydata.png" style="max-width: 600px" height="50%"/></div>
</div>
</div>

<div class="container description">
<div class="row">
<div class="col-lg-10 mx-auto">
<h3><strong>What is PyData Chicago?</strong></h3>
<h3>
PyData Chicago is a group for users and developers of
data analysis tools to share ideas and learn from each
other. We gather to discuss how best to apply Python tools,
as well as those using R and Julia, to meet the evolving
challenges in data management, processing, analytics, and
visualization. PyData groups, events, and conferences aim
visualization. PyData groups, events, and conferences aim
to provide a venue for users across all the various domains
of data analysis to share their experiences and their techniques.
of data analysis to share their experiences and their techniques.
We're here to learn together, grow together, and
build together.
</h3>
Expand Down Expand Up @@ -77,8 +99,8 @@ <h3><strong>Do you have a Code of Conduct?</strong></h3>
<h3>
Yes, of course! At PyData Chicago, we value the safety and comfort of
each of our members. We follow the <a href="http://www.numfocus.org/code-of-conduct.html">
NumFOCUS Code of Conduct
</a>.
NumFOCUS Code of Conduct
</a>.
</h3>
<h3><strong>Who are the organizers?</strong></h3>
<h3>
Expand All @@ -101,30 +123,45 @@ <h3>
You can find him on <a href="https://twitter.com/willengler">Twitter</a>
and <a href="https://github.com/willengler">GitHub.</a>
</p>

</h3>
</div>
</div>

<div class="row">
<div class="col-lg-10 mx-auto text-center" style="text-align: center">
<h2><strong>Sponsors (Thank You!)</strong></h2>
<a href="http://www.numfocus.org/"><img src="images/numfocus.png" width="32%"></a>
<a href="http://www.allstate.jobs/ListJobs/ByCustom/Allstate-Job-Category/Keyword-Data-Science---Analytics/"><img src="images/allstate.jpg" width="32%"/></a>
<a href="http://www.globus.org"><img src="images/globus.png" width="32%"/></a>
<a href="http://www.urbanccd.org"><img src="images/urbanccd.jpg" width="32%"/></a>
<a href="https://www.continuum.io/"><img src="images/continuum.jpg" width="32%"/></a>
<a href="http://www.oreilly.com/pub/cpc/30899"><img src="http://www.oreilly.com/partner_file/orm_partner_meerkats_125x125.png" /></a>
<a class="mt-1" href="http://www.numfocus.org/"><img src="images/numfocus.png" width="32%"></a>
<a class="mt-1" href="http://www.allstate.jobs/ListJobs/ByCustom/Allstate-Job-Category/Keyword-Data-Science---Analytics/"><img src="images/allstate.jpg" width="32%"/></a>
<a class="mt-1" href="http://www.globus.org"><img src="images/globus.png" width="32%"/></a>
<a class="mt-1" href="http://www.urbanccd.org"><img src="images/urbanccd.jpg" width="32%"/></a>
<a class="mt-1" href="https://www.continuum.io/"><img src="images/continuum.jpg" width="32%"/></a>
<a class="mt-1" href="http://www.oreilly.com/pub/cpc/30899"><img src="http://www.oreilly.com/partner_file/orm_partner_meerkats_125x125.png" /></a>
</div>
</div>

<div class="container text-center buttons">
<a href="http://meetup.com/PyDataChi" class="btn btn-primary btn-large">
Meetup
</a>
<a href="https://twitter.com/PyDataChi" class="btn btn-primary btn-large">
Twitter
</a>
<a href='m&#97;i&#108;to&#58;sa%66ia&#64;%73afia%2E&#114;o&#99;%6&#66;&#115;' class="btn btn-primary btn-large">
Contact Organizer
</a>
<div class="row mt-2">
<div class="col-lg-10 mx-auto">
<div class="container text-center buttons">
<a href="http://meetup.com/PyDataChi" class="btn btn-primary btn-large">
Meetup
</a>
<a href="https://twitter.com/PyDataChi" class="btn btn-primary btn-large">
Twitter
</a>
<a href='m&#97;i&#108;to&#58;sa%66ia&#64;%73afia%2E&#114;o&#99;%6&#66;&#115;' class="btn btn-primary btn-large">
Contact Organizer
</a>
</div>
</div>
<footer class="text-center">
<p>made with coffee and love in chicago</p>
</footer>
</body>
</div>

<footer class="text-center mt-2">
<p>made with coffee and love<span style="font-size:100%;color:red;">&hearts;</span> in chicago
</footer>

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>

</div> <!-- /container -->
</body>
</html>
79 changes: 79 additions & 0 deletions styles/jumbotron-narrow.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/* Space out content a bit */
body {
padding-top: 20px;
padding-bottom: 20px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-right: 15px;
padding-left: 15px;
}

/* Custom page header */
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}

/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}

/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}

/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
26 changes: 20 additions & 6 deletions styles/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,13 @@ header h1 {
margin: 20px;
}

.buttons {
margin: 50px;
}

.buttons a {
margin: 20px;
margin-top: 20px;
margin-left: 20px;
}

.header-link {
padding: 30px;
padding: 30px;
}

.headshot {
Expand All @@ -38,3 +35,20 @@ figure {
text-align: center;
margin: 20px;
}

.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

/*Helper classes*/

.mt-1{
margin-top: 40px;
}

.mt-2{
margin-top: 80px;
}