Skip to content

Commit

Permalink
update css
Browse files Browse the repository at this point in the history
  • Loading branch information
@linn-jagestedt
linn-jagestedt committed Dec 12, 2024
1 parent abb7a38 commit 3fd0acf
Show file tree
Hide file tree
Showing 14 changed files with 388 additions and 210 deletions.
49 changes: 32 additions & 17 deletions _pages/förköp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,40 @@

<div id="container" class="horizontal-flex">
<section id="formulär">
<h2>Förköpsformulär</h2>
<form id="form">
<label for="förnamn">Förnamn:</label>
<input type="text" id="förnamn" required>
<label for="efternamn">Efternamn:</label>
<input type="text" id="efternamn" required>
<label for="epost">Epost:</label>
<h2>Förköpsformulär</h2>

<div>
<label for="förnamn">Förnamn:</label>
<input type="text" id="förnamn" required>
</div>
<div>
<label for="efternamn">Efternamn:</label>
<input type="text" id="efternamn" required>
</div>
<div>
<label for="epost">Epost:</label>
<input type="text" id="epost" required>
<label for="adress">Adress:</label>
</div>
<div>
<label for="adress">Adress:</label>
<input type="text" id="adress" required>
<label for="adress">Postnummer:</label>
<input type="text" id="postnummer" required>
<label for="telefon">Telefonnummer:</label>
<input type="text" id="telefon" required>
<legend>Vill du ha en skiva? (Du måste donera minst 350kr för att få en skiva)</legend>
<input type="radio" id="yes" name="skiva" value="Ja" required>
<label class="inline-label" for="yes">Ja</label>
<input type="radio" id="no" name="skiva" value="Nej" required>
<label class="inline-label" for="no">Nej</label>
</div>
<div>
<label for="adress">Postnummer:</label>
<input type="text" id="postnummer" required>
</div>
<div>
<label for="telefon">Telefonnummer:</label>
<input type="text" id="telefon" required>
</div>
<div>
<legend>Vill du ha en skiva? (Vid donation av minst 350kr)</legend>
<input type="radio" id="yes" name="skiva" value="Ja" required>
<label class="inline-label" for="yes">Ja</label>
<input type="radio" id="no" name="skiva" value="Nej" required>
<label class="inline-label" for="no">Nej</label>
</div>
<br>
<input id="submit-form" type="submit" disabled="disabled" value="Skicka">
</form>
Expand All @@ -36,8 +51,8 @@ <h2>Förköpsformulär</h2>

{% include "partials/progressBar.liquid" %}

<h1>Förmåner</h1>
<ul>
<h1>Förmåner</h1>
<li>
<h3>1 - 350 kr</h3>
<p> Du hjälper oss att göra skivan till verklighet! </p>
Expand Down
8 changes: 5 additions & 3 deletions _pages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,22 @@ <h3>Hjälp LiTHe Blås producera sin nästa skiva!</h3>
<p>
Vi i skivgruppen har äran att få berätta att vi under våren 2025 ska spela in en ny skiva, men för att göra detta projekt från en dröm till en verklighet behöver vi din hjälp.
</p>
<p>
<p>
Därför erbjuder vi möjligheten att förbeställa skivan samt donera en valfri summa för att se till att detta projekt blir så bra som möjligt!
</p>
<p>
Har ni några frågor eller idéer kan ni kontakta oss på vår mail: [email protected]
</p>
</div>
</section>
<section class="vertical-flex aside">
<section class="aside">

{% include "partials/progressBar.liquid" %}

<h1>Donationsmål</h1>
<ul>
<li>
<h1>Donationsmål</h1>
</li>
<li>
<h3>
10 000 kr
Expand Down
17 changes: 9 additions & 8 deletions _site/css/förköp.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,14 @@
overflow-y: hidden;
}

@media(max-width: 900px) {
@media(max-width: 1000px) {
#formulär {
width: calc(100% - 80px);
max-width: 500px;
margin: 0 auto;
}
}

#formulär h2
{
margin: 0;
}

#swish-QR {
margin: auto;
padding: 20px;
Expand All @@ -45,17 +42,21 @@
form {
transition: opacity 1s;
max-width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
}

form label {
margin: 30px 0 0 5px;
margin: 0 0 0 5px;
font-size: 16px;
font-weight: bold;
display: block;
}

form label, form legend {
margin: 25px 0 10px 5px;
margin: 0 0 10px 5px;
font-size: 16px;
font-weight: bold;
display: block;
Expand Down
10 changes: 5 additions & 5 deletions _site/css/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ header #logo {
margin: 0 20px 0 80px;
}

