Skip to content

Commit

Permalink
configure base
Browse files Browse the repository at this point in the history
- add tailwind
- configure basic layout
- add basic elements
  • Loading branch information
Amorpheuz committed Apr 20, 2021
1 parent b0b487e commit 80a42fe
Show file tree
Hide file tree
Showing 11 changed files with 1,400 additions and 155 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@ module.exports = {
],
plugins: [],
// add your custom rules here
rules: {},
rules: { 'prettier/prettier': ['error', { endOfLine: 'auto' }] },
}
2 changes: 1 addition & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"semi": false,
"singleQuote": true
}
}
10 changes: 10 additions & 0 deletions assets/css/tailwind.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

#__layout,
#__nuxt,
body,
html {
@apply lg:h-full;
}
423 changes: 423 additions & 0 deletions components/Cat.vue

Large diffs are not rendered by default.

17 changes: 3 additions & 14 deletions components/Logo.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<svg
class="NuxtLogo"
width="245"
height="180"
width="101"
height="74"
viewBox="0 0 452 342"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -21,15 +21,4 @@
</svg>
</template>

<style>
.NuxtLogo {
animation: 1s appear;
margin: auto;
}
@keyframes appear {
0% {
opacity: 0;
}
}
</style>
<style></style>
52 changes: 2 additions & 50 deletions layouts/default.vue
Original file line number Diff line number Diff line change
@@ -1,55 +1,7 @@
<template>
<div>
<div class="h-full">
<Nuxt />
</div>
</template>

<style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
</style>
<style></style>
11 changes: 10 additions & 1 deletion nuxt.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,15 @@ export default {
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'preconnect', href: 'https://fonts.gstatic.com' },
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;600;700&display=swap',
},
],
},

// Global CSS: https://go.nuxtjs.dev/config-css
Expand All @@ -32,6 +40,7 @@ export default {
buildModules: [
// https://go.nuxtjs.dev/eslint
'@nuxtjs/eslint-module',
'@nuxtjs/tailwindcss',
],

// Modules: https://go.nuxtjs.dev/config-modules
Expand Down
9 changes: 7 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@
"devDependencies": {
"@nuxtjs/eslint-config": "^6.0.0",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/tailwindcss": "^4.0.3",
"@tailwindcss/postcss7-compat": "^2.1.0",
"autoprefixer": "9",
"babel-eslint": "^10.1.0",
"eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0",
Expand All @@ -33,6 +36,8 @@
"eslint-plugin-vue": "^7.7.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.4",
"prettier": "^2.2.1"
"postcss": "7",
"prettier": "^2.2.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat"
}
}
}
71 changes: 18 additions & 53 deletions pages/index.vue
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
<template>
<div class="container">
<div>
<Logo />
<h1 class="title">fetch-cat-breeds</h1>
<div class="links">
<a
href="https://nuxtjs.org/"
target="_blank"
rel="noopener noreferrer"
class="button--green"
>
Documentation
</a>
<a
href="https://github.com/nuxt/nuxt.js"
target="_blank"
rel="noopener noreferrer"
class="button--grey"
>
GitHub
</a>
<div class="grid grid-cols-2 h-full">
<div class="flex flex-row-reverse bg-pink text-blue-dark">
<div class="flex flex-col justify-center max-w-4xl p-6">
<h1 class="text-4xl font-bold">fetch-cat-breeds</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto, quae
nesciunt. Saepe dolores provident, eveniet delectus nihil nulla qui
dolore repudiandae fugiat. Corporis exercitationem tempora obcaecati
delectus reprehenderit expedita molestias?
</p>
</div>
</div>
<div class="flex flex-row">
<div class="flex flex-col justify-center max-w-4xl w-full">
<div class="mx-auto max-w-lg">
<Cat />
</div>
</div>
</div>
</div>
Expand All @@ -29,35 +25,4 @@
export default {}
</script>

<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
<style></style>
57 changes: 57 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
module.exports = {
purge: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
sans: [
'Rubik',
'ui-sans-serif',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Arial',
'Noto Sans',
'sans-serif',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji',
],
},
colors: {
transparent: 'transparent',
current: 'currentColor',
pink: {
dark: '#ffc7d0',
DEFAULT: '#fec7d7',
light: '#b18b96',
},
white: {
dark: '#F9F8FC',
DEFAULT: '#fffffe',
},
lavender: {
DEFAULT: '#A786DF',
light: '#D9D4E7',
},
blue: {
dark: '#0E172C',
DEFAULT: '#3E65C4',
},
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Loading

0 comments on commit 80a42fe

Please sign in to comment.