Skip to content

templates: add an opaque icon for mobile home screens #8111

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

Merged
merged 1 commit into from
Dec 20, 2021

Conversation

bonktree
Copy link
Contributor

Fixes: #8103

The netbox_touch-icon-180.png icon was produced by rendering
netbox_icon.svg into a 160x160 square, centered in a 180x180 PNG filled
by the background colour of #212529.

In other words, it is a screenshot of the following HTML element:

  <div style="width: 180px;height: 180px;background-color: #212529;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" style="padding: 10px;">
    <g fill="#9cc8f8" stroke="#9cc8f8">
      <circle cx="37" cy="284" r="23"></circle>
      <circle cx="101" cy="37" r="23"></circle>
      <circle cx="101" cy="220" r="23"></circle>
      <circle cx="284" cy="220" r="23"></circle>
      <rect x="93" y="37" width="16" height="180"></rect>
      <rect x="101" y="212" width="180" height="16"></rect>
      <rect x="93" y="212" width="16" height="90" transform="rotate(45 101 220)"></rect>
    </g>
    <g fill="#1685fc" stroke="#1685fc">
      <circle cx="284" cy="37" r="23"></circle>
      <circle cx="37" cy="101" r="23"></circle>
      <circle cx="220" cy="101" r="23"></circle>
      <circle cx="220" cy="284" r="23"></circle>
      <rect x="37" y="93" width="180" height="16"></rect>
      <rect x="212" y="101" width="16" height="180"></rect>
      <rect x="212" y="93" width="16" height="90" transform="rotate(225 220 101)"></rect>
    </g>
  </svg>
  </div>

The child <svg> is the contents of netbox_icon.svg.

The netbox_touch-icon-180.png icon was produced by rendering
netbox_icon.svg into a 160x160 square, centered in a 180x180 PNG filled
by the background colour of #212529.

In other words, it is a screenshot of the following HTML element:
```html
  <div style="width: 180px;height: 180px;background-color: #212529;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" style="padding: 10px;">
    <g fill="#9cc8f8" stroke="#9cc8f8">
      <circle cx="37" cy="284" r="23"></circle>
      <circle cx="101" cy="37" r="23"></circle>
      <circle cx="101" cy="220" r="23"></circle>
      <circle cx="284" cy="220" r="23"></circle>
      <rect x="93" y="37" width="16" height="180"></rect>
      <rect x="101" y="212" width="180" height="16"></rect>
      <rect x="93" y="212" width="16" height="90" transform="rotate(45 101 220)"></rect>
    </g>
    <g fill="#1685fc" stroke="#1685fc">
      <circle cx="284" cy="37" r="23"></circle>
      <circle cx="37" cy="101" r="23"></circle>
      <circle cx="220" cy="101" r="23"></circle>
      <circle cx="220" cy="284" r="23"></circle>
      <rect x="37" y="93" width="180" height="16"></rect>
      <rect x="212" y="101" width="16" height="180"></rect>
      <rect x="212" y="93" width="16" height="90" transform="rotate(225 220 101)"></rect>
    </g>
  </svg>
  </div>
```
@bonktree
Copy link
Contributor Author

iOS devices fill the transparent background of an icon with #000000, and the light blue stroke of NetBox's logo is hardly legible on a white background, so I decided to go with the colour NetBox uses in dark mode instead.

@jeremystretch jeremystretch merged commit 4a3bc8d into netbox-community:develop Dec 20, 2021
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 20, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Touch icons for NetBox web pages
2 participants