Add moonshine admin

LaravelRUS · Nov 1, 2023 · a953c81 · a953c81
1 parent 1582f31
commit a953c81
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 20 deletions.
diff --git a/public/assets/app.css b/public/assets/app.css
diff --git a/public/assets/app.css.map b/public/assets/app.css.map
diff --git a/public/images/moonshine/moonshine.png b/public/images/moonshine/moonshine.png
diff --git a/public/images/moonshine/website.png b/public/images/moonshine/website.png
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/assets/app.js": "/assets/app.js?id=7f937023e867c60e5687dc01090d4368",
-    "/assets/app.css": "/assets/app.css?id=540a70c7871690249a2f82465d785a3c"
+    "/assets/app.css": "/assets/app.css?id=de36691709d562777d7fa62c89554049"
 }
diff --git a/resources/css/kernel/_colors.scss b/resources/css/kernel/_colors.scss
@@ -60,7 +60,7 @@ $color-disabled-filled-text:   $color-extra-light-silver;  // Text outside disab
 // Main color
 //
 $color-main: $color-red !default;
-$color-main-hover: lighten($color-red, 2%) !default;
+$color-main-hover: lighten($color-red, 8%) !default;
 $color-main-text: desaturate(darken($color-red, 10%), 20%) !default;
 
 //

diff --git a/resources/css/layout/_home.scss b/resources/css/layout/_home.scss
@@ -62,7 +62,7 @@
     line-height: 32px;
 
     .container {
-        padding: 160px 0;
+        padding: 120px 0;
         position: relative;
 
         span {
@@ -98,11 +98,48 @@
                 opacity: 0;
             }
         }
+
+        .button {
+            margin-top: 30px;
+            width: 140px;
+            line-height: 40px;
+        }
     }
 
-    &.orchid {
+    &.idea,
+    &.moonshine {
         background: $color-dark-white url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyBoZWlnaHQ9JzEyMScgd2lkdGg9JzEyMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMSA2MGg2MGwtLjAyNC02MEg2MnY2MGg1OXYxSDYydjU5aC0xVjYxSDF6TTAgMGgxdjEyMUgwem0xIDEyMGgxMjB2MUgxeicgZmlsbD0nI0VGRjFGMycgZmlsbC1ydWxlPSdldmVub2RkJy8+PC9zdmc+) top center repeat fixed;
 
+        .container {
+            display: flex;
+            justify-content: flex-end;
+        }
+    }
+
+    &.orchid,
+    &.sleeping-owl {
+        background: #fff;
+    }
+
+    &.moonshine {
+        .moonshine-image {
+            left: 10px;
+        }
+
+        .moonshine-description {
+            .moonshine-description-market {
+                text-decoration: none;
+            }
+        }
+
+        @include media-breakpoint-down(lg) {
+            .moonshine-image {
+                left: -210px;
+            }
+        }
+    }
+
+    &.orchid {
         .orchid-image {
             right: -250px;
         }
@@ -121,13 +158,6 @@
     }
 
     &.idea {
-        background: #fff;
-
-        .container {
-            display: flex;
-            justify-content: flex-end;
-        }
-
         .idea-image {
             left: 10px;
         }
@@ -146,8 +176,6 @@
     }
 
     &.sleeping-owl {
-        background: $color-dark-white;
-
         .sleeping-owl-image {
             right: 10px;
         }

diff --git a/resources/css/ui/_button.scss b/resources/css/ui/_button.scss
@@ -6,7 +6,7 @@ input[type=reset],
     font-family: $font-family;
     border: none;
     outline: none;
-    border-radius: 2px;
+    border-radius: 3px;
     line-height: $ui-height;
     padding: 0 10px;
     display: block;
@@ -16,7 +16,7 @@ input[type=reset],
     text-transform: uppercase;
     text-align: center;
     font-weight: bold;
-    box-shadow: 0 0 0 1px darken($color-main, 20%);
+    box-shadow: 0 0 0 1px darken($color-main, 14%);
 
     &:hover {
         text-decoration: none;
@@ -26,5 +26,22 @@ input[type=reset],
 
     &:active {
         background: darken($color-main, 10%);
+        box-shadow: 0 0 0 1px darken($color-main, 24%);
+    }
+
+    &.button-outer {
+        background: rgba(#fff, 0);
+        color: darken($color-main, 14%);
+
+        &:hover {
+            background: rgba($color-text, .02);
+            color: darken($color-main, 20%);
+            box-shadow: 0 0 0 2px $color-main;
+        }
+
+        &:active {
+            background: rgba(darken($color-main, 10%), .1);
+            box-shadow: 0 0 0 1px darken($color-main, 24%);
+        }
     }
 }
diff --git a/resources/views/page/home.blade.php b/resources/views/page/home.blade.php
@@ -18,6 +18,30 @@
         </div>
     </section>
 
+    <section class="section moonshine">
+        <div class="container">
+            <article class="moonshine-description section-description">
+                <a href="https://moonshine.cutcode.dev" target="_blank" rel="nofollow"
+                   class="moonshine-description-github">
+                    <img src="/images/moonshine/website.png" alt="Moonshine Website" />
+                </a>
+                <h2>Moonshine Admin</h2>
+                <span>
+                    Moonshine &mdash; самостоятельное производство напитка в
+                    нелегальных условиях под покровом ночи :) Так получилось, что
+                    админка и была разработана ночью в свободное время под луной ;)
+                    <br /><br />
+                    Все уже готово для использования в ваших проектах!
+                </span>
+                <a href="https://moonshine.cutcode.dev" target="_blank" rel="nofollow"
+                   class="button button-outer">Вперёд!</a>
+            </article>
+
+            <img class="moonshine-image section-image"
+                 src="/images/moonshine/moonshine.png" alt="Moonshine Admin Panel" />
+        </div>
+    </section>
+
     <section class="section orchid">
         <div class="container">
             <article class="orchid-description section-description">
