Skip to content

Commit c103ee9

Browse files
borsbors
committed
Auto merge of #2283 - Turbo87:application, r=locks
Convert application-wide CSS to CSS modules This PR converts a few of the elements in `application.hbs` and `index.html` to use CSS modules
2 parents 88ab36a + 87a371b commit c103ee9

File tree

5 files changed

+87
-93
lines changed

5 files changed

+87
-93
lines changed

‎app/index.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,9 @@
2424
</head>
2525
<body>
2626
<noscript>
27-
<div id='noscript'>
28-
For full functionality of this site it is necessary to enable JavaScript.
29-
</div>
27+
For full functionality of this site it is necessary to enable JavaScript.
3028
</noscript>
31-
29+
3230
{{content-for 'body'}}
3331

3432
<script src="{{rootURL}}assets/vendor.js"></script>

‎app/styles/app.scss

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -22,40 +22,6 @@ $link-color: rgb(0, 172, 91);
2222

2323
@import "modules";
2424

25-
* {
26-
box-sizing: border-box;
27-
}
28-
29-
html {
30-
background: url('/assets/noise.png');
31-
background-color: $html-bg;
32-
}
33-
34-
html, body { margin: 0; }
35-
36-
body {
37-
// Use the modern font stack inspired by Bootstrap 4
38-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
39-
font-size: 16px;
40-
display: flex;
41-
flex-direction: column;
42-
align-items: center;
43-
}
44-
45-
/* .ember-application is added by Ember after initial rendering */
46-
.ember-application > div,
47-
body > div {
48-
width: 960px;
49-
@media only screen and (max-width: 960px) {
50-
width: 100%;
51-
}
52-
}
53-
54-
#noscript {
55-
color: white;
56-
padding: 10px 0;
57-
}
58-
5925
form.search label {
6026
position: absolute;
6127
left: -10000px;

‎app/styles/application.module.scss

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
html {
6+
background: url('/assets/noise.png');
7+
background-color: $html-bg;
8+
}
9+
10+
html, body {
11+
margin: 0;
12+
}
13+
14+
body {
15+
// Use the modern font stack inspired by Bootstrap 4
16+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
17+
font-size: 16px;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
}
22+
23+
noscript {
24+
color: white;
25+
padding: 10px 0;
26+
}
27+
28+
.application {
29+
max-width: 960px;
30+
}
31+
32+
.main {
33+
display: flex;
34+
flex-direction: column;
35+
36+
margin-bottom: 10px;
37+
background-color: $main-bg;
38+
padding: 15px;
39+
border-radius: 10px;
40+
box-shadow: 0px 0px 5px 2px #3b6837;
41+
border: 5px solid #62865f;
42+
color: $main-color;
43+
}
44+
45+
.after-main-links {
46+
margin: 40px;
47+
48+
a { color: white; }
49+
a:hover { color: darken(white, 10%); }
50+
.sep { margin: 0 10px; color: darken($html-bg, 10%); }
51+
52+
@media only screen and (max-width: 450px) {
53+
margin: 20px;
54+
.sep { display: none; }
55+
display: flex;
56+
flex-direction: column;
57+
58+
a {
59+
width: 50%;
60+
font-size: 110%;
61+
padding: 5px;
62+
&:not(:first-child) { border-top: 1px solid darken($html-bg, 10%); }
63+
}
64+
}
65+
}
66+
67+
.fork-me {
68+
position: absolute;
69+
top: 0;
70+
right: 0;
71+
72+
@media only screen and (max-width: 1180px) {
73+
display: none;
74+
}
75+
}

‎app/styles/application.scss

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
#main {
2-
display: flex;
3-
flex-direction: column;
4-
5-
margin-bottom: 10px;
6-
background-color: $main-bg;
7-
padding: 15px;
8-
border-radius: 10px;
9-
box-shadow: 0px 0px 5px 2px #3b6837;
10-
border: 5px solid #62865f;
11-
color: $main-color;
12-
}
13-
141
#header {
152
color: white;
163
position: relative;
@@ -110,35 +97,3 @@
11097
display: block;
11198
}
11299
}
113-
114-
.after-main-links {
115-
margin: 40px;
116-
117-
a { color: white; }
118-
a:hover { color: darken(white, 10%); }
119-
.sep { margin: 0 10px; color: darken($html-bg, 10%); }
120-
121-
@media only screen and (max-width: 450px) {
122-
margin: 20px;
123-
.sep { display: none; }
124-
display: flex;
125-
flex-direction: column;
126-
127-
a {
128-
width: 50%;
129-
font-size: 110%;
130-
padding: 5px;
131-
&:not(:first-child) { border-top: 1px solid darken($html-bg, 10%); }
132-
}
133-
}
134-
}
135-
136-
.fork-me {
137-
position: absolute;
138-
top: 0;
139-
right: 0;
140-
141-
@media only screen and (max-width: 1180px) {
142-
display: none;
143-
}
144-
}

‎app/templates/application.hbs

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
{{title "crates.io: Rust Package Registry" separator=' - ' prepend=true}}
44
<GoogleJsapi />
55

6-
<div>
6+
<div local-class="application">
77
<nav id="header">
88
<LinkTo @route="index" @tabindex="-1">
99
<img src="/assets/Cargo-Logo-Small.png" id="logo"
@@ -126,29 +126,29 @@
126126
<label for="cargo-mobile-search">Search</label>
127127
</form>
128128

129-
<main id="main" class='inner-content'>
129+
<main local-class="main">
130130
<FlashMessage @message={{this.flashMessages.message}} />
131131

132132
{{outlet}}
133133
</main>
134134

135-
<footer class='after-main-links'>
135+
<footer local-class='after-main-links'>
136136
<a href='https://doc.rust-lang.org/cargo/getting-started/installation.html'>Install</a>
137-
<span class="sep">|</span>
137+
<span local-class="sep">|</span>
138138
<a href='https://doc.rust-lang.org/cargo/'>Getting Started</a>
139-
<span class="sep">|</span>
139+
<span local-class="sep">|</span>
140140
<a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a>
141-
<span class="sep">|</span>
141+
<span local-class="sep">|</span>
142142
<a href='mailto:[email protected]'>Send us an email</a>
143-
<span class="sep">|</span>
143+
<span local-class="sep">|</span>
144144
<a href='https://www.rust-lang.org/policies/security'>Report a security issue</a>
145-
<span class="sep">|</span>
145+
<span local-class="sep">|</span>
146146
<a href='https://www.rust-lang.org/policies/privacy'>Privacy notice</a>
147-
<span class="sep">|</span>
147+
<span local-class="sep">|</span>
148148
<LinkTo @route="policies">Policies</LinkTo>
149149
</footer>
150150

151-
<a href='https://github.com/rust-lang/crates.io' class='fork-me'>
151+
<a href='https://github.com/rust-lang/crates.io' local-class='fork-me'>
152152
<img src='/assets/forkme.png' alt="Fork me on GitHub">
153153
</a>
154154
</div>

0 commit comments

Comments
 (0)