diff --git a/offline-reference/extra/css/all.css b/offline-reference/extra/css/all.css index 0ff22dbf36..1865aaacb7 100644 --- a/offline-reference/extra/css/all.css +++ b/offline-reference/extra/css/all.css @@ -66,9 +66,12 @@ audio:not([controls]) { */ html { - font-size: 100%; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ + font-size: 100%; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -ms-text-size-adjust: 100%; + /* 2 */ } /** @@ -329,8 +332,10 @@ nav ol { */ img { - border: 0; /* 1 */ - -ms-interpolation-mode: bicubic; /* 2 */ + border: 0; + /* 1 */ + -ms-interpolation-mode: bicubic; + /* 2 */ } /** @@ -382,10 +387,13 @@ fieldset { */ legend { - border: 0; /* 1 */ + border: 0; + /* 1 */ padding: 0; - white-space: normal; /* 2 */ - *margin-left: -7px; /* 3 */ + white-space: normal; + /* 2 */ + *margin-left: -7px; + /* 3 */ } /** @@ -399,10 +407,14 @@ button, input, select, textarea { - font-size: 100%; /* 1 */ - margin: 0; /* 2 */ - vertical-align: baseline; /* 3 */ - *vertical-align: middle; /* 3 */ + font-size: 100%; + /* 1 */ + margin: 0; + /* 2 */ + vertical-align: baseline; + /* 3 */ + *vertical-align: middle; + /* 3 */ } /** @@ -438,12 +450,16 @@ select { */ button, -html input[type="button"], /* 1 */ +html input[type="button"], +/* 1 */ input[type="reset"], input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ - *overflow: visible; /* 4 */ + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ + *overflow: visible; + /* 4 */ } /** @@ -464,10 +480,14 @@ html input[disabled] { input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - *height: 13px; /* 3 */ - *width: 13px; /* 3 */ + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ + *height: 13px; + /* 3 */ + *width: 13px; + /* 3 */ } /** @@ -477,9 +497,11 @@ input[type="radio"] { */ input[type="search"] { - -webkit-appearance: textfield; /* 1 */ + -webkit-appearance: textfield; + /* 1 */ -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ + -webkit-box-sizing: content-box; + /* 2 */ box-sizing: content-box; } @@ -509,8 +531,10 @@ input::-moz-focus-inner { */ textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ + overflow: auto; + /* 1 */ + vertical-align: top; + /* 2 */ } /* ========================================================================== @@ -525,6 +549,7 @@ table { border-collapse: collapse; border-spacing: 0; } + /* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript+java&plugins=line-numbers */ /* @@ -538,77 +563,78 @@ table { code[class*="language-"], pre[class*="language-"], textarea { - color: #222; - font-family: - 'Inconsolata', - Consolas, - Monaco, - 'Andale Mono', - monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - font-size: 1em !important; + color: #222; + font-family: 'Inconsolata', + Consolas, + Monaco, + 'Andale Mono', + monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + font-size: 1em !important; } /* Code blocks */ pre[class*="language-"] { - position:relative; - padding: 0.5em 1.0em; - margin: 0.5em 0 0 -0.5em; - border-left: 0.5em solid #AFAFAF; /* coy og blue 10px solid 358ccb */ - background-color: #fff; /* coy og white #fdfdfd */ - /* lines */ - background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); - background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); - background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); - background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); - background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); - background-size: 2.9em 2.9em; /* adjusts height of alternating lines */ - background-origin:content-box; - /* set overflow to just let the code roll */ - overflow:auto; - /* or uncomment this to let an inner vertical scroll be triggered, - but be generous as to when - max-height:36em; */ -} - -code[class*="language"] { -} - - -:not(pre) > code[class*="language-"], + position: relative; + padding: 0.5em 1.0em; + margin: 0.5em 0 0 -0.5em; + border-left: 0.5em solid #AFAFAF; + /* coy og blue 10px solid 358ccb */ + background-color: #fff; + /* coy og white #fdfdfd */ + /* lines */ + background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); + background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); + background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); + background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); + background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%); + background-size: 2.9em 2.9em; + /* adjusts height of alternating lines */ + background-origin: content-box; + /* set overflow to just let the code roll */ + overflow: auto; + /* or uncomment this to let an inner vertical scroll be triggered, + but be generous as to when + max-height:36em; */ +} + +code[class*="language"] {} + + +:not(pre)>code[class*="language-"], pre[class*="language-"] { - margin-bottom: 1em; + margin-bottom: 1em; } /* Inline code */ -:not(pre) > code[class*="language-"] { - position:relative; - padding: .2em; - -webkit-border-radius: 0.3em; - -moz-border-radius: 0.3em; - -ms-border-radius: 0.3em; - -o-border-radius: 0.3em; - border-radius: 0.3em; - color: #333; - border: 1px solid rgba(0, 0, 0, 0.1); +:not(pre)>code[class*="language-"] { + position: relative; + padding: .2em; + -webkit-border-radius: 0.3em; + -moz-border-radius: 0.3em; + -ms-border-radius: 0.3em; + -o-border-radius: 0.3em; + border-radius: 0.3em; + color: #333; + border: 1px solid rgba(0, 0, 0, 0.1); } -:not(pre) > code[class*="language-"]:after, +:not(pre)>code[class*="language-"]:after, pre[class*="language-"]:after { - right: 0.75em; - left: auto; + right: 0.75em; + left: auto; } /* code colors */ @@ -617,11 +643,15 @@ pre[class*="language-"]:after { .token.prolog, .token.doctype, .token.cdata { - color: #A0A0A0; /* light gray */ /* 727272 898189 919191 A0A0A0 AFAFAF BEBEBE coy og: #7D8B99; */ + color: #A0A0A0; + /* light gray */ + /* 727272 898189 919191 A0A0A0 AFAFAF BEBEBE coy og: #7D8B99; */ } .token.punctuation { - color: #666; /* darker gray */ /* og coy 5F6364 */ + color: #666; + /* darker gray */ + /* og coy 5F6364 */ } .token.property, @@ -631,7 +661,9 @@ pre[class*="language-"]:after { .token.function-name, .token.constant, .token.symbol { - color: #DC3787; /* not p5 pink, but related */ /* og coy c92c2c a reddish color */ + color: #DC3787; + /* not p5 pink, but related */ + /* og coy c92c2c a reddish color */ } .token.selector, @@ -639,54 +671,64 @@ pre[class*="language-"]:after { .token.string, .token.function, .token.builtin { - color: #00A1D3; /* blue */ /* 877923 */ /* og coy 2f9c0a - green */ + color: #00A1D3; + /* blue */ + /* 877923 */ + /* og coy 2f9c0a - green */ } .token.operator, .token.entity, .token.url, .token.variable { - color: #a67f59; /* og coy a67f59 a light brown */ - background: rgba(255, 255, 255, 0.5); + color: #a67f59; + /* og coy a67f59 a light brown */ + background: rgba(255, 255, 255, 0.5); } .token.atrule, .token.attr-value, .token.keyword, .token.class-name { - color: #704F21; /* 9F944F brown */ /* og coy #1990b8 blue */ + color: #704F21; + /* 9F944F brown */ + /* og coy #1990b8 blue */ } .token.regex, .token.important { - color: #e90; /* og coy e90 orange */ + color: #e90; + /* og coy e90 orange */ } + .language-css .token.string, .style .token.string { - color: #a67f59; /* og coy a67f59 a light brown */ - background: rgba(255, 255, 255, 0.5); + color: #a67f59; + /* og coy a67f59 a light brown */ + background: rgba(255, 255, 255, 0.5); } .token.important { - font-weight: normal; + font-weight: normal; } .token.entity { - cursor: help; + cursor: help; } .namespace { - opacity: .7; + opacity: .7; } -@media screen and (max-width:767px){ - pre[class*="language-"]:before, - pre[class*="language-"]:after { - bottom:14px; - -webkit-box-shadow:none; - -moz-box-shadow:none; - box-shadow:none; - } +@media screen and (max-width: 767px) { + + pre[class*="language-"]:before, + pre[class*="language-"]:after { + bottom: 14px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } } @@ -694,49 +736,52 @@ pre[class*="language-"]:after { .token.tab:not(:empty):before, .token.cr:before, .token.lf:before { - color: #e0d7d1; /* og coy very light brown */ + color: #e0d7d1; + /* og coy very light brown */ } pre.line-numbers { - position: relative; - padding-left: 3.8em; - counter-reset: linenumber; + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; } -pre.line-numbers > code { - position: relative; +pre.line-numbers>code { + position: relative; } .line-numbers .line-numbers-rows { - position: absolute; - pointer-events: none; - top: 0; - font-size: 100%; - left: -3.8em; - width: 3em; /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - border-right: 1px solid #999; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; + /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.line-numbers-rows > span { - pointer-events: none; - display: block; - counter-increment: linenumber; +.line-numbers-rows>span { + pointer-events: none; + display: block; + counter-increment: linenumber; } -.line-numbers-rows > span:before { - content: counter(linenumber); - color: #999; - display: block; - padding-right: 0.8em; - text-align: right; +.line-numbers-rows>span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; } + /* * HTML5 Boilerplate * @@ -753,18 +798,18 @@ html, button, input, select { - color: #222; + color: #222; } textarea { - line-height: 1.45em; - padding: 0.5em 1em 0.5em 1em; - border: none; + line-height: 1.45em; + padding: 0.5em 1em 0.5em 1em; + border: none; } body { - font-size: 1em; - line-height: 1.4; + font-size: 1em; + line-height: 1.4; } /* @@ -774,13 +819,13 @@ body { */ ::-moz-selection { - background: #b3d4fc; - text-shadow: none; + background: #b3d4fc; + text-shadow: none; } ::selection { - background: #b3d4fc; - text-shadow: none; + background: #b3d4fc; + text-shadow: none; } /* @@ -788,12 +833,12 @@ body { */ hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; } /* @@ -801,55 +846,55 @@ hr { */ img { - vertical-align: middle; + vertical-align: middle; } img.med_left { - width: 300px; - float: left; + width: 300px; + float: left; } img.med_right { - width: 300px; - float: right; + width: 300px; + float: right; } img.small_left { - width: 200px; - float: left; + width: 200px; + float: left; } img.smaller_left { - width: 140px; - float: left; + width: 140px; + float: left; } img.small_right { - width: 200px; - float: right; + width: 200px; + float: right; } img.smaller_right { - width: 140px; - float: right; + width: 140px; + float: right; } img.small_center { - width: 200px; - margin-left: 250px; + width: 200px; + margin-left: 250px; } img.small { - width: 160px; + width: 160px; } img.med { - width: 400px; + width: 400px; } img.med_center { - width: 400px; - margin-left: 150px; + width: 400px; + margin-left: 150px; } /* @@ -857,9 +902,9 @@ img.med_center { */ fieldset { - border: 0; - margin: 0; - padding: 0; + border: 0; + margin: 0; + padding: 0; } /* @@ -867,7 +912,7 @@ fieldset { */ textarea { - resize: vertical; + resize: vertical; } /* @@ -876,179 +921,179 @@ textarea { ////////////////////////////////////////////////// */ .tagline { - display: none; + display: none; } #home-page .home { - pointer-events: none; + pointer-events: none; } #home-page .home a { - pointer-events: all; + pointer-events: all; } -#lockup > a { - position: relative; - display: block; - width: 200px; - height: 90px; +#lockup>a { + position: relative; + display: block; + width: 200px; + height: 90px; } #logo_image { - position: absolute; - top: 0; + position: absolute; + top: 0; } #menu.top_menu, #menu { - list-style: none; - font-family: 'Montserrat', sans-serif; - width: 100%; - margin: 0 0 1em 0; - padding: 0; - height: 100%; - font-size: 1.3em; + list-style: none; + font-family: 'Montserrat', sans-serif; + width: 100%; + margin: 0 0 1em 0; + padding: 0; + height: 100%; + font-size: 1.3em; } #menu.top_menu li { - display: inline; + display: inline; } #home-sketch { - position: absolute; - top: 0; - left: 0; - z-index: -2; + position: absolute; + top: 0; + left: 0; + z-index: -2; } /* <======== Styling for responsive menu bar ========> */ @media screen and (max-width: 780px) { - .sidebar-menu { - clear: both; - max-height: 0; - transition: max-height 0.4s ease-out; - overflow: hidden; - } - - .sidebar-menu-nav-element { - width: 91vw; - } - - .sidebar-menu a { - display: block; - text-align: center; - padding-bottom: 0.11em; - border-bottom: 0.11em dashed transparent; - } - - .sidebar-menu-icon { - top: 2rem; - cursor: pointer; - float: right; - padding: 28px 20px; - position: relative; - user-select: none; - margin-bottom: 5rem; - } - - .sidebar-menu-icon .sidebar-nav-icon { - background: #ed225d; - display: block; - height: 2px; - position: relative; - transition: background 0.4s ease-out; - width: 18px; - } - - .sidebar-menu-icon .sidebar-nav-icon:before, - .sidebar-menu-icon .sidebar-nav-icon:after { - background: #ed225d; - content: ''; - display: block; - height: 100%; - position: absolute; - transition: all 0.4s ease-out; - width: 100%; - } - - .sidebar-menu-icon .sidebar-nav-icon:before { - top: 5px; - } - - .sidebar-menu-icon .sidebar-nav-icon:after { - top: -5px; - } - - .sidebar-menu-btn { - display: none; - } - - .sidebar-menu-btn:checked ~ .sidebar-menu { - max-height: 475px; - } - - .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon { - background: transparent; - } - - .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:before { - transform: rotate(-45deg); - top: 0; - } - - .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:after { - transform: rotate(45deg); - top: 0; - } + .sidebar-menu { + clear: both; + max-height: 0; + transition: max-height 0.4s ease-out; + overflow: hidden; + } + + .sidebar-menu-nav-element { + width: 91vw; + } + + .sidebar-menu a { + display: block; + text-align: center; + padding-bottom: 0.11em; + border-bottom: 0.11em dashed transparent; + } + + .sidebar-menu-icon { + top: 2rem; + cursor: pointer; + float: right; + padding: 28px 20px; + position: relative; + user-select: none; + margin-bottom: 5rem; + } + + .sidebar-menu-icon .sidebar-nav-icon { + background: #ed225d; + display: block; + height: 2px; + position: relative; + transition: background 0.4s ease-out; + width: 18px; + } + + .sidebar-menu-icon .sidebar-nav-icon:before, + .sidebar-menu-icon .sidebar-nav-icon:after { + background: #ed225d; + content: ''; + display: block; + height: 100%; + position: absolute; + transition: all 0.4s ease-out; + width: 100%; + } + + .sidebar-menu-icon .sidebar-nav-icon:before { + top: 5px; + } + + .sidebar-menu-icon .sidebar-nav-icon:after { + top: -5px; + } + + .sidebar-menu-btn { + display: none; + } + + .sidebar-menu-btn:checked~.sidebar-menu { + max-height: 475px; + } + + .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon { + background: transparent; + } + + .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon:before { + transform: rotate(-45deg); + top: 0; + } + + .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon:after { + transform: rotate(45deg); + top: 0; + } } .sidebar-menu-btn { - display: none; + display: none; } /* <=================================================> */ #home-sketch-frame { - position: fixed; - width: 100%; - height: 100%; - left: 0; - top: 0; - z-index: -2; - overflow: hidden; - pointer-events: all; - border: 0; + position: fixed; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: -2; + overflow: hidden; + pointer-events: all; + border: 0; } #credits { - position: fixed; - bottom: 0; - left: 0; - z-index: 2; - padding: 1em; - font-size: 0.7em; + position: fixed; + bottom: 0; + left: 0; + z-index: 2; + padding: 1em; + font-size: 0.7em; } #skip-to-content { - position: absolute; - left: 0px; - top: 40px; - z-index: 5; - background-color: #ed225d; - color: white; - width: auto; - height: 50px; - border: none; - outline-style: none; - text-align: center; - font-size: 25px; - padding: 5px; - opacity: 0; + position: absolute; + left: 0px; + top: 40px; + z-index: 5; + background-color: #ed225d; + color: white; + width: auto; + height: 50px; + border: none; + outline-style: none; + text-align: center; + font-size: 25px; + padding: 5px; + opacity: 0; } #skip-to-content:focus { - opacity: 1; + opacity: 1; } /* @@ -1058,121 +1103,121 @@ textarea { */ .button_box { - border: 1px solid #ed225d; - padding: 0.4em 0.6em; - margin: 0.5em 0; - color: #333; - font-family: 'Montserrat', sans-serif; - display: inline-block; + border: 1px solid #ed225d; + padding: 0.4em 0.6em; + margin: 0.5em 0; + color: #333; + font-family: 'Montserrat', sans-serif; + display: inline-block; } .download_box { - border: 1px solid #ed225d; - padding: 0.4em; - margin: 0 1.75em 0 0; - width: 18.65em; - float: left; - color: #333; - height: 7.45em; - position: relative; + border: 1px solid #ed225d; + padding: 0.4em; + margin: 0 1.75em 0 0; + width: 18.65em; + float: left; + color: #333; + height: 7.45em; + position: relative; } .download_box:hover, .button_box:hover { - border: 1px solid #ed225d; - background: #ed225d; - color: #ffffff; + border: 1px solid #ed225d; + background: #ed225d; + color: #ffffff; } .download_box.half_box { - width: 10.83em; - margin-right: 1.75em; - float: left; + width: 10.83em; + margin-right: 1.75em; + float: left; } .download_box.half_box.last_box { - margin-right: 0; + margin-right: 0; } .download_box .download_name { - font-size: 1em; - margin: 0; - padding-bottom: 0.3em; - border-bottom: 0.09em dashed; - border-bottom-color: #ed225d; - line-height: 1.2; - font-family: 'Montserrat', sans-serif; - display: block; + font-size: 1em; + margin: 0; + padding-bottom: 0.3em; + border-bottom: 0.09em dashed; + border-bottom-color: #ed225d; + line-height: 1.2; + font-family: 'Montserrat', sans-serif; + display: block; } .download_box:hover .download_name { - -webkit-text-stroke-width: 0; - border-bottom-color: #fff; + -webkit-text-stroke-width: 0; + border-bottom-color: #fff; } .download_box p { - font-size: 0.65em; - margin: 0; - position: absolute; - bottom: 1em; + font-size: 0.65em; + margin: 0; + position: absolute; + bottom: 1em; } .download_box svg { - height: 0.65em; - width: 0.65em; - position: absolute; - bottom: 3.5em; + height: 0.65em; + width: 0.65em; + position: absolute; + bottom: 3.5em; } .download_box:hover svg { - fill: white; + fill: white; } -.download_box h4 + p { - display: block; +.download_box h4+p { + display: block; } #download-page .link_group { - width: 100%; - margin-bottom: 3em; + width: 100%; + margin-bottom: 3em; } .download_box { - margin-top: 1em; + margin-top: 1em; } .support div.download_box { - margin-top: 1em; - margin-bottom: 1em; + margin-top: 1em; + margin-bottom: 1em; } #download-page .support p { - font-size: 0.8em; - position: static; - margin-top: 0.3em; + font-size: 0.8em; + position: static; + margin-top: 0.3em; } #slideshow { - margin: 1em 0; + margin: 1em 0; } #slideshow p { - font-size: 0.8em; - color: #ababab; - line-height: 1.2em; - margin-top: 0.5em; + font-size: 0.8em; + color: #ababab; + line-height: 1.2em; + margin-top: 0.5em; } .extra { - color: white; - position: absolute; - bottom: 0.65em; - right: 0.9em; - font-weight: bold; - -ms-transform: rotate(-12deg); - -webkit-transform: rotate(-12deg); - transform: rotate(-12deg); - font-size: 0.8em; + color: white; + position: absolute; + bottom: 0.65em; + right: 0.9em; + font-weight: bold; + -ms-transform: rotate(-12deg); + -webkit-transform: rotate(-12deg); + transform: rotate(-12deg); + font-size: 0.8em; } /* @@ -1181,31 +1226,35 @@ textarea { ////////////////////////////////////////////////// */ #get-started-page .edit_space { - position: relative; - order: 3; -} -#get-started-page .edit_space .copy_button{ - color: #2d7bb6; - border-color: rgba(45, 123, 182, 0.25); - float: right; - margin: 0.5em 0 0 0.5em; - background: rgba(255, 255, 255, 0.7); - position: absolute; - z-index: 2; - left: 31.33em; - top: -1.5em; + position: relative; + order: 3; +} + +#get-started-page .edit_space .copy_button { + color: #2d7bb6; + border-color: rgba(45, 123, 182, 0.25); + float: right; + margin: 0.5em 0 0 0.5em; + background: rgba(255, 255, 255, 0.7); + position: absolute; + z-index: 2; + left: 31.33em; + top: -1.5em; } + /* To make get-started-page responsive */ @media (max-width: 780px) { - #get-started-page .edit_space .copy_button{ - left: 6.44em; - } + #get-started-page .edit_space .copy_button { + left: 6.44em; + } } + @media (max-width: 600px) { - #get-started-page .edit_space .copy_button{ - left: 5.91em; - } + #get-started-page .edit_space .copy_button { + left: 5.91em; + } } + /* ////////////////////////////////////////////////// EXAMPLES @@ -1213,7 +1262,7 @@ textarea { */ #examples-page .column { - margin-bottom: 2em; + margin-bottom: 2em; } /* @@ -1223,344 +1272,345 @@ textarea { */ #reference-page main h1 { - float: left; + float: left; } .reference-group h2 { - font-size: 1.5em; + font-size: 1.5em; } .reference-group h3 { - font-size: 1em; - font-family: 'Montserrat', sans-serif; - margin-top: 0.5em; + font-size: 1em; + font-family: 'Montserrat', sans-serif; + margin-top: 0.5em; } div.reference-group { - display: inline-block; + display: inline-block; } div.reference-subgroups { - margin: 0; - display: flex; - flex-direction: row; - flex-wrap: wrap; + margin: 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; } + div.reference-subgroup { - width: 11em; - margin-bottom: 1em; + width: 11em; + margin-bottom: 1em; } #reference-page .params table p { - /* Recently-added support for Markdown means that every parameter - * description is wrapped in a paragraph element. (Previously, they weren't - * wrapped in any kind of element.) - * - * We may eventually want to display paragraphs as blocks, so that we - * can have lengthy descriptions for parameters, but for now we'll - * keep our pre-existing behavior and essentially make paragraphs - * "invisible" by rendering them inline. */ - display: inline; - font-size: inherit; + /* Recently-added support for Markdown means that every parameter + * description is wrapped in a paragraph element. (Previously, they weren't + * wrapped in any kind of element.) + * + * We may eventually want to display paragraphs as blocks, so that we + * can have lengthy descriptions for parameters, but for now we'll + * keep our pre-existing behavior and essentially make paragraphs + * "invisible" by rendering them inline. */ + display: inline; + font-size: inherit; } #reference-page .param-optional { - color: #afafaf; + color: #afafaf; } #item { - width: 100%; + width: 100%; } #item h2 { - margin: 0.777em 0 0 0; - font-size: 1.444em; - font-weight: inherit; - font-family: 'Inconsolata', consolas, monospace; - color: #00a1d3; + margin: 0.777em 0 0 0; + font-size: 1.444em; + font-weight: inherit; + font-family: 'Inconsolata', consolas, monospace; + color: #00a1d3; } #item h3 { - font-size: 1.33em; - margin: 1em 0 0 0; + font-size: 1.33em; + margin: 1em 0 0 0; } #item ul { - margin-top: 0.5em; + margin-top: 0.5em; } #item li { - margin-bottom: 1em; + margin-bottom: 1em; } .description { - clear: both; - display: block; - width: 100%; + clear: both; + display: block; + width: 100%; } .syntax pre { - width: 100%; + width: 100%; } .item-wrapper, .list-wrapper { - float: left; - outline: none; + float: left; + outline: none; } .paramname { - display: inline-block; - min-width: 25%; - margin-right: 1%; - font-size: 1.2em; + display: inline-block; + min-width: 25%; + margin-right: 1%; + font-size: 1.2em; } .paramtype p { - display: inline; - font-size: 1em; + display: inline; + font-size: 1em; } .paramtype { - display: inline-block; - font-size: 1.2em; - width: 73%; - vertical-align: top; + display: inline-block; + font-size: 1.2em; + width: 73%; + vertical-align: top; } #library-page .group-name { - display: inline-block; + display: inline-block; } #library-page .group-name:hover { - color: #ed225d; + color: #ed225d; } /* EXAMPLES IN REF */ .example div { - position: relative; + position: relative; } .example-content .example_code { - position: relative; - left: 1em; - padding-top: 0; - margin-top: 1rem; - border: none; - width: 30.5em; - max-width: 100%; + position: relative; + left: 1em; + padding-top: 0; + margin-top: 1rem; + border: none; + width: 30.5em; + max-width: 100%; } .example-content .example_code.norender { - left: 0px; - margin-left: 0; + left: 0px; + margin-left: 0; } .example-content .edit_space { - position: absolute; - top: 0; - left: 0; - margin-top: -0.5em; - width: 100%; - pointer-events: none; + position: absolute; + top: 0; + left: 0; + margin-top: -0.5em; + width: 100%; + pointer-events: none; } .example-content .edit_space * { - pointer-events: auto; + pointer-events: auto; } .example-content .edit_space ul { - display: flex; - flex-direction: row-reverse; - position: relative; - pointer-events: none; + display: flex; + flex-direction: row-reverse; + position: relative; + pointer-events: none; } .example-content .edit_space ul li button { - font-family: 'Montserrat', sans-serif; - font-size: 1em; - color: #ccc; - border: 1px solid rgba(200, 200, 200, 0.15); - background: transparent; - outline: none; - margin-top: 0.25em; + font-family: 'Montserrat', sans-serif; + font-size: 1em; + color: #ccc; + border: 1px solid rgba(200, 200, 200, 0.15); + background: transparent; + outline: none; + margin-top: 0.25em; } .example-content .edit_space ul li button:hover, .example_container.editing ul li button { - color: #2d7bb6; - border-color: rgba(45, 123, 182, 0.25); + color: #2d7bb6; + border-color: rgba(45, 123, 182, 0.25); } .example-content .edit_space .edit_area { - position: absolute; - top: 0.5em; - left: 120px; - width: 30.5em; - padding-top: 1.5rem; - display: none; + position: absolute; + top: 0.5em; + left: 120px; + width: 30.5em; + padding-top: 1.5rem; + display: none; } .display_button { - margin-bottom: 2em; - font-family: 'Montserrat', sans-serif; - font-size: 1em; - color: #2d7bb6; - border: 1px solid rgba(45, 123, 182, 0.25); - background: transparent; - outline: none; + margin-bottom: 2em; + font-family: 'Montserrat', sans-serif; + font-size: 1em; + color: #2d7bb6; + border: 1px solid rgba(45, 123, 182, 0.25); + background: transparent; + outline: none; } .example-content .example_container { - width: 36em; - max-width: 100%; - border-top: 0.09em dashed; - border-top-color: #333; - padding-top: 0.5em; - margin-top: 2em; - min-height: 120px; - height: calc(100% * 1.1 + 20px); - display: flex; + width: 36em; + max-width: 100%; + border-top: 0.09em dashed; + border-top-color: #333; + padding-top: 0.5em; + margin-top: 2em; + min-height: 120px; + height: calc(100% * 1.1 + 20px); + display: flex; } .example-content .example_container:first-of-type { - margin-top: 1em; + margin-top: 1em; } /*to make ref example responsive*/ @media (max-width: 600px) { - .example-content .example_code { - margin-top: 0.2rem; - left: 0.5rem; - } - - .example-content .example_container { - width: 100%; - min-height: 220px; - height: calc(100% * 1.1 + 120px); - display: block; - } - - .example-content .edit_space .edit_area { - top: calc(120px + 1em); - left: 0; - width: 100%; - padding: 0.5em; - } - - .example_container button { - top: 124px; - } - - .description { - margin-top: 3rem; - } - - .edit_button { - left: 0; - } - - .reset_button { - left: 2.58em; - } - - .copy_button { - left: 5.91em; - } + .example-content .example_code { + margin-top: 0.2rem; + left: 0.5rem; + } + + .example-content .example_container { + width: 100%; + min-height: 220px; + height: calc(100% * 1.1 + 120px); + display: block; + } + + .example-content .edit_space .edit_area { + top: calc(120px + 1em); + left: 0; + width: 100%; + padding: 0.5em; + } + + .example_container button { + top: 124px; + } + + .description { + margin-top: 3rem; + } + + .edit_button { + left: 0; + } + + .reset_button { + left: 2.58em; + } + + .copy_button { + left: 5.91em; + } } form { - pointer-events: all; + pointer-events: all; } #search_button { - background: url(../img/search.png) 100% no-repeat; + background: url(../img/search.png) 100% no-repeat; } #search input[type='text'], #search input[type='search'] { - border: 1px solid rgba(200, 200, 200, 0.5); - font-family: 'Montserrat', sans-serif; - font-size: 2.25em; - width: 9.75em; + border: 1px solid rgba(200, 200, 200, 0.5); + font-family: 'Montserrat', sans-serif; + font-size: 2.25em; + width: 9.75em; } #search ::-webkit-input-placeholder, #search .twitter-typeahead .tt-hint { - color: #ccc; + color: #ccc; } :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { - color: #ccc; + color: #ccc; } #search input[type='text']:focus { - color: #2d7bb6; - outline-color: #2d7bb6; - outline-width: 1px; - outline-style: solid; + color: #2d7bb6; + outline-color: #2d7bb6; + outline-width: 1px; + outline-style: solid; } #search .twitter-typeahead .tt-dropdown-menu { - background-color: #fff; - border: 1px solid rgba(0, 0, 0, 0.2); - overflow-y: auto; - font-size: 1em; - line-height: 1.4em; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.2); + overflow-y: auto; + font-size: 1em; + line-height: 1.4em; } #search .twitter-typeahead .tt-suggestion.tt-cursor { - color: #333; - background-color: #eee; + color: #333; + background-color: #eee; } #search .twitter-typeahead .tt-suggestion p { - margin: 0; + margin: 0; } #search .twitter-typeahead .tt-suggestion p .small { - font-size: 12px; - color: #666; + font-size: 12px; + color: #666; } #search { - float: right; + float: right; } #search .twitter-typeahead .tt-dropdown-menu { - border: 1px solid rgba(0, 0, 0, 0.2); - padding: 0.5em; - max-height: 200px; - overflow-y: auto; - font-size: 1em; - line-height: 1.4em; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 0.5em; + max-height: 200px; + overflow-y: auto; + font-size: 1em; + line-height: 1.4em; } #search .twitter-typeahead .tt-suggestion { - padding: 3px 20px; - line-height: 24px; - cursor: pointer; + padding: 3px 20px; + line-height: 24px; + cursor: pointer; } #search .twitter-typeahead .empty-message { - padding: 8px 20px 1px 20px; - font-size: 14px; - line-height: 24px; + padding: 8px 20px 1px 20px; + font-size: 14px; + line-height: 24px; } #search_button { - float: right; + float: right; } a.code.core { - color: #333; + color: #333; } a.code.addon { - color: #704f21; + color: #704f21; } /* @@ -1576,51 +1626,52 @@ a.code.addon { */ #contribute-item { - font-size: 0.75em; - text-align: left; - display: inline-block; - width: 320px; - height: 250px; - float: left; - border: 1px solid #ed225d; - margin: 0 25px 25px 0; - position: relative; + font-size: 0.75em; + text-align: left; + display: inline-block; + width: 320px; + height: 250px; + float: left; + border: 1px solid #ed225d; + margin: 0 25px 25px 0; + position: relative; } .contribute-item-container { - position: absolute; - z-index: 20; - margin: 0; - padding: 10px; + position: absolute; + z-index: 20; + margin: 0; + padding: 10px; } .container { - /* width: 100px;*/ - height: 100px; - position: relative; - background: white; - margin-top: 1.5em; /* temp promo */ + /* width: 100px;*/ + height: 100px; + position: relative; + background: white; + margin-top: 1.5em; + /* temp promo */ } #navi, #infoi { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; } #infoi { - z-index: 10; + z-index: 10; } h3.contribute-title { - font-size: 1.33em; - margin: 0 0 27px 0; - padding-bottom: 0.3em; - border-bottom: 0.09em dashed; - border-bottom-color: #ed225d; + font-size: 1.33em; + margin: 0 0 27px 0; + padding-bottom: 0.3em; + border-bottom: 0.09em dashed; + border-bottom-color: #ed225d; } /* @@ -1630,136 +1681,136 @@ h3.contribute-title { */ .label { - position: relative; + position: relative; } .label .nounderline img { - margin: 0.5em 0 0 0; + margin: 0.5em 0 0 0; } .label h3 { - color: white; - position: absolute; - top: 0; - margin: 1em; + color: white; + position: absolute; + top: 0; + margin: 1em; } .label:hover h3 { - color: #ed225d; + color: #ed225d; } h3 { - font-size: 1.33em; - margin: 1em 0 0 0; + font-size: 1.33em; + margin: 1em 0 0 0; } .bullet-list { - padding: 0 0 0 40px; - list-style: disc; + padding: 0 0 0 40px; + list-style: disc; } #learn-page .label .nounderline img { - height: fit-content; + height: fit-content; } #learn-page .info { - display: inline-block; + display: inline-block; } #exampleDisplay, #exampleFrame, #exampleEditor { - width: 36em; - border: none; + width: 36em; + border: none; } #exampleDisplay { - display: flex; - flex-flow: column; + display: flex; + flex-flow: column; } #popupExampleFrame { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1000; - border: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; + border: none; } #exampleDisplay button { - color: #2d7bb6; - border-color: rgba(45, 123, 182, 0.25); - float: right; - margin: 0.5em 0 0 0.5em; - background: rgba(255, 255, 255, 0.7); - position: absolute; - left: 0; - z-index: 2; -} + color: #2d7bb6; + border-color: rgba(45, 123, 182, 0.25); + float: right; + margin: 0.5em 0 0 0.5em; + background: rgba(255, 255, 255, 0.7); + position: absolute; + left: 0; + z-index: 2; +} #exampleDisplay .edit_button { - left: 25.42em; - top: -2.5em; + left: 25.42em; + top: -2.5em; } #exampleDisplay .reset_button { - left: 28em; - top: -2.5em; + left: 28em; + top: -2.5em; } #exampleDisplay .copy_button { - left: 31.33em; - top: -2.5em; + left: 31.33em; + top: -2.5em; } #exampleDisplay button:hover { - background: #fff; + background: #fff; } #exampleDisplay .edit_space { - position: relative; - order: 3; + position: relative; + order: 3; } #exampleDisplay #exampleFrame { - height: 22em; - order: 2; + height: 22em; + order: 2; } #exampleDisplay #exampleEditor { - height: 500em; - width: 710px; - overflow: hidden; - margin-top: 0.5em; - color: #222; - font-family: 'Inconsolata', consolas, monospace; - font-size: 1em; - background-color: #fff; - line-height: 1em; - order: 4; + height: 500em; + width: 710px; + overflow: hidden; + margin-top: 0.5em; + color: #222; + font-family: 'Inconsolata', consolas, monospace; + font-size: 1em; + background-color: #fff; + line-height: 1em; + order: 4; } #exampleDisplay #exampleEditor .ace_gutter-cell { - background-image: none; - padding-left: 10px; - overflow: hidden; - background-color: #afafaf; + background-image: none; + padding-left: 10px; + overflow: hidden; + background-color: #afafaf; } #exampleDisplay #exampleEditor .ace_gutter-cell.ace_info { - background-color: #d7e5f5; + background-color: #d7e5f5; } #exampleDisplay #exampleEditor .ace_gutter-cell.ace_warning { - background-color: #ffd700; - color: #ffffff; + background-color: #ffd700; + color: #ffffff; } #exampleDisplay #exampleEditor .ace_gutter-cell.ace_error { - background-color: #ff6347; - color: #ffffff; + background-color: #ff6347; + color: #ffffff; } /* property, tag, boolean, @@ -1768,8 +1819,8 @@ h3 { #exampleDisplay #exampleEditor .ace_numeric, #exampleDisplay #exampleEditor .ace_tag { - color: #dc3787; - /* not p5 pink, but related */ + color: #dc3787; + /* not p5 pink, but related */ } /* atrule, attr-value, keyword, @@ -1778,8 +1829,8 @@ h3 { #exampleDisplay #exampleEditor .ace_type, #exampleDisplay #exampleEditor .ace_class, #exampleDisplay #exampleEditor .ace_attribute-name { - color: #704f21; - /* darker brown */ + color: #704f21; + /* darker brown */ } /* selector, attr-name, @@ -1788,55 +1839,55 @@ function, builtin */ #exampleDisplay #exampleEditor .ace_function, #exampleDisplay #exampleEditor .ace_keyword, #exampleDisplay #exampleEditor .ace_support { - color: #00a1d3; - /* not p5 blue, but related */ + color: #00a1d3; + /* not p5 blue, but related */ } /* comment, block-comment, prolog, doctype, cdata */ #exampleDisplay #exampleEditor .ace_comment { - color: #a0a0a0; - /* light gray */ + color: #a0a0a0; + /* light gray */ } /* operator, entity, url, variable */ #exampleDisplay #exampleEditor .ace_string { - color: #a67f59; - /* og coy a67f59 a light brown */ + color: #a67f59; + /* og coy a67f59 a light brown */ } #exampleDisplay #exampleEditor .ace_operator { - color: #333; + color: #333; } /* regex, important */ #exampleDisplay #exampleEditor .ace_regexp { - color: #e90; - /* og coy e90 orange */ + color: #e90; + /* og coy e90 orange */ } #exampleDisplay #exampleEditor .ace-gutter { - color: #333; + color: #333; } #exampleDisplay #exampleEditor .ace-gutter-layer { - color: #333; + color: #333; } #exampleDisplay #exampleEditor .ace_folding-enabled { - width: 10px !important; - color: #333; + width: 10px !important; + color: #333; } .attribution { - background-color: #eee; - font-size: 15px; - padding: 10px; - margin: 30px 0px 30px 0px; + background-color: #eee; + font-size: 15px; + padding: 10px; + margin: 30px 0px 30px 0px; } /* @@ -1845,149 +1896,162 @@ variable */ ////////////////////////////////////////////////// */ #featuring { - margin-bottom: 1em; + margin-bottom: 1em; } #showcase-page .showcase-intro h1 { - font: italic 900 14.5vw 'Montserrat', sans-serif; - color: #ed225d; - text-align: left; - text-transform: uppercase; + font: italic 900 14.5vw 'Montserrat', sans-serif; + color: #ed225d; + text-align: left; + text-transform: uppercase; } #showcase-page .showcase-intro p { - font: 400 1.4rem 'Montserrat', sans-serif; - line-height: 1.5em; + font: 400 1.4rem 'Montserrat', sans-serif; + line-height: 1.5em; } #showcase-page .showcase-featured h2, #showcase-page .project-page h2 { - font: italic 900 2rem 'Montserrat', sans-serif; - color: #ed225d; - letter-spacing: 0.05rem; + font: italic 900 2rem 'Montserrat', sans-serif; + color: #ed225d; + letter-spacing: 0.05rem; } #showcase-page ul.left-column, #showcase-page ul.right-column, #showcase-page ul.project-tags, #showcase-page ul.links { - list-style: none; + list-style: none; } #showcase-page img[alt] { - font-size: 0.9rem; + font-size: 0.9rem; } #showcase-page .showcase-featured { - margin-top: 15%; + margin-top: 15%; } #showcase-page .showcase-featured h3.title { - font: italic 900 1rem 'Montserrat', sans-serif; + font: italic 900 1rem 'Montserrat', sans-serif; } #showcase-page .showcase-featured p.credit { - font: 500 1rem 'Montserrat', sans-serif; + font: 500 1rem 'Montserrat', sans-serif; } #showcase-page .showcase-featured p.description { - font-size: 1em; - margin-bottom: 0.5rem; + font-size: 1em; + margin-bottom: 0.5rem; } #showcase-page .nominate { - margin-top: 1.5em; - display: inline-block; + margin-top: 1.5em; + display: inline-block; } #showcase-page .nominate a, #showcase-page .nominate a:visited { - padding: 0.4em 0.5em; - position: relative; - top: 0px; - left: 0px; - border: solid #ed225d 2px; - box-shadow: 4px 4px 0 #ed225d; + padding: 0.4em 0.5em; + position: relative; + top: 0px; + left: 0px; + border: solid #ed225d 2px; + box-shadow: 4px 4px 0 #ed225d; - font: 1.5rem 'Montserrat', sans-serif; - color: #ed225d; - letter-spacing: 0.02rem; - transition: all 0.3s; + font: 1.5rem 'Montserrat', sans-serif; + color: #ed225d; + letter-spacing: 0.02rem; + transition: all 0.3s; } @media (max-width: 500px) { - #showcase-page .nominate a, - #showcase-page .nominate a:visited { - padding: 0.4em 0.3em; - font: 1.3rem 'Montserrat', sans-serif; - } + + #showcase-page .nominate a, + #showcase-page .nominate a:visited { + padding: 0.4em 0.3em; + font: 1.3rem 'Montserrat', sans-serif; + } + + #processing-sites li:last-child { + display: none; + } } #showcase-page .nominate a:hover { - top: 4px; - left: 4px; - box-shadow: none; + top: 4px; + left: 4px; + box-shadow: none; } #showcase-page .showcase-featured a, #showcase-page .showcase-featured a:visited { - font-size: 1.2rem; - color: #ed225d; - letter-spacing: 0.02rem; - line-height: 1.5; + font-size: 1.2rem; + color: #ed225d; + letter-spacing: 0.02rem; + line-height: 1.5; } #showcase-page .showcase-featured a::after { - content: ' →'; + content: ' →'; } + #showcase-page .showcase-featured a.tag::after { - content: ''; + content: ''; } + #showcase-page .showcase-featured .no-arrow-link::after { - content: ' '; + content: ' '; } #showcase-page .showcase-featured .no-arrow-link:hover { - text-decoration: none; - padding: none; - border: none; + text-decoration: none; + padding: none; + border: none; } .project-info { - margin-top: 1em; + margin-top: 1em; } ul.project-tags a { - line-height: 0; - display: -webkit-box; - display: -webkit-flex; - display: flex; - -webkit-flex-wrap: wrap; - flex-wrap: wrap; - font-size: 0.5em; - margin: 0px; + line-height: 0; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + font-size: 0.5em; + margin: 0px; } + h3.title { - margin-top: 3em; + margin-top: 3em; } + #showcase-page ul.project-tags li { - margin: 5px; - display: inline-block; + margin: 5px; + display: inline-block; } + h2.featuring { - margin-top: 0px; + margin-top: 0px; } + #showcase-page a.tag { - display: inline-block; - padding: 6px 14px; - background-color: #ffe8e8; - border-radius: 27px; - font: 0.7rem 'Montserrat', sans-serif; - color: #333; + display: inline-block; + padding: 6px 14px; + background-color: #ffe8e8; + border-radius: 27px; + font: 0.7rem 'Montserrat', sans-serif; + color: #333; } + #showcase-page ul.project-tags li { - margin: 0px; + margin: 0px; } + /* ////////////////////////////////////////////////// SHOWCASE - FEATURED PROJECT PAGE @@ -2008,99 +2072,99 @@ h2.featuring { } */ -#showcase-page{ - margin-top: 3em; +#showcase-page { + margin-top: 3em; } #showcase-page .project-page h2 { - line-height: 1.4; + line-height: 1.4; } @media (min-width: 720px) { - /* for desktop/tablet: - * - two columns, one each for resources & authors - * - indent answer paragraphs in q & a - */ - #showcase-page .showcase-intro h1 { - font: italic 900 6.35vw 'Montserrat', sans-serif; - } + /* for desktop/tablet: + * - two columns, one each for resources & authors + * - indent answer paragraphs in q & a + */ + #showcase-page .showcase-intro h1 { + font: italic 900 6.35vw 'Montserrat', sans-serif; + } - #showcase-page .showcase-intro p { - line-height: 1.75em; - font-size: 1em; - } + #showcase-page .showcase-intro p { + line-height: 1.75em; + font-size: 1em; + } - #showcase-page .project-metadata { - display: flex; - } + #showcase-page .project-metadata { + display: flex; + } - #showcase-page .project-resources { - margin-left: 3rem; - } + #showcase-page .project-resources { + margin-left: 3rem; + } - #showcase-page .project-a { - width: 90%; - float: right; - display: inline-block; - clear: both; - } + #showcase-page .project-a { + width: 90%; + float: right; + display: inline-block; + clear: both; + } - #showcase-page .half-image { - width: 48%; - } + #showcase-page .half-image { + width: 48%; + } } #showcase-page .project-metadata { - margin-top: 3%; + margin-top: 3%; } #showcase-page .project-metadata section h3 { - color: #ed225d; - font: bold italic 1rem 'Montserrat', sans-serif; + color: #ed225d; + font: bold italic 1rem 'Montserrat', sans-serif; } #showcase-page .project-resources ul.links { - font: 500 0.7rem 'Montserrat', sans-serif; - letter-spacing: 0.01rem; - line-height: 1.5; - margin: 0.5rem 0; + font: 500 0.7rem 'Montserrat', sans-serif; + letter-spacing: 0.01rem; + line-height: 1.5; + margin: 0.5rem 0; } #showcase-page .project-credit { - font: italic bold 1.25rem 'Montserrat', sans-serif; + font: italic bold 1.25rem 'Montserrat', sans-serif; } #showcase-page .project-credit p { - margin: 0.5rem 0; + margin: 0.5rem 0; } #showcase-page .note { - font-size: 0.7rem; + font-size: 0.7rem; } #showcase-page .creator-from { - font-size: 0.7rem; + font-size: 0.7rem; } -#showcase-page .qa-group{ - margin-bottom: 2em; +#showcase-page .qa-group { + margin-bottom: 2em; } #showcase-page .project-q { - margin-left: 0%; - display: inline-block; - clear: both; - /* - font-size: 1.2rem; - font-weight: 900; - */ - font: 900 1.2rem 'Montserrat', sans-serif; - line-height: 1.5; + margin-left: 0%; + display: inline-block; + clear: both; + /* + font-size: 1.2rem; + font-weight: 900; + */ + font: 900 1.2rem 'Montserrat', sans-serif; + line-height: 1.5; } #showcase-page code { - font-size: 1.1rem; + font-size: 1.1rem; } @@ -2109,85 +2173,83 @@ h2.featuring { ========================================================================== */ #teach-page .case-list a:hover { - border-bottom: none; + border-bottom: none; } #teach-page .heading { - font: 400 1.4rem "Montserrat", sans-serif; - color: black; - line-height: 1.2em; - padding-bottom: .4em; - border-bottom: 4px dotted #ed225d; + font: 400 1.4rem "Montserrat", sans-serif; + color: black; + line-height: 1.2em; + padding-bottom: .4em; + border-bottom: 4px dotted #ed225d; } -#teach-page h3.title{ - margin-top: 3em; +#teach-page h3.title { + margin-top: 3em; } /*search-filter label*/ #teach-page .search-filter { - display: inline; + display: inline; } #teach-page .search-filter label { - display: inline-block; - font: italic 900 1rem "Montserrat", sans-serif; - padding: 6px 12px; - text-align: left; - white-space: nowrap; - color: #ed225d; - /*transition: .2s; */ - margin-bottom: .6em; - margin-top: 1.2em; - border: 1px solid #ed225d; + display: inline-block; + font: italic 900 1rem "Montserrat", sans-serif; + padding: 6px 12px; + text-align: left; + white-space: nowrap; + color: #ed225d; + /*transition: .2s; */ + margin-bottom: .6em; + margin-top: 1.2em; + border: 1px solid #ed225d; } #teach-page .search-filter label { - cursor: pointer; + cursor: pointer; } #teach-page .search-filter label:hover { - color: white; - background-color: #ed225d; + color: white; + background-color: #ed225d; } #teach-page .search-filter input[type="checkbox"] { - display: absolute; + display: absolute; } #teach-page .search-filter input[type="checkbox"] { - position: absolute; - opacity: 0; + position: absolute; + opacity: 0; } #teach-page ul.filters p.filter-title { - font: 400 0.83rem "Montserrat", sans-serif; - color: #ed225d; - height: 50px; - padding-top:20px; - background: none; - background-color: none; - box-shadow: none; - display: inline-block; - border: none; - clear: both; + font: 400 0.83rem "Montserrat", sans-serif; + color: #ed225d; + height: 50px; + padding-top: 20px; + background: none; + background-color: none; + box-shadow: none; + display: inline-block; + border: none; + clear: both; } - - #teach-page ul.filters li { - display: inline; - list-style: none; - width: 100%; + display: inline; + list-style: none; + width: 100%; } #teach-page ul.filters li label { @@ -2213,7 +2275,8 @@ h2.featuring { #teach-page ul.filters li label::before { display: inline-block; - padding: 2px 2px 2px 2px; /*padding among labels*/ + padding: 2px 2px 2px 2px; + /*padding among labels*/ } #teach-page ul.filters li label:hover { @@ -2221,24 +2284,24 @@ h2.featuring { background: #ffe8e8; /*transform: translateY(2px);*/ - } +} -#teach-page ul.filters li input[type="checkbox"]:checked + label { +#teach-page ul.filters li input[type="checkbox"]:checked+label { color: white; background: #ed225d; } #teach-page ul.filters li input[type="checkbox"] { - display: absolute; - position: absolute; - opacity: 0; + display: absolute; + position: absolute; + opacity: 0; } -#teach-page ul.filters li.clear{ - display: block; - clear: both; +#teach-page ul.filters li.clear { + display: block; + clear: both; } @@ -2246,189 +2309,190 @@ h2.featuring { /*Filter Panel*/ #teach-page .filter-panel { - padding: 0px; - background-color: white; - max-height: 0; - overflow: hidden; - transition: max-height 0.2s ease-out; - margin-bottom: 0.8em; - padding-bottom: .4em; + padding: 0px; + background-color: white; + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; + margin-bottom: 0.8em; + padding-bottom: .4em; } - #teach-page .filter-panel p { - margin: 0; - color: #333; - font-size: .83em; - height: 50px; - padding-top:20px; - transition: all 0.5s ease-in-out; + margin: 0; + color: #333; + font-size: .83em; + height: 50px; + padding-top: 20px; + transition: all 0.5s ease-in-out; } - /*p5 workshop and class title*/ +/*p5 workshop and class title*/ #teach-page .teach-intro p { - font: 400 1.2rem "Times", sans-serif; - line-height: 1.5em; + font: 400 1.2rem "Times", sans-serif; + line-height: 1.5em; } /*modal box*/ -#teach-page .modal-title{ +#teach-page .modal-title { - margin-left: 1em; - margin-right: 1em; + margin-left: 1em; + margin-right: 1em; - font: 400 1rem "Montserrat", sans-serif; - color: #ed225d; - line-height: 1.2em; + font: 400 1rem "Montserrat", sans-serif; + color: #ed225d; + line-height: 1.2em; } -#teach-page ul.cases li.clear{ - display: block; - clear: both; - margin-top: 1em; - margin-bottom: 1.2em; +#teach-page ul.cases li.clear { + display: block; + clear: both; + margin-top: 1em; + margin-bottom: 1.2em; } -#teach-page img{ - margin-bottom: 1.4em; +#teach-page img { + margin-bottom: 1.4em; } -#teach-page img[alt]{ - font: 0.6rem "Montserrat", sans-serif; - color: #bababa; +#teach-page img[alt] { + font: 0.6rem "Montserrat", sans-serif; + color: #bababa; } #teach-page .close { - position: relative; - color: #ffc7c7; - float: right; - font-size: 40px; - font-weight: bold; - margin-right: .4em; - margin-top: .4em; - cursor:pointer; -} - -#teach-page .close:hover, .close:focus { - color: #ed225d; - text-decoration: none; - cursor: pointer; -} - -#teach-page .case label{ - margin-left: 1em; - margin-right: 1em; - margin: 2px 2px; - padding: 5px 8px; - display: inline-block; - border-radius: 25px; - font: 0.7rem "Montserrat", sans-serif; - color: #aaaaaa; - white-space: nowrap; - color: white; - background: #ed225d; + position: relative; + color: #ffc7c7; + float: right; + font-size: 40px; + font-weight: bold; + margin-right: .4em; + margin-top: .4em; + cursor: pointer; +} + +#teach-page .close:hover, +.close:focus { + color: #ed225d; + text-decoration: none; + cursor: pointer; +} + +#teach-page .case label { + margin-left: 1em; + margin-right: 1em; + margin: 2px 2px; + padding: 5px 8px; + display: inline-block; + border-radius: 25px; + font: 0.7rem "Montserrat", sans-serif; + color: #aaaaaa; + white-space: nowrap; + color: white; + background: #ed225d; } /*modal scrollbar*/ #teach-page .modal-body::-webkit-scrollbar { - width: 5px; - height: 5px; - border-radius: 10px; + width: 5px; + height: 5px; + border-radius: 10px; } #teach-page .modal-body::-webkit-scrollbar-track { - background: #f1f1f1; + background: #f1f1f1; } #teach-page .modal-body::-webkit-scrollbar-thumb { - background: #ffe8e8; + background: #ffe8e8; } /*modal contents*/ -#teach-page .case{ - margin-left: 2em; - margin-right:2em; +#teach-page .case { + margin-left: 2em; + margin-right: 2em; } #teach-page .case span { - color: #ed225d; - font: 900 1.4rem "Montserrat", sans-serif; + color: #ed225d; + font: 900 1.4rem "Montserrat", sans-serif; } -#teach-page .case p.lead-name{ - font: 900 Italic 1.2rem "Montserrat", sans-serif; - color: #ed225d; - line-height: 1.4em; - border-bottom: 1.4em; +#teach-page .case p.lead-name { + font: 900 Italic 1.2rem "Montserrat", sans-serif; + color: #ed225d; + line-height: 1.4em; + border-bottom: 1.4em; } -#teach-page .case .speech{ +#teach-page .case .speech { - position: relative; - font: 200 Italic .8rem "Montserrat", sans-serif; - color: black; /*#aaaaaa; */ - background: #ffe8e8; - padding: 0.5em 1.2em; - border-radius: .4em; - border-bottom: none; - margin-bottom: 2em; - margin-top: 1em; + position: relative; + font: 200 Italic .8rem "Montserrat", sans-serif; + color: black; + /*#aaaaaa; */ + background: #ffe8e8; + padding: 0.5em 1.2em; + border-radius: .4em; + border-bottom: none; + margin-bottom: 2em; + margin-top: 1em; } #teach-page .case .speech::after { - content: ''; - position: absolute; - top: 0; - left: 8%; - width: 0; - height: 0; - border: 10px solid transparent; - border-bottom-color: #ffe8e8; - border-top: 0; - margin-left: -10px; - margin-top: -10px; -} - -#teach-page .case p.subtitle{ - - font: 400 1rem "Montserrat", sans-serif; - color: #ed225d; - line-height: 1.4em; - border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15); + content: ''; + position: absolute; + top: 0; + left: 8%; + width: 0; + height: 0; + border: 10px solid transparent; + border-bottom-color: #ffe8e8; + border-top: 0; + margin-left: -10px; + margin-top: -10px; } -#teach-page .case p{ - font: 400 1rem "Times", sans-serif; - color: black; - line-height: 1.4em; +#teach-page .case p.subtitle { - border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15); + font: 400 1rem "Montserrat", sans-serif; + color: #ed225d; + line-height: 1.4em; + border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15); +} + +#teach-page .case p { + font: 400 1rem "Times", sans-serif; + color: black; + line-height: 1.4em; + + border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15); } -#teach-page .modal-header{ +#teach-page .modal-header { - margin-bottom: 0.8em; + margin-bottom: 0.8em; } -#teach-page .modal-footer{ +#teach-page .modal-footer { - margin-bottom: 0.8em; + margin-bottom: 0.8em; } /*#teach-page .modal-body p{ @@ -2436,83 +2500,87 @@ h2.featuring { }*/ -#teach-page .modal-body:-webkit-scrollbar{ - display: none; +#teach-page .modal-body:-webkit-scrollbar { + display: none; } #teach-page .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 100; - width: 100%; - height: 100%; - top:0; - left:0; - right:0; - overflow: auto; - box-sizing: border-box; - background-color: rgba(255, 232, 232, 0.5); /* Fallback color */ + display: none; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 100; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + overflow: auto; + box-sizing: border-box; + background-color: rgba(255, 232, 232, 0.5); + /* Fallback color */ } -#teach-page .modal-content{ - position: fixed; - background: white; - top: 2%; - left: 2%; - right: 2%; - bottom: 2%; - margin: auto; /*keep centered*/ - border: 1.2px solid #ffe8e8; - max-width: 740px; - box-shadow: 10px 100px 30px -17px rgba(237, 34, 93, 0.5); - box-shadow: 10px 100px 20px -17px rgba(237, 34, 93, 0.5); - box-shadow: 10px 20px 10px -17px rgba(237, 34, 93, 0.5); +#teach-page .modal-content { + position: fixed; + background: white; + top: 2%; + left: 2%; + right: 2%; + bottom: 2%; + margin: auto; + /*keep centered*/ + border: 1.2px solid #ffe8e8; + max-width: 740px; + box-shadow: 10px 100px 30px -17px rgba(237, 34, 93, 0.5); + box-shadow: 10px 100px 20px -17px rgba(237, 34, 93, 0.5); + box-shadow: 10px 20px 10px -17px rgba(237, 34, 93, 0.5); } -#teach-page .modal-body{ +#teach-page .modal-body { - margin: auto; - height: 85%; - width: 95%; - overflow-y: auto; + margin: auto; + height: 85%; + width: 95%; + overflow-y: auto; } -#teach-page .results-wrapper{ - width: 100%; - outline: none; - background: white; - /*background: white; - background: #fafafa;*/ - /*border: solid white 1px;*/ - /*background: -webkit-linear-gradient(to bottom, white, #fafafa); - background: linear-gradient(to bottom, white, #fafafa);*/ - /*border: 1px solid #ffe8e8;*/ - /*box-shadow: 10px 100px 30px -17px rgba(237, 34, 93, 0.5); - box-shadow: 10px 100px 20px -17px rgba(255, 232, 232, 0.5); - box-shadow: 10px 20px 10px -17px rgba(237, 34, 93, 0.5);*/ +#teach-page .results-wrapper { + width: 100%; + outline: none; + background: white; + /*background: white; + background: #fafafa;*/ + /*border: solid white 1px;*/ + /*background: -webkit-linear-gradient(to bottom, white, #fafafa); + background: linear-gradient(to bottom, white, #fafafa);*/ + /*border: 1px solid #ffe8e8;*/ + /*box-shadow: 10px 100px 30px -17px rgba(237, 34, 93, 0.5); + box-shadow: 10px 100px 20px -17px rgba(255, 232, 232, 0.5); + box-shadow: 10px 20px 10px -17px rgba(237, 34, 93, 0.5);*/ } #teach-page .results-wrapper ul li.case-list a.myBtn { - overflow: hidden; - text-overflow: ellipsis; + overflow: hidden; + text-overflow: ellipsis; } -#teach-page .case-list{ +#teach-page .case-list { - margin-bottom: 0.8em; - padding-bottom: .4em; + margin-bottom: 0.8em; + padding-bottom: .4em; - font: 400 1.0rem "Times", sans-serif; - line-height: 1.2em; + font: 400 1.0rem "Times", sans-serif; + line-height: 1.2em; - border-bottom: 0.1em dashed #ffe8e8; + border-bottom: 0.1em dashed #ffe8e8; } @@ -2525,31 +2593,31 @@ h2.featuring { *, *:before, *:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } html { - font-size: 1.25em; + font-size: 1.25em; } body { - margin: 0; - background-color: #fff; - font-family: 'Times'; - font-weight: 400; - line-height: 1.45; - color: #333; + margin: 0; + background-color: #fff; + font-family: 'Times'; + font-weight: 400; + line-height: 1.45; + color: #333; } p { - font-size: 1.2em; - margin: 0.5em 0; + font-size: 1.2em; + margin: 0.5em 0; } .freeze { - overflow: hidden; + overflow: hidden; } /* menu links */ @@ -2558,58 +2626,58 @@ p { #menu li a:visited, #menu li a:focus:active, #menu li a:focus:hover { - color: #ed225d; - /* gray #333; - og p5 pink #ED225D; - blue #2D7BB6 (a lighter Processing blue — it's our take on it) */ - /*outline: none !important; keep on for accessibility */ - background: transparent; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + color: #ed225d; + /* gray #333; + og p5 pink #ED225D; + blue #2D7BB6 (a lighter Processing blue — it's our take on it) */ + /*outline: none !important; keep on for accessibility */ + background: transparent; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } /* body links */ a:link, a:visited { - color: #2d7bb6; - text-decoration: none; - /*outline: none !important; keep on for accessibility */ + color: #2d7bb6; + text-decoration: none; + /*outline: none !important; keep on for accessibility */ } a:active, a:hover, #reference a:hover { - color: #ed225d; - text-decoration: none; - padding-bottom: 0.11em; - border-bottom: 0.11em dashed; - border-bottom-color: #ed225d; - transition: border-bottom 30ms linear; + color: #ed225d; + text-decoration: none; + padding-bottom: 0.11em; + border-bottom: 0.11em dashed; + border-bottom-color: #ed225d; + transition: border-bottom 30ms linear; } a.nounderline:hover { - border: none; + border: none; } a.here { - color: #ed225d; - text-decoration: none; - padding-bottom: 0.1em; - border-bottom: transparent; - border-bottom-color: #ed225d; + color: #ed225d; + text-decoration: none; + padding-bottom: 0.1em; + border-bottom: transparent; + border-bottom-color: #ed225d; } .highlight { - background-color: rgba(237, 34, 93, 0.15); + background-color: rgba(237, 34, 93, 0.15); } -.container > div:first-of-type { - margin-top: 2em; +.container>div:first-of-type { + margin-top: 2em; } h1, @@ -2617,41 +2685,41 @@ h2, h3, h4, h5 { - margin: 1.414em 0 0.5em 0; - font-weight: inherit; - line-height: 1.2; - font-family: 'Montserrat', sans-serif; + margin: 1.414em 0 0.5em 0; + font-weight: inherit; + line-height: 1.2; + font-family: 'Montserrat', sans-serif; } h1 { - font-size: 2.25em; - /* 2.369em */ - margin: 0; + font-size: 2.25em; + /* 2.369em */ + margin: 0; } h2 { - font-size: 1.5em; - /* 1.777em */ - margin: 1em 0 0 0; + font-size: 1.5em; + /* 1.777em */ + margin: 1em 0 0 0; } .code { - font-family: 'Inconsolata', consolas, monospace; + font-family: 'Inconsolata', consolas, monospace; } #backlink { - margin: 1.2em 0.444em 0 0; - font-family: 'Montserrat', sans-serif; - float: right; + margin: 1.2em 0.444em 0 0; + font-family: 'Montserrat', sans-serif; + float: right; } #backlink a { - color: #afafaf; + color: #afafaf; } #backlink a:hover { - color: #ed225d; - border-bottom: none; + color: #ed225d; + border-bottom: none; } /* @@ -2662,241 +2730,241 @@ h2 { #promo, #promo:visited { - width: 100%; - background: palegreen; - padding: 0; - margin: 0; - text-align: center; - padding: 0.4em 0; - background: rgb(116, 255, 183); - background: radial-gradient( - circle, - rgba(116, 255, 183, 1) 0%, - rgba(138, 255, 242, 1) 100% - ); - font-family: 'Montserrat', sans-serif; - color: #ed225d !important; + width: 100%; + background: palegreen; + padding: 0; + margin: 0; + text-align: center; + padding: 0.4em 0; + background: rgb(116, 255, 183); + background: radial-gradient(circle, + rgba(116, 255, 183, 1) 0%, + rgba(138, 255, 242, 1) 100%); + font-family: 'Montserrat', sans-serif; + color: #ed225d !important; } #promo:hover { - background: #ed225d; - color: white !important; + background: #ed225d; + color: white !important; } #promo-link { - margin: 0 !important; - padding: 0; + margin: 0 !important; + padding: 0; } #family a:link, #family a:visited { - margin: 0.4em; + margin: 0.4em; } #family a:hover, #family a:active { - margin: 0.4em; - border: none; + margin: 0.4em; + border: none; } #family { - position: absolute; - z-index: 9999; - top: 0; - left: 0; - /*padding: 0.5em 2em;*/ - width: 100%; - /* 96, 100% if fixed*/ - border-bottom: 1px solid; - overflow: none; - margin: 0; - border-bottom-color: rgba(51, 51, 51, 0.5); - -webkit-box-shadow: 0px 0px 10px #333; - -moz-box-shadow: 0px 0px 10px #333; - box-shadow: 0px 0px 10px #333; - background-color: rgba(255, 255, 255, 0.85); - /* */ + position: absolute; + z-index: 9999; + top: 0; + left: 0; + /*padding: 0.5em 2em;*/ + width: 100%; + /* 96, 100% if fixed*/ + border-bottom: 1px solid; + overflow: none; + margin: 0; + border-bottom-color: rgba(51, 51, 51, 0.5); + -webkit-box-shadow: 0px 0px 10px #333; + -moz-box-shadow: 0px 0px 10px #333; + box-shadow: 0px 0px 10px #333; + background-color: rgba(255, 255, 255, 0.85); + /* */ } #processing-sites { - margin: 0.375em 0; + margin: 0.375em 0; } #processing-sites li { - list-style: none; - display: inline-block; - margin: 0; + list-style: none; + display: inline-block; + margin: 0; } #processing-sites li:first-child { - margin-left: 2em; + margin-left: 2em; } #processing-sites li:last-child { - float: right; - margin-right: 2em; + float: right; + margin-right: 2em; } .code-snippet { - margin: 0 0 0 1em; - width: 90%; - clear: both; + margin: 0 0 0 1em; + width: 90%; + clear: both; } .column-span { - margin: 0 0 0 1em; - padding: 0; - float: left; - max-width: 100%; + margin: 0 0 0 1em; + padding: 0; + float: left; + max-width: 100%; } .method_description p { - margin-top: 0; + margin-top: 0; } main { - padding: 0; + padding: 0; } .spacer { - clear: both; + clear: both; } ul { - margin: 0; - padding: 0; - list-style: none; + margin: 0; + padding: 0; + list-style: none; } ol { - font-size: 1.2em; + font-size: 1.2em; } li { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } ul.list_view { - margin: 0.5em 0 0 1em; - padding: 0; - list-style: disc; - list-style-position: outside; - font-size: 1.2em; + margin: 0.5em 0 0 1em; + padding: 0; + list-style: disc; + list-style-position: outside; + font-size: 1.2em; } ol ul.list_view { - font-size: 1em; + font-size: 1em; } ul.inside { - margin: 0 0 0 2em; - padding: 0; - list-style: disc; - list-style-position: inside; + margin: 0 0 0 2em; + padding: 0; + list-style: disc; + list-style-position: inside; } .image-row img { - width: 48%; - height: 14.3%; + width: 48%; + height: 14.3%; } -.image-row img + img { - float: right; - margin-right: 0; - margin-bottom: 0.25em; +.image-row img+img { + float: right; + margin-right: 0; + margin-bottom: 0.25em; } img, main div img { - margin: 0.5em 0.5em 0 0; - width: 100%; + margin: 0.5em 0.5em 0 0; + width: 100%; } -p + img { - margin-top: 0; +p+img { + margin-top: 0; } .video { - width: 100%; + width: 100%; } #lockup { - position: absolute; - top: -5.75em; - left: 1.25em; - height: 0px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + position: absolute; + top: -5.75em; + left: 1.25em; + height: 0px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } #lockup object { - margin: 0; - padding: 0; - border: none; + margin: 0; + padding: 0; + border: none; } #lockup a:focus { - outline: 0; + outline: 0; } .logo { - margin: 0; - padding: 0; - border: none; - margin-bottom: 0.4em; - height: 4.5em; - width: 9.75em; + margin: 0; + padding: 0; + border: none; + margin-bottom: 0.4em; + height: 4.5em; + width: 9.75em; } #lockup p { - color: #ed225d; - font-size: 0.7em; - font-family: 'Montserrat', sans-serif; - margin: 0.5em 0 0 8.5em; + color: #ed225d; + font-size: 0.7em; + font-family: 'Montserrat', sans-serif; + margin: 0.5em 0 0 8.5em; } #lockup a:link { - border: transparent; - height: 4.5em; - width: 9.75em; + border: transparent; + height: 4.5em; + width: 9.75em; } .caption { - margin-bottom: 2.5em; + margin-bottom: 2.5em; } .caption span, .caption p { - text-align: right; - font-size: 0.7em; - font-family: 'Montserrat', sans-serif; - padding-top: 0.25em; + text-align: right; + font-size: 0.7em; + font-family: 'Montserrat', sans-serif; + padding-top: 0.25em; } footer { - clear: both; - border-top: 0.1em dashed; - border-top-color: #ed225d; - margin: 2em 0; + clear: both; + border-top: 0.1em dashed; + border-top-color: #ed225d; + margin: 2em 0; } .videoWrapper { - position: relative; - padding-bottom: 56.25%; /* 16:9 */ - height: 0; - margin-top: 0.5em; + position: relative; + padding-bottom: 56.25%; + /* 16:9 */ + height: 0; + margin-top: 0.5em; } + .videoWrapper iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } /* ========================================================================== @@ -2908,18 +2976,18 @@ footer { */ .ir { - background-color: transparent; - border: 0; - overflow: hidden; - /* IE 6/7 fallback */ - *text-indent: -9999px; + background-color: transparent; + border: 0; + overflow: hidden; + /* IE 6/7 fallback */ + *text-indent: -9999px; } .ir:before { - content: ''; - display: block; - width: 0; - height: 150%; + content: ''; + display: block; + width: 0; + height: 150%; } /* @@ -2927,8 +2995,8 @@ footer { */ .hidden { - display: none !important; - visibility: hidden; + display: none !important; + visibility: hidden; } /* @@ -2936,14 +3004,14 @@ footer { */ .sr-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } /* @@ -2953,12 +3021,12 @@ footer { .sr-only.focusable:active, .sr-only.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; } /* @@ -2966,7 +3034,7 @@ footer { */ .invisible { - visibility: hidden; + visibility: hidden; } /* @@ -2983,14 +3051,14 @@ footer { .clearfix:before, .clearfix:after { - content: ' '; - /* 1 */ - display: table; - /* 2 */ + content: ' '; + /* 1 */ + display: table; + /* 2 */ } .clearfix:after { - clear: both; + clear: both; } /* @@ -2999,7 +3067,7 @@ footer { */ .clearfix { - *zoom: 1; + *zoom: 1; } /* ========================================================================== @@ -3007,348 +3075,409 @@ footer { ========================================================================== */ #notMobile-message { - display: none; - order: 1; + display: none; + order: 1; } #isMobile-displayButton { - display: none; + display: none; } #asterisk-design-element, .separator-design-element { - display: none; + display: none; } .pointerevents #asterisk-design-element, .pointerevents .separator-design-element { - pointer-events: none; - display: inline-block; + pointer-events: none; + display: inline-block; } @media (min-width: 780px) { - .container { - width: 49em !important; - margin: 11.5em auto; /* temp promo, 10.0em */ - } - main { - width: 36em; - padding: 0 !important; - } - footer { - width: 48em; - } -} + .container { + width: 49em !important; + margin: 11.5em auto; + /* temp promo, 10.0em */ + } -@media (min-width: 780px) { - .container { - margin: 11.5em auto; /* temp promo, 10.0em */ - width: 100%; - padding: 0.8em 0 0 0; - height: auto; - min-height: 100%; - } - #home-page { - display: flex; - flex-wrap: row; - } - main { - padding: 0 1em 0 0; - } - small, - .small, - footer, - #family { - font-size: 0.7em; - } - footer { - clear: both; - /*margin: 4em 0 2em -.75em;*/ - } - #i18n-btn { - position: absolute; - top: 4.0em; /* temp promo, 2.5em */ - right: 1em; - } - #i18n-btn a { - font-family: 'Montserrat', sans-serif; - } - #menu { - list-style: none; - font-family: 'Montserrat', sans-serif; - margin: 0 0.75em 0 -1.85em; - /* margin-right: 0.75em; */ - width: 7.3em; - height: 100%; - /*float:left;*/ - border-top: transparent; - border-bottom: transparent; - padding: 0; - font-size: 0.83em; - z-index: 100; - position: relative; - top: 0; - } - #menu li { - float: none; - margin: 0 0 1em 0; - text-align: right; - } - /* #menu li:last-child { - margin: 0; - } */ - /* #menu .other-link::after { - content:"\2192"; - margin-right: -0.98em; - content:" »"; - } */ - #menu li:nth-child(11) { - margin-top: 3em; - padding-top: 0.5em; - /*border-top: 0.06em solid rgba(51,51,51,0.25);*/ - } - .left-column { - width: 48%; - float: left; - margin-bottom: 40px; - } - .right-column { - width: 48%; - float: right; - margin-right: 0; - margin-bottom: 0.25em; - } - .narrow-left-column { - width: 32%; - float: left; - } - .wide-right-column { - width: 64%; - float: right; - margin-right: 0; - margin-bottom: 0.25em; - } - .book { - font-size: 0.7em; - } - .column_0, - .column_1, - .column_2 { - float: left; - width: 11.333em; - } - .column_0, - .column_1 { - margin-right: 1em; - } - #collection-list-nav { - width: 100%; - clear: both; - border-bottom: 1px dashed rgba(0, 0, 0, 0.2); - } + main { + width: 36em; + padding: 0 !important; + } - #collection-list-categories { - font-family: 'Montserrat', sans-serif; - display: flex; - flex-direction: row; - margin: 1em 0 1.5em 0; - } - #collection-list-categories ul { - flex: 1; - } - #collection-list { - margin: 0; - } - .group-name.first { - margin-top: 0 !important; - } - .column.group-name { - margin-bottom: 1em; - } + footer { + width: 48em; + } +} - #library-page .group-name { - margin: 2em 0 0.5em 0; - } - #library-page .column { - margin-top: 1em; - } - #list { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-bottom: 1em; - } +@media (min-width: 780px) { + .container { + margin: 11.5em auto; + /* temp promo, 10.0em */ + width: 100%; + padding: 0.8em 0 0 0; + height: auto; + min-height: 100%; + } + + #home-page { + display: flex; + flex-wrap: row; + } + + main { + padding: 0 1em 0 0; + } + + small, + .small, + footer, + #family { + font-size: 0.7em; + } + + footer { + clear: both; + /*margin: 4em 0 2em -.75em;*/ + } + + #i18n-btn { + position: absolute; + top: 4.0em; + /* temp promo, 2.5em */ + right: 1em; + } + + #i18n-btn a { + font-family: 'Montserrat', sans-serif; + } + + #menu { + list-style: none; + font-family: 'Montserrat', sans-serif; + margin: 0 0.75em 0 -1.85em; + /* margin-right: 0.75em; */ + width: 7.3em; + height: 100%; + /*float:left;*/ + border-top: transparent; + border-bottom: transparent; + padding: 0; + font-size: 0.83em; + z-index: 100; + position: relative; + top: 0; + } + + #menu li { + float: none; + margin: 0 0 1em 0; + text-align: right; + } + + /* #menu li:last-child { + margin: 0; + } */ + /* #menu .other-link::after { + content:"\2192"; + margin-right: -0.98em; + content:" »"; + } */ + #menu li:nth-child(11) { + margin-top: 3em; + padding-top: 0.5em; + /*border-top: 0.06em solid rgba(51,51,51,0.25);*/ + } + + .left-column { + width: 48%; + float: left; + margin-bottom: 40px; + } + + .right-column { + width: 48%; + float: right; + margin-right: 0; + margin-bottom: 0.25em; + } + + .narrow-left-column { + width: 32%; + float: left; + } + + .wide-right-column { + width: 64%; + float: right; + margin-right: 0; + margin-bottom: 0.25em; + } + + .book { + font-size: 0.7em; + } + + .column_0, + .column_1, + .column_2 { + float: left; + width: 11.333em; + } + + .column_0, + .column_1 { + margin-right: 1em; + } + + #collection-list-nav { + width: 100%; + clear: both; + border-bottom: 1px dashed rgba(0, 0, 0, 0.2); + } + + #collection-list-categories { + font-family: 'Montserrat', sans-serif; + display: flex; + flex-direction: row; + margin: 1em 0 1.5em 0; + } + + #collection-list-categories ul { + flex: 1; + } + + #collection-list { + margin: 0; + } + + .group-name.first { + margin-top: 0 !important; + } + + .column.group-name { + margin-bottom: 1em; + } + + #library-page .group-name { + margin: 2em 0 0.5em 0; + } + + #library-page .column { + margin-top: 1em; + } + + #list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-bottom: 1em; + } } @media (max-width: 780px) { - .tagline { - display: none !important; - } - - #family { - display: none; - } - - #i18n-btn { - position: absolute; - top: 0.5em; - right: 0.7em; - z-index: 10; - } - - #search { - width: 100%; - float: left; - margin-bottom: 1em; - } - - #search input[type='text'] { - width: 100%; - } - - #search input[type='text'], - #search input[type='search'] { - font-size: 1.5em; - } - - #lockup { - position: absolute; - top: 2em; - left: 1em; - } - .column-span { - margin:0; - padding: 0 1em; - float: left; - } - #menu.top_menu, - #menu { - margin: 6em 0 0.5em 0; - font-size: 1.3em; - } - #menu li { - display: inline-block; - } - - #menu li:nth-last-child(1) a::after { - content: ''; - } - - #menu li a::after { - content: ','; - } - - #contribute-item:first-child { - margin-left: 0px; - } - .download_box { - width: 96%; - } - .download_box.half_box { - width: 46%; - margin-right: 4%; - float: left; - } - #etc_list { - font-size: 1.2em; - margin-top: 1em; - } - #asterisk-design-element, - .separator-design-element { - display: none !important; - pointer-events: none; - } - pre[class*='language-'] { - padding: 0.5em 0.5em; - width: 100%; - } - - code { - word-wrap: break-word; - word-break: break-all; - } - #credits { - position: relative !important; - z-index: 2; - margin-top: -7em; - padding: 0 2em 3em 1em; - font-size: 0.5em; - float: right; - width: 100%; - text-align: right; - display: none; - /* HIDDEN SKETCH */ - } - #home-sketch-frame { - display: none; - /* HIDDEN SKETCH */ - } - #exampleDisplay, - #exampleFrame, - #exampleDisplay #exampleEditor { - width: 100%; - } - #exampleDisplay .edit_button { - left: -0.58em; - } - #exampleDisplay .reset_button { - left: 3em; - } - #exampleDisplay .copy_button { - left: 6.44em; - } - #exampleEditor { - margin-top: 3em; - } - small, - .small, - footer { - font-size: 0.5em; - } - .paramtype { - width: 96%; - } + .tagline { + display: none !important; + } + + #family { + height: 20px; + } + + #processing-sites { + font-size: 10px; + } + + #processing-sites li:last-child { + margin-right: 4rem; + } + + #i18n-btn { + margin-top: 1rem + } + + /* #family {*/ + /* display: none;*/ + /* }*/ + #i18n-btn { + position: absolute; + top: 0.5em; + right: 0.7em; + z-index: 10; + } + + #search { + width: 100%; + float: left; + margin-bottom: 1em; + } + + #search input[type='text'] { + width: 100%; + } + + #search input[type='text'], + #search input[type='search'] { + font-size: 1.5em; + } + + #lockup { + position: absolute; + top: 2em; + left: 1em; + } + + .column-span { + margin: 0; + padding: 0 1em; + float: left; + } + + #menu.top_menu, + #menu { + margin: 6em 0 0.5em 0; + font-size: 1.3em; + } + + #menu li { + display: inline-block; + } + + #menu li:nth-last-child(1) a::after { + content: ''; + } + + #menu li a::after { + content: ','; + } + + #contribute-item:first-child { + margin-left: 0px; + } + + .download_box { + width: 96%; + } + + .download_box.half_box { + width: 46%; + margin-right: 4%; + float: left; + } + + #etc_list { + font-size: 1.2em; + margin-top: 1em; + } + + #asterisk-design-element, + .separator-design-element { + display: none !important; + pointer-events: none; + } + + pre[class*='language-'] { + padding: 0.5em 0.5em; + width: 100%; + } + + code { + word-wrap: break-word; + word-break: break-all; + } + + #credits { + position: relative !important; + z-index: 2; + margin-top: -7em; + padding: 0 2em 3em 1em; + font-size: 0.5em; + float: right; + width: 100%; + text-align: right; + display: none; + /* HIDDEN SKETCH */ + } + + #home-sketch-frame { + display: none; + /* HIDDEN SKETCH */ + } + + #exampleDisplay, + #exampleFrame, + #exampleDisplay #exampleEditor { + width: 100%; + } + + #exampleDisplay .edit_button { + left: -0.58em; + } + + #exampleDisplay .reset_button { + left: 3em; + } + + #exampleDisplay .copy_button { + left: 6.44em; + } + + #exampleEditor { + margin-top: 3em; + } + + small, + .small, + footer { + font-size: 0.5em; + } + + .paramtype { + width: 96%; + } } @media (max-width: 400px) { - #i18n { - margin-top: 0.75em !important; - } - body { - margin-top: -0.75em !important; - } + #i18n { + margin-top: 0.75em !important; + } + + body { + margin-top: -0.75em !important; + } } iframe { - border: none; - width: 100%; + border: none; + width: 100%; } .iframe-container { - overflow: hidden; - position: relative; + overflow: hidden; + position: relative; } .iframe-container iframe { - border: 0; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; + border: 0; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; } .cnv_div { - /* This ensures that all canvases and additional html elements (if any) from - * the example code snippets are only 100px wide rather than covering the - * entire page, which potentially obscures the example code. */ - display: inline-flex; - flex-direction: column; + /* This ensures that all canvases and additional html elements (if any) from + * the example code snippets are only 100px wide rather than covering the + * entire page, which potentially obscures the example code. */ + display: inline-flex; + flex-direction: column; } -.cnv_div > * { - width: 100px; - height: auto; +.cnv_div>* { + width: 100px; + height: auto; } /* @@ -3358,31 +3487,31 @@ iframe { */ #i18n-buttons { - margin: 0; - background: white; + margin: 0; + background: white; } #i18n-buttons li { - list-style: none; - display: inline-block; - margin-left: 0.5em; + list-style: none; + display: inline-block; + margin-left: 0.5em; } #i18n-btn a { - border: none; - outline: none; - font-size: 0.7em; - color: #696969; - z-index: 5; + border: none; + outline: none; + font-size: 0.7em; + color: #696969; + z-index: 5; } #i18n-btn a:hover { - color: #ed225d; + color: #ed225d; } #i18n-btn a.disabled { - color: #ed225d; - cursor: default; + color: #ed225d; + cursor: default; } /* @@ -3394,139 +3523,141 @@ iframe { /* constants for the asterisk */ #asterisk-design-element { - position: fixed; - z-index: -1; - opacity: 0.6; - pointer-events: none; + position: fixed; + z-index: -1; + opacity: 0.6; + pointer-events: none; } /* variations for asterisks on pages */ .separator-design-element { - width: 0.33em; - height: 0.33em; - margin: 0 0.09em 0.18em 0.09em; - display: inline-block; - overflow: hidden; - text-indent: -100%; - background: transparent - url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48cGF0aCBkPSJNMTYuOSAxMC4zbDguNS0yLjYgMS43IDUuMiAtOC41IDIuOSA1LjMgNy41IC00LjQgMy4yIC01LjYtNy4zTDguNSAyNi4zbC00LjMtMy4zIDUuMy03LjJMMC45IDEyLjZsMS43LTUuMiA4LjYgMi44VjEuNGg1LjhWMTAuM3oiIHN0eWxlPSJmaWxsOiNFRDIyNUQ7c3Ryb2tlOiNFRDIyNUQiLz48L3N2Zz4='); - background-size: 0.33em; + width: 0.33em; + height: 0.33em; + margin: 0 0.09em 0.18em 0.09em; + display: inline-block; + overflow: hidden; + text-indent: -100%; + background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48cGF0aCBkPSJNMTYuOSAxMC4zbDguNS0yLjYgMS43IDUuMiAtOC41IDIuOSA1LjMgNy41IC00LjQgMy4yIC01LjYtNy4zTDguNSAyNi4zbC00LjMtMy4zIDUuMy03LjJMMC45IDEyLjZsMS43LTUuMiA4LjYgMi44VjEuNGg1LjhWMTAuM3oiIHN0eWxlPSJmaWxsOiNFRDIyNUQ7c3Ryb2tlOiNFRDIyNUQiLz48L3N2Zz4='); + background-size: 0.33em; } #home-page #asterisk-design-element { - bottom: -8%; - right: 20%; - height: 12em; - width: 12em; - opacity: 1; + bottom: -8%; + right: 20%; + height: 12em; + width: 12em; + opacity: 1; } #learn-page #asterisk-design-element, #examples-page #asterisk-design-element, #other-content-types-page #asterisk-design-element { - bottom: -14%; - left: -20%; - height: 25em; - width: 25em; - -webkit-transform: rotate(-1deg); - -moz-transform: rotate(-1deg); - -ms-transform: rotate(-1deg); - -o-transform: rotate(-1deg); - transform: rotate(-1deg); + bottom: -14%; + left: -20%; + height: 25em; + width: 25em; + -webkit-transform: rotate(-1deg); + -moz-transform: rotate(-1deg); + -ms-transform: rotate(-1deg); + -o-transform: rotate(-1deg); + transform: rotate(-1deg); } #libraries-page #asterisk-design-element, #books-page #asterisk-design-element { - bottom: -19%; - right: -16%; - height: 28em; - width: 28em; - -webkit-transform: rotate(2deg); - -moz-transform: rotate(2deg); - -ms-transform: rotate(2deg); - -o-transform: rotate(2deg); - transform: rotate(2deg); + bottom: -19%; + right: -16%; + height: 28em; + width: 28em; + -webkit-transform: rotate(2deg); + -moz-transform: rotate(2deg); + -ms-transform: rotate(2deg); + -o-transform: rotate(2deg); + transform: rotate(2deg); } #get-started-page #asterisk-design-element, #community-page #asterisk-design-element { - top: 10%; - right: -20%; - height: 30em; - width: 30em; - -webkit-transform: rotate(2deg); - -moz-transform: rotate(2deg); - -ms-transform: rotate(2deg); - -o-transform: rotate(2deg); - transform: rotate(2deg); + top: 10%; + right: -20%; + height: 30em; + width: 30em; + -webkit-transform: rotate(2deg); + -moz-transform: rotate(2deg); + -ms-transform: rotate(2deg); + -o-transform: rotate(2deg); + transform: rotate(2deg); } #reference-page #asterisk-design-element, #download-page #asterisk-design-element { - top: 7%; - left: 1%; - height: 10em; - width: 10em; - -webkit-transform: rotate(-21deg); - -moz-transform: rotate(-21deg); - -ms-transform: rotate(-21deg); - -o-transform: rotate(-21deg); - transform: rotate(-21deg); + top: 7%; + left: 1%; + height: 10em; + width: 10em; + -webkit-transform: rotate(-21deg); + -moz-transform: rotate(-21deg); + -ms-transform: rotate(-21deg); + -o-transform: rotate(-21deg); + transform: rotate(-21deg); } .email-octopus-email-address { - color: #ed225d; - text-decoration: none; - padding-bottom: 0.11em; - outline: none; - border: none; - border-bottom: 0.11em dashed; - border-bottom-color: #ed225d; - transition: border-bottom 30ms linear; - width: 13em; + color: #ed225d; + text-decoration: none; + padding-bottom: 0.11em; + outline: none; + border: none; + border-bottom: 0.11em dashed; + border-bottom-color: #ed225d; + transition: border-bottom 30ms linear; + width: 13em; } .email-octopus-form-row-hp { - position: absolute; - left: -5000px; + position: absolute; + left: -5000px; } .email-octopus-form-row button { - border: 1px solid #ed225d; - color: #ed225d; - padding: 0.4em 0.6em; - margin: 1em 0 0 0; - font-family: 'Montserrat', sans-serif; - display: block; + border: 1px solid #ed225d; + color: #ed225d; + padding: 0.4em 0.6em; + margin: 1em 0 0 0; + font-family: 'Montserrat', sans-serif; + display: block; } .email-octopus-form-row button:hover { - background-color: #ed225d; - color: white; + background-color: #ed225d; + color: white; } .email-octopus-email-address::-webkit-input-placeholder { - color: #ababab; + color: #ababab; } + .email-octopus-email-address::-moz-placeholder { - color: #ababab; + color: #ababab; } + .email-octopus-email-address:-moz-placeholder { - color: #ababab; + color: #ababab; } + .email-octopus-email-address:-ms-input-placeholder { - color: #ababab; + color: #ababab; } @media (min-width: 720px) { - .email-octopus-email-address { - width: 16em; - } - - .email-octopus-form-row button { - margin: 0; - margin-left: 0.5em; - display: inline; - } -} + .email-octopus-email-address { + width: 16em; + } + + .email-octopus-form-row button { + margin: 0; + margin-left: 0.5em; + display: inline; + } +} \ No newline at end of file diff --git a/src/assets/css/main.css b/src/assets/css/main.css index d45b7776c6..f4cde5251a 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -148,7 +148,7 @@ textarea { pointer-events: all; } -#lockup > a { +#lockup>a { position: relative; display: block; width: 200px; @@ -157,7 +157,7 @@ textarea { #logo_image { position: absolute; - top: 0; + top: 0; } #menu.top_menu, @@ -245,20 +245,20 @@ textarea { display: none; } - .sidebar-menu-btn:checked ~ .sidebar-menu { + .sidebar-menu-btn:checked~.sidebar-menu { max-height: 475px; } - .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon { + .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon { background: transparent; } - .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:before { + .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon:before { transform: rotate(-45deg); top: 0; } - .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:after { + .sidebar-menu-btn:checked~.sidebar-menu-icon .sidebar-nav-icon:after { transform: rotate(45deg); top: 0; } @@ -270,7 +270,7 @@ textarea { /* <======== Styling for footer menu bar ========> */ #footer-menu { - display: flex; + display: flex; flex-wrap: wrap; list-style: none; font-family: 'Montserrat', sans-serif; @@ -280,16 +280,16 @@ textarea { } #footer-menu li { - margin-right: 1em; + margin-right: 1em; } -#footer-menu a{ +#footer-menu a { color: #ed225d; - - } - #footer-menu-socials { - display: flex; +} + +#footer-menu-socials { + display: flex; flex-wrap: wrap; list-style: none; font-family: 'Montserrat', sans-serif; @@ -299,12 +299,13 @@ textarea { } #footer-menu-socials li { - margin-right: 1em; + margin-right: 1em; } -#footer-menu-socials a{ + +#footer-menu-socials a { color: #ed225d; - - } + +} /* <=================================================> */ @@ -428,7 +429,7 @@ textarea { fill: white; } -.download_box h4 + p { +.download_box h4+p { display: block; } @@ -714,7 +715,7 @@ div.reference-subgroup { flex-direction: row-reverse; position: relative; pointer-events: none; - color: #333; + color: #333; } .example-content .edit_space ul li button { @@ -739,8 +740,8 @@ div.reference-subgroup { border-color: rgba(45, 123, 182, 0.25); } -.example-content .edit_space ul li button:hover{ - background:white; +.example-content .edit_space ul li button:hover { + background: white; } .example-content .edit_space .edit_area { @@ -754,6 +755,7 @@ div.reference-subgroup { padding: 1.5em 0.5em 0.5em 0.5em; font-size: 15pt; } + .display_button { margin-bottom: 2em; font-family: 'Montserrat', sans-serif; @@ -1292,6 +1294,10 @@ variable */ padding: 0.4em 0.3em; font: 1.3rem 'Montserrat', sans-serif; } + + #processing-sites li:last-child { + display: none; + } } #showcase-page .nominate a:hover { @@ -1396,11 +1402,11 @@ h2.featuring { } @media (min-width: 720px) { + /* for desktop/tablet: * - two columns, one each for resources & authors * - indent answer paragraphs in q & a */ - #showcase-page .showcase-intro h1 { font: italic 900 6.35vw 'Montserrat', sans-serif; } @@ -1486,9 +1492,9 @@ h2.featuring { COMMUNITY PAGE ========================================================================== */ - .email-octopus-form-wrapper label { +.email-octopus-form-wrapper label { font-size: 1.2em; - } +} /* ========================================================================== @@ -1514,21 +1520,21 @@ h2.featuring { /*workshop contents*/ -#teach-page section.workshopS{ +#teach-page section.workshopS { overflow: auto; } -#teach-page .workshop-content{ +#teach-page .workshop-content { padding: 0.6em; } -#teach-page ul.workshops{ +#teach-page ul.workshops { padding-top: .4em; width: 41%; float: left; } -#teach-page .btn{ +#teach-page .btn { margin-bottom: 0.8em; padding-bottom: .4em; @@ -1538,7 +1544,8 @@ h2.featuring { border-bottom: 0.1em dashed #ffe8e8; } -#teach-page li.workshop .active,li.workshop p:hover{ +#teach-page li.workshop .active, +li.workshop p:hover { margin-bottom: 0.8em; padding-bottom: .4em; @@ -1551,7 +1558,7 @@ h2.featuring { /*workshop banners*/ -#teach-page .upcoming-banners{ +#teach-page .upcoming-banners { width: 59%; float: right; padding-top: 0.8em; @@ -1560,28 +1567,33 @@ h2.featuring { } -#teach-page .banner2, .banner3, .time2, .time3{ +#teach-page .banner2, +.banner3, +.time2, +.time3 { display: none; } -#teach-page .banner1:hover, .banner2:hover, .banner3:hover{ +#teach-page .banner1:hover, +.banner2:hover, +.banner3:hover { border: none; } -#teach-page .banner-img{ +#teach-page .banner-img { float: left; box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1); border-radius: 5px; border: none; } -#teach-page .banner-img:hover{ +#teach-page .banner-img:hover { box-shadow: 0px 0px 5px 2px #e088a1; border-radius: 5px; border: none; } -#teach-page .upcoming-time p{ +#teach-page .upcoming-time p { float: right; margin-bottom: 0.8em; padding-bottom: .4em; @@ -1648,8 +1660,6 @@ h2.featuring { } - - #teach-page ul.filters li { display: inline; list-style: none; @@ -1690,7 +1700,7 @@ h2.featuring { } -#teach-page ul.filters li input[type="checkbox"]:checked + label { +#teach-page ul.filters li input[type="checkbox"]:checked+label { color: white; background: #ed225d; @@ -1724,7 +1734,6 @@ h2.featuring { } - #teach-page .filter-panel p { margin: 0; color: #333; @@ -1980,7 +1989,7 @@ h2.featuring { #teach-page .case-list { margin-bottom: 0.8em; padding-bottom: .4em; - display:flex; + display: flex; font: 400 1.0rem "Times", sans-serif; line-height: 1.2em; @@ -1993,7 +2002,7 @@ h2.featuring { width: 40%; } -#teach-page .tags.selected{ +#teach-page .tags.selected { display: inline-block; margin-left: 2em; margin-right: 2em; @@ -2008,9 +2017,9 @@ h2.featuring { #teach-page .caseBtn { padding-top: 0.2em; - padding-bottom:0.2em; + padding-bottom: 0.2em; width: 60%; - height:max-content; + height: max-content; float: left; } @@ -2119,7 +2128,7 @@ a.here { background-color: rgba(237, 34, 93, 0.15); } -.container > div:first-of-type { +.container>div:first-of-type { margin-top: 2em; } @@ -2310,7 +2319,7 @@ ul.inside { height: 14.3%; } -.image-row img + img { +.image-row img+img { float: right; margin-right: 0; margin-bottom: 0.25em; @@ -2322,7 +2331,7 @@ main div img { width: 100%; } -p + img { +p+img { margin-top: 0; } @@ -2726,9 +2735,24 @@ footer { } #family { - display: none; + height: 20px; + } + + #processing-sites { + font-size: 10px; + } + + #i18n-btn { + margin-top: 1rem } + #processing-sites li:last-child { + margin-right: 4rem; + } + + /* #family {*/ + /* display: none;*/ + /* }*/ #i18n-btn { position: absolute; top: 0.5em; @@ -2904,19 +2928,20 @@ iframe { flex-direction: column; } -.cnv_div > * { +.cnv_div>* { width: 100px; height: auto; } + /* teach page */ @media (max-width: 780px) { - - #teach-page ul.workshops{ + + #teach-page ul.workshops { width: 100%; } - - #teach-page .upcoming-banners{ + + #teach-page .upcoming-banners { width: 100%; float: left; padding-top: 0em; @@ -2925,9 +2950,9 @@ iframe { } #teach-page .case-list { - display:block; + display: block; } - + #teach-page .labels { min-width: 100%; } @@ -3068,7 +3093,7 @@ iframe { transform: rotate(-21deg); } -@media(max-width:1352px) { +@media (max-width: 1352px) { #reference-page #asterisk-design-element, #download-page #asterisk-design-element { @@ -3143,4 +3168,4 @@ iframe { margin-left: 0.5em; display: inline; } -} +} \ No newline at end of file