242 lines
3.6 KiB
CSS
242 lines
3.6 KiB
CSS
.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;
|
|
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_list
|
|
{
|
|
order: 5;
|
|
|
|
.blog_title
|
|
{
|
|
margin-top: 0px;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.blog_post_tale
|
|
{
|
|
pre
|
|
{
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 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;
|
|
position:sticky;
|
|
top: 150px;
|
|
height: 50vh;
|
|
|
|
fieldset
|
|
{
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
min-inline-size: unset;
|
|
}
|
|
|
|
legend
|
|
{
|
|
min-width: 130px;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tag_list
|
|
{
|
|
display: flex;
|
|
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
|
|
{
|
|
list-style: none;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
|
|
.tag_item
|
|
{
|
|
margin-top: 5px;
|
|
margin-right: 5px;
|
|
|
|
a
|
|
{
|
|
display: inline-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);
|
|
}
|
|
}
|
|
}
|
|
}
|