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

Switching to a single stylesheet.

Browse Source 
Also bumped the bard version.
This commit is contained in:
Myrddin Dundragon
2025-09-27 13:29:08 -04:00
parent e7969c8050
commit 3f4440ec2f
8 changed files with 180 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,16 @@
.visually_hidden
{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
white-space: nowrap !important;
}
.blog_style
{
display: flex;
@ -17,3 +30,165 @@
container-type: inline-size;
}
}
.blog_list
{
order: 5;
.blog_title
{
margin-top: 0px;
}
.blog_item
{
margin-bottom: 30px;
h2
{
margin: 0px;
color: var(--accent-color);
}
p
{
margin: 5px 0px 0px 0px;
display: block;
}
}
}
.blog_post
{
order: 5;
h1
{
margin: 0px;
color: var(--accent-color);
}
h4
{
margin-top: 10px;
margin-bottom: 30px;
}
li
{
margin-bottom: 5px;
}
p
{
margin-top: 0px;
margin-bottom: 20px;
}
.embeded_video
{
margin-top: 50px;
display: flex;
align-content: center;
justify-content: center;
iframe
{
box-shadow: 0 0 80px var(--accent-color);
}
}
}
/* Tags will have a class of "tag_{tag_name}" that allows specific
* customization.
*
* .tag_easy
* {
* background-color: #248721;
* }
*
* */
.blog_tag
{
display: flex;
flex-direction: row;
.tag_list
{
display: flex;
flex-direction: row;
}
}
.blog_nav
{
order: 1;
display: flex;
flex-direction: column;
margin-top: 70px;
margin-right: 70px;
fieldset
{
border: none;
padding: 0;
margin: 0;
min-inline-size: unset;
}
legend
{
min-width: 120px;
padding: 0;
margin: 0;
}
.tag_list
{
display: flex;
flex-direction: column;
}
@container site (max-width: 1230px)
{
display: none;
}
}
.tag_list
{
list-style: none;
padding: 0px;
margin: 0px;
.tag_item
{
margin-top: 5px;
margin-right: 5px;
a
{
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);
}
}
}
}

230
bard/assets/css/blog_author.css
View File

@ -1,230 +0,0 @@
.blog_style
{
display: flex;
width: 100%;
height: 100%;
background: var(--bg-color);
padding: 50px 0px;
justify-content: center;
container-name: site;
container-type: inline-size;
.page_content
{
display: flex;
width: 67%;
container-name: page;
container-type: inline-size;
}
}
.blog_nav
{
width: 15%;
padding: 0px 20px;
h3
{
margin-bottom: 10px;
}
ul
{
list-style: none;
li
{
}
}
@container site (max-width: 1230px)
{
display: none;
}
.social
{
/* Hide .social until the font is loaded */
display: flex;
align-items: center;
gap: 15px;
margin: 25px 0;
font-family: cm_social;
a
{
color: var(--text-color);
font-size: 46px;
text-decoration: none;
background: transparent;
width: 65px;
height: 65px;
border-radius: 50%;
display: flex;
align-items: flex-end;
justify-content: center;
transition: 0.4s ease;
border: 4px solid var(--text-color);
&:hover
{
color: var(--accent-color);
border: 4px solid var(--accent-color);
transform: translateY(-7px);
}
}
}
}
}
.blog_item_area
{
.blog_list
{
list-style: none;
.blog_item
{
margin-bottom: 50px;
h1
{
color: var(--accent-color);
}
h4
{
margin: 10px 0px;
}
p
{
display: block;
}
}
}
}
.blog_article
{
h1
{
color: var(--accent-color);
}
h4
{
margin-top: 10px;
margin-bottom: 30px;
}
p
{
margin-bottom: 20px;
}
.embeded_video
{
margin-top: 50px;
display: flex;
align-content: center;
justify-content: center;
iframe
{
box-shadow: 0 0 80px var(--accent-color);
}
}
}
.tag_style
{
display: block;
.tag_list
{
list-style: none;
.tag_item
{
display: inline-block;
margin: 5px 5px 0px 0px;
a
{
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);
}
}
}
}
}
.easy
{
background-color: #248721;
}
.medium
{
background-color: #d6a318;
}
.hard
{
background-color: #d92121;
}
.social
{
background: transparent;
font-family: cm_social;
margin: 15px 0px;
a
{
color: var(--text-color);
font-size: 30px;
text-decoration: none;
background: transparent;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: flex-end;
justify-content: center;
transition: 0.4s ease;
border: 4px solid var(--text-color);
&:hover
{
color: var(--accent-color);
border: 4px solid var(--accent-color);
transform: translateY(-7px);
}
}
}