@media (max-width: 900px) {
@media (max-width: 650px) {
header #logo {
margin: 0 20px
}
Expand All @@ -43,7 +43,7 @@ header ul {
flex-direction: row-reverse;
}

@media (max-width: 600px) {
@media (max-width: 650px) {
header ul {
background: var(--off-yellow);
width: 100%;
Expand All @@ -64,7 +64,7 @@ header li {
min-height: 100%;
}

@media (max-width: 600px) {
@media (max-width: 650px) {
header li {
margin: 20px;
}
Expand All @@ -91,7 +91,7 @@ header navbar a:hover {
box-shadow: 0 -4px 0 0 var(--blue) inset;
}

@media (max-width: 600px) {
@media (max-width: 650px) {
.selected {
box-shadow: none;
}
Expand All @@ -101,7 +101,7 @@ header navbar a:hover {
display: none;
}

@media (max-width: 600px) {
@media (max-width: 650px) {
.navbar-toggle {
display: inline;
width: 30px;
Expand Down
17 changes: 12 additions & 5 deletions _site/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
box-shadow: inset 0 -20px 30px #00000077;
}

@media(max-width: 900px) {
@media(max-width: 1000px) {
.banner {
height: 300px;
}
Expand All @@ -30,13 +30,20 @@

.text-box {
margin: 0 auto;
padding: 40px 40px;
max-width: 1000px;
padding: 30px 40px;
height(50% - 100px);
}

@media(max-width: 900px) {
@media(max-width: 1000px) {
.text-box {
padding: 50px 50px;
max-width: 500px;
padding: 30px;
}
}

@media(max-width: 550px) {
.text-box {
max-width: auto;
padding: 5.45vw;
}
}
90 changes: 65 additions & 25 deletions _site/css/progressBar.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

#progress-container {
margin: 0 0 50px 0;
margin: 1vh 0 6vh 0;
width: 100%;
background: var(--blue);
}
Expand All @@ -11,9 +11,7 @@
background-color: #456d84;
box-shadow: 10px 10px 16px #00000066;

width: calc(100vw - 100px)%;
max-width: 1000px;
height: 45px;
height: 5vh;

margin: 0;
z-index: -1;
Expand All @@ -22,9 +20,9 @@
#progress-bar-markings {
display: flex;
flex-direction: row;
height: 20px;
height: 2.8vh;
width: 100%;
margin: 0 0 10px 0;
margin: 0 0 1.1vh 0;
padding: 0;
z-index: 1;
}
Expand All @@ -38,35 +36,22 @@

#progress-bar-markings span {
display: block;
font-size: 0.9em;
font-size: 1.7vh;
font-weight: bold;
margin: 0 0 6px calc((500px - 80px) / 5 - 32px);
margin: 0 0 0 calc((45vh - 11vh) / 5 - 1vh);
white-space: nowrap;
padding: 0;
color: var(--off-yellow);
}

@media(max-width: 900px) {
#progress-bar-markings span {
font-size: 0.85em;
margin: 0 0 6px calc((100vw - 80px) / 5 - 30px);
}
}

#progress-bar-markings .vl {
display: block;
height: 45px;
height: 5.1vh;
border-right: 2px solid #0009;
margin: 13px 0 0 0;
margin: 1.8vh 0 0 0;
padding: 0;
}

@media(max-width: 900px) {
#progress-bar-markings .vl {
margin: 14px 0 0 0;
}
}

#progress-bar-wrapper {
height: 100%;
width: 100%;
Expand All @@ -79,11 +64,66 @@
height: 100%;
width: calc(100vw - 100px);
border-radius: 40px;
margin: 0 0 40px 0;
background-color: var(--off-yellow);
}

@media(max-width: 900px) {
@media(max-width: 1000px) {
#progress-container {
margin: 10px auto 50px auto;
width: 500px;
background: var(--blue);
}

#progress-bar {
height: 45px;
}

#progress-bar-markings {
height: 25px;
margin: 0 0 11px 0;
}

#progress-bar-markings span {
font-size: 15px;
margin: 0 0 0 calc(500px / 5 - 30px);
}

#progress-bar-markings .vl {
height: 45px;
margin: 17.5px 0 0 0;
}

#progress-fill {
border-radius: 20px;
}
}

@media(max-width: 550px) {
#progress-container {
margin: 10px auto 50px auto;
width: 100%;
background: var(--blue);
}

#progress-bar {
height: 40px;
}

#progress-bar-markings {
height: 5vw;
margin: 0 0 2vw 0;
}

#progress-bar-markings span {
font-size: 3vw;
margin: 0 0 0 calc((100vw - 80px) / 5 - 5vw);
}

#progress-bar-markings .vl {
height: 40px;
margin: 3.5vw 0 0 0;
}

#progress-fill {
border-radius: 20px;
}
Expand Down
Loading

0 comments on commit 3fd0acf

Please sign in to comment.