тут будет оформление вскоре, возможно даже красивое
просто нужно место, куда буду какать картиночками из собственных генераций и прочей графикоймама я художнег (нет)
пляжный вайб
Отредактировано Айрис Мориарти (2024-06-12 05:17:58)
загашник с какулями
Страница: 1
Сообщений 1 страница 6 из 6
Поделиться12024-04-01 10:48:36
- фиксик
- личное звание: Айрис Мориарти
Человек, разработчик в Умбра; в сети известна как нетраннер «Белый Кролик», по совместительству инженер. - Уважение: +158
- Игровые посты: 62 446,1/0 07.24,3/13
- кристаллы: 1270
Поделиться22024-04-07 19:05:23
- фиксик
- личное звание: Айрис Мориарти
Человек, разработчик в Умбра; в сети известна как нетраннер «Белый Кролик», по совместительству инженер. - Уважение: +158
- Игровые посты: 62 446,1/0 07.24,3/13
- кристаллы: 1270
#cлучайные генерации, #эльф, #человек, #белые волосы
Микрободборка. Использовать можно, я не жадная.
тык
P.S: Если нужны генерации — обращаться в ЛС.
Поделиться32024-04-10 03:01:42
- фиксик
- личное звание: Айрис Мориарти
Человек, разработчик в Умбра; в сети известна как нетраннер «Белый Кролик», по совместительству инженер. - Уважение: +158
- Игровые посты: 62 446,1/0 07.24,3/13
- кристаллы: 1270
@Силур "Скорч" Рейт твой жопобородый дроу :3
фуллсайз
Отредактировано Айрис Мориарти (2024-04-10 03:02:35)
Поделиться42024-04-14 04:30:19
- фиксик
- личное звание: Айрис Мориарти
Человек, разработчик в Умбра; в сети известна как нетраннер «Белый Кролик», по совместительству инженер. - Уважение: +158
- Игровые посты: 62 446,1/0 07.24,3/13
- кристаллы: 1270
Пак (40шт) маско-аватарок для @Пустой
тык
Отредактировано Айрис Мориарти (2024-04-14 04:30:47)
Поделиться52024-06-04 19:03:31
- фиксик
- личное звание: Айрис Мориарти
Человек, разработчик в Умбра; в сети известна как нетраннер «Белый Кролик», по совместительству инженер. - Уважение: +158
- Игровые посты: 62 446,1/0 07.24,3/13
- кристаллы: 1270
Код брать можно, стилизовать тоже можно на свое усмотрение.
[html]
<div class="chrono_section">
<form>
<p>фильтр по хронологии:</p>
<label>
<input type="checkbox" name="active" checked />
активные
</label>
<label>
<input type="checkbox" name="end" checked />
законченные
</label>
<label>
<input type="checkbox" name="closed" checked />
закрытые
</label>
</form>
<article><p class="categories" data-category="active"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="active"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="active"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="end"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="end"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="end"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="closed"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="closed"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="closed"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
</div>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>/*
* использовать :has() для фильтров
* checkboxes. No JS
*/
.chrono_section:has([name="active"]:checked) article:has([data-category="active"]) {display: block;}
.chrono_section:has([name="end"]:checked) article:has([data-category="end"]) {display: block;}
.chrono_section:has([name="closed"]:checked)
article:has([data-category="closed"]) {
display: block;
}
article {}
article img {background: #491d15;}
article .categories {background: #491d15;}
/**/
.chrono_section {
text-align: left;
float: left;
display: grid;
gap: 3rem;
padding: 20px;
max-width: 690px;
width: 100%;
grid-template-columns: repeat(3, min(200px, 33% - 1.5rem));
place-content: start center;
margin: 0 auto !important;
background: linear-gradient(to right, rgba(13, 12, 14, 0.5) 1%, rgba(13, 12, 14, 0.5) 25%, rgba(13, 12, 14, 0) 50%, rgba(13, 12, 14, 0.5) 79%, rgba(13, 12, 14, 0.5) 98%), #221c27 url(https://forumstatic.ru/files/001b/8e/b8/23912.jpg) repeat fixed top left;}
form {
align-items: baseline;
background: #1a1921;
border: 1px solid #ddbf86;
border-radius: 0.25rem;
color: #e5debc;
display: inline-table;
text-align: center;
gap: 1rem;
grid-column: 1 / span 3;
margin-block-end: 1rem;
justify-content: center;
padding: 1rem;
font-family: lol;
& p {
color: #9a8b60;
font: 300 2.2em lol !important;
margin: 0px !important;
padding: 0px !important;
text-transform: uppercase;
}
}
label,
input {
color: #9a8b60;
font: 300 1.3em lol;
text-transform: uppercase;
line-height: 1;
margin: 0;
padding: 0;
}
input {
block-size: 1rem;
inline-size: 1rem;
position: relative;
inset-block-start: 0.125rem;
}
article {
container-type: inline-size;
display: none;
margin: 0;
& img {
aspect-ratio: 4 / 2;
display: block;
inline-size: 100%;
border-radius: 0.25rem;
object-fit: cover;
border: 1px solid #2f2933 !important;
box-shadow: 0 0 0 2px #978660 inset, 0 0 0 2px #e2cf74 inset, 0 0 0 3px #c19f6b inset, 0 0 8px 0 rgba(199,169,60,.55);
}
& h2 {
color: #9a8b60;
font: 300 1em lol !important;
margin: 0px !important;
padding: 0px !important;
padding-bottom: 5px !important;
text-transform: uppercase;
letter-spacing: 0.1em;
}
& .categories {
border-radius: 0.25rem;
display: inline-block;
font-size: 0.8em !important;
letter-spacing: 0.15em;
line-height: 1 !important;
margin: 0 !important;
padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
font-variant: small-caps;
}
& .categories::after {
content: attr(data-category);
}
}
</style>
[/html]
Код:
[html]
<div class="chrono_section">
<form>
<p>фильтр по хронологии:</p>
<label>
<input type="checkbox" name="active" checked />
активные
</label>
<label>
<input type="checkbox" name="end" checked />
законченные
</label>
<label>
<input type="checkbox" name="closed" checked />
закрытые
</label>
</form>
<article><p class="categories" data-category="active"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="active"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="active"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="end"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="end"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="end"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="closed"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="closed"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
<article><p class="categories" data-category="closed"></p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>[дата] название эпизода</h2></a>
</article>
</div>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>/*
* использовать :has() для фильтров
* checkboxes. No JS
*/
.chrono_section:has([name="active"]:checked) article:has([data-category="active"]) {display: block;}
.chrono_section:has([name="end"]:checked) article:has([data-category="end"]) {display: block;}
.chrono_section:has([name="closed"]:checked)
article:has([data-category="closed"]) {
display: block;
}
article {}
article img {background: #491d15;}
article .categories {background: #491d15;}
/**/
.chrono_section {
text-align: left;
float: left;
display: grid;
gap: 3rem;
padding: 20px;
max-width: 690px;
width: 100%;
grid-template-columns: repeat(3, min(200px, 33% - 1.5rem));
place-content: start center;
margin: 0 auto !important;
background: linear-gradient(to right, rgba(13, 12, 14, 0.5) 1%, rgba(13, 12, 14, 0.5) 25%, rgba(13, 12, 14, 0) 50%, rgba(13, 12, 14, 0.5) 79%, rgba(13, 12, 14, 0.5) 98%), #221c27 url(https://forumstatic.ru/files/001b/8e/b8/23912.jpg) repeat fixed top left;}
form {
align-items: baseline;
background: #1a1921;
border: 1px solid #ddbf86;
border-radius: 0.25rem;
color: #e5debc;
display: inline-table;
text-align: center;
gap: 1rem;
grid-column: 1 / span 3;
margin-block-end: 1rem;
justify-content: center;
padding: 1rem;
font-family: lol;
& p {
color: #9a8b60;
font: 300 2.2em lol !important;
margin: 0px !important;
padding: 0px !important;
text-transform: uppercase;
}
}
label,
input {
color: #9a8b60;
font: 300 1.3em lol;
text-transform: uppercase;
line-height: 1;
margin: 0;
padding: 0;
}
input {
block-size: 1rem;
inline-size: 1rem;
position: relative;
inset-block-start: 0.125rem;
}
article {
container-type: inline-size;
display: none;
margin: 0;
& img {
aspect-ratio: 4 / 2;
display: block;
inline-size: 100%;
border-radius: 0.25rem;
object-fit: cover;
border: 1px solid #2f2933 !important;
box-shadow: 0 0 0 2px #978660 inset, 0 0 0 2px #e2cf74 inset, 0 0 0 3px #c19f6b inset, 0 0 8px 0 rgba(199,169,60,.55);
}
& h2 {
color: #9a8b60;
font: 300 1em lol !important;
margin: 0px !important;
padding: 0px !important;
padding-bottom: 5px !important;
text-transform: uppercase;
letter-spacing: 0.1em;
}
& .categories {
border-radius: 0.25rem;
display: inline-block;
font-size: 0.8em !important;
letter-spacing: 0.15em;
line-height: 1 !important;
margin: 0 !important;
padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
font-variant: small-caps;
}
& .categories::after {
content: attr(data-category);
}
}
</style>
[/html]
Поделиться62024-06-05 14:23:46
- фиксик
- личное звание: Айрис Мориарти
Человек, разработчик в Умбра; в сети известна как нетраннер «Белый Кролик», по совместительству инженер. - Уважение: +158
- Игровые посты: 62 446,1/0 07.24,3/13
- кристаллы: 1270
Второй вариант личной хронологии игры
[html]
<div class="chrono_section">
<form>
<p>фильтр по хронологии:</p>
<label>
<input type="checkbox" name="active" checked />
активные
</label>
<label>
<input type="checkbox" name="end" checked />
законченные
</label>
<label>
<input type="checkbox" name="closed" checked />
закрытые
</label>
</form>
<article><p class="categories" data-category="active"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="active"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="active"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="closed"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="closed"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="closed"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="end"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="end"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="end"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
</div>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>/*
* использовать :has() для фильтров
* checkboxes. No JS
*/
.chrono_section:has([name="active"]:checked) article:has([data-category="active"]) {display: block;}
.chrono_section:has([name="end"]:checked) article:has([data-category="end"]) {display: block;}
.chrono_section:has([name="closed"]:checked)
article:has([data-category="closed"]) {
display: block;
}
article {}
article img {background: #491d15;}
article .categories {background: #491d15;}
/**/
.chrono_section {
text-align: left;
float: left;
display: grid;
gap: 3rem;
padding: 20px;
max-width: 690px;
width: 100%;
grid-template-columns: repeat(3, min(200px, 33% - 1.5rem));
place-content: start center;
margin: 0 auto !important;
background: linear-gradient(to right, rgba(13, 12, 14, 0.5) 1%, rgba(13, 12, 14, 0.5) 25%, rgba(13, 12, 14, 0) 50%, rgba(13, 12, 14, 0.5) 79%, rgba(13, 12, 14, 0.5) 98%), #221c27 url(https://forumstatic.ru/files/001b/8e/b8/23912.jpg) repeat fixed top left;}
form {
align-items: baseline;
background: #1a1921;
border: 1px solid #ddbf86;
border-radius: 0.25rem;
color: #e5debc;
display: inline-table;
text-align: center;
gap: 1rem;
grid-column: 1 / span 3;
margin-block-end: 1rem;
justify-content: center;
padding: 1rem;
font-family: lol;
& p {
color: #9a8b60;
font: 300 2.2em lol !important;
margin: 0px !important;
padding: 0px !important;
text-transform: uppercase;
}
}
label,
input {
color: #9a8b60;
font: 300 1.3em lol;
text-transform: uppercase;
line-height: 1;
margin: 0;
padding: 0;
}
input {
block-size: 1rem;
inline-size: 1rem;
position: relative;
inset-block-start: 0.125rem;
}
article {
container-type: inline-size;
display: none;
margin: 0;
& img {
aspect-ratio: 4 / 2;
display: block;
inline-size: 100%;
border-radius: 0.25rem;
object-fit: cover;
border: 1px solid #2f2933 !important;
box-shadow: 0 0 0 2px #978660 inset, 0 0 0 2px #e2cf74 inset, 0 0 0 3px #c19f6b inset, 0 0 8px 0 rgba(199,169,60,.55);
}
& h2 {
position: relative;
background: #19171bcf;
color: #9a8b60;
font: 300 1em lol !important;
margin-left: 1px !important;
margin-right: -1px !important;
padding: 5px !important;
padding-bottom: 5px !important;
text-transform: uppercase;
letter-spacing: 0.1em;
top: -65px;
text-align: center;
}
& .categories {
border-radius: 0.25rem;
display: inline-block;
font-size: 0.8em !important;
letter-spacing: 0.15em;
line-height: 1 !important;
margin: 0 !important;
padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
font-variant: small-caps;
}
& .categories::after {
content: attr(data-category);
}
}
article .qe, article .lok{ background: #312f3f;
border-radius: 0.25rem;
display: inline-block;
font-size: 0.8em !important;
letter-spacing: 0.15em;
line-height: 1 !important;
padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
font-variant: small-caps;
margin: 1px !important;}
article .dat { background: #312f3f;
border-radius: 0.25rem;
display: inline-block;
font-size: 0.75em !important;
letter-spacing: 0.15em;
line-height: 1 !important;
padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
font-variant: small-caps;
margin: 1px !important;}
</style>
[/html]
Код:
[html]
<div class="chrono_section">
<form>
<p>фильтр по хронологии:</p>
<label>
<input type="checkbox" name="active" checked />
активные
</label>
<label>
<input type="checkbox" name="end" checked />
законченные
</label>
<label>
<input type="checkbox" name="closed" checked />
закрытые
</label>
</form>
<article><p class="categories" data-category="active"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="active"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="active"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="closed"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="closed"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="closed"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="end"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="end"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
<article><p class="categories" data-category="end"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
<a href="#">
<img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
<h2>название эпизода или квеста</h2></a>
</article>
</div>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>/*
* использовать :has() для фильтров
* checkboxes. No JS
*/
.chrono_section:has([name="active"]:checked) article:has([data-category="active"]) {display: block;}
.chrono_section:has([name="end"]:checked) article:has([data-category="end"]) {display: block;}
.chrono_section:has([name="closed"]:checked)
article:has([data-category="closed"]) {
display: block;
}
article {}
article img {background: #491d15;}
article .categories {background: #491d15;}
/**/
.chrono_section {
text-align: left;
float: left;
display: grid;
gap: 3rem;
padding: 20px;
max-width: 690px;
width: 100%;
grid-template-columns: repeat(3, min(200px, 33% - 1.5rem));
place-content: start center;
margin: 0 auto !important;
background: linear-gradient(to right, rgba(13, 12, 14, 0.5) 1%, rgba(13, 12, 14, 0.5) 25%, rgba(13, 12, 14, 0) 50%, rgba(13, 12, 14, 0.5) 79%, rgba(13, 12, 14, 0.5) 98%), #221c27 url(https://forumstatic.ru/files/001b/8e/b8/23912.jpg) repeat fixed top left;}
form {
align-items: baseline;
background: #1a1921;
border: 1px solid #ddbf86;
border-radius: 0.25rem;
color: #e5debc;
display: inline-table;
text-align: center;
gap: 1rem;
grid-column: 1 / span 3;
margin-block-end: 1rem;
justify-content: center;
padding: 1rem;
font-family: lol;
& p {
color: #9a8b60;
font: 300 2.2em lol !important;
margin: 0px !important;
padding: 0px !important;
text-transform: uppercase;
}
}
label,
input {
color: #9a8b60;
font: 300 1.3em lol;
text-transform: uppercase;
line-height: 1;
margin: 0;
padding: 0;
}
input {
block-size: 1rem;
inline-size: 1rem;
position: relative;
inset-block-start: 0.125rem;
}
article {
container-type: inline-size;
display: none;
margin: 0;
& img {
aspect-ratio: 4 / 2;
display: block;
inline-size: 100%;
border-radius: 0.25rem;
object-fit: cover;
border: 1px solid #2f2933 !important;
box-shadow: 0 0 0 2px #978660 inset, 0 0 0 2px #e2cf74 inset, 0 0 0 3px #c19f6b inset, 0 0 8px 0 rgba(199,169,60,.55);
}
& h2 {
position: relative;
background: #19171bcf;
color: #9a8b60;
font: 300 1em lol !important;
margin-left: 1px !important;
margin-right: -1px !important;
padding: 5px !important;
padding-bottom: 5px !important;
text-transform: uppercase;
letter-spacing: 0.1em;
top: -65px;
text-align: center;
}
& .categories {
border-radius: 0.25rem;
display: inline-block;
font-size: 0.8em !important;
letter-spacing: 0.15em;
line-height: 1 !important;
margin: 0 !important;
padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
font-variant: small-caps;
}
& .categories::after {
content: attr(data-category);
}
}
article .qe, article .lok{ background: #312f3f;
border-radius: 0.25rem;
display: inline-block;
font-size: 0.8em !important;
letter-spacing: 0.15em;
line-height: 1 !important;
padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
font-variant: small-caps;
margin: 1px !important;}
article .dat { background: #312f3f;
border-radius: 0.25rem;
display: inline-block;
font-size: 0.75em !important;
letter-spacing: 0.15em;
line-height: 1 !important;
padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
font-variant: small-caps;
margin: 1px !important;}
</style>
[/html]Страница: 1