27
bard/assets/css/blog_list.css
View File

@ -1,27 +0,0 @@
.blog_list_style
{
.blog_list
{
list-style: none;
.blog_item
{
margin-bottom: 50px;
h1
{
color: var(--accent-color);
}
h4
{
margin: 10px 0px;
}
p
{
display: block;
}
}
}
}

117
bard/assets/css/blog_nav.css
View File

@ -1,117 +0,0 @@
.blog_style
{
display: flex;
width: 100%;
height: 100%;
background: var(--bg-color);
padding: 50px 0px;
justify-content: center;
container-name: site;
container-type: inline-size;
.page_content
{
display: flex;
width: 67%;
container-name: page;
container-type: inline-size;
}
}
.blog_nav_style
{
width: 15%;
padding: 0px 20px;
order: 5;
h3
{
margin-bottom: 10px;
}
ul
{
list-style: none;
li
{
}
}
@container site (max-width: 1230px)
{
display: none;
}
.social
{
/* Hide .social until the font is loaded */
display: flex;
align-items: center;
gap: 15px;
margin: 25px 0;
font-family: cm_social;
a
{
color: var(--text-color);
font-size: 22px;
text-decoration: none;
background: transparent;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: flex-end;
justify-content: center;
transition: 0.4s ease;
border: 4px solid var(--text-color);
&:hover
{
color: var(--accent-color);
border: 4px solid var(--accent-color);
transform: translateY(-7px);
}
}
}
.tag_style
{
display: block;
.tag_list
{
display: inline-flex;
flex-direction: column;
list-style: none;
.tag_item
{
display: inline-block;
margin: 5px 5px 0px 0px;
a
{
display: inline-flex;
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);
}
}
}
}
}
}

119
bard/assets/css/blog_post.css
View File

@ -1,119 +0,0 @@
.blog_post_style
{
order: 1;
h1
{
color: var(--accent-color);
}
h4
{
margin-top: 10px;
margin-bottom: 30px;
}
p
{
margin-bottom: 20px;
}
.embeded_video
{
margin-top: 50px;
display: flex;
align-content: center;
justify-content: center;
iframe
{
box-shadow: 0 0 80px var(--accent-color);
}
}
}
.tag_style
{
display: block;
.tag_list
{
list-style: none;
.tag_item
{
display: inline-block;
margin: 5px 5px 0px 0px;
a
{
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);
}
}
}
}
}
.easy
{
background-color: #248721;
}
.medium
{
background-color: #d6a318;
}
.hard
{
background-color: #d92121;
}
.social
{
background: transparent;
font-family: cm_social;
margin: 15px 0px;
a
{
color: var(--text-color);
font-size: 30px;
text-decoration: none;
background: transparent;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: flex-end;
justify-content: center;
transition: 0.4s ease;
border: 4px solid var(--text-color);
&:hover
{
color: var(--accent-color);
border: 4px solid var(--accent-color);
transform: translateY(-7px);
}
}
}

54
bard/assets/css/blog_tag.css
View File

@ -1,54 +0,0 @@
.blog_tag_style
{
display: block;
.tag_list
{
list-style: none;
.tag_item
{
display: inline-block;
margin: 5px 5px 0px 0px;
a
{
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);
}
}
}
}
.none
{
background-color: var(--bg-color);
}
.easy
{
background-color: #248721;
}
.medium
{
background-color: #d6a318;
}
.hard
{
background-color: #d92121;
}
}