Skip to content
This repository was archived by the owner on May 12, 2019. It is now read-only.

Commit 08bfca2

Browse files
KikobeatsKikobeats
committed
WIP – refactored using rem as basic metric
1 parent c710928 commit 08bfca2

File tree

11 files changed

+164
-192
lines changed

11 files changed

+164
-192
lines changed

‎assets/css/uno.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/src/cover.coffee

+7-9
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,10 @@ $ ->
2828
action = if $('.main').is(":visible") then 'hide' else 'show'
2929
$('.main')[action]()
3030

31-
# $(".btn-mobile-menu").click ->
32-
# /* now is #search-container */
33-
# $(".navigation-wrapper").toggleClass "visible animated bounceInDown"
34-
# $(".btn-mobile-menu__icon").toggleClass "icon-list icon-x-circle animated fadeIn"
35-
36-
# $(".navigation-wrapper .blog-button").click ->
37-
# /* now is #search-container */
38-
# $(".navigation-wrapper").toggleClass "visible"
39-
# $(".btn-mobile-menu__icon").toggleClass "icon-list icon-x-circle animated fadeIn"
31+
$(".btn-mobile-menu").click ->
32+
$(".navigation").toggleClass "visible animated bounceInDown"
33+
$(".btn-mobile-menu__icon").toggleClass "icon-list icon-x-circle animated fadeIn"
34+
35+
$(".navigation-wrapper .blog-button").click ->
36+
$(".navigation").toggleClass "visible"
37+
$(".btn-mobile-menu__icon").toggleClass "icon-list icon-x-circle animated fadeIn"

‎assets/js/uno.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/scss/components/_aside.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
}
2424

2525
.profile {
26-
max-width: 620px;
26+
max-width: 38.75rem;
2727
margin: 0 auto;
2828

2929
> p {
30-
font-size: 15px;
31-
margin: 0 30px;
30+
font-size: .9rem;
31+
margin: 0 2rem;
3232
}
3333
> a {
3434
> img {
@@ -73,7 +73,7 @@
7373
line-height: 1em;
7474
a {
7575
@include btn-cover;
76-
padding: 10px 20px;
76+
padding: .625rem 1.25rem;
7777
}
7878
}
7979
}

‎assets/scss/components/_media-queries.scss

+96-108
Original file line numberDiff line numberDiff line change
@@ -2,99 +2,82 @@
22
// MEDIA QUERIES
33
// ------------------------------
44

5-
@media only screen and (max-width:1428px) {
6-
.content-wrapper {
7-
left: 30%;
8-
padding: 40px 9%;
9-
}
10-
.panel-main__inner {
11-
padding: 0 0;
12-
}
13-
#search-field {
14-
widows: 60%;
15-
}
16-
#back-button {
17-
margin-left: 0;
18-
}
19-
}
5+
// @media only screen and (max-width:1428px) {
6+
// .content-wrapper {
7+
// left: 30%;
8+
// padding: 40px 9%;
9+
// }
10+
// .panel-main__inner {
11+
// padding: 0 0;
12+
// }
13+
// #search-field {
14+
// widows: 60%;
15+
// }
16+
// #back-button {
17+
// margin-left: 0;
18+
// }
19+
// }
20+
2021
// ------------------------------
2122
// < 1023px
2223
// ------------------------------
2324

2425
@media all and (max-width:1023px) {
25-
.content-wrapper__inner {
26-
padding: 15px 0;
27-
}
28-
.pace,
29-
.post-button,
30-
.post-meta__read {
31-
display: none !important;
32-
}
33-
.content-wrapper {
34-
left: 0;
35-
}
36-
#search-field {
37-
width: 50%;
38-
height: 38px;
39-
padding: 0;
40-
text-align: center;
41-
}
42-
.icon-search {
43-
left: 47.5%;
44-
}
26+
4527
.btn-mobile-menu {
4628
display: block;
4729
}
48-
.panel-main {
49-
position: relative;
50-
display: table;
51-
}
5230

53-
.panel-main__content {
54-
padding: 10px 0;
55-
}
56-
.panel-cover--collapsed {
57-
width: 100%;
58-
max-width: none;
59-
}
60-
.panel-cover__description {
61-
display: block;
62-
max-width: 600px;
63-
margin: 0 auto;
64-
}
65-
.panel-cover {
66-
width: 100%;
67-
height: 100%;
68-
background-position: center center;
69-
&.panel-cover--collapsed {
70-
position: relative;
31+
.cover {
32+
position: relative;
33+
&.collapsed {
7134
display: block;
72-
height: auto;
73-
padding-top: 42px;
74-
background-position: center center;
75-
.panel-main__inner {
76-
display: block;
35+
width: 100%;
36+
height: 9rem;
37+
padding-top: 1.7rem;
38+
39+
&.container {
40+
7741
}
78-
.panel-cover__logo {
42+
}
43+
}
44+
45+
.profile {
46+
> a {
47+
> img {
7948
width: 15%;
8049
border-width: 2px;
8150
margin-bottom: 0;
8251
}
83-
.panel-cover__title {
52+
53+
> h1 {
8454
font-size: 23px;
8555
margin-top: 8px;
8656
}
87-
.panel-cover__description {
88-
display: none;
89-
}
90-
.panel-cover__divider {
91-
display: none;
92-
margin: 1em auto;
93-
}
57+
}
58+
59+
> p,
60+
.divider {
61+
display: none;
9462
}
9563
}
96-
/* now is #search-container */
97-
.navigation-wrapper {
64+
65+
#search-field {
66+
width: 50%;
67+
height: 38px;
68+
padding: 0;
69+
text-align: center;
70+
}
71+
72+
73+
.pace,
74+
.post.reading-time,
75+
#back-button {
76+
display: none;
77+
}
78+
79+
80+
.navigation {
9881
position: fixed;
9982
top: 42px;
10083
right: 0;
@@ -108,43 +91,48 @@
10891
display: block;
10992
}
11093
}
111-
.cover-navigation {
112-
position: relative;
113-
display: block;
114-
float: left;
115-
width: 100%;
116-
clear: left;
117-
.navigation {
118-
display: block;
119-
width: 100%;
120-
li {
121-
width: 80%;
122-
margin-bottom: .4em;
123-
}
124-
}
125-
&.navigation--social {
126-
padding-top: 5px;
127-
.navigation {
128-
li {
129-
display: inline-block;
130-
width: 25.8%;
131-
}
132-
}
133-
}
134-
}
135-
.content-wrapper {
94+
// .cover-navigation {
95+
// position: relative;
96+
// display: block;
97+
// float: left;
98+
// width: 100%;
99+
// clear: left;
100+
// .navigation {
101+
// display: block;
102+
// width: 100%;
103+
// li {
104+
// width: 80%;
105+
// margin-bottom: .4em;
106+
// }
107+
// }
108+
// &.navigation--social {
109+
// padding-top: 5px;
110+
// .navigation {
111+
// li {
112+
// display: inline-block;
113+
// width: 25.8%;
114+
// }
115+
// }
116+
// }
117+
// }
118+
.main {
136119
width: 80%;
137120
max-width: none;
138-
margin-top: 185px;
139-
}
140-
.content-wrapper__inner {
141-
margin-right: 0;
142-
margin-left: 0;
143-
}
144-
.navigation__item {
145-
width: 100%;
146-
margin: 0 0 .4em 0;
121+
margin-top: 23%;
122+
left: 0;
123+
padding: 40px 10%;
124+
125+
> .content {
126+
padding: 15px 0;
127+
margin-right: 0;
128+
margin-left: 0;
129+
}
147130
}
131+
132+
// .navigation__item {
133+
// width: 100%;
134+
// margin: 0 0 .4em 0;
135+
// }
148136
}
149137
// ------------------------------
150138
// < 500px
@@ -181,7 +169,7 @@
181169
margin-bottom: .4em;
182170
}
183171

184-
.panel-cover__logo {
172+
.panel-cover__logo {
185173
width: 20% !important;
186174
}
187175

‎assets/scss/components/_pagination.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.pagination {
2-
margin: 0 0 2.5em;
2+
margin: 0 0 2.5rem;
33
}
44

55
.posts.index {
6-
margin-left: 1em;
7-
margin-right: 1em;
8-
font-size: .8em;
6+
margin-left: 1rem;
7+
margin-right: 1rem;
8+
font-size: .8rem;
99
color: $gray-dark;
1010
}

‎assets/scss/components/_post.scss

+5-7
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,12 @@
4545
}
4646
&.tags {
4747
a {
48-
padding: .166666666666667rem .25rem;
49-
font-size: .3rem;
48+
padding: .167rem .25rem;
49+
font-size: .55rem;
5050
color: darken($primary-color, 100%);
51-
color: white;
51+
color: $gray-lightest;
5252
text-transform: uppercase;
53-
background-color: rgba($primary-color,
54-
.7);
53+
background-color: rgba($primary-color, .7);
5554
border-radius: .25rem;
5655
&:hover {
5756
background-color: rgba($primary-color, 1);
@@ -80,8 +79,7 @@
8079
#back-button {
8180
position: absolute;
8281
left: 0;
83-
top: 30px;
84-
margin-left: 3.5%;
82+
top: 1.8rem;
8583
}
8684

8785
#post-image {

0 commit comments

Comments
 (0)