Removed the color property, the platform property is now used for the link coloring

This commit is contained in:
nikurasu 2022-07-24 17:00:45 +02:00
parent fc8713255d
commit dc9ebdba91
4 changed files with 11 additions and 30 deletions

View file

@ -22,18 +22,17 @@ It's very simple, follow these steps.
- [blurywhite](examples/images/blurywhite.png)
- [98](examples/images/98.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
- With the `platform` property you can give the link the color of the social
media plaform of your choice, but this feature is optional, the link will
be displayed in the themes color if unset. The currently supported platforms
are:
be displayed in the themes color if unset. This is currently only supported by themes which dont look ugly with that:
- blurywhite
The currently supported platforms are:
- YouTube, Pinterest, Twitter, TikTok, Telegram, Linkedin, Mastodon, Tumblr,
Discord, Twitch, Instagram, Flickr, Deviantart, Spotify, Snapchat, Reddit,
Soundcloud, VK, Steam
- You can give the link a different text if you want with the `text` property. It displays the platform set in the `platform` property normaly, but with that propery you can overwrite that.
- If you don't want a platform color for a theme wich supports it. simply unset the `platform` property, but then you have to set the `text` property to get the link displayed.
- Place the link in the `link` property, this property is needed.
- You can give the link a different text if you want with the `text` property.
This is also optional.
- Set the platform in the `platform` property, this will be displayed if the
`name` is unset.
5. Compile the page with the command: `npm run prod`
6. Copy the `build_production` directory to your webserver.

View file

@ -88,11 +88,7 @@ body::before{
@each $name, $color in $brandcolors {
.#{$name} {
border-color: $color;
color: $color;
&:hover {
background-color: $color;
}
}
}
}

View file

@ -67,14 +67,4 @@ body {
color: $gradient2;
}
}
@each $name, $color in $brandcolors {
.#{$name} {
border-color: $color;
color: $color;
&:hover {
background-color: $color;
}
}
}
}

View file

@ -4,21 +4,17 @@
<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)}}">
@if (isset($link['text']) && isset($link['platform']))
<a href="{{$link->link}}" class="{{strtolower($link->platform)}}">
{{ strtoupper($link->text) }}
</a>
@elseif (!isset($link['text']) && isset($link['color']))
<a href="{{$link->link}}" class="{{strtolower($link->color)}}">
@elseif (!isset($link['text']) && isset($link['platform']))
<a href="{{$link->link}}" class="{{strtolower($link->platform)}}">
{{ 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) }}
{{ strtoupper($link->text) }}
</a>
@endif
@endforeach