A lot of updates so far today...
This commit is contained in:
Godwin
@@ -11,14 +11,14 @@
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'alte_haas_groteskbold';
|
||||
src: url('/assets/ahg.eot');
|
||||
src: url('/assets/ahg.eot?#iefix') format('embedded-opentype'),
|
||||
url('/assets/ahg.woff') format('woff'),
|
||||
url('/assets/ahg.ttf') format('truetype'),
|
||||
url('/assets/ahg.svg#alte_haas_groteskbold') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: 'AlteHaasGroteskBold';
|
||||
src: url('/assets/AlteHaasGroteskBold.eot');
|
||||
src: url('/assets/AlteHaasGroteskBold.eot?#iefix') format('embedded-opentype'),
|
||||
url('/assets/AlteHaasGroteskBold.woff') format('woff'),
|
||||
url('/assets/AlteHaasGroteskBold.ttf') format('truetype'),
|
||||
url('/assets/AlteHaasGroteskBold.svg#alte_haas_groteskbold') format('svg');
|
||||
font-weight: bold;
|
||||
font-style: bold;
|
||||
}
|
||||
|
||||
// Libraries
|
||||
|
||||
@@ -37,7 +37,8 @@
|
||||
|
||||
// We use these to control header font styles
|
||||
//$header-font-family: 'ff-ernestine-web-pro', sans-serif;//join("Open Sans", $body-font-family);
|
||||
$header-font-family: 'Alte Haas Grotesk', sans-serif;//join("Open Sans", $body-font-family);
|
||||
//$header-font-family: 'alte_haas_groteskbold', 'Alte Haas Grotesk', sans-serif;//join("Open Sans", $body-font-family);
|
||||
$header-font-family: 'AlteHaasGroteskBold', sans-serif;//join("Open Sans", $body-font-family);
|
||||
$header-font-weight: bold;
|
||||
// $header-font-style: normal;
|
||||
// $header-font-color: #222;
|
||||
|
||||
@@ -99,3 +99,190 @@ ul.tags,
|
||||
color: lighten($body-font-color, 10);
|
||||
}
|
||||
}
|
||||
|
||||
.org-preview {
|
||||
/*display: block;
|
||||
position: relative;
|
||||
margin: 3em 0 0;
|
||||
background-color: $organization-color;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
/*&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-top: 50%;
|
||||
}*/
|
||||
|
||||
/*figcaption {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
height: 2em;
|
||||
width: 100%;
|
||||
background-color: $organization-color;
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
img {
|
||||
background-color: $white;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}*/
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
li {
|
||||
position: relative;
|
||||
margin-bottom: 1em;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-top: 50%;
|
||||
}
|
||||
|
||||
h4, h5 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
min-height: 2em;
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
padding: 0.25em 0.5em;
|
||||
color: $white;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
figure {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-blend-mode: luminosity;
|
||||
@include single-transition(all, 100ms, ease-in);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $white;
|
||||
opacity: 0.5;
|
||||
@include single-transition(all, 100ms, ease-in);
|
||||
}
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 2em;
|
||||
bottom: 0;
|
||||
max-width: 90%;
|
||||
max-height: 66.667%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
figure {
|
||||
background-color: transparent;
|
||||
|
||||
&:after {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.city figure {
|
||||
background-color: rgba($primary-color, 0.75);
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.org-list li {
|
||||
h4 {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
|
||||
h5 {
|
||||
background-color: $organization-color;
|
||||
}
|
||||
|
||||
figure {
|
||||
background-color: $organization-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.conference-list li {
|
||||
h4 {
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
|
||||
h5 {
|
||||
background-color: $conference-color;
|
||||
}
|
||||
|
||||
figure {
|
||||
background-color: $conference-color;
|
||||
}
|
||||
}
|
||||
|
||||
li.city figure {
|
||||
background-color: rgba($primary-color, 0.75);
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
margin-left: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
.organizations-index,
|
||||
.conferences-index {
|
||||
#content {
|
||||
h2 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,6 +57,7 @@ body {
|
||||
width: 25%;
|
||||
padding: 2.5%;
|
||||
font-size: 1em;
|
||||
min-height: 100vh;
|
||||
|
||||
.button, p {
|
||||
display: block;
|
||||
@@ -93,7 +94,32 @@ body {
|
||||
main {
|
||||
min-height: 100%;
|
||||
//overflow: auto;
|
||||
background-color: $primary-color;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 1em;
|
||||
overflow: auto;
|
||||
background-color: lighten($color-5, 20);
|
||||
|
||||
.organizations & {
|
||||
background-color: lighten(desaturate($organization-color, 25), 50);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.conferences & {
|
||||
background-color: lighten(desaturate($conference-color, 25), 50);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
padding: 4em;
|
||||
|
||||
.organizations-show & {
|
||||
min-height: 25em;
|
||||
min-height: 50vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#banner {
|
||||
@@ -135,14 +161,22 @@ main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
@include background-image(linear-gradient(top, rgba(0,0,0,0) 50%, darken($primary-color, 25) 100%));
|
||||
@include background-image(linear-gradient(top, rgba(0,0,0,0) 50%, darken($conference-color, 25) 100%));
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.row {
|
||||
height: 50%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
|
||||
.align-bottom {
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.align-bottom > div {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.button {
|
||||
@@ -159,11 +193,110 @@ main {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.organizations & {
|
||||
background-color: rgba($organization-color, 0.33);
|
||||
|
||||
&:after {
|
||||
@include background-image(linear-gradient(top, rgba(0,0,0,0) 50%, darken($organization-color, 25) 100%));
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $color-4;
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
+ em {
|
||||
display: block;
|
||||
color: $color-5;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.organizations-show & {
|
||||
h1 {
|
||||
line-height: 0.9em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
figure {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.conferences-show & {
|
||||
.columns.banner {
|
||||
height: 75%;
|
||||
padding-bottom: 1em;
|
||||
|
||||
figure {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.organizations-index &,
|
||||
.conferences-index & {
|
||||
height: 13vw;
|
||||
min-height: 0;
|
||||
background-position: center 25%;
|
||||
|
||||
h1 {
|
||||
font-size: 8vw;
|
||||
margin-top: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
min-height: 40em;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
|
||||
.organizations-show &,
|
||||
.conferences-show & {
|
||||
min-height: 30em;
|
||||
height: 50%;
|
||||
height: 50vh;
|
||||
|
||||
.row {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
figure {
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.portrait {
|
||||
h1 {
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
figure img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.landscape {
|
||||
.columns {
|
||||
max-height: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.organizations-index &,
|
||||
.conferences-index & {
|
||||
h1 {
|
||||
font-size: 3.75vw;
|
||||
margin-top: 6vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -176,6 +309,10 @@ main {
|
||||
-ms-flex-align: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.centered {
|
||||
|
||||
Reference in New Issue
Block a user