Skip to content

Commit 3c9bc69

Browse files
kniceknice
committed
fix(ucsc-header)!: Update links to reflect new URLs on ucsc.edu Fixes #18 
1 parent a53e0c5 commit 3c9bc69

File tree

3 files changed

+43
-64
lines changed

3 files changed

+43
-64
lines changed

‎src/components/trss-ucsc-header/trss-ucsc-header.scss

+30-45
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
:host {
22
display: block;
3-
43
}
54

65
.trss-ucsc-header {
7-
86
background: linear-gradient(360deg, #003c6c 10%, #006aad 40%);
97

108
@media screen and (min-width: $max-width) {
@@ -13,49 +11,43 @@
1311
padding: 0 var(--trss-content-padding);
1412

1513
> .trss-row__inner {
16-
background-image: linear-gradient(360deg, #003c6c 10%, #006aad 40%);
17-
max-width: var(--trss-content-width);
18-
margin: 0 auto;
19-
display: flex;
20-
flex-direction: column;
21-
justify-content: center;
22-
align-items: center;
23-
gap: 0em;
24-
padding: 1em 0;
25-
26-
@media screen and (min-width: $max-width) {
27-
background-image: linear-gradient(130deg, #003c6c 4rem, #006aad 18rem);
28-
flex-direction: row;
29-
justify-content: flex-end;
14+
background-image: linear-gradient(360deg, #003c6c 10%, #006aad 40%);
15+
max-width: var(--trss-content-width);
16+
margin: 0 auto;
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: center;
3020
align-items: center;
31-
padding: 0;
32-
gap: var(--font-size-lg);
21+
gap: 0em;
22+
padding: 1em 0;
23+
24+
@media screen and (min-width: $max-width) {
25+
background-image: linear-gradient(130deg, #003c6c 4rem, #006aad 18rem);
26+
flex-direction: row;
27+
justify-content: flex-end;
28+
align-items: center;
29+
padding: 0;
30+
gap: var(--font-size-lg);
3331

34-
&.has-logo {
35-
justify-content: space-between;
32+
&.has-logo {
33+
justify-content: space-between;
34+
}
3635
}
3736
}
3837
}
39-
}
4038

4139
// #trss-ucsc-header__toggle:checked + #trss-ucsc-header__show {
4240
// border: 2px solid red;
4341
// }
4442

45-
46-
4743
.trss-ucsc-header__left {
48-
49-
padding: .5rem 0 .5rem 0;
44+
padding: 0.5rem 0 0.5rem 0;
5045

5146
@media screen and (min-width: $max-width) {
52-
padding: .5rem 3rem .5rem 0;
47+
padding: 0.5rem 3rem 0.5rem 0;
5348
}
54-
5549
}
5650

57-
58-
5951
.trss-ucsc-header__right {
6052
display: flex;
6153
flex-direction: column-reverse;
@@ -75,12 +67,11 @@
7567
display: flex;
7668
flex-direction: row;
7769
flex-wrap: wrap;
78-
font-size: .9rem;
70+
font-size: 0.9rem;
7971
margin: 0;
8072
padding: 0;
8173
gap: 0.8rem;
8274

83-
8475
li {
8576
margin: 0;
8677
padding: 0;
@@ -92,7 +83,7 @@
9283
a {
9384
text-transform: none;
9485
color: var(--ucsc-white);
95-
padding: .25em .5em;
86+
padding: 0.25em 0.5em;
9687
text-decoration: none;
9788

9889
&:focus,
@@ -103,10 +94,7 @@
10394
}
10495
}
10596

106-
107-
10897
@media screen and (min-width: 48em) {
109-
11098
flex-wrap: nowrap;
11199
gap: 1.5em;
112100
margin: 0;
@@ -134,11 +122,11 @@
134122
background-color: var(--ucsc-white);
135123
border-radius: var(--border-radius);
136124
border: 1px solid var(--ucsc-white);
137-
transition: all .1s;
125+
transition: all 0.1s;
138126
width: 100%;
139127
max-width: 20em;
140-
font-size: .9rem;
141-
margin: .5em 0;
128+
font-size: 0.9rem;
129+
margin: 0.5em 0;
142130

143131
&:focus-within {
144132
border: 1px solid var(--ucsc-secondary-blue);
@@ -148,10 +136,10 @@
148136
display: flex;
149137
}
150138

151-
input[type="text"] {
139+
input[type='text'] {
152140
border: none;
153141
border-radius: var(--border-radius);
154-
padding: 0.2em 0.5em;
142+
padding: 0.25em 0.5em;
155143
flex-grow: 1;
156144

157145
&:focus,
@@ -162,12 +150,11 @@
162150
outline: none;
163151
box-shadow: none;
164152
}
165-
166153
}
167154

168-
input[type="submit"] {
155+
input[type='submit'] {
169156
background: url(https://ucsc-webassets.netlify.app/images/looking-glass.svg) no-repeat;
170-
background-size: 18px;
157+
background-size: 16px;
171158
background-position: center center;
172159
border: 0;
173160
left: auto;
@@ -178,7 +165,6 @@
178165
z-index: 100;
179166
}
180167

181-
182168
@media screen and (min-width: 48em) {
183169
margin-left: 1em;
184170
width: auto;
@@ -187,6 +173,5 @@
187173
form > div {
188174
display: block;
189175
}
190-
191176
}
192177
}

‎src/components/trss-ucsc-header/trss-ucsc-header.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ export class TrssUcscHeader {
4242
<div class="trss-ucsc-header__right" id="trss-ucsc-header__show">
4343
<ul class="trss-ucsc-header__navigation">
4444
<li><a href="https://my.ucsc.edu" title="The student portal">MyUCSC</a></li>
45-
<li><a href="https://www.ucsc.edu/tools/people.html" title="Campus directory">People</a></li>
46-
<li><a href="https://www.ucsc.edu/tools/calendars.html" title="Upcoming events, academic, and administrative calendars">Calendars</a></li>
47-
<li><a href="https://www.ucsc.edu/visit/maps-directions.html">Maps</a></li>
48-
<li><a href="https://www.ucsc.edu/tools/azindex.html" title="A to Z index of UCSC websites">A-Z Index</a></li>
45+
<li><a href="https://www.ucsc.edu/people/" title="Campus directory">People</a></li>
46+
<li><a href="https://www.ucsc.edu/calendars/" title="Upcoming events, academic, and administrative calendars">Calendars</a></li>
47+
<li><a href="https://www.ucsc.edu/campus/visit/maps-directions/">Maps</a></li>
48+
<li><a href="https://www.ucsc.edu/azindex/" title="A to Z index of UCSC websites">A-Z Index</a></li>
4949
</ul>
5050
<div class="trss-ucsc-header__search" role="search">
5151
<form role="search" method="get" action={this.searchAction} id="cse-search-box">

‎src/globals/ucsc-trss.scss

+9-15
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22
@import 'scss/mixins';
33

44
:root {
5-
6-
@each $key,
7-
$value in $colors {
8-
--#{$key}: #{$value};
9-
}
5+
@each $key, $value in $colors {
6+
--#{$key}: #{$value};
7+
}
108

119
/* Base colors */
1210
--ucsc-light-blue: #d2e7f4;
@@ -21,11 +19,10 @@ $value in $colors {
2119
--ucsc-dark-gray: #555555;
2220
--ucsc-black: #000;
2321

24-
2522
/* Typography */
26-
--font-family-sans-serif: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
23+
--font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
2724
--font-family-sans-serif-condensed: 'Roboto Condensed', sans-serif;
28-
--font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
25+
--font-family-monospace: Monaco, Menlo, Consolas, 'Courier New', monospace;
2926
--font-family-headlines: var(--font-family-sans-serif);
3027
--font-family-base: var(--font-family-sans-serif);
3128

@@ -35,22 +32,19 @@ $value in $colors {
3532
--font-size-lg: 20px;
3633
--font-size-xl: 24px;
3734

38-
--border-radius: 0;
35+
--border-radius: 2px;
3936

4037
/* Layout */
4138
--trss-content-width: 80rem;
4239
--trss-content-padding: 1rem;
4340
}
4441

45-
46-
47-
4842
/*
4943
UCSC defaults
5044
*/
5145
.trss-container {
5246
padding: 0;
53-
margin: 0 ;
47+
margin: 0;
5448
}
5549

5650
.trss-row__full {
@@ -74,13 +68,13 @@ $value in $colors {
7468

7569
.trss-hide {
7670
border: 0;
77-
clip: rect(1px,1px,1px,1px);
71+
clip: rect(1px, 1px, 1px, 1px);
7872
clip-path: inset(50%);
7973
height: 1px;
8074
margin: -1px;
8175
overflow: hidden;
8276
padding: 0;
8377
position: absolute;
8478
width: 1px;
85-
word-wrap: normal!important;
79+
word-wrap: normal !important;
8680
}

0 commit comments

Comments
 (0)