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 9b64b9a commit 8efec01
Show file tree
Hide file tree
Showing 23 changed files with 110 additions and 417 deletions.
8 changes: 4 additions & 4 deletions _includes/partials/progressBar.liquid
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<div id="progress-container">
<div id="progress-bar-markings">
<div class="progress-bar-markings-container">
<span>10 000 kr</span>
<span>10 000kr</span>
<div class="vl"></div>
</div>
<div class="progress-bar-markings-container">
<span>20 000 kr</span>
<span>20 000kr</span>
<div class="vl"></div>
</div>
<div class="progress-bar-markings-container">
<span>30 000 kr</span>
<span>30 000kr</span>
<div class="vl"></div>
</div>
<div class="progress-bar-markings-container">
<span>40 000 kr</span>
<span>40 000kr</span>
<div class="vl"></div>
</div>
<div class="progress-bar-markings-container">
Expand Down
10 changes: 5 additions & 5 deletions _pages/förköp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,23 +55,23 @@ <h2>Förköpsformulär</h2>
<h1>Förmåner</h1>
<li>
<h3>1 - 350 kr</h3>
<p> Du hjälper oss att göra skivan till verklighet! </p>
<p class="small"> Du hjälper oss att göra skivan till verklighet! </p>
</li>
<li>
<h3>350 - 500 kr</h3>
<p> Du får ett exemplar av vår nya LP-skiva! </p>
<p class="small"> Du får ett exemplar av vår nya LP-skiva! </p>
</li>
<li>
<h3>500 - 1000 kr</h3>
<p> Du får vår nya LP-skiva signerad av hela blåset! </p>
<p class="small"> Du får vår nya LP-skiva signerad av hela blåset! </p>
</li>
<li>
<h3>1000 - 5000 kr</h3>
<p> Du får vår nya LP-skiva, sniglad av baletten! </p>
<p class="small"> Du får vår nya LP-skiva, sniglad av baletten! </p>
</li>
<li>
<h3>Över 5000 kr</h3>
<p> Du får vår nya LP-skiva, med orkestern nakna på omslaget! </p>
<p class="small"> Du får vår nya LP-skiva, med orkestern nakna på omslaget! </p>
</li>
</ul>
</section>
Expand Down
2 changes: 1 addition & 1 deletion _pages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <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>
Expand Down
8 changes: 7 additions & 1 deletion _site/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@
}
}

@media(max-width: 560px) {
.banner {
height: 53.6vw;
}
}

.banner img {
position: relative;
object-fit: cover;
Expand All @@ -31,7 +37,7 @@
.text-box {
margin: 0 auto;
padding: 30px 40px;
height(50% - 100px);
max-width: 800px;
}

@media(max-width: 1000px) {
Expand Down
28 changes: 13 additions & 15 deletions _site/css/progressBar.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

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

height: 5vh;
height: 4vh;

margin: 0;
z-index: -1;
Expand All @@ -35,20 +35,21 @@
}

#progress-bar-markings span {
font-family: Canterbury;
display: block;
font-size: 1.7vh;
font-weight: bold;
margin: 0 0 0 calc((45vh - 11vh) / 5 - 1vh);
margin: 0 0 0 calc((45vh - 11vh) / 5 - 2vh);
white-space: nowrap;
padding: 0;
color: var(--off-yellow);
}

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

Expand All @@ -69,9 +70,8 @@

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

#progress-bar {
Expand All @@ -84,8 +84,8 @@
}

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

#progress-bar-markings .vl {
Expand All @@ -98,15 +98,13 @@
}
}

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

#progress-bar {
height: 40px;
height: 8vw;
}

#progress-bar-markings {
Expand All @@ -115,12 +113,12 @@
}

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

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

Expand Down
Empty file removed _site/css/progressBar/index.html
View file
Empty file.
59 changes: 22 additions & 37 deletions _site/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ body {

.horizontal-flex {
padding: 60px 0 0 0;
width: calc(100vw - 45vh - 11vh);
width: calc(100vw - 40vh - 11vh);
display: flex;
flex-direction: row;
height: calc(100vh - 60px);
Expand All @@ -88,6 +88,7 @@ body {
.vertical-flex {
display: flex;
flex-direction: column;
width: 100%;
}

.aside {
Expand All @@ -98,22 +99,24 @@ body {
padding: 4vh 5.5vh;
background: var(--blue);
color: var(--off-yellow);
width: 45vh;
width: 40vh;
height: calc(100vh - 60px - 8vh);
}

.aside h1 {
font-size: 3.25vh;
margin: 0 0 1vh 0;
text-align: left;
font-size: 6vh;
margin: 0;
font-family: Canterbury;
}

.aside h3 {
font-size: 2.2vh;
margin: 0;
text-align: left;
padding: 0 0 1.8vh 0;
font-size: 3vh;
margin: 0 auto;
width: 80%;
padding: 0 0 2vh 0;
box-shadow: 0 -3px 0 0 var(--off-yellow) inset;
font-weight: bolder;
font-family: Canterbury;
}

.aside p {
Expand All @@ -122,6 +125,10 @@ body {
font-weight: bold;
}

.aside .small {
font-size: 1.7vh;
}

.aside ul {
padding: 0 0 0 0;
margin: 0;
Expand All @@ -130,11 +137,7 @@ body {
flex-direction: column;
justify-content: space-between;
flex-grow: 4; /* default 0 */
}

.aside li {
list-style: none;
break-inside: avoid-column;
text-align: center;
}

@media(max-width: 1000px) {
Expand All @@ -145,16 +148,16 @@ body {
color: var(--off-yellow);
width: auto;
min-width: calc(100% - 60px);
height: 700px;
height: 850px;
}

.aside h1 {
font-size: 25px;
margin: 0 0 10px 0;
font-size: 55px;
}

.aside h3 {
font-size: 16px;
font-size: 26px;
width: 200px;
padding: 0 0 20px 0;
}

Expand All @@ -173,38 +176,20 @@ body {
h1 {
font-size: 2.2em;
margin: 20px 0 20px 0;
text-align: left;
}

h2 {
font-size: 1.6em;
margin: 20px 0 20px 0;
text-align: left;
}

h3 {
font-size: 1.4em;
margin: 10px 0 30px 0;
text-align: left;
}

@media(max-width: 550px) {
h3 {
font-size: 4.08vw;
margin: 1.85vw 0 5.45vw 0;
}
}

p {
font-size: 1em;
font-size: 1.1em;
line-height: 1.5;
margin: 1em 0;
}

@media(max-width: 550px) {
p {
font-size: 2.9vw;
line-height: 1.5;
margin: 2.9vw 0;
}
}
62 changes: 0 additions & 62 deletions _site/delmål.html
View file

This file was deleted.

Loading

0 comments on commit 8efec01

Please sign in to comment.