+
≡
@@ -37,26 +43,26 @@ import { routes } from "../router";
export default {
name: "hacks-nav",
components: {
- HacksModal
+ HacksModal,
},
props: {
isMobile: {
type: Boolean,
required: true,
- default: false
- }
+ default: false,
+ },
},
data() {
return {
menuOpen: false,
- routes: routes
+ routes: routes,
};
},
methods: {
closeModal() {
this.menuOpen = !this.menuOpen;
- }
- }
+ },
+ },
};
@@ -67,22 +73,23 @@ export default {
font-variant: small-caps;
text-transform: lowercase;
font-weight: lighter;
- width: $hacks-page-width;
display: block;
margin: auto;
+ width: fit-content;
&__button {
- line-height: 48px;
cursor: pointer;
display: block;
width: 100vw;
+ line-height: 3em;
top: 0;
right: 0;
h2 {
margin: unset;
text-align: right;
- font-size: 108px !important;
+ padding-right: 0.1em;
+ font-size: $hacks-hamburger-size;
}
}
@@ -92,14 +99,17 @@ export default {
list-style-type: none;
display: block;
margin: 15vh auto;
- font-size: 72px;
+ font-size: $hacks-mobile-menu-text;
+
+ > li {
+ padding: 1em 0;
+ }
}
a {
position: relative;
text-decoration: none;
font-weight: 900;
- size: 14px !important;
color: $hacks-nav-inactive-color !important;
font-size: $hacks-h2;
padding: 0.5em;
@@ -113,8 +123,7 @@ export default {
&:not(.router-link-exact-active) {
@keyframes focusin {
from {
- text-shadow: 3px 3px rgba($color: red, $alpha: 0.4),
- -3px -3px rgba($color: cyan, $alpha: 0.4);
+ text-shadow: $hacks-three-dee;
}
to {
text-shadow: unset;
@@ -130,10 +139,15 @@ export default {
&__container {
display: flex;
flex-wrap: wrap;
+ width: $hacks-page-width;
align-items: baseline;
margin: unset;
margin-top: 1em;
+ @media (max-width: $hacks-page-width) {
+ width: 80vw;
+ }
+
:nth-child(1) {
padding-left: unset;
}
diff --git a/src/styles/_default.scss b/src/styles/_default.scss
index 96abe6e..1495845 100644
--- a/src/styles/_default.scss
+++ b/src/styles/_default.scss
@@ -1,6 +1,6 @@
.hacks {
&-small-caps {
- font-size: $hacks-text;
+ font-size: $hacks-small-caps-size;
font-weight: $hacks-small-caps-weight;
font-variant: small-caps;
text-transform: lowercase;
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index ca8cc03..73be11e 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,11 +1,33 @@
// Text
-$hacks-h1: 48px;
-$hacks-h2: 36px;
-$hacks-text: 24px;
+$hacks-h1: 3em;
+$hacks-h2: 2em;
+$hacks-text: 1.5em;
$hacks-text-spacing: 2em;
+$hacks-small-caps-size: 2.2em;
$hacks-small-caps-weight: 600;
+$hacks-hamburger-size: 8em;
+$hacks-mobile-menu-text: em(72px);
$hacks-border: 5px dotted rgba(white, 0.5);
+$hacks-three-dee: 3px 3px
+ rgba(
+ $color: red,
+ $alpha: 0.4,
+ ),
+ -3px -3px
+ rgba(
+ $color: cyan,
+ $alpha: 0.4,
+ );
+$hacks-title-three-dee: 2px 0px
+ rgba(
+ $color: red,
+ $alpha: 0.4,
+ ),
+ -2px 0px rgba(
+ $color: cyan,
+ $alpha: 0.4,
+ );
// Sizes
$hacks-page-width: 981px;
diff --git a/src/views/About.vue b/src/views/About.vue
index 375ffb8..66a6f80 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -16,9 +16,7 @@
is. Here are some that we think are memorable:
- -
- Hacks is a place where cool people build cool stuff because it's cool
-
+ - Hacks is a place where cool people build cool stuff because it's cool
- Tech tastemakers
- We sit around and watch train videos
- Social club for nerds
@@ -29,14 +27,16 @@
If you want to add your own description come to a hacks meeting or email
- eboard@nuhacks.io
+ eboard@nuhacks.io
@@ -66,7 +66,6 @@ export default {
li:before {
content: "⮑";
- font-size: 18px;
vertical-align: top;
padding-right: 1em;
}
diff --git a/src/views/EBoard.vue b/src/views/EBoard.vue
index 635262b..796d1bd 100644
--- a/src/views/EBoard.vue
+++ b/src/views/EBoard.vue
@@ -145,7 +145,6 @@ export default {
&__position {
opacity: 0.7;
- width: 10em;
word-wrap: break-word;
}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 91fcc27..7cdab85 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -17,7 +17,7 @@
-
+
Questions?
Email us at eboard@nuhacks.io
@@ -50,13 +50,13 @@
-
+
Mailing List
-
+
Slack
@@ -73,8 +73,8 @@ export default {
name: "hacks-homepage",
components: {
HacksButton,
- HacksAnnounce
- }
+ HacksAnnounce,
+ },
};
@@ -88,27 +88,19 @@ export default {
}
&__slogan {
- width: 500px;
+ width: 600px;
line-height: $hacks-text-spacing;
-
- @media (max-width: 500px) {
- width: 100%;
- }
- }
-
- &__email {
- padding-left: 3em;
+ margin-right: 1em;
+ margin-bottom: 1em;
}
&__join {
font-weight: $hacks-small-caps-weight;
- font-size: 36px !important;
padding-left: 0.3em;
}
&__title {
- text-shadow: 2px 0px rgba($color: red, $alpha: 0.4),
- -2px 0px rgba($color: cyan, $alpha: 0.4);
+ text-shadow: $hacks-title-three-dee;
color: rgba($color: white, $alpha: 0.7);
}
diff --git a/src/views/Members.vue b/src/views/Members.vue
index 0cf1b0a..46b345d 100644
--- a/src/views/Members.vue
+++ b/src/views/Members.vue
@@ -90,14 +90,6 @@ export default {
flex-flow: row wrap;
}
- &__ccs {
- display: block;
- margin: auto;
- color: $hacks-background-color;
- font-size: 18px;
- text-transform: uppercase;
- }
-
&__member {
margin: 1em;
margin-left: unset;
@@ -121,7 +113,6 @@ export default {
content: ">";
padding-right: 1em;
vertical-align: top;
- font-size: 18px;
}
}
}