changes
commit
cda7de7ae7
@ -0,0 +1,932 @@
|
||||
@font-face {
|
||||
font-family: inconsolata;
|
||||
src: url(fonts/inconsolata.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: inconsolatabold;
|
||||
src: url(fonts/inconsolatabold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: tenor;
|
||||
src: url(fonts/tenor.ttf);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html{
|
||||
font-size: calc(0.85em + 1vw);
|
||||
}
|
||||
|
||||
body{
|
||||
font-family:inconsolata, sans-serif;
|
||||
color:white;
|
||||
min-width:320px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#wrapper {
|
||||
position:fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
/*header*/
|
||||
|
||||
header{
|
||||
position:relative;
|
||||
width:100%;
|
||||
padding-bottom:5%;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
margin-left:1.3%;
|
||||
line-height:1.3vw;
|
||||
}
|
||||
|
||||
header h1{
|
||||
font-family:tenor;
|
||||
font-size:9vw;
|
||||
float:left;
|
||||
width:60%;
|
||||
margin-bottom:5%;
|
||||
|
||||
}
|
||||
|
||||
.show{
|
||||
font-size:0.9em;
|
||||
color:#0f0;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.show:hover{
|
||||
color:magenta;
|
||||
}
|
||||
|
||||
|
||||
#sub{
|
||||
white-space:nowrap;
|
||||
font-family:inconsolata;
|
||||
float:right;
|
||||
padding-top:3%;
|
||||
padding-right:3%;
|
||||
width:40%;
|
||||
}
|
||||
|
||||
|
||||
#sub > a {
|
||||
display:inline-block;
|
||||
width:45%;
|
||||
text-align:right;
|
||||
font-size:0.8em;
|
||||
}
|
||||
|
||||
#sub > a:visited {
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
#hleft-text{
|
||||
display:none;
|
||||
margin-top:0;
|
||||
background:rgba(0,0,0,0.5);
|
||||
width:100%;
|
||||
height:100%;
|
||||
left:0;
|
||||
top:0;
|
||||
position:fixed;
|
||||
color:white;
|
||||
z-index:55;
|
||||
cursor:pointer;
|
||||
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
background-color:black;
|
||||
width:90vw;
|
||||
height:95vh;
|
||||
position:fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y:auto;
|
||||
|
||||
}
|
||||
|
||||
#ihtp{
|
||||
width:80%;
|
||||
height:95%;
|
||||
position:fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
font-size:0.8em;
|
||||
line-height:130%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#hleft-text:target{
|
||||
display:block;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#getback{
|
||||
text-decoration:underline;
|
||||
text-decoration-color:#0f0;
|
||||
z-index:100;
|
||||
|
||||
}
|
||||
|
||||
#getback:hover{
|
||||
text-decoration: overline;
|
||||
text-decoration-color:magenta;
|
||||
}
|
||||
|
||||
#back, #back:hover, #back:visited{
|
||||
text-decoration:none;
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
[id*="att"]{
|
||||
background:rgba(0,0,0,0.7);
|
||||
overflow:hidden;
|
||||
height:100%;
|
||||
width:100%;
|
||||
top:0;
|
||||
left:0;
|
||||
margin:0 auto;
|
||||
position:fixed;
|
||||
z-index:10;
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
.wrap{
|
||||
background:rgba(0,0,0,0.3);
|
||||
position:fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y:hidden;
|
||||
height:80%;
|
||||
width:90%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
||||
}
|
||||
|
||||
.upbar {
|
||||
height:5%;
|
||||
width:100%;
|
||||
background-color:#0f0;
|
||||
position:relative;
|
||||
|
||||
}
|
||||
|
||||
.upbar a {
|
||||
display:block;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.upbar p {
|
||||
position:absolute;
|
||||
width:97%;
|
||||
margin:0 auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left:50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.uptitle {
|
||||
color:white;
|
||||
float:left;
|
||||
font-size:3vh;
|
||||
}
|
||||
|
||||
.upclose {
|
||||
color:white;
|
||||
float:right;
|
||||
text-decoration:none;
|
||||
font-size:3vh;
|
||||
}
|
||||
|
||||
.upclose:hover {
|
||||
color:magenta;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.twowrap {
|
||||
height:95%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
|
||||
[id*="att"] img{
|
||||
width:100%;
|
||||
padding:1% 3%;
|
||||
}
|
||||
|
||||
|
||||
[id*="att"]:target{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.twowrap-trailer{
|
||||
overflow-x:hidden;
|
||||
overflow-y: auto;
|
||||
height:91%;
|
||||
|
||||
}
|
||||
|
||||
.iframe-container {
|
||||
overflow:hidden;
|
||||
padding-top: 56%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.iframe-container iframe {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top:0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-container{
|
||||
overflow:hidden;
|
||||
padding-top: 0%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
[id*="att-video"] > .wrap{
|
||||
background:rgba(0,0,0,0);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*main*/
|
||||
|
||||
section#main{
|
||||
position:relative;
|
||||
margin-left:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
padding-left:1%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo{
|
||||
display:none;
|
||||
}
|
||||
|
||||
[class*="col"]{
|
||||
float:left;
|
||||
width:21.75%;
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right:2%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"] p, img, h2{
|
||||
padding-right:7%;
|
||||
|
||||
}
|
||||
|
||||
[class*="col"] p{
|
||||
font-size:0.65em;
|
||||
line-height:1.5em;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:13%;
|
||||
display:initial;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:65.25%;
|
||||
padding-right:0;
|
||||
|
||||
}
|
||||
|
||||
[class*="subcl"]{
|
||||
width:33%;
|
||||
float:left;
|
||||
|
||||
}
|
||||
|
||||
.col2 p,.col1 p {
|
||||
word-wrap:break-word;
|
||||
|
||||
}
|
||||
|
||||
p.subcl3{
|
||||
padding-right:1%;
|
||||
}
|
||||
|
||||
.row{
|
||||
padding-bottom:2.2vh;
|
||||
padding-top:2.2vh;
|
||||
border-bottom-style:solid;
|
||||
border-bottom-color:white;
|
||||
border-bottom-width:3px;
|
||||
|
||||
}
|
||||
|
||||
#categories{
|
||||
font-family:inconsolata, serif;
|
||||
margin:0 auto;
|
||||
width:100%;
|
||||
border-bottom-style:double;
|
||||
border-bottom-width:4px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#categories.row {
|
||||
padding-top:0.7%;
|
||||
padding-bottom:0.5%;
|
||||
-webkit-padding-after:0.5%;
|
||||
|
||||
}
|
||||
|
||||
#categories h2{
|
||||
font-size:0.7em;
|
||||
}
|
||||
|
||||
a{
|
||||
color:white;
|
||||
text-decoration-color:plum;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.ext:hover {
|
||||
text-decoration: overline;
|
||||
text-decoration-color:#f3ca1b;
|
||||
}
|
||||
|
||||
.int:hover {
|
||||
text-decoration: overline;
|
||||
text-decoration-color:magenta;
|
||||
}
|
||||
|
||||
|
||||
.gradShow {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
|
||||
.row::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* --------- 2nd case --------- */
|
||||
|
||||
@media all and (min-width: 600px) and (max-width: 720px){
|
||||
|
||||
/*header*/
|
||||
|
||||
#ihtp{
|
||||
/*font-size:calc(9px + 1.7vh);*/
|
||||
line-height:130%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
width:47%;
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
.wrap {
|
||||
height:85%;
|
||||
}
|
||||
|
||||
|
||||
/*main*/
|
||||
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
/*[class*="col"] p{
|
||||
font-size:calc(10px + 0.6vw);
|
||||
|
||||
|
||||
}*/
|
||||
|
||||
.row{
|
||||
border-bottom-width:4px;
|
||||
|
||||
}
|
||||
|
||||
#categories{
|
||||
border-bottom-width:4px;
|
||||
}
|
||||
|
||||
/*#categories h2{
|
||||
font-size:2.5vw;
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* --------- 3rd case --------- */
|
||||
|
||||
@media all and (min-width: 720px) and (max-width: 992px){
|
||||
|
||||
|
||||
/*header*/
|
||||
|
||||
#ihtp{
|
||||
font-size:calc(11px + 1.7vh);
|
||||
line-height:130%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
width:47%;
|
||||
/*font-size:2.1vw;*/
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
|
||||
/*main*/
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
|
||||
/*[class*="col"] p{
|
||||
font-size:calc(11px + 0.6vw);
|
||||
|
||||
|
||||
}*/
|
||||
|
||||
.row{
|
||||
border-bottom-width:5px;
|
||||
|
||||
}
|
||||
|
||||
p.subcl3{
|
||||
padding-right:5%;
|
||||
}
|
||||
|
||||
#categories{
|
||||
border-bottom-width:5px;
|
||||
}
|
||||
|
||||
|
||||
#categories.row {
|
||||
width:100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*#categories h2{
|
||||
font-size:2.1vw;
|
||||
}*/
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* --------- 4th case --------- */
|
||||
|
||||
@media all and (min-width: 992px) and (max-width: 1400px) {
|
||||
|
||||
/*header*/
|
||||
|
||||
|
||||
header{
|
||||
width:25%;
|
||||
position:fixed;
|
||||
left:0;
|
||||
top:2%;
|
||||
bottom:0;
|
||||
padding-bottom:0;
|
||||
float:left;
|
||||
margin-left:2%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header h1{
|
||||
font-size:2.3em;
|
||||
width:77%;
|
||||
padding-bottom:3%;
|
||||
-webkit-padding-after:7%;
|
||||
float:none;
|
||||
}
|
||||
|
||||
#page-title {
|
||||
margin-bottom:13%;
|
||||
}
|
||||
|
||||
.show{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#sub{
|
||||
padding-top:0;
|
||||
float:none;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
font-size:0.7em;
|
||||
width: 35%;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
|
||||
#hleft-text{
|
||||
position:relative;
|
||||
display:block;
|
||||
background:none;
|
||||
padding-top:5%;
|
||||
width:100%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
padding-right:30%;
|
||||
box-sizing:initial;
|
||||
cursor:default;
|
||||
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
width:100%;
|
||||
height:inherit;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
transform:none;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
overflow-y:hidden;
|
||||
background-color:initial;
|
||||
|
||||
}
|
||||
|
||||
#ihtp{
|
||||
width:80%;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
transform:none;
|
||||
font-size:1em;
|
||||
line-height:120%;
|
||||
|
||||
}
|
||||
|
||||
#getback{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#back, #back:hover, #back:visited{
|
||||
background-color:none;
|
||||
cursor:default;
|
||||
color:white;
|
||||
font-size:0.55em;
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
.wrap{
|
||||
width:60%;
|
||||
height:82%;
|
||||
|
||||
}
|
||||
|
||||
.uptitle {
|
||||
font-size:2.5vh;
|
||||
}
|
||||
|
||||
.upclose {
|
||||
font-size:2.5vh;
|
||||
}
|
||||
|
||||
/*main*/
|
||||
|
||||
section#main{
|
||||
position:fixed;
|
||||
top:0;
|
||||
bottom:0;
|
||||
overflow:hidden;
|
||||
left:25%;
|
||||
width:75%;
|
||||
padding-left:1%;
|
||||
|
||||
}
|
||||
|
||||
#content{
|
||||
padding-top:1%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
|
||||
}
|
||||
|
||||
.logo{
|
||||
display:block;
|
||||
width:70%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
[class*="col"] p {
|
||||
font-size:0.55em;
|
||||
}
|
||||
|
||||
.subrow p{
|
||||
padding-right:7%;
|
||||
|
||||
}
|
||||
|
||||
p.subcl3{
|
||||
padding-right:5%;
|
||||
}
|
||||
|
||||
.row{
|
||||
border-bottom-width:5px;
|
||||
}
|
||||
|
||||
|
||||
#categories{
|
||||
margin-left:0;
|
||||
border-bottom-width:5px;
|
||||
width:98%;
|
||||
}
|
||||
|
||||
/*#categories h2{
|
||||
font-size:1.5em;
|
||||
}*/
|
||||
|
||||
}
|
||||
|
||||
/* --------- 5th case --------- */
|
||||
|
||||
@media all and (min-width: 1400px){
|
||||
|
||||
/*header*/
|
||||
|
||||
|
||||
header{
|
||||
width:25%;
|
||||
position:fixed;
|
||||
left:0;
|
||||
top:2%;
|
||||
bottom:0;
|
||||
padding-bottom:0;
|
||||
float:left;
|
||||
margin-left:2%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header h1{
|
||||
/*font-size:4vw;*/
|
||||
width:77%;
|
||||
float:none;
|
||||
}
|
||||
|
||||
#page-title {
|
||||
margin-bottom:13%;
|
||||
}
|
||||
|
||||
.show{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#sub{
|
||||
padding-top:0;
|
||||
float:none;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
/*font-size:1.2em;*/
|
||||
width: 35%;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
|
||||
#hleft-text{
|
||||
position:relative;
|
||||
display:block;
|
||||
background:none;
|
||||
margin-top:9%;
|
||||
width:100%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
padding-right:30%;
|
||||
box-sizing:initial;
|
||||
cursor:default;
|
||||
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
width:100%;
|
||||
height:inherit;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
transform:none;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
overflow-y:hidden;
|
||||
background-color:initial;
|
||||
|
||||
}
|
||||
|
||||
#ihtp{
|
||||
width:70%;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
transform:none;
|
||||
/*font-size:calc(9px + 0.5vw);*/
|
||||
line-height:125%;
|
||||
|
||||
}
|
||||
|
||||
#getback{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#back, #back:hover, #back:visited{
|
||||
background-color:none;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
.wrap{
|
||||
height:70%;
|
||||
width:53%;
|
||||
|
||||
}
|
||||
|
||||
.uptitle {
|
||||
font-size:2vh;
|
||||
}
|
||||
|
||||
.upclose {
|
||||
font-size:2vh;
|
||||
}
|
||||
|
||||
/*main*/
|
||||
|
||||
section#main{
|
||||
position:fixed;
|
||||
top:0;
|
||||
bottom:0;
|
||||
overflow:hidden;
|
||||
left:25%;
|
||||
width:75%;
|
||||
padding-left:1%;
|
||||
|
||||
}
|
||||
|
||||
#content{
|
||||
padding-top:1%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
|
||||
}
|
||||
|
||||
.logo{
|
||||
display:block;
|
||||
width:70%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
|
||||
/*[class*="col"] p {
|
||||
font-size:calc(8px + 0.6vw);
|
||||
}*/
|
||||
|
||||
.subrow p{
|
||||
padding-right:7%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
p.subcl3{
|
||||
padding-right:5%;
|
||||
}
|
||||
|
||||
.row{
|
||||
border-bottom-width:5px;
|
||||
}
|
||||
|
||||
|
||||
#categories{
|
||||
border-bottom-width:7px;
|
||||
width:99%;
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
/*
|
||||
#categories h2{
|
||||
font-size:calc(12px + 0.6vw);
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
/* --------- 6th case --------- */
|
||||
@media all and (max-height: 450px) {
|
||||
|
||||
[id*="att-video"] > .wrap{
|
||||
width:400px;
|
||||
}
|
||||
|
||||
.upbar{
|
||||
height:7%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* hiding years */
|
||||
div#year2020 { display:none; }
|
||||
@ -0,0 +1,926 @@
|
||||
@font-face {
|
||||
font-family: inconsolata;
|
||||
src: url(fonts/inconsolata.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: inconsolatabold;
|
||||
src: url(fonts/inconsolatabold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: tenor;
|
||||
src: url(fonts/tenor.ttf);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family:inconsolata, sans-serif;
|
||||
color:white;
|
||||
min-width:320px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#wrapper {
|
||||
position:fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
/*header*/
|
||||
|
||||
header{
|
||||
position:relative;
|
||||
width:100%;
|
||||
padding-bottom:5%;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
margin-left:1.3%;
|
||||
line-height:1.3vw;
|
||||
}
|
||||
|
||||
header h1{
|
||||
font-family:tenor;
|
||||
font-size:9vw;
|
||||
float:left;
|
||||
width:60%;
|
||||
margin-bottom:5%;
|
||||
|
||||
}
|
||||
|
||||
.show{
|
||||
font-size:7vw;
|
||||
color:#0f0;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.show:hover{
|
||||
color:magenta;
|
||||
}
|
||||
|
||||
|
||||
#sub{
|
||||
white-space:nowrap;
|
||||
font-family:inconsolata;
|
||||
float:right;
|
||||
padding-top:3%;
|
||||
padding-right:3%;
|
||||
width:40%;
|
||||
}
|
||||
|
||||
|
||||
#sub > a {
|
||||
display:inline-block;
|
||||
width:45%;
|
||||
text-align:right;
|
||||
font-size:calc(9px + 0.9vw);
|
||||
}
|
||||
|
||||
#sub > a:visited {
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
#hleft-text{
|
||||
display:none;
|
||||
margin-top:0;
|
||||
background:rgba(0,0,0,0.5);
|
||||
width:100%;
|
||||
height:100%;
|
||||
left:0;
|
||||
top:0;
|
||||
position:fixed;
|
||||
color:white;
|
||||
z-index:55;
|
||||
cursor:pointer;
|
||||
overflow:hidden;
|
||||
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
background-color:black;
|
||||
width:90vw;
|
||||
height:95vh;
|
||||
position:fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y:auto;
|
||||
|
||||
}
|
||||
|
||||
#ihtp{
|
||||
width:80%;
|
||||
height:95%;
|
||||
position:fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
font-size:calc(8px + 1.5vh);
|
||||
line-height:130%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#hleft-text:target{
|
||||
display:block;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#getback{
|
||||
text-decoration:underline;
|
||||
text-decoration-color:#0f0;
|
||||
z-index:100;
|
||||
|
||||
}
|
||||
|
||||
#getback:hover{
|
||||
text-decoration: overline;
|
||||
text-decoration-color:magenta;
|
||||
}
|
||||
|
||||
#back, #back:hover, #back:visited{
|
||||
text-decoration:none;
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
[id*="att"]{
|
||||
background:rgba(0,0,0,0.7);
|
||||
overflow:hidden;
|
||||
height:100%;
|
||||
width:100%;
|
||||
top:0;
|
||||
left:0;
|
||||
margin:0 auto;
|
||||
position:fixed;
|
||||
z-index:10;
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
.wrap{
|
||||
background:rgba(0,0,0,0.3);
|
||||
position:fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y:hidden;
|
||||
height:80%;
|
||||
width:90%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
||||
}
|
||||
|
||||
.upbar {
|
||||
height:5%;
|
||||
width:100%;
|
||||
background-color:#0f0;
|
||||
position:relative;
|
||||
|
||||
}
|
||||
|
||||
.upbar a {
|
||||
display:block;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.upbar p {
|
||||
position:absolute;
|
||||
width:97%;
|
||||
margin:0 auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left:50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.uptitle {
|
||||
color:black;
|
||||
float:left;
|
||||
font-size:3vh;
|
||||
}
|
||||
|
||||
.upclose {
|
||||
color:black;
|
||||
float:right;
|
||||
text-decoration:none;
|
||||
font-size:3vh;
|
||||
}
|
||||
|
||||
.upclose:hover {
|
||||
color:magenta;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.twowrap {
|
||||
height:95%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
|
||||
[id*="att"] img{
|
||||
width:100%;
|
||||
padding:1% 3%;
|
||||
}
|
||||
|
||||
|
||||
[id*="att"]:target{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.twowrap-trailer{
|
||||
overflow-x:hidden;
|
||||
overflow-y: auto;
|
||||
height:91%;
|
||||
|
||||
}
|
||||
|
||||
.iframe-container {
|
||||
overflow:hidden;
|
||||
padding-top: 56%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.iframe-container iframe {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top:0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-container{
|
||||
overflow:hidden;
|
||||
padding-top: 0%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
[id*="att-video"] > .wrap{
|
||||
background:rgba(0,0,0,0);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*main*/
|
||||
|
||||
section#main{
|
||||
position:relative;
|
||||
margin-left:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
padding-left:1%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo{
|
||||
display:none;
|
||||
}
|
||||
|
||||
[class*="col"]{
|
||||
float:left;
|
||||
width:21.75%;
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right:2%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"] p, img, h2{
|
||||
padding-right:7%;
|
||||
|
||||
}
|
||||
|
||||
[class*="col"] p{
|
||||
font-size:calc(9px + 0.6vw);
|
||||
line-height:130%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:13%;
|
||||
display:initial;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:65.25%;
|
||||
padding-right:0;
|
||||
|
||||
}
|
||||
|
||||
[class*="subcl"]{
|
||||
width:33%;
|
||||
float:left;
|
||||
|
||||
}
|
||||
|
||||
.col2 p,.col1 p {
|
||||
word-wrap:break-word;
|
||||
|
||||
}
|
||||
|
||||
p.subcl3{
|
||||
padding-right:1%;
|
||||
}
|
||||
|
||||
.row{
|
||||
padding-bottom:2.2vh;
|
||||
padding-top:2.2vh;
|
||||
border-bottom-style:solid;
|
||||
border-bottom-color:white;
|
||||
border-bottom-width:3px;
|
||||
|
||||
}
|
||||
|
||||
#categories{
|
||||
font-family:inconsolata, serif;
|
||||
margin:0 auto;
|
||||
width:100%;
|
||||
border-bottom-style:double;
|
||||
border-bottom-width:4px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#categories.row {
|
||||
padding-top:0.7%;
|
||||
padding-bottom:0.5%;
|
||||
-webkit-padding-after:0.5%;
|
||||
|
||||
}
|
||||
|
||||
#categories h2{
|
||||
font-size:2.7vw;
|
||||
}
|
||||
|
||||
a{
|
||||
color:white;
|
||||
text-decoration-color:#0f0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.ext:hover {
|
||||
text-decoration: overline;
|
||||
text-decoration-color:#f3ca1b;
|
||||
}
|
||||
|
||||
.int:hover {
|
||||
text-decoration: overline;
|
||||
text-decoration-color:magenta;
|
||||
}
|
||||
|
||||
|
||||
.gradShow {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
|
||||
.row::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* --------- 2nd case --------- */
|
||||
|
||||
@media all and (min-width: 600px) and (max-width: 720px){
|
||||
|
||||
/*header*/
|
||||
|
||||
#ihtp{
|
||||
font-size:calc(9px + 1.7vh);
|
||||
line-height:130%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
width:47%;
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
.wrap {
|
||||
height:85%;
|
||||
}
|
||||
|
||||
|
||||
/*main*/
|
||||
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
[class*="col"] p{
|
||||
font-size:calc(10px + 0.6vw);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.row{
|
||||
border-bottom-width:4px;
|
||||
|
||||
}
|
||||
|
||||
#categories{
|
||||
border-bottom-width:4px;
|
||||
}
|
||||
|
||||
#categories h2{
|
||||
font-size:2.5vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* --------- 3rd case --------- */
|
||||
|
||||
@media all and (min-width: 720px) and (max-width: 992px){
|
||||
|
||||
|
||||
/*header*/
|
||||
|
||||
#ihtp{
|
||||
font-size:calc(11px + 1.7vh);
|
||||
line-height:130%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
width:47%;
|
||||
font-size:2.1vw;
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
|
||||
/*main*/
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"] p{
|
||||
font-size:calc(11px + 0.6vw);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.row{
|
||||
border-bottom-width:5px;
|
||||
|
||||
}
|
||||
|
||||
p.subcl3{
|
||||
padding-right:5%;
|
||||
}
|
||||
|
||||
#categories{
|
||||
border-bottom-width:5px;
|
||||
}
|
||||
|
||||
|
||||
#categories.row {
|
||||
width:100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#categories h2{
|
||||
font-size:2.1vw;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* --------- 4th case --------- */
|
||||
|
||||
@media all and (min-width: 992px) and (max-width: 1400px) {
|
||||
|
||||
/*header*/
|
||||
|
||||
|
||||
header{
|
||||
width:25%;
|
||||
position:fixed;
|
||||
left:0;
|
||||
top:2%;
|
||||
bottom:0;
|
||||
padding-bottom:0;
|
||||
float:left;
|
||||
margin-left:2%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header h1{
|
||||
font-size:7vw;
|
||||
width:77%;
|
||||
padding-bottom:3%;
|
||||
-webkit-padding-after:7%;
|
||||
float:none;
|
||||
}
|
||||
|
||||
#page-title {
|
||||
margin-bottom:13%;
|
||||
}
|
||||
|
||||
.show{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#sub{
|
||||
padding-top:0;
|
||||
float:none;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
font-size:calc(10px + 0.6vw);
|
||||
width: 35%;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
|
||||
#hleft-text{
|
||||
position:relative;
|
||||
display:block;
|
||||
background:none;
|
||||
padding-top:5%;
|
||||
width:100%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
padding-right:30%;
|
||||
box-sizing:initial;
|
||||
cursor:default;
|
||||
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
width:100%;
|
||||
height:inherit;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
transform:none;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
overflow-y:hidden;
|
||||
background-color:initial;
|
||||
|
||||
}
|
||||
|
||||
#ihtp{
|
||||
width:80%;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
transform:none;
|
||||
font-size:calc(8px + 0.6vw);
|
||||
line-height:120%;
|
||||
|
||||
}
|
||||
|
||||
#getback{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#back, #back:hover, #back:visited{
|
||||
background-color:none;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
.wrap{
|
||||
width:60%;
|
||||
height:82%;
|
||||
|
||||
}
|
||||
|
||||
.uptitle {
|
||||
font-size:2.5vh;
|
||||
}
|
||||
|
||||
.upclose {
|
||||
font-size:2.5vh;
|
||||
}
|
||||
|
||||
/*main*/
|
||||
|
||||
section#main{
|
||||
position:fixed;
|
||||
top:0;
|
||||
bottom:0;
|
||||
overflow:hidden;
|
||||
left:25%;
|
||||
width:75%;
|
||||
padding-left:1%;
|
||||
|
||||
}
|
||||
|
||||
#content{
|
||||
padding-top:1%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
|
||||
}
|
||||
|
||||
.logo{
|
||||
display:block;
|
||||
width:70%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
[class*="col"] p {
|
||||
font-size:calc(10px + 0.6vw);
|
||||
}
|
||||
|
||||
.subrow p{
|
||||
padding-right:7%;
|
||||
|
||||
}
|
||||
|
||||
p.subcl3{
|
||||
padding-right:5%;
|
||||
}
|
||||
|
||||
.row{
|
||||
border-bottom-width:5px;
|
||||
}
|
||||
|
||||
|
||||
#categories{
|
||||
margin-left:0;
|
||||
border-bottom-width:5px;
|
||||
width:98%;
|
||||
}
|
||||
|
||||
#categories h2{
|
||||
font-size:calc(11px + 0.6vw);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* --------- 5th case --------- */
|
||||
|
||||
@media all and (min-width: 1400px){
|
||||
|
||||
/*header*/
|
||||
|
||||
|
||||
header{
|
||||
width:25%;
|
||||
position:fixed;
|
||||
left:0;
|
||||
top:2%;
|
||||
bottom:0;
|
||||
padding-bottom:0;
|
||||
float:left;
|
||||
margin-left:2%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header h1{
|
||||
font-size:6vw;
|
||||
width:77%;
|
||||
float:none;
|
||||
}
|
||||
|
||||
#page-title {
|
||||
margin-bottom:13%;
|
||||
}
|
||||
|
||||
.show{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#sub{
|
||||
padding-top:0;
|
||||
float:none;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
font-size:1.2em;
|
||||
width: 35%;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
|
||||
#hleft-text{
|
||||
position:relative;
|
||||
display:block;
|
||||
background:none;
|
||||
margin-top:9%;
|
||||
width:100%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
padding-right:30%;
|
||||
box-sizing:initial;
|
||||
cursor:default;
|
||||
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
width:100%;
|
||||
height:inherit;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
transform:none;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
overflow-y:hidden;
|
||||
background-color:initial;
|
||||
|
||||
}
|
||||
|
||||
#ihtp{
|
||||
width:70%;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
transform:none;
|
||||
font-size:calc(9px + 0.5vw);
|
||||
line-height:125%;
|
||||
|
||||
}
|
||||
|
||||
#getback{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#back, #back:hover, #back:visited{
|
||||
background-color:none;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
.wrap{
|
||||
height:70%;
|
||||
width:53%;
|
||||
|
||||
}
|
||||
|
||||
.uptitle {
|
||||
font-size:2vh;
|
||||
}
|
||||
|
||||
.upclose {
|
||||
font-size:2vh;
|
||||
}
|
||||
|
||||
/*main*/
|
||||
|
||||
section#main{
|
||||
position:fixed;
|
||||
top:0;
|
||||
bottom:0;
|
||||
overflow:hidden;
|
||||
left:25%;
|
||||
width:75%;
|
||||
padding-left:1%;
|
||||
|
||||
}
|
||||
|
||||
#content{
|
||||
padding-top:1%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
|
||||
}
|
||||
|
||||
.logo{
|
||||
display:block;
|
||||
width:70%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"] p {
|
||||
font-size:calc(8px + 0.6vw);
|
||||
}
|
||||
|
||||
.subrow p{
|
||||
padding-right:7%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
p.subcl3{
|
||||
padding-right:5%;
|
||||
}
|
||||
|
||||
.row{
|
||||
border-bottom-width:5px;
|
||||
}
|
||||
|
||||
|
||||
#categories{
|
||||
border-bottom-width:7px;
|
||||
width:99%;
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
#categories h2{
|
||||
font-size:calc(12px + 0.6vw);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* --------- 6th case --------- */
|
||||
@media all and (max-height: 450px) {
|
||||
|
||||
[id*="att-video"] > .wrap{
|
||||
width:400px;
|
||||
}
|
||||
|
||||
.upbar{
|
||||
height:7%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* hiding years */
|
||||
div#year2020 { display:none; }
|
||||
@ -0,0 +1,948 @@
|
||||
@font-face {
|
||||
font-family: inconsolata;
|
||||
src: url(fonts/inconsolata.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: inconsolatabold;
|
||||
src: url(fonts/inconsolatabold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: tenor;
|
||||
src: url(fonts/tenor.ttf);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family:inconsolata, sans-serif;
|
||||
color:white;
|
||||
min-width:320px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#wrapper {
|
||||
position:fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
/*header*/
|
||||
|
||||
header{
|
||||
position:relative;
|
||||
width:100%;
|
||||
padding-bottom:5%;
|
||||
padding-left:1%;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
margin-left:1.3%;
|
||||
line-height:1.3vw;
|
||||
background-color:#777;
|
||||
}
|
||||
|
||||
header h1{
|
||||
font-family:tenor;
|
||||
font-size:9vw;
|
||||
float:left;
|
||||
width:60%;
|
||||
margin-bottom:5%;
|
||||
|
||||
}
|
||||
|
||||
.show{
|
||||
font-size:7vw;
|
||||
color:#0f0;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.show:hover{
|
||||
color:magenta;
|
||||
}
|
||||
|
||||
|
||||
#sub{
|
||||
white-space:nowrap;
|
||||
font-family:inconsolata;
|
||||
float:right;
|
||||
padding-top:3%;
|
||||
padding-right:3%;
|
||||
width:40%;
|
||||
}
|
||||
|
||||
|
||||
#sub > a {
|
||||
display:inline-block;
|
||||
width:45%;
|
||||
text-align:right;
|
||||
font-size:calc(9px + 0.9vw);
|
||||
}
|
||||
|
||||
#sub > a:visited {
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
#hleft-text{
|
||||
display:none;
|
||||
margin-top:0;
|
||||
background:rgba(0,0,0,0.5);
|
||||
width:100%;
|
||||
height:100%;
|
||||
left:0;
|
||||
top:0;
|
||||
position:fixed;
|
||||
color:white;
|
||||
z-index:55;
|
||||
cursor:pointer;
|
||||
overflow:hidden;
|
||||
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
background-color:black;
|
||||
width:90vw;
|
||||
height:95vh;
|
||||
position:fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y:auto;
|
||||
|
||||
}
|
||||
|
||||
#ihtp{
|
||||
width:80%;
|
||||
height:95%;
|
||||
position:fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
font-size:calc(8px + 1.5vh);
|
||||
line-height:130%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#hleft-text:target{
|
||||
display:block;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#getback{
|
||||
text-decoration:underline;
|
||||
text-decoration-color:#0f0;
|
||||
z-index:100;
|
||||
|
||||
}
|
||||
|
||||
#getback:hover{
|
||||
text-decoration: overline;
|
||||
text-decoration-color:magenta;
|
||||
}
|
||||
|
||||
#back, #back:hover, #back:visited{
|
||||
text-decoration:none;
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
[id*="att"]{
|
||||
background:rgba(0,0,0,0.7);
|
||||
overflow:hidden;
|
||||
height:100%;
|
||||
width:100%;
|
||||
top:0;
|
||||
left:0;
|
||||
margin:0 auto;
|
||||
position:fixed;
|
||||
z-index:10;
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
.wrap{
|
||||
background:rgba(0,0,0,0.3);
|
||||
position:fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y:hidden;
|
||||
height:80%;
|
||||
width:90%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
||||
}
|
||||
|
||||
.upbar {
|
||||
height:5%;
|
||||
width:100%;
|
||||
background-color:#0f0;
|
||||
position:relative;
|
||||
|
||||
}
|
||||
|
||||
.upbar a {
|
||||
display:block;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.upbar p {
|
||||
position:absolute;
|
||||
width:97%;
|
||||
margin:0 auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left:50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.uptitle {
|
||||
color:black;
|
||||
float:left;
|
||||
font-size:3vh;
|
||||
}
|
||||
|
||||
.upclose {
|
||||
color:black;
|
||||
float:right;
|
||||
text-decoration:none;
|
||||
font-size:3vh;
|
||||
}
|
||||
|
||||
.upclose:hover {
|
||||
color:magenta;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.twowrap {
|
||||
height:95%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
|
||||
[id*="att"] img{
|
||||
width:100%;
|
||||
padding:1% 3%;
|
||||
}
|
||||
|
||||
|
||||
[id*="att"]:target{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.twowrap-trailer{
|
||||
overflow-x:hidden;
|
||||
overflow-y: auto;
|
||||
height:91%;
|
||||
|
||||
}
|
||||
|
||||
.iframe-container {
|
||||
overflow:hidden;
|
||||
padding-top: 56%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.iframe-container iframe {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top:0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-container{
|
||||
overflow:hidden;
|
||||
padding-top: 0%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
[id*="att-video"] > .wrap{
|
||||
background:rgba(0,0,0,0);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*main*/
|
||||
|
||||
section#main{
|
||||
position:relative;
|
||||
margin-left:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
padding-left:1%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#content{
|
||||
background-color:#555;
|
||||
padding-left:1%;
|
||||
}
|
||||
|
||||
.logo{
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"]{
|
||||
float:left;
|
||||
width:21.75%;
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right:2%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"] p, img, h2{
|
||||
padding-right:7%;
|
||||
|
||||
}
|
||||
|
||||
[class*="col"] p{
|
||||
font-size:calc(9px + 0.6vw);
|
||||
line-height:130%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:13%;
|
||||
display:initial;
|
||||
box-shadow: 5px 10px:
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:65.25%;
|
||||
padding-right:0;
|
||||
|
||||
}
|
||||
|
||||
.col6 p, .col1 p, .subcl3 p{
|
||||
color:pink;
|
||||
}
|
||||
|
||||
[class*="subcl"]{
|
||||
width:33%;
|
||||
float:left;
|
||||
|
||||
}
|
||||
|
||||
.col2 p,.col1 p {
|
||||
word-wrap:break-word;
|
||||
|
||||
}
|
||||
|
||||
p.subcl3{
|
||||
padding-right:1%;
|
||||
}
|
||||
|
||||
.row{
|
||||
padding-bottom:2.2vh;
|
||||
padding-top:2.2vh;
|
||||
border-bottom-style:solid;
|
||||
border-bottom-color:#2f2f2f;
|
||||
border-bottom-width:3px;
|
||||
|
||||
}
|
||||
|
||||
#categories{
|
||||
font-family:inconsolata, serif;
|
||||
margin:0 auto;
|
||||
width:100%;
|
||||
border-bottom:none;
|
||||
padding-left:1%;
|
||||
/*border-bottom-width:4px;*/
|
||||
}
|
||||
|
||||
|
||||
#categories.row {
|
||||
padding-top:0.7%;
|
||||
padding-bottom:0.5%;
|
||||
-webkit-padding-after:0.5%;
|
||||
|
||||
}
|
||||
|
||||
#categories h2{
|
||||
font-size:2.7vw;
|
||||
}
|
||||
|
||||
a{
|
||||
color:white;
|
||||
|
||||
}
|
||||
|
||||
.ext{
|
||||
text-decoration-color:#0f0;
|
||||
}
|
||||
|
||||
.ext:hover {
|
||||
text-decoration: none;
|
||||
/*text-decoration-color:#f3ca1b;*/
|
||||
background-image: linear-gradient(to top, #555 , #555, #0f0, #555, #555);
|
||||
|
||||
}
|
||||
|
||||
.int{
|
||||
text-decoration-color:magenta;
|
||||
}
|
||||
|
||||
.int:hover {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(to top, #555 , magenta, #555);
|
||||
}
|
||||
|
||||
|
||||
.gradShow {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
|
||||
.row::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* --------- 2nd case --------- */
|
||||
|
||||
@media all and (min-width: 600px) and (max-width: 720px){
|
||||
|
||||
|
||||
|
||||
|
||||
/*header*/
|
||||
|
||||
#ihtp{
|
||||
font-size:calc(9px + 1.7vh);
|
||||
line-height:130%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
width:47%;
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
.wrap {
|
||||
height:85%;
|
||||
}
|
||||
|
||||
|
||||
/*main*/
|
||||
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
[class*="col"] p{
|
||||
font-size:calc(10px + 0.6vw);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.row{
|
||||
border-bottom-width:4px;
|
||||
|
||||
}
|
||||
|
||||
/*#categories{
|
||||
border-bottom-width:4px;
|
||||
}*/
|
||||
|
||||
#categories h2{
|
||||
font-size:2.5vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* --------- 3rd case --------- */
|
||||
|
||||
@media all and (min-width: 720px) and (max-width: 992px){
|
||||
|
||||
|
||||
/*header*/
|
||||
|
||||
#ihtp{
|
||||
font-size:calc(11px + 1.7vh);
|
||||
line-height:130%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
width:47%;
|
||||
font-size:2.1vw;
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
|
||||
/*main*/
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"] p{
|
||||
font-size:calc(11px + 0.6vw);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.row{
|
||||
border-bottom-width:5px;
|
||||
|
||||
}
|
||||
|
||||
p.subcl3{
|
||||
padding-right:5%;
|
||||
}
|
||||
|
||||
/*#categories{
|
||||
border-bottom-width:5px;
|
||||
}*/
|
||||
|
||||
|
||||
#categories.row {
|
||||
width:100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#categories h2{
|
||||
font-size:2.1vw;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* --------- 4th case --------- */
|
||||
|
||||
@media all and (min-width: 992px) and (max-width: 1400px) {
|
||||
|
||||
/*header*/
|
||||
|
||||
header{
|
||||
width:25%;
|
||||
position:fixed;
|
||||
left:0;
|
||||
top:2%;
|
||||
bottom:0;
|
||||
padding-bottom:0;
|
||||
float:left;
|
||||
margin-left:2%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header h1{
|
||||
font-size:4vw;
|
||||
width:77%;
|
||||
padding-bottom:3%;
|
||||
-webkit-padding-after:7%;
|
||||
float:none;
|
||||
}
|
||||
|
||||
#page-title {
|
||||
margin-bottom:13%;
|
||||
}
|
||||
|
||||
.show{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#sub{
|
||||
padding-top:0;
|
||||
float:none;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
font-size:calc(10px + 0.6vw);
|
||||
width: 35%;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
|
||||
#hleft-text{
|
||||
position:relative;
|
||||
display:block;
|
||||
background:none;
|
||||
padding-top:5%;
|
||||
width:100%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
padding-right:30%;
|
||||
box-sizing:initial;
|
||||
cursor:default;
|
||||
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
width:100%;
|
||||
height:inherit;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
transform:none;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
overflow-y:hidden;
|
||||
background-color:initial;
|
||||
|
||||
}
|
||||
|
||||
#ihtp{
|
||||
width:80%;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
transform:none;
|
||||
font-size:calc(8px + 0.6vw);
|
||||
line-height:120%;
|
||||
|
||||
}
|
||||
|
||||
#getback{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#back, #back:hover, #back:visited{
|
||||
background-color:none;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
.wrap{
|
||||
width:60%;
|
||||
height:82%;
|
||||
|
||||
}
|
||||
|
||||
.uptitle {
|
||||
font-size:2.5vh;
|
||||
}
|
||||
|
||||
.upclose {
|
||||
font-size:2.5vh;
|
||||
}
|
||||
|
||||
/*main*/
|
||||
|
||||
section#main{
|
||||
position:fixed;
|
||||
top:0;
|
||||
bottom:0;
|
||||
overflow:hidden;
|
||||
left:25%;
|
||||
width:75%;
|
||||
padding-left:1%;
|
||||
|
||||
}
|
||||
|
||||
#content{
|
||||
padding-top:1%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
|
||||
}
|
||||
|
||||
.logo{
|
||||
display:block;
|
||||
width:70%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
[class*="col"] p {
|
||||
font-size:calc(10px + 0.6vw);
|
||||
}
|
||||
|
||||
.subrow p{
|
||||
padding-right:7%;
|
||||
|
||||
}
|
||||
|
||||
p.subcl3{
|
||||
padding-right:5%;
|
||||
}
|
||||
|
||||
.row{
|
||||
border-bottom-width:5px;
|
||||
}
|
||||
|
||||
|
||||
#categories{
|
||||
margin-left:0;
|
||||
/*border-bottom-width:5px;*/
|
||||
width:98%;
|
||||
}
|
||||
|
||||
#categories h2{
|
||||
font-size:calc(11px + 0.6vw);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* --------- 5th case --------- */
|
||||
|
||||
@media all and (min-width: 1400px){
|
||||
|
||||
/*header*/
|
||||
|
||||
|
||||
header{
|
||||
width:25%;
|
||||
position:fixed;
|
||||
left:0;
|
||||
top:2%;
|
||||
bottom:0;
|
||||
padding-bottom:0;
|
||||
float:left;
|
||||
margin-left:2%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header h1{
|
||||
font-size:3vw;
|
||||
width:77%;
|
||||
float:none;
|
||||
}
|
||||
|
||||
#page-title {
|
||||
margin-bottom:13%;
|
||||
}
|
||||
|
||||
.show{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#sub{
|
||||
padding-top:0;
|
||||
float:none;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#sub > a {
|
||||
font-size:1.2em;
|
||||
width: 35%;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
|
||||
#hleft-text{
|
||||
position:relative;
|
||||
display:block;
|
||||
background:none;
|
||||
margin-top:9%;
|
||||
width:100%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
padding-right:30%;
|
||||
box-sizing:initial;
|
||||
cursor:default;
|
||||
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
width:100%;
|
||||
height:inherit;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
transform:none;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
overflow-y:hidden;
|
||||
background-color:initial;
|
||||
|
||||
}
|
||||
|
||||
#ihtp{
|
||||
width:70%;
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
-webkit-transform:none;
|
||||
-ms-transform:none;
|
||||
transform:none;
|
||||
font-size:calc(9px + 0.5vw);
|
||||
line-height:125%;
|
||||
|
||||
}
|
||||
|
||||
#getback{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#back, #back:hover, #back:visited{
|
||||
background-color:none;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
/*xpuf*/
|
||||
|
||||
.wrap{
|
||||
height:70%;
|
||||
width:53%;
|
||||
|
||||
}
|
||||
|
||||
.uptitle {
|
||||
font-size:2vh;
|
||||
}
|
||||
|
||||
.upclose {
|
||||
font-size:2vh;
|
||||
}
|
||||
|
||||
/*main*/
|
||||
|
||||
section#main{
|
||||
position:fixed;
|
||||
top:0;
|
||||
bottom:0;
|
||||
overflow:hidden;
|
||||
left:25%;
|
||||
width:75%;
|
||||
padding-left:1%;
|
||||
|
||||
}
|
||||
|
||||
#content{
|
||||
padding-top:1%;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
|
||||
}
|
||||
|
||||
.logo{
|
||||
display:block;
|
||||
width:70%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"]{
|
||||
width:20.75%;
|
||||
|
||||
}
|
||||
|
||||
.col1 {
|
||||
width:17%;
|
||||
}
|
||||
|
||||
.col6 {
|
||||
width:62.25%;
|
||||
}
|
||||
|
||||
|
||||
[class*="col"] p {
|
||||
font-size:calc(8px + 0.6vw);
|
||||
}
|
||||
|
||||
.subrow p{
|
||||
padding-right:7%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
p.subcl3{
|
||||
padding-right:5%;
|
||||
}
|
||||
|
||||
.row{
|
||||
border-bottom-width:5px;
|
||||
}
|
||||
|
||||
|
||||
#categories{
|
||||
/*border-bottom-width:7px;*/
|
||||
width:99%;
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
#categories h2{
|
||||
font-size:calc(12px + 0.6vw);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* --------- 6th case --------- */
|
||||
@media all and (max-height: 450px) {
|
||||
|
||||
[id*="att-video"] > .wrap{
|
||||
width:400px;
|
||||
}
|
||||
|
||||
.upbar{
|
||||
height:7%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* hiding years */
|
||||
div#year2020 { display:none; }
|
||||
@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>ilinx</title>
|
||||
<meta name="description" content="XPUB">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
<style type="text/css">
|
||||
body { font-family: "Lucida Console", Monaco, monospace !important;
|
||||
color: white;
|
||||
background-color: black !important;
|
||||
background: radial-gradient(15px 5px at 25% 0, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.06) 99%, transparent 99%, transparent 100%),
|
||||
radial-gradient(15px 5px at 75% 100%, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.06) 99%, transparent 99%, transparent 100%),
|
||||
radial-gradient(10px 3px at 25% 0, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.05) 99%, transparent 99%, transparent 100%),
|
||||
radial-gradient(10px 3px at 75% 100%, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.05) 99%, transparent 99%, transparent 100%),
|
||||
radial-gradient(30px 8px at 25% 0, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%),
|
||||
radial-gradient(30px 8px at 75% 100%, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%), #c4cbc3;
|
||||
background-size: 60px 40px, 60px 40px, 40px 24px, 40px 24px, 120px 64px, 120px 64px;
|
||||
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
|
||||
-webkit-animation: wave 5s linear infinite;
|
||||
animation: wave 5s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes wave {
|
||||
0% {
|
||||
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
|
||||
}
|
||||
20% {
|
||||
background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%;
|
||||
}
|
||||
40% {
|
||||
background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%;
|
||||
}
|
||||
60% {
|
||||
background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%;
|
||||
}
|
||||
80% {
|
||||
background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%;
|
||||
}
|
||||
0% {
|
||||
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
0% {
|
||||
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
|
||||
}
|
||||
20% {
|
||||
background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%;
|
||||
}
|
||||
40% {
|
||||
background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%;
|
||||
}
|
||||
60% {
|
||||
background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%;
|
||||
}
|
||||
80% {
|
||||
background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%;
|
||||
}
|
||||
0% {
|
||||
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
|
||||
}
|
||||
}
|
||||
h1 { font-family: "Lucida Console", Monaco, monospace !important; }
|
||||
#wrapper {background-color: #0000 !important}
|
||||
#ihtp {color: white !important}
|
||||
a{color: white !important;}
|
||||
a#student-page{color: white !important;}
|
||||
|
||||
.ext2 {
|
||||
border-bottom-color: #00fc33;
|
||||
background:linear-gradient(to bottom, #00fc33 0, #00fc33 100%);
|
||||
background-position:0 100%;
|
||||
background-repeat:repeat-x;
|
||||
background-size: 0 0;
|
||||
transition:background .2s ease-in-out;
|
||||
}
|
||||
|
||||
#about-student {
|
||||
color: #00fc33;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='wrapper'>
|
||||
<a href='../' id='homebttn' class='ext'> << home</a>
|
||||
|
||||
<header>
|
||||
<h1 id='project-title'>ilinx <a href='#hleft-text' class='show'> ⓘ</a></h1>
|
||||
<h2 id='student-name'><a href='http://hub.xpub.nl/ilinx/dls/' target='_blank' class='ext2' id='student-page'>Tancredi Di Giovanni</a></h2>
|
||||
<div id='hleft-text'>
|
||||
<a href=# id='back'>
|
||||
<div id='inner-hleft-text'>
|
||||
<div id='ihtp'>
|
||||
<object>
|
||||
<div id='about-project'>
|
||||
<p>BlaBlaBlAbLAblAlbLaaiaufiaeufjiajdoaidja</p>
|
||||
</div>
|
||||
<hr align='left'>
|
||||
<div id='about-student'>
|
||||
<p>BlaBlaBlAbLAblAlbLaaiaufiaeufjiajdoaidja</p>
|
||||
</div>
|
||||
<a id='getback' class='int'> go back </a>
|
||||
</object>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id='main'>
|
||||
<div id="galleries">
|
||||
<div id='work'>
|
||||
<h3 class='gal-title'>Work</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='http://hub.xpub.nl/ilinx' target="_blank" class='ext2'>Project Website</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id='galleries'>
|
||||
<img src="img/1.jpg" class='workimg'/>
|
||||
<img src="img/2.jpg" class='workimg'/>
|
||||
<img src="img/3.jpg" class='workimg'/>
|
||||
<img src="img/4.jpg" class='workimg'/>
|
||||
<img src="img/5.jpg" class='workimg'/>
|
||||
</div>
|
||||
<div id='publication'>
|
||||
<h3 class='gal-title'>Thesis</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='pdf/OHE.pdf' target="_blank" class='ext2'>Out-of-Hardware Experience: Consciousness and Software [PDF]</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 4.6 KiB |
@ -0,0 +1,70 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 359.74652 401.79145"
|
||||
version="1.1"
|
||||
id="svg33"
|
||||
sodipodi:docname="xpub_logo_2018.svg"
|
||||
width="359.74652"
|
||||
height="401.79144"
|
||||
inkscape:version="0.92.1 r15371">
|
||||
<metadata
|
||||
id="metadata37">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>Asset 3</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1366"
|
||||
inkscape:window-height="704"
|
||||
id="namedview35"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="0.30376817"
|
||||
inkscape:cx="276.52374"
|
||||
inkscape:cy="200.93489"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="27"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg33" />
|
||||
<defs
|
||||
id="defs4">
|
||||
<style
|
||||
id="style2">.cls-1{fill:#fff;}</style>
|
||||
</defs>
|
||||
<title
|
||||
id="title6">Asset 3</title>
|
||||
<path
|
||||
id="path4520"
|
||||
d="m 0.30707467,265.22154 c -1.38999997,-22.22 1.89000003,-40.83 10.84000033,-55.56 6.85,-12.75 19.63,-29.75 30.85,-41.34 20,-20.53 39.67,-50.62 48.17,-72.859997 5.55,-14.83 10.999995,-37.16 11.259995,-46.35 a 107.63,107.63 0 0 1 2.95,-19 c 6.16,-23.9999997 15.93,-31.5599997 37.69,-29.88999968 23.8,1.72999998 44.1,18.34999968 49.58,40.31999968 1.24,4.13 3.15,8.61 4.46,10.36 2.62,3.49 13.69,9.61 22.79,12.94 a 29.69,29.69 0 0 1 10.37,6.44 c 3.63,3.86 4,4.55 1.85,6.53 -1.39,1 -9,3.82 -17.22,6 -8.22,2.18 -15.81,4.64 -17.21,5.62 -5.23,3.93 1.23,38.879997 9.12,48.659997 6.9,8.72 24.34,18.1 48.62,26.66 12.82,4.47 25.31,8.25 28.37,8.68 l 5.44,0.5 0.73,-13.27 c 0.59,-8.5 1.78,-13.92 3.17,-14.9 1.74,-1.31 6.83,-0.48 19.68,3 9.46,2.67 21.3,5.74 26.38,6.58 5.08,1.17 9.8,2.68 10.46,3.38 0.65,1 -0.22,7.49 -2.49,14.92 -1.92,7.44 -2,10.16 -3.53,15.57 0.3,1.37 2.69,1.1 8.05,4.33 5.36,3.23 8.68,6.05 9,7.08 0.32,1.03 -0.67,11.23 -2.54,16.62 -4.44,11.8 -14.34,12.52 -18,11.05 -4.39,-1.49 -5.42,-1.18 -7.64,4.88 -3.33,8.76 -5.74,9.71 -15.52,6.35 -4.73,-1.5 -12.83,-4.13 -17.89,-5.64 l -9.45,-3 -0.46,-7.51 c -0.17,-5.8 -1.21,-5.15 -5.29,-5.61 -11.22,-1 -12.91,-1.41 -25.78,-3.83 -7.46,-1.24 -16.28,-2.53 -17,-1.87 -0.72,0.66 2.14,8.24 3.25,16.79 3.65,26.35 3.55,52.58 0,69.18 -9.1,42.67 -13.16,53.11 -22.17,58 -5.89,3.23 -6.31,5.95 -1.74,12.56 4.25,5.92 7.31,6.35 13.23,2.1 5.58,-4.26 7.92,-2.85 7.78,1.91 -0.18,6.13 -7.15,11.4 -21,18.14 -9.33,4.49 -13.12,5.74 -14.44,4.34 -1,-1.39 -1.28,-2.76 0.15,-5.11 1.44,-2.68 0.8,-4.07 -3.82,-9 l -5.63,-5.62 -21.45,-0.64 c -11.92,-0.35 -25.51,-1.44 -30.6,-2.27 l -9.15,-1.63 -3.6,6.37 c -3.25,6 -3.61,6.71 -1,9.17 1.32,1.4 4.68,3.21 7,4.3 8.75,3.67 3.56,14.12 -5.57,11.81 -7.78,-1.93 -31.07,-17.33 -33.379995,-19.78 -3.31,-3.17 -1.12,-8.21 2.939995,-7.07 4.73,1.5 6.84,-0.82 8.06,-7.6 0.86,-6.11 0.53,-6.46 -8.11,-13.87 -20.609995,-17.31 -32.999995,-36.42 -37.449995,-58.7 -3,-14.4 -2,-47.09 1.77,-59.58 1.52,-5.41 3.41,-11.48 3.82,-13.86 l 0.8,-4.07 -3.53,4 c -1.77,2.33 -3.55,4.67 -3.57,5.35 -0.02,0.68 -6.43,13 -14.02,27.72 -10.09,18.49 -12.13,22.15 -15.76,28.4 -3.63,6.25 -13.05,12.36 -17.75,9.84 -5.7000003,-3.24 -9.3600003,-6.64 -12.1800003,-13.73 -0.25,-2.05 -2.47000003,-9.51 -2.69000003,-13.29 z M 102.06707,62.761543 a 92.58,92.58 0 0 1 -3.849995,14.88 c -0.79,3.72 3.579995,5.56 8.569995,9.8 a 53.23,53.23 0 0 0 13.4,7.89 c 7.75,3 16.58,3.9 16.64,1.86 0,-0.68 -3.28,-4.19 -7.27,-7.71 -9.3,-8.11 -11.54,-13 -13.15,-27.65 -1.34,-12.31 -7.29,-18.62 -10,-19.38 -3,-0.77 -1.89,6.42 -4.35,20.32 z m 38.5,241.379997 c -7.92,25.66 -7.71,30.1 0.2,39.19 4,3.87 9.32,7.43 12.36,8.2 14.89,3.51 51.4,1.87 64.83,-2.85 6.2,-2.2 9.82,-9.25 18,-42.74 3.55,-16.25 4.86,-37.34 4.08,-57.13 -1.32,-13 -3.78,-33.51 -11.09,-51.1 -5.13,-10.72 -15.54,-27.38 -26.61,-45.09 -11.7,-19.09 -19.7,-25.12 -32.29,-25.83 -9.86,-0.63 -17.16,4.26 -22.94,15 -4,7.72 -4.36,9.07 -4.23,27.82 0,11.59 1,23.54 2.56,28.7 2.45,9.27 5.17,32.53 5.93,52.65 0.33,11.94 -2.48,26.17 -10.78,53.18 z m 152.43,-128.72 -0.82,16 c 0.07,9.2 -1,11.22 -0.12,26.92 0.18,5.46 3.49,8.62 6.88,9.4 2.7,0.76 16.19,5.59 18.54,6.68 6.4,2.58 7.62,-4.2 10.15,-8.9 1.81,-3.69 0.13,-4.43 -5.17,-9.35 -14.92,-14.07 -21,-26.52 1,-32.34 10.86,1.34 13.83,4.84 14,-0.95 0,-1.36 -27.09,-5.92 -36.95,-6.55 z m 2.72,-22.75 c -1.06,1.33 -1.87,5.74 -1.63,9.15 -1.29,9.16 -0.28,9.53 22.79,12.94 21,3 23.39,4.1 25.7,-4.69 q 3.32,-8.59 -5.83,-10.4 c -2.71,-0.42 -13.21,-2.78 -22,-5.08 -13.19,-3.46 -18,-3.6 -19,-1.93 z"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
class="cls-1"
|
||||
d="m 158.60707,59.531543 a 11,11 0 0 0 -4.48,-8 c -2.37,-1.71 -2.49,-1.85 -0.17,-3.79 3,-2.51 6.11,-4.93 9,-7.57 a 4.41,4.41 0 0 0 1.2,-3.18 c -0.18,-2.31 -1.55,-2.87 -3.51,-1.51 -3.1,2.15 -6.16,4.38 -9.13,6.7 -2.97,2.32 -3.31,2.27 -5.29,-0.73 -1.66,-2.52 -3.5,-4.94 -5.23,-7.42 -1,-1.38 -2.06,-2 -3.51,-0.72 -1.29,1.18 -2,2.42 -0.69,4.18 2,2.72 3.75,5.61 5.7,8.37 0.9,1.27 0.84,2.2 -0.42,3.15 a 14.92,14.92 0 0 0 -2.53,2.38 3.78,3.78 0 0 0 0.32,5.5 c 1.92,1.45 3.33,0.3 4.52,-1.2 1.19,-1.5 2.5,-1.86 3.91,-0.16 a 53.82,53.82 0 0 0 4.7,5.32 c 0.85,0.78 2.46,1.52 3.4,1.23 0.94,-0.29 1.66,-1.86 2.21,-2.55 z"
|
||||
id="path9"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ffffff" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 194 KiB After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 190 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 486 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 687 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 705 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 600 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 628 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 717 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 828 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="date" content="JULY 2020">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="description" content="XPUB">
|
||||
<title>PARALLEL COLONIALISM</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="bg-left"></div>
|
||||
<div id="bg-right"></div>
|
||||
|
||||
<!-- XPUB SYNTAX -->
|
||||
<a href='../' id='homebttn' class='ext mytypestyle' > << home</a>
|
||||
|
||||
<header>
|
||||
<h1 id='project-title'>Parallel Colonialism</h1>
|
||||
<h2 id='student-name' class="mytypestyle" ><a href="https://www.bohyewoo.com">Bohye Woo</a></h2>
|
||||
|
||||
<div id='hleft-text'>
|
||||
<div id='inner-hleft-text'>
|
||||
<div id='ihtp'>
|
||||
|
||||
<object>
|
||||
<div id='about-project'>
|
||||
|
||||
<p><i>Parallel Colonialism</i> is a digital text archiving tool that offers a comparative reading application between historical and contemporary documents. It allows users to experience how regulatory terms play in colonialism by offering two types of legal documents: Terms of Services and historical colonial treaties.</p>
|
||||
|
||||
<p>By selecting one of each document, a parallel reading platform is enabled, in which you can comparatively label, highlight and analyze a range of specific terms. This helps you to analyze on how these documents operate similar ways in colonialism, and it opens up discussions in finding a colonial resemblance by mapping out the whole contractual landscape of terms used in each document. </p>
|
||||
|
||||
----------------
|
||||
<p>Parallel Colonialism (2020) has been produced in the context of the graduation research of Bohye Woo from the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.</p>
|
||||
|
||||
<p>Licence: This is a free work. You can copy, distribute, and modify it under the terms of the Free Art License (http://artlibre.org/licence/lal/en/)</p>
|
||||
----------------
|
||||
</div>
|
||||
|
||||
|
||||
<div id='about-student'>
|
||||
<p> Bio will be added soon. </p>
|
||||
|
||||
</div>
|
||||
|
||||
</object>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<section id='main'>
|
||||
<div id="galleries">
|
||||
<div id='work'>
|
||||
<h3 class='gal-title mytypestyle'>Work</h3>
|
||||
|
||||
<ul id='publist'>
|
||||
<li><a href='https://hub.xpub.nl/termsofservice/' target="_blank" class='ext mytypestyle'>↝ Project Website</a></li>
|
||||
</ul>
|
||||
|
||||
<img src="img/parallel-colonialism-01.png" class='workimg'/>
|
||||
<img src="img/parallel-colonialism-02.png" class='workimg'/>
|
||||
<img src="img/parallel-colonialism-06.png" class='workimg'/>
|
||||
<img src="img/parallel-colonialism-10.png" class='workimg'/>
|
||||
<img src="img/parallel-colonialism-12.png" class='workimg'/>
|
||||
<img src="img/parallel-colonialism-13.png" class='workimg'/>
|
||||
</div>
|
||||
|
||||
<div id='publication'>
|
||||
|
||||
<h3 class="gal-title mytypestyle">Publication</h3>
|
||||
|
||||
<ul id='publist'>
|
||||
<li><a href='pdf/bohye-woo-thesis-2020.pdf' target="_blank" class='ext mytypestyle'>↝ Thesis (PDF)</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,187 @@
|
||||
@font-face {
|
||||
font-family: "Belgika";
|
||||
src: url("fonts/belgika-5th-webfont.ttf");
|
||||
font-weight: 5;
|
||||
font-style: normal;}
|
||||
|
||||
@font-face {
|
||||
font-family: "Belgika";
|
||||
src: url("fonts/belgika-8th-webfont.ttf");
|
||||
font-weight: 8;
|
||||
font-style: normal;}
|
||||
|
||||
@font-face {
|
||||
font-family: "Belgika";
|
||||
src: url("fonts/belgika-16th-webfont.ttf");
|
||||
font-weight: 16;
|
||||
font-style: italic;}
|
||||
|
||||
@font-face {
|
||||
font-family: "Belgika";
|
||||
src: url("fonts/belgika-40th-webfont.ttf");
|
||||
font-weight: 40;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body{
|
||||
background: none;
|
||||
}
|
||||
|
||||
a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: inline;
|
||||
border-bottom: 0px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ext{
|
||||
background: none;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: grey;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:visited{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
aside{
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
width: calc(100vw - 15px);
|
||||
font-size: 12px;
|
||||
font-family: "Belgika", Arial, Helvetica, sans-serif;
|
||||
font-weight: 5;
|
||||
font-style: normal;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.marquee {
|
||||
position: relative;
|
||||
width: calc(100vw - 15px);
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.track {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
will-change: transform;
|
||||
animation: marquee 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
/* HOME BUTTON */
|
||||
|
||||
.homebutton{
|
||||
background-color: inherit;
|
||||
text-align:right;
|
||||
color:black;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
margin-right:2%;
|
||||
margin-top:25px;
|
||||
padding:0.3% 0 0 0.3%;
|
||||
font-size:0.6em;
|
||||
z-index:999;
|
||||
}
|
||||
|
||||
/* TYPE STYLE */
|
||||
|
||||
#project-title{
|
||||
font-family: "Belgika", Arial, Helvetica, sans-serif;
|
||||
font-weight: 5;
|
||||
font-style: normal;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#about-student{
|
||||
font-family: helvetica;
|
||||
font-style: italic;
|
||||
color: #3c3c3c;
|
||||
font-weight: 16;
|
||||
font-size: calc(8px + 0.3vw);
|
||||
padding-top: 10px;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
#about-project {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#inner-hleft-text {
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.mytypestyle{
|
||||
font-family: "Belgika", Arial, Helvetica, sans-serif;
|
||||
font-weight: 4;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
overflow-y: scroll;
|
||||
font-family: helvetica;
|
||||
font-weight: 16;
|
||||
font-size: calc(11px + 0.3vw);
|
||||
color: white;
|
||||
|
||||
|
||||
}
|
||||
|
||||
li{
|
||||
list-style: none;
|
||||
transform-origin: 0 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#inner-hleft-text::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.workimg{
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
#bg-left{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
width: 25vw;
|
||||
height: 100vh;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#bg-right{
|
||||
position: fixed;
|
||||
left: 25vw;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
height: 100vh;
|
||||
width: 75vw;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 335 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 535 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 844 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
@ -0,0 +1,84 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Syster Papyri Magicae</title>
|
||||
<meta name="description" content="XPUB">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: BLKCHCRY;
|
||||
src: url("fonts/BLKCHCRY.TTF");
|
||||
}
|
||||
#project-title {
|
||||
font-family: BLKCHCRY!important;
|
||||
}
|
||||
h3 {
|
||||
font-family: BLKCHCRY;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div id='wrapper' style="background: linear-gradient(90deg, rgba(59,232,255,0.79) 0%, rgba(59,232,255,0.55) 26%, rgba(191,89,255,0.91) 100%);"></div>
|
||||
<a href='../' id='homebttn' class='ext'> << home</a>
|
||||
<header>
|
||||
<h1 id='project-title'>Syster Papyri Magicae <a href='#hleft-text' class='show'> ⓘ</a></h1>
|
||||
<h2 id='student-name'>Artemis Gryllaki</h2>
|
||||
<div id='hleft-text'>
|
||||
<a href=# id='back'>
|
||||
<div id='inner-hleft-text'>
|
||||
<div id='ihtp'>
|
||||
<object>
|
||||
<div id='about-project'>
|
||||
<p><i>Syster Papyri Magicae</i> is a project that unfolds the phenomenon of gender exclusions in male-dominated tech environments, aiming to document, discuss and activate a variety of feminist practices that respond to this issue.
|
||||
</p>
|
||||
<p>
|
||||
The Syster Papyri Magicae website enables a playful navigation to a collection of stories and practices that are gathered in a growing, editable Wiki. Aided by the early web magic of hyperlinks, one may discover documentation of sexist incidents in tech, feminist hacker projects, wiki pages to write their versions of stories, or even dead-ends. A fictional context of sorcery provides a game-like atmosphere but is also tactically used. On the one hand, the witch as an excluded figure symbolises female strength, that challenges patriarchal systems. On the other hand, witchcraft is a theme ever-present in the geek culture, proposing that technology has a source of magical power, that one can harness for their own sense of agency and empowerment.</p>
|
||||
<p>
|
||||
Strolling through the website, the visitor encounters several quests, that challenge them to choose what they would do in situations of exclusion. This method helps them realise how hard it is, to take action under these circumstances. It is also a way to open discussions on diverse feminist approaches, learn about feminist hacker practices, and if interested, become a contributor. </p>
|
||||
<p>
|
||||
<i>Syster Papyri Magicae</i> (2020) is published under the terms of the Peer Production License (PPL). The Peer Production License is an example of CopyFair licensing, in which only other commoners, collectives and nonprofits can share and re-use the material in question.
|
||||
</p>
|
||||
</div>
|
||||
<hr align='left'>
|
||||
<div id='about-student'>
|
||||
<p> Artemis Gryllaki is a researcher and media artist, with a background in architecture and music. Her current work focuses on the urgencies and potentials of autonomous networks and feminist communities. </p>
|
||||
</div>
|
||||
<a id='getback' class='int'> go back </a>
|
||||
</object>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<section id='main'>
|
||||
<div id="galleries">
|
||||
<div id='work'>
|
||||
<h3 class='gal-title'>Work</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='https://hub.xpub.nl/systers/' target="_blank" class='ext'>Project Website</a></li>
|
||||
<li><a href='https://hub.xpub.nl/systers/mediawiki/' target="_blank" class='ext'>Project Wiki</a></li>
|
||||
</ul>
|
||||
<img src="img/homepage-systers.png" class='workimg'/>
|
||||
<img src="img/etc-papyrus.png" class='workimg'/>
|
||||
<img src="img/wiki-collection.png" class='workimg'/>
|
||||
<img src="img/wiki-radio-drama.png" class='workimg'/>
|
||||
<img src="img/varia-hack-meetings.png" class='workimg'/>
|
||||
<img src="img/discuss-feminism.png" class='workimg'/>
|
||||
</div>
|
||||
<div id='publication'>
|
||||
<h3 class='gal-title'>Publication</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='pdf/ArtemisGryllaki-Thesis.pdf' target="_blank" class='ext'>Thesis (PDF) </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 566 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 815 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 633 KiB |
Binary file not shown.
@ -0,0 +1,177 @@
|
||||
@font-face {
|
||||
font-family: "Lyon";
|
||||
src: url("fonts/LyonJeanTrue.ttf");
|
||||
font-weight: 300;
|
||||
font-style: normal;}
|
||||
|
||||
@font-face {
|
||||
font-family: "Favorit";
|
||||
src: url("fonts/Favorit_Regular.ttf");
|
||||
font-weight: 300;
|
||||
font-style: normal;}
|
||||
|
||||
@font-face {
|
||||
font-family: "Favorit";
|
||||
src: url("fonts/Favorit_Regular-Italic.ttf");
|
||||
font-weight: 300;
|
||||
font-style: italic;}
|
||||
|
||||
@font-face {
|
||||
font-family: "Favorit";
|
||||
src: url("fonts/Favorit_Medium.ttf");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Favorit";
|
||||
src: url("fonts/Favorit_Medium-Italic.ttf");
|
||||
font-weight: 400;
|
||||
font-style: italic;}
|
||||
|
||||
body{
|
||||
background: none;
|
||||
}
|
||||
|
||||
a{
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
display: inline;
|
||||
border-bottom: 0px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ext{
|
||||
background: none;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: #c3c3c3;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:visited{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
aside{
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
width: calc(100vw - 15px);
|
||||
font-size: 12px;
|
||||
font-family: "Lyon", Arial, Helvetica, sans-serif;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.marquee {
|
||||
position: relative;
|
||||
width: calc(100vw - 15px);
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.track {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
will-change: transform;
|
||||
animation: marquee 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
/* HOME BUTTON */
|
||||
|
||||
.homebutton{
|
||||
background-color: inherit;
|
||||
text-align:right;
|
||||
color:black;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
margin-right:2%;
|
||||
margin-top:25px;
|
||||
padding:0.3% 0 0 0.3%;
|
||||
font-size:0.6em;
|
||||
z-index:999;
|
||||
}
|
||||
|
||||
/* TYPE STYLE */
|
||||
|
||||
#project-title{
|
||||
font-family: "Lyon", Arial, Helvetica, sans-serif;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#about-student{
|
||||
font-family: "Favorit", Arial, Helvetica, sans-serif;
|
||||
font-style: italic;
|
||||
color: #3c3c3c;
|
||||
font-weight: 300;
|
||||
font-size: calc(8px + 0.3vw);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.mytypestyle{
|
||||
font-family: "Favorit", Arial, Helvetica, sans-serif;
|
||||
font-weight: 300;
|
||||
transform: scaleX(0.75);
|
||||
transform-origin: 0 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#inner-hleft-text{
|
||||
overflow-y: scroll;
|
||||
font-family: "Favorit", Arial, Helvetica, sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: calc(12px + 0.3vw);
|
||||
}
|
||||
|
||||
li{
|
||||
list-style: none;
|
||||
transform: scaleX(0.75);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
#inner-hleft-text::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* TWO BACKGROUND COLORS */
|
||||
|
||||
#indexyellowleft{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
width: 25vw;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#indexyellowright{
|
||||
position: fixed;
|
||||
left: 25vw;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
height: 100vh;
|
||||
width: 75vw;
|
||||
background-color: #cfff00;
|
||||
}
|
||||
|
||||
img{
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
.workimg{
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Project Title</title>
|
||||
<meta name="description" content="XPUB">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='wrapper'></div>
|
||||
<a href='../' id='homebttn' class='ext'> << home</a>
|
||||
<header>
|
||||
<h1 id='project-title'>Project Title <a href='#hleft-text' class='show'> ⓘ</a></h1>
|
||||
<h2 id='student-name'>Sudent name</h2>
|
||||
<div id='hleft-text'>
|
||||
<a href=# id='back'>
|
||||
<div id='inner-hleft-text'>
|
||||
<div id='ihtp'>
|
||||
<object>
|
||||
<div id='about-project'>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit ligula a aenean ultricies, montes venenatis sapien sodales ac dictumst enim porttitor curae porta facilisi massa, consequat sollicitudin libero bibendum in neque suscipit nulla quisque taciti. Hendrerit mauris himenaeos proin sem habitasse per ut est enim elementum eget nisl, pretium id ornare torquent lectus curae interdum conubia vivamus auctor. </p>
|
||||
</div>
|
||||
<hr align='left'>
|
||||
<div id='about-student'>
|
||||
<p>Bibendum maecenas cum faucibus per tincidunt metus ac, diam aliquam aliquet sociosqu parturient a mollis est, felis sem hendrerit rhoncus nisl urna. Ultricies ut risus class ridiculus vestibulum.</p>
|
||||
</div>
|
||||
<a id='getback' class='int'> go back </a>
|
||||
</object>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<section id='main'>
|
||||
<div id="galleries">
|
||||
<div id='work'>
|
||||
<h3 class='gal-title'>Work</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='https://yourdomain.org' target="_blank" class='ext'>Project Website</a></li>
|
||||
</ul>
|
||||
<img src="img/img1.jpg" class='workimg'/>
|
||||
<img src="img/img2.jpg" class='workimg'/>
|
||||
<img src="img/img3.jpg" class='workimg'/>
|
||||
<img src="img/img4.jpg" class='workimg'/>
|
||||
</div>
|
||||
<div id='publication'>
|
||||
<h3 class='gal-title'>Publication</h3>
|
||||
<ul id='publist'>
|
||||
<li><a href='pdf/thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
|
||||
</ul>
|
||||
<img src="img/pub1.jpg" class='workimg'/>
|
||||
<img src="img/pub2.jpg" class='workimg'/>
|
||||
<img src="img/pub3.jpg" class='workimg'/>
|
||||
<img src="img/pub4.jpg" class='workimg'/>
|
||||
</div>
|
||||
<div id='gradshow'>
|
||||
<h3 class='gal-title'>Graduation Show</h3>
|
||||
<img src="img/gradshow1.jpg" class='workimg'/>
|
||||
<img src="img/gradshow2.jpg" class='workimg'/>
|
||||
<img src="img/gradshow3.jpg" class='workimg'/>
|
||||
<img src="img/gradshow4.jpg" class='workimg'/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Loading…
Reference in New Issue