twisterarmy
/
theme_nin
mirror of https://github.com/twisterarmy/theme_nin.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

More cleaning & templating

nin-v2
Mylene 9 years ago
parent
87d65143a1
commit
b6bc99aade
11 changed files with 633 additions and 518 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 614
      css/style.css
  2. 32
      js/theme_option.js
  3. 15
      sass/base/_commons.sass
  4. 22
      sass/base/_utils.sass
  5. 10
      sass/base/_var.sass
  6. 31
      sass/layout/_dm.sass
  7. 6
      sass/layout/_menu.sass
  8. 66
      sass/layout/_modal.sass
  9. 43
      sass/layout/_postboard.sass
  10. 15
      sass/layout/_profile.sass
  11. 289
      sass/style.sass

614
css/style.css
View File

File diff suppressed because it is too large Load Diff

32
js/theme_option.js
Unescape View File

@ -1,26 +1,27 @@ @@ -1,26 +1,27 @@
$(document).ready(function()
$(window).resize(function()
{
var windowHeight = $(window).height();
//$('.right').css('height', windowHeight - 100);
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
});
$(window).resize(function()
$(document).ready(function()
{
var windowHeight = $(window).height();
//$('.right').css('height', windowHeight - 100);
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
});
$(function(){
var windowHeight = $(window).height();
$('.modal-close').html('');
//$('.right').css('height', windowHeight - 100);
$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
//$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
$('.modal-back').html('');
$('.twister-user-remove').html('');
$('.profile-card-main').attr('style', '');
@ -40,6 +41,7 @@ $(function(){ @@ -40,6 +41,7 @@ $(function(){
$( ".promoted-posts-only").click(function() {
// modify the way promoted posts are shown
//active promoted posts tab
@ -66,6 +68,10 @@ $(function(){ @@ -66,6 +68,10 @@ $(function(){
$(document).ready(localizeLabels);
$('<div></div>').appendTo('.postboard-loading');
$('<div></div>').appendTo('.postboard-loading');
$('<div></div>').appendTo('.postboard-loading');
});
@ -100,7 +106,9 @@ function openModal(modal) { @@ -100,7 +106,9 @@ function openModal(modal) {
.append(modal.content);
else
modal.content = modal.self.find('.modal-content');
modal.self.prependTo('body').fadeIn('fast');
modal.postboard = modal.self.find('.postboard-posts');
modal.self.prependTo('body').fadeIn('slow');
if (modal.classBase === '.modal-wrapper') {

15
sass/base/_commons.sass
Unescape View File

@ -14,7 +14,7 @@ html, body @@ -14,7 +14,7 @@ html, body
html
font-size: $global-font-size
background-color: $main-background-color
+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
//+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
background-attachment: fixed
body
@ -22,6 +22,7 @@ body @@ -22,6 +22,7 @@ body
line-height : $main-line-height
font-family : $main-font-family
font-weight: 400
overflow-y: scroll
@ -71,6 +72,18 @@ textarea, input @@ -71,6 +72,18 @@ textarea, input
display: block
border: none
samp
background: #eee
font-size: .9rem
line-height: .9rem
display: inline-block
padding: 5px 8px
+border-radius(2px)
color: #333
font-weight: 500
font-family: monospace
/* isFollowing */
.isFollowing:after

22
sass/base/_utils.sass
Unescape View File

@ -2,7 +2,8 @@ @@ -2,7 +2,8 @@
.box-shadow
+box-shadow(0 8px 13px rgba(#333, .1))
+box-shadow(0 8px 13px rgba(#111, 0))
.clear-fix
&:after // clearfix
@ -21,7 +22,6 @@ button, a.button @@ -21,7 +22,6 @@ button, a.button
letter-spacing: 0.07rem
font-size: .75rem
position: relative
z-index: 10
font-weight: 300
margin: 2px
text-transform: uppercase
@ -42,21 +42,21 @@ button, a.button @@ -42,21 +42,21 @@ button, a.button
color: #666
+box-shadow(1px 1px 0 rgba(#444, .3))
&.color-1
background: $main-color-color
border-color: darken($main-color-color, 5%)
background: #5E80A2
border-color: darken(#5E80A2, 5%)
color: white
font-weight: 500
&:hover
border-color: darken($main-color-color, 15%)
border-color: darken(#5E80A2, 15%)
&.color-2
background: #C3C3C3
border-color: darken(#C3C3C3, 5%)
background: #64676C
border-color: darken(#64676C, 5%)
color: white
font-weight: 500
&:hover
border-color: darken(#C3C3C3, 15%)
border-color: darken(#64676C, 15%)
&.small
padding: .3rem .5rem
padding: .5rem
font-weight: 700
font-size: .6rem
line-height: .6rem
font-size: .7rem
line-height: .7rem

10
sass/base/_var.sass
Unescape View File

@ -32,7 +32,7 @@ $space : 1rem @@ -32,7 +32,7 @@ $space : 1rem
// colors
$light-grey: #C3C3C3
$color-green: #B4C669
$color-green: #A1B775
$color-red: #EF5D43
$color-blue: #39434F
$dark-grey : #444
@ -41,14 +41,14 @@ $dark-grey : #444 @@ -41,14 +41,14 @@ $dark-grey : #444
$main-color-light: #aaa
$main-color-dark: #222
$main-color-color: $color-green
$main-background-color: lighten($light-grey, 10% )
$bloc-light-color : lighten($light-grey, 20% )
$main-background-color: #EBEBEB
$bloc-light-color : #FDFCFA
$bloc-background-color: white
$bloc-background-color: #EBEBEB
$defaut-font-color: $dark-grey
$global-font-size : 15px
$global-font-size : 14px
$main-font-size : 1rem
$main-line-height : 1.4rem

31
sass/layout/_dm.sass
Unescape View File

@ -6,11 +6,11 @@ @@ -6,11 +6,11 @@
.post-area-new
display: none
z-index: 5
background: $main-background-color
background: $main-color-dark !important
position: absolute
bottom: 0
width: 100%
padding: 0!important
width: 100% !important
padding: 20px!important
.modal-header
h3 span
display: inline-block!important
@ -21,14 +21,14 @@ @@ -21,14 +21,14 @@
.modal-content
+box-sizing(border-box)
width: 100%
background: #f0f0f0
.post-photo
height: 48px
width: 48px
.post-text
margin-left: 58px
font-size: .9em
font-size: .9rem
.post-info-name
float: none
.post-info-tag
@ -60,13 +60,19 @@ @@ -60,13 +60,19 @@
.direct-messages-list
.post:hover:after
display: block
.post:hover
background: white
li
position: relative
border-bottom: 1px solid $main-background-color
.direct-messages-thread
padding-bottom: 150px
padding-bottom: 180px
max-width: 420px
margin: auto
li
position: relative
position: relative!important
.post
@extend .clear-fix
background: none
@ -78,7 +84,8 @@ @@ -78,7 +84,8 @@
display: block
text-align: center
font-size: 10px
margin: 10px 0
padding-top: 10px
margin-bottom: 10px
cursor: default
position: static
&:hover
@ -108,18 +115,18 @@ @@ -108,18 +115,18 @@
position: relative
display: inline-block
max-width: 300px
font-size: .9em
font-size: .9rem
padding: 5px 10px
z-index: 4
float: left
word-wrap: break-word
max-width: 60%
min-height: 15px
max-width: 70%
min-height: 48px
.post-photo
position: absolute
left: 0
top: 10px
top: 35px

6
sass/layout/_menu.sass
Unescape View File

@ -9,15 +9,15 @@ $menu-font-color: white @@ -9,15 +9,15 @@ $menu-font-color: white
height: $menu-height
left: 0
margin: 0
background-color: lighten($main-color-dark,10%)
//+background-image(radial-gradient(at top , $color-green,$color-blue) )
background-color: #64676C
//+background-image(linear-gradient(to left , $color-green, $color-green, #5E80A2) )
z-index: 2
ul
@extend .clear-fix
+box-sizing(border-box)
width: 100%
max-width: 75%
max-width: 70%
margin: 0
background: image-url("logo.png") no-repeat 50% 50%
background-size: 20px

66
sass/layout/_modal.sass
Unescape View File

@ -9,9 +9,9 @@ $header-modal-height : $menu-height @@ -9,9 +9,9 @@ $header-modal-height : $menu-height
.modal-wrapper
background: white
background: $bloc-background-color
z-index: 3000
width: 25%
width: 30%
position: fixed
+box-sizing(border-box)
@extend .box-shadow
@ -19,6 +19,11 @@ $header-modal-height : $menu-height @@ -19,6 +19,11 @@ $header-modal-height : $menu-height
right: 0
bottom: 0
overflow: hidden
.postboard
border: none
padding: 0
.post-area-new
padding: 10px
@ -36,14 +41,15 @@ $header-modal-height : $menu-height @@ -36,14 +41,15 @@ $header-modal-height : $menu-height
overflow: hidden
overflow-y: auto
.postboard-news
position: absolute
position: fixed
display: block
right: 0
z-index: 20
right: 2px
top: $header-modal-height +2
z-index: 2000
@extend .color-1
h2 span
display: none
background: $bloc-light-color
background: $bloc-background-color
@ -51,7 +57,7 @@ $header-modal-height : $menu-height @@ -51,7 +57,7 @@ $header-modal-height : $menu-height
.modal-header
position: relative
background: $main-color-dark
background: darken(#64676C,12%)
height: $header-modal-height
+box-sizing(border-box)
@extend .clear-fix
@ -102,19 +108,12 @@ $header-modal-height : $menu-height @@ -102,19 +108,12 @@ $header-modal-height : $menu-height
position: relative
width: 100%
margin: auto
background: $main-background-color
background: $bloc-background-color
h2
display: block
.post-text
margin: 0 0 0 40px
.post-photo
width: 30px
height: 30px
img
width: 100%
height: 100%
//+border-radius(50%)
@ -132,8 +131,7 @@ $header-modal-height : $menu-height @@ -132,8 +131,7 @@ $header-modal-height : $menu-height
.modal-buttons
padding: 10px
text-align: right
button:last-child
padding: 5px 20px
/************ FOLLOWING-CONFIG MODAL **********/
@ -167,6 +165,12 @@ $header-modal-height : $menu-height @@ -167,6 +165,12 @@ $header-modal-height : $menu-height
.post-expand, .post-interactions
display: none
.post-info-time
position: static
float: right
.post-text
margin-top: 10px
margin-bottom: 10px
/********* REPLY POSTS MODAL***************/
@ -233,8 +237,9 @@ $header-modal-height : $menu-height @@ -233,8 +237,9 @@ $header-modal-height : $menu-height
width: 100%
@extend .clear-fix
color: $defaut-font-color
background: $bloc-background-color
&:hover
background: $bloc-background-color
background: $bloc-light-color
.mini-profile-photo
height: 48px
width: 48px
@ -250,18 +255,21 @@ $header-modal-height : $menu-height @@ -250,18 +255,21 @@ $header-modal-height : $menu-height
/******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal
.modal-content
padding: 15px
+box-sizing(border-box)
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.twister-user
position: relative
padding: 5px
a.twister-user-name
color: $defaut-font-color
span
padding-bottom: .5rem
font-size: 1rem
line-height: 1rem
color: $defaut-font-color
font-weight: 500
opacity: 1
letter-spacing: 0
.twister-user-info
text-align: left
font-size: .8rem
@ -275,4 +283,4 @@ $header-modal-height : $menu-height @@ -275,4 +283,4 @@ $header-modal-height : $menu-height
.bio
color: rgba(0, 0, 0, 0.6)
font-style: italic
padding: .5rem
padding-bottom: .5rem

43
sass/layout/_postboard.sass
Unescape View File

@ -3,11 +3,12 @@ @@ -3,11 +3,12 @@
// vars for postboard
$avatar-width : 48px
$avatar-width : 45px
.postboard
width: 100%
width: 40%
margin-left: 30%
padding: 20px
h2
display: none
@ -20,13 +21,13 @@ $avatar-width : 48px @@ -20,13 +21,13 @@ $avatar-width : 48px
display: none
.post
background: $bloc-background-color
background: $bloc-light-color
position: relative
margin-bottom: 1px
@extend .box-shadow
+transition-property(margin)
+transition-duration(.4s)
+transition-duration(.5s)
+transition-timing-function(ease-out)
.post, .original.post, .post.open
position: relative
@ -48,10 +49,11 @@ $avatar-width : 48px @@ -48,10 +49,11 @@ $avatar-width : 48px
.postboard-posts > .post
+border-radius(2px)
&.open
margin-top: $space
margin-bottom: $space
+border-radius(2px)
&:after
content: ""
@ -71,7 +73,7 @@ $avatar-width : 48px @@ -71,7 +73,7 @@ $avatar-width : 48px
.open
background: none!important
@extend .box-shadow
.post-photo
margin: 0
@ -79,13 +81,9 @@ $avatar-width : 48px @@ -79,13 +81,9 @@ $avatar-width : 48px
float: left
vertical-align: middle
width: $avatar-width
height: $avatar-width
overflow: hidden
img
width: 100%
height: 100%
//+border-radius(50%)
height: auto!important
.post-info-name
font-weight: 600
@ -120,18 +118,9 @@ $avatar-width : 48px @@ -120,18 +118,9 @@ $avatar-width : 48px
.post-text
margin: 0 0 0 ($avatar-width +10)
word-wrap: break-word
min-height: $avatar-width
min-height: $avatar-width - 20
padding: 0
samp
background: #eee
font-size: .9rem
line-height: .9rem
display: inline-block
padding: 5px 8px
+border-radius(2px)
color: #333
font-weight: 500
font-family: monospace
.post-context
@ -244,13 +233,14 @@ $avatar-width : 48px @@ -244,13 +233,14 @@ $avatar-width : 48px
padding: 5px 5px 0 5px
@extend .clear-fix
.image-preview
width: 100%
max-width: 100%
width: auto
display: block
margin: auto
.preview-container
max-height: 500px
width: 100%
text-align: center
overflow-y: auto
@ -304,6 +294,5 @@ $avatar-width : 48px @@ -304,6 +294,5 @@ $avatar-width : 48px
display: inline-block
.post-replies .sub-replies
border-left: solid 3px $main-color-color
margin-left: 1px
border-left: solid 18px $main-background-color

15
sass/layout/_profile.sass
Unescape View File

@ -26,13 +26,14 @@ $modal-postboard-post-height: 100% @@ -26,13 +26,14 @@ $modal-postboard-post-height: 100%
.postboard
width: 100%
height: 100%
position: relative
position: absolute
.postboard-posts
display: block
height: $modal-postboard-post-height
overflow-y: auto
overflow: auto
.postboard-posts .post
padding: 0
margin-bottom: 1px
@ -41,6 +42,8 @@ $modal-postboard-post-height: 100% @@ -41,6 +42,8 @@ $modal-postboard-post-height: 100%
.profile-card
margin: 0
padding: 0
.profile-data
background: none
.profile-modal
h2.profile-screen-name
@ -58,7 +61,7 @@ $modal-postboard-post-height: 100% @@ -58,7 +61,7 @@ $modal-postboard-post-height: 100%
.profile-card
width: 100%
background: white
background: $bloc-light-color
padding: $modal-gut
.profile-card-main
position: relative
@ -122,11 +125,7 @@ $modal-postboard-post-height: 100% @@ -122,11 +125,7 @@ $modal-postboard-post-height: 100%
.twister-user-info
@extend .clear-fix
text-align: center
width: 100%
padding: 0

289
sass/style.sass
Unescape View File

@ -1,4 +1,7 @@ @@ -1,4 +1,7 @@
@import '../css/jquery.mCustomScrollbar.css'
@import compass
@import 'compass/reset'
@import 'compass/utilities'
@ -26,7 +29,6 @@ @@ -26,7 +29,6 @@
.promoted-posts-only
margin: 0 0
@extend .clear-fix
@ -56,7 +58,7 @@ @@ -56,7 +58,7 @@
/* Wrapper and blocks */
.wrapper
width: 50%
width: 100%
max-width: 100%
margin: auto
padding-top: $menu-height
@ -65,21 +67,32 @@ @@ -65,21 +67,32 @@
.dashboard
&.left
position: fixed
position: absolute
top: $menu-height
left: 0
height: 100vh
overflow: hidden
width: 25%
width: 30%
> .module
float: right
&.right
position: fixed
right: 0
top: $menu-height
overflow: hidden
width: 25%
width: 30%
> .module
max-width: 320px
margin-bottom: 20px
background: $bloc-light-color
width: 100%
@extend .box-shadow
h3
float: left
padding: 20px
h4
clear: left
border-top: 1px solid $main-background-color
padding: 10px
@ -176,10 +189,7 @@ ul.userMenu-search-profiles @@ -176,10 +189,7 @@ ul.userMenu-search-profiles
.mini-profile
@extend .box-shadow
.mini-profile-info
position: relative
text-align: center
background: $bloc-background-color
padding: 20px 0
a.button
background: $main-color-light
@ -212,17 +222,21 @@ ul.userMenu-search-profiles @@ -212,17 +222,21 @@ ul.userMenu-search-profiles
font-size: .8em
width: 25%
float: left
text-align: center
border-right: 1px solid $main-background-color
&:last-child
border: none
a
color: $dark-grey
color: lighten($dark-grey,20%)
display: block
padding: 1em 0
padding: 1rem 0
&:hover
text-decoration: underline
color: $dark-grey
&:before
display: block!important
width: 100%!important
font-size: 1.4rem!important
.userMenu-connections a
@extend .icon-bell
@ -349,11 +363,11 @@ ul.userMenu-search-profiles @@ -349,11 +363,11 @@ ul.userMenu-search-profiles
-moz-transition: height 0.3s linear
-o-transition: height 0.3s linear
-ms-transition: height 0.3s linear
height: 28px
height: 48px
border: none
background: rgba(255, 255, 255, 1)
border: 1px solid rgba(0, 0, 0, 0.1)
padding: 3px
padding: 5px
margin: 5px 0
&:focus
border-bottom: solid 1px $main-color-color
@ -398,6 +412,13 @@ ul.userMenu-search-profiles @@ -398,6 +412,13 @@ ul.userMenu-search-profiles
margin: 0 0 10px 0
#post-preview
background: $bloc-background-color
border: 1px solid $main-background-color
padding: 15px
+transition-property(all)
+transition-duration(.1s)
width: 100%!important
@ -438,31 +459,25 @@ textarea.splited-post @@ -438,31 +459,25 @@ textarea.splited-post
.who-to-follow
&.module
margin-bottom: 20px
background: white
padding: 20px
width: 100%
@extend .box-shadow
li
width: 100%
min-height: auto
border-bottom: 1px solid $main-background-color
margin: 0
padding-bottom: 10px
margin-top: 10px
&:last-child
border: none
@extend .clear-fix
button
position: absolute
right: 0
top: 20%
right: 10px
top: 10px
@extend .small
display: none
&:hover button
display: block
.bio
text-align: left!important
small
display: none
h3
float: left
padding: 20px
ol
@extend .clear-fix
clear: both
@ -470,27 +485,29 @@ textarea.splited-post @@ -470,27 +485,29 @@ textarea.splited-post
.twister-user
position: relative
box-sizing: border-box
background: $bloc-background-color
background: $bloc-light-color
@extend .clear-fix
@extend .col
@extend .col-3
border-top: 1px solid $main-background-color
width: 100%
min-height: auto
&:nth-child(4n)
@extend .last
padding: 10px 0
clear: left
+transition-property(background)
+transition-duration(.1s)
@extend .clear-fix
&:hover
background: white
img.twister-user-photo
+border-radius(50%)
float: left
vertical-align: middle
display: block
float: left
vertical-align: middle
width: 48px
height: 48px
margin: 10px
height: auto
margin: 0 10px
background: $main-background-color
@ -609,97 +626,117 @@ ol.toptrends-list @@ -609,97 +626,117 @@ ol.toptrends-list
/********* TWISTDAY REMINDER *******/
.twistday-reminder
width: 100%
background: white
@extend .box-shadow
@extend .clear-fix
padding: 20px
small
display: none
.twister-user
background: $bloc-light-color
position: relative
+transition-property(background)
+transition-duration(.1s)
&:hover
background: white
.twister-user-full, .twister-user-tag
padding: 0 0 .5rem 0
font-size: 1rem
line-height: 1rem
color: $defaut-font-color
font-weight: 500
opacity: 1
letter-spacing: 0
display: inline-block
.twisterday
font-size: 12px
/******* LOADER *************/
.postboard-loading, .loading-roller
clear: both
text-align: center
font-size: 100px
width: .4em
height: .4em
position: relative
list-style: none
border-radius: 50%
margin: 100px auto
display: none
div
display: inline-block
width: 120px
height: 10px
background-color: $main-color-light
position: relative
margin: 10px 0 0 0
&:after
content: ""
position: absolute
background-color: white
left: 2px
top: 2px
bottom: 2px
z-index: 999
animation-name: slide
animation-duration: 1.5s
animation-easing-function: linear
animation-iteration-count: infinite
-webkit-animation-name: slide
-webkit-animation-duration: 1.5s
-webkit-animation-easing-function: linear
-webkit-animation-iteration-count: infinite
-moz-animation-name: slide
-moz-animation-duration: 1.5s
-moz-animation-easing-function: linear
-moz-animation-iteration-count: infinite
@keyframes slide
0%
right: 60px
left: 2px
5%
left: 2px
50%
right: 2px
left: 60px
55%
right: 2px
100%
right: 60px
left: 2px
@-webkit-keyframes slide
0%
right: 100px
left: 2px
5%
left: 2px
50%
right: 2px
left: 100px
55%
right: 2px
100%
right: 100px
left: 2px
@-moz-keyframes slide
0%
right: 60px
left: 2px
5%
left: 2px
50%
right: 2px
left: 60px
55%
right: 2px
100%
right: 60px
left: 2px
width: .1em
height: .1em
position: absolute
border-radius: 50%
&:nth-child(1)
background: #62839F
top: 0
left: 50%
margin-left: -.05em
transform-origin: 50% 250%
animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate
&:nth-child(2)
background: #749294
top: 50%
right: 0
margin-top: -.05em
transform-origin: -150% 50%
animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate
&:nth-child(3)
background: #94AC7E
bottom: 0
left: 50%
margin-left: -.05em
transform-origin: 50% -150%
animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate
&:nth-child(4)
background: #B4C669
top: 50%
left: 0
margin-top: -.05em
transform-origin: 250% 50%
animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate
@keyframes rota
to
transform: rotate(360deg)
@keyframes opa
12.0%
opacity: 0.80
19.5%
opacity: 0.88
37.2%
opacity: 0.64
40.5%
opacity: 0.52
52.7%
opacity: 0.69
60.2%
opacity: 0.60
66.6%
opacity: 0.52
70.0%
opacity: 0.63
79.9%
opacity: 0.60
84.2%
opacity: 0.75
91.0%
opacity: 0.87
/* Options*/

Write Preview
Loading…
Cancel
Save