Skip to content
This repository was archived by the owner on Apr 19, 2023. It is now read-only.

Commit 2ec3bd4

Browse files
AnandChowdharyAnandChowdhary
committed
✨ Responsive
1 parent ab49f6c commit 2ec3bd4

17 files changed

+192
-38
lines changed

‎components/Footer.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,19 @@ export default class Footer extends Vue {
130130
flex-grow: 1;
131131
}
132132
}
133+
@media (max-width: 900px) {
134+
.container {
135+
flex-wrap: wrap;
136+
> div,
137+
.larger {
138+
width: 50%;
139+
margin-bottom: 2rem;
140+
&:last-child {
141+
margin-bottom: 0;
142+
}
143+
}
144+
}
145+
}
133146
h2 {
134147
font-size: 110%;
135148
margin-bottom: 0.5rem;

‎components/Navbar.vue

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<template>
22
<div v-if="isVisible" class="navbar">
33
<div class="container">
4-
<nuxt-link class="item" to="/">
5-
<span class="item--type-logo">Staart</span>
4+
<nuxt-link class="item item--type-logo" to="/">
5+
<img alt="" src="/android-chrome-72x72.png" />
6+
<span>Staart</span>
67
</nuxt-link>
78
<nav v-if="isAuthenticated">
89
<nuxt-link
@@ -119,6 +120,9 @@
119120
class="dropdown"
120121
>
121122
<nuxt-link class="item" to="/styleguide">Styleguide</nuxt-link>
123+
<nuxt-link class="item" to="/policies/licenses"
124+
>FOSS licenses</nuxt-link
125+
>
122126
</div>
123127
</transition>
124128
</span>
@@ -219,6 +223,14 @@ export default class Card extends Vue {
219223
justify-content: space-between;
220224
align-items: center;
221225
}
226+
@media (max-width: 500px) {
227+
.container {
228+
nav {
229+
overflow-x: auto;
230+
white-space: nowrap;
231+
}
232+
}
233+
}
222234
223235
.item {
224236
color: inherit;
@@ -235,9 +247,17 @@ export default class Card extends Vue {
235247
}
236248
}
237249
.item--type-logo {
238-
font-weight: bold;
239-
font-style: italic;
250+
text-align: center;
240251
font-size: 125%;
252+
&.nuxt-link-exact-active {
253+
font-weight: normal;
254+
}
255+
img {
256+
height: 1.5rem;
257+
margin-top: -0.2rem;
258+
margin-right: 0.25rem;
259+
vertical-align: middle;
260+
}
241261
}
242262
243263
nav span {

‎components/Policies.vue

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export default class Settings extends Vue {}
6262
<style lang="scss" scoped>
6363
.container {
6464
display: flex;
65+
margin-bottom: 5rem;
6566
}
6667
aside {
6768
width: 300px;
@@ -72,7 +73,6 @@ aside nav {
7273
}
7374
.card {
7475
flex-grow: 1;
75-
padding: 2rem;
7676
}
7777
.nav-heading {
7878
font-weight: bold;
@@ -86,7 +86,7 @@ aside nav {
8686
}
8787
.inside {
8888
max-width: 720px;
89-
margin: 2rem auto;
89+
margin: 0 auto;
9090
}
9191
.item {
9292
transition: 0.3s;
@@ -99,20 +99,22 @@ aside nav {
9999
opacity: 0.75;
100100
}
101101
}
102-
&.nuxt-link-exact-active {
102+
&.nuxt-link-active:not(.item--type-parent) {
103+
font-weight: bold;
104+
}
105+
}
106+
.sub-nav {
107+
margin-top: -0.5rem;
108+
border-left: 0.1rem solid rgba(0, 0, 0, 0.1);
109+
padding-left: 1.4rem;
110+
margin-left: 0.5rem;
111+
}
112+
.sub-item {
113+
display: block;
114+
color: inherit;
115+
margin: 0.5rem 0;
116+
&.nuxt-link-active {
103117
font-weight: bold;
104-
padding-left: 1rem;
105-
margin-left: -1rem;
106-
color: #492257;
107-
background-color: #fff;
108-
border-radius: 0.2rem 0 0 0.2rem;
109-
box-shadow: -7px 10px 10px rgba(60, 66, 87, 0.075), 2px 0 0 #fff;
110-
&:hover {
111-
opacity: 1;
112-
}
113-
.nav-icon {
114-
opacity: 0.75;
115-
}
116118
}
117119
}
118120
</style>

‎nuxt.config.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ const config: NuxtConfiguration = {
1414
}
1515
],
1616
link: [
17-
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
17+
{ rel: "mask-icon", color: "#673ab7", href: "/safari-pinned-tab.svg" },
18+
{ rel: "apple-touch-icon", sizes: "76x76", href: "/apple-touch-icon.png" },
19+
{ rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" },
20+
{ rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" },
1821
{
1922
rel: "stylesheet",
2023
href:

‎pages/index.vue

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,29 @@
22
<div>
33
<header class="section section--bg-white">
44
<div class="container">
5-
<h1>Staart is a SaaS starter for your next big idea.</h1>
6-
<p style="max-width: 500px">
7-
Written in TypeScript and Vue, Staart gives you a 6-month headstart in
8-
building your SaaS product. Free and open-source.
9-
</p>
10-
<div v-if="isAuthenticated">
11-
<nuxt-link
12-
class="button button--size-large button--color-primary"
13-
to="/dashboard"
14-
>Go to your dashboard &rarr;</nuxt-link
15-
>
16-
</div>
17-
<div v-else>
18-
<nuxt-link
19-
class="button button--size-large button--color-primary"
20-
to="/auth/register"
21-
>Get started for free &rarr;</nuxt-link
22-
>
5+
<div class="row">
6+
<div>
7+
<h1>Staart is a SaaS starter for your next big idea.</h1>
8+
<p style="max-width: 500px">
9+
Written in TypeScript and Vue, Staart gives you a 6-month
10+
headstart in building your SaaS product. Free and open-source.
11+
</p>
12+
<div v-if="isAuthenticated">
13+
<nuxt-link
14+
class="button button--size-large button--color-primary"
15+
to="/dashboard"
16+
>Go to your dashboard &rarr;</nuxt-link
17+
>
18+
</div>
19+
<div v-else>
20+
<nuxt-link
21+
class="button button--size-large button--color-primary"
22+
to="/auth/register"
23+
>Get started for free &rarr;</nuxt-link
24+
>
25+
</div>
26+
</div>
27+
<img class="b" alt="" src="/images/undraw_product_tour_foyt.svg" />
2328
</div>
2429
</div>
2530
</header>
@@ -534,10 +539,29 @@ dt {
534539
.label-help {
535540
line-height: 1;
536541
}
542+
@media (max-width: 500px) {
543+
.label-help {
544+
display: none;
545+
}
546+
}
537547
.label-help::after {
538548
font-size: 90% !important;
539549
line-height: 1.5;
540550
width: 300px;
541551
white-space: normal;
542552
}
553+
.b {
554+
height: 20rem;
555+
margin-top: -4rem;
556+
margin-bottom: -5rem;
557+
}
558+
@media (max-width: 500px) {
559+
.b {
560+
margin-top: 0;
561+
margin-bottom: 0;
562+
height: auto;
563+
width: 100%;
564+
margin-bottom: -5rem;
565+
}
566+
}
543567
</style>

‎pages/policies/licenses.vue

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template lang="md">
2+
# Licenses
3+
4+
&copy; 2019 Anand Chowdhary
5+
6+
## Credits
7+
8+
### Staart UI
9+
10+
Released under the MIT license
11+
12+
- Staart icon by [reallinfo](https://github.com/o15y/staart/issues/1), licensed CC-BY-4.0
13+
- Illustrations in Staart UI from [Undraw](https://undraw.co), custom open-source license
14+
- Icons from [Font Awesome](https://fontawesome.com), licensed CC-BY-4.0
15+
16+
### Staart
17+
18+
Released under the MIT license
19+
20+
- TypeScript decorators from [OvernightJS](https://github.com/seanpmaxwell/overnight), MIT licensed
21+
22+
### Staart UI demo site
23+
24+
Released under the MIT license
25+
26+
- Fonts from [Adobe Fonts](https://fonts.adobe.com/), purchased license
27+
- Accessibility plugin from [Oswald Labs](https://oswaldlabs.com), purchased license
28+
</template>

‎static/android-chrome-72x72.png

2.34 KB
Loading

‎static/apple-touch-icon.png

1.66 KB
Loading

‎static/browserconfig.xml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<browserconfig>
3+
<msapplication>
4+
<tile>
5+
<square150x150logo src="/mstile-150x150.png"/>
6+
<TileColor>#673ab7</TileColor>
7+
</tile>
8+
</msapplication>
9+
</browserconfig>

‎static/favicon-16x16.png

993 Bytes
Loading

0 commit comments

Comments
 (0)