theme-blog-ewen/assets/scss/templates/_main.scss
2023-12-23 16:29:03 +01:00

327 lines
4.7 KiB
SCSS

/* card */
.card {
&-body {
padding: 0px;
}
}
.posts {
border: 0;
border-radius: 0;
&-header,
&-footer,
&-img,
&-img-top {
border: 0;
border-radius: 0;
}
&-img {
object-fit: cover;
width: 100%;
height: 100%;
max-height: 250px;
}
}
.post {
&-img {
display: block;
max-height: 400px;
margin: auto;
}
}
.featured-post {
@include tablet {
margin-left: 0;
fond-size: 30px;
}
}
.related {
margin-top: 40px;
}
.post-meta {
span {
color: #444;
font-weight: 500;
}
}
.lang-available {
float: right;
border: .5px solid $text-color-dark;
padding: 5px;
}
/* widget */
.widgets {
padding-left: 25px;
border-left: 1px solid $border-color;
@include desktop {
padding-left: 0;
border-left: 0;
}
}
.widget {
text-align: center;
margin-bottom: 50px;
&-title {
display: inline-block;
border-top: .5px solid $primary-color;
border-bottom: .5px solid $primary-color;
padding: 10px 0;
margin-bottom: 20px;
}
li {
margin-bottom: 10px;
a {
color: $text-color;
&:hover {
color: $primary-color;
}
}
}
}
.author-thumb-sm {
max-height: 165px;
max-width: 165px;
}
.author {
float: right;
shape-outside: circle();
img {
max-height: 250px;
max-width: 250px;
}
}
.social-links {
li {
a {
height: 40px;
width: 40px;
background-color: $primary-color;
color: $white;
display: block;
line-height: 40px;
border: 1px solid transparent;
font-size: 20px;
text-decoration: underline;
&:hover {
background-color: $white;
color: $primary-color;
border: 1px solid $primary-color;
}
}
}
}
/* pagination */
.pagination {
justify-content: center;
.page-item {
.page-link {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
color: $primary-color;
border-top: 0;
border-bottom: 0;
&:hover {
background: $primary-color;
color: $white;
}
}
&:first-child,
&:last-child {
.page-link {
border-radius: 0;
}
}
&.active {
.page-link {
background: $white;
color: $text-color;
border: 1px solid $primary-color;
}
}
}
}
.tag {
a {
background-color: $primary-color;
color: $white;
border: 1px solid transparent;
font-size: 15px;
padding: 5px;
text-decoration: none;
&:hover,
&.active {
background-color: $white;
color: $primary-color;
border: 1px solid $primary-color;
}
}
}
.link-above-article {
padding-bottom: 10px;
}
/* markdown style */
.content {
* {
margin-bottom: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 10px;
}
ol {
padding-left: 20px;
}
ul {
padding-left: 0;
li {
position: relative;
padding-left: 20px;
margin-bottom: 15px;
list-style-type: none;
&::before {
position: absolute;
content: "\e71b";
font-family: $icon-font;
font-size: 14px;
left: 0;
top: 1px;
color: $primary-color;
transition: .3s ease;
}
}
}
table {
text-align: left;
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
border: 1px solid #dee2e6;
th,
td {
padding: .75rem;
vertical-align: top;
border: 1px solid #dee2e6
}
thead {
background: darken($color: $gray, $amount: 2);
}
tbody {
background: $gray;
td {
text-align: left !important;
}
}
}
blockquote {
padding: 20px;
background: $gray;
border-left: 3px solid $primary-color;
p {
margin-bottom: 0;
color: $text-color-dark;
font-style: italic !important;
}
}
pre {
padding: 10px 20px;
background: $gray;
code {
border: 0;
background: transparent;
padding: 0;
}
}
a {
color: $primary-color;
&:hover {
text-decoration: underline;
}
}
code {
padding: 3px 5px;
background: $gray;
border: 1px solid $border-color;
border-radius: 3px;
color: $text-color-dark;
}
.block_color {
font-size: 15px;
padding-top: 10px;
padding-right: 15px;
padding-left: 50px;
border-radius: 10px;
background-repeat: no-repeat;
background-size: 30px;
background-position: 10px 10px;
}
.block_blue {
border: 1px dashed #3b5f72;
background-color: #e2f3ff;
background-image: url("/img/info.svg");
}
}