You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
581 lines
9.0 KiB
CSS
581 lines
9.0 KiB
CSS
@font-face {
|
|
font-family: CrimsonR;
|
|
src: url(fonts/CrimsonText-Regular.ttf);
|
|
}
|
|
@font-face {
|
|
font-family: Cursor;
|
|
src: url(fonts/Cursor-Apple.otf);
|
|
}
|
|
@font-face {
|
|
font-family: iAWriteBold;
|
|
src: url(fonts/iAWriterDuoS-Bold.ttf);
|
|
}
|
|
@font-face {
|
|
font-family: iAWriteRegular;
|
|
src: url(fonts/iAWriterMonoS-Regular.ttf)
|
|
}
|
|
@font-face {
|
|
font-family: wfdtf;
|
|
src: url(fonts/wftfs-Regular.otf)
|
|
}
|
|
|
|
/* span.title{
|
|
font-family: iAWriteBold;
|
|
font-size: 90pt;
|
|
text-align: left;
|
|
}
|
|
*/
|
|
|
|
:root{
|
|
--orange: #ff691e;
|
|
--blue: #042bda;
|
|
}
|
|
|
|
|
|
|
|
span.subtitle{
|
|
font-family: CrimsonR;
|
|
font-size: 13pt;
|
|
text-align: left;
|
|
}
|
|
|
|
img {
|
|
padding-top:15px;
|
|
width:390px;
|
|
object-fit: contain;
|
|
|
|
}
|
|
|
|
body {
|
|
margin: 15px;
|
|
font-family: CrimsonR;
|
|
font-size: 13pt;
|
|
font-style: normal;
|
|
line-height: 1.2;
|
|
color: var(--blue);
|
|
column-count: 4;
|
|
}
|
|
|
|
span.intro {
|
|
padding-top: 0px;
|
|
font-family: iAWriteRegular;
|
|
font-size: 25pt;
|
|
line-height: 1;
|
|
}
|
|
|
|
|
|
span.quote {
|
|
font-family: CrimsonR;
|
|
font-size: 45pt;
|
|
line-height: 0.9;
|
|
}
|
|
|
|
a{
|
|
font-family: iAWriteRegular;
|
|
font-size: 10pt;
|
|
text-decoration: none;
|
|
color: var(--blue);
|
|
|
|
}
|
|
|
|
a.home{
|
|
position: fixed;
|
|
color: black;
|
|
background: white;
|
|
cursor: pointer;
|
|
z-index:1000;
|
|
border-radius: 20px;
|
|
/* border: solid 0.5pt ; */
|
|
padding-right: 6px;
|
|
padding-left: 6px;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
/* mix-blend-mode: exclusion; */
|
|
}
|
|
|
|
a.link{
|
|
font-family: wfdtf;
|
|
color: black;
|
|
|
|
}
|
|
|
|
a:visited{
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: white;
|
|
color: var(--orange);
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
a.fig{
|
|
font-family: CrimsonR;
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
|
|
a.fig:visited{
|
|
text-decoration: none;
|
|
font-family: CrimsonR;
|
|
}
|
|
a.fig:hover {
|
|
padding-top: 5px;
|
|
color: white;
|
|
background: black;
|
|
font-family: CrimsonR;
|
|
}
|
|
|
|
span.chapters {
|
|
font-family: CrimsonR;
|
|
font-style: bold;
|
|
font-size: 20pt;
|
|
}
|
|
|
|
|
|
|
|
span.CC {
|
|
position: relative;
|
|
font-size: 8pt;
|
|
display: inline-block;
|
|
/* cursor: pointer; */
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
font-family: iAWriteRegular;
|
|
color: var(--orange);
|
|
}
|
|
|
|
span.IN {
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-size: 8pt;
|
|
color: var(--orange);
|
|
display: inline-block;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
font-family: iAWriteRegular;
|
|
/* background-color: transparent; */
|
|
}
|
|
|
|
span.CC:hover {
|
|
color: white;
|
|
background-color: var(--orange);
|
|
}
|
|
|
|
span.IN:hover {
|
|
color: white;
|
|
background-color: var(--orange);
|
|
|
|
}
|
|
|
|
span.reveal {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
span.reveal > .popIN {
|
|
display: none;
|
|
}
|
|
|
|
span.reveal > .popCC {
|
|
display: none;
|
|
}
|
|
|
|
a.reveal > .popfig {
|
|
display: none;
|
|
}
|
|
|
|
a.reveal > .popfig1 {
|
|
display: none;
|
|
}
|
|
|
|
a.reveal > .popfig2 {
|
|
display: none;
|
|
}
|
|
|
|
a.reveal > .popfig3 {
|
|
display: none;
|
|
}
|
|
|
|
a.reveal > .popfig4 {
|
|
display: none;
|
|
}
|
|
|
|
span.reveal.tada > span.popIN {
|
|
display:inline;
|
|
background-color: white;
|
|
padding: 4px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
width: 200% contain;
|
|
border: solid 1pt;
|
|
color: var(--orange);
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
/* padding: 4px 0; */
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: 110%;
|
|
left: 10%;
|
|
margin-left: -4px;
|
|
}
|
|
|
|
span.reveal.tada > span.popCC {
|
|
display:inline;
|
|
background-color: white;
|
|
width: 200% contain;
|
|
border: solid 1pt;
|
|
color: var(--orange);
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
padding: 4px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: 110%;
|
|
left: 10%;
|
|
margin-left: -4px;
|
|
}
|
|
|
|
a.reveal.tada > .popfig1 {
|
|
display:inline;
|
|
position: fixed;
|
|
top:250px;
|
|
left:890px;
|
|
z-index: 1;
|
|
width:20vw;
|
|
}
|
|
|
|
a.reveal.tada > .popfig {
|
|
display:inline;
|
|
position: fixed;
|
|
top:400px;
|
|
left:350px;
|
|
z-index: 1;
|
|
width: 20vw;
|
|
}
|
|
|
|
a.reveal.tada > .popfig2 {
|
|
display:inline;
|
|
padding-top: 0;
|
|
margin-top:0;
|
|
position: fixed;
|
|
top:1px;
|
|
left:1px;
|
|
z-index: -1;
|
|
width: 100%;
|
|
}
|
|
|
|
a.reveal.tada > .popfig3 {
|
|
display:inline;
|
|
position: fixed;
|
|
top:400px;
|
|
left:750px;
|
|
z-index: 1;
|
|
width: 40vw;
|
|
}
|
|
|
|
a.reveal.tada > .popfig4 {
|
|
display:inline;
|
|
padding-top: 0;
|
|
margin-top:0;
|
|
position: fixed;
|
|
top:1px;
|
|
left:20px;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
|
|
span.entrance {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
span.entrance > .arrow {
|
|
display: none;
|
|
}
|
|
|
|
span.entrance.tada > span.arrow {
|
|
display:inline;
|
|
}
|
|
|
|
span.entrance.tada > .intro {
|
|
display:hidden;
|
|
}
|
|
|
|
@media only screen and (max-width: 1400px){
|
|
body {
|
|
column-count:3;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 1000px){
|
|
body {
|
|
column-count:2;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 600px){
|
|
body {
|
|
column-count:1;
|
|
}
|
|
}
|
|
|
|
@media only screen
|
|
and (min-device-width: 375px)
|
|
and (max-device-width: 667px)
|
|
and (-webkit-min-device-pixel-ratio: 2) {
|
|
body {
|
|
font-size: 3vw;
|
|
column-count:1;
|
|
padding-left: 2vw;
|
|
padding-right: 4vw;
|
|
}
|
|
span.intro {
|
|
padding-top: 0px;
|
|
font-family: iAWriteRegular;
|
|
font-size: 9.5vw;
|
|
line-height: 1;
|
|
}
|
|
|
|
|
|
span.quote {
|
|
font-family: CrimsonR;
|
|
font-size: 18vw;
|
|
line-height: 0.9;
|
|
}
|
|
|
|
a{
|
|
font-family: iAWriteRegular;
|
|
font-size: 3vw;
|
|
text-decoration: none;
|
|
color: var(--blue);
|
|
|
|
}
|
|
|
|
a.home{
|
|
position: fixed;
|
|
color: black;
|
|
background: white;
|
|
cursor: pointer;
|
|
z-index:1000;
|
|
border-radius: 20px;
|
|
/* border: solid 0.5pt ; */
|
|
padding-right: 6px;
|
|
padding-left: 6px;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
/* mix-blend-mode: exclusion; */
|
|
}
|
|
|
|
a.link{
|
|
font-family: wfdtf;
|
|
color: black;
|
|
|
|
}
|
|
|
|
a:visited{
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: white;
|
|
color: var(--orange);
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
a.fig{
|
|
font-family: CrimsonR;
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
|
|
a.fig:visited{
|
|
text-decoration: none;
|
|
font-family: CrimsonR;
|
|
}
|
|
a.fig:hover {
|
|
padding-top: 5px;
|
|
color: white;
|
|
background: black;
|
|
font-family: CrimsonR;
|
|
}
|
|
|
|
span.chapters {
|
|
font-family: CrimsonR;
|
|
font-style: bold;
|
|
font-size: 8vw;
|
|
}
|
|
|
|
|
|
|
|
span.CC {
|
|
position: relative;
|
|
font-size: 3vw;
|
|
display: inline-block;
|
|
/* cursor: pointer; */
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
font-family: iAWriteRegular;
|
|
color: var(--orange);
|
|
}
|
|
|
|
img {
|
|
width: 95%;
|
|
}
|
|
|
|
span.IN {
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-size: 3vw;
|
|
color: var(--orange);
|
|
display: inline-block;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
font-family: iAWriteRegular;
|
|
/* background-color: transparent; */
|
|
}
|
|
|
|
span.CC:hover {
|
|
color: white;
|
|
background-color: var(--orange);
|
|
}
|
|
|
|
span.IN:hover {
|
|
color: white;
|
|
background-color: var(--orange);
|
|
|
|
}
|
|
|
|
span.reveal {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
span.reveal > .popIN {
|
|
display: none;
|
|
}
|
|
|
|
span.reveal > .popCC {
|
|
display: none;
|
|
}
|
|
|
|
a.reveal > .popfig {
|
|
display: none;
|
|
}
|
|
|
|
a.reveal > .popfig1 {
|
|
display: none;
|
|
}
|
|
|
|
a.reveal > .popfig2 {
|
|
display: none;
|
|
}
|
|
|
|
a.reveal > .popfig3 {
|
|
display: none;
|
|
}
|
|
|
|
a.reveal > .popfig4 {
|
|
display: none;
|
|
}
|
|
|
|
span.reveal.tada > span.popIN {
|
|
display:inline;
|
|
background-color: white;
|
|
padding: 4px;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
width: 200% contain;
|
|
border: solid 1pt;
|
|
color: var(--orange);
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
/* padding: 4px 0; */
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: 110%;
|
|
left: 10%;
|
|
margin-left: -4px;
|
|
}
|
|
|
|
span.reveal.tada > span.popCC {
|
|
display:inline;
|
|
background-color: white;
|
|
width: 200% contain;
|
|
border: solid 1pt;
|
|
color: var(--orange);
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
padding: 4px;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: 110%;
|
|
left: 10%;
|
|
margin-left: -4px;
|
|
}
|
|
|
|
a.reveal.tada > .popfig1 {
|
|
display:inline;
|
|
position: fixed;
|
|
top:250px;
|
|
left:890px;
|
|
z-index: 1;
|
|
width:20vw;
|
|
}
|
|
|
|
a.reveal.tada > .popfig {
|
|
display:inline;
|
|
position: fixed;
|
|
top:400px;
|
|
left:350px;
|
|
z-index: 1;
|
|
width: 20vw;
|
|
}
|
|
|
|
a.reveal.tada > .popfig2 {
|
|
display:inline;
|
|
padding-top: 0;
|
|
margin-top:0;
|
|
position: fixed;
|
|
top:1px;
|
|
left:1px;
|
|
z-index: -1;
|
|
width: 100%;
|
|
}
|
|
|
|
a.reveal.tada > .popfig3 {
|
|
display:inline;
|
|
position: fixed;
|
|
top:400px;
|
|
left:750px;
|
|
z-index: 1;
|
|
width: 40vw;
|
|
}
|
|
|
|
a.reveal.tada > .popfig4 {
|
|
display:inline;
|
|
padding-top: 0;
|
|
margin-top:0;
|
|
position: fixed;
|
|
top:1px;
|
|
left:20px;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
} |