1 changed files with 551 additions and 0 deletions
@ -0,0 +1,551 @@ |
|||||
|
*, *:after, *:before { |
||||
|
box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Compagnon Bold'; |
||||
|
src: url('webfonts/Compagnon-Bold.woff2') format('woff2'), |
||||
|
url('webfonts/Compagnon-Bold.woff') format('woff') ; |
||||
|
font-weight: bold; |
||||
|
font-style: normal; |
||||
|
} |
||||
|
@font-face { |
||||
|
font-family: 'Compagnon Italic'; |
||||
|
src: url('webfonts/Compagnon-Italic.woff2') format('woff2'), |
||||
|
url('webfonts/Compagnon-Italic.woff') format('woff'); |
||||
|
font-weight: normal; |
||||
|
font-style: italic; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Compagnon'; |
||||
|
src: url('webfonts/Compagnon-Medium.woff2') format('woff2'), |
||||
|
url('webfonts/Compagnon-Medium.woff') format('woff'); |
||||
|
font-weight: medium; |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Compagnon Light'; |
||||
|
src: url('webfonts/Compagnon-Light.woff2') format('woff2'), |
||||
|
url('webfonts/Compagnon-Light.woff') format('woff'); |
||||
|
font-weight: light; |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Compagnon Roman'; |
||||
|
src: url('webfonts/Compagnon-Roman.woff') format('woff'); |
||||
|
font-weight: normal; |
||||
|
font-style: roman; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Steps Thin Mono'; |
||||
|
src: url('webfonts/steps-mono-thin-webfont.woff2') format('woff2'), |
||||
|
url('webfonts/steps-mono-thin-webfont.woff') format('woff'); |
||||
|
font-weight: normal; |
||||
|
font-style: roman; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); |
||||
|
|
||||
|
|
||||
|
|
||||
|
body{ |
||||
|
/* background: #ffffff; */ |
||||
|
color:black; |
||||
|
font-family: 'Montserrat', sans-serif; |
||||
|
top:0; |
||||
|
left: 0; |
||||
|
margin: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
h2,h3{ |
||||
|
font-family: 'Steps Thin Mono'; |
||||
|
} |
||||
|
a{ |
||||
|
color: black; |
||||
|
} |
||||
|
|
||||
|
div.home > a{ |
||||
|
border-bottom: 1px dashed black; |
||||
|
padding: 0.1em; |
||||
|
margin: 0.5em; |
||||
|
line-height: 1.5em; |
||||
|
} |
||||
|
|
||||
|
.text a:visited{ |
||||
|
color: red; |
||||
|
} |
||||
|
.text a:hover{ |
||||
|
background: : red; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
div#wrapper{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
div#top{ |
||||
|
position: relative; |
||||
|
background: white; |
||||
|
} |
||||
|
|
||||
|
div#bottom{ |
||||
|
padding-top: 4em; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/********************************************************/ |
||||
|
/* SELECTION */ |
||||
|
/********************************************************/ |
||||
|
|
||||
|
::selection { |
||||
|
background: magenta; /* WebKit/Blink Browsers */ |
||||
|
} |
||||
|
::-moz-selection { |
||||
|
background: magenta; /* Gecko Browsers */ |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/********************************************************/ |
||||
|
/* FIRST PAGE */ |
||||
|
/********************************************************/ |
||||
|
|
||||
|
div.homecontent{ |
||||
|
/* padding-top: 4em; */ |
||||
|
} |
||||
|
|
||||
|
div.home{ |
||||
|
/* padding: 1em 5em 1em 7.5em; */ |
||||
|
padding-left: 15em; |
||||
|
padding-top: 2em; |
||||
|
padding-bottom: 3em; |
||||
|
padding-right: 5em; |
||||
|
text-align: justify; |
||||
|
font-size: 0.8em; |
||||
|
} |
||||
|
|
||||
|
div.home a:hover{ |
||||
|
background: red; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
div.explanation{ |
||||
|
font-size: 0.75em; |
||||
|
float: right; |
||||
|
padding-right: 0.75em; |
||||
|
font-style: italic; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
/********************************************************/ |
||||
|
/* NAVIGATION */ |
||||
|
/********************************************************/ |
||||
|
header{ |
||||
|
margin-top: 7em; |
||||
|
margin-right: 10em; |
||||
|
position: fixed; |
||||
|
top:17em; |
||||
|
-webkit-transform-origin: 0 50%; |
||||
|
-moz-transform-origin: 0 50%; |
||||
|
-ms-transform-origin: 0 50%; |
||||
|
-o-transform-origin: 0 50%; |
||||
|
transform-origin: 0 50%; |
||||
|
-webkit-transform: rotate(-90deg) translate(-50%, 50%); |
||||
|
-moz-transform: rotate(-90deg) translate(-50%, 50%); |
||||
|
-ms-transform: rotate(-90deg) translate(-50%, 50%); |
||||
|
-o-transform: rotate(-90deg) translate(-50%, 50%); |
||||
|
transform: rotate(-90deg) translate(-50%, 50%); |
||||
|
} |
||||
|
|
||||
|
#logobox{ |
||||
|
display: inline-block; |
||||
|
background: none; |
||||
|
padding-top: 0.5em; |
||||
|
} |
||||
|
#logobox a, #logobox a:visited{ |
||||
|
color: black; |
||||
|
} |
||||
|
#logobox a:hover{ |
||||
|
animation: blinker 0.05s linear infinite; |
||||
|
} |
||||
|
|
||||
|
@keyframes blinker { |
||||
|
50% { opacity: 0; } |
||||
|
} |
||||
|
|
||||
|
#logobox h1{ |
||||
|
font-size: 5em; |
||||
|
font-family: 'Steps Thin Mono'; |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
|
||||
|
nav{ |
||||
|
float: right; |
||||
|
text-transform: lowercase; |
||||
|
/* font-family: 'Montserrat', sans-serif; */ |
||||
|
font-family: 'Steps Thin Mono'; |
||||
|
/* font-family: 'Victorianna Thin'; */ |
||||
|
} |
||||
|
|
||||
|
nav ul.menu { |
||||
|
/* font-weight: bold; */ |
||||
|
float: left; |
||||
|
display: inline-block; |
||||
|
text-align: right; |
||||
|
margin-top: 0.6em; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* here we are testing the button*/ |
||||
|
|
||||
|
|
||||
|
div.generate-button { |
||||
|
position: fixed; |
||||
|
width: 5rem; |
||||
|
height: 5rem; |
||||
|
bottom:5%; |
||||
|
right:5%; |
||||
|
margin: auto; |
||||
|
border-radius: 50%; |
||||
|
animation: giro 24s infinite linear; |
||||
|
background:red; |
||||
|
} |
||||
|
|
||||
|
div.generate-button > span:first-child { |
||||
|
transform: translatex(2.5rem); |
||||
|
} |
||||
|
|
||||
|
div.generate-button span { |
||||
|
width: 0; |
||||
|
height: 5rem; |
||||
|
position: absolute; |
||||
|
top: 0rem; |
||||
|
left: 0rem; |
||||
|
font-size: 0.75rem; |
||||
|
color: black; |
||||
|
text-align: center; |
||||
|
line-height: 1; |
||||
|
transform: rotate(17.5deg); |
||||
|
vertical-align: top; |
||||
|
transform-style: preserve-3d; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
|
||||
|
/*index*/ |
||||
|
div.generate-button-index { |
||||
|
position: fixed; |
||||
|
width: 5rem; |
||||
|
height: 5rem; |
||||
|
bottom:0; |
||||
|
right:0; |
||||
|
margin: auto; |
||||
|
border-radius: 50%; |
||||
|
animation: giro 7.5s infinite linear; |
||||
|
background: magenta; |
||||
|
} |
||||
|
|
||||
|
div.generate-button-index > span:first-child { |
||||
|
transform: translatex(2.5rem); |
||||
|
} |
||||
|
div.generate-button-index span { |
||||
|
width: 0; |
||||
|
height: 5rem; |
||||
|
position: absolute; |
||||
|
top: 0rem; |
||||
|
left: 0rem; |
||||
|
font-size: 0.75rem; |
||||
|
color: black; |
||||
|
text-align: center; |
||||
|
line-height: 1; |
||||
|
transform: rotate(17.5deg); |
||||
|
vertical-align: top; |
||||
|
transform-style: preserve-3d; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*about*/ |
||||
|
|
||||
|
div.generate-button-about { |
||||
|
position: fixed; |
||||
|
width: 5rem; |
||||
|
height: 5rem; |
||||
|
left: 5%; |
||||
|
top: 50%; |
||||
|
margin: auto; |
||||
|
border-radius: 50%; |
||||
|
animation: girominus 10s infinite linear; |
||||
|
background:yellow; |
||||
|
|
||||
|
} |
||||
|
div.generate-button-about > span:first-child { |
||||
|
transform: translatex(2.5rem); |
||||
|
} |
||||
|
div.generate-button-about span { |
||||
|
width: 0; |
||||
|
height: 5rem; |
||||
|
position: absolute; |
||||
|
top: 0rem; |
||||
|
left: 0rem; |
||||
|
font-size: 0.75rem; |
||||
|
color: black; |
||||
|
text-align: left; |
||||
|
line-height: 1; |
||||
|
transform: rotate(17.5deg); |
||||
|
vertical-align: top; |
||||
|
transform-style: preserve-3d; |
||||
|
text-transform:uppercase; |
||||
|
} |
||||
|
|
||||
|
@keyframes girominus { |
||||
|
100% {transform: rotate(-1turn)} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
@keyframes giro { |
||||
|
100% {transform: rotate(1turn)} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
/********************************************************/ |
||||
|
/* TEXT */ |
||||
|
/********************************************************/ |
||||
|
|
||||
|
a{ |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
a:visited { |
||||
|
color:red; |
||||
|
} |
||||
|
|
||||
|
ul{ |
||||
|
list-style: none; |
||||
|
} |
||||
|
li a{ |
||||
|
text-decoration: none; |
||||
|
color: #0000FF |
||||
|
} |
||||
|
|
||||
|
li:hover a{ |
||||
|
color: white; |
||||
|
background-color: red; |
||||
|
} |
||||
|
|
||||
|
li{ |
||||
|
padding-left: 5px; |
||||
|
padding-right: 5px; |
||||
|
} |
||||
|
li:hover { |
||||
|
background-color: red; |
||||
|
padding-left: 5px; |
||||
|
padding-right: 5px; |
||||
|
} |
||||
|
|
||||
|
img{ |
||||
|
max-width: 90%; |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
video{ |
||||
|
max-width: 90%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/********************************************************/ |
||||
|
/* THE CLICKED WORDS DISPLAYED */ |
||||
|
/********************************************************/ |
||||
|
|
||||
|
#thewordpath{ |
||||
|
font-family: 'Compagnon Light'; |
||||
|
/* font-style: roman; */ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
top:0; |
||||
|
right: 0; |
||||
|
left: 0; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
padding: 10px; |
||||
|
width: auto; |
||||
|
} |
||||
|
.word{ |
||||
|
color:black; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/********************************************************/ |
||||
|
/* THE CONTENT IN TWO COLUMNS */ |
||||
|
/********************************************************/ |
||||
|
|
||||
|
.description{ |
||||
|
width: 80%; |
||||
|
} |
||||
|
.text{ |
||||
|
float: right; |
||||
|
width: 50%; |
||||
|
} |
||||
|
.item{ |
||||
|
float: left; |
||||
|
width: 50%; |
||||
|
padding-top: 7.8%; |
||||
|
} |
||||
|
|
||||
|
.column h2{ |
||||
|
/* color: pink; |
||||
|
border:1px solid pink; */ |
||||
|
} |
||||
|
|
||||
|
.column a:hover{ |
||||
|
color: white; |
||||
|
background-color: red; |
||||
|
} |
||||
|
|
||||
|
.h3-titles { |
||||
|
font-family: 'Steps Thin Mono'; |
||||
|
font-size: 1.2em; |
||||
|
background-color: magenta; |
||||
|
display: inline; |
||||
|
} |
||||
|
|
||||
|
/********************************************************/ |
||||
|
/* NAVIGATION BAR AT THE BOTTOM OF DESCRIPTION*/ |
||||
|
/********************************************************/ |
||||
|
.index { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
nav.nav_bottom { |
||||
|
width: 100%; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
height: auto; |
||||
|
bottom: 0px; |
||||
|
text-transform: uppercase; |
||||
|
font-size: 15px; |
||||
|
line-height: 18px; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
list-style-type: none; |
||||
|
overflow: hidden; |
||||
|
position: fixed; |
||||
|
background: white; |
||||
|
padding-top: 10px; |
||||
|
padding-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
nav.nav_bottom div li { |
||||
|
margin-right: 2em; |
||||
|
} |
||||
|
nav.nav_bottom div li a{ |
||||
|
color: black |
||||
|
} |
||||
|
nav.nav_bottom div li a:hover{ |
||||
|
color: red; |
||||
|
background-color: black; |
||||
|
} |
||||
|
|
||||
|
nav.nav_bottom div li:first-child { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
li.index, li.about { |
||||
|
float: left; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
li.prev_item, li.next_item, li.no_here { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/********************************************************/ |
||||
|
/* DIVERGE */ |
||||
|
/********************************************************/ |
||||
|
|
||||
|
div.diverge_all{ |
||||
|
padding: 1em 6.3em 1em; |
||||
|
} |
||||
|
div.diverge_all p{ |
||||
|
font-weight: bold; |
||||
|
font-size: 1.3em; |
||||
|
font-family: 'Steps Thin Mono'; |
||||
|
} |
||||
|
div.diverge_list { |
||||
|
/* width: 40%; */ |
||||
|
} |
||||
|
div.diverge_list a{ |
||||
|
} |
||||
|
span.folder-corner { |
||||
|
|
||||
|
font-size: 0.8em; |
||||
|
font-style: italic; |
||||
|
} |
||||
|
|
||||
|
/********************************************************/ |
||||
|
/* ABOUT PAGE */ |
||||
|
/********************************************************/ |
||||
|
div.about { |
||||
|
padding: 0 0 5em 0; |
||||
|
width: 70%; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/********************************************************/ |
||||
|
/* INDEX OF FOLDERS */ |
||||
|
/********************************************************/ |
||||
|
div.allcontentindex{ |
||||
|
padding: 0 0 5em 0; |
||||
|
width: 70%; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.foldersindex{ |
||||
|
width: 100%; |
||||
|
padding-top: 50px; |
||||
|
padding-bottom: 50px; |
||||
|
font-family: 'Steps Thin Mono'; |
||||
|
} |
||||
|
.foldersindex a{ |
||||
|
color: black; |
||||
|
width: 80%; |
||||
|
height: 98%; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.foldersindex a:hover{ |
||||
|
background-color: red; |
||||
|
color: white; |
||||
|
width: 100%; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
h1.logo a { |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
a.li-index span:hover { |
||||
|
background: red; |
||||
|
color: white; |
||||
|
} |
||||
|
a.li-index:hover { |
||||
|
background: transparent; |
||||
|
color: black; |
||||
|
} |
||||
Loading…
Reference in new issue