jekyll-theme-persephone 0.1.7 → 0.1.8

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,140 +0,0 @@
1
- .logo {
2
- position: fixed;
3
- left: 3rem;
4
- top: 2rem;
5
- z-index: 11;
6
- display: block;
7
- color: var(--gray);
8
- h1 {
9
- font-size: 18px;
10
- font-weight: 400;
11
- line-height: 30px;
12
- }
13
- img + h1 {
14
- margin: 0;
15
- transform: translateX(-20px);
16
- opacity: 0;
17
- position: absolute;
18
- left: calc(30px + 1rem);
19
- top: 0;
20
- width: 100px;
21
- }
22
- &:hover img + h1 {
23
- opacity: 1;
24
- transform: none;
25
- transition: transform 0.3s, opacity 0.3s;
26
- }
27
- }
28
- .sidebar__toggler {
29
- width: 40px;
30
- height: 40px;
31
- margin: 10px;
32
- position: fixed;
33
- left: 3rem;
34
- bottom: 2rem;
35
- margin-top: -20px;
36
- z-index: 11;
37
- }
38
- .logo, .sidebar__toggler {
39
- @include transition(all 0.35s ease-out);
40
- }
41
- .sidebar-right .logo, .sidebar-right .sidebar__toggler {
42
- right: 3rem;
43
- left: auto;
44
- }
45
- .sidebar-right .logo h1 {
46
- left: auto;
47
- right: calc(30px + 1rem);
48
- transform: translateX(20px);
49
- text-align: right;
50
- }
51
- .sidebar-right .logo:hover h1 {
52
- transform: none;
53
- }
54
- .sidebar__toggler span {
55
- display: inline-block;
56
- position: absolute;
57
- background-color: var(--gray);
58
- height: 2px;
59
- left: 5%;
60
- transition: all 0.25s linear;
61
- border-radius: 2px;
62
- }
63
- .sidebar__toggler_top {
64
- width: 40%;
65
- top: 7.5px;
66
- }
67
- .sidebar__toggler_middle {
68
- width: 70%;
69
- top: 19px;
70
- }
71
- .sidebar__toggler_bottom {
72
- width: 90%;
73
- bottom: 7.5px;
74
- }
75
- .sidebar__toggler:hover .sidebar__toggler_top {
76
- width: 90%;
77
- }
78
- .sidebar__toggler:hover .sidebar__toggler_bottom {
79
- width: 40%;
80
- }
81
- .sidebar__toggler.active .sidebar__toggler_top {
82
- transform-origin: 5% 5%;
83
- width: 90%;
84
- transform: rotate(45deg);
85
- }
86
- .sidebar__toggler.active .sidebar__toggler_middle {
87
- opacity: 0;
88
- }
89
- .sidebar__toggler.active .sidebar__toggler_bottom {
90
- width: 90%;
91
- transform-origin: 5% 95%;
92
- transform: rotate(-45deg);
93
- }
94
- a.nav-link {
95
- display: inline-block;
96
- padding: 5px 0.25rem;
97
- position: relative;
98
- &:after {
99
- @include pseudo();
100
- left: 0;
101
- bottom: 0;
102
- height: 1px;
103
- background-color: var(--light-gray);
104
- width: 0;
105
- transition: width 0.25s ease-out;
106
- }
107
- &:hover:after {
108
- width: 100%;
109
- }
110
- &.active:after {
111
- background-color: var(--gray);
112
- width: 100%;
113
- }
114
- }
115
- .top-nav {
116
- margin: -2.45rem 0 3.45rem 0;
117
- text-align: right;
118
- a {
119
- margin: 0 0 0 1rem;
120
- }
121
- }
122
- @media screen and (max-width: 768px) {
123
- .logo, .logo.active, .sidebar-right .logo, .sidebar-right .logo.active {
124
- position: absolute;
125
- left: 1.5rem;
126
- top: 2rem;
127
- margin: 0;
128
- }
129
- .sidebar__toggler, .sidebar__toggler.active, .sidebar-right .sidebar__toggler, .sidebar-right .sidebar__toggler.active {
130
- position: absolute;
131
- bottom: auto;
132
- top: 2rem;
133
- right: 1rem;
134
- margin: -10px 0 0 0;
135
- left: auto;
136
- }
137
- .top-nav {
138
- padding-left: 40px
139
- }
140
- }
@@ -1,11 +0,0 @@
1
- /*loading*/
2
- @keyframes spin {
3
- 0% {
4
- -webkit-transform: rotate(0deg);
5
- tranform: rotate(0deg);
6
- }
7
- 100% {
8
- -webkit-transform: rotate(360deg);
9
- tranform: rotate(360deg);
10
- }
11
- }
@@ -1,105 +0,0 @@
1
- .post__archive {
2
- max-width: var(--content-width);
3
- width: 100%;
4
- margin: 3rem auto;
5
- padding: 1.5rem 1rem;
6
- }
7
- .blog__categories {
8
- margin: 1rem 0 0.75rem 0;
9
- a {
10
- margin: 0 2.75rem 0.75rem 0;
11
- }
12
- }
13
- .post__list_title {
14
- margin: 2.75rem 0 1.25rem 0;
15
- }
16
- .post__list_item {
17
- list-style: none;
18
- padding: 0;
19
- width: 100%;
20
- margin: 0.875rem 0;
21
- position: relative;
22
- a {
23
- display: block;
24
- width: 100%;
25
- padding: 0.5rem 0;
26
- }
27
- .archive__arrow {
28
- display: inline-block;
29
- position: absolute;
30
- width: 0;
31
- height: 1px;
32
- left: 0;
33
- top: 50%;
34
- background-color: var(--light-gray);
35
- transition: width 0.25s ease-in;
36
- &:after, &:before {
37
- content: "";
38
- position: absolute;
39
- width: 9px;
40
- height: 1px;
41
- background-color: var(--light-gray);
42
- right: -2.5px;
43
- opacity: 0;
44
- transition: all 0.25s ease-in;
45
- }
46
- &:after {
47
- transform: rotate(45deg);
48
- top: -3px;
49
- }
50
- &:before {
51
- transform: rotate(-45deg);
52
- top: 3px;
53
- }
54
- }
55
- .archive__time {
56
- display: inline-block;
57
- width: 135px;
58
- font-size: 0.9rem;
59
- color: var(--gray);
60
- }
61
- a, .archive__time {
62
- transition: color 0.125s ease-in;
63
- }
64
- &.fade {
65
- a, .archive__time {
66
- color: var(--light-gray);
67
- }
68
- }
69
- }
70
- @media screen and (max-width: 700px) {
71
- .post__list_item .archive__time {
72
- display: block;
73
- margin-bottom: 0.35rem;
74
- }
75
- }
76
- .hover-reveal {
77
- position: fixed;
78
- width: 250px;
79
- height: 175px;
80
- top: 0;
81
- left: 0;
82
- pointer-events: none;
83
- opacity: 0;
84
- }
85
-
86
- .hover-reveal__inner,
87
- .hover-reveal__img {
88
- width: 100%;
89
- height: 100%;
90
- position: relative;
91
- }
92
-
93
- .hover-reveal__deco {
94
- width: 100%;
95
- height: 100%;
96
- position: absolute;
97
- top: 0;
98
- left: 0;
99
- background-color: #181314;
100
- }
101
-
102
- .hover-reveal__img {
103
- background-size: cover;
104
- background-position: 50% 50%;
105
- }
@@ -1,68 +0,0 @@
1
- @mixin pseudo() {
2
- content: "";
3
- position: absolute;
4
- display: inline-block;
5
- }
6
-
7
- @mixin flex() {
8
- display: flex!important;
9
- display: -webkit-box;
10
- display: -ms-flexbox;
11
- }
12
-
13
- @mixin flex-middle() {
14
- -webkit-box-align: center;
15
- -ms-flex-align: center;
16
- align-items: center;
17
- }
18
-
19
- @mixin flex-reverse() {
20
- -webkit-box-direction: reverse;
21
- -ms-flex-direction: row-reverse;
22
- flex-direction: row-reverse;
23
- -webkit-box-orient: horizontal;
24
- }
25
-
26
- @mixin flex-row() {
27
- -webkit-box-orient: row;
28
- -webkit-box-direction: normal;
29
- -ms-flex-direction: row;
30
- flex-direction: row;
31
- }
32
-
33
- @mixin flex-column() {
34
- -webkit-box-orient: vertical;
35
- -webkit-box-direction: normal;
36
- -ms-flex-direction: column;
37
- flex-direction: column;
38
- }
39
-
40
- @mixin column($count, $gap) {
41
- -moz-column-count: $count;
42
- -webkit-column-count: $count;
43
- column-count: $count;
44
- -moz-column-gap: $gap;
45
- -webkit-column-gap: $gap;
46
- column-gap: $gap;
47
- }
48
-
49
- @mixin transition($val) {
50
- -webkit-transition: $val;
51
- -moz-transition: $val;
52
- -o-transition: $val;
53
- transition: $val;
54
- }
55
-
56
- @mixin transform($val) {
57
- -webkit-transform: $val;
58
- -moz-transform: $val;
59
- -ms-transform: $val;
60
- -o-transform: $val;
61
- transform: $val;
62
- }
63
- @mixin text_size_adjust($val) {
64
- text-size-adjust: $val;
65
- -ms-text-size-adjust: $val;
66
- -webkit-text-size-adjust: $val;
67
- -moz-text-size-adjust: $val;
68
- }
@@ -1,169 +0,0 @@
1
- .post__wrapper {
2
- max-width: var(--content-width);
3
- width: 100%;
4
- margin: 3rem auto 1.5rem auto;
5
- padding: 1.5rem 1rem;
6
- &:after {
7
- content: "";
8
- display: block;
9
- clear: both;
10
- }
11
- }
12
- .post__archive_path {
13
- float: left;
14
- .post__archive_icon {
15
- display: inline-block;
16
- width: 40px;
17
- height: 40px;
18
- border-radius: 50%;
19
- float: left;
20
- margin-right: 10px;
21
- position: relative;
22
- .circle-progress {
23
- stroke: var(--gray);
24
- fill: none;
25
- stroke-width: 1;
26
- stroke-dasharray: 0 120;
27
- transition: all 0.45s ease-in;
28
- }
29
- .post__archive_icon {
30
- position: absolute;
31
- width: 60%;
32
- left: 20%;
33
- top: 50%;
34
- height: 1px;
35
- background-color: var(--gray);
36
- transition: all 0.25s ease-in;
37
- &:after, &:before {
38
- @include pseudo();
39
- height: 1px;
40
- width: 50%;
41
- background-color: var(--gray);
42
- top: 0;
43
- left: 0;
44
- }
45
- &:before {
46
- transform-origin: left bottom;
47
- transform: rotate(-45deg);
48
- }
49
- &:after {
50
- transform-origin: left top;
51
- transform: rotate(45deg);
52
- }
53
- &.emit {
54
- left: -110%;
55
- }
56
- }
57
- }
58
- a {
59
- display: block;
60
- font-size: 1.2rem;
61
- line-height: 40px;
62
- text-transform: capitalize;
63
- &:hover {
64
- .circle-progress {
65
- stroke-dasharray: 120 120;
66
- }
67
- }
68
- &.emit {
69
- .post__archive_icon {
70
- left: -150%;
71
- opacity: 0;
72
- }
73
- }
74
- }
75
- }
76
- .post__langs {
77
- float: right;
78
- line-height: 40px;
79
- }
80
- .post__header {
81
- margin-bottom: 1rem;
82
- .post__title {
83
- margin: 3rem 0 1.3rem 0;
84
- }
85
- .page__title {
86
- margin-top: 1rem;
87
- }
88
- .post__meta {
89
- color: var(--gray);
90
- font-size: 0.935rem;
91
- }
92
- }
93
- .post__relative {
94
- ul {
95
- padding: 0;
96
- li {
97
- list-style: none;
98
- }
99
- }
100
- }
101
- .post__content {
102
- padding: 1.5rem 0;
103
- margin-bottom: 4rem;
104
- }
105
-
106
- .post__contact {
107
- margin: 0;
108
- padding: 1.5rem 0;
109
- position: relative;
110
- color: var(--gray);
111
- width: 100%;
112
- text-align: left;
113
- &:before {
114
- @include pseudo();
115
- left: 0;
116
- background-color: var(--light);
117
- width: 30%;
118
- height: 1px;
119
- top: 0;
120
- }
121
- h4 {
122
- color: var(--grayer);
123
- font-size: 1.15rem;
124
- font-weight: 400;
125
- margin-bottom: 0.5rem;
126
- }
127
- p {
128
- font-size: 0.875rem;
129
- margin: 0 0 1rem 0;
130
- }
131
- .icon__list {
132
- text-align: left;
133
- }
134
- }
135
- .section-nav {
136
- position: fixed;
137
- left: 50%;
138
- top: 8rem;
139
- margin-left: calc(var(--content-width) / 2 + 30px)!important;
140
- list-style: none;
141
- max-width: calc(100vh / 2 - 60px);
142
- li {
143
- margin: 10px 0;
144
- line-height: 1.35rem;
145
- }
146
- li > a {
147
- color: var(--gray);
148
- &:hover {
149
- color: var(--blue);
150
- }
151
- }
152
- }
153
- @media screen and (max-width: 1200px) {
154
- .section-nav {
155
- display: none;
156
- }
157
- }
158
- @media screen and (max-width: 600px) {
159
- .contact, .post__archive_path {
160
- width: 100%;
161
- }
162
- .contact {
163
- text-align: left;
164
- &:after {
165
- left: 0;
166
- right: auto;
167
- }
168
- }
169
- }