-
+
The intangibility of social dances create a disruptive beauty of pure fulfilment in the moment, a true sense of flow, as well as a yearning for the fleeting memory that may be lost forever. Back It Up (2018) is an interactive performance of two swing dancers whose steps are controlled by the audience. It is accompanied by graphical notation systems, traces of the non-verbal dialogue between dancers and the atmosphere in the room recorded by the audience. The difference in perception of the experience is what makes every recording unique.
@@ -31,7 +28,8 @@
Karina Dukalska is a graphic designer challenging the physicality of books by enforcing physical interaction. Engaging with the content through materials, tangibility and actions deepens the experience of consuming the content itself.
- go back
+ go back
+
diff --git a/css/grey-main.css b/css/grey-main.css
new file mode 100644
index 0000000..5a0b21c
--- /dev/null
+++ b/css/grey-main.css
@@ -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; }
\ No newline at end of file
diff --git a/css/main-backup.css b/css/main-backup.css
new file mode 100644
index 0000000..7297a92
--- /dev/null
+++ b/css/main-backup.css
@@ -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; }
\ No newline at end of file
diff --git a/css/main-squares.css b/css/main-squares.css
new file mode 100644
index 0000000..e42fdb4
--- /dev/null
+++ b/css/main-squares.css
@@ -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; }
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 9a821bb..9d49c73 100644
--- a/css/main.css
+++ b/css/main.css
@@ -17,10 +17,13 @@
box-sizing: border-box;
}
+html{
+ font-size: calc(0.85em + 1vw);
+}
+
body{
font-family:inconsolata, sans-serif;
- color:white;
- min-width:320px;
+ min-width:320px;
}
@@ -32,7 +35,45 @@ body{
bottom: 0;
right: 0;
z-index: -1;
- background-color: #2f2f2f;
+ background-color: white;
+
+}
+
+a{
+ color:black;
+ text-decoration:none;
+ background:transparent;
+ border-bottom:1.5px solid #99f;
+ padding-top:.05rem;
+ padding-bottom:.05rem;
+ background:linear-gradient(to bottom, #99f 0, #99f 100%);
+ background-position:0 100%;
+ background-repeat:repeat-x;
+ background-size: 0 0;
+ transition:background .2s ease-in-out;
+}
+
+.ext {
+ border-bottom-color: #99f;
+ background:linear-gradient(to bottom, #99f 0, #99f 100%);
+ background-position:0 100%;
+ background-repeat:repeat-x;
+ background-size: 0 0;
+ transition:background .2s ease-in-out;
+}
+
+.int {
+ border-bottom-color:#c6f;
+ background:linear-gradient(to bottom, #c6f 0, #c6f 100%);
+ background-position:0 100%;
+ background-repeat:repeat-x;
+ background-size: 0 0;
+ transition:background .2s ease-in-out;
+}
+
+a:hover, a:active, a:focus {
+ outline:0;
+ background-size:.5rem .3rem ;
}
/*header*/
@@ -44,12 +85,12 @@ header{
display:block;
overflow:hidden;
margin-left:1.3%;
- line-height:1.3vw;
+ line-height:1.5vh;
}
header h1{
font-family:tenor;
- font-size:9vw;
+ font-size:2em;
float:left;
width:60%;
margin-bottom:5%;
@@ -57,9 +98,10 @@ header h1{
}
.show{
- font-size:7vw;
- color:#0f0;
- text-decoration:none;
+ font-size:0.8em;
+ color:#c6f;
+ border-bottom:none;
+ background:none;
}
.show:hover{
@@ -77,15 +119,18 @@ header h1{
}
-#sub > a {
+#sub{
display:inline-block;
- width:45%;
text-align:right;
- font-size:calc(9px + 0.9vw);
+ font-size:0.7em;
+}
+
+#sub > span:first-child{
+ margin-right:20%;
}
#sub > a:visited {
- color:white;
+ color:black;
}
@@ -98,7 +143,7 @@ header h1{
left:0;
top:0;
position:fixed;
- color:white;
+ color:black;
z-index:55;
cursor:pointer;
overflow:hidden;
@@ -128,12 +173,13 @@ header h1{
-webkit-transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform: translate(-50%, -50%);
- font-size:calc(8px + 1.5vh);
+ font-size:0.8em;
line-height:130%;
}
+
#hleft-text:target{
display:block;
@@ -141,20 +187,18 @@ header h1{
}
#getback{
- text-decoration:underline;
- text-decoration-color:#0f0;
z-index:100;
+ color:white;
}
-#getback:hover{
- text-decoration: overline;
- text-decoration-color:magenta;
-}
#back, #back:hover, #back:visited{
text-decoration:none;
color:white;
+ display:block;
+ border-bottom:none;
+ background:none;
}
@@ -193,7 +237,7 @@ header h1{
.upbar {
height:5%;
width:100%;
- background-color:#0f0;
+ background-color:#f9f9eb;
position:relative;
}
@@ -201,6 +245,8 @@ header h1{
.upbar a {
display:block;
height:100%;
+ border-bottom:none;
+ background:none;
}
.upbar p {
@@ -218,18 +264,18 @@ header h1{
.uptitle {
color:black;
float:left;
- font-size:3vh;
+ font-size:0.8em;
}
.upclose {
color:black;
float:right;
text-decoration:none;
- font-size:3vh;
+ font-size:0.8em;
}
.upclose:hover {
- color:magenta;
+ color:#000099;
}
@@ -280,13 +326,6 @@ header h1{
position: relative;
}
-
-[id*="att-video"] > .wrap{
- background:rgba(0,0,0,0);
-
-}
-
-
/*main*/
section#main{
@@ -300,12 +339,12 @@ section#main{
}
.logo{
- display:none;
+ width:70%;
}
[class*="col"]{
float:left;
- width:21.75%;
+ width:28%;
height:100%;
display: flex;
flex-direction: column;
@@ -319,33 +358,53 @@ section#main{
}
[class*="col"] p{
- font-size:calc(9px + 0.6vw);
- line-height:130%;
+ font-size:0.65em;
+ line-height:1.5em;
}
.col1 {
- width:13%;
display:initial;
}
+
+.short{
+ display:block;
+}
+
+.long{
+ display:none;
+}
+
+.col5 {
+ width:16%;
+}
+
.col6 {
- width:65.25%;
+ width:72%;
padding-right:0;
}
[class*="subcl"]{
- width:33%;
+ width:38.5%;
float:left;
}
-.col2 p,.col1 p {
+.subcl3{
+ width:22.5%;
+}
+
+.col1 p {
word-wrap:break-word;
}
+.attch {
+ padding-top:7%;
+}
+
p.subcl3{
padding-right:1%;
}
@@ -353,8 +412,11 @@ p.subcl3{
.row{
padding-bottom:2.2vh;
padding-top:2.2vh;
+}
+
+.row:not(:last-child){
border-bottom-style:solid;
- border-bottom-color:white;
+ border-bottom-color:black;
border-bottom-width:3px;
}
@@ -378,27 +440,12 @@ p.subcl3{
}
#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;
+ font-size:0.7em;
}
.gradShow {
- font-weight:bold;
+ font-weight:900;
}
@@ -408,19 +455,26 @@ a{
display: table;
}
+
+
+
+
/* --------- 2nd case --------- */
@media all and (min-width: 600px) and (max-width: 720px){
+a{
+ border-bottom:2px solid #99f;
+}
/*header*/
#ihtp{
- font-size:calc(9px + 1.7vh);
+ /*font-size:calc(9px + 1.7vh);*/
line-height:130%;
}
-#sub > a {
- width:47%;
+#sub > span:first-child {
+ margin-right:22%;
}
/*xpuf*/
@@ -432,27 +486,15 @@ a{
/*main*/
-
-[class*="col"]{
- width:20.75%;
-
-}
-
-.col1 {
- width:17%;
-}
-
-.col6 {
- width:62.25%;
+.short{
+ display:none;
}
-[class*="col"] p{
- font-size:calc(10px + 0.6vw);
-
-
+.long{
+ display:block;
}
-.row{
+.row:not(:last-child){
border-bottom-width:4px;
}
@@ -461,12 +503,6 @@ a{
border-bottom-width:4px;
}
-#categories h2{
- font-size:2.5vw;
-}
-
-
-
}
@@ -474,6 +510,10 @@ a{
@media all and (min-width: 720px) and (max-width: 992px){
+a{
+ border-bottom:2px solid #99f;
+}
+
/*header*/
@@ -482,9 +522,13 @@ a{
line-height:130%;
}
-#sub > a {
- width:47%;
- font-size:2.1vw;
+#sub > span:first-child{
+ margin-right:22%;
+ /*font-size:2.1vw;*/
+}
+
+.show{
+ font-size:0.6em;
}
/*xpuf*/
@@ -492,27 +536,15 @@ a{
/*main*/
-[class*="col"]{
- width:20.75%;
-
-}
-
-.col1 {
- width:17%;
-}
-
-.col6 {
- width:62.25%;
+.short{
+ display:none;
}
-
-[class*="col"] p{
- font-size:calc(11px + 0.6vw);
-
-
+.long{
+ display:block;
}
-.row{
+.row:not(:last-child){
border-bottom-width:5px;
}
@@ -531,20 +563,17 @@ p.subcl3{
}
-
-#categories h2{
- font-size:2.1vw;
-}
-
-
}
/* --------- 4th case --------- */
@media all and (min-width: 992px) and (max-width: 1400px) {
-/*header*/
+a{
+ border-bottom:2px solid #99f;
+}
+/*header*/
header{
width:25%;
@@ -560,7 +589,7 @@ header{
}
header h1{
- font-size:7vw;
+ font-size:2.3em;
width:77%;
padding-bottom:3%;
-webkit-padding-after:7%;
@@ -579,25 +608,25 @@ header h1{
padding-top:0;
float:none;
width:100%;
-}
-
-#sub > a {
- font-size:calc(10px + 0.6vw);
- width: 35%;
+ font-size:0.6em;
text-align:left;
}
+#sub > span:first-child{
+ margin-right: 20%;
+}
+
#hleft-text{
position:relative;
display:block;
background:none;
- padding-top:5%;
+ margin-top:7%;
width:100%;
overflow-y:auto;
overflow-x:hidden;
- padding-right:30%;
- box-sizing:initial;
+ padding-right:1%;
+ box-sizing:border-box;
cursor:default;
}
@@ -624,8 +653,8 @@ header h1{
-webkit-transform:none;
-ms-transform:none;
transform:none;
- font-size:calc(8px + 0.6vw);
- line-height:120%;
+ font-size:1em;
+ line-height:130%;
}
@@ -636,6 +665,8 @@ header h1{
#back, #back:hover, #back:visited{
background-color:none;
cursor:default;
+ color:black;
+ font-size:0.55em;
}
/*xpuf*/
@@ -661,8 +692,8 @@ section#main{
top:0;
bottom:0;
overflow:hidden;
- left:25%;
- width:75%;
+ left:27%;
+ width:73%;
padding-left:1%;
}
@@ -679,22 +710,16 @@ section#main{
width:70%;
}
-
-[class*="col"]{
- width:20.75%;
-
-}
-
-.col1 {
- width:17%;
+[class*="col"] p {
+ font-size:0.55em;
}
-.col6 {
- width:62.25%;
+.short{
+ display:none;
}
-[class*="col"] p {
- font-size:calc(10px + 0.6vw);
+.long{
+ display:block;
}
.subrow p{
@@ -706,7 +731,7 @@ p.subcl3{
padding-right:5%;
}
-.row{
+.row:not(:last-child){
border-bottom-width:5px;
}
@@ -717,16 +742,17 @@ p.subcl3{
width:98%;
}
-#categories h2{
- font-size:calc(11px + 0.6vw);
-}
-
}
/* --------- 5th case --------- */
@media all and (min-width: 1400px){
+
+a{
+ border-bottom:2px solid #99f;
+}
+
/*header*/
@@ -744,7 +770,7 @@ header{
}
header h1{
- font-size:6vw;
+ font-size:2.3em;
width:77%;
float:none;
}
@@ -761,14 +787,13 @@ header h1{
padding-top:0;
float:none;
width:100%;
-}
-
-#sub > a {
- font-size:1.2em;
- width: 35%;
+ font-size:0.6em;
text-align:left;
}
+#sub > span:first-child{
+ margin-right: 20%;
+}
#hleft-text{
position:relative;
@@ -778,8 +803,8 @@ header h1{
width:100%;
overflow-y:auto;
overflow-x:hidden;
- padding-right:30%;
- box-sizing:initial;
+ padding-right:1%;
+ box-sizing:border-box;
cursor:default;
}
@@ -806,8 +831,7 @@ header h1{
-webkit-transform:none;
-ms-transform:none;
transform:none;
- font-size:calc(9px + 0.5vw);
- line-height:125%;
+ line-height:130%;
}
@@ -818,6 +842,8 @@ header h1{
#back, #back:hover, #back:visited{
background-color:none;
cursor:default;
+ color:black;
+ font-size:0.65em;
}
/*xpuf*/
@@ -843,8 +869,8 @@ section#main{
top:0;
bottom:0;
overflow:hidden;
- left:25%;
- width:75%;
+ left:27%;
+ width:73%;
padding-left:1%;
}
@@ -862,24 +888,19 @@ section#main{
}
-[class*="col"]{
- width:20.75%;
-
+[class*="col"] p {
+ font-size:0.55em;
}
-.col1 {
- width:17%;
+.short{
+ display:none;
}
-.col6 {
- width:62.25%;
+.long{
+ display:block;
}
-[class*="col"] p {
- font-size:calc(8px + 0.6vw);
-}
-
.subrow p{
padding-right:7%;
@@ -890,7 +911,7 @@ p.subcl3{
padding-right:5%;
}
-.row{
+.row:not(:last-child){
border-bottom-width:5px;
}
@@ -901,24 +922,14 @@ p.subcl3{
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; }
\ No newline at end of file
diff --git a/css/pages.css b/css/pages.css
index 7c38903..0fd3ba3 100644
--- a/css/pages.css
+++ b/css/pages.css
@@ -1,5 +1,6 @@
@import url("main.css");
+
body{
color:black;
}
@@ -10,9 +11,27 @@ body{
/*header*/
+header{padding-bottom:2%;}
+
+header h1{float:none;}
+
+#homebttn{
+ background-color: inherit;
+ text-align:right;
+ color:black;
+ position:absolute;
+ top:0;
+ right:0;
+ margin-right:6%;
+ margin-top:15px;
+ padding:0.3% 0 0 0.3%;
+ font-size:0.6em;
+ z-index:44;
+}
+
#project-title {
- font-size:calc(17px + 1.5vw);
+ font-size:1.4em;
line-height:135%;
margin-bottom:1%;
}
@@ -20,7 +39,7 @@ body{
#student-name {
margin-bottom:0;
font-weight:normal;
- font-size:calc(10px + 0.6vw);
+ font-size:0.8em;
}
a#student-page{color:black;}
@@ -35,7 +54,6 @@ a#student-page{color:black;}
}
#ihtp{
-
margin-top:3%;
width:80%;
color:black;
@@ -44,30 +62,21 @@ a#student-page{color:black;}
#about-student{
width:95%;
color:#2f2f2f;
- font-size:calc(8px + 0.5vw);
- line-height: 130%;
+ font-size:1em;
font-style:italic;
}
+object{
+ padding-bottom:7%;
+}
+
hr{
width:50%;
color:#ccc;
}
-a.show{
- font-size:calc(13px + 1.5vw);
-}
-
-a#home {
- font-size:calc(7px + 1.5vw);
- color:black;
- text-decoration:underline;
- text-decoration-color:#0f0;
-}
-
-a#home:hover{
- text-decoration:overline;
- text-decoration-color:#f3ca1b;
+.show{
+ font-size:1em;
}
#project-link{
@@ -80,7 +89,6 @@ a#home:hover{
section#main{
overflow:auto;
padding-left:1.5%;
-
}
#galleries{
@@ -88,15 +96,16 @@ section#main{
}
.gal-title{
- font-size:calc(12px + 0.7vw);
+ font-size:0.8em;
}
#publist {
- line-height:155%;
+ line-height:80%;
}
-#galleries a{
+#galleries li, #galleries p{
color:black;
+ font-size:0.9em;;
}
.workimg{
@@ -107,40 +116,30 @@ section#main{
@media all and (min-width: 600px) and (max-width: 720px){
- #about-student{
- font-size:calc(8px + 1.7vh);
- line-height:130%;
+#galleries{
+ padding-top:1%;
}
+#galleries li, #galleries p{
+ font-size:0.8em;
}
-@media all and (min-width: 720px) and (max-width: 992px){
-
-
-/*header*/
-
-#about-student{
- font-size:calc(10px + 1.7vh);
- line-height:130%;
}
-}
-
-@media all and (max-width: 600px){
+@media all and (min-width: 720px) and (max-width: 992px){
-/*header*/
+#galleries{
+ padding-top:1%;
+}
-#about-student{
- font-size:calc(7px + 1.5vh);
- line-height:130%;
+#galleries li, #galleries p{
+ font-size:0.8em;;
}
+
}
@media all and (max-width: 992px){
-#homebttn{
- display:none;
-}
/*header*/
#sub{
width:30%;
@@ -149,38 +148,32 @@ section#main{
}
#student-name{
- text-align:right;
line-height:125%;
}
-#ihtp, #about-student{
+#ihtp, #about-student, #ihtp a{
color:white;
}
-#getback {
- padding-bottom:5%;
-}
}
@media all and (min-width: 992px){
-
+
#homebttn{
- background-color:white;
- text-align:right;
- color:black;
- position:absolute;
- top:0;
- right:0;
margin-right:3%;
margin-top:0.7%;
- padding:0.3% 0 0.4% 0.3%;
- font-size:calc(7px + 0.6vw);
- z-index:100;
}
+/*header*/
+#student-name {
+ font-size:0.6em;
+}
+
+
+/*main*/
section#main{
width:74%;
left:27%;
@@ -188,10 +181,26 @@ section#main{
}
-
#galleries{
padding-left:1%;
}
+#galleries li, #galleries p{
+ font-size:0.62em;
+}
+
+}
+
+@media all and (min-width: 1400px){
+
+#galleries li, #galleries p{
+ font-size:0.55em;
+}
+
+.gal-title{
+ font-size:0.73em;
+}
+
+
}
diff --git a/eigengrau/index.html b/eigengrau/index.html
index 642e765..666797f 100755
--- a/eigengrau/index.html
+++ b/eigengrau/index.html
@@ -62,8 +62,6 @@ He graduated from Design Academy Eindhoven and currently studies Media Design ma
Project Website
-
-
-
-
+ 
+ 
+ 
+ 
+ 
- 
- 
+
+
+
+
+
+