109 lines
1.7 KiB
CSS
109 lines
1.7 KiB
CSS
/** User-defined style. **/
|
|
{{ $P := .Site.Params -}}
|
|
|
|
{{- with $P.sidebar -}}
|
|
{{- $width := (int (math.Max .width 240)) -}}
|
|
{{- $pad := (add $width .offset) }}
|
|
.main {
|
|
{{ if eq .position "right" }}
|
|
flex-direction: row-reverse;
|
|
{{- end }}
|
|
}
|
|
.header-inner {
|
|
width: {{ $width }}px;
|
|
}
|
|
.main-inner {
|
|
width: calc(100% - {{ $pad }}px);
|
|
}
|
|
.sidebar {
|
|
width: {{ $width }}px;
|
|
visibility: inherit;
|
|
}
|
|
.sidebar-inner {
|
|
padding: {{ .padding }}px 10px;
|
|
}
|
|
.footer-inner {
|
|
padding-{{ .position }}: {{ $pad }}px;
|
|
width: calc(100% - 20px);
|
|
}
|
|
{{- end }}
|
|
|
|
.site-author-image {
|
|
{{- if $P.avatar.rounded }}
|
|
border-radius:50%;
|
|
{{- end }}
|
|
{{- if $P.avatar.rotated }}
|
|
transition: transform 1s ease-out;
|
|
{{- end }}
|
|
}
|
|
|
|
.site-state-item {
|
|
border-left: 1px solid #eee;
|
|
}
|
|
.site-state-item:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
.rss-link {
|
|
border-top: 1px dotted #ccc;
|
|
border-bottom: 1px dotted #ccc;
|
|
text-align: center;
|
|
margin: 10px 0 0 0;
|
|
}
|
|
|
|
.rss-link a {
|
|
display: block;
|
|
color: #fc6423;
|
|
border-bottom: none;
|
|
}
|
|
|
|
@keyframes wobble-vertical {
|
|
16.65% {
|
|
transform: translateX(8px);
|
|
}
|
|
|
|
33.3% {
|
|
transform: translateX(-6px);
|
|
}
|
|
|
|
49.95% {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
66.6% {
|
|
transform: translateX(-2px);
|
|
}
|
|
|
|
83.25% {
|
|
transform: translateX(1px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.rss-link a:hover {
|
|
animation-name: wobble-vertical;
|
|
animation-duration: 2s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: 1;
|
|
}
|
|
|
|
.rss-link a:hover > i {
|
|
-webkit-transform: scaleY(-1);
|
|
transform: scaleY(-1);
|
|
}
|
|
|
|
.cc-license {
|
|
{{ if eq $P.creativeCommons.size "big" }}
|
|
margin-top: 10px;
|
|
{{ else }}
|
|
margin-top: 5px;
|
|
{{- end }}
|
|
}
|
|
|
|
.back-to-top {
|
|
bottom: 30px;
|
|
}
|