Skip to content

Commit c0cb7ff

Browse files
mimosafamimosafa
committed
add base style, mixin, reset.css, and set vue router and layout component
`yarn add --dev reset-css`
1 parent 38570ee commit c0cb7ff

17 files changed

+265
-57
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"fibers": "^5.0.0",
1616
"html-webpack-plugin": "^4.3.0",
1717
"mini-css-extract-plugin": "^0.9.0",
18+
"reset-css": "^5.0.1",
1819
"sass": "^1.26.9",
1920
"sass-loader": "^8.0.2",
2021
"sass-resources-loader": "^2.0.3",

‎src/app.vue

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/css/_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "core/core";

‎src/css/core/_core.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// @import "mixin/mixin";
2+
@import "base/base";
3+
@import "base/noscript";

‎src/css/core/base/_base.scss

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
*,
2+
*:before,
3+
*:after {
4+
box-sizing: border-box;
5+
}
6+
html,
7+
body {
8+
width: 100%;
9+
height: 100%;
10+
}
11+
body {
12+
background-color: #fff;
13+
}
14+
15+
// Font
16+
html {
17+
font-size: 62.5%;
18+
}
19+
20+
body {
21+
font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
22+
color: #333;
23+
font-weight: 400;
24+
letter-spacing: .02em;
25+
26+
@include phone {
27+
font-size: 1.3rem;
28+
line-height: 1.6;
29+
}
30+
@include desktop {
31+
font-size: 1.4rem;
32+
line-height: 1.8;
33+
}
34+
}
35+
strong {
36+
font-weight: 600;
37+
}
38+
39+
// Headline
40+
h1,
41+
h2,
42+
h3,
43+
h4,
44+
h5,
45+
h6 {
46+
font-weight: 600;
47+
}
48+
@include phone {
49+
h1 {
50+
font-size: 2.4rem;
51+
ine-height: 1.4;
52+
}
53+
h2 {
54+
font-size: 2rem;
55+
line-height: 1.5;
56+
}
57+
h3 {
58+
font-size: 1.6rem;
59+
line-height: 1.6;
60+
}
61+
h4 {
62+
font-size: 1.5rem;
63+
line-height: 1.6;
64+
}
65+
h5 {
66+
font-size: 1.4rem;
67+
line-height: 1.6;
68+
}
69+
h6 {
70+
font-size: 1.3rem;
71+
line-height: 1.6;
72+
}
73+
}
74+
@include desktop {
75+
h1 {
76+
font-size: 4.8rem;
77+
line-height: 1.3;
78+
}
79+
h2 {
80+
font-size: 4rem;
81+
line-height: 1.4;
82+
}
83+
h3 {
84+
font-size: 2.4rem;
85+
line-height: 1.6;
86+
}
87+
h4 {
88+
font-size: 1.8rem;
89+
line-height: 1.7;
90+
}
91+
h5 {
92+
font-size: 1.6rem;
93+
line-height: 1.8;
94+
}
95+
h6 {
96+
font-size: 1.4rem;
97+
line-height: 1.8;
98+
}
99+
}
100+
101+
// Links
102+
a {
103+
display: inline-block;
104+
color: #333;
105+
text-decoration: none;
106+
107+
@include desktop {
108+
&:hover {
109+
opacity: .6;
110+
transition: .2s ease-out;
111+
}
112+
}
113+
}

‎src/css/core/base/_noscript.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.header_noscript {
2+
background-color: rgba(0, 0, 0, .8);
3+
width: 100%;
4+
height: 35px;
5+
line-height: 35px;
6+
position: fixed;
7+
top: 0;
8+
left: 0;
9+
z-index: 20001;
10+
color: #fff;
11+
font-size: 12px;
12+
text-align: center;
13+
}

