231 lines
3.4 KiB
CSS
231 lines
3.4 KiB
CSS
.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);
|
|
}
|
|
}
|
|
}
|