Skip to content
This repository has been archived by the owner on Sep 13, 2021. It is now read-only.

Commit

Permalink
remove width/height from datawrapper logo
Browse files Browse the repository at this point in the history
  • Loading branch information
davidw-dw authored and gka committed Sep 6, 2021
1 parent 2ba428f commit d98ca64
Showing 1 changed file with 15 additions and 14 deletions.
29 changes: 15 additions & 14 deletions src/views/layout/partials/header/DatawrapperLogo.svelte
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
<script>
export let color = '#333333';
export let height = 50;
$: width = Math.ceil(height * ratio);
$: width = Math.ceil(height * ratio); // height and width need to be refactored. setting them static inline is problematic for mobile / responsive
const ratio = 3.16;
let height_ = height;
</script>

<svg
alt="Datawrapper logo"
viewBox="0 0 336 90"
fill="none"
{width}
{height}
xmlns="http://www.w3.org/2000/svg"
><g fill={color}
><path d="M5 0H0v91h335v-5H5V0z" shape-rendering="crispEdges" /><path
d="M34.794 56V18.676h11.023c3.298 0 6.22.735 8.767 2.204 2.563 1.47 4.546 3.555 5.947 6.255 1.402 2.7 2.102 5.794 2.102 9.28v1.871c0 3.538-.709 6.648-2.127 9.331-1.402 2.684-3.41 4.751-6.025 6.204C51.884 55.274 48.901 56 45.535 56H34.794zm6.486-32.095v26.917h4.23c3.4 0 6.006-1.06 7.818-3.179 1.828-2.136 2.76-5.195 2.794-9.177v-2.077c0-4.05-.88-7.143-2.64-9.28-1.76-2.136-4.316-3.204-7.665-3.204h-4.538zM84.014 56c-.274-.53-.513-1.393-.718-2.59-1.983 2.069-4.41 3.103-7.28 3.103-2.786 0-5.059-.795-6.82-2.384-1.76-1.59-2.64-3.555-2.64-5.896 0-2.957 1.094-5.221 3.282-6.793 2.204-1.59 5.349-2.385 9.433-2.385h3.82v-1.82c0-1.435-.402-2.58-1.205-3.435-.803-.871-2.025-1.307-3.666-1.307-1.418 0-2.58.359-3.486 1.077-.906.7-1.359 1.597-1.359 2.691h-6.229c0-1.52.504-2.94 1.513-4.255 1.008-1.333 2.375-2.376 4.101-3.128 1.743-.752 3.683-1.128 5.82-1.128 3.246 0 5.835.82 7.767 2.461 1.93 1.624 2.922 3.914 2.973 6.87v12.51c0 2.495.35 4.486 1.051 5.973V56h-6.357zm-6.845-4.486c1.23 0 2.384-.3 3.46-.897 1.095-.598 1.915-1.402 2.462-2.41v-5.23h-3.358c-2.307 0-4.042.402-5.204 1.205-1.162.804-1.743 1.94-1.743 3.41 0 1.196.393 2.153 1.179 2.87.803.702 1.871 1.052 3.204 1.052zM102.6 21.521v6.742h4.896v4.614H102.6v15.484c0 1.06.205 1.829.615 2.307.427.461 1.179.692 2.256.692.718 0 1.444-.085 2.179-.256v4.82c-1.418.392-2.786.589-4.102.589-4.785 0-7.177-2.64-7.177-7.921V32.877h-4.563v-4.614h4.563v-6.742h6.229zM127.8 56c-.273-.53-.513-1.393-.718-2.59-1.982 2.069-4.409 3.103-7.28 3.103-2.786 0-5.059-.795-6.819-2.384-1.76-1.59-2.64-3.555-2.64-5.896 0-2.957 1.093-5.221 3.281-6.793 2.205-1.59 5.349-2.385 9.434-2.385h3.819v-1.82c0-1.435-.402-2.58-1.205-3.435-.803-.871-2.025-1.307-3.666-1.307-1.418 0-2.58.359-3.486 1.077-.906.7-1.358 1.597-1.358 2.691h-6.23c0-1.52.504-2.94 1.513-4.255 1.008-1.333 2.375-2.376 4.101-3.128 1.743-.752 3.683-1.128 5.819-1.128 3.247 0 5.837.82 7.768 2.461 1.931 1.624 2.922 3.914 2.973 6.87v12.51c0 2.495.351 4.486 1.051 5.973V56H127.8zm-6.845-4.486c1.231 0 2.385-.3 3.461-.897 1.094-.598 1.914-1.402 2.461-2.41v-5.23h-3.358c-2.307 0-4.042.402-5.204 1.205-1.162.804-1.743 1.94-1.743 3.41 0 1.196.393 2.153 1.179 2.87.803.702 1.871 1.052 3.204 1.052zM162.946 47.412l4.409-19.149h6.076L165.869 56h-5.127l-5.948-19.047L148.95 56h-5.127l-7.588-27.737h6.075l4.486 18.944 5.691-18.944h4.691l5.768 19.15zM191.069 33.954a15.43 15.43 0 00-2.538-.205c-2.854 0-4.777 1.094-5.768 3.281V56h-6.229V28.263h5.947l.154 3.102c1.504-2.41 3.589-3.614 6.255-3.614.888 0 1.623.12 2.204.358l-.025 5.845zM209.757 56c-.273-.53-.512-1.393-.717-2.59-1.983 2.069-4.41 3.103-7.281 3.103-2.785 0-5.058-.795-6.819-2.384-1.76-1.59-2.64-3.555-2.64-5.896 0-2.957 1.094-5.221 3.281-6.793 2.205-1.59 5.349-2.385 9.434-2.385h3.82v-1.82c0-1.435-.402-2.58-1.205-3.435-.804-.871-2.025-1.307-3.666-1.307-1.419 0-2.581.359-3.486 1.077-.906.7-1.359 1.597-1.359 2.691h-6.229c0-1.52.504-2.94 1.512-4.255 1.008-1.333 2.376-2.376 4.102-3.128 1.743-.752 3.683-1.128 5.819-1.128 3.247 0 5.836.82 7.767 2.461 1.931 1.624 2.922 3.914 2.974 6.87v12.51c0 2.495.35 4.486 1.051 5.973V56h-6.358zm-6.844-4.486c1.23 0 2.384-.3 3.461-.897 1.093-.598 1.914-1.402 2.461-2.41v-5.23h-3.359c-2.307 0-4.041.402-5.203 1.205-1.163.804-1.744 1.94-1.744 3.41 0 1.196.393 2.153 1.18 2.87.803.702 1.871 1.052 3.204 1.052zM244.827 42.414c0 4.29-.974 7.716-2.923 10.28-1.948 2.545-4.563 3.819-7.844 3.819-3.042 0-5.477-1-7.306-3v13.151h-6.229v-38.4h5.742l.257 2.819c1.828-2.222 4.315-3.332 7.459-3.332 3.384 0 6.033 1.264 7.947 3.793 1.931 2.513 2.897 6.007 2.897 10.485v.385zm-6.204-.539c0-2.768-.555-4.964-1.666-6.588-1.094-1.623-2.666-2.435-4.717-2.435-2.546 0-4.375 1.05-5.486 3.153V48.31c1.128 2.153 2.974 3.23 5.537 3.23 1.983 0 3.529-.795 4.64-2.384 1.128-1.607 1.692-4.034 1.692-7.28zM273.359 42.414c0 4.29-.974 7.716-2.922 10.28-1.948 2.545-4.563 3.819-7.844 3.819-3.042 0-5.478-1-7.306-3v13.151h-6.229v-38.4h5.742l.256 2.819c1.829-2.222 4.315-3.332 7.46-3.332 3.384 0 6.032 1.264 7.947 3.793 1.931 2.513 2.896 6.007 2.896 10.485v.385zm-6.203-.539c0-2.768-.556-4.964-1.667-6.588-1.093-1.623-2.666-2.435-4.716-2.435-2.547 0-4.375 1.05-5.486 3.153V48.31c1.128 2.153 2.973 3.23 5.537 3.23 1.982 0 3.529-.795 4.64-2.384 1.128-1.607 1.692-4.034 1.692-7.28zM289.818 56.513c-3.948 0-7.152-1.24-9.613-3.717-2.444-2.495-3.666-5.81-3.666-9.947v-.769c0-2.768.53-5.238 1.589-7.408 1.077-2.188 2.581-3.888 4.512-5.101 1.931-1.214 4.085-1.82 6.46-1.82 3.777 0 6.691 1.204 8.741 3.614 2.068 2.41 3.102 5.82 3.102 10.228v2.512H282.82c.188 2.29.948 4.102 2.281 5.435 1.35 1.333 3.042 2 5.076 2 2.854 0 5.178-1.154 6.972-3.461l3.359 3.204c-1.111 1.658-2.598 2.948-4.461 3.871-1.846.906-3.922 1.359-6.229 1.359zm-.744-23.764c-1.709 0-3.093.598-4.152 1.795-1.043 1.196-1.709 2.862-2 4.998h11.869v-.46c-.137-2.086-.692-3.658-1.666-4.718-.974-1.076-2.325-1.615-4.051-1.615zM319.273 33.954a15.412 15.412 0 00-2.538-.205c-2.854 0-4.776 1.094-5.767 3.281V56h-6.23V28.263h5.948l.153 3.102c1.504-2.41 3.589-3.614 6.255-3.614.889 0 1.624.12 2.205.358l-.026 5.845z"
/></g
></svg
>
<div class="logo-datawrapper">
<svg alt="Datawrapper logo" viewBox="0 0 336 90" fill="none" xmlns="http://www.w3.org/2000/svg"
><g fill={color}
><path d="M5 0H0v91h335v-5H5V0z" shape-rendering="crispEdges" /><path
d="M34.794 56V18.676h11.023c3.298 0 6.22.735 8.767 2.204 2.563 1.47 4.546 3.555 5.947 6.255 1.402 2.7 2.102 5.794 2.102 9.28v1.871c0 3.538-.709 6.648-2.127 9.331-1.402 2.684-3.41 4.751-6.025 6.204C51.884 55.274 48.901 56 45.535 56H34.794zm6.486-32.095v26.917h4.23c3.4 0 6.006-1.06 7.818-3.179 1.828-2.136 2.76-5.195 2.794-9.177v-2.077c0-4.05-.88-7.143-2.64-9.28-1.76-2.136-4.316-3.204-7.665-3.204h-4.538zM84.014 56c-.274-.53-.513-1.393-.718-2.59-1.983 2.069-4.41 3.103-7.28 3.103-2.786 0-5.059-.795-6.82-2.384-1.76-1.59-2.64-3.555-2.64-5.896 0-2.957 1.094-5.221 3.282-6.793 2.204-1.59 5.349-2.385 9.433-2.385h3.82v-1.82c0-1.435-.402-2.58-1.205-3.435-.803-.871-2.025-1.307-3.666-1.307-1.418 0-2.58.359-3.486 1.077-.906.7-1.359 1.597-1.359 2.691h-6.229c0-1.52.504-2.94 1.513-4.255 1.008-1.333 2.375-2.376 4.101-3.128 1.743-.752 3.683-1.128 5.82-1.128 3.246 0 5.835.82 7.767 2.461 1.93 1.624 2.922 3.914 2.973 6.87v12.51c0 2.495.35 4.486 1.051 5.973V56h-6.357zm-6.845-4.486c1.23 0 2.384-.3 3.46-.897 1.095-.598 1.915-1.402 2.462-2.41v-5.23h-3.358c-2.307 0-4.042.402-5.204 1.205-1.162.804-1.743 1.94-1.743 3.41 0 1.196.393 2.153 1.179 2.87.803.702 1.871 1.052 3.204 1.052zM102.6 21.521v6.742h4.896v4.614H102.6v15.484c0 1.06.205 1.829.615 2.307.427.461 1.179.692 2.256.692.718 0 1.444-.085 2.179-.256v4.82c-1.418.392-2.786.589-4.102.589-4.785 0-7.177-2.64-7.177-7.921V32.877h-4.563v-4.614h4.563v-6.742h6.229zM127.8 56c-.273-.53-.513-1.393-.718-2.59-1.982 2.069-4.409 3.103-7.28 3.103-2.786 0-5.059-.795-6.819-2.384-1.76-1.59-2.64-3.555-2.64-5.896 0-2.957 1.093-5.221 3.281-6.793 2.205-1.59 5.349-2.385 9.434-2.385h3.819v-1.82c0-1.435-.402-2.58-1.205-3.435-.803-.871-2.025-1.307-3.666-1.307-1.418 0-2.58.359-3.486 1.077-.906.7-1.358 1.597-1.358 2.691h-6.23c0-1.52.504-2.94 1.513-4.255 1.008-1.333 2.375-2.376 4.101-3.128 1.743-.752 3.683-1.128 5.819-1.128 3.247 0 5.837.82 7.768 2.461 1.931 1.624 2.922 3.914 2.973 6.87v12.51c0 2.495.351 4.486 1.051 5.973V56H127.8zm-6.845-4.486c1.231 0 2.385-.3 3.461-.897 1.094-.598 1.914-1.402 2.461-2.41v-5.23h-3.358c-2.307 0-4.042.402-5.204 1.205-1.162.804-1.743 1.94-1.743 3.41 0 1.196.393 2.153 1.179 2.87.803.702 1.871 1.052 3.204 1.052zM162.946 47.412l4.409-19.149h6.076L165.869 56h-5.127l-5.948-19.047L148.95 56h-5.127l-7.588-27.737h6.075l4.486 18.944 5.691-18.944h4.691l5.768 19.15zM191.069 33.954a15.43 15.43 0 00-2.538-.205c-2.854 0-4.777 1.094-5.768 3.281V56h-6.229V28.263h5.947l.154 3.102c1.504-2.41 3.589-3.614 6.255-3.614.888 0 1.623.12 2.204.358l-.025 5.845zM209.757 56c-.273-.53-.512-1.393-.717-2.59-1.983 2.069-4.41 3.103-7.281 3.103-2.785 0-5.058-.795-6.819-2.384-1.76-1.59-2.64-3.555-2.64-5.896 0-2.957 1.094-5.221 3.281-6.793 2.205-1.59 5.349-2.385 9.434-2.385h3.82v-1.82c0-1.435-.402-2.58-1.205-3.435-.804-.871-2.025-1.307-3.666-1.307-1.419 0-2.581.359-3.486 1.077-.906.7-1.359 1.597-1.359 2.691h-6.229c0-1.52.504-2.94 1.512-4.255 1.008-1.333 2.376-2.376 4.102-3.128 1.743-.752 3.683-1.128 5.819-1.128 3.247 0 5.836.82 7.767 2.461 1.931 1.624 2.922 3.914 2.974 6.87v12.51c0 2.495.35 4.486 1.051 5.973V56h-6.358zm-6.844-4.486c1.23 0 2.384-.3 3.461-.897 1.093-.598 1.914-1.402 2.461-2.41v-5.23h-3.359c-2.307 0-4.041.402-5.203 1.205-1.163.804-1.744 1.94-1.744 3.41 0 1.196.393 2.153 1.18 2.87.803.702 1.871 1.052 3.204 1.052zM244.827 42.414c0 4.29-.974 7.716-2.923 10.28-1.948 2.545-4.563 3.819-7.844 3.819-3.042 0-5.477-1-7.306-3v13.151h-6.229v-38.4h5.742l.257 2.819c1.828-2.222 4.315-3.332 7.459-3.332 3.384 0 6.033 1.264 7.947 3.793 1.931 2.513 2.897 6.007 2.897 10.485v.385zm-6.204-.539c0-2.768-.555-4.964-1.666-6.588-1.094-1.623-2.666-2.435-4.717-2.435-2.546 0-4.375 1.05-5.486 3.153V48.31c1.128 2.153 2.974 3.23 5.537 3.23 1.983 0 3.529-.795 4.64-2.384 1.128-1.607 1.692-4.034 1.692-7.28zM273.359 42.414c0 4.29-.974 7.716-2.922 10.28-1.948 2.545-4.563 3.819-7.844 3.819-3.042 0-5.478-1-7.306-3v13.151h-6.229v-38.4h5.742l.256 2.819c1.829-2.222 4.315-3.332 7.46-3.332 3.384 0 6.032 1.264 7.947 3.793 1.931 2.513 2.896 6.007 2.896 10.485v.385zm-6.203-.539c0-2.768-.556-4.964-1.667-6.588-1.093-1.623-2.666-2.435-4.716-2.435-2.547 0-4.375 1.05-5.486 3.153V48.31c1.128 2.153 2.973 3.23 5.537 3.23 1.982 0 3.529-.795 4.64-2.384 1.128-1.607 1.692-4.034 1.692-7.28zM289.818 56.513c-3.948 0-7.152-1.24-9.613-3.717-2.444-2.495-3.666-5.81-3.666-9.947v-.769c0-2.768.53-5.238 1.589-7.408 1.077-2.188 2.581-3.888 4.512-5.101 1.931-1.214 4.085-1.82 6.46-1.82 3.777 0 6.691 1.204 8.741 3.614 2.068 2.41 3.102 5.82 3.102 10.228v2.512H282.82c.188 2.29.948 4.102 2.281 5.435 1.35 1.333 3.042 2 5.076 2 2.854 0 5.178-1.154 6.972-3.461l3.359 3.204c-1.111 1.658-2.598 2.948-4.461 3.871-1.846.906-3.922 1.359-6.229 1.359zm-.744-23.764c-1.709 0-3.093.598-4.152 1.795-1.043 1.196-1.709 2.862-2 4.998h11.869v-.46c-.137-2.086-.692-3.658-1.666-4.718-.974-1.076-2.325-1.615-4.051-1.615zM319.273 33.954a15.412 15.412 0 00-2.538-.205c-2.854 0-4.776 1.094-5.767 3.281V56h-6.23V28.263h5.948l.153 3.102c1.504-2.41 3.589-3.614 6.255-3.614.889 0 1.624.12 2.205.358l-.026 5.845z"
/></g
>
</svg>
</div>

<style>
.logo-datawrapper {
max-width: 200px;
}
svg {
transition: all 0.2s ease-in-out;
width: 100%;
height: auto;
}
</style>

0 comments on commit d98ca64

Please sign in to comment.