302e8f202d
* Add HTML variants for cta optimization and other nav bar adjustments * Fix 1==1 non-random mistake * Spruce up org call-to-action * Change default text color * Add html variant trial and success request specs * Fix article sidebar caching issue * One line adjustment * Modify schema * Add include ActionView::Helpers::TagHelper to user_tag_spec * Modify follow_button to remove session context * Dummy commit * Change Edit Article to Edit Post * Dummy commit * Fix rubocop concerns * Fix rubocop style
1017 lines
No EOL
21 KiB
SCSS
1017 lines
No EOL
21 KiB
SCSS
@import 'variables';
|
|
|
|
.stories-show{
|
|
background:$lightest-gray;
|
|
}
|
|
|
|
.unpublished{
|
|
background:$red;
|
|
display:block;
|
|
text-align:center;
|
|
position:relative;
|
|
padding:calc(10px + 1.3vw) 10px;
|
|
color:white;
|
|
font-family: $helvetica;
|
|
@media screen and ( min-width: 380px ){
|
|
font-size:1.2em;
|
|
line-height: 1.5em;
|
|
}
|
|
&:hover{
|
|
opacity:0.92;
|
|
color:white;
|
|
}
|
|
em{
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.blank-space{
|
|
height:10px;
|
|
}
|
|
.video-player-header{
|
|
background:$black;
|
|
margin-top:0;
|
|
max-width:1050px;
|
|
margin:auto;
|
|
margin-bottom:15px;
|
|
height:56.25vw;
|
|
overflow:hidden;
|
|
@media screen and ( min-width: 880px ){
|
|
height:492px;
|
|
}
|
|
@media screen and ( min-width: 950px ){
|
|
border-top-left-radius:2px;
|
|
border-top-right-radius:2px;
|
|
}
|
|
}
|
|
header{
|
|
padding:0px 0px;
|
|
position:relative;
|
|
.image{
|
|
position:relative;
|
|
width:100%;
|
|
margin:auto;
|
|
max-width:1024px;
|
|
background: transparent no-repeat center center;
|
|
background-size: cover;
|
|
z-index:2;
|
|
padding-top: 42%;
|
|
@media screen and ( min-width: 950px ){
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
}
|
|
.category-banner{
|
|
height:250px;
|
|
background: #45525c;
|
|
}
|
|
}
|
|
|
|
.home .container{
|
|
@media screen and ( min-width: 1250px ){
|
|
margin-left: 25px;
|
|
}
|
|
}
|
|
|
|
.container{
|
|
width:880px;
|
|
max-width:100%;
|
|
background:white;
|
|
margin:68px auto 20px;
|
|
text-align: left;
|
|
box-shadow: $bold-shadow;
|
|
|
|
@media screen and ( min-width: 880px ){
|
|
border: 1px solid darken($light-medium-gray, 2%);
|
|
}
|
|
@media screen and ( min-width: 950px ){
|
|
border-radius: 3px;
|
|
}
|
|
@media screen and ( min-width: 1250px ){
|
|
margin-top:72px;
|
|
}
|
|
&.article{
|
|
position:relative;
|
|
z-index:5;
|
|
}
|
|
.title{
|
|
position:relative;
|
|
width:81%;
|
|
font-family: $helvetica;
|
|
@media screen and ( max-width:550px) {
|
|
width:88%;
|
|
}
|
|
@media screen and ( max-width: 430px ) {
|
|
width:93%;
|
|
}
|
|
max-width:710px;
|
|
margin:auto;
|
|
.org-branded-title-link{
|
|
color:lighten($black,4%);
|
|
.org-branded-title{
|
|
font-size:calc(0.9em + 0.3vw);
|
|
padding:8px 0px 6px;
|
|
margin-bottom:-8px;
|
|
@media screen and (min-width: 1600px ){
|
|
font-size:20px;
|
|
}
|
|
.org-pic{
|
|
height:calc(27px + 0.5vw);
|
|
width:calc(27px + 0.5vw);
|
|
display:inline;
|
|
vertical-align:calc(-8px - 0.1vw);
|
|
border-radius:100px;
|
|
margin-right:0.2vw;
|
|
background:$light-gray;
|
|
}
|
|
}
|
|
}
|
|
h1{
|
|
margin:0px auto;
|
|
padding:14px 0px 7px;
|
|
font-weight: 500;
|
|
min-height:40px;
|
|
font-size:calc(2vw + 26px);
|
|
@media screen and (min-width: 1600px ){
|
|
font-size:57px;
|
|
}
|
|
.title-block{
|
|
display:inline-block;
|
|
}
|
|
&.medium{
|
|
font-size:calc(1.85vw + 25px);
|
|
@media screen and (min-width: 1600px ){
|
|
font-size:47px;
|
|
}
|
|
}
|
|
&.long{
|
|
font-size:calc(1.52vw + 23px);
|
|
@media screen and (min-width: 1600px ){
|
|
font-size:46px;
|
|
}
|
|
}
|
|
&.longer{
|
|
font-size:calc(1.48vw + 22px);
|
|
@media screen and (min-width: 1600px ){
|
|
font-size:45px;
|
|
}
|
|
}
|
|
&.longest{
|
|
font-size:calc(1.42vw + 22px);
|
|
@media screen and (min-width: 1600px ){
|
|
font-size:42px;
|
|
}
|
|
}
|
|
}
|
|
h3{
|
|
margin:4px auto;
|
|
padding:0;
|
|
padding:0px 3px 16px;
|
|
font-weight: 500;
|
|
color:$medium-gray;
|
|
font-size:13.5px;
|
|
line-height:1.5em;
|
|
@media screen and ( min-width: 430px ){
|
|
font-size:15px;
|
|
}
|
|
|
|
.profile-pic{
|
|
width:28px;
|
|
height:28px;
|
|
border-radius:50px;
|
|
display:inline-block;
|
|
vertical-align:-9px;
|
|
margin-right:2px;
|
|
background:$light-gray;
|
|
|
|
}
|
|
a{
|
|
color:$medium-gray;
|
|
text-decoration:none;
|
|
}
|
|
.icon-img{
|
|
opacity:0.5;
|
|
width:18px;
|
|
height:18px;
|
|
vertical-align:-4px;
|
|
margin:0px 1px;
|
|
&:hover{
|
|
opacity:0.6;
|
|
}
|
|
}
|
|
.published-at{
|
|
margin-right:0px;
|
|
display:inline-block;
|
|
}
|
|
.posted-date-inline {
|
|
display:inline-block;
|
|
}
|
|
.action-space{
|
|
a{
|
|
display:inline-block;
|
|
background:$green;
|
|
color:$black;
|
|
padding:2px 8px 3px;
|
|
border-radius:3px;
|
|
line-height:1.1em;
|
|
font-family: $helvetica-condensed;
|
|
font-stretch:condensed;
|
|
@media screen and ( max-width: 340px ){
|
|
padding:2px 3px 3px;
|
|
margin-left:3px;
|
|
margin-left:5px;
|
|
.post-word{
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tags{
|
|
// margin-top:-2.2vw;
|
|
.tag{
|
|
display:inline-block;
|
|
border-radius:3px;
|
|
font-size:13px;
|
|
font-weight:bold;
|
|
padding:2px 5px 3px;
|
|
border-radius:2px;
|
|
background:#d6d9e0;
|
|
color:#606570;
|
|
&:hover{
|
|
opacity:0.9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.article-collection-wrapper{
|
|
text-align:center;
|
|
font-family: $helvetica;
|
|
font-size:15px;
|
|
p{
|
|
border-bottom:2px solid $black;
|
|
width:120px;
|
|
margin:35px auto 15px;
|
|
padding:2px 0px;
|
|
font-weight:bold;
|
|
}
|
|
.article-collection{
|
|
display:inline-block;
|
|
user-select: none;
|
|
font-size:16px;
|
|
overflow:hidden;
|
|
width:92%;
|
|
max-width:718px;
|
|
margin-bottom: 1.1vw;
|
|
a{
|
|
color:$black;
|
|
padding:calc(0.8vw + 10px);
|
|
background:$lightest-gray;
|
|
display:inline-block;
|
|
position:relative;
|
|
z-index:4;
|
|
max-width:260px;
|
|
margin:0.2vw;
|
|
border-radius:5px;
|
|
&:first-child{
|
|
// margin-left:-5px;
|
|
}
|
|
&:hover{
|
|
background:darken($lightest-gray,3%);
|
|
}
|
|
&.current-article{
|
|
background: $black;
|
|
color:white;
|
|
}
|
|
&.coming-soon{
|
|
pointer-events: none;
|
|
color:lighten($black,78%);
|
|
}
|
|
}
|
|
}
|
|
&.article-collection-wrapper-bottom{
|
|
margin-bottom:3vw;
|
|
p{
|
|
margin-top:5px;
|
|
}
|
|
}
|
|
}
|
|
.body{
|
|
margin:auto;
|
|
width:82%;
|
|
font-family: $helvetica;
|
|
font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
|
|
font-size: 21px;
|
|
line-height: 32px;
|
|
background:white;
|
|
position:relative;
|
|
z-index:5;
|
|
padding-bottom:5px;
|
|
overflow-wrap: break-word;
|
|
a{
|
|
code{
|
|
color:$sky-blue;
|
|
}
|
|
}
|
|
h1,h2,h3,h4,h5,h6{
|
|
font-family: $helvetica;
|
|
}
|
|
h1{
|
|
font-size:1.85em;
|
|
line-height:1.14em;
|
|
padding-left:4px;
|
|
padding-right:4px;
|
|
font-weight:400;
|
|
}
|
|
h2{
|
|
font-size:1.7em;
|
|
font-weight:400;
|
|
line-height:1.14em;
|
|
padding-left:6px;
|
|
padding-right:6px;
|
|
padding-bottom:0;
|
|
margin-bottom:0.5em;
|
|
}
|
|
h3{
|
|
font-size:1.32em;
|
|
font-weight:400;
|
|
padding-left:6px;
|
|
padding-right:6px;
|
|
}
|
|
h4{
|
|
padding-left:6px;
|
|
padding-right:6px;
|
|
}
|
|
h5{
|
|
padding-left:6px;
|
|
padding-right:6px;
|
|
}
|
|
h6{
|
|
padding-left:6px;
|
|
padding-right:6px;
|
|
}
|
|
|
|
hr{
|
|
width:calc(25% + 12px);
|
|
opacity:0.1;
|
|
border:1px solid black;
|
|
margin:1.3em auto 1.5em;
|
|
}
|
|
p{
|
|
margin:0.95em 0 1.20em;
|
|
padding:0.2em;
|
|
}
|
|
ul,ol{
|
|
padding-left:6px;
|
|
margin:0.8em 0.7em 0.8em 1.9em;
|
|
}
|
|
ol{
|
|
br{
|
|
line-height: 0em;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
}
|
|
ul{
|
|
list-style-type: square;
|
|
br{
|
|
line-height: 0em;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
p{
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
ul{
|
|
margin:0em 0.7em 0em 1.9em;
|
|
list-style-type: circle;
|
|
}
|
|
}
|
|
li{
|
|
margin:0.3em auto;
|
|
}
|
|
figcaption{
|
|
font-style:italic;
|
|
text-align:center;
|
|
font-size:0.8em;
|
|
line-height:1.4em;
|
|
color:darken($medium-gray,8%);
|
|
display:block;
|
|
margin-top:-0.8em;
|
|
}
|
|
@media screen and ( max-width:550px) {
|
|
width:90%;
|
|
}
|
|
@media screen and ( max-width: 430px ) {
|
|
font-size: 17.5px;
|
|
line-height: 26px;
|
|
width:94%;
|
|
margin-left:3%;
|
|
ul,ol{
|
|
margin:0.8em 0.7em 0.8em 1.4em;
|
|
}
|
|
h1{
|
|
font-size:1.6em;
|
|
}
|
|
h2{
|
|
font-size:1.40em;
|
|
}
|
|
h3{
|
|
font-size:1.16em;
|
|
}
|
|
}
|
|
blockquote{
|
|
// border:1px solid lighten($light-medium-gray,3%);
|
|
border-left:calc(0.2vw + 2px) solid $dark-gray;
|
|
padding:0.1% 6% 0.1% 4%;
|
|
// background:lighten($lightest-gray,3%);
|
|
// border-radius: 3px;
|
|
margin:1.6em 1vw;
|
|
font-size:0.92em;
|
|
line-height:1.4em;
|
|
p{
|
|
padding:0;
|
|
margin:0.95em 0 0.95em;
|
|
}
|
|
&.twitter-tweet{
|
|
font-family: $helvetica;
|
|
background:white;
|
|
max-width:456px;
|
|
border:1px solid #e9eef2;
|
|
font-size:0.75em;
|
|
line-height:1.35em;
|
|
border-radius:5px;
|
|
margin:1.6em auto;
|
|
padding:60px 10px 18px;
|
|
color: white;
|
|
min-height:60px;
|
|
padding:33px 15px 8px;
|
|
|
|
a{
|
|
color:white;
|
|
}
|
|
@media screen and ( min-width: 360px ){
|
|
padding:60px 22px 18px;
|
|
min-height:105px;
|
|
}
|
|
}
|
|
}
|
|
code{
|
|
margin:auto;
|
|
background:$lightest-gray;
|
|
padding:0.1em 0.3em 0px;
|
|
border-radius:2px;
|
|
color:#333842;
|
|
font-size:0.84em;
|
|
vertical-align:0em;
|
|
max-width:100%;
|
|
line-height:1.6em;
|
|
}
|
|
pre{
|
|
background:#29292e;
|
|
border-radius:2px;
|
|
overflow-x:auto;
|
|
color:#eff0f9;
|
|
line-height:1.42em;
|
|
padding-left:4%;
|
|
padding-right:7%;
|
|
font-size:0.7em;
|
|
width:97%;
|
|
margin-left:-3%;
|
|
padding-top:6%;
|
|
padding-bottom:6%;
|
|
border-radius: 0px;
|
|
overflow-wrap: normal;
|
|
@media screen and ( min-width: 430px ){
|
|
width:111%;
|
|
margin-left:-11%;
|
|
padding-left:9%;
|
|
padding-right:2%;
|
|
}
|
|
code{
|
|
background:#29292e;
|
|
color:#eff0f9;
|
|
white-space: pre;
|
|
}
|
|
|
|
}
|
|
img{
|
|
height:auto;
|
|
position:relative;
|
|
display:block;
|
|
margin:auto;
|
|
left:-4%;
|
|
max-width:108%;
|
|
@media screen and ( min-width: 430px ){
|
|
left:-6px;
|
|
max-width: calc(100% + 12px);
|
|
}
|
|
}
|
|
a.article-body-image-wrapper{
|
|
cursor:zoom-in;
|
|
}
|
|
|
|
iframe{
|
|
width:100%;
|
|
border:0;
|
|
margin:1.2em 0;
|
|
}
|
|
|
|
.fluidvids{
|
|
margin:1em 0;
|
|
iframe{
|
|
margin:0;
|
|
}
|
|
}
|
|
.table-wrapper-paragraph{
|
|
width:100%;
|
|
margin-left:0%;
|
|
overflow-x:auto;
|
|
@media screen and ( min-width: 430px ){
|
|
width:108%;
|
|
margin-left:-4%;
|
|
}
|
|
@media screen and ( min-width: 800px ){
|
|
width:110%;
|
|
margin-left:-5%;
|
|
}
|
|
}
|
|
|
|
table{
|
|
font-family: $helvetica;
|
|
border-collapse: collapse;
|
|
font-size:0.78em;
|
|
margin:0.8em auto 1.2em;
|
|
table-layout: fixed;
|
|
@media screen and ( min-width: 500px ){
|
|
font-size:0.9em;
|
|
}
|
|
th{
|
|
border: 1px solid $light-medium-gray;
|
|
padding:5px 1vw;
|
|
background:$lightest-gray;
|
|
text-align:left;
|
|
}
|
|
td{
|
|
border: 1px solid $light-medium-gray;
|
|
padding:5px 1vw;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.twitter-tweet{
|
|
margin:auto;
|
|
}
|
|
}
|
|
.about-the-author{
|
|
margin:auto;
|
|
width:calc(100% - 5px);
|
|
// max-width:450px;
|
|
position:relative;
|
|
overflow:hidden;
|
|
padding:0px 0px 5px;
|
|
background:white;
|
|
font-family: $helvetica;
|
|
a{
|
|
color:$black;
|
|
}
|
|
@media screen and ( min-width: 520px) {
|
|
width:82%;
|
|
}
|
|
.left-column{
|
|
text-align:center;
|
|
float:left;
|
|
width:90px;
|
|
padding-top:8px;
|
|
.profile-pic{
|
|
width:70px;
|
|
height:70px;
|
|
border-radius:100px;
|
|
display:inline-block;
|
|
background: no-repeat center center;
|
|
background-size: cover;
|
|
// vertical-align:-9px;
|
|
margin-right:2px;
|
|
margin-bottom:12px;
|
|
}
|
|
}
|
|
.main-content{
|
|
margin:auto;
|
|
width:calc(100% - 92px);
|
|
float:left;
|
|
h4{
|
|
margin:13px 0px 0px;
|
|
font-size:28px;
|
|
text-align:left;
|
|
font-weight:400;
|
|
button{
|
|
background: $green;
|
|
color:$black;
|
|
font-family: $helvetica-condensed;
|
|
font-stretch:condensed;
|
|
border:0;
|
|
font-size:15px;
|
|
border-radius:5px;
|
|
vertical-align:2px;
|
|
padding:4px 7px;
|
|
display:none;
|
|
margin-left:6px;
|
|
&.showing{
|
|
display:inline-block;
|
|
}
|
|
}
|
|
}
|
|
p{
|
|
margin:2px 0px;
|
|
padding-left:0px;
|
|
line-height:22px;
|
|
font-size:0.88em;
|
|
}
|
|
.social{
|
|
font-size:0.85em;
|
|
a{
|
|
color:$medium-gray;
|
|
margin-right:6px;
|
|
display:inline-block;
|
|
.icon-img{
|
|
width:15px;
|
|
height:15px;
|
|
vertical-align:-2px;
|
|
margin:0px;
|
|
opacity:0.7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.article-actions{
|
|
text-align:center;
|
|
padding:9px 0px 16px;
|
|
position: fixed;
|
|
bottom:0;
|
|
z-index:22;
|
|
background: white;
|
|
border: 1px solid darken($light-medium-gray, 2%);
|
|
box-shadow: $bold-shadow;
|
|
width: 100%;
|
|
@media screen and ( min-width: 880px ){
|
|
margin-left: -1px;
|
|
margin-right: -1px;
|
|
width: 880px;
|
|
padding:6px 0px;
|
|
}
|
|
button{
|
|
background:transparent;
|
|
margin: 0px 0.22vw;
|
|
padding: 3px calc(0.88vw + 3px);
|
|
border-radius:100px;
|
|
border:2px solid darken($light-gray, 7%);
|
|
font-family: $helvetica-condensed;
|
|
font-stretch:condensed;
|
|
img{
|
|
height:23px;
|
|
width:23px;
|
|
transition: -webkit-filter 0.2s, opacity 0.2s, background-color 0.2s;
|
|
@media screen and ( min-width: 500px ){
|
|
height:28px;
|
|
width:28px;
|
|
}
|
|
}
|
|
.reaction-number{
|
|
display:inline-block;
|
|
vertical-align:5px;
|
|
margin-left:4px;
|
|
color:$medium-gray;
|
|
font-size:14px;
|
|
width:27px;
|
|
@media screen and ( min-width: 500px ){
|
|
width:37px;
|
|
font-size:18px;
|
|
vertical-align:7px;
|
|
margin-left:7px;
|
|
}
|
|
}
|
|
&:hover{
|
|
border:2px solid #88aacc;
|
|
}
|
|
&.activated{
|
|
img{
|
|
filter: none;
|
|
opacity:1;
|
|
}
|
|
}
|
|
&.user-activated {
|
|
border:2px solid darken($bold-blue, 40%);
|
|
background: linear-gradient(60deg, #f4d2d2, #efb6b6);
|
|
img{
|
|
filter: none;
|
|
opacity:1;
|
|
}
|
|
&.unicorn-reaction-button{
|
|
background: linear-gradient(60deg, #d6e5fc, #c9deff);
|
|
}
|
|
&.readinglist-reaction-button{
|
|
background: linear-gradient(60deg, #d2cdf2, #beb8ef);
|
|
}
|
|
.reaction-number{
|
|
color: darken($bold-blue, 40%);
|
|
}
|
|
&.user-animated{
|
|
animation: reaction 0.3s;
|
|
}
|
|
}
|
|
}
|
|
.article-share-action-block{
|
|
display: inline-block;
|
|
position:relative;
|
|
width: 40px;
|
|
button{
|
|
border: 2px solid white;
|
|
min-width: 38px;
|
|
opacity:0.7;
|
|
&:hover{
|
|
border: 2px solid $light-gray;
|
|
opacity:1;
|
|
}
|
|
.dropdown-icon{
|
|
vertical-align: -2px;
|
|
}
|
|
}
|
|
.dropdown-content{
|
|
display:none;
|
|
position:absolute;
|
|
bottom: 45px;
|
|
right: 2px;
|
|
z-index: 100;
|
|
background: white;
|
|
font-size: 0.85em;
|
|
border: 1px solid $light-medium-gray;
|
|
border-radius: 3px;
|
|
text-align:left;
|
|
min-width: 270px;
|
|
box-shadow: $shadow;
|
|
&.showing{
|
|
display: block;
|
|
}
|
|
.dropdown-link-row{
|
|
img{
|
|
width: 15px;
|
|
margin-right: 10px;
|
|
margin-left: 10px;
|
|
vertical-align: -2px;
|
|
}
|
|
input{
|
|
border: 1px dashed black;
|
|
padding: 4px 6px;
|
|
font-size: 14px;
|
|
width: calc(100% - 58px);
|
|
border-radius: 3px;
|
|
margin: 10px auto 5px;
|
|
}
|
|
a{
|
|
font-weight: bold;
|
|
color: $black;
|
|
padding: 10px;
|
|
width: calc(100% - 20px);
|
|
display:block;
|
|
&:hover{
|
|
background: $light-gray;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.article-actions-comments-count{
|
|
display: none;
|
|
position:relative;
|
|
color: $medium-gray;
|
|
font-weight: bold;
|
|
font-size: calc(0.8em + 0.1vw);
|
|
vertical-align: calc(7px - 0.07vw);
|
|
border:2px solid darken($light-gray, 7%);
|
|
font-family: $helvetica-condensed;
|
|
font-stretch: condensed;
|
|
padding: 4px 0.88vw;
|
|
border-radius: 3px;
|
|
@media screen and ( min-width: 620px ){
|
|
display: inline-block;
|
|
}
|
|
@media screen and ( min-width: 1250px ){
|
|
font-size: 0.92em;
|
|
vertical-align: 6px;
|
|
}
|
|
img{
|
|
height: 18px;
|
|
width: 18px;
|
|
}
|
|
}
|
|
.article-actions-tweet-button{
|
|
padding: 7px 0 6px;
|
|
border-radius:3px;
|
|
border:2px solid darken($light-gray, 7%);
|
|
margin-right: 0.15vw;
|
|
margin-left: calc(0.2vw + 11px);
|
|
vertical-align: calc(3px - 0.07vw);
|
|
text-align:center;
|
|
width: 50px;
|
|
display: none;
|
|
img{
|
|
height:23px;
|
|
width:23px;
|
|
vertical-align:-4px;
|
|
}
|
|
@media screen and ( min-width: 370px ){
|
|
display: inline-block;
|
|
}
|
|
@media screen and ( min-width: 500px ){
|
|
padding: 2px 0 2px;
|
|
vertical-align: calc(6px - 0.07vw);
|
|
}
|
|
@media screen and ( min-width: 1250px ){
|
|
padding: 3px 0 3px;
|
|
vertical-align: 5px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.showpage-reaction-cta{
|
|
width: 390px;
|
|
max-width:78%;
|
|
margin: 30px auto;
|
|
padding: 20px 10px;
|
|
position:relative;
|
|
box-shadow: 3px 4px 0px darken($green, 25%);
|
|
display: none;
|
|
.down-arrow{
|
|
position: absolute;
|
|
bottom: -20px;
|
|
left: 30px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 20px solid transparent;
|
|
border-right: 20px solid transparent;
|
|
border-top: 27px solid $green;
|
|
}
|
|
}
|
|
.showpage-signin-cta{
|
|
background: lighten($yellow, 16%);
|
|
border: 1px solid darken($yellow, 15%);
|
|
box-shadow: 5px 6px 0px darken($yellow, 15%);
|
|
width: 680px;
|
|
max-width:88%;
|
|
margin: auto;
|
|
text-align: center;
|
|
padding: 40px 5%;
|
|
font-size: 1.11em;
|
|
line-height: 1.33em;
|
|
margin-bottom: 30px;
|
|
a{
|
|
color: $black;
|
|
text-decoration: underline;
|
|
display: inline-block;
|
|
&.primary-cta-link{
|
|
font-size: 1.35em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.show-comments-header{
|
|
width:800px;
|
|
max-width:90%;
|
|
margin:auto;
|
|
margin-bottom:-50px;
|
|
text-align:center;
|
|
font-family: $helvetica;
|
|
}
|
|
.show-comments-footer{
|
|
width:800px;
|
|
max-width:98%;
|
|
margin:auto;
|
|
margin-top:-80px;
|
|
text-align:center;
|
|
.full-discussion-button{
|
|
padding:calc(0.6vw + 6px) 0px;
|
|
border-radius:3px;
|
|
display:block;
|
|
width: 100%;
|
|
margin:7.5vw auto calc(1vw + 5px);
|
|
max-width:450px;
|
|
background: $green;
|
|
color: $black;
|
|
font-family: $helvetica-condensed;
|
|
font-stretch:condensed;
|
|
@media screen and ( min-width: 500px ){
|
|
font-size:1.1em;
|
|
}
|
|
&:hover{
|
|
opacity:0.96;
|
|
}
|
|
}
|
|
}
|
|
|
|
.org-branding{
|
|
font-family: $helvetica;
|
|
text-align:center;
|
|
margin-top:20px;
|
|
margin-bottom:0px;
|
|
padding-bottom:20px;
|
|
a{
|
|
color: $black;
|
|
}
|
|
.inner{
|
|
width:800px;
|
|
max-width:calc(100% - 40px);
|
|
overflow:hidden;
|
|
padding:24px 20px 0px;
|
|
margin:auto;
|
|
}
|
|
.content{
|
|
font-size:calc(0.45vw + 16px);
|
|
@media screen and ( min-width: 520px ){
|
|
float:left;
|
|
width:calc(100% - 150px);
|
|
text-align:left;
|
|
}
|
|
.name{
|
|
font-size:2.2em;
|
|
font-weight:500;
|
|
}
|
|
.summary{
|
|
padding-top:5px;
|
|
padding-right:10px;
|
|
padding-bottom:8px;
|
|
font-weight:400;
|
|
font-size:0.9em;
|
|
@media screen and ( min-width: 520px ){
|
|
font-size:17px;
|
|
}
|
|
}
|
|
.social{
|
|
font-size:0.9em;
|
|
margin:4px 0px;
|
|
@media screen and ( min-width: 520px ){
|
|
font-size:18px;
|
|
}
|
|
a{
|
|
margin-right:10px;
|
|
opacity:0.85;
|
|
&:hover{
|
|
opacity:1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.profile-image{
|
|
text-align:center;
|
|
width:100%;
|
|
float:left;
|
|
padding-top:6px;
|
|
@media screen and ( min-width: 520px ){
|
|
width:150px;
|
|
}
|
|
img{
|
|
height:100px;
|
|
width:100px;
|
|
border-radius:5px;
|
|
border-radius: 140px;
|
|
border: 3px solid $light-gray;
|
|
background: $light-gray;
|
|
}
|
|
}
|
|
}
|
|
.comments-container-container{
|
|
padding-bottom:20px;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
@keyframes SHW {
|
|
from {
|
|
bottom:-80px;
|
|
}
|
|
to {
|
|
bottom:-0px;
|
|
|
|
}
|
|
}
|
|
|
|
@keyframes reaction {
|
|
0% {
|
|
padding-left: calc(0.88vw + 3px);
|
|
padding-right: calc(0.88vw + 3px);
|
|
}
|
|
50% {
|
|
padding-left: calc(1.1vw + 3px);
|
|
padding-left: calc(1.1vw + 3px);
|
|
}
|
|
100% {
|
|
padding-left: calc(0.88vw + 3px);
|
|
padding-right: calc(0.88vw + 3px);
|
|
}
|
|
} |