Nikurasu/socialtree-jigsaw
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

First Design is ready

Browse source
This commit is contained in:
Nikurasu 2022-04-30 14:30:33 +02:00
parent a79012b378
commit de24810875
9 changed files with 79 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config.php
View file

@ -8,7 +8,7 @@ return [
'design' => 'main', 'design' => 'main',
'description' => 'A simple website to display links to social media accounts', 'description' => 'A simple website to display links to social media accounts',
'collections' => [], 'collections' => [],
'imageName' => 'NikuPB.webp', 'imageName' => 'example.jpg',
'links' => [ 'links' => [
[ [
'color' => 'youtube', 'color' => 'youtube',

0
source/_assets/js/main.js
View file

6
source/_assets/sass/global-colors.sass Normal file
View file

@ -0,0 +1,6 @@
//Some Basic colors
$g_white: #FFFFFF
$g_black: #000000
$g_blue: #0000ff
$g_green: #00ff00
$g_red: #ff0000

54
source/_assets/sass/main.sass
View file

@ -1,18 +1,64 @@
// Colors
@import "global-colors"
$gradient1: #c7a25c
$gradient2: #ff9601
$gradient3: #980d0d
body body
margin: 0 margin: 0
padding: 0 padding: 0
display: flex display: flex
justify-content: center justify-content: center
background-image: linear-gradient(165deg, $gradient1 0%, $gradient2 43%, $gradient3 100%)
min-height: 100vh
font-family: monospace
.mainContainer .mainContainer
margin-top: 3rem margin-top: 3rem
width: 95%
display: flex
flex-direction: column
align-items: center
h1 h1
text-align: center text-align: center
font-family: sans-serif font-weight: 800
font-weight: 400 font-size: 1.5rem
color: $g_white
img img
height: 8rem height: 8rem
width: auto width: 8rem
border-radius: 100% border-radius: 50%
object-fit: cover
.linkBox
display: flex
flex-direction: column
width: 750px
max-width: 90%
align-items: center
a
$height: 3rem
$transitionDuration: 0.25s
margin-top: 0.5rem
margin-bottom: 0.5rem
width: 100%
height: $height
line-height: $height
text-align: center
border-style: solid
border-color: $g_white
border-width: 4px
color: $g_white
text-decoration: none
font-size: 1rem
font-weight: 600
transition: background-color $transitionDuration ease-in-out, color $transitionDuration ease-in-out
&:hover
background-color: $g_white
color: $gradient2
//@TODO Add colors for different Platforms

1
source/_layouts/main.blade.php
View file

@ -7,7 +7,6 @@
<meta name="description" content="{{ $page->description }}"> <meta name="description" content="{{ $page->description }}">
<title>{{ $page->author . " | " . $page->title }}</title> <title>{{ $page->author . " | " . $page->title }}</title>
<link rel="stylesheet" href="{{ mix('css/'. $page->design. '.css', 'assets/build') }}"> <link rel="stylesheet" href="{{ mix('css/'. $page->design. '.css', 'assets/build') }}">
<script defer src="{{ mix('js/main.js', 'assets/build') }}"></script>
</head> </head>
<body> <body>
@yield('body') @yield('body')

BIN
source/assets/images/NikuPB.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

0
source/assets/images/jigsaw.png
View file

44
source/index.blade.php
View file

@ -2,28 +2,28 @@
@section('body') @section('body')
<div class="mainContainer"> <div class="mainContainer">
<img src="{{ 'assets/images/' . $page->imageName }}"> <img src="{{ 'assets/images/' . $page->imageName }}">
<h1 class="">{{ $page->author }}</h1> <h1 class="">{{ $page->author }}</h1>
<div> <div class="linkBox">
@foreach ($page->links as $link) @foreach ($page->links as $link)
@if (isset($link['text']) && isset($link['color'])) @if (isset($link['text']) && isset($link['color']))
<div class="{{strtolower($link->color)}}"> <a href="{{$link->link}}" class="{{strtolower($link->color)}}">
<a href="{{$link->link}}">{{ strtoupper($link->text) }}</a> {{ strtoupper($link->text) }}
</div> </a>
@elseif (!isset($link['text']) && isset($link['color'])) @elseif (!isset($link['text']) && isset($link['color']))
<div class="{{strtolower($link->color)}}"> <a href="{{$link->link}}" class="{{strtolower($link->color)}}">
<a href="{{$link->link}}">{{ strtoupper($link->platform) }}</a> {{ strtoupper($link->platform) }}
</div> </a>
@elseif (isset($link['text']) && !isset($link['color'])) @elseif (isset($link['text']) && !isset($link['color']))
<div class="styledefault"> <a href="{{$link->link}}" class="styledefault">
<a href="{{$link->link}}">{{ strtoupper($link->text) }}</a> {{ strtoupper($link->text) }}
</div> </a>
@else @else
<div class="sytledefault"> <a href="{{$link->link}}" class="sytledefault">
<a href="{{$link->link}}">{{ strtoupper($link->platform) }}</a> {{ strtoupper($link->platform) }}
</div> </a>
@endif @endif
@endforeach @endforeach
</div> </div>
</div> </div>
@endsection @endsection

1
webpack.mix.js
View file

@ -5,7 +5,6 @@ mix.disableSuccessNotifications();
mix.setPublicPath('source/assets/build'); mix.setPublicPath('source/assets/build');
mix.jigsaw() mix.jigsaw()
.js('source/_assets/js/main.js', 'js')
.sass('source/_assets/sass/main.sass', 'css') .sass('source/_assets/sass/main.sass', 'css')
.options({ .options({
processCssUrls: false, processCssUrls: false,