init
This commit is contained in:
Andreas Wilms
92
PCSurvey/PCstatic/css/instructions.css
Normal file
92
PCSurvey/PCstatic/css/instructions.css
Normal file
@@ -0,0 +1,92 @@
|
||||
@font-face {
|
||||
font-family: 'Cardo';
|
||||
src: url(https://jonathan-harrell.com/wp-content/themes/jonathanharrell/fonts/Cardo-Italic.woff) format('woff2');
|
||||
}
|
||||
|
||||
#intro_text {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
#intro_text h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #2eec96;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
.instructions ul,
|
||||
.instructions ol {
|
||||
margin: 0.075rem 0;
|
||||
}
|
||||
|
||||
.instructions li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.instructions ul {
|
||||
list-style: none;
|
||||
padding-left: 50px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.instructions ul li {
|
||||
position: relative;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.instructions ul li::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: '•';
|
||||
}
|
||||
|
||||
.instructions ol {
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 2rem 0;
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#intro_text header h1 {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p.thick {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#consent {
|
||||
margin-bottom: 50px
|
||||
}
|
||||
125
PCSurvey/PCstatic/css/jspsych.css
Normal file
125
PCSurvey/PCstatic/css/jspsych.css
Normal file
@@ -0,0 +1,125 @@
|
||||
/*
|
||||
* CSS for jsPsych experiments.
|
||||
*
|
||||
* This stylesheet provides minimal styling to make jsPsych
|
||||
* experiments look polished without any additional styles.
|
||||
*/
|
||||
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
|
||||
|
||||
/* Container holding jsPsych content */
|
||||
|
||||
.jspsych-display-element {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.jspsych-display-element:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.jspsych-content-wrapper {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.jspsych-content {
|
||||
max-width: 95%; /* this is mainly an IE 10-11 fix */
|
||||
text-align: center;
|
||||
margin: auto; /* this is for overflowing content */
|
||||
}
|
||||
|
||||
.jspsych-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.jspsych-middle {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* fonts and type */
|
||||
|
||||
.jspsych-display-element {
|
||||
font-family: 'Open Sans', 'Arial', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
/* Form elements like input fields and buttons */
|
||||
|
||||
.jspsych-display-element input[type="text"] {
|
||||
font-family: 'Open Sans', 'Arial', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* borrowing Bootstrap style for btn elements, but combining styles a bit */
|
||||
.jspsych-btn {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin: 0px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
font-family: 'Open Sans', 'Arial', sans-serif;
|
||||
cursor: pointer;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.jspsych-btn:hover {
|
||||
background-color: #ddd;
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.jspsych-btn:disabled {
|
||||
background-color: #eee;
|
||||
color: #aaa;
|
||||
border-color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* jsPsych progress bar */
|
||||
|
||||
#jspsych-progressbar-container {
|
||||
color: #555;
|
||||
border-bottom: 1px solid #dedede;
|
||||
background-color: #f9f9f9;
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
padding: 8px 0px;
|
||||
width: 100%;
|
||||
line-height: 1em;
|
||||
}
|
||||
#jspsych-progressbar-container span {
|
||||
font-size: 14px;
|
||||
padding-right: 14px;
|
||||
}
|
||||
#jspsych-progressbar-outer {
|
||||
background-color: #eee;
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
#jspsych-progressbar-inner {
|
||||
background-color: #aaa;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Control appearance of jsPsych.data.displayData() */
|
||||
#jspsych-data-display {
|
||||
text-align: left;
|
||||
}
|
||||
187
PCSurvey/PCstatic/css/main.css
Normal file
187
PCSurvey/PCstatic/css/main.css
Normal file
@@ -0,0 +1,187 @@
|
||||
.clear_content {
|
||||
all:initial;
|
||||
}
|
||||
|
||||
.test {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#end-trial {
|
||||
|
||||
}
|
||||
|
||||
#replay {
|
||||
|
||||
}
|
||||
|
||||
.container > div {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
.debug {
|
||||
display:none;
|
||||
background: #000;
|
||||
color: #ff2277
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.object-fit_fill { object-fit: fill }
|
||||
.object-fit_contain { object-fit: contain }
|
||||
.object-fit_cover { object-fit: cover }
|
||||
.object-fit_none { object-fit: none }
|
||||
.object-fit_scale-down { object-fit: scale-down }
|
||||
|
||||
.work_container {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 188px auto 188px;
|
||||
grid-template-areas:
|
||||
"work1 work2 work3 "
|
||||
}
|
||||
|
||||
.container {
|
||||
font-family: "Courier New", Courier, serif;
|
||||
display: grid;
|
||||
grid-template-rows: 30px 100px 120px 40px 377px 377px 200px;
|
||||
grid-template-columns: auto 565px 565px auto;
|
||||
grid-gap: 20px 20px;
|
||||
grid-template-areas:
|
||||
". blank blank . "
|
||||
". header_l header_r . "
|
||||
". title_l title_r . "
|
||||
". spacer spacer ."
|
||||
". image1 image2 ."
|
||||
". image3 image4 ."
|
||||
". about work ."
|
||||
}
|
||||
|
||||
.container_noimages {
|
||||
font-family: "Courier New", Courier, serif;
|
||||
display: grid;
|
||||
grid-template-rows: 30px 100px 120px 40px 200px;
|
||||
grid-template-columns: auto 565px 565px auto;
|
||||
grid-gap: 20px 20px;
|
||||
grid-template-areas:
|
||||
". blank blank . "
|
||||
". header_l header_r . "
|
||||
". title_l title_r . "
|
||||
". spacer spacer ."
|
||||
". about work ."
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
visibility: hidden;
|
||||
font-family: "Courier New", Courier, serif;
|
||||
display: grid;
|
||||
grid-template-rows: 30px 100px 30px;
|
||||
grid-template-columns: auto 585px 565px auto;
|
||||
background: #001122;
|
||||
grid-template-areas:
|
||||
". . . . "
|
||||
". footer_left footer_right . "
|
||||
". . . . "
|
||||
}
|
||||
|
||||
.blank {
|
||||
grid-area: blank;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
grid-area: spacer;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
.left_header {
|
||||
grid-area: header_l;
|
||||
}
|
||||
|
||||
.right_header {
|
||||
grid-area: header_r;
|
||||
text-align: right;
|
||||
font-size: 10px
|
||||
}
|
||||
|
||||
.left_title {
|
||||
grid-area: title_l;
|
||||
}
|
||||
|
||||
.left_title {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.right_title {
|
||||
grid-area: title_r;
|
||||
}
|
||||
|
||||
.img1{
|
||||
grid-area: image1;
|
||||
}
|
||||
|
||||
.img2{
|
||||
grid-area: image2;
|
||||
}
|
||||
|
||||
.img3 {
|
||||
grid-area: image3;
|
||||
}
|
||||
|
||||
.img4 {
|
||||
grid-area: image4;
|
||||
}
|
||||
|
||||
.worklist {
|
||||
grid-area: work;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about {
|
||||
grid-area: about;
|
||||
}
|
||||
|
||||
.worklist.work1{
|
||||
grid-area: work1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.worklist.work2{
|
||||
grid-area: work2;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.worklist.work3{
|
||||
grid-area: work3;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.footer_left {
|
||||
grid-area: footer_left;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #001122;
|
||||
height: 130px
|
||||
}
|
||||
|
||||
img[class] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left_header > img {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.smallimg {
|
||||
height:48px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px
|
||||
}
|
||||
|
||||
.experts {
|
||||
font-size: 19px
|
||||
}
|
||||
259
PCSurvey/PCstatic/css/main_3col.css
Normal file
259
PCSurvey/PCstatic/css/main_3col.css
Normal file
@@ -0,0 +1,259 @@
|
||||
#currentscore, #total_current_score {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
.clear_content {
|
||||
all:initial;
|
||||
}
|
||||
|
||||
.test {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#end-trial {
|
||||
width: 110px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
#infotext {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#left-right{
|
||||
width: 45%;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#right-left{
|
||||
width: 45%;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#replay {
|
||||
width: 100px;
|
||||
height: 47px;
|
||||
}
|
||||
|
||||
.container > div {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
.head > div {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
.footer > div {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
.debug {
|
||||
display:none;
|
||||
background: #000;
|
||||
color: #ff2277
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.display_toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.object-fit_fill { object-fit: fill }
|
||||
.object-fit_contain { object-fit: contain }
|
||||
.object-fit_cover { object-fit: cover }
|
||||
.object-fit_none { object-fit: none }
|
||||
.object-fit_scale-down { object-fit: scale-down }
|
||||
|
||||
.work_container {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 120px 200px 200px 200px;
|
||||
grid-template-areas:
|
||||
" . work1 work2 work3 "
|
||||
}
|
||||
|
||||
.head {
|
||||
visibility: hidden;
|
||||
font-family: "Courier New", Courier, serif;
|
||||
display: grid;
|
||||
/* grid-template-rows: 30px 100px 120px 40px 377px 377px 250 1fr; */
|
||||
grid-template-columns: auto 350px 350px 350px auto;
|
||||
grid-gap: 20px 20px;
|
||||
grid-template-areas:
|
||||
". blank blank blank . "
|
||||
". header_l header_l header_r . "
|
||||
". title_l title_l title_r . "
|
||||
". spacer spacer spacer ."
|
||||
}
|
||||
|
||||
.container {
|
||||
align-items: center;
|
||||
font-family: "Courier New", Courier, serif;
|
||||
display: grid;
|
||||
/* grid-template-rows: 30px 100px 120px 40px 377px 377px 250 1fr; */
|
||||
grid-template-columns: auto 350px 350px 350px auto;
|
||||
grid-gap: 20px 20px;
|
||||
grid-template-areas:
|
||||
/* ". blank blank blank . "
|
||||
". header_l header_l header_r . "
|
||||
". title_l title_l title_r . "
|
||||
". spacer spacer spacer ." */
|
||||
". text1 image1 image2 ."
|
||||
". image3 image4 text2 ."
|
||||
". image5 text3 image6 ."
|
||||
". about work work ."
|
||||
". hfh hfh hfh ."
|
||||
}
|
||||
|
||||
.footer {
|
||||
align-items: left;
|
||||
visibility: hidden;
|
||||
font-family: "Courier New", Courier, serif;
|
||||
display: grid;
|
||||
grid-template-rows: 30px 100px 30px;
|
||||
grid-gap: 20px 20px;
|
||||
grid-template-columns: auto 350px 350px 350px auto;
|
||||
background: #001122;
|
||||
grid-template-areas:
|
||||
". . . . . "
|
||||
". footer_left footer_left footer_right . "
|
||||
". . . . . "
|
||||
}
|
||||
|
||||
.blank {
|
||||
grid-area: blank;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
grid-area: spacer;
|
||||
border-top: 1px solid #eee;
|
||||
height: 30px
|
||||
}
|
||||
|
||||
.text1 {
|
||||
grid-area: text1;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
grid-area: text2;
|
||||
}
|
||||
|
||||
.text3 {
|
||||
grid-area: text3;
|
||||
}
|
||||
|
||||
|
||||
.left_header {
|
||||
grid-area: header_l;
|
||||
}
|
||||
|
||||
.right_header {
|
||||
grid-area: header_r;
|
||||
text-align: right;
|
||||
font-size: 10px
|
||||
}
|
||||
|
||||
.left_title {
|
||||
grid-area: title_l;
|
||||
}
|
||||
|
||||
.left_title {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.right_title {
|
||||
grid-area: title_r;
|
||||
}
|
||||
|
||||
.img1{
|
||||
grid-area: image1;
|
||||
}
|
||||
|
||||
.img2{
|
||||
grid-area: image2;
|
||||
}
|
||||
|
||||
.img3 {
|
||||
grid-area: image3;
|
||||
}
|
||||
|
||||
.img4 {
|
||||
grid-area: image4;
|
||||
}
|
||||
|
||||
.img5 {
|
||||
grid-area: image5;
|
||||
}
|
||||
|
||||
.img6 {
|
||||
grid-area: image6;
|
||||
}
|
||||
|
||||
.worklist {
|
||||
grid-area: work;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about {
|
||||
grid-area: about;
|
||||
}
|
||||
|
||||
.work1{
|
||||
grid-area: work1;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.work2{
|
||||
grid-area: work2;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.work3{
|
||||
grid-area: work3;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.footer_left {
|
||||
grid-area: footer_left;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #001122;
|
||||
height: 130px
|
||||
}
|
||||
|
||||
.test img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left_header > img {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.smallimg {
|
||||
height:48px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px
|
||||
}
|
||||
|
||||
.experts {
|
||||
font-size: 19px
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 19px
|
||||
}
|
||||
|
||||
#screenshot {
|
||||
position: auto;
|
||||
}
|
||||
|
||||
#slider {
|
||||
width: 40%;
|
||||
height: auto;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px
|
||||
}
|
||||
Reference in New Issue
Block a user