Skip to content

Commit

Permalink
fixed styling issues
Browse files Browse the repository at this point in the history
  • Loading branch information
vickytnz committed Sep 4, 2024
1 parent 1efea31 commit 71b87a1
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 179 deletions.
5 changes: 5 additions & 0 deletions app/_layouts/example-partial.njk
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,10 @@
{% endblock %}

{% block bodyEnd %}
{{super()}}


<script src="/assets/iframeResizer.contentWindow.js"></script>
<link rel="stylesheet" href="/sass/application.css">

{% endblock %}
2 changes: 1 addition & 1 deletion app/examples/link-focus/mistake-2.njk
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
layout: example-partial.njk
title: Examples of incorrect link focus
eleventyExcludeFromCollections: true
htmlClasses: old-frontend
---

{% set htmlClasses = "old-frontend" %}
<p class="govuk-body"><a class="govuk-link" href="#">Link</a></p>
93 changes: 41 additions & 52 deletions app/examples/work-accordions/mistake.njk
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ layout: example-partial.njk
title: Examples of complex information
eleventyExcludeFromCollections: true
---

{% from "govuk/components/accordion/macro.njk" import govukAccordion %}


<span class="govuk-caption-xl">
Original version
</span>
Expand All @@ -17,57 +21,42 @@ eleventyExcludeFromCollections: true




<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-1">
Writing well for the web
</span>
</h2>
</div>
<div id="accordion-default-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">This is the content for Writing well for the web.</p>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-2">
Writing well for specialists
</span>
</h2>
</div>
<div id="accordion-default-content-2" class="govuk-accordion__section-content">
<p class="govuk-body">This is the content for Writing well for specialists.</p>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-3">
Know your audience
</span>
</h2>
</div>
<div id="accordion-default-content-3" class="govuk-accordion__section-content">
<p class="govuk-body">This is the content for Know your audience.</p>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-4">
How people read
</span>
</h2>
</div>
<div id="accordion-default-content-4" class="govuk-accordion__section-content">
<p class="govuk-body">This is the content for How people read.</p>
</div>
</div>
</div>

{{ govukAccordion({
id: "accordion-default",
items: [
{
heading: {
text: "Writing well for the web"
},
content: {
html: '<p class="govuk-body">This is the content for Writing well for the web.</p>'
}
},
{
heading: {
text: "Writing well for specialists"
},
content: {
html: '<p class="govuk-body">This is the content for Writing well for specialists.</p>'
}
},
{
heading: {
text: "Know your audience"
},
content: {
html: '<p class="govuk-body">This is the content for Know your audience.</p>'
}
},
{
heading: {
text: "How people read"
},
content: {
html: '<p class="govuk-body">This is the content for How people read.</p>'
}
}
]
}) }}

</form>
9 changes: 9 additions & 0 deletions app/sass/_settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -377,3 +377,12 @@ padding-top: 11px !important;
margin: 0;
}
}


// overwriting mistakes

.old-frontend .govuk-skip-link:focus {
outline: 3px solid #ffbf48;
outline-offset: 0;
background-color: #ffbf48;
}
130 changes: 4 additions & 126 deletions app/sass/application.scss
Original file line number Diff line number Diff line change
@@ -1,127 +1,5 @@

code[class*="language-"],
pre[class*="language-"], code[class*="language-"] span,
pre[class*="language-"] span {
color: #000000;
background: none;
/* text-shadow: 0 1px rgba(0, 0, 0, 0.3); */
font-family: system-ui, sans-serif !important;
-webkit-font-smoothing: antialiased;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;

-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
.old-frontend .govuk-skip-link:focus {
outline: 3px solid #ffbf48;
outline-offset: 0;
background-color: #ffbf48;
}

/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}

.token.punctuation {
color: #000000;
}

.token.namespace {
opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #f92672;
}

.token.boolean,
.token.number {
color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #000000;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #e6db74;
}

.token.keyword {
color: #66d9ef;
}

.token.regex,
.token.important {
color: #fd971f;
}

.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}

.token.entity {
cursor: help;
}

// extra to make page look right
/*
code[class*="language-"], pre[class*="language-"] {
white-space: normal !important;
}
*/

0 comments on commit 71b87a1

Please sign in to comment.