Skip to content

Commit

Permalink
Theme updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@rowanhogan
rowanhogan committed Apr 2, 2016
1 parent 9a95385 commit 1dd6e57
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 120 deletions.
186 changes: 69 additions & 117 deletions app/styles/_main.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@

.main_page {
$left-column-width: 33.333%;
$padding: 3em;

#header-image, .page-title, footer {
Expand All @@ -11,7 +10,6 @@
padding: 0;
padding-bottom: $padding;
max-width: 100%;
padding-left: $left-column-width;
}

#content {
Expand Down Expand Up @@ -49,21 +47,12 @@
margin: 0 !important;
}

#mp-tfa,
#mp-right {
position: absolute;
top: 0;
overflow: hidden;
box-sizing: border-box;
}

#mp-tfa {
display: block;
padding: 2em $padding !important;
left: 0;
height: calc(100vh - 55px);
width: $left-column-width !important;
position: relative;
overflow: hidden;
padding: 2em $padding !important;
box-sizing: border-box;

&.has-bg-image {
color: white !important;
Expand All @@ -74,15 +63,15 @@
}

> p {
max-height: 50vh;
max-height: 300px;
max-width: 480px;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3em;
line-height: 1.667em;
text-align: justify;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(white 50%, transparent);
background: -webkit-linear-gradient(white, transparent 60%);
-webkit-background-clip: text;
// max-width: 600px;
margin: 1em auto;
Expand Down Expand Up @@ -151,32 +140,32 @@
}
}

#mp-right {
left: $left-column-width;
right: 0;
width: (100% - $left-column-width) !important;
height: calc(50vh - 27.5px);
}

#mp-middle, #mp-lower {
position: absolute;
top: calc(50vh - 27.5px);
height: calc(50vh - 27.5px);
margin: 0 !important;
overflow: auto;
box-sizing: border-box;
width: (100% - $left-column-width) / 2 !important;
}

#mp-middle {
padding: $padding !important;
left: $left-column-width;
border-right: thin solid #eee !important;
}

#mp-lower {
right: 0;
}
// #mp-right {
// left: $left-column-width;
// right: 0;
// width: (100% - $left-column-width) !important;
// height: calc(50vh - 27.5px);
// }
//
// #mp-middle, #mp-lower {
// position: absolute;
// top: calc(50vh - 27.5px);
// height: calc(50vh - 27.5px);
// margin: 0 !important;
// overflow: auto;
// box-sizing: border-box;
// width: (100% - $left-column-width) / 2 !important;
// }
//
// #mp-middle {
// padding: $padding !important;
// left: $left-column-width;
// border-right: thin solid #eee !important;
// }

// #mp-lower {
// right: 0;
// }

#mp-other, #mp-sister, #mp-lang {
display: none;
Expand All @@ -185,13 +174,13 @@
#mp-itn, #mp-otd, #mp-dyk {
padding: 2em $padding;

@media (min-width: 900px) {
float: left;
width: 50% !important;
overflow: auto;
height: calc(50vh - 27.5px);
box-sizing: border-box;
}
// @media (min-width: 900px) {
// float: left;
// width: 50% !important;
// overflow: auto;
// height: calc(50vh - 27.5px);
// box-sizing: border-box;
// }

ul {
padding: 0;
Expand Down Expand Up @@ -294,20 +283,20 @@
}
}

@media (min-width: 900px) {
#mp-dyk {
position: fixed;
left: $left-column-width;
width: $left-column-width !important;
height: calc(50vh - 27.5px);
bottom: 0;
z-index: 1000;
}

#mp-middle {
display: none;
}
}
// @media (min-width: 900px) {
// #mp-dyk {
// position: fixed;
// left: $left-column-width;
// width: $left-column-width !important;
// height: calc(50vh - 27.5px);
// bottom: 0;
// z-index: 1000;
// }
//
// #mp-middle {
// display: none;
// }
// }

#mp-right {
border-bottom: thin solid #ddd !important;
Expand All @@ -330,6 +319,8 @@
display: block;
margin: 0 0 1.5em;
font-family: $title-stack;
font-size: 1.5em;
line-height: 1.25em;
position: relative;
z-index: 10;
text-align: center;
Expand Down Expand Up @@ -420,58 +411,19 @@
margin: 0 !important;
}


@media (max-width: 900px) {

#mp-tfa, #mp-right {
position: relative;
width: 100% !important;
left: auto;
right: auto;
height: auto !important;
}

#mp-tfa {
height: 480px !important;
width: 100% !important;
overflow: hidden;

> p {
max-height: 256px;
}
}

.container {
padding: 0;
}

#mp-tfa>#mp-tfa-img img {
height: auto;
width: 100% !important;
}

#mp-middle, #mp-lower {
position: relative;
left: auto;
width: 100% !important;
height: auto !important;
top: auto;
}
}

@media (min-width: 700px) and (max-width: 900px) {
#mp-itn, #mp-otd {
float: left;
width: 50%;
box-sizing: border-box;
border-top: thin solid #ddd;
margin-top: 0;
position: relative;
}

#mp-itn, #mp-otd,
#mp-middle {
border: 0 !important;
}
}
// @media (min-width: 700px) and (max-width: 900px) {
// #mp-itn, #mp-otd {
// float: left;
// width: 50%;
// box-sizing: border-box;
// border-top: thin solid #ddd;
// margin-top: 0;
// position: relative;
// }
//
// #mp-itn, #mp-otd,
// #mp-middle {
// border: 0 !important;
// }
// }
}
22 changes: 19 additions & 3 deletions app/styles/_themes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,23 @@ html.sans {
.search-form input {
border-color: #333;
}

&.main_page {
#mp-tfa.has-bg-image {
background: #111 !important;

> #mp-tfa-img {
opacity: .25;
}
}


#mp-itn ul li,
#mp-otd ul li,
#mp-dyk ul li {
border-color: #333;
}
}
}

.inverted {
Expand All @@ -129,15 +146,14 @@ html.sans {
opacity: .4;
}


#mp-tfa {
color: #222 !important;
background: white !important;

> p {
background-image: -webkit-linear-gradient(#222 50%, transparent);
background: -webkit-linear-gradient(#222, transparent 60%);
}

a {
color: black !important;
}
Expand Down

0 comments on commit 1dd6e57

Please sign in to comment.