From a11c08df62114247c978e1c842819cdee6a4f83d Mon Sep 17 00:00:00 2001 From: Kim Nguyen Date: Tue, 21 May 2024 10:36:53 -0400 Subject: [PATCH] Fix item set show region widths. #40 --- asset/css/style.css | 2 +- asset/sass/_desktop.scss | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/asset/css/style.css b/asset/css/style.css index 18fd284..476456b 100644 --- a/asset/css/style.css +++ b/asset/css/style.css @@ -1 +1 @@ -@media screen{*{box-sizing:border-box}html{height:100%;padding:0;margin:0}body{background-color:#f8f8f8;font-family:"Open Sans",sans-serif;font-size:20px;line-height:30px;margin:0;word-wrap:break-word;overflow-x:none}a:link{text-decoration:none;color:#920b0b}a:visited{color:#920b0b}a:active,a:hover{color:#ed1616}h1{font-size:40px;line-height:60px}h2{font-size:30px;line-height:45px}h3{font-size:25px;line-height:45px}h4{font-size:22.5px}img{max-width:100%;height:auto}input,textarea,button,.button,.resource-list.preview+a,select{font-family:"Open Sans",sans-serif;font-size:20px;line-height:30px;margin:0;vertical-align:top}input[type=text],input[type=password],input[type=email],input[type=url],textarea{appearance:none;border-radius:0;height:45px;border:1px solid #dedede;padding:6.5px 7.5px;margin:0}textarea{height:90px}input[type=file]{line-height:1;vertical-align:bottom;font-size:15px}button,a.button,.resource-list.preview+a,[type=submit]{background-color:#dedede;border-radius:2px;padding:7.5px;display:inline-block;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:0;cursor:pointer}select{background-color:#fff;padding:7.5px;border-color:#dedede;height:45px}::-webkit-input-placeholder{font-style:italic}:-moz-placeholder{font-style:italic}::-moz-placeholder{font-style:italic}:-ms-input-placeholder{font-style:italic}.field{margin:30px 0;display:flex;flex-wrap:wrap}.field .inputs input[type=checkbox]{vertical-align:bottom}.field .field-meta{padding:7.5px 45px 7.5px 0;position:relative;width:100%}.field.multi-value .label,.field.multi-value .field-description{margin-right:7.5px}.field.required .field-meta:after{content:"";font-family:"Font Awesome 5 Free";font-size:15px;font-weight:900}.field .add-value{position:absolute;right:.25rem;top:0;width:45px}.field .value:not(:last-child){margin-bottom:15px}.field-description{font-size:15px}.field .inputs{width:100%}.field .value *{max-width:100%}.field .value select{width:100%;margin-bottom:7.5px}#skipnav{position:fixed;top:30px;left:50%;border:1px solid #ababab;transform:translateX(-50%);z-index:-5;padding:7.5px;background-color:#fff;opacity:0}#skipnav:focus{z-index:1000;opacity:1}header h1{margin:0}header nav{position:relative;padding:0}header nav.closed ul{height:0;overflow:hidden;margin:0}header nav:before{font-family:"Font Awesome 5 Free";content:"";font-weight:900;display:block;width:37.5px;height:37.5px;border:1px solid #dedede;text-align:center;border-radius:2px;position:absolute;right:30px;top:-48.75px;cursor:pointer;line-height:37.5px}header nav.open{margin:15px 0 -1px}header nav.open:before{content:""}header nav ul{padding-left:0;list-style:none;position:relative;margin:0 auto}header nav ul a{display:inline-block;width:100%;padding:7.5px}header nav ul a:hover{border-bottom:0;background-color:#dedede}header nav ul li{border-top:1px solid #dedede;position:relative}header nav ul li li:last-of-type{padding-bottom:0}header nav ul li.active{font-weight:bold}header nav ul li.parent{position:relative}header nav ul .parent-link{display:flex}header nav ul .parent-link>a{width:calc(100% - 60px)}header nav ul .child-toggle{color:#dedede;width:60px;text-align:center;background-color:#fff;border-left:1px solid #dedede;appearance:none}header nav ul .child-toggle:before{font-family:"Font Awesome 5 Free";content:"";font-weight:900}header nav>ul>li:last-child{border-bottom:1px solid #dedede;padding-bottom:-1px}header nav>ul ul li{height:0;overflow:hidden;border:0}header nav ul.open>li{height:auto;border-top:1px solid #dedede;padding-top:-1px}header nav>ul>li>ul>li.active>a{margin-left:-1.5em}header nav>ul>li>ul>li.active>a:before{content:">";display:inline-block;width:1.5em}header nav>ul>li>ul>li a{padding-left:30px}header nav>ul>li>ul>li>ul>li a{padding-left:60px}header nav>ul>li>ul>li>ul>li>ul>li a{padding-left:90px}.sub-menu ul{padding-left:0;list-style-type:none;margin-top:15px}.sub-menu li{font-size:15px;font-weight:bold;border-bottom:1px solid #dedede;padding:7.5px 0 6.5px}.sub-menu li:first-of-type{border-top:1px solid #dedede;padding-top:6.5px}nav.pagination{margin-bottom:30px;font-size:20px;line-height:45px}.pagination input{text-align:center}.resource-list+.pagination{border-color:transparent}.pagination form{min-width:90px;margin-right:15px}.pagination form,.pagination .button,.pagination .resource-list.preview+a,.pagination button,.pagination .page-count{display:inline-block;vertical-align:top;height:45px}.pagination-buttons{margin-right:15px}.pagination .button,.pagination .resource-list.preview+a{border:1px solid #dedede;background-color:#dedede;width:45px;text-align:center;padding:7.5px;border-radius:2px;color:#000;line-height:30px}.pagination .inactive.button,.pagination .resource-list.preview+a.inactive{opacity:.5;color:#ababab;background-color:#fff}.pagination input{width:60px}.breadcrumbs{font-size:15px;margin:15px 0}h1.site-title{font-size:25px;line-height:30px;padding-right:45px;padding-left:30px}header{margin:0 0 75px;background-color:#fff;border-bottom:1px solid #dedede;position:relative}header>*{max-width:1700px;margin-left:auto;margin-right:auto;display:block}.site-title:hover,.site-title:active{border-bottom:0}.site-title h1{margin:0}button.o-icon-search{display:none}#search{position:absolute;top:100%;left:0;right:0;background-color:#fff;border-bottom:1px solid #dedede;border-top:1px solid #dedede;padding:7.5px 30px}#search form{display:flex;flex-wrap:nowrap}#search form input[type=text]{width:100%}#search form button[type=submit]{height:45px;width:45px;text-indent:-9999px;position:relative;border-radius:0 3px 3px 0}#search form button[type=submit]:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;top:0;left:0;right:0;text-align:center;text-indent:0;line-height:45px}.banner{position:relative;display:flex;align-items:center;overflow:hidden;z-index:-1}.banner img{width:100%}footer{max-width:1700px;margin-left:auto;margin-right:auto;padding:0 30px 30px;clear:both}#content{max-width:1700px;margin-left:auto;margin-right:auto;padding:0 30px 30px}.resource-list.preview+a{color:#000}.resource-list.preview+a:hover{background-color:#787878;border-bottom-width:0px;color:#fff}.spotlight{padding:30px;padding-right:calc(50% + 30px);background-position:right center;background-repeat:no-repeat;background-size:50%;margin:60px 0}.spotlight.left-image{background-position:left center;padding-left:calc(50% + 30px);padding-right:0}.spotlight.dark-accent{color:#fff;position:relative}.spotlight.dark-accent:after{content:"";background-color:#787878;z-index:-1;position:absolute;left:-9999px;right:-9999px;top:0;bottom:0}.spotlight.light-accent{position:relative}.spotlight.light-accent:after{content:"";background-color:#fff;z-index:-1;position:absolute;left:-9999px;right:-9999px;top:0;bottom:0;border:1px solid #dedede}}@media screen and (max-width: 799px){.spotlight{padding-right:0 !important;padding-left:0 !important;padding-top:33rem;background-position:center 30px !important;background-size:auto 30rem}}@media screen{.template-3-grid.assets{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;grid-gap:30px}}@media screen and (max-width: 799px){.template-3-grid.assets{grid-template-columns:1fr 1fr}}@media screen and (max-width: 399px){.template-3-grid.assets{grid-template-columns:1fr}}@media screen{.template-3-grid .asset-container{aspect-ratio:4/3;width:100%;height:auto;overflow:hidden;margin-bottom:7.5px}}@media screen{.template-3-grid.assets .asset img{object-fit:cover;width:100%;height:100%;max-width:none}}@media screen{.media-card.media-embed{--grid-column-count: 2 !important;--grid-item--min-width: 150px;--grid-layout-gap: 24px;--gap-count: calc(var(--grid-column-count) - 1);--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));display:grid;grid-template-columns:repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));grid-gap:var(--grid-layout-gap);width:100vw;max-width:100%;align-items:stretch;margin:30px 0}.media-card.media-embed .resource{display:flex;background-color:#fff;padding:30px;align-items:center;border:1px solid #dedede;height:100%}.media-card.media-embed .resource-meta{width:50%;padding-left:30px}.media-card.media-embed .media-render{max-width:50%}}@media screen and (max-width: 799px){.media-card.media-embed{--grid-column-count: 1 !important}}@media screen{ul.resource-list{list-style-type:none;padding-left:0}}@media screen{ul.resource-list .resource{border-bottom:1px solid #dedede;padding-bottom:29px;margin:30px 0;overflow:hidden;position:relative}ul.resource-list .resource>*:last-child{margin-bottom:0}ul.resource-list .resource:first-child{border-top:1px solid #dedede;padding-top:29px}}@media screen{ul.resource-list .resource img{height:auto;width:60px;float:right;margin-left:15px}}@media screen{ul.resource-list .resource h4{margin-top:0}}@media screen{.body-truncate-fade ul.resource-list .resource .description{overflow:hidden;max-height:120px;position:relative}}@media screen{.body-truncate-fade ul.resource-list .resource .description:after{content:"";position:absolute;top:82.5px;left:0;right:0;height:37.5px;background:linear-gradient(to top, #f8f8f8, rgba(248, 248, 248, 0))}}@media screen{.body-truncate-ellipsis ul.resource-list .resource .description{overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}}@media screen{ul.resource-list .resource img~*{width:calc(100% - 75px)}}@media screen{.search-filters{margin-bottom:30px}}@media screen{.filter-label,.filter-value{display:inline-block;border:1px solid #dedede;padding:6.5px}}@media screen{.filter-label{background-color:#dedede}}@media screen{.filter-value{margin-left:-5px}}@media screen{.browse-controls{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}}@media screen{.browse-controls .pagination{display:flex}}@media screen{.advanced-search{line-height:45px}}@media screen{.expand:after,.collapse:after{font-family:"Font Awesome 5 Free";font-weight:900}}@media screen{.expand:after{content:""}}@media screen{.collapse:after{content:""}}@media screen{.collapsible{display:none}}@media screen{.collapse+.collapsible{display:block;border-left:3px solid #ababab;padding:7.5px 30px;margin:15px 0;width:100%}}@media screen{body.resource #content>h2:first-of-type+h3{font-size:15px;text-transform:uppercase;margin:-30px 0 30px}}@media screen{.property{margin-bottom:30px}.property:last-child{margin-bottom:0}}@media screen{.property dt{margin-bottom:0;font-size:15px;font-weight:bold}.property dt:first-child{margin-top:0}}@media screen{.value{display:flex;flex-wrap:wrap;align-items:center;margin-left:0}.value:not(:last-child){margin-bottom:15px}}@media screen{.value-content:not(:only-child){margin-right:7.5px}}@media screen{.resource-link img{width:auto;height:45px;display:inline-block;vertical-align:middle;margin-right:7.5px}}@media screen{.property .value a{display:inline-block;vertical-align:bottom}}@media screen{.property .value:not(:last-child) img{margin-bottom:7.5px}}@media screen{.property .value:not(:last-child) img+a{margin-bottom:7.5px}}@media screen{.property .value .language{background-color:#d1d1d1;padding:0 7.5px;font-size:15px;margin-right:7.5px}}@media screen{.property .private:after{content:"";font-family:"Font Awesome 5 Free";font-size:15px;font-weight:900}}@media screen{.media-list .resource-link{width:100%;display:block}.media-list .resource-link:not(:last-child){margin-bottom:15px}}@media screen{#content .media.resource{display:inline-block;text-align:center;vertical-align:bottom;margin-right:7.5px}#content .media.resource:hover{border-bottom:0}}@media screen{#content .media.resource img{vertical-align:top;margin-bottom:15px}}@media screen{.media-render>*{max-width:100%}}@media screen{#linked-resources caption{text-align:left;font-weight:bold;border-bottom:3px solid #ababab;padding:7.5px 15px 4.5px}}@media screen{#linked-filter h4{margin-bottom:15px}}@media screen{#linked-resources .resource-link{margin-bottom:0;display:flex;align-items:center}}@media screen{#advanced-search .value:not(:last-child){margin-bottom:15px}}@media screen{.remove-value{position:relative;width:45px;margin-left:7.5px}}@media screen{.results{margin-bottom:60px;clear:both}}@media screen{.results ul{list-style:none;padding-left:0}}@media screen{.results .result-title{font-weight:bold}}@media screen{.results>ul{margin:-15px 0 0 0}}@media screen{.results .result-site,.results ul ul{display:block;padding-left:15px}}@media screen{.results>ul>li{margin-bottom:30px}}@media screen{.pagination+.results{margin:30px 0 0;clear:both}}@media screen{.sitewide-search-form{display:none}}@media screen{.sitewide-search-form~.results+.pagination{margin-top:0}}@media screen{.sitewide-search-form~.advanced-search{display:block}}@media screen{.sitewide-search-form~h2{width:50%;float:left}}@media screen{.sitewide-search-form~.pagination{margin:37.5px 0 30px;text-align:right;width:50%;float:right}}@media screen{.sitewide-search-form~p{clear:both}}@media screen{.index.search .results ul li{margin-bottom:7.5px;padding-bottom:7.5px;border-bottom:1px solid #ababab}}@media screen{.items.search #search{display:none}}@media screen{a.metadata-browse-link{font-size:15px}}@media screen and (min-width: 800px){#content{padding:0 60px 30px}table{margin:30px 0;border-collapse:collapse}th,td{text-align:left;padding:7.5px 15px;padding-bottom:6.5px;border-bottom:1px solid #ababab}.field .field-meta{width:30%;align-self:flex-start}.field .inputs{width:70%;padding-left:30px}.field .value select{width:initial;margin-bottom:0}header{position:relative;padding:15px 0 0;margin-bottom:60px}header>*{padding:0 60px}h1.site-title{margin:7.5px auto;padding:0 60px}.banner{margin-top:-60px}footer{padding:0 60px 30px}header nav{margin:0 auto !important;position:static;padding:0 60px}header nav:before{content:"";border:0;display:none}header nav ul a{padding:0}header nav ul li{position:static}header nav ul a:hover{background-color:transparent}header nav ul li,header nav>ul li:last-child,header nav>ul ul:hover>li{border:0}header nav ul.navigation{margin-left:-7.5px;position:static;display:flex;align-items:flex-end;height:auto}header nav ul.navigation li ul:before{display:none}header nav ul.navigation>li:not(:last-child){margin-right:15px}header nav ul.navigation>li>ul{position:absolute;top:100%;left:-9999px;background-color:#fff;padding:0;list-style:none;width:100%;padding:14px 0 6.5px;display:flex;flex-direction:row;flex-flow:row wrap;z-index:1}header nav ul.navigation ul ul{height:0}header nav ul.navigation>li:hover>ul{max-width:1700px;margin-left:auto;margin-right:auto;padding:15px 60px;left:0;right:0;border-bottom:0;border-color:#dedede;height:auto}header nav ul.navigation>li:hover>ul:after{content:"";left:-9999px;right:-9999px;background-color:#fff;position:absolute;top:0;bottom:0;border-bottom:1px solid #dedede;border-top:1px solid #dedede;z-index:-1}header nav ul.navigation>li>ul>li{width:25%;font-size:15px;font-weight:bold;padding-bottom:30px}header nav ul.navigation>li>ul>li ul{font-weight:normal;padding:0;list-style-type:none;height:auto}header nav ul.navigation li.parent{position:static}header nav>ul>li>a{margin:7.5px}header nav>ul>li>.parent-link{display:inline-block;width:100%}header nav>ul>li>.parent-link>a{margin:7.5px;width:100%}header nav>ul>li>.parent-link a:after{font-family:"Font Awesome 5 Free";content:"";font-weight:900;display:inline-block;margin-left:7.5px}header nav>ul li:hover ul li{height:auto;padding:0}.child-toggle{display:none}header .parent ul a{padding-left:0}header .parent .parent .parent ul a{padding-left:15px}.sub-menu ul{border-bottom:1px solid #dedede;padding-bottom:14px}.sub-menu li{display:inline-block;border:0;padding:0;margin-right:15px}.sub-menu li:first-of-type{border:0;padding:0}#search{left:75%;border-left:1px solid #dedede;padding:7.5px}#search form input[type=text],#search form button[type=submit]{height:30px;font-size:15px;line-height:30px}#search form button[type=submit]{width:30px;height:30px;padding:0}#search form button[type=submit]:before{line-height:30px}.items.search #search{display:block}ul.resource-list .resource img{width:120px;height:auto;float:right;margin-left:15px}ul.resource-list .resource img~*{width:calc(100% - 135px)}body.item-set.item #content{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end}body.item-set.item #content>h2,body.item-set.item #content>h3{width:100%}body.item-set .metadata{width:span(4 of 12 alpha);border-left:5px solid #dedede;padding-left:30px;margin-right:30px}body.item-set .metadata h4:first-of-type{margin-top:0}body.item-set #content .metadata~*{width:span(8 of 12 omega);border-left:1px solid #dedede;padding-left:30px}body.item-set .item-set-items h3{margin-top:0}body.item-set .metadata~nav.pagination:first-of-type{margin-bottom:0}.results>ul{display:flex;flex-wrap:wrap}.results>ul>li{width:calc(50% - 30px)}.results>ul>li:nth-child(2n){margin-left:30px}.preview-block{clear:both}ul.preview.resource-list li:first-of-type{border-top:1px solid #dedede;padding-top:29px}} \ No newline at end of file +@media screen{*{box-sizing:border-box}html{height:100%;padding:0;margin:0}body{background-color:#f8f8f8;font-family:"Open Sans",sans-serif;font-size:20px;line-height:30px;margin:0;word-wrap:break-word;overflow-x:none}a:link{text-decoration:none;color:#920b0b}a:visited{color:#920b0b}a:active,a:hover{color:#ed1616}h1{font-size:40px;line-height:60px}h2{font-size:30px;line-height:45px}h3{font-size:25px;line-height:45px}h4{font-size:22.5px}img{max-width:100%;height:auto}input,textarea,button,.button,.resource-list.preview+a,select{font-family:"Open Sans",sans-serif;font-size:20px;line-height:30px;margin:0;vertical-align:top}input[type=text],input[type=password],input[type=email],input[type=url],textarea{appearance:none;border-radius:0;height:45px;border:1px solid #dedede;padding:6.5px 7.5px;margin:0}textarea{height:90px}input[type=file]{line-height:1;vertical-align:bottom;font-size:15px}button,a.button,.resource-list.preview+a,[type=submit]{background-color:#dedede;border-radius:2px;padding:7.5px;display:inline-block;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:0;cursor:pointer}select{background-color:#fff;padding:7.5px;border-color:#dedede;height:45px}::-webkit-input-placeholder{font-style:italic}:-moz-placeholder{font-style:italic}::-moz-placeholder{font-style:italic}:-ms-input-placeholder{font-style:italic}.field{margin:30px 0;display:flex;flex-wrap:wrap}.field .inputs input[type=checkbox]{vertical-align:bottom}.field .field-meta{padding:7.5px 45px 7.5px 0;position:relative;width:100%}.field.multi-value .label,.field.multi-value .field-description{margin-right:7.5px}.field.required .field-meta:after{content:"";font-family:"Font Awesome 5 Free";font-size:15px;font-weight:900}.field .add-value{position:absolute;right:.25rem;top:0;width:45px}.field .value:not(:last-child){margin-bottom:15px}.field-description{font-size:15px}.field .inputs{width:100%}.field .value *{max-width:100%}.field .value select{width:100%;margin-bottom:7.5px}#skipnav{position:fixed;top:30px;left:50%;border:1px solid #ababab;transform:translateX(-50%);z-index:-5;padding:7.5px;background-color:#fff;opacity:0}#skipnav:focus{z-index:1000;opacity:1}header h1{margin:0}header nav{position:relative;padding:0}header nav.closed ul{height:0;overflow:hidden;margin:0}header nav:before{font-family:"Font Awesome 5 Free";content:"";font-weight:900;display:block;width:37.5px;height:37.5px;border:1px solid #dedede;text-align:center;border-radius:2px;position:absolute;right:30px;top:-48.75px;cursor:pointer;line-height:37.5px}header nav.open{margin:15px 0 -1px}header nav.open:before{content:""}header nav ul{padding-left:0;list-style:none;position:relative;margin:0 auto}header nav ul a{display:inline-block;width:100%;padding:7.5px}header nav ul a:hover{border-bottom:0;background-color:#dedede}header nav ul li{border-top:1px solid #dedede;position:relative}header nav ul li li:last-of-type{padding-bottom:0}header nav ul li.active{font-weight:bold}header nav ul li.parent{position:relative}header nav ul .parent-link{display:flex}header nav ul .parent-link>a{width:calc(100% - 60px)}header nav ul .child-toggle{color:#dedede;width:60px;text-align:center;background-color:#fff;border-left:1px solid #dedede;appearance:none}header nav ul .child-toggle:before{font-family:"Font Awesome 5 Free";content:"";font-weight:900}header nav>ul>li:last-child{border-bottom:1px solid #dedede;padding-bottom:-1px}header nav>ul ul li{height:0;overflow:hidden;border:0}header nav ul.open>li{height:auto;border-top:1px solid #dedede;padding-top:-1px}header nav>ul>li>ul>li.active>a{margin-left:-1.5em}header nav>ul>li>ul>li.active>a:before{content:">";display:inline-block;width:1.5em}header nav>ul>li>ul>li a{padding-left:30px}header nav>ul>li>ul>li>ul>li a{padding-left:60px}header nav>ul>li>ul>li>ul>li>ul>li a{padding-left:90px}.sub-menu ul{padding-left:0;list-style-type:none;margin-top:15px}.sub-menu li{font-size:15px;font-weight:bold;border-bottom:1px solid #dedede;padding:7.5px 0 6.5px}.sub-menu li:first-of-type{border-top:1px solid #dedede;padding-top:6.5px}nav.pagination{margin-bottom:30px;font-size:20px;line-height:45px}.pagination input{text-align:center}.resource-list+.pagination{border-color:transparent}.pagination form{min-width:90px;margin-right:15px}.pagination form,.pagination .button,.pagination .resource-list.preview+a,.pagination button,.pagination .page-count{display:inline-block;vertical-align:top;height:45px}.pagination-buttons{margin-right:15px}.pagination .button,.pagination .resource-list.preview+a{border:1px solid #dedede;background-color:#dedede;width:45px;text-align:center;padding:7.5px;border-radius:2px;color:#000;line-height:30px}.pagination .inactive.button,.pagination .resource-list.preview+a.inactive{opacity:.5;color:#ababab;background-color:#fff}.pagination input{width:60px}.breadcrumbs{font-size:15px;margin:15px 0}h1.site-title{font-size:25px;line-height:30px;padding-right:45px;padding-left:30px}header{margin:0 0 75px;background-color:#fff;border-bottom:1px solid #dedede;position:relative}header>*{max-width:1700px;margin-left:auto;margin-right:auto;display:block}.site-title:hover,.site-title:active{border-bottom:0}.site-title h1{margin:0}button.o-icon-search{display:none}#search{position:absolute;top:100%;left:0;right:0;background-color:#fff;border-bottom:1px solid #dedede;border-top:1px solid #dedede;padding:7.5px 30px}#search form{display:flex;flex-wrap:nowrap}#search form input[type=text]{width:100%}#search form button[type=submit]{height:45px;width:45px;text-indent:-9999px;position:relative;border-radius:0 3px 3px 0}#search form button[type=submit]:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;top:0;left:0;right:0;text-align:center;text-indent:0;line-height:45px}.banner{position:relative;display:flex;align-items:center;overflow:hidden;z-index:-1}.banner img{width:100%}footer{max-width:1700px;margin-left:auto;margin-right:auto;padding:0 30px 30px;clear:both}#content{max-width:1700px;margin-left:auto;margin-right:auto;padding:0 30px 30px}.resource-list.preview+a{color:#000}.resource-list.preview+a:hover{background-color:#787878;border-bottom-width:0px;color:#fff}.spotlight{padding:30px;padding-right:calc(50% + 30px);background-position:right center;background-repeat:no-repeat;background-size:50%;margin:60px 0}.spotlight.left-image{background-position:left center;padding-left:calc(50% + 30px);padding-right:0}.spotlight.dark-accent{color:#fff;position:relative}.spotlight.dark-accent:after{content:"";background-color:#787878;z-index:-1;position:absolute;left:-9999px;right:-9999px;top:0;bottom:0}.spotlight.light-accent{position:relative}.spotlight.light-accent:after{content:"";background-color:#fff;z-index:-1;position:absolute;left:-9999px;right:-9999px;top:0;bottom:0;border:1px solid #dedede}}@media screen and (max-width: 799px){.spotlight{padding-right:0 !important;padding-left:0 !important;padding-top:33rem;background-position:center 30px !important;background-size:auto 30rem}}@media screen{.template-3-grid.assets{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;grid-gap:30px}}@media screen and (max-width: 799px){.template-3-grid.assets{grid-template-columns:1fr 1fr}}@media screen and (max-width: 399px){.template-3-grid.assets{grid-template-columns:1fr}}@media screen{.template-3-grid .asset-container{aspect-ratio:4/3;width:100%;height:auto;overflow:hidden;margin-bottom:7.5px}}@media screen{.template-3-grid.assets .asset img{object-fit:cover;width:100%;height:100%;max-width:none}}@media screen{.media-card.media-embed{--grid-column-count: 2 !important;--grid-item--min-width: 150px;--grid-layout-gap: 24px;--gap-count: calc(var(--grid-column-count) - 1);--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));display:grid;grid-template-columns:repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));grid-gap:var(--grid-layout-gap);width:100vw;max-width:100%;align-items:stretch;margin:30px 0}.media-card.media-embed .resource{display:flex;background-color:#fff;padding:30px;align-items:center;border:1px solid #dedede;height:100%}.media-card.media-embed .resource-meta{width:50%;padding-left:30px}.media-card.media-embed .media-render{max-width:50%}}@media screen and (max-width: 799px){.media-card.media-embed{--grid-column-count: 1 !important}}@media screen{ul.resource-list{list-style-type:none;padding-left:0}}@media screen{ul.resource-list .resource{border-bottom:1px solid #dedede;padding-bottom:29px;margin:30px 0;overflow:hidden;position:relative}ul.resource-list .resource>*:last-child{margin-bottom:0}ul.resource-list .resource:first-child{border-top:1px solid #dedede;padding-top:29px}}@media screen{ul.resource-list .resource img{height:auto;width:60px;float:right;margin-left:15px}}@media screen{ul.resource-list .resource h4{margin-top:0}}@media screen{.body-truncate-fade ul.resource-list .resource .description{overflow:hidden;max-height:120px;position:relative}}@media screen{.body-truncate-fade ul.resource-list .resource .description:after{content:"";position:absolute;top:82.5px;left:0;right:0;height:37.5px;background:linear-gradient(to top, #f8f8f8, rgba(248, 248, 248, 0))}}@media screen{.body-truncate-ellipsis ul.resource-list .resource .description{overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}}@media screen{ul.resource-list .resource img~*{width:calc(100% - 75px)}}@media screen{.search-filters{margin-bottom:30px}}@media screen{.filter-label,.filter-value{display:inline-block;border:1px solid #dedede;padding:6.5px}}@media screen{.filter-label{background-color:#dedede}}@media screen{.filter-value{margin-left:-5px}}@media screen{.browse-controls{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}}@media screen{.browse-controls .pagination{display:flex}}@media screen{.advanced-search{line-height:45px}}@media screen{.expand:after,.collapse:after{font-family:"Font Awesome 5 Free";font-weight:900}}@media screen{.expand:after{content:""}}@media screen{.collapse:after{content:""}}@media screen{.collapsible{display:none}}@media screen{.collapse+.collapsible{display:block;border-left:3px solid #ababab;padding:7.5px 30px;margin:15px 0;width:100%}}@media screen{body.resource #content>h2:first-of-type+h3{font-size:15px;text-transform:uppercase;margin:-30px 0 30px}}@media screen{.property{margin-bottom:30px}.property:last-child{margin-bottom:0}}@media screen{.property dt{margin-bottom:0;font-size:15px;font-weight:bold}.property dt:first-child{margin-top:0}}@media screen{.value{display:flex;flex-wrap:wrap;align-items:center;margin-left:0}.value:not(:last-child){margin-bottom:15px}}@media screen{.value-content:not(:only-child){margin-right:7.5px}}@media screen{.resource-link img{width:auto;height:45px;display:inline-block;vertical-align:middle;margin-right:7.5px}}@media screen{.property .value a{display:inline-block;vertical-align:bottom}}@media screen{.property .value:not(:last-child) img{margin-bottom:7.5px}}@media screen{.property .value:not(:last-child) img+a{margin-bottom:7.5px}}@media screen{.property .value .language{background-color:#d1d1d1;padding:0 7.5px;font-size:15px;margin-right:7.5px}}@media screen{.property .private:after{content:"";font-family:"Font Awesome 5 Free";font-size:15px;font-weight:900}}@media screen{.media-list .resource-link{width:100%;display:block}.media-list .resource-link:not(:last-child){margin-bottom:15px}}@media screen{#content .media.resource{display:inline-block;text-align:center;vertical-align:bottom;margin-right:7.5px}#content .media.resource:hover{border-bottom:0}}@media screen{#content .media.resource img{vertical-align:top;margin-bottom:15px}}@media screen{.media-render>*{max-width:100%}}@media screen{#linked-resources caption{text-align:left;font-weight:bold;border-bottom:3px solid #ababab;padding:7.5px 15px 4.5px}}@media screen{#linked-filter h4{margin-bottom:15px}}@media screen{#linked-resources .resource-link{margin-bottom:0;display:flex;align-items:center}}@media screen{#advanced-search .value:not(:last-child){margin-bottom:15px}}@media screen{.remove-value{position:relative;width:45px;margin-left:7.5px}}@media screen{.results{margin-bottom:60px;clear:both}}@media screen{.results ul{list-style:none;padding-left:0}}@media screen{.results .result-title{font-weight:bold}}@media screen{.results>ul{margin:-15px 0 0 0}}@media screen{.results .result-site,.results ul ul{display:block;padding-left:15px}}@media screen{.results>ul>li{margin-bottom:30px}}@media screen{.pagination+.results{margin:30px 0 0;clear:both}}@media screen{.sitewide-search-form{display:none}}@media screen{.sitewide-search-form~.results+.pagination{margin-top:0}}@media screen{.sitewide-search-form~.advanced-search{display:block}}@media screen{.sitewide-search-form~h2{width:50%;float:left}}@media screen{.sitewide-search-form~.pagination{margin:37.5px 0 30px;text-align:right;width:50%;float:right}}@media screen{.sitewide-search-form~p{clear:both}}@media screen{.index.search .results ul li{margin-bottom:7.5px;padding-bottom:7.5px;border-bottom:1px solid #ababab}}@media screen{.items.search #search{display:none}}@media screen{a.metadata-browse-link{font-size:15px}}@media screen and (min-width: 800px){#content{padding:0 60px 30px}table{margin:30px 0;border-collapse:collapse}th,td{text-align:left;padding:7.5px 15px;padding-bottom:6.5px;border-bottom:1px solid #ababab}.field .field-meta{width:30%;align-self:flex-start}.field .inputs{width:70%;padding-left:30px}.field .value select{width:initial;margin-bottom:0}header{position:relative;padding:15px 0 0;margin-bottom:60px}header>*{padding:0 60px}h1.site-title{margin:7.5px auto;padding:0 60px}.banner{margin-top:-60px}footer{padding:0 60px 30px}header nav{margin:0 auto !important;position:static;padding:0 60px}header nav:before{content:"";border:0;display:none}header nav ul a{padding:0}header nav ul li{position:static}header nav ul a:hover{background-color:transparent}header nav ul li,header nav>ul li:last-child,header nav>ul ul:hover>li{border:0}header nav ul.navigation{margin-left:-7.5px;position:static;display:flex;align-items:flex-end;height:auto}header nav ul.navigation li ul:before{display:none}header nav ul.navigation>li:not(:last-child){margin-right:15px}header nav ul.navigation>li>ul{position:absolute;top:100%;left:-9999px;background-color:#fff;padding:0;list-style:none;width:100%;padding:14px 0 6.5px;display:flex;flex-direction:row;flex-flow:row wrap;z-index:1}header nav ul.navigation ul ul{height:0}header nav ul.navigation>li:hover>ul{max-width:1700px;margin-left:auto;margin-right:auto;padding:15px 60px;left:0;right:0;border-bottom:0;border-color:#dedede;height:auto}header nav ul.navigation>li:hover>ul:after{content:"";left:-9999px;right:-9999px;background-color:#fff;position:absolute;top:0;bottom:0;border-bottom:1px solid #dedede;border-top:1px solid #dedede;z-index:-1}header nav ul.navigation>li>ul>li{width:25%;font-size:15px;font-weight:bold;padding-bottom:30px}header nav ul.navigation>li>ul>li ul{font-weight:normal;padding:0;list-style-type:none;height:auto}header nav ul.navigation li.parent{position:static}header nav>ul>li>a{margin:7.5px}header nav>ul>li>.parent-link{display:inline-block;width:100%}header nav>ul>li>.parent-link>a{margin:7.5px;width:100%}header nav>ul>li>.parent-link a:after{font-family:"Font Awesome 5 Free";content:"";font-weight:900;display:inline-block;margin-left:7.5px}header nav>ul li:hover ul li{height:auto;padding:0}.child-toggle{display:none}header .parent ul a{padding-left:0}header .parent .parent .parent ul a{padding-left:15px}.sub-menu ul{border-bottom:1px solid #dedede;padding-bottom:14px}.sub-menu li{display:inline-block;border:0;padding:0;margin-right:15px}.sub-menu li:first-of-type{border:0;padding:0}#search{left:75%;border-left:1px solid #dedede;padding:7.5px}#search form input[type=text],#search form button[type=submit]{height:30px;font-size:15px;line-height:30px}#search form button[type=submit]{width:30px;height:30px;padding:0}#search form button[type=submit]:before{line-height:30px}.items.search #search{display:block}ul.resource-list .resource img{width:120px;height:auto;float:right;margin-left:15px}ul.resource-list .resource img~*{width:calc(100% - 135px)}body.item-set.item #content{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end}body.item-set.item #content>h2,body.item-set.item #content>h3{width:100%}body.item-set .metadata{width:25%;border-left:5px solid #dedede;padding:0 30px}body.item-set .metadata h4:first-of-type{margin-top:0}body.item-set #content .metadata~*{width:75%;border-left:1px solid #dedede;padding-left:30px}body.item-set .item-set-items h3{margin-top:0}body.item-set .metadata~nav.pagination:first-of-type{margin-bottom:0}.results>ul{display:flex;flex-wrap:wrap}.results>ul>li{width:calc(50% - 30px)}.results>ul>li:nth-child(2n){margin-left:30px}.preview-block{clear:both}ul.preview.resource-list li:first-of-type{border-top:1px solid #dedede;padding-top:29px}} \ No newline at end of file diff --git a/asset/sass/_desktop.scss b/asset/sass/_desktop.scss index bcc1512..a8b2136 100644 --- a/asset/sass/_desktop.scss +++ b/asset/sass/_desktop.scss @@ -286,10 +286,9 @@ body.item-set.item #content { } body.item-set .metadata { - width: span(4 of 12 alpha); + width: 25%; border-left: 5px solid $light; - padding-left: $spacing-l; - margin-right: $spacing-l; + padding: 0 $spacing-l; } body.item-set .metadata h4:first-of-type { @@ -297,7 +296,7 @@ body.item-set .metadata h4:first-of-type { } body.item-set #content .metadata ~ * { - width: span(8 of 12 omega); + width: 75%; border-left: 1px solid $light; padding-left: $spacing-l; }