Uploaded image for project: 'Jenkins Website'
  1. Jenkins Website
  2. WEBSITE-420

Implement a cleaner solution for WEBSITE-416 (boxshadow borders on images).

    Details

    • Similar Issues:

      Description

      Background:

      WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify [.boxshadow] above an image reference. E.g.

      [.boxshadow]
      image:tutorials/java-maven-01-downloading-maven-docker-image.png[alt="Downloading Maven Docker image",width=100%]
      

      for inline image references or

      [.boxshadow]
      image::tutorials/java-maven-01-downloading-maven-docker-image.png[]
      

      for a block image reference.

      This is based on the presence of the following CSS in content/css/jenkins.css file:

      .imageblock.docinfoboxshadow img {
        margin: 5px 5px 5px 5px;
        -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
      }
      
      .paragraph.docinfoboxshadow img {
        margin: 5px 5px 5px 5px;
        -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
      }
      

      Proposal:

      It would be better if implement this on a page-specific basis using Asciidoctor's docinfo features, which would provide the ability to implement CSS customizations on a page specific basis.

      See WEBSITE-416 and GitHub pull request 1193 for details.

        Attachments

          Issue Links

            Activity

            ggaskell Giles Gaskell created issue -
            ggaskell Giles Gaskell made changes -
            Field Original Value New Value
            Description WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify {{[.boxshadow]}} above an image reference. E.g.
            {code:java}
            [.boxshadow]
            image:tutorials/java-maven-01-downloading-maven-docker-image.png[alt="Downloading Maven Docker image",width=100%]
            {code}
            for inline image references or
            {code}
            [.boxshadow]
            image::tutorials/java-maven-01-downloading-maven-docker-image.png[]
            {code}
            for a block image reference.

            This is based on the presence of the following CSS in {{content/css/jenkins.css}} file:
            {code}
            .imageblock.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }

            .paragraph.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }
            {code}
            *Background:*

            WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify {{[.boxshadow]}} above an image reference. E.g.

            {code}
            [.boxshadow]
            image:tutorials/java-maven-01-downloading-maven-docker-image.png[alt="Downloading Maven Docker image",width=100%]
            {code}

            for inline image references or

            {code}
            [.boxshadow]
            image::tutorials/java-maven-01-downloading-maven-docker-image.png[]
            {code}

            for a block image reference.

            This is based on the presence of the following CSS in {{content/css/jenkins.css}} file:

            {code}
            .imageblock.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }

            .paragraph.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }
            {code}

            ----

            *Proposal:*

            It would be better if implement this on a page-specific basis
            ggaskell Giles Gaskell made changes -
            Description *Background:*

            WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify {{[.boxshadow]}} above an image reference. E.g.

            {code}
            [.boxshadow]
            image:tutorials/java-maven-01-downloading-maven-docker-image.png[alt="Downloading Maven Docker image",width=100%]
            {code}

            for inline image references or

            {code}
            [.boxshadow]
            image::tutorials/java-maven-01-downloading-maven-docker-image.png[]
            {code}

            for a block image reference.

            This is based on the presence of the following CSS in {{content/css/jenkins.css}} file:

            {code}
            .imageblock.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }

            .paragraph.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }
            {code}

            ----

            *Proposal:*

            It would be better if implement this on a page-specific basis
            *Background:*

            WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify {{[.boxshadow]}} above an image reference. E.g.

            {code}
            [.boxshadow]
            image:tutorials/java-maven-01-downloading-maven-docker-image.png[alt="Downloading Maven Docker image",width=100%]
            {code}

            for inline image references or

            {code}
            [.boxshadow]
            image::tutorials/java-maven-01-downloading-maven-docker-image.png[]
            {code}

            for a block image reference.

            This is based on the presence of the following CSS in {{content/css/jenkins.css}} file:

            {code}
            .imageblock.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }

            .paragraph.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }
            {code}

            ----

            *Proposal:*

            It would be better if implement this on a page-specific basis using [Asciidoctor's docinfo features|http://asciidoctor.org/docs/user-manual/#docinfo-file], which would provide the ability to implement CSS customizations on a page specific basis.
            ggaskell Giles Gaskell made changes -
            Description *Background:*

            WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify {{[.boxshadow]}} above an image reference. E.g.

            {code}
            [.boxshadow]
            image:tutorials/java-maven-01-downloading-maven-docker-image.png[alt="Downloading Maven Docker image",width=100%]
            {code}

            for inline image references or

            {code}
            [.boxshadow]
            image::tutorials/java-maven-01-downloading-maven-docker-image.png[]
            {code}

            for a block image reference.

            This is based on the presence of the following CSS in {{content/css/jenkins.css}} file:

            {code}
            .imageblock.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }

            .paragraph.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }
            {code}

            ----

            *Proposal:*

            It would be better if implement this on a page-specific basis using [Asciidoctor's docinfo features|http://asciidoctor.org/docs/user-manual/#docinfo-file], which would provide the ability to implement CSS customizations on a page specific basis.
            *Background:*

            WEBSITE-416 implements its solution for boxshadow borders on images by requiring the author to specify {{[.boxshadow]}} above an image reference. E.g.

            {code}
            [.boxshadow]
            image:tutorials/java-maven-01-downloading-maven-docker-image.png[alt="Downloading Maven Docker image",width=100%]
            {code}

            for inline image references or

            {code}
            [.boxshadow]
            image::tutorials/java-maven-01-downloading-maven-docker-image.png[]
            {code}

            for a block image reference.

            This is based on the presence of the following CSS in {{content/css/jenkins.css}} file:

            {code}
            .imageblock.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }

            .paragraph.docinfoboxshadow img {
              margin: 5px 5px 5px 5px;
              -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
            }
            {code}

            ----

            *Proposal:*

            It would be better if implement this on a page-specific basis using [Asciidoctor's docinfo features|http://asciidoctor.org/docs/user-manual/#docinfo-file], which would provide the ability to implement CSS customizations on a page specific basis.

            See WEBSITE-416 and [GitHub pull request 1193|https://github.com/jenkins-infra/jenkins.io/pull/1193] for details.
            ggaskell Giles Gaskell made changes -
            Link This issue relates to WEBSITE-416 [ WEBSITE-416 ]

              People

              • Assignee:
                Unassigned
                Reporter:
                ggaskell Giles Gaskell
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated: