diff --git a/.gitignore b/.gitignore index a320f7b..ce8994f 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,9 @@ # Ignore the build directory /build +# Ignore the media directory +/source/media + # Ignore cache /.sass-cache /.cache diff --git a/source-old/stylesheets/series-d/_D7.css.scss b/source-old/stylesheets/series-d/_D7.css.scss index 3c0fd07..ad496bd 100644 --- a/source-old/stylesheets/series-d/_D7.css.scss +++ b/source-old/stylesheets/series-d/_D7.css.scss @@ -186,21 +186,6 @@ - .map-page { - padding:0; - height:30px; - width:100%; - box-sizing: border-box; - overflow:hidden; - background-color:$white; - cursor:grab; - display:none; - } - .map-fine-print { - display:none; - } - - } diff --git a/source/about.html.haml b/source/about.html.haml new file mode 100644 index 0000000..01e1638 --- /dev/null +++ b/source/about.html.haml @@ -0,0 +1,122 @@ +--- +title: Map +--- + +- content_for :title, "CPCJ Media Landscape" + +:markdown + ## About + + CPCJ Media Landscape 2015 is the product of a single-semester, student-led Multimedia Publishing, Production and Writing Lab for the [Creative Publishing and Critical Journalism MA](http://creative-publishing.org/) program at the New School for Social Research. + + Students from an intersection of schools and special programs within the New School University collaboratively developed the concept, form, content, design, and launch of Media Landscape as a diverse critical overview of contemporary media. + + See their process [here](http://www.cpcjmedia.tumblr.com). + + “On our the first day of class in the new Creative Publishing and Creative Journalism master's program at The New School it was clear that — despite all having different backgrounds, skills, and interests — we all wanted to create a magazine that focused on how media and politics intersect in crucial ways…. During the course of our project we have realized that nothing is static or guaranteed; our trial and error has challenged us to experiment just like every other media producer today. This makes our experimental magazine the biggest lesson that we have learned from the media industry itself.” + + Excerpted from Media Landscape’s collective statement. + + Read the complete Editorial Note + +#editorial_note + :markdown + Our project name, Media Landscape, is paradoxical. One definition of a landscape is mere scenery, to be looked at like a pastoral painting in a museum; pretty but inaccessible. Yet, from where we stand, in New York City in May 2015, nothing could be further from the truth about the current state of media. Never before has the media industry elicited so much user participation. “Users” are encouraged to share, like, tweet, annotate and engage all day, every day, and have effectively been transformed from passive consumers into active producers of content. + + The media landscape today is also something that we can walk through, something that can be mapped out; that is what the CPCJ has set out to do. Our goal is to strategically connect different happenings in the media and publishing industries in a way that would show their future. However, media moves quickly. So, giving any sort of overview of the current situation is also a process of exclusion, or, to use a popular buzzword these days, curation. We focused on major changes that have happened within the last year, believing that the current climate is one of dramatic changes that will affect us all in years to come. + + For both the media industry and the world at large, perhaps the most important event this year has been #BlackLivesMatter and police brutality against people of color. In the past year, the attention on police brutality has made us all spectators of race crises in Ferguson and Baltimore. [Based on numbers going up to 2012](http://www.usatoday.com/story/news/nation/2014/08/14/police-killings-data/14060357/), one could say that acts of police violence probably have not been significantly worse than any other year. What’s changed is that now we can no longer ignore them. As we saw with the murder of Eric Garner on July 17 2014, evidence of police brutality was recorded uploaded on social media for all of us to see. The [American Civil Liberties Union](https://www.aclu.org/) has just launched [an app](https://www.youtube.com/watch?v=PSxcmE5qCGU) where you can upload recordings of police violence directly from your phone. The #BlackLivesMatter movement has highlighted this interconnected relationship between media, technology and social change. Amplifying this change, the plethora of previously marginalized voices now have their own platforms to speak from. This instant shareability has changed this entire dynamic, dramatically restructuring the way we consume media and our perception of the world, right in front of our eyes. + + However, it would be unfair to say that all of these changes are new. Of course, technology and media have always been interconnected. Think about Gutenberg or the mass distribution of Jonathan Swift’s satirical pamphlet “A modest proposal” during the Irish famine in the 18th century — or the infamous Vietnam War photo that sparked the mass protests in the US in the 1970’s. This being said, right now media is changing faster than ever before, making a number of systemic changes that are actually new. For example, user content has been incorporated on different media platforms with new vetting and moderation. Don’t think Facebook or Twitter: platforms like reddit, Medium, and Genius now incorporate new moderation and user commenting strategies. On Genius’ Beta feature, users can actually annotate any webpage on the internet. Similarly, today we all produce media as well as consume it. Something like #BlackLivesMatter has shown us that users now have the power to change the way history is written. Another great example is in Syria, where [Syria: Direct](http://syriadirect.org), a non­profit journalism organization, is reshaping the way that foreign correspondence works by interviewing on­ the­ground through social media. In this way the organization is also training a new generation of Syrian reporters on social media. + + Broadly speaking, we’re both paralyzed by the constant stream of news and enabled by it to participate in a previously unprecedented manner. For example, the evolution of social media’s own form has had dramatic consequences on the way that media corporations think about themselves. Having a website is no longer enough, you need to be present on every platform to survive, proving that last years [New York Times Innovation Report](http://www.scribd.com/doc/224608514/The-Full-New-York-Times-Innovation-Report#scribd) was prophetic, but should have been written five years earlier. In fact, mobile platforms mean that you might not even need a website. For example, Snapchat is creating their own platform, Discover, for tightly curated news content. This is something that goes completely against the viral economy, which currently is being spearheaded by media companies like Buzzfeed and The Huffington Post. Even though Buzzfeed is easily scoffed at, it has the most successful business model out there, with viral listicles that drive up clicks and ad­value that then fund in­depth journalism. This is how media has worked in at least the last 50 years, but it’s changing as new companies recognize that consumers are tired of corporate media and viral news. Now, websites like [Refinery29](http://www.refinery29.com) are modeling themselves after small advertising agencies, building a brand that is both strong and flexible. The take­away here is that the media and publishing industries are in constant mediation between consumer habits, technological ability, and whatever makes the most money. + + On our the first day of class in the new Creative Publishing and Creative Journalism master's program at The New School it was clear that — despite all having different backgrounds, skills, and interests — we all wanted to create a magazine that focused on how media and politics intersect in crucial ways. If Geraldo and Don Lemon’s [awkward presence](https://www.youtube.com/watch?v=jjUaAUhyPwk) during the riots in Baltimore showed us that there’s still a long way to go, pieces like this in­depth article from *[New York Times Magazine](http://www.nytimes.com/2015/05/10/magazine/our-demand-is-simple-stop-killing-us.html?_r=0)* or this off­the­cuff reaction in *[The Atlantic](http://www.theatlantic.com/politics/archive/2015/04/nonviolence-as-compliance/391640/)* prove that the efforts to end structural racism in the media industry have made a significant impact. These tectonic shifts in the media happen just as much in the streets of Ferguson, New York, and Baltimore as they do in newsrooms, newsfeeds, and mobile devices. This battleground is created by Facebook, Snapchat, reddit, and Twitter users. + + We are those tweeters, likers, commenters, and annotators. During the course of our project we have realized that nothing is static or guaranteed; our trial and error has challenged us to experiment just like every other media producer today. This makes our experimental magazine the biggest lesson that we have learned from the media industry itself. + ­ + + Signed CPCJ, Spring 2015 + +%h4 The Team +.group + %h5 Publishers + .team-member + %a#publisher-1.bio-trigger{:href => "javascript:void(0)"} + = image_tag 'anastasia_2_360.gif' + .team-member + %a#publisher-2.bio-trigger{:href => "javascript:void(0)"} + = image_tag 'andreas_3_360.gif' + .team-member + %a#publisher-3.bio-trigger{:href => "javascript:void(0)"} + = image_tag 'carlo_7_360.gif' +#publisher.bio-container + #publisher-1-bio.bio + %h3 + Anastasia Dennis + %h4 + Design Editor/Brand Manager + %p + I’m at Parsons The New School For Design. I have worked as the assistant to Jim Carrey’s personal stylist, for Donna Karan New York, and at Rent The Runway. Now entering my final year, I’m interested in entrepreneurship, and spending time in NYC exploring fashion, technology, e-commerce, writing and publishing. IG @anastasiadennis + #publisher-2-bio.bio + %h3 + Andreas Eckhardt-Læssøe + %h4 + Senior editor + %p + Literature student and writer from Denmark. I write in Danish, so you’ll just have to trust me that it’s pretty good. I didn’t learn how to spell my name until I was 10, so I won’t hold it against you if you misspell it, but drop me a line if you want to talk about books, or whatever. + #publisher-3-bio.bio + %h3 + Carlo Mantuano + %h4 + Senior Editor/Copy Editor + %p + I’m a writing and literature student at Eugene Lang College. By the time you read this, I’ll have graduated. I’ve loved basketball for twenty-two years and counting. When I was growing up, I always wanted to be Rasheed Wallace. +.group + %h5 Editors + .team-member + %a#editor-1.bio-trigger{:href => "javascript:void(0)"} + = image_tag 'cerise_360.gif' + .team-member + %a#editor-2.bio-trigger{:href => "javascript:void(0)"} + = image_tag 'katie_360.gif' + .team-member + %a#editor-3.bio-trigger{:href => "javascript:void(0)"} + = image_tag 'sara_360.gif' + +#editor.bio-container + #editor-1-bio.bio + %h3 + Cerise Steel + %h4 + Managing Editor + %p + I’m a soon to be graduate of Creative Writing and Journalism from The New School. I’m from Seattle, but live in NYC. I’m a long distance and Cross Country runner. I once travelled around the world on a ship for five months. I write about what inspires me: food, running, outdoors, the places I’ve visited, and the people I’ve met. @cerisesteel (Instagram and Twitter) + #editor-2-bio.bio + %h3 + Katherine Parker-Magyar + %h4 + Editor/Writer + %p + I’m a graduate student of literature in Liberal Studies at The New School, a communications analyst at Aegis Media, and pursuing a career in writing. I love to travel (anywhere and everywhere), engage in heated debates about the intellectual merits of popular culture (preferably over a glass of wine), and—now that the polar vortex has mercifully subsided—run along the East River. twt ig: @kpm1231 + #editor-3-bio.bio + %h3 + Sara Wilkins + %h4 + Marketing Director + %p + I’m a journalist from Denmark who is currently based in Brooklyn, New York. Previously, I’ve worked for Danish newspapers and magazines, covering both daily news and investigative reporting on a wide range of subjects, especially business and economics. I’m also a Creative Publishing and Critical Journalism graduate student at The New School for Social Research. + +The Team +Publishers +Editors +Creative Direction and Design +Thanks To +Mask Magazine +Verso Books +Gray Beltran +Sam Lavigne +Andrew Beccone +DarkMatter +Talita Zaragoza +James & Juliette \ No newline at end of file diff --git a/source/interviews/ben-williams.html.haml b/source/interviews/ben-williams.html.haml index 61c2e4c..5e15334 100644 --- a/source/interviews/ben-williams.html.haml +++ b/source/interviews/ben-williams.html.haml @@ -18,7 +18,7 @@ Williams said, “About a third of our audience online is New York based, and the other two thirds are from other places around the country and the world.” It is this demographic that has caused new growth in New York Magazine’s print subscriptions across the country. He then said, “It has actually become more of a national magazine now. 10 years ago almost everything in the magazine had a New York connection.” -

