Skip to content

Commit

Permalink
Sorted image fitting in css. Added inline margin to some pages. Campu…
Browse files Browse the repository at this point in the history
…s changed to pink / yellow.
  • Loading branch information
jenhadfield-dfe committed Apr 19, 2024
1 parent 747157d commit db49740
Show file tree
Hide file tree
Showing 8 changed files with 41 additions and 26 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="row">
<div class="row" style="margin-top:60px">
<div class="inset">
<section class="col col-720 centered">

Expand Down
4 changes: 2 additions & 2 deletions app/views/content/explore-teaching-advisers/_article.html.erb
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="row inset">
<div class="row inset" style="margin-top:60px">
<section class="col col-720 statement">
<div style="margin-top:60px">
<div>
<span class="pink xlarge bold">Teaching is&hellip;</span>
</div>

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="row inset">
<div class="row inset" style="margin-top:60px">
<section class="col col-720">
<p>As a secondary computing teacher you'll help pupils become responsible and confident users of information and technology in an increasingly digital world.</p>
<p>Whether it's teaching your pupils about artificial intelligence (AI) or creating apps, you could inspire them to look at a future role in tech.</p>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="row inset">
<div class="row inset" style="margin-top:60px">
<section class="col col-720 col-space-m statement">
<div>
<span class="pink xlarge bold">Physics initial teacher training courses for</span>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="row inset">
<div class="row inset" style="margin-top:60px">
<section class="col col-720">
<p>
If maths is your passion, you'll know that it's not just learning formulas or solving equations. It's a way of thinking and problem solving that’s important in every walk of life.
Expand Down
2 changes: 1 addition & 1 deletion app/views/content/landing/campus-advisers/_header.html.erb
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<%= render Content::LandingHeroComponent.new(
title: "Sign up for an adviser",
colour: "pink-blue",
colour: "pink-yellow",
image: @front_matter["image"],
) %>
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<%= render Content::LandingHeroComponent.new(
title: "Sign up for emails",
colour: "pink-blue",
colour: "pink-yellow",
background_colour: "test",
image: @front_matter["image"],
) %>
51 changes: 33 additions & 18 deletions app/webpacker/styles/sections/hero.scss
Original file line number Diff line number Diff line change
Expand Up @@ -281,8 +281,6 @@ $mobile-cutoff: 800px;
.landing-hero {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
margin: auto;
width: 100%;
max-width: 2000px;
Expand All @@ -307,30 +305,42 @@ $mobile-cutoff: 800px;
}
}

&.blue-pink {
background-color: $blue;

&.pink-green {
background-color: $pink;
h1 span {
background: $pink;
background: $green;
}

&.pastel {
background-color: rgba($blue, 0.4);
background-color: rgba($pink, 0.4);
}
}

&.pink-green {
&.pink-yellow {
background-color: $pink;

h1 span {
background: $green;
background: $yellow;
}

&.pastel {
background-color: rgba($pink, 0.4);
}
}

&.blue-pink {
background-color: $blue;

h1 span {
background: $pink;
}

&.pastel {
background-color: rgba($blue, 0.4);
}
}

&.green-pink {
background-color: $green;

Expand Down Expand Up @@ -380,6 +390,7 @@ $mobile-cutoff: 800px;
}

.content {
align-self:center;
padding: 90px;
z-index: 1;

Expand Down Expand Up @@ -413,14 +424,18 @@ $mobile-cutoff: 800px;
}
}

picture img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 100% 30%;
object-position: 100% 30%;
width: 100%;
height: 100%;
vertical-align: bottom;
picture {
align-self:stretch;

img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 100% 30%;
object-position: 100% 30%;
width: 100%;
height: 100%;
vertical-align: bottom;
}
}

& > * {
Expand Down

0 comments on commit db49740

Please sign in to comment.