First Design is ready
This commit is contained in:
Nikurasu
parent
a79012b378
commit
de24810875
9 changed files with 79 additions and 29 deletions
|
|
@ -8,7 +8,7 @@ return [
|
|||
'design' => 'main',
|
||||
'description' => 'A simple website to display links to social media accounts',
|
||||
'collections' => [],
|
||||
'imageName' => 'NikuPB.webp',
|
||||
'imageName' => 'example.jpg',
|
||||
'links' => [
|
||||
[
|
||||
'color' => 'youtube',
|
||||
|
|
|
|||
6
source/_assets/sass/global-colors.sass
Normal file
6
source/_assets/sass/global-colors.sass
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
//Some Basic colors
|
||||
$g_white: #FFFFFF
|
||||
$g_black: #000000
|
||||
$g_blue: #0000ff
|
||||
$g_green: #00ff00
|
||||
$g_red: #ff0000
|
||||
|
|
@ -1,18 +1,64 @@
|
|||
// Colors
|
||||
@import "global-colors"
|
||||
$gradient1: #c7a25c
|
||||
$gradient2: #ff9601
|
||||
$gradient3: #980d0d
|
||||
|
||||
body
|
||||
margin: 0
|
||||
padding: 0
|
||||
display: flex
|
||||
justify-content: center
|
||||
background-image: linear-gradient(165deg, $gradient1 0%, $gradient2 43%, $gradient3 100%)
|
||||
min-height: 100vh
|
||||
font-family: monospace
|
||||
|
||||
.mainContainer
|
||||
margin-top: 3rem
|
||||
width: 95%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
|
||||
h1
|
||||
text-align: center
|
||||
font-family: sans-serif
|
||||
font-weight: 400
|
||||
font-weight: 800
|
||||
font-size: 1.5rem
|
||||
color: $g_white
|
||||
|
||||
img
|
||||
height: 8rem
|
||||
width: auto
|
||||
border-radius: 100%
|
||||
width: 8rem
|
||||
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
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<meta name="description" content="{{ $page->description }}">
|
||||
<title>{{ $page->author . " | " . $page->title }}</title>
|
||||
<link rel="stylesheet" href="{{ mix('css/'. $page->design. '.css', 'assets/build') }}">
|
||||
<script defer src="{{ mix('js/main.js', 'assets/build') }}"></script>
|
||||
</head>
|
||||
<body>
|
||||
@yield('body')
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
|
|
@ -2,28 +2,28 @@
|
|||
|
||||
@section('body')
|
||||
<div class="mainContainer">
|
||||
<img src="{{ 'assets/images/' . $page->imageName }}">
|
||||
<h1 class="">{{ $page->author }}</h1>
|
||||
<div>
|
||||
@foreach ($page->links as $link)
|
||||
@if (isset($link['text']) && isset($link['color']))
|
||||
<div class="{{strtolower($link->color)}}">
|
||||
<a href="{{$link->link}}">{{ strtoupper($link->text) }}</a>
|
||||
</div>
|
||||
@elseif (!isset($link['text']) && isset($link['color']))
|
||||
<div class="{{strtolower($link->color)}}">
|
||||
<a href="{{$link->link}}">{{ strtoupper($link->platform) }}</a>
|
||||
</div>
|
||||
@elseif (isset($link['text']) && !isset($link['color']))
|
||||
<div class="styledefault">
|
||||
<a href="{{$link->link}}">{{ strtoupper($link->text) }}</a>
|
||||
</div>
|
||||
@else
|
||||
<div class="sytledefault">
|
||||
<a href="{{$link->link}}">{{ strtoupper($link->platform) }}</a>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
<img src="{{ 'assets/images/' . $page->imageName }}">
|
||||
<h1 class="">{{ $page->author }}</h1>
|
||||
<div class="linkBox">
|
||||
@foreach ($page->links as $link)
|
||||
@if (isset($link['text']) && isset($link['color']))
|
||||
<a href="{{$link->link}}" class="{{strtolower($link->color)}}">
|
||||
{{ strtoupper($link->text) }}
|
||||
</a>
|
||||
@elseif (!isset($link['text']) && isset($link['color']))
|
||||
<a href="{{$link->link}}" class="{{strtolower($link->color)}}">
|
||||
{{ strtoupper($link->platform) }}
|
||||
</a>
|
||||
@elseif (isset($link['text']) && !isset($link['color']))
|
||||
<a href="{{$link->link}}" class="styledefault">
|
||||
{{ strtoupper($link->text) }}
|
||||
</a>
|
||||
@else
|
||||
<a href="{{$link->link}}" class="sytledefault">
|
||||
{{ strtoupper($link->platform) }}
|
||||
</a>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ mix.disableSuccessNotifications();
|
|||
mix.setPublicPath('source/assets/build');
|
||||
|
||||
mix.jigsaw()
|
||||
.js('source/_assets/js/main.js', 'js')
|
||||
.sass('source/_assets/sass/main.sass', 'css')
|
||||
.options({
|
||||
processCssUrls: false,
|
||||
|
|
|
|||
Reference in a new issue