We are trying to represent the New York state of mind, the urban state of mind, and the cosmopolitan state of mind, which come with a set of values and attitudes that resonate beyond New York. It’s about wit and smarts and irony and sophistication, about getting a little crazy sometimes.”

+

We are trying to represent the New York state of mind, the urban state of mind, and the cosmopolitan state of mind, which come with a set of values and attitudes that resonate beyond New York. It’s about wit and smarts and irony and sophistication, about getting a little crazy sometimes.

The distinctly New York tone is something that Williams strives to maintain, despite how the they are publishing more national features. In transitioning more local stories to national coverage, Williams notes that “What changed is that now we think of it as more of a state of mind — we are trying to represent the New York state of mind, the urban state of mind, and the cosmopolitan state of mind, which come with a set of values and attitudes that resonate beyond New York. It’s about wit and smarts and irony and sophistication, about getting a little crazy sometimes.” diff --git a/source/javascripts/all.js b/source/javascripts/all.js index 22b01ee..7cf35bd 100644 --- a/source/javascripts/all.js +++ b/source/javascripts/all.js @@ -6,4 +6,5 @@ $(window).load(function(){ // do $( '.menu ul').addClass('collapsed').toggle(); } -}); \ No newline at end of file +}); + diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml index 6cfeab7..cd13078 100644 --- a/source/layouts/layout.haml +++ b/source/layouts/layout.haml @@ -24,8 +24,6 @@ = partial 'spots' = image_tag "map-gray.svg", :class => "topo" - .map-fine-print - Map data is completely made up, but here is a funny line of text. = partial 'menu' = partial 'interviews/index' @@ -33,10 +31,6 @@ #yield.modal.body = yield -#panorama.modal.body - - -= partial 'about' @@ -49,6 +43,10 @@ footnoteHandler(); teamHandler(); + $("#editor-note-trigger").click(function(){ + $("#editorial_note").slideToggle(); + }); + $(function() { $.get("https://docs.google.com/document/d/1WT1Gfk2EG_zYtcsD_6xKEqaO2NT5X1E2Va6zq42m-v8/pub?embedded=true", function(html) { $("#google-doc-iframe").attr("srcdoc", html); diff --git a/source/panorama.html.haml b/source/panorama.html.haml new file mode 100644 index 0000000..2310689 --- /dev/null +++ b/source/panorama.html.haml @@ -0,0 +1,8 @@ +--- +title: Map +--- + +- content_for :title, "CPCJ Media Landscape Panorama" + +#panorama + \ No newline at end of file diff --git a/source/partials/interviews/_index.haml b/source/partials/interviews/_index.haml index c0bf79a..01e1828 100644 --- a/source/partials/interviews/_index.haml +++ b/source/partials/interviews/_index.haml @@ -12,9 +12,8 @@ .toc-item .toc-item-art - -# = image_tag '#' %h4.toc-item-title - %a{:href => "#"} + %a{:href => "http://cpcj.tumblr.com/"} Behind the Scenes %p.toc-byline The making of Media Landscape by the CPCJ’s first Multimedia Publishing, Production and Writing Lab @@ -156,7 +155,6 @@ .toc-item .toc-item-art - = image_tag 'logos/ref-29.png' %h4.toc-item-title %a{:href => "/interviews/keenan-duffey.html"} Remote Control: Journalistic Objectivity from Abroad @@ -188,8 +186,8 @@ .toc-item-art -#= image_tag 'logos/Vice_Logo.png' %h4.toc-item-title - %a{:href => "#"} - How We Consume Media Today: A Photo Essay [PDF] + %a{:href => "/media/how-we-consume-media-today-by-juliana-bechara-and-paula-duran-2015.pdf"} + How We Consume Media Today: A Photo Essay [PDF] %p.toc-byline By Juliana Bechara and Paula Duran @@ -198,6 +196,6 @@ .toc-item .toc-item-art %h4.toc-item-title - %a{:href => "#"} + %a{:href => "http://cpcjpanorama.tumblr.com/"} Experimental Works diff --git a/source/stylesheets/body.css.scss b/source/stylesheets/body.css.scss index bbd00d3..6d63466 100644 --- a/source/stylesheets/body.css.scss +++ b/source/stylesheets/body.css.scss @@ -1,9 +1,226 @@ + +// BODY + + + +@media #{$D7} { + + .body { + color:$black; + font: 18px/24px Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif; + + p { + margin:0; + width:100%; + box-sizing: border-box; + padding-bottom:26px; + display:inline-block; + padding-right:15px; + } + a { + color:$orange; + // font-weight: bold; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + h4 { + // font: 18px/26px Helvetica; + // font-weight: bold; + // letter-spacing: 0.03em; + // // border-bottom:2px solid #0F7C82; + // padding-bottom:4px; + // color:#0F7C82; + // text-transform: lowercase; + } + + h5 { + font:bold 16px/21px Helvetica; + margin-bottom: 20px; + color:$orange; + border-top:1px dotted lightgray; + padding-top:25px; + + } + + h5 + p { + font-size: 18px; + line-height: 26px; + margin:0; + padding:0; + a { + color:$black; + } + } + + h6 { // interview question + font-size:15px; + line-height: 20px; + letter-spacing: -0.02em; + font-weight: 600; + font-family: $sans; + color:$black; + margin:0; + padding-bottom:26px; + } + + .dek { + color:$orange; + font-family: $sans; + font-weight:700; + // letter-spacing: 0.02em; + } + + .title { + font-size: 2em; + font-weight: normal; + line-height: 1em; + margin-top:0.33em; + margin-bottom:0.25em; + box-sizing: border-box; + // padding-right:3em; + } + + .byline { + font-size: 16px; + font-style: italic; + color:gray; + margin-bottom:3em; + & + p:first-line { + text-transform: uppercase; + } + } + + .lede { + font-size: 1.1em; + line-height: 1.3em; + + } + + .pullquote { + width:100%; + font-size:24px; + line-height: 26px; + padding-top:30px; + font-weight: 600; + padding-bottom:30px; + color:$blue; + box-sizing: border-box; + padding-right:0; + // font-style: italic; + &:before { + content:"“ "; + color:gray; + } + &:after { + content:" ”"; + color:gray; + } + } + + .monospaced { + font-family: monospace !important; + font-size: 14px; + line-height: 18px; + h3 { + font-family: monospace !important; + font-size: 1.4em; + text-decoration: underline; + margin-bottom:1.2em; + padding-top:3em; + } + h4 { + margin:0; + padding:0; + padding-top:2em; + color:$black; + font-size:14px; + text-transform: uppercase; + font-weight: normal; + font-family: monospace !important; + text-align: center; + line-height: 14px; + display:block; + & + p { + text-align: left; + padding:0 1em 1em 2em; + box-sizing: border-box + } + } + p { + padding-top:1em; + padding-bottom:0; + } + } + } +} + + +@media #{$D6} { + .body { + font: 20px/30px Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif; + + .dek { + margin-top:2em; + } + + .pullquote { + width:100%; + } + + .monospaced { + h4 { + padding-right:200px; + } + } + } +} + @media #{$D5} { .body { p { padding-right:400px; } } + + .body { + position:relative; + h4 { + font-size:25px; + } + + p { + padding-right:280px; + } + + sup { + vertical-align: baseline; + position:relative; + font-size:0.6em; + top:-0.45rem; + padding-left:0.12em; + padding-right:0.16rem; + // font-weight: bold; + color:$orange; + cursor:pointer; + font-family:Helvetica; + } + + .lede { + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens:none; + text-align: left; + } + + } + + + + + } @media #{$D4} { diff --git a/source/stylesheets/manifest.css.scss b/source/stylesheets/manifest.css.scss index 87720d9..03b992b 100644 --- a/source/stylesheets/manifest.css.scss +++ b/source/stylesheets/manifest.css.scss @@ -5,13 +5,15 @@ $D4: 'screen and (min-width: 1081px)'; $D3: 'screen and (min-width:1441px)'; -$white:#FBFFF5; +// $white:#FBFFF5; +$white:#eeebe6; $black:#130C06; $black:#383838; $gray:#D1D1D0; $green:#0D7C82; // $bluegreen:#43B4BC; -$orange:#F47C29; +// $orange:#F47C29; +$orange:#f36b4c; $red:#91002A; $darkgreen:#198943; $blue:#383838; @@ -19,7 +21,7 @@ $bluegreen:#5778FF; $green:#383838; $darkorange:#c6570a; -$sans:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; +$sans:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; @import 'positions'; @import 'menu'; @@ -29,43 +31,8 @@ $sans:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica @import 'panorama'; @import 'footnote'; @import 'body'; -@import 'series-d/manifest'; @import 'modal'; - -body { - background-color:$white; -} - -.fb-post { - margin-bottom:40px; - width:80%; -} - -.youtube { - position:relative; - padding-bottom:56.25%; - padding-top: 25px; - height: 0; - margin-top:40px; - margin-bottom:20px; - iframe { - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - } -} - -.instagram-media { - margin:0 !important; - margin-bottom:80px !important; - margin-top:40px !important; -} - -.twitter-tweet:last-of-type { - padding-bottom:20px; -} - +@import 'running-head'; +@import 'shame'; diff --git a/source/stylesheets/map.css.scss b/source/stylesheets/map.css.scss index c9de7d5..e5e044b 100644 --- a/source/stylesheets/map.css.scss +++ b/source/stylesheets/map.css.scss @@ -7,19 +7,28 @@ @media #{$D4} { + .map-container { + display:block; + position:absolute; + width:100vw; + height:100vh; + } + .map-page { + position:absolute; padding:20px; - height:85vh; + height:100%; width:100vw; box-sizing: border-box; overflow:hidden; background-color:$white; cursor:grab; } - + .map { position: relative; overflow:hidden; + display:block; height:100%; cursor:-webkit-grab; } @@ -27,20 +36,6 @@ .map.dragged-map { cursor:-webkit-grabbing; } - - .map-fine-print { - font:12px/14px Helvetica; - text-align: left; - float:left; - background-color:rgba(255,255,255,0.9); - color:#303030; - top:-22px; - width:auto; - display:inline-block; - padding:4px; - padding-left:6px; - position:relative; - } } diff --git a/source/stylesheets/menu.css.scss b/source/stylesheets/menu.css.scss index 0c5530c..410ed5f 100644 --- a/source/stylesheets/menu.css.scss +++ b/source/stylesheets/menu.css.scss @@ -37,8 +37,10 @@ box-sizing: border-box; background-color:$white; - color:$black; + color:white; border:20px solid $white; + border-top:10px solid $white; + border-bottom:10px solid $white; font-size:20px; letter-spacing: 0.11em; @@ -49,7 +51,7 @@ color:$white; } h2 { - font:76px/60px Helvetica; + font:76px/60px $sans; font-weight: bold; margin:0; cursor:pointer; @@ -57,21 +59,24 @@ letter-spacing:0; } h3 { - font-size: 30px; + font-size: 20px; line-height: 40px; - letter-spacing: 0.13em; + letter-spacing: 0.649em; margin-bottom:0; + text-align: left; + padding-left: 10px; font-weight: normal; margin:0; text-transform:uppercase; } h4 { margin:0; - padding-top:2px; + // padding-top:2px; line-height: 10px; - font-size: 16px; + font-size: 14px; text-align: left; - padding-left:15px; + padding-left:11px; + font-weight: 500; } li { list-style: none; @@ -128,9 +133,9 @@ } p { padding-top:10px; - padding-left: 15px; + padding-left: 12px; font-size: 13px; - color:lightgray; + color:gray; line-height:10px; letter-spacing: 0; text-align: left; diff --git a/source/stylesheets/modal.css.scss b/source/stylesheets/modal.css.scss index fbe99bc..ce432b5 100644 --- a/source/stylesheets/modal.css.scss +++ b/source/stylesheets/modal.css.scss @@ -1,36 +1,23 @@ @media #{$D7} { + .modal { position:relative; + z-index:700; + display:none; - background-color:rgba($white, 0.97); box-sizing: border-box; width:100%; height:100%; - padding:20px; - padding-top:80px; - padding-right:40px; - padding-bottom:500px; - z-index:700; - } - .running-head { - position:fixed; + padding:160px 40px 100px 20px; + background-color:rgba($white, 0.97); - width:100%; - top:0; - padding:40px; - padding-left:0; - color:gray; - padding-top:10px; - padding-bottom:10px; - box-sizing:border-box; - strong { - color:$orange; - } } + } @media #{$D6} { .modal { + padding-top:140px; padding-left:60px; p { @@ -40,49 +27,34 @@ } @media #{$D5} { - .modal { -// position:absolute; -// top:20px; -// height:auto; -// bottom:20px; -// left:20%; -// width:79%; -// overflow:scroll; -// padding-left:40px; -// box-sizing: border-box; - padding-right:280px; + .modal { + padding-right:280px; -// ul { -// display:block; -// } p { padding-right:0; } } -// .running-head { -// left:20%; -// padding-left:40px; -// width:79%; -// } -// } } @media #{$D4} { .modal { - left:initial; + position: absolute; + + top:20px; right:300px; + left:initial; + + overflow:scroll; + box-sizing: border-box; width:50%; + height:100%; padding-top:100px; padding-left:40px; - box-sizing: border-box; + padding-right:0; + p { padding-right:180px; } - .running-head { - left:initial; - width:50%; - right:300px; - } } } diff --git a/source/stylesheets/running-head.css.scss b/source/stylesheets/running-head.css.scss new file mode 100644 index 0000000..4daf54f --- /dev/null +++ b/source/stylesheets/running-head.css.scss @@ -0,0 +1,35 @@ +@media #{$D7} { + + .running-head { + position:fixed; + + box-sizing:border-box; + width:100%; + top:0; + padding:10px 40px 10px 0; + + background-color:rgba($white, 0.97); + color:gray; + + strong { + color:$orange; + } + } + +} + +@media #{$D6} { + .running-head { + padding:40px 40px 20px 0; + } +} + + +@media #{$D4} { + .running-head { + width:50%; + right:300px; + left:initial; + padding:40px 40px 10px 40px; + } +} \ No newline at end of file diff --git a/source/stylesheets/series-d/_D4.css.scss b/source/stylesheets/series-d/_D4.css.scss deleted file mode 100644 index e69de29..0000000 diff --git a/source/stylesheets/series-d/_D5.css.scss b/source/stylesheets/series-d/_D5.css.scss deleted file mode 100644 index 93eef1f..0000000 --- a/source/stylesheets/series-d/_D5.css.scss +++ /dev/null @@ -1,59 +0,0 @@ -// Mobile-First Styles - -@media #{$D5} { - - .body { - position:relative; - h4 { - font-size:25px; - } - - p { - padding-right:280px; - } - - sup { - vertical-align: baseline; - position:relative; - font-size:0.6em; - top:-0.45rem; - padding-left:0.12em; - padding-right:0.16rem; - // font-weight: bold; - color:$orange; - cursor:pointer; - font-family:Helvetica; - } - - .lede { - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens:none; - text-align: left; - } - - } - - // .map-page { - // padding:20px; - // // padding-bottom:220px; - // height:100vh; - // width:100vw; - // box-sizing: border-box; - // overflow:hidden; - // background-color:$white; - // cursor:grab; - // display:block; - // bottom:220px; - // } - - - - - - - - - -} diff --git a/source/stylesheets/series-d/_D6.css.scss b/source/stylesheets/series-d/_D6.css.scss deleted file mode 100644 index 676c4f7..0000000 --- a/source/stylesheets/series-d/_D6.css.scss +++ /dev/null @@ -1,24 +0,0 @@ - -@media #{$D6} { - .body { - font: 20px/30px Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif; - - .dek { - margin-top:2em; - } - - .pullquote { - width:100%; - } - - .monospaced { - h4 { - padding-right:200px; - } - } - } - - // body * { - // background-color:rgba(0,0,200,0.1); - // } -} \ No newline at end of file diff --git a/source/stylesheets/series-d/_D7.css.scss b/source/stylesheets/series-d/_D7.css.scss deleted file mode 100644 index 3c0fd07..0000000 --- a/source/stylesheets/series-d/_D7.css.scss +++ /dev/null @@ -1,206 +0,0 @@ -// Mobile-First Styles - -@media #{$D7} { - - body { - max-width:100vw; - // background-color:white; - & ::selection { - background: $black; - color:white; - } - } - - .team-member { - } - - .team-member { - width:120px; - margin-right:20px; - border-radius: 4px; - float:left; - height:120px; - overflow:hidden; - margin-bottom:20px; - img { - opacity: 0.2; - width:100%; - position:relative; - } - .active img { - opacity:1; - } - } - .team-member:last-of-type{ - margin-right:0; - } - .bio-container { - } - .group { - - } - .bio { - display:none; - h3 { - display:inline-block; - font:14px/20px 'Times New Roman'; - } - h4 { - font:14px/20px 'Times New Roman'; - } - } - - .body { - color:$black; - font: 18px/26px Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif; - - p { - margin:0; - width:100%; - box-sizing: border-box; - padding-bottom:26px; - display:inline-block; - } - a { - color:$orange; - // font-weight: bold; - text-decoration: none; - &:hover { - text-decoration: underline; - } - } - h4 { - // font: 18px/26px Helvetica; - // font-weight: bold; - // letter-spacing: 0.03em; - // // border-bottom:2px solid #0F7C82; - // padding-bottom:4px; - // color:#0F7C82; - // text-transform: lowercase; - } - - h5 { - font:bold 16px/21px Helvetica; - margin-bottom: 20px; - color:$orange; - border-top:1px dotted lightgray; - padding-top:25px; - - } - - h5 + p { - font-size: 18px; - line-height: 26px; - margin:0; - padding:0; - a { - color:$black; - } - } - - h6 { // interview question - font-size:20px; - line-height: 30px; - font-weight: 600; - color:gray; - margin:0; - padding-right:6em; - padding-bottom:26px; - } - - .dek { - color:$orange; - } - - .title { - font-size: 2em; - font-weight: normal; - line-height: 1em; - margin-top:0.33em; - margin-bottom:1em; - box-sizing: border-box; - padding-right:3em; - } - - .byline { - font-style: italic; - color:gray; - margin-bottom:3em; - & + p:first-line { - text-transform: uppercase; - } - } - - .lede { - font-size: 1.1em; - line-height: 1.3em; - } - - .pullquote { - width:100%; - font-size:38px; - line-height: 42px; - padding-top:40px; - padding-bottom:60px; - color:$blue; - box-sizing: border-box; - padding-right:0; - // font-style: italic; - } - - .monospaced { - font-family: monospace !important; - font-size: 14px; - line-height: 18px; - h3 { - font-family: monospace !important; - font-size: 1.4em; - text-decoration: underline; - margin-bottom:1.2em; - padding-top:3em; - } - h4 { - margin:0; - padding:0; - padding-top:2em; - color:$black; - font-size:14px; - text-transform: uppercase; - font-weight: normal; - font-family: monospace !important; - text-align: center; - line-height: 14px; - display:block; - & + p { - text-align: left; - padding:0 1em 1em 2em; - box-sizing: border-box - } - } - p { - padding-top:1em; - padding-bottom:0; - } - } - } - - - - .map-page { - padding:0; - height:30px; - width:100%; - box-sizing: border-box; - overflow:hidden; - background-color:$white; - cursor:grab; - display:none; - } - .map-fine-print { - display:none; - } - - - - -} diff --git a/source/stylesheets/series-d/_manifest.css.scss b/source/stylesheets/series-d/_manifest.css.scss deleted file mode 100644 index f717a13..0000000 --- a/source/stylesheets/series-d/_manifest.css.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import 'series-d/D7'; -@import 'series-d/D6'; -@import 'series-d/D5'; -@import 'series-d/D4'; \ No newline at end of file diff --git a/source/stylesheets/shame.css.scss b/source/stylesheets/shame.css.scss new file mode 100644 index 0000000..a9c0bb2 --- /dev/null +++ b/source/stylesheets/shame.css.scss @@ -0,0 +1,110 @@ +// This is a shame stylesheet +// Hacks and overrides appear here until they've found their right home. + + + +@media #{$D7} { + + // SETTINGS + body { + max-width:100vw; + // background-color:white; + & ::selection { + background: $black; + color:white; + } + } + + #editorial_note { + display:none; + } + + // BIO + .team-member { + width:120px; + margin-right:20px; + border-radius: 4px; + float:left; + height:120px; + overflow:hidden; + margin-bottom:20px; + img { + opacity: 0.2; + width:100%; + position:relative; + } + .active img { + opacity:1; + } + } + .team-member:last-of-type{ + margin-right:0; + } + .bio-container { + } + .group { + + } + .bio { + display:none; + h3 { + display:inline-block; + font:14px/20px 'Times New Roman'; + } + h4 { + font:14px/20px 'Times New Roman'; + } + } + + + +} + +@media #{$D6} { + +} + +@media #{$D5} { + +} + +@media #{$D4} { + +} + + +body { + background-color:$white; +} + +.fb-post { + margin-bottom:40px; + width:80%; +} + +.youtube { + position:relative; + padding-bottom:56.25%; + padding-top: 25px; + height: 0; + margin-top:40px; + margin-bottom:20px; + iframe { + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + } +} + +.instagram-media { + margin:0 !important; + margin-bottom:80px !important; + margin-top:40px !important; +} + +.twitter-tweet:last-of-type { + padding-bottom:20px; +} + diff --git a/source/stylesheets/toc.css.scss b/source/stylesheets/toc.css.scss index 4e6460c..8f0fb05 100644 --- a/source/stylesheets/toc.css.scss +++ b/source/stylesheets/toc.css.scss @@ -2,7 +2,20 @@ #toc { - padding-left:120px; + padding-left:80px; + + hr { + margin-top:40px; + margin-bottom:40px; + margin-right: 50px; + border:0; + height:1px; + background-color:lightgray; + } + + h1 { + font-family: $sans; + } h3 { font: 14px/26px Helvetica; @@ -43,10 +56,11 @@ // THUMB .toc-item-art { - width:80px; - height: 80px; + width:50px; + height: 50px; float:left; - left:-100px; + left:-70px; + top:14px; position: absolute; img { @@ -60,10 +74,10 @@ @media #{$D4} { #toc { .toc-item-art { - width:80px; - height: 80px; + width: 40px; + height: 40px; float:left; - left:-100px; + left:-60px; position: absolute; img {