mirror of https://github.com/Damillora/Shian.git
Compare commits
5 Commits
4f53496885
...
77c6d76d46
Author | SHA1 | Date |
---|---|---|
Damillora | 77c6d76d46 | |
Damillora | a1d30b3b13 | |
Damillora | 62ab8aa6ba | |
Damillora | 78c1bd6421 | |
Damillora | 6def68f493 |
|
@ -34,6 +34,8 @@
|
|||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include transition;
|
||||
}
|
||||
|
||||
|
@ -48,12 +50,16 @@
|
|||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
@include transition;
|
||||
|
||||
@include screen(md) {
|
||||
height: 4rem;
|
||||
flex-direction: row;
|
||||
}
|
||||
&__top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
height: 3rem;
|
||||
@include screen(md) {
|
||||
height: 4rem;
|
||||
|
@ -89,8 +95,10 @@
|
|||
cursor: pointer;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
@include transition;
|
||||
@include screen(md) {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $theme-blue;
|
||||
}
|
||||
|
|
|
@ -1,11 +1,57 @@
|
|||
.menu {
|
||||
max-height: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include transition;
|
||||
overflow: hidden;
|
||||
&.enabled {
|
||||
max-height: 100vh;
|
||||
|
||||
@include screen(md) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
// Dark mode special menu
|
||||
&--dark-mode {
|
||||
.menu__text {
|
||||
display: block;
|
||||
@include screen(md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.menu__icon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&--permanent-icon {
|
||||
.menu__icon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include screen(md) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
&__nav-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
@include transition;
|
||||
|
||||
@include screen(md) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
height: 0;
|
||||
|
||||
@include screen(md) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__item {
|
||||
color: $white;
|
||||
|
@ -16,6 +62,10 @@
|
|||
cursor: pointer;
|
||||
@include transition;
|
||||
|
||||
@include screen(md) {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $theme-blue;
|
||||
}
|
||||
|
@ -42,6 +92,10 @@
|
|||
text-align: center;
|
||||
@include px(0.5rem);
|
||||
@include py(0.75rem);
|
||||
|
||||
@include screen(md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&__text {
|
||||
display: inline-block;
|
||||
|
@ -94,4 +148,4 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -36,6 +36,7 @@
|
|||
|
||||
&__contents {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding-top: 3rem;
|
||||
@include screen(md) {
|
||||
padding-top: 4rem;
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
.post-header {
|
||||
width: 100%;
|
||||
|
||||
&__heading {
|
||||
@include my(0.5rem);
|
||||
|
||||
|
@ -8,7 +10,7 @@
|
|||
align-items: center;
|
||||
}
|
||||
&--tag-text {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
color: $white;
|
||||
}
|
||||
&--tag-color {
|
||||
|
@ -44,7 +46,6 @@
|
|||
flex-direction: row;
|
||||
justify-content: center;
|
||||
@include my(0.5rem);
|
||||
@include py(0.5rem);
|
||||
}
|
||||
&__author-images {
|
||||
display: flex;
|
||||
|
@ -69,4 +70,26 @@
|
|||
&__social {
|
||||
color: $white;
|
||||
}
|
||||
&__caption {
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
@include screen(md) {
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
&__caption-text {
|
||||
background: var(--bg-color);
|
||||
color: var(--highlight-color);
|
||||
padding: 0.25rem 1rem;
|
||||
border-radius: 1rem;
|
||||
font-size: $text-sm;
|
||||
box-shadow: 0px 0px 4px 1px var(--accent-color);
|
||||
|
||||
@include screen(md) {
|
||||
padding: 0.5rem 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -13,6 +13,8 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
|
||||
.kg-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -35,9 +37,23 @@
|
|||
}
|
||||
.kg-card figcaption {
|
||||
font-size: $text-sm;
|
||||
background: var(--bg-color);
|
||||
color: var(--highlight-color);
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.25rem 1rem;
|
||||
border-radius: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
text-align: center;
|
||||
|
||||
@include screen(md) {
|
||||
padding: 0.5rem 2rem;
|
||||
}
|
||||
}
|
||||
.kg-image-card figcaption {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
|
||||
box-shadow: 0px 0px 4px 1px var(--accent-color);
|
||||
}
|
||||
|
||||
.kg-gallery-container {
|
||||
|
@ -131,3 +147,16 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
&.search-enabled {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.search-enabled &__inner {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
&.search-detached &__inner {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue