238 lines
3.8 KiB
CSS
238 lines
3.8 KiB
CSS
#blog {
|
|
margin-top: 2svh;
|
|
min-height: 80svh;
|
|
}
|
|
|
|
#blog_info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#blog_info p {
|
|
padding: 2svh 0svw;
|
|
margin: 0px;
|
|
}
|
|
|
|
#blog_info h1 {
|
|
padding: 1svh 1svw;
|
|
margin: 2svh 0svw;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
#blog_info div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 1svh 0svw;
|
|
border-bottom: var(--underlineTitle);
|
|
border-radius: var(--underlineTitleBorderRadius);
|
|
}
|
|
|
|
#blog_info div p {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
#blog_info div div {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
border: none;
|
|
}
|
|
#blog_info div p:last-child {
|
|
margin-right: 10svh;
|
|
}
|
|
#blog_info div div p {
|
|
background-color: rgba(128, 0, 128, 0.2);
|
|
border-radius: 1rem;
|
|
padding: 0.25svh 8px;
|
|
margin: 0svh 0.25svh;
|
|
text-align: center;
|
|
}
|
|
|
|
#blog a {
|
|
color: #ffffff;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
#blog a:hover {
|
|
color: #91a4d2;
|
|
}
|
|
|
|
#blog_content {
|
|
padding: 2svh 0svw;
|
|
}
|
|
#blog_content h1,
|
|
h2,
|
|
h3 {
|
|
margin: 0px;
|
|
padding: 1svh 0svw;
|
|
border-bottom: none;
|
|
}
|
|
|
|
#blog_content p {
|
|
padding: 1svh 0svw;
|
|
margin: 0px;
|
|
text-wrap: wrap;
|
|
max-width: 25rem;
|
|
}
|
|
|
|
#blog #blog_content p {
|
|
max-width: max-content;
|
|
}
|
|
|
|
#blogs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 80svh;
|
|
}
|
|
|
|
#blogs h1 {
|
|
border-bottom: var(--underlineTitle);
|
|
border-radius: var(--underlineTitleBorderRadius);
|
|
margin: 1svh 2svw;
|
|
padding: 1svh 2svw;
|
|
display: flex;
|
|
}
|
|
|
|
#blogs button {
|
|
/* background-color: transparent; */
|
|
background-color: var(--card-background-color);
|
|
border-radius: var(--card-border-radius);
|
|
border: none;
|
|
color: inherit;
|
|
font-size: x-large;
|
|
padding: 0.5rem;
|
|
margin: 1svh 0svw;
|
|
}
|
|
|
|
#blogs p {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
#blogs a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
#blogs a:hover {
|
|
color: #91a4d2;
|
|
}
|
|
|
|
.blog-preview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--card-background-color);
|
|
border-radius: var(--card-border-radius);
|
|
padding: 0svh 2svw;
|
|
}
|
|
|
|
#blogs .blog-preview h1 {
|
|
border-bottom: none;
|
|
padding: 0svh 1svw;
|
|
margin: 0px;
|
|
}
|
|
|
|
#blogs .blog-preview button {
|
|
width: max-content;
|
|
border: 2px solid rgba(145, 164, 210, 0.4);
|
|
border-radius: var(--card-border-radius);
|
|
font-size: medium;
|
|
margin-top: auto;
|
|
margin-bottom: 4svh;
|
|
}
|
|
#blogs .blog-preview #blog_info div p:last-child {
|
|
margin-right: 0svh;
|
|
margin-left: 2svw;
|
|
}
|
|
|
|
#blogs .blog-preview #blog_info div div p:last-child {
|
|
margin: 0svh 0.25svh;
|
|
padding: 0.25svh 8px;
|
|
}
|
|
|
|
#blogs-title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: 1svh;
|
|
}
|
|
|
|
#blogs-title p {
|
|
margin: 0svh 1svw;
|
|
padding: 1svh 0svw;
|
|
}
|
|
|
|
#blogs-on-show {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
padding: 2svh 0svw;
|
|
row-gap: 2svh;
|
|
column-gap: 2svw;
|
|
}
|
|
|
|
#blog-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-self: center;
|
|
align-self: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
background-color: var(--card-background-color);
|
|
border-radius: var(--card-border-radius);
|
|
padding: 2svh 2svw;
|
|
margin: 8svh 0svw;
|
|
}
|
|
|
|
#blog-out-of {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-self: center;
|
|
align-self: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
background-color: var(--card-background-color);
|
|
border-radius: var(--card-border-radius);
|
|
padding: 2svh 2svw;
|
|
margin: 8svh 0svw;
|
|
}
|
|
|
|
#blog-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
padding: 0svh 2svw;
|
|
margin-top: auto;
|
|
margin-bottom: 2svh;
|
|
|
|
background-color: var(--card-background-color);
|
|
border-radius: var(--card-border-radius);
|
|
}
|
|
|
|
#blog-nav a:last-child {
|
|
margin-left: auto;
|
|
}
|
|
|
|
#blog-nav div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
justify-self: center;
|
|
|
|
margin: 1svh 0svw;
|
|
padding: 0.5rem;
|
|
column-gap: 1svw;
|
|
min-height: 28px;
|
|
font-size: large;
|
|
|
|
background-color: var(--card-background-color);
|
|
border-radius: var(--card-border-radius);
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|