Skip to content

Commit

Permalink
Adding more design system CSS and media queries
Browse files Browse the repository at this point in the history
  • Loading branch information
@georgewrmarshall
georgewrmarshall committed Feb 6, 2023
1 parent a133e54 commit ad6abc5
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 35 deletions.
128 changes: 94 additions & 34 deletions static/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,80 +25,140 @@
box-sizing: border-box;
}

html {
height: 100%;
}

body {
background-color: var(--color-error-alternative);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
justify-content: center;
font-family: var(--typography-s-body-md-font-family);
font-weight: var(--typography-s-body-md-font-weight);
font-size: var(--typography-s-body-md-font-size);
line-height: var(--typography-s-body-md-line-height);
letter-spacing: var(--typography-s-body-md-letter-spacing);
color: var(--color-error-inverse);
}

background-color: var(--color-error-alternative);
font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
@media screen and (min-width: 768px) {
body {
font-family: var(--typography-l-body-md-font-family);
font-weight: var(--typography-l-body-md-font-weight);
font-size: var(--typography-l-body-md-font-size);
line-height: var(--typography-l-body-md-line-height);
letter-spacing: var(--typography-l-body-md-letter-spacing);
}
}

.heading-lg {
font-family: var(--typography-s-heading-lg-font-family);
font-weight: var(--typography-s-heading-lg-font-weight);
font-size: var(--typography-s-heading-lg-font-size);
line-height: var(--typography-s-heading-lg-line-height);
letter-spacing: var(--typography-s-heading-lg-letter-spacing);
}

p a {
@media screen and (min-width: 768px) {
.heading-lg {
font-family: var(--typography-l-heading-lg-font-family);
font-weight: var(--typography-l-heading-lg-font-weight);
font-size: var(--typography-l-heading-lg-font-size);
line-height: var(--typography-l-heading-lg-line-height);
letter-spacing: var(--typography-l-heading-lg-letter-spacing);
}
}

a {
text-decoration: underline;
color: var(--color-error-inverse);
cursor: pointer;
}

ul {
padding-left: 2em;
padding-left: 32px;
}

button {
color: var(--color-error-alternative);
background: var(--color-error-inverse);
border: 1px solid var(--color-error-alternative);
padding: 1em;
border-radius: 2em;
float: right;
margin-top: 3em;
.button-secondary {
color: var(--color-primary-default);
background: var(--color-background-default);
border: 1px solid var(--color-primary-default);
padding-right: 16px;
padding-left: 16px;
border-radius: 9999px;
height: 48px;
display: flex;
align-items: center;
margin-top: 48px;
font-family: var(--typography-s-body-md-font-family);
font-weight: var(--typography-s-body-md-font-weight);
font-size: var(--typography-s-body-md-font-size);
line-height: var(--typography-s-body-md-line-height);
letter-spacing: var(--typography-s-body-md-letter-spacing);
cursor: pointer;
margin-left: auto;
}

.button:hover{
color: var(--color-error-inverse);
background-color: var(--color-error-alternative);
box-shadow: var(--color-error-alternative);
@media screen and (min-width: 768px) {
.button-secondary {
font-family: var(--typography-l-body-md-font-family);
font-weight: var(--typography-l-body-md-font-weight);
font-size: var(--typography-l-body-md-font-size);
line-height: var(--typography-l-body-md-line-height);
letter-spacing: var(--typography-l-body-md-letter-spacing);
}
}

.button-secondary:hover {
color: var(--color-primary-inverse);
background-color: var(--color-primary-default);
box-shadow: var(--component-button-primary-shadow);
}

.button-secondary:active {
color: var(--color-primary-inverse);
background-color: var(--color-primary-alternative);
border-color: var(--color-primary-alternative);
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
padding: 5rem;
max-width: 700px;
padding: 24px;
}

.content__header {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 1rem;
margin-bottom: 16px;
}

.content__header h1 {
font-size: 2rem;
font-weight: bold;
color: var(--color-error-inverse);
float: left;
font-family: var(--typography-s-heading-lg-font-family);
font-weight: var(--typography-s-heading-lg-font-weight);
font-size: var(--typography-s-heading-lg-font-size);
line-height: var(--typography-s-heading-lg-line-height);
letter-spacing: var(--typography-s-heading-lg-letter-spacing);
}

.content__header svg {
fill: var(--color-error-inverse);
width: 4em;
height: 4em;
margin-bottom: 2em;
@media screen and (min-width: 768px) {
.content__header h1 {
font-family: var(--typography-l-heading-lg-font-family);
font-weight: var(--typography-l-heading-lg-font-weight);
font-size: var(--typography-l-heading-lg-font-size);
line-height: var(--typography-l-heading-lg-line-height);
letter-spacing: var(--typography-l-heading-lg-letter-spacing);
}
}

.content__body {
font-size: 1rem;
color: var(--color-error-inverse);
.content__header svg {
fill: var(--color-error-inverse);
width: 64px;
height: 64px;
margin-bottom: 24px;
}
2 changes: 1 addition & 1 deletion static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ <h1>
</br>
<p>If we're flagging a legitimate website, please <a id="new-issue-link" href='' onclick="window.open('https://github.com/metamask/eth-phishing-detect/issues/new')">report a detection problem.</a></p>
<p>If you understand the risks and still want to proceed, you can <a id="unsafe-continue">continue to the site.</a></p>
<button class="button btn--rounded btn-primary" type="submit" onclick="window.close()">Back to safety</button>
<button class="button-secondary" type="submit" onclick="window.close()">Back to safety</button>
</div>
</div>
</body>
Expand Down

0 comments on commit ad6abc5

Please sign in to comment.