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

Commit 97eb985

Browse files
TheAlexLichterTheAlexLichter
authored
refactor: tailwind v1 (#87)
1 parent 471fd8e commit 97eb985

26 files changed

+234
-301
lines changed

‎assets/styles/app.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "tailwindcss/preflight";
1+
@import "tailwindcss/base";
22

33
@import "tailwindcss/components";
44
@import "./components/nav.pcss";

‎assets/styles/backgrounds.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@variants hover {
22
.bg-gradient-rains-dark-rains {
3-
background-image: linear-gradient(to left, config('colors.rains'), config('colors.rains-dark'));
3+
background-image: linear-gradient(to left, theme('colors.rains.500'), theme('colors.rains.600'));
44
}
55
}

‎assets/styles/components/nav.pcss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.nav-link {
2-
@apply .block .text-white .no-underline .uppercase .border-developmint-lighter .transition-border-color .my-2;
2+
@apply .block .text-white .no-underline .uppercase .border-developmint-400 .transition-border-color .my-2;
33
@screen lg {
44
@apply .mt-4 .mb-1 .mx-6 ;
55
}
66

77
&:hover {
8-
@apply .text-developmint-lighter;
8+
@apply .text-developmint-400;
99
@screen lg {
1010
@apply .border-b;
1111
}

‎assets/styles/shame.pcss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@variants group-hover {
22
.text-shadow {
3-
text-shadow: 4px 4px 10px config('colors.rains');
3+
text-shadow: 4px 4px 10px theme('colors.rains.500');
44
}
55
}
66

7-
.shadow-over-grey-darkest {
8-
box-shadow: 0 0 30px -18px config('colors.grey-darkest');
7+
.shadow-over-gray-darkest {
8+
box-shadow: 0 0 30px -18px theme('colors.gray.800');
99
}
1010

1111
@variants responsive, hover, group-hover {
@@ -15,7 +15,7 @@
1515
}
1616

1717
::selection {
18-
@apply .bg-developmint .text-white;
18+
@apply .bg-developmint-500 .text-white;
1919
}
2020

2121
.slide-fade-enter-active {

‎components/Consent.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,18 @@ export default {
2020
</script>
2121

2222
<style lang="postcss">
23+
/* purgecss start ignore */
2324
.cookie-consent {
24-
@apply .w-full .py-2 .relative .flex .items-center .justify-center .bg-developmint-darker .text-developmint-lightest .text-xs;
25+
@apply .w-full .py-2 .relative .flex .items-center .justify-center .bg-developmint-700 .text-developmint-200 .text-xs;
2526
2627
@screen md {
2728
@apply .text-sm .text-center;
2829
}
2930
3031
&-link {
31-
@apply .no-underline .text-developmint-light;
32+
@apply .no-underline .text-developmint-300;
3233
&:hover {
33-
@apply text-developmint-lighter;
34+
@apply text-developmint-200;
3435
}
3536
}
3637
@@ -51,4 +52,6 @@ export default {
5152
}
5253
}
5354
}
55+
56+
/* purgecss end ignore */
5457
</style>

‎components/ContactUsModal.vue

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<transition name="animodal" appear>
3-
<div class="fixed pin-t w-full h-screen bg-rains-trans z-20 overflow-hidden md:overflow-y-scroll text-white p-4 lg:p-8 lg:pt-0 xl:p-16 text-2xl lg:text-3xl transition-all">
3+
<div class="fixed top-0 w-full h-screen bg-rains-trans-500 z-20 overflow-hidden md:overflow-y-scroll text-white p-4 lg:p-8 lg:pt-0 xl:p-16 text-2xl lg:text-3xl transition-all">
44
<button
55
class="close-button modal-close"
66
@click="$emit('close')"
@@ -16,92 +16,92 @@
1616
>
1717
<div
1818
:class="{'shadow-white': focusedElement === 'name', 'shadow-red': $v.name.$error}"
19-
class="bg-grey-lighter inline-flex rounded items-center px-4 border-white transition-all w-full my-2"
19+
class="bg-gray-300 inline-flex rounded items-center px-4 border-white transition-all w-full my-2"
2020
>
2121
<label
2222
for="name"
23-
class="text-developmint-darker whitespace-no-wrap"
23+
class="text-developmint-700 whitespace-no-wrap"
2424
>
2525
Name
2626
</label>
2727
<input
2828
id="name"
2929
v-model.trim="$v.name.$model"
30-
class="appearance-none bg-transparent py-4 px-2 mx-2 md:mx-0 md:px-8 w-5/6 md:w-full text-developmint-darkest"
30+
class="appearance-none bg-transparent py-4 px-2 mx-2 md:mx-0 md:px-8 w-5/6 md:w-full text-developmint-800"
3131
type="text"
3232
@focus="focusedElement = 'name'"
3333
@blur="focusedElement = ''"
3434
>
3535
</div>
3636
<span
3737
v-show="$v.name.$error"
38-
class="text-sm self-start ml-2 mb-4 text-red-light"
38+
class="text-sm self-start ml-2 mb-4 text-red-400"
3939
>
4040
{{ $t('contact.errors.name') }}
4141
</span>
4242
<div
4343
:class="{'shadow-white': focusedElement === 'email', 'shadow-red': $v.email.$error}"
44-
class="bg-grey-lighter inline-flex rounded items-center px-4 border-white transition-all w-full my-2"
44+
class="bg-gray-300 inline-flex rounded items-center px-4 border-white transition-all w-full my-2"
4545
>
4646
<label
4747
for="email"
48-
class="text-developmint-darker whitespace-no-wrap"
48+
class="text-developmint-700 whitespace-no-wrap"
4949
>
5050
E-Mail
5151
</label>
5252
<input
5353
id="email"
5454
v-model.trim="$v.email.$model"
55-
class="appearance-none bg-transparent py-4 px-2 mx-2 md:mx-0 md:px-8 w-5/6 md:w-full text-developmint-darkest"
55+
class="appearance-none bg-transparent py-4 px-2 mx-2 md:mx-0 md:px-8 w-5/6 md:w-full text-developmint-800"
5656
type="email"
5757
@focus="focusedElement = 'email'"
5858
@blur="focusedElement = ''"
5959
>
6060
</div>
6161
<span
6262
v-show="$v.email.$error"
63-
class="text-sm self-start ml-2 mb-4 text-red-light"
63+
class="text-sm self-start ml-2 mb-4 text-red-400"
6464
>
6565
{{ $t('contact.errors.email') }}
6666
</span>
6767
<div
6868
:class="{'shadow-white': focusedElement === 'msg', 'shadow-red': $v.msg.$error}"
69-
class="bg-grey-lighter inline-flex flex-col rounded px-4 border-white transition-all w-full my-2"
69+
class="bg-gray-300 inline-flex flex-col rounded px-4 border-white transition-all w-full my-2"
7070
>
7171
<label
7272
for="msg"
73-
class="py-4 text-developmint-darker"
73+
class="py-4 text-developmint-700"
7474
>
7575
{{ $t('contact.fields.tell') }}
7676
</label>
7777
<textarea
7878
id="msg"
7979
v-model.trim="$v.msg.$model"
80-
class="appearance-none bg-transparent text-developmint-darkest resize-none"
80+
class="appearance-none bg-transparent text-developmint-800 resize-none"
8181
rows="6"
8282
@focus="focusedElement='msg'"
8383
@blur="focusedElement = ''"
8484
/>
8585
</div>
8686
<span
8787
v-show="$v.msg.$error"
88-
class="text-xm self-start ml-2 mb-4 text-red-light"
88+
class="text-xm self-start ml-2 mb-4 text-red-400"
8989
>
9090
{{ $t('contact.errors.message') }}
9191
</span>
92-
<p class="text-xs md:text-base my-4 px-2 text-grey-light">
92+
<p class="text-xs md:text-sm my-4 px-2 text-gray-light">
9393
{{ $t('contact.privacy.text') }}
9494
<NuxtLink
9595
:to="localePath('privacy')"
9696
tabindex="-1"
97-
class="text-white hover:text-developmint-lighter"
97+
class="text-white underline hover:text-developmint-300"
9898
>
9999
{{ $t('contact.privacy.policy') }}
100100
</NuxtLink>
101101
</p>
102102
<div class="flex justify-between lg:block lg:ml-auto">
103103
<button
104-
class="lg:hidden mr-4 mt-4 rounded hover:border-yellow transition-all hover:text-yellow px-6 py-3 border border-yellow-dark text-grey-light"
104+
class="lg:hidden mr-4 mt-4 rounded hover:border-yellow-500 transition-all hover:text-yellow px-6 py-3 border border-yellow-400 text-gray-300"
105105
@click.prevent="$emit('close')"
106106
>
107107
{{ $t('contact.buttons.back') }}
@@ -117,13 +117,13 @@
117117
</form>
118118
<div
119119
v-show="isSubmitted"
120-
class="text-2xl text-developmint"
120+
class="text-2xl text-developmint-500"
121121
>
122122
{{ $t('contact.message.success') }}
123123
</div>
124124
<div
125125
v-if="error"
126-
class="text-2xl text-red-dark"
126+
class="text-2xl text-red-600"
127127
>
128128
{{ $t('contact.message.error') }}
129129
</div>
@@ -172,10 +172,10 @@ export default {
172172
return this.empty || this.$v.$error || this.submitting
173173
},
174174
submitButtonClasses () {
175-
const baseClasses = 'ml-4 mt-4 px-6 py-3 rounded transition-all border text-grey-light'
175+
const baseClasses = 'ml-4 mt-4 px-6 py-3 rounded transition-all border text-gray-300'
176176
const additionalClasses = this.submissionDisabled
177-
? 'opacity-50 cursor-not-allowed border-grey-light'
178-
: 'hover:bg-gradient-rains-dark-rains border-developmint-light hover:border-developmint'
177+
? 'opacity-50 cursor-not-allowed border-gray--300'
178+
: 'hover:bg-gradient-rains-dark-rains border-developmint-400 hover:border-developmint-500'
179179
180180
return `${baseClasses} ${additionalClasses}`
181181
}
@@ -207,7 +207,6 @@ export default {
207207
this.$ga.event('submit', 'form', this.$i18n.locale)
208208
this.error = false
209209
try {
210-
// Empty string is no bug as API URL is already configured
211210
await this.$axios.$post('contact', {
212211
name: this.name,
213212
email: this.email,
@@ -250,11 +249,11 @@ export default {
250249
}
251250
252251
.shadow-red {
253-
box-shadow: 0 0 0 2px config("colors.red");
252+
box-shadow: 0 0 0 2px theme("colors.red.500");
254253
}
255254
256255
.close-button {
257-
@apply .hidden .font-mono .ml-auto .text-grey-light .text-xl .w-8 .h-8 .rounded-full .border .mt-2;
256+
@apply .hidden .font-mono .ml-auto .text-gray-400 .text-xl .w-8 .h-8 .rounded-full .border .mt-2;
258257
259258
&::before {
260259
content: '×'

‎components/Footer.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<nav class="py-4 pin-b z-10 bg-footer text-xs text-grey-light border-t-2 border-rains">
2+
<nav class="py-4 pin-b z-10 bg-footer text-xs text-gray-400 border-t-2 border-rains-500">
33
<div class="flex flex-col lg:flex-row justify-between items-center lg:items-start p-2 mx-8">
44
<div class="flex flex-col lg:flex-row items-center">
55
<div class="text-center leading-loose lg:text-left lg:leading-normal">
66
<span>
77
&copy; 2015 - {{ $options.currentYear }}
88
<a
99
href="/"
10-
class="no-underline text-developmint hover:text-developmint-light"
10+
class="no-underline text-developmint-500 hover:text-developmint-400"
1111
v-text="'Developmint GbR'"
1212
/>
1313
</span>
@@ -26,7 +26,7 @@
2626
</span>
2727
</div>
2828
<a
29-
class="flex items-center font-hairline mr-2 text-grey-light no-underline hover:text-white"
29+
class="flex items-center font-hairline mr-2 text-gray-400 no-underline hover:text-white"
3030
href="https://github.com/Developmint/developmint.de"
3131
target="_blank"
3232
rel="noopener"
@@ -42,7 +42,7 @@
4242
:key="link"
4343
:to="localePath(link)"
4444
no-prefetch
45-
class="text-grey-light no-underline hover:text-white ml-2 lg:ml-3"
45+
class="text-gray-400 no-underline hover:text-white ml-2 lg:ml-3"
4646
>
4747
{{ $t(`footer.${link}`) }}
4848
</NuxtLink>

‎components/Navbar.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<Consent />
77
<nav
88
:class="navClasses"
9-
class="w-full flex items-center justify-between flex-wrap lg:flex-no-wrap lg:p-6 pb-0 lg:pb-0 pin-t transition-all-300"
9+
class="w-full flex items-center justify-between flex-wrap lg:flex-no-wrap pb-0 lg:p-2 pin-t transition-all-300"
1010
>
1111
<div
1212
:class="subNavClasses"
@@ -25,7 +25,7 @@
2525
</NuxtLink>
2626
<div class="block lg:hidden mt-1">
2727
<button
28-
class="flex items-center lg:items-start px-3 py-2 border rounded text-white border-white hover:text-developmint-lighter hover:border-b hover:border-developmint-lighter"
28+
class="flex items-center lg:items-start px-3 py-2 border rounded text-white border-white hover:text-developmint-300 hover:border-b hover:border-developmint-300"
2929
@click="toggleVisibility"
3030
>
3131
<svg
@@ -90,7 +90,7 @@ export default {
9090
isUserScrolling () { return this.scrollOffset },
9191
navClasses () {
9292
return {
93-
'pt-2 lg:pt-2 bg-rains': this.isUserScrolling || this.isUncollapsed,
93+
'py-2 bg-rains-500': this.isUserScrolling || this.isUncollapsed,
9494
'bg-transparent': !this.isUserScrolling
9595
}
9696
},

‎components/about-us/TeamMember.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<template>
22
<div class="flex flex-col flex-1 items-center my-24 mx-4 lg:m-8 lg:my-16 xl:my-0 lg:mx-18">
33
<div class="w-full flex flex-col lg:flex-row items-center mb-4">
4-
<div class="my-4 flex-no-shrink">
4+
<div class="my-4 flex-shrink-0">
55
<img
66
:alt="name"
77
:src="require(`~/assets/img/about/${slug}.jpg`)"
88
:srcset="`${require(`~/assets/img/about/${slug}@2x.jpg`)} 2x`"
9-
class="rounded-full border-4 border-solid border-grey-light shadow-lg"
9+
class="rounded-full border-4 border-solid border-gray-300 shadow-lg"
1010
height="192"
1111
width="192"
1212
>
1313
</div>
1414
<div class="w-full lg:ml-8">
1515
<h2
16-
class="text-3xl py-3 border-b border-developmint text-center lg:text-left font-normal"
16+
class="text-3xl py-3 border-b border-developmint-500 text-center lg:text-left"
1717
v-text="name"
1818
/>
1919
<div class="flex justify-around lg:justify-start mt-4">
@@ -23,31 +23,31 @@
2323
class="no-underline group"
2424
@click="logClick('web')"
2525
>
26-
<GlobeIcon class="block w-6 h-6 mx-3 text-grey-darker group-hover:text-developmint transition-all fill-current" />
26+
<GlobeIcon class="block w-6 h-6 mx-3 text-gray-600 group-hover:text-developmint-500 transition-all fill-current" />
2727
</a>
2828
<a
2929
v-if="links.github"
3030
:href="links.github"
3131
class="no-underline group"
3232
@click="logClick('github')"
3333
>
34-
<GitHubIcon class="block w-6 h-6 mx-3 text-grey-darker group-hover:text-black transition-all fill-current" />
34+
<GitHubIcon class="block w-6 h-6 mx-3 text-gray-600 group-hover:text-black transition-all fill-current" />
3535
</a>
3636
<a
3737
v-if="links.twitter"
3838
:href="links.twitter"
3939
class="no-underline group"
4040
@click="logClick('twitter')"
4141
>
42-
<TwitterIcon class="block w-6 h-6 mx-3 text-grey-darker group-hover:text-blue-light transition-all fill-current" />
42+
<TwitterIcon class="block w-6 h-6 mx-3 text-gray-600 group-hover:text-blue-light transition-all fill-current" />
4343
</a>
4444
<a
4545
v-if="links.linkedin"
4646
:href="links.linkedin"
4747
class="no-underline group"
4848
@click="logClick('linkedin')"
4949
>
50-
<LinkedInIcon class="block w-6 h-6 mx-3 text-grey-darker group-hover:text-blue-dark transition-all fill-current" />
50+
<LinkedInIcon class="block w-6 h-6 mx-3 text-gray-600 group-hover:text-blue-dark transition-all fill-current" />
5151
</a>
5252
</div>
5353
</div>

‎components/index/ExpertiseCategory.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
22
<div
3-
:class="{'lg:border-l pt-4 lg:pt-0 border-t border-developmint':!isFirst}"
3+
:class="{'lg:border-l pt-4 lg:pt-0 border-t border-developmint-500':!isFirst}"
44
class="lg:mx-6 lg:w-1/3 leading-tight lg:border-t-0"
55
>
66
<div class="lg:ml-8 p-4">
7-
<h3 class="my-2 text-center font-normal text-2xl" v-text="title" />
7+
<h3 class="my-2 text-center text-2xl" v-text="title" />
88
<div class="lg:flex justify-center">
9-
<ul class="list-reset">
9+
<ul>
1010
<!-- eslint-disable-next-line vue/no-v-html -->
1111
<li v-for="(item, index) in listItems" :key="index" class="my-4 text-center" v-html="item" />
1212
</ul>

0 commit comments

Comments
 (0)