stopplidelsen/innhold
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add medical cannabis petition campaign

Browse source 
Add cover image, introduction, call-to-action, and thank-you pages
Add petition form styling and functionality
Include bilingual support for English and Norwegian
Implement signature confirmation flow
Add metadata for campaign configuration
This commit is contained in:
Ruben 2026-01-16 00:37:42 +01:00
parent ec7f87a574
commit 3a5e3004c7
15 changed files with 352 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

236
content/underskriftskampanje/medisinsk-cannabis-pa-resept/styles.css Normal file
View file

@ -0,0 +1,236 @@
/* PETITION */
/* Button */
.button--petition {
background-color: var(--color-green);
color: white;
outline: white;
padding: 1.3rem 1.8rem;
}
/* CTA block */
.cta-block {
margin-top: 1.5rem;
display: inline-flex;
flex-direction: column-reverse;
align-items: center;
gap: .25rem
}
.cta-block__counter {
margin: 0;
font-size: 1rem;
color: oklch(0.45 0.06 173.93)
}
.cta-block__count {
font-weight: 700;
color: var(--color-green)
}
/* Honeypot - hidden from users, visible to bots */
.hp-field { position: absolute; left: -5000px }
/* Messages */
.form-message {
padding: 1rem;
border-radius: .25rem;
margin-top: 1.3em;
p {margin-top:0}
&.form-message--success {
background-color: oklch(0.92 0.05 145);
border: 1px solid oklch(0.85 0.08 145);
color: oklch(0.35 0.08 145)
}
&.form-message--info {
background-color: oklch(0.94 0.03 220);
border: 1px solid oklch(0.88 0.05 220);
color: oklch(0.4 0.06 220)
}
&.form-message--error {
background-color: oklch(0.92 0.05 25);
border: 1px solid oklch(0.85 0.08 25);
color: oklch(0.4 0.12 25)
}
}
.form-errors {
background-color: oklch(0.92 0.05 25);
border: 1px solid oklch(0.85 0.08 25);
color: oklch(0.4 0.12 25);
padding: 1rem;
border-radius: .25rem;
margin-top: 1.3em;
ul { margin-top: .5rem; padding-left: 1.5rem }
}
/* Form */
form {
margin-top: 1.3em;
.form-row {
display: flex;
flex-wrap: wrap;
gap: 0 1rem;
& > .form-group { flex: 1 1 min(100%, 20rem) }
}
.form-group {
margin-top: 1.3em;
label {
display: block;
font-weight: 600;
margin-bottom: .3rem;
.required { color: oklch(0.55 0.2 25) }
}
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: .6rem;
border: 1px solid oklch(0.8 0 0);
border-radius: .25rem;
font-family: inherit;
font-size: 1rem;
box-sizing: border-box;
&:focus {
outline: none;
border-color: var(--color-green);
box-shadow: 0 0 0 .15rem oklch(0.618 0.1176 173.93 / 0.25)
}
}
small {
display: block;
margin-top: .3rem;
color: oklch(0.55 0 0);
font-size: .875rem
}
}
fieldset {
border: 1px solid oklch(0.85 0 0);
border-radius: .25rem;
padding: 1rem;
margin-top: 1.3em;
legend {
font-weight: 600;
padding: 0 .5rem
}
label {
display: block;
margin-top: .5rem;
cursor: pointer;
font-weight: normal;
input[type="radio"] { margin-right: .5rem }
}
}
.privacy-notice {
background-color: oklch(0.96 0.01 220);
border: 1px solid oklch(0.88 0.03 220);
border-radius: .25rem;
padding: .8rem 1rem;
.privacy-intro {
margin: 0;
color: oklch(0.4 0.05 220);
font-size: .875rem;
a {
color: oklch(0.4 0.1 220);
font-weight: 600;
text-decoration: underline;
&:hover { color: oklch(0.3 0.12 220) }
}
}
}
.info-box {
border: 1px solid;
border-radius: .25rem;
padding: 1rem;
p { margin-top: 0; font-size: .9rem; line-height: 1.5 }
a { font-weight: 600; text-decoration: underline }
&.info-box--green {
border-color: oklch(0.85 0.05 145);
background-color: oklch(0.98 0.01 145);
a { color: oklch(0.4 0.1 145); &:hover { color: oklch(0.3 0.12 145) } }
}
&.info-box--yellow {
border-color: oklch(0.85 0.1 85);
background-color: oklch(0.96 0.04 85);
a { color: oklch(0.45 0.1 85); &:hover { color: oklch(0.35 0.12 85) } }
}
}
.consent-group {
.consent-label {
display: flex;
align-items: flex-start;
gap: .6rem;
cursor: pointer;
font-weight: normal;
input[type="checkbox"] {
margin-top: .2rem;
cursor: pointer;
width: 1.1rem;
height: 1.1rem;
flex-shrink: 0
}
span {
flex: 1;
font-size: .9rem;
line-height: 1.5;
a {
color: oklch(0.4 0.1 145);
font-weight: 600;
text-decoration: underline;
&:hover { color: oklch(0.3 0.12 145) }
}
}
.required {
color: oklch(0.55 0.2 25)
}
}
}
}
/* Signatures list */
.petition-signatures {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid oklch(0.85 0 0);
h2 { margin-top: 0 }
.signature-order {
color: oklch(0.55 0 0);
font-size: .875rem;
margin-top: .5rem
}
ul {
list-style: none;
padding: 0;
margin-top: 1rem;
li {
display: flex;
flex-wrap: wrap;
gap: .25rem 1rem;
padding: .5rem .6rem;
border-bottom: 1px solid oklch(0.9 0.01 173.93);
&:nth-child(odd) { background-color: white }
&:nth-child(even) { background-color: oklch(0.96 0.005 173.93) }
&:last-child { border-bottom: none }
}
}
.signature-name {
font-weight: 500;
flex: 1 1 12rem
}
.signature-date {
color: oklch(0.55 0 0);
font-size: .875rem
}
}
/* Warning box (thank you page) */
.warning-box {
background-color: oklch(0.93 0.07 85);
border: 1px solid oklch(0.85 0.15 85);
border-radius: .25rem;
padding: 1rem 1.5rem;
margin-top: 1.5rem;
h2 {
color: oklch(0.5 0.1 85);
margin-top: 0;
font-size: 1.25rem
}
}