Conflicts with Revealjs style sheets

[taylonr]

I forked the Reveal.js (https://github.com/hakimel/reveal.js) repository to play around with Polymer.

I was following the steps from Getting Started (http://www.polymer-project.org/getting-started.html).

When I add a script for platform.js, I start getting a 404 on one of the style sheet's imports.

The head of my index.html file look like this:

    <title>reveal.js - The HTML Presentation Framework</title>

    <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
    <meta name="author" content="Hakim El Hattab">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <script src="bower_components/platform/platform.js"></script>

    <link rel="import" href="polymers/tk-cesium.html">

    <link rel="stylesheet" href="css/reveal.min.css">
    <link rel="stylesheet" href="css/theme/default.css" id="theme">
    <link rel="stylesheet" href="lib/js/Cesium/Widgets/CesiumWidget/CesiumWidget.css">

    <!-- For syntax highlighting -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <!-- If the query includes 'print-pdf', use the PDF print sheet -->
    <script>
        document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
    </script>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->

    <script src="lib/js/Cesium/cesium.js" type="text/javascript"></script>

    <style>
        .full-size {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
</head>

If I run the project like this, I get the following error:

GET http://localhost:8000/css/theme/url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic) 404 (Not Found) Node.js:341

This is coming from the 'css/theme/default.css' style sheet:

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);

If I comment out the platform.js script this error does not happen, but of course, I don't get Polymer greatness then either.

This is occurring on Chrome 32.0.1700.102 m on Windows 8.1. With the Enable HTML Import flag set to true or false.

[taylonr]

Also, if anyone is interested, I have pushed a branch up to my fork of reveal that is duplicating the issue: https://github.com/taylonr/reveal.js/tree/polymer

[sorvell]

This was an HTMLImports bug that should be fixed now. At the moment when
ShadowDOM polyfill is used, all stylesheets are specially loaded so that ^
and ^^ rules can be fixed. Since almost no stylesheets will have ^ and ^^
right now, we're going to make this shimming opt-in (
https://github.com/Polymer/platform-dev/issues/4).

These issues should be cleaned up in the next polymer release.

On Thu, Jan 30, 2014 at 6:27 AM, Nathan Taylor [email protected]:

Also, if anyone is interested, I have pushed a branch up to my fork of
reveal that is duplicating the issue:
https://github.com/taylonr/reveal.js/tree/polymer

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/410#issuecomment-33691887
.