@@ -32,9 +56,12 @@ class="orchid-description-github">
                     бизнес-приложений, чтобы разработчикам было легко реализовывать
                     красивые и элегантные интерфейсы без особых усилий.
                 </span>
+                <a href="https://orchid.software" target="_blank" rel="nofollow"
+                   class="button button-outer">Вот это да!</a>
             </article>
 
-            <img class="orchid-image section-image" src="/images/orchid/orchid.png?v2" alt="Orchid Admin Panel" />
+            <img class="orchid-image section-image"
+                 src="/images/orchid/orchid.png?v2" alt="Orchid Admin Panel" />
         </div>
     </section>
 
@@ -51,9 +78,12 @@ class="idea-description-market">
                     Прекрасное автозаполнение магии Laravel, навигация по коду, генераторы кода, автокомплит
                     валидаторов и роутов, и многое другое.
                 </span>
+                <a href="https://laravel-idea.com" target="_blank" rel="nofollow"
+                   class="button button-outer">Хочу себе!</a>
             </article>
 
-            <img class="idea-image section-image" src="/images/idea/idea.png" alt="Laravel IDEA Plugin" />
+            <img class="idea-image section-image"
+                 src="/images/idea/idea.png" alt="Laravel IDEA Plugin" />
         </div>
     </section>
 
@@ -70,9 +100,12 @@ class="sleeping-owl-description-github">
                     пятилетнюю историю &mdash; эта система зарекомендовала себя как мощное решение для разработки
                     интерфейса любого уровня.
                 </span>
+                <a href="https://github.com/laravelrus/sleepingowladmin/" target="_blank" rel="nofollow"
+                   class="button button-outer">То что надо!</a>
             </article>
 
-            <img class="sleeping-owl-image section-image" src="/images/sleeping-owl/sleeping-owl.png" alt="SleepingOwl Admin Panel" />
+            <img class="sleeping-owl-image section-image"
+                 src="/images/sleeping-owl/sleeping-owl.png" alt="SleepingOwl Admin Panel" />
         </div>
     </section>
 @endsection