Justify the text inside a grid

Question

I'm trying to justify my text inside a grid on cargo collective. Till now I couldn't do that and I had to export a svg for each title and place it as an image (like in this page: https://gracegloriadenis.com/IN-FROM-AND-WITH)

But right now the text would be afftected by a dark mode toggle and a svg won't be affected at all so I'll have to find a solution to justify the text in the div (as in "In, From and With" the title of the page I've just shared with you)

This is my code:

<div grid-col="x12" grid-pad="0" class=""><h1>CIVITONIA</h1>

Civitonia is the title that should be justified and it should touch both sides of the div always. Doing that I'd like not to have a size for the text (ex: font size:45rem;) but to have the text as big as the container. Is it possible?

Doing that it would be a lot easier even to have a responsive version of it, as the box would be smaller in the mobile and the text would follow it.

This is the script I'm using for the dark mode: the script

<button onclick="myFunction()">Dark Mode</button>

<script>
  
function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

</script>

CSS related to it:

.dark-mode {
  background-color: black!important;
  color: #d9ff76!important;
}

.dark-mode button {
  color: black!important;
    background-color: #d9ff76;
    padding: 5px 5px 5px 5px;
    border-radius: 15px;
    border: solid 1px #000000;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
}

have you tried: `text-justify: inter-character;`. If the font-size should adjust to the given width, you would require a scripting language such as JS — tacoshy, Jul 10 '22 at 15:49
the only 2 proprietis working for text-justify are inherit and initial! Which script should I use it to make it work? — Emanuele Pesa, Jul 10 '22 at 15:52
Are you wanting to justify the text or are you wanting to change the font-size so that the text fills the container horizontally? — A Haworth, Jul 10 '22 at 16:41

Simp4Code · Answer 1 · 2022-07-14T14:33:05.870

Best you're going to get with just CSS (which is pretty close) is using clamp for font size, use like:

font-size: clamp(<min value>, <preferred value>, <max value>);

Then you set "min value" to 0px and set "max value" to 1000px (a value that will never be reached). The preferred value will need some tweaking based on the font family used and the amount of characters -- so you will have to do it on a per instance basis. I've set the below example up using CSS custom properties (variables) to make it a bit easier, all you have to do is set --clampFontSize: <prefered-value> on an element (preferably in vw units (viewport width))

body { line-height: 1; margin: 0 } h1 { margin: 0 }

.clampText h1 {
  font-size: clamp(0px, var(--clampFontSize, 1vw), 1000px);
  text-align: center
}

<div class="clampText" style="--clampFontSize: 17.5vw">
  <h1>CIVITONIA</h1>
</div>
<div class="clampText" style="--clampFontSize: 12vw">
  <h1>In, from, <em>and</em> with</h1>
</div>

Otherwise, if you put your SVG inline then you can control the color on the fly with CSS — the example will have a dark gradient background and white svg color if dark mode is on. Else it will have a light gradient background and black svg color if dark more is off

Note each <path> is set to fill: currentColor in the CSS, this is to inherit the path fill color from the parent <svg> which is inheriting the color from #colorOuterSVG — sometimes paths shouldn’t be filled though and instead have a stroke, or sometimes it’s a circle or something else. So the CSS may need to be adapted to your needs.

The gradients and button color are setup using CSS Custom Properties (variables)

:root {
  --gradient1: #fca5a5, #fcd34d, #bef264, #6ee7b7, #67e8f9; /* Body */
  --gradient2: #f0abfc, #c4b5fd, #93c5fd, #67e8f9, #6ee7b7; /* SVG Container */
  
  --color: black; --contrast: white;
  
  --darkOn: none; --darkOff: block;
}
:root.dark-mode {
  --gradient1: #991b1b, #92400e, #3f6212, #065f46, #155e75; /* Body */
  --gradient2: #86198f, #5b21b6, #1e40af, #155e75, #065f46; /* SVG Container */
  
  --color: white; --contrast: black;
  
  --darkOn: block; --darkOff: none;
}

body { background: linear-gradient(60deg, var(--gradient1)) no-repeat }

.darkModeOn { display: var(--darkOn) }
.darkModeOff { display: var(--darkOff) }

button {
  background-color: var(--contrast);
  border: 1px solid currentColor;
  border-radius: 0.375em;
  color: var(--color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: .5em 1em;
}
button span { margin-right: .25em }

.colorOuterSVG {
  background: linear-gradient(60deg, var(--gradient2)) no-repeat;
  border: 1px solid currentColor;
  border-radius: 0.375em;
  color: var(--color);
  padding: 0.5em
}

.colorSVG { display: block }
.colorSVG path { fill: currentColor }

<button onclick="document.documentElement.classList.toggle('dark-mode')"><span class="darkModeOn">Disable</span><span class="darkModeOff">Enable</span>Dark Mode</button>

<div class="colorOuterSVG">
  <svg class="colorSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1920 239.3" style="enable-background:new 0 0 1920 239.3;" xml:space="preserve">
    <g>
      <path d="M20.5,165.3V41.5c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6   s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7,0-11.8,1-14.3,3.1c-2.5,2.1-3.8,5.9-3.8,11.3v123.8   c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.8-0.6-14.5-0.9-26.1-0.9c-11.6,0-20.3,0.3-26.1,0.9   c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8C14.5,180,20.5,175.1,20.5,165.3z"/>
      <path d="M87.6,165.3v-116c0-8.5-1.5-14.3-4.6-17.5c-3.1-3.2-7.8-4.8-14.4-4.8c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8   c2.9,0.4,7.9,0.6,14.9,0.6c7,0,11.6,0.3,13.8,0.9c2.2,0.6,4.1,2.4,5.9,5.2L179.6,147c0.7,1.1,1.5,1.6,2.4,1.6   c1.5,0,2.3-1.4,2.3-4.1V41.7c0-9.7-5.7-14.6-17.2-14.6c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c3.1,0.4,9.4,0.6,18.9,0.6   c9.5,0,15.8-0.2,18.8-0.6c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-9,0-13.6,4.9-13.6,14.6V185c0,4.2-0.6,6.3-1.8,6.3   c-1.2,0-2.6-1.3-4.3-3.8l-87-137.5c-0.8-1.1-1.5-1.6-2.3-1.6c-0.8,0-1.1,0.8-1.1,2.3v114.6c0,9.8,5.4,14.7,16.1,14.7   c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.4-0.6-12.1-0.9-19.9-0.9c-7.8,0-14.5,0.3-20,0.9c-0.9,0-1.4-1.6-1.4-4.8   c0-3.2,0.5-4.8,1.4-4.8C82,180,87.6,175.1,87.6,165.3z"/>
      <path d="M234.3,159.1c5.3,0,9.7,2.8,13.3,8.5c3,4.8,4.5,10.2,4.5,16.2c0,13-4.2,25.2-12.7,36.5c-4.7,6.3-9.9,11.2-15.6,14.7   c-0.1,0.2-0.2,0.3-0.4,0.3c-1.8,0-2.6-1.1-2.6-3.4c0-0.3,0-0.6,0.1-0.8l9.5-12.8c4.9-7.7,7.4-15.2,7.4-22.5c0-4.1-1.2-6.7-3.5-7.7   c-7.8-3.8-11.7-9.4-11.7-17c0-4.9,1.8-8.4,5.5-10.5C230,159.6,232,159.1,234.3,159.1z"/>
      <path d="M346.2,165.3V41.5c0-9.2-6.3-13.8-18.8-13.8c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c7.8,0.4,17.5,0.6,29,0.6   c11.6,0,22.6-0.1,33.3-0.3c10.6-0.2,21.7-0.3,33.3-0.3c4.7,0.1,7.1,0.9,7.3,2.4v41.3c0,1.5-1.3,2.3-3.8,2.3c-2.5,0-3.8-0.8-3.8-2.3   c0-21.3-8.7-32.3-26.1-32.9l-30.1-1.3c-2.8,0-4.1,1.7-4.1,5.1v62c0,2.6,0.9,3.9,2.8,3.9h16.4c5,0,8.2-1.3,9.7-3.8   c1.4-2.5,2.1-6.7,2.1-12.6V67.8c0-1.1,1.2-1.6,3.5-1.6c2.3,0,3.5,0.5,3.5,1.6c-0.5,5.9-0.8,17.7-0.8,35.6c0,17.9,0.3,29.8,0.8,35.7   c0,1.1-1.2,1.6-3.5,1.6c-2.3,0-3.5-0.5-3.5-1.6v-14.7c0-5.9-0.8-10-2.5-12.4c-1.7-2.4-4.8-3.6-9.3-3.6h-16.7c-1.7,0-2.5,1-2.5,3.1   v53.9c0,9.8,6.3,14.7,18.8,14.7c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-5.9-0.6-14.8-0.9-26.6-0.9s-20.6,0.3-26.4,0.9   c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8C340.2,180,346.2,175.1,346.2,165.3z"/>
      <path d="M463.7,165.3V41.5c0-9.2-6.3-13.8-19-13.8c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c7.7,0.4,14.8,0.6,21.3,0.6   c6.5,0,13-0.1,19.4-0.3c6.4-0.2,11.7-0.3,15.7-0.3c15.4,0,27.5,4,36.3,12.1c8.8,8.1,13.2,19.7,13.2,34.8c0,23.2-9,37.8-26.9,43.7   c-1.8,0.7-1.8,3.1,0,7.2c9.7,21.5,21.7,40.7,36,57.6c7.4,8.8,13.7,13.2,18.7,13.2c0.9,0,1.4,0.7,1.4,2.2s-0.5,2.2-1.4,2.3   c-2.8,0.3-5,0.5-6.7,0.5c-11,0-19-2.3-24.2-6.8c-8.2-7.1-15.3-15.6-21.2-25.4l-17.6-32.1c-3.2-5.9-5.7-9.7-7.5-11.3   c-1.8-1.6-4.6-2.4-8.4-2.4c-3.7,0-6.6-0.1-8.6-0.4c-2-0.3-3.3-0.2-3.8,0.3s-0.8,1.3-0.8,2.3v49.3c0,9.8,6.5,14.7,19.5,14.7   c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.2-0.6-14.1-0.9-26.9-0.9c-12.7,0-21.6,0.3-26.7,0.9c-0.9,0-1.4-1.6-1.4-4.7   s0.5-4.7,1.4-4.8C457.7,180,463.7,175.1,463.7,165.3z M479.8,100.2c0,2.6,1.3,4.2,3.8,4.9c2.5,0.7,6.1,1,10.8,1   c25.9,0,38.8-13.6,38.8-40.9c0-11-3.5-20.2-10.5-27.8c-7-7.6-16.7-11.4-29.1-11.4h-9c-3.1,0-4.6,1.3-4.6,3.9V100.2z"/>
      <path d="M586.8,104.9c0-22,5.9-42.5,17.6-61.6c11.8-19,27.6-28.6,47.5-28.6c17.8,0,33,8.7,45.6,26.1c12.6,17.4,18.9,38.9,18.9,64.5   c0,21.4-5.8,41.2-17.5,59.4c-11.6,18.2-27.5,27.2-47.6,27.2c-19.4,0-35.1-8.6-46.9-25.7C592.7,149.2,586.8,128.7,586.8,104.9z    M606,97.5c0,26,5,46.6,15,62c10,15.4,20.6,23.1,31.8,23.1c14.2,0,25.2-7.2,33-21.7c7.7-14.5,11.6-32.3,11.6-53.5   c0-23.4-4.9-43.2-14.6-59.4c-9.8-16.2-20.4-24.4-32.1-24.4c-14.1,0-25,7.6-32.9,22.7C609.9,61.6,606,78.6,606,97.5z"/>
      <path d="M747.1,165.3l6-118.5c0.4-9-2.4-15-8.4-17.8c-2.7-1.3-6.2-1.9-10.7-1.9c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8   c3,0.4,8,0.6,15,0.6c7,0,11.6,0.6,13.7,1.9c2.1,1.3,3.8,3.7,5.1,7.2l47.5,126.6c0.8,2.3,1.5,3.4,2.1,3.4c0.7,0,1.5-1.2,2.4-3.6   l48.7-127.1c1.4-3.8,3.3-6.2,5.6-7.1c2.3-0.9,6.7-1.3,13.3-1.3c6.6,0,11.4-0.2,14.6-0.6c0.9,0,1.4,1.6,1.4,4.8   c0,3.2-0.5,4.8-1.4,4.8c-8.6,0-14.2,2.9-16.8,8.8c-1.4,3.4-2.1,8.1-2,13.9l0.6,115.5c0.1,9.8,5.4,14.7,15.9,14.7   c1,0,1.5,1.6,1.5,4.8c0,3.2-0.5,4.8-1.5,4.8c-5-0.6-12.7-0.9-23-0.9s-18.3,0.3-24,0.9c-0.9,0-1.4-1.6-1.4-4.8   c0-3.2,0.5-4.8,1.4-4.8c10,0,15-4.9,14.9-14.7l-0.4-107.1c0-1.1-0.3-1.6-0.9-1.6c-0.6,0-1.1,0.5-1.5,1.5l-50.7,131.3   c-0.6,1.4-1.3,2.1-2.3,2.1c-0.9,0-1.6-0.7-2.1-2.1L763.2,58c-0.5-1.4-1-2.1-1.6-2.1c-0.6,0-0.9,0.7-1,2.1l-5.1,107.4   c-0.5,9.8,4.8,14.7,15.8,14.7c1,0,1.5,1.6,1.5,4.8c0,3.2-0.5,4.8-1.5,4.8c-5.4-0.6-11.9-0.9-19.7-0.9s-14.5,0.3-20.1,0.9   c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8C741.5,180,746.7,175.1,747.1,165.3z"/>
      <path d="M933.6,159.1c5.3,0,9.7,2.8,13.3,8.5c3,4.8,4.5,10.2,4.5,16.2c0,13-4.2,25.2-12.7,36.5c-4.7,6.3-9.9,11.2-15.6,14.7   c-0.1,0.2-0.2,0.3-0.4,0.3c-1.8,0-2.6-1.1-2.6-3.4c0-0.3,0-0.6,0.1-0.8l9.5-12.8c4.9-7.7,7.4-15.2,7.4-22.5c0-4.1-1.2-6.7-3.5-7.7   c-7.8-3.8-11.7-9.4-11.7-17c0-4.9,1.8-8.4,5.5-10.5C929.3,159.6,931.3,159.1,933.6,159.1z"/>
      <path d="M1087.5,163.2c-0.7,2.9-1,5.4-1,7.4c0,3.4,1.1,5.1,3.3,5.1c2.2,0,6.5-3.9,13.1-11.8c0.6-0.8,1.5-0.3,2.8,1.4   c0.9,1.1,1.4,2,1.4,2.8c0,0.4-0.1,0.8-0.3,1c-4.4,6.8-9.3,12.3-14.7,16.6c-5.4,4.3-10,6.4-13.9,6.4c-4.1,0-6.2-3.3-6.2-9.9   c0-4.7,0.8-9.7,2.4-15.1l4.4-14.4l-1.3-0.5c-15.9,26.6-29.4,39.9-40.6,39.9c-4,0-7.1-2-9.2-6c-2.1-4-3.2-9-3.2-15.1   c0-17.7,5.8-36.8,17.5-57.4c11.6-20.6,23.9-30.9,36.9-30.9c4.9,0,9.3,2.3,13.4,7l2.4-8.8c0.5-2,2.7-3,6.7-3c3.9,0,5.7,1,5.1,3   L1087.5,163.2z M1084.9,120.5l4.5-19c-2.8-7-7.2-10.5-13.2-10.5c-9,0-17.4,9.2-25.2,27.6c-7.7,18.4-11.6,34.4-11.6,48   c0,7.9,2,11.8,5.9,11.8c3.7,0,8.9-4.2,15.6-12.6c6.7-8.4,11.9-16.2,15.7-23.4C1080.4,135.2,1083.1,127.9,1084.9,120.5z"/>
      <path d="M1188.1,163.2c-0.7,2.8-1,5.4-1,7.8c0,3.3,1.1,4.9,3.5,4.9c2.3,0,6.5-3.9,12.5-11.7c0.2-0.3,0.4-0.4,0.6-0.4   c0.8,0,1.7,0.5,2.4,1.6c0.8,1.1,1.2,1.9,1.2,2.5c0,0.6-0.1,1-0.3,1.1c-10.7,15.3-20.3,23-28.6,23c-3.7,0-5.5-3.5-5.5-10.5   c0-3.3,0.3-6.6,1-10l12.6-55.9c2-8.9,3-14.9,3-18.2c0-3.8-1-5.7-3-5.7c-5.7,0-13.9,9.7-24.5,29c-10.6,19.3-20,41.9-28.3,67.7   c-0.7,2.4-3,3.6-7,3.6c-4,0-5.7-1.4-5.1-4.1l17.7-77.7c0.4-1.8,0.6-3.4,0.6-4.9c0-3.9-1.1-5.9-3.2-5.9c-2.1,0-5.7,3.6-10.7,10.8   c-0.3,0.3-0.5,0.4-0.8,0.4c-0.8,0-1.6-0.5-2.4-1.6c-0.8-1-1.3-1.9-1.3-2.7c0-0.3,0.1-0.6,0.3-0.8c10.3-15.9,19.3-23.9,26.9-23.9   c3.8,0,5.8,3.8,5.8,11.3c0,3.5-1,9.3-2.9,17.3l-6.9,30.3l0.8,0.5c16.5-39.6,31.5-59.4,45.1-59.4c7.1,0,10.7,5.2,10.7,15.7   c0,5.1-0.9,11.8-2.8,20.1L1188.1,163.2z"/>
      <path d="M1284,162.4c-0.5,2.4-0.8,4.4-0.8,5.9c0,4.1,0.8,6.2,2.5,6.2c3.4,0,7.9-3.9,13.4-11.8c0.2-0.3,0.7-0.2,1.6,0.3   c0.9,0.4,1.6,1.2,2.1,2.3c0.5,1.1,0.6,1.8,0.4,2.1c-11.6,16.5-20.8,24.7-27.6,24.7c-4,0-6-4.5-6-13.4c0-2.2,0.2-4.5,0.6-6.9l4-22.4   l-1.4-1.4c-6.9,12.5-14,22.9-21.5,31.4c-7.5,8.5-14.5,12.7-21.1,12.7c-4.1,0-7.2-2.2-9.3-6.5c-2.1-4.3-3.1-9.4-3.1-15.1   c0-17.8,5.8-37.1,17.4-57.8c11.6-20.7,23.9-31,37-31c5.4,0,9.8,2.6,13.2,7.9l9.3-51.6c1-5.6,1.5-9.6,1.5-12.1   c0-6.9-2.6-10.3-7.7-10.3c-1,0-1.5-1.1-1.5-3.3c0-2.2,0.5-3.3,1.5-3.3c4.7,0,9.6-1.1,14.9-3.5c5.2-2.3,8-3.5,8.4-3.5   c0.8,0,1.3,0.5,1.3,1.6c0,0.3-0.1,0.8-0.3,1.5L1284,162.4z M1282.9,102.3c-2.9-8.2-7.4-12.3-13.3-12.3c-9,0-17.4,9.3-25.2,28   c-7.7,18.7-11.6,34.7-11.6,48.1c0,8.2,2,12.3,5.9,12.3c4.7,0,11.3-6,20-18.1c8.6-12.1,15.3-23.7,20-34.8L1282.9,102.3z"/>
      <path d="M1382,41.5c-3.4-9.6-8.4-14.4-14.8-14.4c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8c3,0.4,10.1,0.6,21.4,0.6   c11.3,0,18.5-0.2,21.7-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7.6,0-11.4,2.4-11.4,7.2c0,2,0.5,4.4,1.5,7.3L1440,152   c0.7,1.6,1.3,2.4,1.8,2.4c0.8,0,1.4-0.9,2-2.6l14.6-39.8c0.5-1.5,0.8-3.1,0.8-4.9c0-1.8-0.3-3.7-1-5.7l-21.5-59.9   c-3.4-9.6-8-14.4-13.7-14.4c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c2.9,0.4,9.9,0.6,20.8,0.6c11,0,18-0.2,21.1-0.6   c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7.5,0-11.3,2.3-11.3,6.9c0,2,0.5,4.5,1.5,7.5l11.7,32.5c0.8,1.9,1.4,2.9,1.9,2.9   c0.6,0,1.3-1,2-3.1l11.3-31.1c1.2-3.1,1.8-5.7,1.8-7.9c0-5.1-3.3-7.7-10-7.7c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8   c3,0.4,9.3,0.6,19,0.6c9.6,0,16-0.2,19.1-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10,0-16.3,3.6-19,10.8l-17.6,48.7   c-0.7,2.1-1,4-1,5.8c0,1.3,0.2,2.7,0.6,4l20,55.6c0.7,1.6,1.3,2.4,1.9,2.4c0.7,0,1.3-0.9,1.8-2.6l39.8-109.1   c1.2-3.1,1.8-5.7,1.8-7.8c0-5.2-3.3-7.8-10-7.8c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8c3.2,0.4,9.2,0.6,18.1,0.6   s14.9-0.2,18-0.6c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-8.7,0-14.4,3.6-17.1,10.8l-54.4,149.9c-1.2,3-2.1,4.5-2.8,4.5   c-0.8,0-1.6-1.5-2.6-4.4l-23-64.3c-0.5-1.3-1-2-1.6-2c-0.5,0-1,0.7-1.5,2l-23.2,64.3c-1,2.9-1.9,4.4-2.8,4.4   c-0.6,0-1.5-1.5-2.6-4.4L1382,41.5z"/>
      <path d="M1589,165.3V41.5c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6   s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7,0-11.8,1-14.3,3.1c-2.5,2.1-3.8,5.9-3.8,11.3v123.8   c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.8-0.6-14.5-0.9-26.1-0.9c-11.6,0-20.3,0.3-26.1,0.9   c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8C1583,180,1589,175.1,1589,165.3z"/>
      <path d="M1688.2,165.3V33.5c0-3.8-1.6-5.8-4.9-5.8h-15.2c-17.7,0-26.6,11.6-26.6,34.7c0,1.2-1.3,1.8-3.8,1.8   c-2.6,0-3.8-0.6-3.8-1.8V22.3c0-2.8,2.6-4.1,7.8-4.1c6.8,0,15.6,0.1,26.6,0.3c10.9,0.2,20.3,0.3,28.1,0.3c7.8,0,17.1-0.1,27.9-0.3   c10.8-0.2,20-0.3,27.6-0.3c5.3,0,7.9,1.4,7.9,4.1v40.1c0,1.2-1.3,1.8-3.8,1.8c-2.6,0-3.8-0.6-3.8-1.8c0-23.1-8.8-34.7-26.4-34.7   h-16.2c-3.4,0-5.1,1.9-5.1,5.8v131.8c0,9.8,6.3,14.7,19,14.7c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8   c-6.2-0.6-15.3-0.9-27.4-0.9c-12.1,0-21.2,0.3-27.4,0.9c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8   C1681.6,180,1688.2,175.1,1688.2,165.3z"/>
      <path d="M1900.7,165.3c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10.7-0.6-19.4-0.9-26.1-0.9   c-6.7,0-15.4,0.3-26,0.9c-0.8,0-1.3-1.6-1.3-4.7s0.4-4.7,1.3-4.8c12,0,18-4.9,18-14.7v-54.6c0-3.2-1.3-4.8-3.9-4.8h-70.6   c-2.6,0-3.9,1.6-3.9,4.8v54.6c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10-0.6-18.5-0.9-25.5-0.9   c-7,0-15.9,0.3-26.6,0.9c-0.8,0-1.3-1.6-1.3-4.7s0.4-4.7,1.3-4.8c12,0,18-4.9,18-14.7V41.5c0-9.6-6.3-14.4-19-14.4   c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8   c0,3.2-0.4,4.8-1.3,4.8c-12.1,0-18.1,4.8-18.1,14.4v49c0,3.3,1.3,4.9,3.9,4.9h70.6c2.6,0,3.9-1.6,3.9-4.9v-49   c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6c14.7,0,23.5-0.2,26.6-0.6   c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-12.1,0-18.1,4.8-18.1,14.4V165.3z"/>
    </g>
  </svg>
</div>

So even if I use a svg, I can modify the color of it with the dark mode toggle? In the last part of the code you've used a lot of path fill, why are there so many of it? Should I paste the last part of the code into the script section or where? — Emanuele Pesa, Jul 11 '22 at 15:12
I've just uploaded above the script I am using to switch all the colors in the dark mode — Emanuele Pesa, Jul 11 '22 at 15:20
@EmanuelePesa I updated the snippet to include the dark mode toggle button and I set the path fill via CSS -- let me know if there's anything else — Simp4Code, Jul 11 '22 at 16:23
The `` tag. So instead of setting image source to the SVG file you can simply include the SVG code in your HTML — Simp4Code, Jul 11 '22 at 16:26
Ok! This is actually working! The only thing that I do not understand is how you transformed the SVG into the . You did that, right? I mean, what should I do to transform the text of "In, from and with" in some other text // another svg into a path? I'll have to use this technique for each title of my internal articles (12 different ones moreless)! — Emanuele Pesa, Jul 11 '22 at 21:02
@EmanuelePesa your .svg file, if you open the file up in a new tab and inspect the element you can grab the svg code from there. Alternatively if you open the svg file from your computer using a text editor you can grab the svg code there too. So you would still make the svg in whatever graphics editor you used then open the file with a text editor, copy the code and paste it in your html — Simp4Code, Jul 11 '22 at 21:46
Everything working in a perfect way! Thanks a lot for the help — Emanuele Pesa, Jul 12 '22 at 13:34
Last thing last. What if I have a gradient (
and the dark mode toggle as to affect even that? — Emanuele Pesa, Jul 14 '22 at 12:55
I was thinking to export the gradient as an SVG and then just do what I did till now with them but it seems that it's not working — Emanuele Pesa, Jul 14 '22 at 13:13
@EmanuelePesa best way I can think to do this is with css custom properties, I updated the answer — Simp4Code, Jul 14 '22 at 13:52
I see! But what if I don't want to loose the previous work? I mean, a part of the website we'll use normal colors, but the navigation bar only it'll use the gradient — Emanuele Pesa, Jul 14 '22 at 14:11
Right now this is my nav bar (HOME; ARTIST*; ABOUT US; ETC) https://i.postimg.cc/htpKtb0X/Screenshot-2022-07-14-at-16-31-33.png It doesn't have any background and it's just text and it gets overlayed to the other text. What I'm trying to do is to add a background so all the text and the other stuff on scroll they go under it while scrolling and the gradient at the bottom of this "container" as in this second picture: https://i.postimg.cc/j5WPR4GT/Screenshot-2022-07-14-at-16-46-03.png clicking on the swith color btn: https://i.postimg.cc/9XgXdjRL/2-Screenshot-2022-07-14-at-16-46-03.png — Emanuele Pesa, Jul 14 '22 at 14:53
@EmanuelePesa `` you need to set a background-color for both states, don't set it to none. Match the navbar background color with the body background color — Simp4Code, Jul 14 '22 at 15:59
Perfect! The only problem is that the height right now I'd like to change the height of the gradient but if I modify the height it modify the height of the navigation bar. Do you know how to change just the height of the gradient inside his container? — Emanuele Pesa, Jul 14 '22 at 20:06
@EmanuelePesa the gradient can be defined like `background-image: linear-gradient(0deg, transparent 90%, green 100%);` so that the transparent part will be 90% the size of the background — Simp4Code, Jul 15 '22 at 09:30

Justify the text inside a grid

1 Answers1