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