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

Added new theme: 95.scss

Browse source
This commit is contained in:
Nikurasu 2022-05-04 13:04:24 +02:00
parent 125c93b9ec
commit 1cd2d9903c
7 changed files with 121 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -20,6 +20,7 @@ It's very simple, follow these steps.
- The `design` refers to the style of your page the currently available styles are:
- [main](examples/images/main.png)
- [blurywhite](examples/images/blurywhite.png)
- [98](examples/images/blurywhite.png) (CSS taken from [jdan/95.css](https://github.com/jdan/98.css))
- List as much links as you like in the `links` array:
- With the `color` property you can give the link the color of the social
media plaform of your choice, but this feature is optional, the link will

41
source/_assets/sass/98.scss Normal file
View file

@ -0,0 +1,41 @@
.linkBox{
width: 100%;
}
.alignMiddle {
align-items: center;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
background-color: #008080;
}
.mainContainer {
display: flex;
max-width: 95%;
width: 750px;
flex-direction: column;
align-items: center;
}
.linkBox {
}
.imageBox {
margin-top: 2rem;
margin-bottom: 2rem;
.window-body{
display: flex;
justify-content: center;
}
img {
height: 8rem;
width: 8rem;
object-fit: cover;
}
}

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

@ -6,6 +6,9 @@
<link rel="canonical" href="{{ $page->getUrl() }}">
<meta name="description" content="{{ $page->description }}">
<title>{{ $page->author . " | " . $page->title }}</title>
@if ($page->design == '98')
<link rel="stylesheet" href="https://unpkg.com/98.css" />
@endif
<link rel="stylesheet" href="{{ mix('css/'. $page->design. '.css', 'assets/build') }}">
</head>
<body>

44
source/_partials/98.blade.php Normal file
View file

@ -0,0 +1,44 @@
<!-- _partials/default.blade.php -->
<div class="mainContainer">
<div class="window imageBox">
<div class="title-bar">
<span class="title-bar-text">ImageViewer.exe</span>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Restore"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<img src="{{ 'assets/images/' . $page->imageName }}">
</div>
</div>
<div class="window linkBox">
<div class="title-bar">
<span class="title-bar-text">{{$page->author}}.exe</span>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Restore"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<p>Here you can find all my awesome links:</p>
<div>
<div class="field-row-stacked alignMiddle">
@foreach ($page->links as $link)
@if (isset($link['text']) && isset($link['color']))
<a href="{{$link->link}}" class="{{strtolower($link->color)}}"><button>{{ ucwords($link->text) }}</button></a>
@elseif (!isset($link['text']) && isset($link['color']))
<a href="{{$link->link}}" class="{{strtolower($link->color)}}"><button>{{ ucwords($link->platform) }}</button></a>
@elseif (isset($link['text']) && !isset($link['color']))
<a href="{{$link->link}}"><button>{{ ucwords($link->text) }}</button></a>
@else
<a href="{{$link->link}}"><button>{{ ucwords($link->platform) }}</button></a>
@endif
@endforeach
</div>
</div>
</div>
</div>
</div>

26
source/_partials/default.blade.php Normal file
View file

@ -0,0 +1,26 @@
<!-- _partials/default.blade.php -->
<div class="mainContainer">
<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}}">
{{ strtoupper($link->text) }}
</a>
@else
<a href="{{$link->link}}">
{{ strtoupper($link->platform) }}
</a>
@endif
@endforeach
</div>
</div>

30
source/index.blade.php
View file

@ -1,29 +1,9 @@
@extends('_layouts.main')
@section('body')
<div class="mainContainer">
<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}}">
{{ strtoupper($link->text) }}
</a>
@else
<a href="{{$link->link}}">
{{ strtoupper($link->platform) }}
</a>
@endif
@endforeach
</div>
</div>
@if ($page->design == '98')
@include('_partials/98')
@else
@include('_partials/default')
@endif
@endsection

1
webpack.mix.js
View file

@ -7,6 +7,7 @@ mix.setPublicPath('source/assets/build');
mix.jigsaw()
.sass('source/_assets/sass/main.scss', 'css')
.sass('source/_assets/sass/blurywhite.scss', 'css')
.sass('source/_assets/sass/98.scss', 'css')
.options({
processCssUrls: false,
})