‎src/css/core/mixin/_mixin.scss

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1-
@mixin text-red {
2-
color: $_color-red;
1+
// Media queries
2+
// - Phone
3+
@mixin phone {
4+
@media (max-width: 896px) {
5+
@content;
6+
}
7+
}
8+
// - Desktop
9+
@mixin desktop {
10+
@media (min-width: 897px) {
11+
@content;
12+
}
313
}

‎src/css/core/variable/_color.scss

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
<title>w-tokyodo-webpack-vue</title>
88
</head>
99
<body>
10+
<noscript>
11+
<p class="header_noscript">ウェブブラウザの設定でJavaScriptを有効にしてご利用ください。</p>
12+
</noscript>
1013
<div id="app"></div>
1114
</body>
1215
</html>

‎src/index.js

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,19 @@
11
import './index.scss';
22
import Vue from 'vue';
33
import VueRouter from 'vue-router';
4-
import App from './app.vue';
4+
import routes from './routes/index';
5+
import Web from './web.vue';
56

67
Vue.use(VueRouter);
78

8-
const Home = { template: '<div>Home</div>' };
9-
const Foo = { template: '<div>foo</div>' };
10-
const Bar = { template: '<div>bar</div>' };
11-
12-
const routes = [
13-
{ path: '/', component: Home },
14-
{ path: '/foo', component: Foo },
15-
{ path: '/bar', component: Bar }
16-
];
17-
189
const router = new VueRouter({
1910
mode: 'history',
20-
routes: routes
11+
routes
2112
});
2213

2314
new Vue({
2415
el: '#app',
25-
components: { App },
26-
template: '<App/>',
16+
components: { Web },
17+
template: '<Web/>',
2718
router
2819
});

‎src/index.scss

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,2 @@
1-
// @import "css/core/variable/color"; // <- included @webpack.config.js
2-
3-
body {
4-
background-color: #eee;
5-
}
6-
7-
address {
8-
color: $_color-red;
9-
}
1+
@import "~reset-css/sass/reset";
2+
@import "css/index";

‎src/layouts/web-frame.vue

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<div>
3+
<header id="header">
4+
<div class="header_inner">
5+
<h1 class="header_site_ttl"><a href="/">Workstore Tokyo Do | ワークストア・トウキョウドゥ</a></h1>
6+
<nav class="header_gnav">
7+
<div class="header_gnav_inner">
8+
<ul class="header_gnav_brand">
9+
<li class="header_gnav_brand_direct"><a href="/direct/">DIRECT MANAGEMENT</a></li>
10+
<li class="header_gnav_brand_neostall"><a href="/neostall/">ネオ屋台村</a></li>
11+
<li class="header_gnav_brand_neoponte"><a href="/neoponte/">ネオポンテ</a></li>
12+
<li class="header_gnav_brand_sharyobu"><a href="/sharyobu/">車両部</a></li>
13+
</ul>
14+
<ul class="header_gnav_menu">
15+
<li><a href="/company/"><span>会社概要</span></a></li>
16+
<li><a href="/terms/"><span>ご利用にあたって</span></a></li>
17+
<li><a href="/contact/"><span>お問い合わせ</span></a></li>
18+
</ul>
19+
<ul class="header_gnav_other">
20+
<li class="header_gnav_other_facebook"><a href="#" target="_blank">Facebook</a></li>
21+
<li class="header_gnav_other_twitter"><a href="#" target="_blank">Twitter</a></li>
22+
<li class="header_gnav_other_contact"><a href="/contact/">お問い合わせ</a></li>
23+
</ul>
24+
<div class="header_gnav_btn">
25+
<a href="">
26+
<span class="header_gnav_btn_ttl">Menu</span>
27+
<span id="header_gnav_btn_bar01" class="header_gnav_btn_bar"></span>
28+
<span id="header_gnav_btn_bar02" class="header_gnav_btn_bar"></span>
29+
<span id="header_gnav_btn_bar03" class="header_gnav_btn_bar"></span>
30+
</a>
31+
</div>
32+
</div>
33+
</nav>
34+
</div>
35+
</header>
36+
37+
<div class="header_overlay"></div>
38+
39+
<div id="loader"></div>
40+
41+
<slot></slot>
42+
43+
<footer id="footer">
44+
<div class="footer_pagetop">
45+
<a href="">PAGE TOP</a>
46+
</div>
47+
48+
<div class="footer_inner">
49+
<ol class="footer_breadcrumbs">
50+
<li><a href="/">トップページ</a></li>
51+
<li>ご利用にあたって</li>
52+
</ol>
53+
54+
<nav class="footer_sitemap clearfix">
55+
<dl class="footer_sitemap_tokyodo">
56+
<dt>
57+
<a href="/">Workstore Tokyo Do | ワークストア・トウキョウドゥ</a>
58+
</dt>
59+
<dd>
60+
<p>〒146-0094 東京都大田区東矢口三丁目30番14号</p>
61+
<ul class="footer_sitemap_tokyodo_links">
62+
<li class="footer_sitemap_tokyodo_links_tel"><a href="tel:03-3737-3000">03-3737-3000</a></li>
63+
<li class="footer_sitemap_tokyodo_links_mail"><a href="/contact">お問い合わせ</a></li>
64+
</ul>
65+
</dd>
66+
</dl>
67+
<ul class="footer_sitemap_brand">
68+
<li class="footer_sitemap_brand_direct"><a href="/direct/">DIRECT MANAGEMENT</a></li>
69+
<li class="footer_sitemap_brand_neostall"><a href="/neostall/">ネオ屋台村</a></li>
70+
<li class="footer_sitemap_brand_neoponte"><a href="/neoponte/">ネオポンテ</a></li>
71+
<li class="footer_sitemap_brand_sharyobu"><a href="/sharyobu/">車両部</a></li>
72+
</ul>
73+
</nav>
74+
</div>
75+
76+
<div class="footer_credit">
77+
<p>Copyright &copy; 2010-2020 WorkStore Tokyo Do.<br>All Rights Reserved.</p>
78+
</div>
79+
</footer>
80+
</div>
81+
</template>

‎src/pages/index.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<div>Here is Home.</div>
3+
</template>

‎src/routes/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Root from '../pages/index.vue';
2+
3+
export default [
4+
{
5+
path: '/',
6+
component: Root
7+
}
8+
];

‎src/web.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<WebFrame>
3+
<router-view></router-view>
4+
</WebFrame>
5+
</template>
6+
7+
<script>
8+
import WebFrame from './layouts/web-frame.vue';
9+
10+
export default {
11+
components: {
12+
WebFrame
13+
}
14+
};
15+
</script>

‎webpack.config.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ module.exports = {
3636
loader: 'sass-resources-loader',
3737
options: {
3838
resources: [
39-
path.resolve(__dirname, 'src/css/core/variable/_color.scss'),
4039
path.resolve(__dirname, 'src/css/core/mixin/_mixin.scss')
4140
]
4241
}

‎yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4368,6 +4368,11 @@ requires-port@^1.0.0:
43684368
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
43694369
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
43704370

4371+
reset-css@^5.0.1:
4372+
version "5.0.1"
4373+
resolved "https://registry.yarnpkg.com/reset-css/-/reset-css-5.0.1.tgz#1ced0604fdb6836567e40d82de3537afaf3bb4c8"
4374+
integrity sha512-VyuJdNFfp5x/W6e5wauJM59C02Vs0P22sxzZGhQMPaqu/NGTeFxlBFOOw3eq9vQd19gIDdZp7zi89ylyKOJ33Q==
4375+
43714376
resolve-cwd@^2.0.0:
43724377
version "2.0.0"
43734378
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"

0 commit comments

Comments
 (0)