-
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 2932ade..e953642 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1,30 +1,36 @@
-@import "setup/reset";
-@import "setup/colors";
-@import "setup/fonts";
-@import "setup/positions";
-@import "setup/containers";
-@import "setup/effects";
+@tailwind base;
+@tailwind components;
+
+//@import "setup/reset";
+//@import "setup/colors";
+//@import "setup/fonts";
+//@import "setup/positions";
+//@import "setup/containers";
+//@import "setup/effects";
+//
@import "components/transitions";
@import "components/btn";
@import "components/elements";
-@import "components/loader";
-@import "components/events";
-@import "components/main";
+//@import "components/loader";
+//@import "components/main";
@import "components/nav";
-@import "components/topbar";
-@import "components/modal";
-@import "components/images";
-@import "components/avatar";
-@import "components/alert_box";
-@import "components/search_box";
-@import "components/owfont-regular";
-
-@import "pages/auth";
-@import "pages/users";
-@import "pages/memos";
-@import "pages/meteo";
-@import "pages/games";
-
+//@import "components/topbar";
+//@import "components/modal";
+//@import "components/images";
+//@import "components/avatar";
+//@import "components/alert_box";
+//@import "components/search_box";
+//@import "components/owfont-regular";
+//
+//@import "pages/auth";
+//@import "pages/users";
+//@import "pages/memos";
+//@import "pages/meteo";
+//@import "pages/games";
+//
@import "pages/games/hangman";
+
+
+@tailwind utilities;
diff --git a/resources/sass/components/_btn.scss b/resources/sass/components/_btn.scss
index d5414f7..38afde8 100644
--- a/resources/sass/components/_btn.scss
+++ b/resources/sass/components/_btn.scss
@@ -1,68 +1,107 @@
// Button
+//.btn {
+// font-size: 1.6rem;
+// border: 1px solid transparent;
+// padding: 0.5rem 1rem;
+// border-radius: 0.5rem;
+// cursor: pointer;
+// box-shadow: 1px 1px 2px $grey;
+// text-decoration: none;
+// transition: background-color 0.2s, color 0.2s;
+//
+// &:hover {
+// transition: background-color 0.2s, color 0.2s;
+// background-color: $mediumDark;
+// color: $white;
+// }
+//}
+//
+//.btn-primary {
+// @extend .btn;
+// background-color: $medium;
+// border-color: $medium;
+// color: $white;
+//
+// &:visited,
+// &:focus {
+// color: $white;
+// }
+//}
+//
+//.btn-secondary {
+// @extend .btn;
+// background-color: $mediumLight;
+// border-color: $mediumLight;
+// color: $dark;
+//}
+//
+//.btn-alert {
+// @extend .btn;
+// background-color: $error;
+// border-color: $error;
+// color: $white;
+//
+// &:hover {
+// background-color: $dark;
+// }
+//}
+//
+//.btn-icon {
+// @extend .btn;
+// display: flex;
+// align-items: center;
+// height: 4rem;
+//
+// &:hover svg {
+// fill: $white;
+// }
+//
+// svg {
+// height: 3rem;
+// margin-right: 1rem;
+//
+// &:hover {
+// fill: $white;
+// }
+// }
+//}
+
.btn {
- font-size: 1.6rem;
- border: 1px solid transparent;
- padding: 0.5rem 1rem;
- border-radius: 0.5rem;
- cursor: pointer;
- box-shadow: 1px 1px 2px $grey;
- text-decoration: none;
- transition: background-color 0.2s, color 0.2s;
+ @apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md;
&:hover {
- transition: background-color 0.2s, color 0.2s;
- background-color: $mediumDark;
- color: $white;
+ @apply text-white bg-orange-600 transition-all duration-300;
+ }
+
+ svg {
+ @apply w-4 fill-current mr-2 inline;
}
}
.btn-primary {
@extend .btn;
- background-color: $medium;
- border-color: $medium;
- color: $white;
+ @apply bg-orange-600;
- &:visited,
- &:focus {
- color: $white;
+ &:hover {
+ @apply bg-orange-800;
}
}
.btn-secondary {
@extend .btn;
- background-color: $mediumLight;
- border-color: $mediumLight;
- color: $dark;
+ @apply bg-orange-600;
+
+ &:hover {
+ @apply bg-orange-800;
+ }
}
.btn-alert {
@extend .btn;
- background-color: $error;
- border-color: $error;
- color: $white;
+ @apply bg-red-600 text-white;
&:hover {
- background-color: $dark;
- }
-}
-
-.btn-icon {
- @extend .btn;
- display: flex;
- align-items: center;
- height: 4rem;
-
- &:hover svg {
- fill: $white;
- }
-
- svg {
- height: 3rem;
- margin-right: 1rem;
-
- &:hover {
- fill: $white;
- }
+ @apply bg-red-800;
}
}
diff --git a/resources/sass/components/_elements.scss b/resources/sass/components/_elements.scss
index dfa71dd..3edc9bf 100644
--- a/resources/sass/components/_elements.scss
+++ b/resources/sass/components/_elements.scss
@@ -1,42 +1,94 @@
// Elements
-label {
- display: block;
+.text-shadow {
+ text-shadow: 1px 1px 2px #000;
}
-textarea,
-input {
- width: 100%;
- border: 1px solid $light;
- background-color: $greyLight;
- font-size: 1.6rem;
- font-family: $fontMain;
- padding: 0.5rem 1rem;
- border-radius: 0.2rem;
-
- &:focus {
- background-color: $white;
- border-color: $dark;
- }
+.left-8 {
+ left: 2rem;
}
-input[type="checkbox"] {
- width: unset;
+.left-80 {
+ left: 20rem;
+}
- & + label {
- display: inline;
- }
+.-bottom-12 {
+ bottom: -3rem;
+}
+
+.max-h-64 {
+ max-height: 16rem;
+}
+
+.page-title {
+ @apply text-3xl font-bold text-orange-900;
}
a {
- color: $mediumDark;
+ @apply text-orange-700;
- &:focus,
- &:visited {
- color: $dark;
+ &:hover {
+ @apply text-orange-900;
}
}
-pre {
+$modal-duration: 1s;
+.modal-container {
+ @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
+}
+
+.modal {
+ @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 400px;
+ animation-name: modalopen;
+ animation-duration: $modal-duration;
+}
+
+.box-toggle {
+ @apply shadow;
+
+ &-header {
+ @apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
+
+ svg {
+ @apply w-8 text-orange-600 fill-current;
+ }
+ }
+
+ svg {
+ transform: rotate(270deg);
+ transition: transform 0.3s;
+
+ &.open {
+ transform: rotate(90deg);
+ }
+ }
+
+ &-content {
+ padding: 0.5rem 1rem;
+ }
+}
+
+.card {
+ @apply bg-orange-300 rounded;
+
+ svg {
+ @apply max-w-full max-h-64 m-auto fill-current;
+ }
+
+ h2 {
+ @apply text-2xl text-center font-bold;
+ }
+
+ &:hover {
+ @apply bg-orange-500;
+
+ h2 {
+ @apply text-orange-700;
+ }
+ }
}
diff --git a/resources/sass/components/_transitions.scss b/resources/sass/components/_transitions.scss
index 824567d..8ad2ac5 100644
--- a/resources/sass/components/_transitions.scss
+++ b/resources/sass/components/_transitions.scss
@@ -4,3 +4,13 @@
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
+
+@keyframes modalopen {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
diff --git a/resources/sass/components/modal.scss b/resources/sass/components/modal.scss
index 25c7afa..22c7da5 100644
--- a/resources/sass/components/modal.scss
+++ b/resources/sass/components/modal.scss
@@ -1,30 +1,25 @@
$modal-duration: 1s;
.modal-container {
- background-color: rgba(0,0,0,0.6);
- //display: none;
- z-index: 10;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-
-
+ @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
}
.modal {
- background-color: #fff;
- border-radius: 5px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
- position: absolute;
- z-index: 20;
- //overflow: hidden;
+ @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- max-width: 100%;
width: 400px;
animation-name: modalopen;
animation-duration: $modal-duration;
}
+
+@keyframes modalopen {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
diff --git a/resources/sass/components/nav.scss b/resources/sass/components/nav.scss
index e606665..54b8c8d 100644
--- a/resources/sass/components/nav.scss
+++ b/resources/sass/components/nav.scss
@@ -1,103 +1,178 @@
+//nav {
+// background-color: $mediumDark;
+// height: 100vh;
+// width: 15rem;
+// flex-shrink: 0;
+// display: flex;
+// flex-direction: column;
+// box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
+// transition: width $transition-delay;
+//
+// &.small {
+// width: 5.5rem;
+// }
+//
+// hr {
+// width: 90%;
+// border-radius: 1px;
+// border: 1px solid $dark;
+// }
+//
+// .nav-item {
+// display: flex;
+// align-items: center;
+// text-decoration: none;
+// color: $light;
+// padding-top: 1rem;
+// padding-bottom: 1rem;
+//
+// span {
+// overflow: hidden;
+// }
+//
+// svg {
+// margin: 0 1rem;
+// width: 3rem;
+// transition: fill 0.2s;
+// fill: $light;
+// }
+//
+// &:hover {
+// color: $dark;
+// background-color: $light;
+// transition: color 0.2s, background-color 0.2s;
+//
+// svg {
+// fill: $dark;
+// transition: fill 0.2s;
+// }
+// }
+//
+// //&:visited {
+// // color: $dark;
+// //}
+// }
+//}
+//
+//.site-logo {
+// width: 3rem;
+// fill: $light;
+// transition: fill 0.2s;
+//
+// &:hover {
+// fill: $dark;
+// transition: fill 0.2s;
+// }
+//}
+//
+//.navhidden {
+// width: 0;
+//}
+//
+//
+//.site-logo-main {
+// @extend .site-logo;
+// display: block;
+// margin: 1rem;
+// width: 13rem;
+// transition: width $transition-delay;
+//
+// svg {
+//
+// width: 100%;
+// }
+//
+// &.small {
+// //padding-bottom: 10rem;
+// width: 3.5rem;
+// }
+//}
+//
+//.nav-toggle {
+// @extend .site-logo;
+// align-self: center;
+//
+// svg {
+// transition: transform $transition-delay;
+// }
+//
+// svg.small {
+// transform: rotate(-180deg);
+// }
+//}
+
nav {
- background-color: $mediumDark;
- height: 100vh;
- width: 15rem;
- flex-shrink: 0;
- display: flex;
- flex-direction: column;
- box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
- transition: width $transition-delay;
+ @apply w-48;
+ transition: width 0.3s;
- &.small {
- width: 5.5rem;
+ svg {
+ @apply fill-current text-orange-600 w-12 p-2;
+ transition: color 0.3s;
+
+ &:hover {
+ @apply text-orange-800;
+ }
}
- hr {
- width: 90%;
- border-radius: 1px;
- border: 1px solid $dark;
+ .logo {
+ @apply block;
+
+ svg {
+ @apply w-40 m-2;
+ transition: width 0.3s, color 0.3s;
+ }
}
.nav-item {
- display: flex;
- align-items: center;
- text-decoration: none;
- color: $light;
- padding-top: 1rem;
- padding-bottom: 1rem;
+ @apply flex items-center;
+
span {
- overflow: hidden;
- }
+ @apply font-bold text-xl ml-2 overflow-hidden;
+ transition: width 0.3s;
- svg {
- margin: 0 1rem;
- width: 3rem;
- transition: fill 0.2s;
- fill: $light;
- }
-
- &:hover {
- color: $dark;
- background-color: $light;
- transition: color 0.2s, background-color 0.2s;
-
- svg {
- fill: $dark;
- transition: fill 0.2s;
+ &:hover {
+ @apply text-orange-800;
}
}
- //&:visited {
- // color: $dark;
- //}
+ &:hover {
+ @apply bg-orange-500;
+
+ span,
+ svg {
+ @apply text-orange-800;
+ }
+ }
+ }
+
+ .nav-toggle svg {
+ transition: transform 0.3s;
}
}
-.site-logo {
- width: 3rem;
- fill: $light;
- transition: fill 0.2s;
+nav.small {
+ @apply w-16;
- &:hover {
- fill: $dark;
- transition: fill 0.2s;
+ .logo {
+ @apply w-16 p-0;
+
+ svg {
+ @apply w-16 m-0;
+ }
+ }
+
+ .nav-item span {
+ @apply w-0;
+ }
+
+ .nav-toggle svg {
+ transform: rotate(-180deg);
}
}
-.navhidden {
- width: 0;
-}
-
-
-.site-logo-main {
- @extend .site-logo;
- display: block;
- margin: 1rem;
- width: 13rem;
- transition: width $transition-delay;
-
- svg {
-
- width: 100%;
- }
-
- &.small {
- //padding-bottom: 10rem;
- width: 3.5rem;
- }
-}
-
-.nav-toggle {
- @extend .site-logo;
- align-self: center;
-
- svg {
- transition: transform $transition-delay;
- }
-
- svg.small {
- transform: rotate(-180deg);
- }
+.app {
+ //min-width: 100%;
+ width: initial;
}
diff --git a/resources/sass/pages/games/hangman.scss b/resources/sass/pages/games/hangman.scss
index e51b322..cb53665 100644
--- a/resources/sass/pages/games/hangman.scss
+++ b/resources/sass/pages/games/hangman.scss
@@ -17,14 +17,14 @@
.figure-container {
fill: transparent;
- stroke: $mediumDark;
+ stroke: orange;
stroke-width: 4px;
stroke-linecap: round;
}
.figure-part {
display: none;
- stroke: $dark;
+ stroke: #7b341e;
}
.wrong-letters-container {
@@ -47,13 +47,11 @@
}
.word {
- display: flex;
- align-self: center;
- justify-self: center;
+ @apply flex justify-center items-center;
bottom: 1rem;
.letter {
- border-bottom: 3px solid $medium;
+ border-bottom: 3px solid #c05621;
display: inline-flex;
font-size: 30px;
align-items: center;
@@ -69,16 +67,17 @@
width: calc(100% - 6rem);
.popup {
- background-color: $medium;
+ background-color: #c05621;
border-radius: 5px;
- color: $light;
+ color: #fbd38d;
+ min-height: 10rem;
padding: 20px;
text-align: center;
button {
cursor: pointer;
background-color: #fff;
- color: $dark;
+ color: #7b341e;
border: 0;
margin-top: 20px;
padding: 12px 20px;
@@ -96,7 +95,7 @@
}
.notification-container {
- background-color: $mediumLight;
+ background-color: #ed8936;
border-radius: 2px;
padding: 1rem;
text-align: center;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..bf31657
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+ theme: {
+ extend: {
+ width: {
+ '96': '24rem'
+ }
+ },
+ },
+ variants: {},
+ plugins: [],
+}
diff --git a/webpack.mix.js b/webpack.mix.js
index afa1b25..6cab0aa 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,6 +1,13 @@
const mix = require('laravel-mix');
+const tailwindcss = require('tailwindcss')
+require('laravel-mix-purgecss');
require('laravel-mix-svg-vue');
mix.js('resources/js/app.js', 'public/js')
.svgVue()
- .sass('resources/sass/app.scss', 'public/css');
+ .sass('resources/sass/app.scss', 'public/css')
+ .options({
+ processCssUrls: false,
+ postCss: [ tailwindcss('./tailwind.config.js') ],
+ })
+ .purgeCss();
- {{ alt[0] }}
+ {{ alt[0] }}
diff --git a/resources/js/components/InputField.vue b/resources/js/components/InputField.vue
index aff686b..cb8f3e0 100644
--- a/resources/js/components/InputField.vue
+++ b/resources/js/components/InputField.vue
@@ -1,8 +1,8 @@
-