Skip to content

Commit

Permalink
Improve responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@rottabonus
rottabonus committed Nov 24, 2024
1 parent 73015d4 commit 5f67e69
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 35 deletions.
30 changes: 18 additions & 12 deletions src/landing/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,18 @@
<img src="../static/img/ylitse-middle-illustration.svg" class="middle-illustration" />
</div>
<div class="middle-right-content">
<h2 localization-key="middleInfo1Heading"></h2>
<p class="card-p white" localization-key="middleInfo1Text"></p>
<h2 localization-key="middleInfo2Heading"></h2>
<p class="card-p white" localization-key="middleInfo2Text"></p>
<h2 localization-key="middleInfo3Heading"></h2>
<p class="card-p white" localization-key="middleInfo3Text"></p>
<div>
<h2 localization-key="middleInfo1Heading"></h2>
<p class="card-p white" localization-key="middleInfo1Text"></p>
</div>
<div>
<h2 localization-key="middleInfo2Heading"></h2>
<p class="card-p white" localization-key="middleInfo2Text"></p>
</div>
<div>
<h2 localization-key="middleInfo3Heading"></h2>
<p class="card-p white" localization-key="middleInfo3Text"></p>
</div>
</div>
</div>
<div class="middle-bottom-footer">
Expand All @@ -68,11 +74,11 @@ <h2 class="card-h2">Aalto</h2>
</div>
<div class="mentor-card-content">
<div class="mentor-card-story-container">
<h2 class="black" localization-key="mentorCardMyStory"></h2>
<h2 class="card-h2 black" localization-key="mentorCardMyStory"></h2>
<p class="card-p">Olen nuorisokodista itsenäistynyt teini-ikäisen pojan vanhempi. Voin olla sinulle tukena opintoihin, itsenäistymiseen, jälkihuoltoon ja vanhemmuuteen liittyvissä asioissa.</p>
</div>
<div class="mentor-card-languages-container">
<h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
<h2 class="card-h2 black" localization-key="mentorCardSpokenLanguages"></h2>
<div class="pill-container">
<div class="pill">
<p class="card-p">Suomi</p>
Expand All @@ -83,7 +89,7 @@ <h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
</div>
</div>
<div class="mentor-card-skill-container">
<h2 class="black" localization-key="mentorCardSkills"></h2>
<h2 class="card-h2 black" localization-key="mentorCardSkills"></h2>
<div class="pill-container">
<div class="pill">
<p class="card-p">Lastensuojelu</p>
Expand Down Expand Up @@ -123,11 +129,11 @@ <h2 class="card-h2">Havu</h2>
</div>
<div class="mentor-card-content">
<div class="mentor-card-story-container">
<h2 class="black" localization-key="mentorCardMyStory"></h2>
<h2 class="card-h2 black" localization-key="mentorCardMyStory"></h2>
<p class="card-p">Olen helsinkiläinen Havu. Voin olla sinulle tukena esimerkiksi mielenterveyteen liittyvissä pulmissa. Tuen sinua parhaani mukaan kuitenkin missä tahansa aiheessa.</p>
</div>
<div class="mentor-card-languages-container">
<h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
<h2 class="card-h2 black" localization-key="mentorCardSpokenLanguages"></h2>
<div class="pill-container">
<div class="pill">
<p class="card-p">Suomi</p>
Expand All @@ -138,7 +144,7 @@ <h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
</div>
</div>
<div class="mentor-card-skill-container">
<h2 class="black" localization-key="mentorCardSkills"></h2>
<h2 class="card-h2 black" localization-key="mentorCardSkills"></h2>
<div class="pill-container">
<div class="pill">
<p class="card-p">Mielenterveys</p>
Expand Down
61 changes: 38 additions & 23 deletions src/landing/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,6 @@ p {
color: #1c325d;
}

.card-h2 {
margin-top: 0;
}

.white {
color: #ffffff;
}
Expand Down Expand Up @@ -105,27 +101,22 @@ button {
}

.button:hover,
button:hover {
background-color: #37119d;
a:hover {
background-color: #5c33ff;
outline: 0;
}

.button:focus,
button:focus,
a:focus,
.button:active,
button:active,
a:active,
.button:target,
button:target {
a:target {
background-color: #4a2acb;
outline: #4a2acb solid 3px;
outline-offset: 4px;
}

.button:visited,
button:visited {
background-color: #5c33ff;
}

.middle-container {
margin: 5rem;
display: flex;
Expand All @@ -135,7 +126,6 @@ button:visited {
.middle-card {
background-color: #4A2ACB;
display: flex;
height: 40rem;
width: 100%;
border-radius: 1rem 1rem 0 0;
}
Expand All @@ -144,8 +134,8 @@ button:visited {
flex: 1;
position: relative;
display: flex;
justify-content: space-evenly;
padding-top: 2rem;
justify-content: space-between;
padding: 1rem 1rem 0 1rem;
}

.info-ring {
Expand All @@ -168,7 +158,10 @@ button:visited {

.middle-right-content {
flex: 1;
padding: 0 2rem 0 0;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 4rem 2rem 4rem 0;
overflow: auto;
}

Expand Down Expand Up @@ -276,7 +269,6 @@ h2 {
font-size: 26px;
line-height: 42px;
margin: 0;
margin-top: 30px;
color: #ffffff;
}

Expand Down Expand Up @@ -319,19 +311,38 @@ footer {
height: 2.5rem;
}

@media only screen and (min-width: 2300px){
.middle-left-content {
justify-content: space-evenly;
padding-top: 2rem;
}
}

@media only screen and (max-width: 1200px){
.middle-container {
margin: 2rem;
}


}

@media only screen and (max-width: 1000px){
.middle-container {
margin: 1rem;
}

.middle-left-content {
flex: 1;
justify-content: space-evenly;
flex-direction: column;
align-items: center;
}

.middle-illustration {
display: none;
}

.bottom-container {
padding: 2rem 0;
}
}


Expand All @@ -343,7 +354,6 @@ footer {
}

h2 {
margin-top: 16px;
font-size: 24px;
line-height: 28px;
}
Expand All @@ -366,10 +376,11 @@ footer {

.middle-card {
flex-direction: column-reverse;
height: auto;
}

.middle-right-content {
padding: 8px;
padding: 1rem;
}

.middle-left-content {
Expand Down Expand Up @@ -416,4 +427,8 @@ footer {
.ylitse-logo {
height: 8rem;
}

.middle-bottom-footer {
padding: 1rem;
}
}

0 comments on commit 5f67e69

Please sign in to comment.