From 399476c526528af9a9feea6105716b2626312f45 Mon Sep 17 00:00:00 2001 From: Nikolai Kristiansen Date: Wed, 31 Jul 2013 17:11:31 +0200 Subject: [PATCH] Dont wrap artists on frontpage --- wp-content/themes/studio13/css/app.css | 62 +++++++++++++++--------- wp-content/themes/studio13/sass/app.scss | 1 + 2 files changed, 40 insertions(+), 23 deletions(-) diff --git a/wp-content/themes/studio13/css/app.css b/wp-content/themes/studio13/css/app.css index 38cdbb1..83922de 100644 --- a/wp-content/themes/studio13/css/app.css +++ b/wp-content/themes/studio13/css/app.css @@ -385,9 +385,10 @@ form .row .row.collapse .column, form .row .row.collapse .columns { padding: 0; form .row input.column, form .row input.columns, form .row textarea.column, form .row textarea.columns { padding-left: 0.5em; } /* Label Styles */ -label { font-size: 0.875em; color: #4d4d4d; cursor: pointer; display: block; font-weight: 500; margin-bottom: 0.1875em; } +label { font-size: 0.875em; color: #4d4d4d; cursor: pointer; display: block; font-weight: 500; margin-bottom: 0.1875em; /* Styles for required inputs */ } label.right { float: none; text-align: right; } label.inline { margin: 0 0 1em 0; padding: 0.625em 0; } +label small { text-transform: capitalize; color: #666666; } /* Attach elements to the beginning or end of an input */ .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; border-style: solid; border-width: 1px; overflow: hidden; font-size: 0.875em; height: 2.3125em; line-height: 2.3125em; } @@ -435,12 +436,21 @@ fieldset { border: solid 1px #dddddd; padding: 1.25em; margin: 1.125em 0; } fieldset legend { font-weight: bold; background: white; padding: 0 0.1875em; margin: 0; margin-left: -0.1875em; } /* Error Handling */ -.error input, input.error, .error textarea, textarea.error { border-color: #c60f13; background-color: rgba(198, 15, 19, 0.1); } -.error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus { background: #fafafa; border-color: #999999; } +span.error, small.error { display: block; padding: 0.375em 0.25em; margin-top: 0; margin-bottom: 1em; font-size: 0.75em; font-weight: bold; background: #c60f13; color: white; display: none; } -.error label, label.error { color: #c60f13; } +.error input, .error textarea, .error select { border-color: #c60f13; background-color: rgba(198, 15, 19, 0.1); margin-bottom: 0; } +.error input:focus, .error textarea:focus, .error select:focus { background: #fafafa; border-color: #999999; } +.error label, .error label.error { color: #c60f13; } +.error small.error { display: block; padding: 0.375em 0.25em; margin-top: 0; margin-bottom: 1em; font-size: 0.75em; font-weight: bold; background: #c60f13; color: white; } +.error span.error-message { display: block; } -.error small, small.error { display: block; padding: 0.375em 0.25em; margin-top: -1.3125em; margin-bottom: 1em; font-size: 0.75em; font-weight: bold; background: #c60f13; color: white; } +input.error, textarea.error { border-color: #c60f13; background-color: rgba(198, 15, 19, 0.1); } +input.error:focus, textarea.error:focus { background: #fafafa; border-color: #999999; } + +.error select { border-color: #c60f13; background-color: rgba(198, 15, 19, 0.1); } +.error select:focus { background: #fafafa; border-color: #999999; } + +label.error { color: #c60f13; } /* Button Groups */ .button-group { list-style: none; margin: 0; *zoom: 1; } @@ -504,17 +514,18 @@ fieldset legend { font-weight: bold; background: white; padding: 0 0.1875em; mar .orbit-container { overflow: hidden; width: 100%; position: relative; background: whitesmoke; } .orbit-container .orbit-slides-container { list-style: none; margin: 0; padding: 0; position: relative; } -.orbit-container .orbit-slides-container img { display: block; } -.orbit-container .orbit-slides-container > * { position: relative; float: left; height: auto; } +.orbit-container .orbit-slides-container img { display: block; max-width: 100%; } +.orbit-container .orbit-slides-container > * { position: absolute; top: 0; width: 100%; margin-left: 100%; } +.orbit-container .orbit-slides-container > *:first-child { margin-left: 0%; } .orbit-container .orbit-slides-container > * .orbit-caption { position: absolute; bottom: 0; background-color: black; background-color: rgba(0, 0, 0, 0.6); color: white; width: 100%; padding: 10px 14px; font-size: 0.875em; } -.orbit-container .orbit-slide-number { position: absolute; top: 10px; left: 10px; font-size: 12px; color: white; background: rgba(0, 0, 0, 0); } +.orbit-container .orbit-slide-number { position: absolute; top: 10px; left: 10px; font-size: 12px; color: white; background: rgba(0, 0, 0, 0); z-index: 10; } .orbit-container .orbit-slide-number span { font-weight: 700; padding: 0.3125em; } -.orbit-container .orbit-timer { position: absolute; top: 10px; right: 10px; height: 6px; width: 100px; } +.orbit-container .orbit-timer { position: absolute; top: 10px; right: 10px; height: 6px; width: 100px; z-index: 10; } .orbit-container .orbit-timer .orbit-progress { height: 100%; background-color: black; background-color: rgba(0, 0, 0, 0.6); display: block; width: 0%; } .orbit-container .orbit-timer > span { display: none; position: absolute; top: 10px; right: 0px; width: 11px; height: 14px; border: solid 4px #000; border-top: none; border-bottom: none; } .orbit-container .orbit-timer.paused > span { right: -6px; top: 9px; width: 11px; height: 14px; border: inset 8px; border-right-style: solid; border-color: transparent transparent transparent #000; } .orbit-container:hover .orbit-timer > span { display: block; } -.orbit-container .orbit-prev, .orbit-container .orbit-next { position: absolute; top: 50%; margin-top: -25px; background-color: black; background-color: rgba(0, 0, 0, 0.6); width: 50px; height: 60px; line-height: 50px; color: white; text-indent: -9999px !important; } +.orbit-container .orbit-prev, .orbit-container .orbit-next { position: absolute; top: 50%; margin-top: -25px; background-color: black; background-color: rgba(0, 0, 0, 0.6); width: 50px; height: 60px; line-height: 50px; color: white; text-indent: -9999px !important; z-index: 10; } .orbit-container .orbit-prev > span, .orbit-container .orbit-next > span { position: absolute; top: 50%; margin-top: -16px; display: block; width: 0; height: 0; border: inset 16px; } .orbit-container .orbit-prev { left: 0; } .orbit-container .orbit-prev > span { border-right-style: solid; border-color: transparent; border-right-color: #fff; } @@ -524,8 +535,8 @@ fieldset legend { font-weight: bold; background: white; padding: 0 0.1875em; mar .orbit-container .orbit-next:hover > span { border-left-color: #ccc; } .orbit-bullets { margin: 0 auto 30px auto; overflow: hidden; position: relative; top: 10px; } -.orbit-bullets li { display: block; width: 18px; height: 18px; background: #999999; float: left; margin-right: 6px; border: solid 2px #222222; -webkit-border-radius: 1000px; border-radius: 1000px; } -.orbit-bullets li.active { background: #222222; } +.orbit-bullets li { display: block; width: 10px; height: 10px; background: #999999; float: left; margin-right: 6px; border: solid 1px #555555; -webkit-border-radius: 1000px; border-radius: 1000px; } +.orbit-bullets li.active { background: #555555; } .orbit-bullets li:last-child { margin-right: 0; } .touch .orbit-container .orbit-prev, .touch .orbit-container .orbit-next { display: none; } @@ -533,6 +544,9 @@ fieldset legend { font-weight: bold; background: white; padding: 0 0.1875em; mar @media only screen and (min-width: 768px) { .touch .orbit-container .orbit-prev, .touch .orbit-container .orbit-next { display: inherit; } .touch .orbit-bullets { display: block; } } +@media only screen and (max-width: 768px) { .orbit-stack-on-small .orbit-slides-container { height: auto !important; } + .orbit-stack-on-small .orbit-slides-container > * { position: relative; margin-left: 0% !important; } + .orbit-stack-on-small .orbit-timer, .orbit-stack-on-small .orbit-next, .orbit-stack-on-small .orbit-prev, .orbit-stack-on-small .orbit-bullets { display: none; } } .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: black; background: rgba(0, 0, 0, 0.45); z-index: 98; display: none; top: 0; left: 0; } .reveal-modal { visibility: hidden; display: none; position: absolute; left: 50%; z-index: 99; height: auto; margin-left: -40%; width: 80%; background-color: white; padding: 1.25em; border: solid 1px #666666; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); top: 50px; } @@ -556,18 +570,20 @@ fieldset legend { font-weight: bold; background: white; padding: 0 0.1875em; mar .label.success { background-color: #5da423; color: white; } .label.secondary, body .label.button { background-color: #ff8200; color: white; } -/* Pagination */ -.pagination { display: block; height: 1.5em; margin-left: -0.3125em; } -.pagination li { display: block; float: left; height: 1.5em; color: #222222; font-size: 0.875em; margin-left: 0.3125em; } -.pagination li a { display: block; padding: 0.0625em 0.4375em 0.0625em; color: #999999; } -.pagination li:hover a, .pagination li a:focus { background: #e6e6e6; } -.pagination li.unavailable a { cursor: default; color: #999999; } -.pagination li.unavailable:hover a, .pagination li.unavailable a:focus { background: transparent; } -.pagination li.current a { background: #007aff; color: white; font-weight: bold; cursor: default; } -.pagination li.current a:hover, .pagination li.current a:focus { background: #007aff; } +/* Default Pagination */ +ul.pagination { display: block; height: 1.5em; margin-left: -0.3125em; } +ul.pagination li { height: 1.5em; color: #222222; font-size: 0.875em; margin-left: 0.3125em; } +ul.pagination li a { display: block; padding: 0.0625em 0.4375em 0.0625em; color: #999999; } +ul.pagination li:hover a, ul.pagination li a:focus { background: #e6e6e6; } +ul.pagination li.unavailable a { cursor: default; color: #999999; } +ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus { background: transparent; } +ul.pagination li.current a { background: #007aff; color: white; font-weight: bold; cursor: default; } +ul.pagination li.current a:hover, ul.pagination li.current a:focus { background: #007aff; } +ul.pagination li { float: left; display: block; } +/* Pagination centred wrapper */ .pagination-centered { text-align: center; } -.pagination-centered ul > li { float: none; display: inline-block; } +.pagination-centered ul.pagination li { float: none; display: inline-block; } /* Tables */ table { background: white; margin-bottom: 1.25em; border: solid 1px #dddddd; } @@ -693,7 +709,7 @@ h4.no-margin, .home article .article-header h1 { line-height: 1.1; margin-bottom .social-media .icon-twitter { margin-left: 0.25em; } .social-media .follow { position: relative; font-size: 0.85em; top: -8px; } -.sidebar .lineup ul.artists { padding-left: 0; margin-left: 16px; margin-bottom: 10px; list-style-type: none; text-transform: uppercase; font-size: 1.2em; font-weight: bold; line-height: 1.2; } +.sidebar .lineup ul.artists { padding-left: 0; margin-left: 16px; margin-bottom: 10px; list-style-type: none; text-transform: uppercase; font-size: 1.2em; font-weight: bold; line-height: 1.2; white-space: nowrap; } .sidebar .lineup ul.artists a { color: #007aff; } .sidebar .lineup ul.artists a:hover { color: white; background-color: #ff8200; } .sidebar .lineup ul.artists.headliners { margin-top: 10px; font-size: 2em; } diff --git a/wp-content/themes/studio13/sass/app.scss b/wp-content/themes/studio13/sass/app.scss index 6bf60fc..2a8f2a1 100644 --- a/wp-content/themes/studio13/sass/app.scss +++ b/wp-content/themes/studio13/sass/app.scss @@ -415,6 +415,7 @@ h4.no-margin, font-size: 1.2em; font-weight: bold; line-height: 1.2; + white-space: nowrap; a { color: $primary-color;