CyberMages/tavernworks
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Client side settings can now be specified.

Browse Source 
Here we use a context provider on the app itself to handle passing the
settings to our library. This way even the layout can use them.
This commit is contained in:
Myrddin Dundragon
2025-09-28 15:12:03 -04:00
parent 6efec6bd22
commit 468b9449b2
6 changed files with 150 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
bard/assets/css/blog.css
View File

@ -40,6 +40,7 @@
.blog_title
{
margin-top: 0px;
color: var(--accent-color);
}
.blog_item
@ -89,16 +90,26 @@
margin-bottom: 20px;
}
.embeded_video
.blog_post_tale
{
margin-top: 50px;
display: flex;
align-content: center;
justify-content: center;
all: initial;
iframe
pre
{
box-shadow: 0 0 80px var(--accent-color);
padding-left: 20px;
}
.embeded_video
{
margin-top: 50px;
display: flex;
align-content: center;
justify-content: center;
iframe
{
box-shadow: 0 0 80px var(--accent-color);
}
}
}
}
@ -144,9 +155,10 @@
legend
{
min-width: 120px;
min-width: 130px;
padding: 0;
margin: 0;
font-weight: bold;
}
.tag_list
@ -155,40 +167,74 @@
flex-direction: column;
}
.toggle_button {
display: inline-block;
margin-top: 5px;
margin-right: 5px;
padding: 0px 6px;
border: 2px solid var(--text-color);
border-radius: 5px;
color: var(--text-color);
cursor: pointer;
user-select: none;
transition: 0.1s ease-in;
}
.toggle_button:hover {
color: var(--accent-color);
border-color: var(--accent-color);
transform: translateY(-2px);
}
.toggle_button input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Checked state using :has() — modern browsers only */
.toggle_button:has(input:checked) {
color: var(--accent-color);
border-color: var(--accent-color);
}
@container site (max-width: 1230px)
{
display: none;
}
}
.tag_list
.tag_list
{
list-style: none;
padding: 0px;
margin: 0px;
.tag_item
{
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 5px;
margin-right: 5px;
.tag_item
a
{
margin-top: 5px;
margin-right: 5px;
display: inline-block;
padding: 0px 4px;
text-decoration: none;
border: 2px solid var(--text-color);
border-radius: 5px;
a
color: var(--text-color);
transition: 0.1s ease-in;
&:hover
{
display: block;
padding: 0px 4px;
text-decoration: none;
border: 2px solid var(--text-color);
border-radius: 5px;
color: var(--text-color);
transition: 0.1s ease-in;
&:hover
{
color: var(--accent-color);
border: 2px solid var(--accent-color);
transform: translateY(-2px);
}
color: var(--accent-color);
border: 2px solid var(--accent-color);
transform: translateY(-2px);
}
}
}
}