Skip to content

Commit

Permalink
added some media queries with colours to experiment with resonsivenes…
Browse files Browse the repository at this point in the history
…s - work in progress. Currently rendering link on homepage
  • Loading branch information
sarahcrack committed Dec 20, 2024
1 parent dcb5ed8 commit 34526db
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 4 deletions.
1 change: 1 addition & 0 deletions app/components/home/mailing_list_component.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
Your details are protected under the terms of our <%= link_to("privacy notice (opens in new tab)", privacy_policy_path(id: privacy_policy.id), { class: "link--black", target: :blank }) %>. This explains how we use your personal data. It's important you read it before signing up to receive emails.
</small>
</p>
<%= render 'content/shared/links_and_buttons/cta_circle_button_link', cta_link_text: "Steps to become a teacher", href: "/steps-to-become-a-teacher" %>
</div>
<%= form_with builder: GOVUKDesignSystemFormBuilder::FormBuilder, url: mailing_list_step_path(:name), scope: :mailing_list_steps_name, method: :put do |f| %>
<%= f.govuk_text_field :first_name, autocomplete: "given-name" %>
Expand Down
19 changes: 17 additions & 2 deletions app/webpacker/styles/links-and-buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -259,9 +259,24 @@ body a.govuk-back-link {
@include mq($until: narrow) {
width: 28px;
height: 28px;
@include arrow ($length: .9em);
background-color: pink;
@include arrow ($dimensions: .5em, $length: .9em);
}
}

@include mq($from: narrow, $until: mobile) {
background-color: blue;
width: 30px;
height: 30px;
@include arrow ($dimensions: .55em, $length: 1em);
}

@include mq ($from: mobile, $until: tablet) {
background-color: black;
width: 32px;
height: 32px;
@include arrow ($dimensions: .6em, $length: 1em);
}
}

.cta-link-text {
@extend .link;
Expand Down
4 changes: 2 additions & 2 deletions app/webpacker/styles/utility.scss
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,12 @@ $chevron-direction-map: (
&::before {
@include horizontal-line($color: $color, $length: $length, $thickness: $thickness);
// position: absolute;
left: 0.35em;
left: 20%;
}

&::after {
@include chevron-icon($color: $color, $dimensions: $dimensions, $rotate: $degrees);
right: 0.4em;
right: 20%;
}
}

Expand Down

0 comments on commit 34526db

Please sign in to comment.