Skip to content

Commit 4b54e32

Browse files
indefinitiesindefinities
committed
Added mobile & accessible changes
1 parent 5449dd4 commit 4b54e32

File tree

8 files changed

+72
-68
lines changed

8 files changed

+72
-68
lines changed

‎src/assets/speech-bubble.svg

Lines changed: 1 addition & 1 deletion
Loading

‎src/components/hacks-nav.vue

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -72,17 +72,16 @@ export default {
7272
margin: auto;
7373
7474
&__button {
75-
line-height: 48px;
75+
line-height: 4em;
7676
cursor: pointer;
7777
display: block;
78-
width: 100vw;
7978
top: 0;
8079
right: 0;
8180
8281
h2 {
8382
margin: unset;
8483
text-align: right;
85-
font-size: 108px !important;
84+
font-size: $hacks-hamburger-size !important;
8685
}
8786
}
8887
@@ -92,14 +91,13 @@ export default {
9291
list-style-type: none;
9392
display: block;
9493
margin: 15vh auto;
95-
font-size: 72px;
94+
font-size: $hacks-mobile-menu-text;
9695
}
9796
9897
a {
9998
position: relative;
10099
text-decoration: none;
101100
font-weight: 900;
102-
size: 14px !important;
103101
color: $hacks-nav-inactive-color !important;
104102
font-size: $hacks-h2;
105103
padding: 0.5em;
@@ -113,8 +111,7 @@ export default {
113111
&:not(.router-link-exact-active) {
114112
@keyframes focusin {
115113
from {
116-
text-shadow: 3px 3px rgba($color: red, $alpha: 0.4),
117-
-3px -3px rgba($color: cyan, $alpha: 0.4);
114+
text-shadow: $hacks-three-dee;
118115
}
119116
to {
120117
text-shadow: unset;

‎src/styles/_default.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.hacks {
22
&-small-caps {
3-
font-size: $hacks-text;
3+
font-size: $hacks-small-caps-size;
44
font-weight: $hacks-small-caps-weight;
55
font-variant: small-caps;
66
text-transform: lowercase;

‎src/styles/_variables.scss

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,36 @@
11
// Text
2-
$hacks-h1: 48px;
3-
$hacks-h2: 36px;
4-
$hacks-text: 24px;
2+
$hacks-h1: 3.6em;
3+
$hacks-h2: 2.4em;
4+
$hacks-text: 1.8em;
55
$hacks-text-spacing: 2em;
6+
$hacks-small-caps-size: 2.2em;
67
$hacks-small-caps-weight: 600;
8+
$hacks-hamburger-size: 8em;
9+
$hacks-mobile-menu-text: em(72px);
710

811
$hacks-border: 5px dotted rgba(white, 0.5);
12+
$hacks-three-dee: 3px 3px
13+
rgba(
14+
$color: red,
15+
$alpha: 0.4,
16+
),
17+
-3px -3px
18+
rgba(
19+
$color: cyan,
20+
$alpha: 0.4,
21+
);
22+
$hacks-title-three-dee: 2px 0px
23+
rgba(
24+
$color: red,
25+
$alpha: 0.4,
26+
),
27+
-2px 0px rgba(
28+
$color: cyan,
29+
$alpha: 0.4,
30+
);
931

1032
// Sizes
11-
$hacks-page-width: 981px;
33+
$hacks-page-width: em(981);
1234
$hacks-logo-size: 18em;
1335
$hacks-speech-size: 10em;
1436

‎src/views/About.vue

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@
1616
is. Here are some that we think are memorable:
1717
</p>
1818
<ul>
19-
<li>
20-
Hacks is a place where cool people build cool stuff because it's cool
21-
</li>
19+
<li>Hacks is a place where cool people build cool stuff because it's cool</li>
2220
<li>Tech tastemakers</li>
2321
<li>We sit around and watch train videos</li>
2422
<li>Social club for nerds</li>
@@ -29,14 +27,16 @@
2927
</ul>
3028
<p>
3129
If you want to add your own description come to a hacks meeting or email
32-
<a href="mailto:eboard@nuhacks.io">eboard@nuhacks.io</a>
30+
<a
31+
href="mailto:eboard@nuhacks.io"
32+
>eboard@nuhacks.io</a>
3333
</p>
3434
</section>
3535
</template>
3636

3737
<script>
3838
export default {
39-
name: "hacks-about",
39+
name: "hacks-about"
4040
};
4141
</script>
4242

@@ -66,7 +66,6 @@ export default {
6666
6767
li:before {
6868
content: "⮑";
69-
font-size: 18px;
7069
vertical-align: top;
7170
padding-right: 1em;
7271
}

‎src/views/EBoard.vue

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -92,39 +92,39 @@ export default {
9292
getUrl(key, user) {
9393
let url;
9494
switch (key) {
95-
case "gitHub":
96-
url = "https://github.com/" + user;
97-
break;
98-
case "email":
99-
url = "mailto:" + user;
100-
break;
101-
case "linkedIn":
102-
url = "https://linkedin.com/in/" + user;
103-
break;
104-
default:
105-
url = user;
106-
break;
95+
case "gitHub":
96+
url = "https://github.com/" + user;
97+
break;
98+
case "email":
99+
url = "mailto:" + user;
100+
break;
101+
case "linkedIn":
102+
url = "https://linkedin.com/in/" + user;
103+
break;
104+
default:
105+
url = user;
106+
break;
107107
}
108108
return url;
109109
},
110110
getSrc(key) {
111111
let source;
112112
switch (key) {
113-
case "website":
114-
source = require("../assets/cursor.svg");
115-
break;
116-
case "gitHub":
117-
source = require("../assets/GitHub-Mark-64px.png");
118-
break;
119-
case "email":
120-
source = require("../assets/microsoft-outlook.svg");
121-
break;
122-
case "linkedIn":
123-
source = require("../assets/linkedin.svg");
124-
break;
125-
default:
126-
source = null;
127-
break;
113+
case "website":
114+
source = require("../assets/cursor.svg");
115+
break;
116+
case "gitHub":
117+
source = require("../assets/GitHub-Mark-64px.png");
118+
break;
119+
case "email":
120+
source = require("../assets/microsoft-outlook.svg");
121+
break;
122+
case "linkedIn":
123+
source = require("../assets/linkedin.svg");
124+
break;
125+
default:
126+
source = null;
127+
break;
128128
}
129129
return source;
130130
},
@@ -145,7 +145,6 @@ export default {
145145
146146
&__position {
147147
opacity: 0.7;
148-
width: 10em;
149148
word-wrap: break-word;
150149
}
151150

‎src/views/Home.vue

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
</em>
1818
</p>
1919

20-
<div class="hacks-homepage__email">
20+
<div>
2121
<span class="hacks-small-caps">Questions?</span>
2222
<p>Email us at eboard@nuhacks.io</p>
2323
</div>
@@ -50,13 +50,13 @@
5050
<hacks-button
5151
link="https://nuhacks.us4.list-manage.com/subscribe?u=cbcce83bcf3543d25bd103865&id=6c0da9d34e"
5252
>
53-
<img src="../assets/mail.svg"/>
53+
<img src="../assets/mail.svg" />
5454
<h3>Mailing List</h3>
5555
</hacks-button>
5656
<hacks-button
5757
link="https://join.slack.com/t/nuhacks/shared_invite/zt-fgvmdpo1-KzxoPn2ematExVMDKEK1zQ"
5858
>
59-
<img src="../assets/slack-black.svg">
59+
<img src="../assets/slack-black.svg" />
6060
<h3>Slack</h3>
6161
</hacks-button>
6262
</div>
@@ -90,25 +90,21 @@ export default {
9090
&__slogan {
9191
width: 500px;
9292
line-height: $hacks-text-spacing;
93+
margin-right: 3em;
9394
94-
@media (max-width: 500px) {
95-
width: 100%;
95+
@media (max-width: $hacks-page-width) {
96+
line-height: unset;
97+
margin: unset;
9698
}
9799
}
98100
99-
&__email {
100-
padding-left: 3em;
101-
}
102-
103101
&__join {
104102
font-weight: $hacks-small-caps-weight;
105-
font-size: 36px !important;
106103
padding-left: 0.3em;
107104
}
108105
109106
&__title {
110-
text-shadow: 2px 0px rgba($color: red, $alpha: 0.4),
111-
-2px 0px rgba($color: cyan, $alpha: 0.4);
107+
text-shadow: $hacks-title-three-dee;
112108
color: rgba($color: white, $alpha: 0.7);
113109
}
114110

‎src/views/Members.vue

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -90,14 +90,6 @@ export default {
9090
flex-flow: row wrap;
9191
}
9292
93-
&__ccs {
94-
display: block;
95-
margin: auto;
96-
color: $hacks-background-color;
97-
font-size: 18px;
98-
text-transform: uppercase;
99-
}
100-
10193
&__member {
10294
margin: 1em;
10395
margin-left: unset;
@@ -121,7 +113,6 @@ export default {
121113
content: ">";
122114
padding-right: 1em;
123115
vertical-align: top;
124-
font-size: 18px;
125116
}
126117
}
127118
}

0 commit comments

Comments
 (0)