Remove favicon and logo assets and update button styling
Refactor button styles into reusable component Update navigation to use button component Move logo to assets directory
This commit is contained in:
Ruben
parent
6b94f63133
commit
ea6a97b6cb
6 changed files with 50 additions and 47 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"><path fill="#6391b5" d="M257 0c-5 56-31 98-67 147-36 48-69 84-85 140-28 102 23 197 114 217 99 22 202-42 196-155-3-57-17-84-40-117-23-32-40-60-85-92 23 83 26 201-58 192s-35-118 8-179c38-53 53-129 17-153"/></svg>
|
||||
|
Before Width: | Height: | Size: 275 B |
|
|
@ -1,17 +1,17 @@
|
|||
<div class="hero">
|
||||
<section class="hero">
|
||||
<div class="textbox">
|
||||
<h1>Pasientene som faller mellom alle stoler</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section escape">
|
||||
<div class="cta-content">
|
||||
<p>Vi har laget flere informative brosjyrer som oppsummerer og forklarer medisinsk cannabis på en kortfattet måte. Last de ned, print de ut å ta de med til legen, pasientforeningen din eller politikere du møter!</p>
|
||||
<a href="/brosjyrer" class="cta-button">Vis brosjyrer</a>
|
||||
<a href="/brosjyrer" class="button inverted bigger">Vis brosjyrer</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<article class="contain">
|
||||
<article>
|
||||
<h1>Hvem er vi?</h1>
|
||||
<p>Vi er en interesseorganisasjon som arbeider for at pasienter som kan ha nytte av medisinsk cannabis skal motta likeverdig og trygg behandling med oppfølging fra lege. Medikamentgruppen skal være økonomisk tilgjengelig gjennom offentlig refusjonsordninger og pasienter skal ikke miste grunnleggende rettigheter når de mottar lovlig medisin!</p>
|
||||
|
||||
|
|
@ -101,29 +101,6 @@
|
|||
margin-bottom: 1.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
color: var(--color-green);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-green-light);
|
||||
color: var(--color-green);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0.2rem white solid;
|
||||
outline-offset: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100" height="70.71" viewBox="0 0 73.898 50.777"><title>Logo som viser en tåredråpe, med teksten Stopp lidelsen.</title><path fill="#6391b5" id="symbol" d="M61.941 1.515c-.28 3.476-1.881 6.076-4.102 9.059s-4.27 5.178-5.226 8.63c-1.742 6.29 1.403 12.133 6.978 13.382 6.125 1.373 12.456-2.604 12.085-9.554-.185-3.475-1.04-5.16-2.448-7.174s-2.451-3.733-5.219-5.677c1.382 5.068 1.58 12.368-3.607 11.82-5.187-.547-2.123-7.28.525-11.015 2.312-3.261 3.241-7.958 1.013-9.47"/><g id="tekst" fill="#009c80"><path d="M75.023 235.574q-2.085 0-3.266-1.043-1.158-1.065-1.158-2.826l.023-.278h2.826v.162q.023.904.51 1.32.486.395 1.158.395.648 0 1.135-.302.486-.324.486-1.019 0-.741-.556-1.065-.555-.348-1.76-.672-1.158-.325-1.876-.649-.719-.324-1.251-1.065-.51-.742-.51-1.993 0-1.783 1.205-2.733 1.227-.973 3.15-.973 1.784 0 2.942.903 1.181.88 1.181 2.41l-.023.532h-2.826v-.046q-.023-1.529-1.367-1.529-.648 0-1.042.324-.394.325-.394.88 0 .65.533.95.533.278 1.668.58 1.181.3 1.923.648.74.325 1.274 1.089.556.741.556 2.062 0 3.938-4.54 3.938m9.683 0q-1.529 0-2.2-.927-.672-.95-.672-2.34v-6.856h-1.228v-2.34h1.228l.417-3.429h2.363v3.429h1.76v2.34h-1.76v6.787q0 .486.254.741.255.255.718.255h.788v2.062q-.301.116-.788.185-.486.093-.88.093m7.83 0q-2.456 0-3.66-1.552t-1.205-4.819 1.205-4.818q1.204-1.552 3.66-1.552 2.455 0 3.66 1.552t1.205 4.818-1.205 4.819-3.66 1.552m0-2.34q1.042 0 1.506-.88.463-.904.463-2.71v-.88q0-1.808-.463-2.688-.464-.903-1.506-.903t-1.506.903q-.463.88-.463 2.687v.88q0 1.807.463 2.71.464.881 1.506.881m7.065-10.123h2.317l.278 1.506h.116q.44-.88 1.158-1.32.718-.464 1.598-.464 1.853 0 2.873 1.598 1.042 1.576 1.042 4.795 0 3.174-1.042 4.772-1.02 1.576-2.734 1.576-.926 0-1.668-.394-.718-.417-1.042-1.135h-.116v5.258h-2.78zm4.633 9.938q.973 0 1.413-.834.44-.857.44-2.572v-.88q0-1.714-.44-2.548-.44-.857-1.413-.857t-1.413.857q-.44.834-.44 2.548v.834q0 1.714.44 2.595.44.857 1.413.857m6.973-9.938h2.316l.278 1.506h.116q.44-.88 1.158-1.32.719-.464 1.599-.464 1.853 0 2.872 1.598 1.043 1.576 1.043 4.795 0 3.174-1.043 4.772-1.019 1.576-2.733 1.576-.927 0-1.668-.394-.718-.417-1.042-1.135h-.116v5.258h-2.78zm4.633 9.938q.973 0 1.413-.834.44-.857.44-2.572v-.88q0-1.714-.44-2.548-.44-.857-1.413-.857t-1.413.857q-.44.834-.44 2.548v.834q0 1.714.44 2.595.44.857 1.413.857" aria-label="stopp" transform="translate(-64.179 -190.942)scale(.9403)"/><path d="M70.718 237.067h3.002v18.085h-3.002zm5.703 4.928h3.002v13.157H76.42zm-.025-4.928h3.027v2.877h-3.027zm9.63 18.385q-2 0-3.126-1.7-1.1-1.727-1.1-5.204 0-3.427 1.1-5.128 1.125-1.725 2.976-1.725 1.001 0 1.776.45.8.425 1.151 1.2h.125v-6.278h3.002v18.085h-2.502l-.3-1.626h-.125q-.475.95-1.25 1.451-.776.475-1.726.475m.901-2.726q1.05 0 1.526-.9.475-.926.475-2.777v-.9q0-1.852-.475-2.777-.475-.95-1.526-.95-1.05 0-1.526.925-.475.9-.475 2.751v.95q0 1.852.475 2.777.475.9 1.526.9m12.307 2.726q-2.577 0-3.877-1.676-1.276-1.7-1.276-5.203 0-6.878 5.053-6.878 2.401 0 3.577 1.675 1.175 1.676 1.175 5.203v.75h-6.678q.025 1.852.475 2.777.475.9 1.55.9.776 0 1.227-.65.45-.675.45-1.85h2.976q0 2.45-1.275 3.702-1.276 1.25-3.377 1.25m1.5-8.304q0-3.002-1.6-3.002-.926 0-1.376.775-.45.75-.525 2.227zm5.329-10.081h3.001v18.085h-3.001zm9.955 18.385q-2.251 0-3.527-1.125-1.25-1.151-1.25-3.052l.025-.3h3.051v.175q.025.975.55 1.426.526.425 1.251.425.7 0 1.226-.325.525-.35.525-1.1 0-.801-.6-1.152-.6-.375-1.901-.725-1.25-.35-2.026-.7t-1.351-1.151q-.55-.8-.55-2.151 0-1.926 1.3-2.952 1.326-1.05 3.402-1.05 1.926 0 3.177.975 1.276.95 1.276 2.602l-.025.575h-3.052v-.05q-.025-1.651-1.476-1.651-.7 0-1.125.35t-.426.95q0 .701.576 1.026.575.3 1.8.626 1.276.325 2.077.7.8.35 1.376 1.176.6.8.6 2.226 0 4.252-4.903 4.252m11.732 0q-2.577 0-3.877-1.676-1.276-1.7-1.276-5.203 0-6.878 5.053-6.878 2.401 0 3.577 1.675 1.175 1.676 1.175 5.203v.75h-6.678q.025 1.852.475 2.777.475.9 1.55.9.776 0 1.227-.65.45-.675.45-1.85h2.976q0 2.45-1.275 3.702-1.276 1.25-3.377 1.25m1.5-8.304q0-3.002-1.6-3.002-.926 0-1.376.775-.45.75-.525 2.227zm5.354-5.153h2.501l.3 1.626h.15q.576-.85 1.401-1.376.826-.55 1.926-.55 1.626 0 2.552 1.025.95 1 .95 3.202v9.23h-3.002v-8.405q0-1.225-.45-1.776-.425-.55-1.276-.55-.875 0-1.475.775-.576.75-.576 1.852v8.104h-3.001z" aria-label="lidelsen" transform="translate(-64.179 -190.942)scale(.9403)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 4.2 KiB |
|
|
@ -91,24 +91,9 @@ header {
|
|||
margin-top: .4rem;
|
||||
padding: 0;
|
||||
justify-content: flex-end;
|
||||
/* align-self: end; */
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--color-grey);
|
||||
padding: 0.35rem 1rem;
|
||||
margin-left:0.4rem;
|
||||
margin-top:0.4rem;
|
||||
&:hover, &.active {
|
||||
background-color: var(--color-green);
|
||||
color: white;
|
||||
}
|
||||
&:focus {
|
||||
outline: .1rem var(--color-green) solid;
|
||||
color: var(--color-grey);
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -132,6 +117,49 @@ main {
|
|||
|
||||
/* FOOTER */
|
||||
|
||||
/* BUTTONS */
|
||||
.button {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
border-radius: 1rem;
|
||||
padding: 0.35rem 1rem;
|
||||
background-color: var(--color-grey);
|
||||
color: white;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: var(--color-green);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0.1rem var(--color-green) solid;
|
||||
color: var(--color-grey);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&.inverted {
|
||||
background-color: white;
|
||||
color: var(--color-grey);
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: var(--color-green-light);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0.1rem white solid;
|
||||
color: white;
|
||||
background-color: var(--color-grey);
|
||||
}
|
||||
}
|
||||
|
||||
&.bigger {
|
||||
font-size: 1.2em;
|
||||
padding: calc(0.35rem * 1.2) calc(1rem * 1.2);
|
||||
border-radius: calc(1rem * 1.2);
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
color: var(--color-green-light);
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -30,14 +30,14 @@ function getActiveClass($href) { return rtrim(parse_url($_SERVER['REQUEST_URI'],
|
|||
<header class="contain">
|
||||
<div>
|
||||
<div class="logo">
|
||||
<a href="/"><?php include $publicDir . '/logo.svg'; ?></a>
|
||||
<a href="/"><?php include dirname(__DIR__) . '/assets/logo.svg'; ?></a>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<a href="/" class="<?php echo getActiveClass('/'); ?>"><li><?= htmlspecialchars($homeLabel ?? 'Forsiden') ?></li></a>
|
||||
<a href="/" class="button <?php echo getActiveClass('/'); ?>"><li><?= htmlspecialchars($homeLabel ?? 'Forsiden') ?></li></a>
|
||||
<?php if (!empty($navigation)): ?>
|
||||
<?php foreach ($navigation as $item): ?>
|
||||
<a href="<?= htmlspecialchars($item['url']) ?>" class="<?php echo getActiveClass($item['url']); ?>"><li><?= htmlspecialchars($item['title']) ?></li></a>
|
||||
<a href="<?= htmlspecialchars($item['url']) ?>" class="button <?php echo getActiveClass($item['url']); ?>"><li><?= htmlspecialchars($item['title']) ?></li></a>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue