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

Commit

Permalink
WIP – refactored using rem as basic metric
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kikobeats
Kikobeats committed Feb 22, 2015
1 parent c710928 commit 08bfca2
Show file tree
Hide file tree
Showing 11 changed files with 164 additions and 192 deletions.
2 changes: 1 addition & 1 deletion assets/css/uno.css
View file

Large diffs are not rendered by default.

16 changes: 7 additions & 9 deletions assets/js/src/cover.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,10 @@ $ ->
action = if $('.main').is(":visible") then 'hide' else 'show'
$('.main')[action]()

# $(".btn-mobile-menu").click ->
# /* now is #search-container */
# $(".navigation-wrapper").toggleClass "visible animated bounceInDown"
# $(".btn-mobile-menu__icon").toggleClass "icon-list icon-x-circle animated fadeIn"

# $(".navigation-wrapper .blog-button").click ->
# /* now is #search-container */
# $(".navigation-wrapper").toggleClass "visible"
# $(".btn-mobile-menu__icon").toggleClass "icon-list icon-x-circle animated fadeIn"
$(".btn-mobile-menu").click ->
$(".navigation").toggleClass "visible animated bounceInDown"
$(".btn-mobile-menu__icon").toggleClass "icon-list icon-x-circle animated fadeIn"

$(".navigation-wrapper .blog-button").click ->
$(".navigation").toggleClass "visible"
$(".btn-mobile-menu__icon").toggleClass "icon-list icon-x-circle animated fadeIn"
4 changes: 2 additions & 2 deletions assets/js/uno.js
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions assets/scss/components/_aside.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@
}

.profile {
max-width: 620px;
max-width: 38.75rem;
margin: 0 auto;

> p {
font-size: 15px;
margin: 0 30px;
font-size: .9rem;
margin: 0 2rem;
}
> a {
> img {
Expand Down Expand Up @@ -73,7 +73,7 @@
line-height: 1em;
a {
@include btn-cover;
padding: 10px 20px;
padding: .625rem 1.25rem;
}
}
}
Expand Down
204 changes: 96 additions & 108 deletions assets/scss/components/_media-queries.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,99 +2,82 @@
// MEDIA QUERIES
// ------------------------------

@media only screen and (max-width:1428px) {
.content-wrapper {
left: 30%;
padding: 40px 9%;
}
.panel-main__inner {
padding: 0 0;
}
#search-field {
widows: 60%;
}
#back-button {
margin-left: 0;
}
}
// @media only screen and (max-width:1428px) {
// .content-wrapper {
// left: 30%;
// padding: 40px 9%;
// }
// .panel-main__inner {
// padding: 0 0;
// }
// #search-field {
// widows: 60%;
// }
// #back-button {
// margin-left: 0;
// }
// }

// ------------------------------
// < 1023px
// ------------------------------

@media all and (max-width:1023px) {
.content-wrapper__inner {
padding: 15px 0;
}
.pace,
.post-button,
.post-meta__read {
display: none !important;
}
.content-wrapper {
left: 0;
}
#search-field {
width: 50%;
height: 38px;
padding: 0;
text-align: center;
}
.icon-search {
left: 47.5%;
}

.btn-mobile-menu {
display: block;
}
.panel-main {
position: relative;
display: table;
}

.panel-main__content {
padding: 10px 0;
}
.panel-cover--collapsed {
width: 100%;
max-width: none;
}
.panel-cover__description {
display: block;
max-width: 600px;
margin: 0 auto;
}
.panel-cover {
width: 100%;
height: 100%;
background-position: center center;
&.panel-cover--collapsed {
position: relative;
.cover {
position: relative;
&.collapsed {
display: block;
height: auto;
padding-top: 42px;
background-position: center center;
.panel-main__inner {
display: block;
width: 100%;
height: 9rem;
padding-top: 1.7rem;

&.container {

}
.panel-cover__logo {
}
}

.profile {
> a {
> img {
width: 15%;
border-width: 2px;
margin-bottom: 0;
}
.panel-cover__title {

> h1 {
font-size: 23px;
margin-top: 8px;
}
.panel-cover__description {
display: none;
}
.panel-cover__divider {
display: none;
margin: 1em auto;
}
}

> p,
.divider {
display: none;
}
}
/* now is #search-container */
.navigation-wrapper {

#search-field {
width: 50%;
height: 38px;
padding: 0;
text-align: center;
}


.pace,
.post.reading-time,
#back-button {
display: none;
}


.navigation {
position: fixed;
top: 42px;
right: 0;
Expand All @@ -108,43 +91,48 @@
display: block;
}
}
.cover-navigation {
position: relative;
display: block;
float: left;
width: 100%;
clear: left;
.navigation {
display: block;
width: 100%;
li {
width: 80%;
margin-bottom: .4em;
}
}
&.navigation--social {
padding-top: 5px;
.navigation {
li {
display: inline-block;
width: 25.8%;
}
}
}
}
.content-wrapper {
// .cover-navigation {
// position: relative;
// display: block;
// float: left;
// width: 100%;
// clear: left;
// .navigation {
// display: block;
// width: 100%;
// li {
// width: 80%;
// margin-bottom: .4em;
// }
// }
// &.navigation--social {
// padding-top: 5px;
// .navigation {
// li {
// display: inline-block;
// width: 25.8%;
// }
// }
// }
// }
.main {
width: 80%;
max-width: none;
margin-top: 185px;
}
.content-wrapper__inner {
margin-right: 0;
margin-left: 0;
}
.navigation__item {
width: 100%;
margin: 0 0 .4em 0;
margin-top: 23%;
left: 0;
padding: 40px 10%;

> .content {
padding: 15px 0;
margin-right: 0;
margin-left: 0;
}
}

// .navigation__item {
// width: 100%;
// margin: 0 0 .4em 0;
// }
}
// ------------------------------
// < 500px
Expand Down Expand Up @@ -181,7 +169,7 @@
margin-bottom: .4em;
}

.panel-cover__logo {
.panel-cover__logo {
width: 20% !important;
}

Expand Down
8 changes: 4 additions & 4 deletions assets/scss/components/_pagination.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.pagination {
margin: 0 0 2.5em;
margin: 0 0 2.5rem;
}

.posts.index {
margin-left: 1em;
margin-right: 1em;
font-size: .8em;
margin-left: 1rem;
margin-right: 1rem;
font-size: .8rem;
color: $gray-dark;
}
12 changes: 5 additions & 7 deletions assets/scss/components/_post.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,12 @@
}
&.tags {
a {
padding: .166666666666667rem .25rem;
font-size: .3rem;
padding: .167rem .25rem;
font-size: .55rem;
color: darken($primary-color, 100%);
color: white;
color: $gray-lightest;
text-transform: uppercase;
background-color: rgba($primary-color,
.7);
background-color: rgba($primary-color, .7);
border-radius: .25rem;
&:hover {
background-color: rgba($primary-color, 1);
Expand Down Expand Up @@ -80,8 +79,7 @@
#back-button {
position: absolute;
left: 0;
top: 30px;
margin-left: 3.5%;
top: 1.8rem;
}

#post-image {
Expand Down
Loading

0 comments on commit 08bfca2

Please sign in to comment.