/* Theme Name: RMG2021 Author: Bronwen Hodgkinson / Ardent Design Author URI: https://ardent-design.com/ Description: Custom theme for R. Michelson Galleries Version: 1.1 */ /* RMG colors: background: #E8E1C6 text: #625E51 (med brown) links: #008CBA (blue) links hover: #0079A1 (dk blue) */ /* RMG fonts: body: Georgia headers: Open Sans captions: Open Sans top title / site name: University Roman */ /* NOTES: - comment in quotes are from prev developer's notes. */ /* CONTENTS: Global Elements - Headings - Text Elements - Links - Forms Structure - Header - Nav menu - Main content area - Footer Content Images & Alignments Galleries Error 404 Media Responsive Structure */ @font-face {font-family:UniversityRoman; src:url(assets/University-Roman-Bold-BT.ttf);} /* == Global Elements ----------------------------------------------- */ body {font-family:'Georgia', serif; font-size:12px; color:#625E51; background:#E8E1C6; margin:0; padding:0;} /* Headings */ h1,h2,h3,h4,h5,h6 {font-family:'Open Sans', sans-serif; font-weight:300; /*clear:both;*/} h1.entry-title {font-size:2.75rem; font-family:'Open Sans', sans-serif; font-weight:300; color:#222; padding:0; margin:0 0 35px 0;} /* page titles - NOTE: these are often not used and instead the h1 is manually placed in the content area >:( */ .content-area h1 {font-size:2.75rem; line-height:3.3rem; color:#222; padding:0; margin:0 0 1.5rem 0;} /* title displayed below featured image */ .content-area h2 {color:#222; font-size:2.2rem; line-height:2.5rem; padding:0; margin:0 0 0.7rem 0;} .content-area h3 {color:#625E51; font-size:1.6875rem; line-height:1.9rem; margin-top:0.2rem; margin-bottom:0.7rem;} .content-area h4 {color:#625E51; font-size:1.4rem; line-height:1.7rem; margin-top:0.2rem; margin-bottom:0.7rem;} .content-area h5 {color:#625E51; font-size:1.1rem; line-height:1.4rem; margin-top:0.2rem; margin-bottom:0.7rem;} .content-area h6 {color:#625E51; font-size:0.9rem; line-height:1.2rem; font-weight:300; margin-top:0; margin-bottom:0.7rem;} div.entry-content h2 {font-size:20px; line-height:26px; font-weight:600; margin:0 0 16px 0 !important; padding:0;} /*sub-headers NOT USED? */ div.entry-content h2:first-of-type {} /* Text Elements */ p {font-size:16px; line-height:24px; padding:0; margin:0 0 20px 0;} #content p:last-of-type {} p.caption {} ul, ol {margin:0 0 25px 30px; padding:0;} ul ul {list-style:circle;} li {font-size:16px; line-height:20px; padding-bottom:6px;} li:last-of-type {padding-bottom:0;} ol {list-style:decimal;} ul {list-style:disc;} blockquote {padding:10px 80px; margin:0; clear:both;} blockquote p {font-size:15px; line-height:21px; font-style:italic; color:#686868; margin:0 0 15px 0;} .clearfloats {clear:both; line-height:0; height:0; font-size:0;} strong {font-weight:bold;} cite, em, i {font-style:italic;} hr {border:0; margin:3em 0; height:1px; background:transparent; background-image:linear-gradient(to right, transparent, #9E9769, transparent); clear:both;} /* styles mostly for paypal shop layouts (e.g. https://www.rmichelson.com/artists/leonard-nimoy/photography-books/) */ table {/*border:1px solid red;*/ margin:20px auto; max-width:960px;} tr {border-bottom:1px solid #E8E1C6 !important;} tr {height:auto;} td {font-size:16px; line-height:24px; padding:10px; vertical-align:middle; height:auto;} td form {margin:0; padding:0;} td p {margin:0; padding:0 0 8px 0;} td form br {height:5px !important; display:block;} td form input {margin:5px 0; display:block;} td form select {margin:5px 0; display:block;} /* Links */ a {color:#008CBA; text-decoration:none;} a:visited {color:#008CBA;} a:hover {color:#0079A1;} a:active {color:#008CBA;} a:active, a:focus {outline:none;} /* Forms */ input[type=text], input[type=email], input[type=tel], textarea {background:#fafafa; border:1px solid #ddd; color:#888;} input[type=text]:focus, input[type=email]:focus, input[type=search]:focus, textarea:focus {color:#373737;} textarea {width:98%;} input[type=text], input[type=email], input[type=tel] {padding:3px;} input[type=search] {background:#fafafa url(assets/search.png) no-repeat 5px 6px; font-size:14px; padding:6px 20px 6px 30px; line-height:1.2em; border:1px solid #ddd; color:#888;} input[type=submit] {display:none;} input::placeholder {text-transform:lowercase;} .screen-reader-text {display:none;} /* constant contact email list sign-up form (embed) */ body.page-id-21 #fullwidth #main > p {height:0;} /* kill the height of the empty p tag around the CC script tags */ div.ctct-inline-form {font-family:'Georgia', serif;} form.ctct-form-custom {font-family:'Georgia', serif !important;} h2.ctct-form-header {color:#222; font-size:2.2rem !important; line-height:2.5rem !important; font-family:'Open Sans', sans-serif !important; font-weight:300 !important; margin: 0 0 20px 0 !important; text-align:center;} form.ctct-form-custom p { font-family:'Georgia', serif !important;} p.ctct-form-text {text-align:center;} p.ctct-gdpr-text {text-align:left; line-height:1.2rem !important;} button.ctct-form-button {width:200px !important; margin:0 auto 20px !important;} /* == Structure ----------------------------------------------- */ body.page-id-15 {background-image:url('assets/interior-bg.jpg'); background-repeat:no-repeat; -position:top center; background-attachment:fixed;} body.page-id-10 {background-image:url('assets/exterior-bg.jpg'); background-repeat:no-repeat; -position:top center; background-attachment:fixed;} #page {width:auto; margin:0; padding:0;} /* .site */ /* Header */ #headerwrap {background:#565247;} #masthead {margin:0 auto; max-width:1140px; height:45px; display:flex; justify-content:flex-start; position:relative;} /* .site-header */ .site-branding {padding:0;} h1.site-title {line-height:45px; font-size:1.8rem; font-family:UniversityRoman, serif; font-weight:bold; letter-spacing:0.05em; text-shadow:1px 1px #3d3a32; margin:0; padding:0 16px;} h1.site-title a {color:#C0B99F;} h1.site-title a:hover {color:#C0B99F;} h2.site-description {display:none;} /* Nav menu */ #site-navigation {} /* .main-navigation */ #site-navigation ul {list-style: none; font-family:'Open Sans'; font-size:0.9rem; border:none; margin:0;} #site-navigation li {display:inline-block; margin:0 !important; padding:0 !important; font-size:13px;} #site-navigation li a {color:#E8E1C6; height:45px; line-height:45px; display:inline-block; padding:0 14px;} #site-navigation li a:hover {background:#3D3A32;} #site-navigation li.current-menu-item a {background:#008CBA; color:#fff !important;} #top-search-box {position:absolute; top:7px; right:10px;} #top-search-box input[type=search] {width:200px; margin:0; background-color:#E8E5D7; font-size:13px;} /* Main content area */ #content {border:1px solid #C0B99F; background-color:rgba(232, 229, 217, 0.9);} /* .site-content */ #content, #content-image, #content-posts, #content-single {max-width:1140px; margin:35px auto; padding:0;} /* for Attachments Pages */ /* Primary. DEFAULT template - used for posts and singles and archive (category display) */ #primary {float:left; width:660px; padding:30px 50px 30px; border:1px solid #C0B99F; background-color:rgba(232, 229, 217, 0.9);} #primary img.wp-post-image {margin:0 auto 30px;} #primary .hentry { margin-bottom:15px; /*clear:both;*/} #primary h2.entry-title {margin-bottom:25px;} #primary .entry-content {} #primary .entry-content img { display:inline-block; max-width:100%; height:auto;} #secondary {float:right; width:350px;} .posts-widget-box {border:1px solid #C0B99F; background-color:rgba(232, 229, 217, 0.9); margin-bottom:20px; padding:25px 30px;} .posts-widget-box h4.widget-title {text-transform:uppercase; font-size:0.95rem; padding:0 0 0.7rem 0; margin:0 0 0.8rem 0; border-bottom:1px dashed #625E51; color:#625E51; font-weight:700; font-family:'Open Sans', sans-serif;} .posts-widget-box p:last-child {margin:0;} .posts-widget-box ul {margin:0 0 20px 0; list-style:none;} .posts-widget-box li {font-size:14px; line-height:17px; padding-bottom:10px;} .posts-widget-box ul:last-child {margin-bottom:0;} .posts-widget-box li:last-child {padding-bottom:0;} /* Archive page - lists posts grouped by category, author, date, tag, etc. NOTE: not used but here as a catch-all for older posts */ #archive-page {max-width:1045px; padding:35px 0 30px; margin:0 auto;} /* metaslider styles */ .metaslider {box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px !important;} .metaslider .caption-wrap {background:transparent !important; max-width:25%; opacity:0.85 !important;} .metaslider .caption, .metaslider .cs-title {color:rgb(232, 230, 210); background:rgba(86, 82, 71, 0.84); padding:10px 12px !important; font-size:1.2em; top:10px; text-align:center;} .metaslider .caption-wrap {right:0px !important; top:10px !important; left:auto !important;} /* Templates // Template IDs replace #primary so all still also use the class .content-area */ /* Home page */ #homepage {max-width:1020px; padding:30px 0 30px; margin:0 auto;} #rmgbannerhome {margin:0 auto 30px; max-width:1000px;} /* title image */ #rmgbannerhome img {opacity:0.8; width:100%;} #homepage .gallery {margin:30px auto 30px; max-width:970px;} #homepage p {font-size:18px; line-height:26px; padding:0 20px;} /* soliloquy styles for home page quotes */ div.soliloquy-outer-container {margin:50px auto;} div.homequotes {box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;} div.homequotes {background:#625E51; border-radius:4px; position:relative;} div.homequotes p {font-size:17px; color:#E8E1C6; line-height:24px !important; padding:0; margin:0 auto;} div.homequotes p {width:900px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} /* center quotes vertically */ /* https://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div */ /* Full Width: page-full.php / Used for all general pages linked in footer nav menu - no featured/banner image */ #fullwidth {max-width:1045px; padding:35px 0 30px; margin:0 auto;} /* Sub page: subpage.php / "Used for general pages with no parent. i.e. Gallery Services and framing page, etc." */ #subpage {max-width:1045px; padding:55px 0 30px; margin:0 auto;} #subpage img.wp-post-image {/*border:1px solid #c0b99f;*/ margin:0 auto 30px; display:inline-block; max-width:100%; height:auto; box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;} /* banner featured images are 1045x300px */ /* Artist List: artist-list.php / "Fine Art and Illustration pages" */ #artist-list {max-width:1000px; padding:65px 0 30px; margin:0 auto;} div.metaslider {margin:0 auto 30px; box-shadow:0.3em 0.3em 1em rgba(0,0,0,0.3);} /* rotating banner images are 965x277px */ #artist-list .gallery {margin:40px auto 30px;} /* Artist Page: artist.php / "for artist pages that include bio and links to image pages" */ #artist-page {max-width:1045px; padding:30px 0 30px; margin:0 auto;} #artist-page h1 {text-align:center;} #artist-page img.wp-post-image {/*border:1px solid #c0b99f;*/ margin:0 auto 30px; display:inline-block; max-width:100%; height:auto; box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;} /* banner featured images are 1045x300px */ #artist-page .gallery {margin:50px auto 30px;} #artist-page figcaption.gallery-caption {font-size:0.9rem;} /* Artist Subpage: artworks.php / "for artists pages containing artwork galleries" note: title links back to parent Artist Page */ #artist-subpage {max-width:1045px; padding:30px 0 30px; margin:0 auto;} #artist-subpage h1 {text-align:center;} #artist-subpage img.wp-post-image {/*border:1px solid #c0b99f;*/ margin:0 auto 30px !important; display:inline-block; max-width:100%; height:auto; box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;} /* banner featured images are 1045x300px */ #artist-subpage .gallery {margin:40px auto 30px;} #artist-subpage figcaption.gallery-caption {font-size:0.7rem;} /* Photo Subpage / "for Photo pages from shows" (not sure where this is? never existed?) */ /* Attachment Pages / used for indiv gallery images for purchase info (not a template) */ #image-info {float:left; width:660px; padding:30px 50px 30px; border:1px solid #C0B99F; background-color:rgba(232, 229, 217, 0.9); display:flex; justify-content:center;} #image-info img {border:1px solid #c0b99f; display:inline-block; max-width:100%; height:auto; margin:20px auto 15px;} #image-info h2, #image-info h3 {text-align:center;} #image-info-sidebar {float:right; width:350px;} .image-info-box {border:1px solid #C0B99F; background-color:rgba(232, 229, 217, 0.9); margin-bottom:20px; padding:25px 30px;} .image-info-box h4.widget-title {text-transform:uppercase; font-size:0.95rem; padding:0 0 0.7rem 0; margin:0 0 0.8rem 0; border-bottom:1px dashed #625E51; color:#625E51; font-weight:700; font-family:'Open Sans', sans-serif;} p.image-info-title {font-style:italic;} #image-info-sidebar img {width:100%;} .image-info-box p:last-child {margin:0; padding:0;} /* Search results */ #search-page {max-width:1045px; padding:35px 0 30px; margin:0 auto;} a.more-link {text-transform:lowercase; font-style:italic; display:block;} #search-page .hentry {padding:0;} #search-page .hentry p {} /* Error 404 */ #error-page {max-width:1045px; padding:35px 0 30px; margin:0 auto;} /* .content-area */ /* wraps all content regardless of upper-level template ID */ #main {margin:0 auto; min-height:300px;} /* .site-main - basically just a wrapper within .content-area/templateID div */ /* pagination */ .pagination {font-size:16px;} .pagination div.nav-links {text-align:center;} .pagination a.prev {margin-right:10px;} .pagination a.next {margin-left:10px;} /* Footer */ #colophon {width:auto; margin:0; padding:0;} /* . site-footer */ #footer-widgetswrap {width:auto; margin:0; background:#C0B99F; padding:20px 0 40px;} #footer-widgets {max-width:1140px; margin:0 auto; display:flex; justify-content:center; } div#widget-area {display:flex; flex-wrap:wrap; justify-content:space-around;} #footer-widgets aside.widget {width:200px; font-size:1.0rem; padding:0 40px; line-height:1.6em; } #footer-widgets h4.widget-title {text-transform:uppercase; font-size:0.95rem; padding-bottom:0.7rem; margin-bottom:0.8rem; border-bottom:1px dashed #625E51; color:#625E51; font-weight:700; font-family:'Open Sans', sans-serif;} #footer-widgets p:last-child {margin:0;} #footer-widgets input[type=search] {width:200px; margin-top:7px; background-color:#E8E5D7;} #footer-widgets .a2a_follow a {margin-top:6px;} #footer-navwrap {width:auto; margin:0; padding:0 20px 40px; background:#625E51;} #footer-navigation {display:flex; justify-content:center; margin:0 auto; padding:30px 0 20px; max-width:1140px; border-bottom:1px solid #38362E;} #footer-navigation ul {font-size:0.9rem; margin:0; padding:0; text-align:center;} #footer-navigation li {display:inline-block; padding:0 8px 10px; white-space:nowrap;} #footer-navigation a {color:#E8E1C6;} #footer-navigation a:hover {color:#009CFF;} .site-info {text-align:center; margin:0 auto; padding:30px 0; max-width:1140px;} .site-info p {margin:0; font-size:0.8rem; line-height:1.1rem; color:#C0B99F;} /* scroll back to top link */ p#back-top {font-size:13px; text-align:center; margin:5px auto 0; clear:both;} p#back-top a {text-align:center; text-transform:lowercase; text-decoration:none;} p#back-top a:hover {} /* == Content ----------------------------------------------- */ /* global WP styles within default #primary content area - used for posts (currently unused by RMG but there are some old active posts) */ .comments-area {display:none;} /* == Images & Alignments ----------------------------------------------- */ .alignleft {float:left; margin:0.5em 1.4em 1.7em 0;} .alignright {float:right; margin:0.5em 0 1.7em 1.4em;} .aligncenter {display:block; margin:0.5em auto 1.7em;} figcaption.wp-caption-text {font-size:0.7rem; font-family:'Open Sans', sans-serif;} figure.alignleft img, figure.alignright img, figure.aligncenter img {border:1px solid #c0b99f;} img.alignleft, img.alignright, img.aligncenter {border:1px solid #c0b99f; max-width:100%; height:auto;} blockquote.alignleft, .wp-caption.alignleft {margin:0.6em 1.6em 1.8em 0;} blockquote.alignright, .wp-caption.alignright {margin:0.6em 0 1.8em 1.6em;} blockquote.aligncenter, .wp-caption.aligncenter {clear:both; margin-top:0.5em; margin-bottom:1.6em;} .wp-caption.alignleft, .wp-caption.alignright, .wp-caption.aligncenter {margin-bottom:1.2em;} /* == Galleries ----------------------------------------------- */ /* https://travishorn.com/some-ways-to-align-the-last-row-in-a-flexbox-grid-720f365dcb16 */ /* gallery thumbnail images are all 200px wide */ .gallery {display:grid; grid-template-columns:repeat(auto-fill, 200px); justify-content:space-between; margin:0 auto 20px;} .gallery {/*border:1px solid red;*/ max-width:960px;} figure.gallery-item {margin:0 0 25px 0; width:200px;} div.gallery-icon {} /* class='gallery-icon landscape' */ div.gallery-icon a {} /* class="no-lightbox" */ .gallery div.gallery-icon a img {/*border:2px solid #cfcfcf;*/ box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px; margin:0 auto; display:block;} /* class="attachment-thumbnail size-thumbnail" */ .gallery figcaption.wp-caption-text {font-size:1.0rem; text-align:center; padding:6px 0 0 0; font-family:"Open Sans"; font-weight:600; max-width:200px; background:transparent;} /* class='wp-caption-text gallery-caption' */ /* == Media ----------------------------------------------- */ /* styles for audio player background color */ .mejs-container, .mejs-embed, .mejs-embed body, .mejs-container .mejs-controls {background:#625E51 !important;} .mejs-container {width:50% !important; margin:0 auto;} iframe {border:1px solid #c0b99f;} /* older youtube embeds */ p > iframe {border:1px solid #c0b99f; margin-bottom:10px; margin-top:10px;} div.wpvl_auto_thumb_box {display:block; margin:5px auto; border:1px solid #c0b99f;} audio, canvas {display:inline-block;} embed, iframe, object, video { margin-bottom: 1.8em; max-width: 100%; vertical-align: middle;} p > embed, p > iframe, p > object, p > video {} .wp-audio-shortcode, .wp-video, .wp-playlist.wp-audio-playlist { font-size:15px; font-size:1.5rem; margin-top:0; margin-bottom:1.6em;} /* == Responsive Structure ----------------------------------------------- */ @media only screen and (max-width:768px) /*and (orientation: portrait)*/ { body {width:auto; margin:0; padding:0;} #page {} h1.entry-title, .content-area h1 {text-align:center; font-size:2rem; line-height:2.3rem;} #masthead {height:auto; display:block; padding-bottom:10px;} .site-branding {width:auto;} h1.site-title {text-align:center; margin:0 auto; display:block;} #site-navigation {} #site-navigation ul {display:flex; justify-content:center; flex-wrap:wrap;} #top-search-box {position:relative; top:0; right:0; margin:0 auto; padding:10px 0; width:200px;} /* used for paypal/shop display */ table {width:100%;} table tr {border-bottom:1px solid #C0B99F !important; display: flex; flex-direction: column; padding-top:20px;} table td {display:block; flex: 1 1 auto; width:100% !important; height:auto !important; text-align:center;} table td h2 {font-size:1.7rem !important; line-height:1.9rem !important; padding:0; margin:0 0 0.5rem 0 !important;} table td form {margin:0 auto;} table td form input, table td form select {margin:5px auto !important;} #content {border-left:0; border-right:0;} #content, #content-image, #content-posts, #content-single {margin:35px 0px; padding:0 30px;} #content-posts, #content-single, #content-image {border-top:1px solid #C0B99F; border-bottom:1px solid #C0B99F; background-color:rgba(232, 229, 217, 0.9);} #homepage {padding-top:15px;} #homepage p {font-size:16px; line-height:22px; padding:0;} #subpage, #artist-list {padding-top:40px;} #primary {float:none; width:auto; border:0; background-color:none; margin-bottom:20px; padding:30px 0 30px;} #secondary {float:none; width:auto;} #secondary input[type=search] {margin:0 auto !important;} #image-info {float:none; width:auto; border:0; background-color:none; margin-bottom:20px; padding:30px 0 30px;} #image-info-sidebar {float:none; width:auto;} /* 10/20/21 to center again */ .gallery {max-width:1000px; padding:0; margin:20px auto 20px; display:flex; flex-wrap:wrap; justify-content:space-around; clear:both;} .gallery {gap:0px 0px; /* row-gap column-gap */} figure.gallery-item {margin:5px 7px 20px; width:200px;} .metaslider .caption, .metaslider .cs-title {padding:6px 10px !important; font-size:0.9em; line-height:1.1em; top:10px; text-align:center; } div.soliloquy-outer-container {display:none;} figure.alignleft, figure.alignright, figure.aligncenter {max-width:100%; margin:0 auto;} figure.alignleft img, figure.alignright img, figure.aligncenter img {max-width:100%; height:auto;} figure.wp-caption {} #footer-widgetswrap {padding:20px 20px 40px;} #footer-widgets aside.widget {padding-bottom:20px;} iframe.alignright {display:block; float:none; margin:0.5em auto 1.7em;} } /* END @media only screen and (max-width:768px) */ @media only screen and (max-width:480px) { #rmgbannerhome {display:none;} #masthead {} .site-branding {padding:10px 0 10px 0; width:100%;} h1.site-title {letter-spacing:0.02em; line-height:2.2rem;} #site-navigation li {font-size:12px;} #site-navigation li a {height:35px; line-height:35px; padding:0 10px;} #site-navigation {} .metaslider .caption-wrap {display:none !important;} .alignleft {display:block; float:none; margin:0.5em auto 1.7em;} .alignright {display:block; float:none; margin:0.5em auto 1.7em;} blockquote.alignleft, .wp-caption.alignleft {margin:0.6em auto 1.8em;} blockquote.alignright, .wp-caption.alignright {margin:0.6em auto 1.8em;} .mejs-container {width:100% !important;} img {max-width:100%; width:auto; height:auto;} embed, iframe, object {max-width:100%;} } /* END @media only screen and (max-width:480px) */