From 231f71b702d992c58146320cd01d97dd35fef4eb Mon Sep 17 00:00:00 2001 From: jai-k-gohil Date: Wed, 18 Dec 2019 14:21:41 +0530 Subject: [PATCH] Making site responsive and tested for browser visibility --- .gitignore | 5 +- index.html | 111 ++++++++++++++++++++++++------------ styles/jumbotron-narrow.css | 79 +++++++++++++++++++++++++ styles/style.css | 26 +++++++-- 4 files changed, 177 insertions(+), 44 deletions(-) create mode 100644 styles/jumbotron-narrow.css diff --git a/.gitignore b/.gitignore index 660b313..953230e 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,8 @@ .LSOverride # Icon must end with two \r -Icon +Icon + # Thumbnails ._* @@ -22,3 +23,5 @@ Icon Network Trash Folder Temporary Items .apdisk + +.idea/ diff --git a/index.html b/index.html index e8b9874..2abf518 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,52 @@ - - - PyData Chicago - - - + + + + + + + + PyData Chicago + + + + + + + + + + + + + + +
+
-
Meetup - PyData Chicago 2016 + PyData Chicago
+

PyData Chicago

We love .

- - - +
+
+
-
+
+

What is PyData Chicago?

PyData Chicago is a group for users and developers of @@ -32,9 +54,9 @@

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.

@@ -77,8 +99,8 @@

Do you have a Code of Conduct?

Yes, of course! At PyData Chicago, we value the safety and comfort of each of our members. We follow the - NumFOCUS Code of Conduct - . + NumFOCUS Code of Conduct + .

Who are the organizers?

@@ -101,30 +123,45 @@

You can find him on Twitter and GitHub.

-

+
+
+ +
+

Sponsors (Thank You!)

- - - - - - + + + + + +
+
-
- - Meetup - - - Twitter - - - Contact Organizer - +
+
+
+ + Meetup + + + Twitter + + + Contact Organizer + +
-
-

made with coffee and love in chicago

-
- +
+ +
+

made with coffee and love♥ in chicago +

+ + + + +
+ diff --git a/styles/jumbotron-narrow.css b/styles/jumbotron-narrow.css new file mode 100644 index 0000000..952adc5 --- /dev/null +++ b/styles/jumbotron-narrow.css @@ -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; + } +} diff --git a/styles/style.css b/styles/style.css index 646ad14..bec47f1 100644 --- a/styles/style.css +++ b/styles/style.css @@ -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 { @@ -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; +} \ No newline at end of file