GuerillaStudio/vanillalist
GuerillaStudio/vanillalist
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/vanillalist.git synced 2024-12-21 08:31:55 +00:00
Code Issues Activity

Website: Add a banner for the announcement about the project's state

Browse source
This commit is contained in:
Tixie Salander 2024-10-09 07:05:11 +02:00
parent 8b1f547656
commit 73e09e19be
No known key found for this signature in database
6 changed files with 53 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/_includes/ico-info.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V15"/>
<circle cx="12" cy="9" r="1" fill="currentColor"/>
<circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 375 B

5
src/_includes/layouts/base.njk
View file

@ -20,6 +20,9 @@
<body> <body>
<header class="header"> <header class="header">
<div class="container"> <div class="container">
{# Announcements #}
<div class="notif notif--info notif--small txtcenter inline-block mb1">{% include 'ico-info.svg' %}<time datetime="2024-10-09">09/10/2024</time>: An update about the state of the project <a href="https://github.com/GuerillaStudio/vanillalist/discussions/49" target="_blank">have been published</a></div>
{# Logo #}
<a class="header__homeLink" href="{{ '/' | absoluteUrl(site.baseUrl) }}"> <a class="header__homeLink" href="{{ '/' | absoluteUrl(site.baseUrl) }}">
<div class="header__picto">{% include 'picto.svg' %}</div> <div class="header__picto">{% include 'picto.svg' %}</div>
{% if page.fileSlug === '' %} {% if page.fileSlug === '' %}
@ -32,7 +35,7 @@
<h1 class="visually-hidden">{{ title }}</h1> <h1 class="visually-hidden">{{ title }}</h1>
{% endif %} {% endif %}
<p class="header__slogan">Because lighter plugins mean lighter sites</p> <p class="header__slogan">Because lighter plugins mean lighter sites</p>
{# Search #}
<form class="header__search" action="/search" method="GET" data-search="form"> <form class="header__search" action="/search" method="GET" data-search="form">
<label class="visually-hidden" for="search_input">Search plugins</label> <label class="visually-hidden" for="search_input">Search plugins</label>
<input type="search" id="search_input" name="s" placeholder="slider, animation, etc…" data-search="input"> <input type="search" id="search_input" name="s" placeholder="slider, animation, etc…" data-search="input">

8
src/sass/2-helpers/_alignment.scss
View file

@ -1,8 +1,14 @@
// ----------------------------------------------------------- // -----------------------------------------------------------
// == alignment // == alignment
// -----------------------------------------------------------// block // -----------------------------------------------------------
// block
// -------------------------------------------------------------- // --------------------------------------------------------------
.inline-block {
display: inline-block;
}
.left { .left {
float: left; float: left;
} }

36
src/sass/3-components/_notifications.scss
View file

@ -7,8 +7,40 @@ $notif-warning: #ffdd57;
$notif-error: #ff3860; $notif-error: #ff3860;
.notif { .notif {
padding: 1em; padding: .6em 1em;
border-radius: 4px; border-radius: .3em;
}
.notif a,
.notif a:is(:visited,:hover,:active,:focus) {
color: currentcolor;
cursor: pointer;
}
.notif svg {
width: 1.5em;
width: 2cap;
height: 1.5em;
height: 2cap;
vertical-align: -.35em;
}
.notif a[href*="//"]::after {
font-size: .9em;
font-family: system-ui, -apple-system, sans-serif;
vertical-align: 6%;
content: "↗";
content: "↗" / "";
}
.notif--small {
font-size: .85em;
}
.notif--info {
color: darken($color-info, 20);
background-color: lighten($color-info, 42);
border: .1rem solid lighten($color-info, 20);
} }
.notif--success { .notif--success {

2
src/sass/4-base/_06-header.scss
View file

@ -43,5 +43,5 @@
// -------------------------------------------------------------- // --------------------------------------------------------------
.header__search { .header__search {
margin-top: 6rem; margin-top: 4rem;
} }

3
src/sass/style.scss
View file

@ -39,7 +39,7 @@
@import "3-components/_pagination"; @import "3-components/_pagination";
// @import '3-components/_tables'; // @import '3-components/_tables';
// @import '3-components/_tooltips'; // @import '3-components/_tooltips';
// @import '3-components/_notifications'; @import "3-components/_notifications";
// -------------------------------------------------------------- // --------------------------------------------------------------
// == base */ // == base */
@ -86,4 +86,5 @@
// @import '8-rwd/_rwd-medium'; // @import '8-rwd/_rwd-medium';
// @import '8-rwd/_rwd-small'; // @import '8-rwd/_rwd-small';
@import "8-rwd/_rwd-xsmall"; @import "8-rwd/_rwd-xsmall";
// @import '8-rwd/_rwd'; // @import '8-rwd/_rwd';