diff --git a/static/css/style.css b/static/css/style.css index 69038f3..44e0352 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -45,9 +45,14 @@ body{ margin: 0; width: 100%; height: 100%; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + background: #e4e4e4; } -h2,h3{ +h2, h3{ font-family: 'Steps Thin Mono'; } @@ -61,17 +66,18 @@ div#wrapper{ div#top{ position: relative; - background: white; } div#bottom{ padding-top: 4em; + padding-bottom: 4em; position: absolute; width: 100%; } div.content-block{ - padding: 0 5em 0 10em; + width: 75%; + margin: 0 auto; } /********************************************************/ @@ -91,19 +97,12 @@ div.content-block{ #thewordpath{ font-family: 'Compagnon Light'; - /* font-style: roman; */ display: block; - width: 100%; - top:0; - right: 0; - left: 0; - width: auto; - margin: 0.5em 5em 0.5em 10em; + width: 75%; + margin: 0 auto; + margin-top: 0.5em; } -.word{ - color:black; -} /********************************************************/ /* HOMEPAGE */ @@ -114,24 +113,28 @@ div.home { text-align: justify; font-size: 0.8em; } - +div.homepage{ + padding: 0 0 5em 0; + width: 75%; + margin: 0 auto; +} div.home a{ border-bottom: 1px dashed black; padding: 0.1em; margin: 0.5em; - line-height: 1.5em; + line-height: 1.8em; color: white; } div.home a:visited{ color: black; - border-bottom: white; } div.home a:hover{ background: magenta; color: white; + border-bottom: none; } div.explanation{ @@ -174,6 +177,12 @@ div.explanation{ } #logobox a, #logobox a:visited{ color: black; + text-shadow: 1px 0 black; +} + +#logobox a:hover{ + color: magenta; + text-shadow: 1px 0 magenta; } #logobox h1{ @@ -193,8 +202,8 @@ div.generate-button { position: fixed; width: 5rem; height: 5rem; - bottom:5%; - right:5%; + bottom:25%; + right:1.5%; margin: auto; border-radius: 50%; animation: giro 24s infinite linear; @@ -229,8 +238,8 @@ div.generate-button-index { position: fixed; width: 5rem; height: 5rem; - bottom:0; - right:0; + top:10%; + right:10%; margin: auto; border-radius: 50%; animation: giro 7.5s infinite linear; @@ -264,8 +273,8 @@ div.generate-button-about { position: fixed; width: 5rem; height: 5rem; - left: 5%; - top: 50%; + left: 6%; + top: 30%; margin: auto; border-radius: 50%; animation: girominus 10s infinite linear; @@ -310,10 +319,6 @@ a{ text-decoration: none; } -div.diverge_list a { - color: magenta; -} - ul{ list-style: none; } @@ -339,41 +344,47 @@ li:hover { } img{ - max-width: 90%; + width: 90%; height: auto; margin-bottom: 15px; } video{ - max-width: 90%; + width: 90%; + height: auto; + margin-bottom: 15px; +} +audio{ + margin-bottom: 15px; + width: 90%; + margin-bottom: 15px; +} +embed#plugin { + margin-bottom: 15px; } .description{ - width: 80%; + width: 75%; } .text{ float: right; width: 50%; + line-height: 1.45em; } .text a:visited{ color: magenta; } .text a:hover{ - background: : red; + background: : magenta; color: white; } .item{ float: left; width: 50%; - padding-top: 7.8%; + padding-top: 3%; } -.column h2{ - /* color: pink; - border:1px solid pink; */ -} - .column a:hover{ color: white; background-color: magenta; @@ -442,19 +453,13 @@ li.prev_item, li.next_item, li.no_here { /* 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; @@ -465,20 +470,22 @@ span.folder-corner { /********************************************************/ /* ABOUT PAGE */ /********************************************************/ -div.about { +div.aboutpage { padding: 0 0 5em 0; - width: 70%; + width: 75%; margin: 0 auto; } - +.about.column, .theindexpage { + line-height: 1.45em; +} /********************************************************/ /* THE INDEX */ /********************************************************/ div.theindexpage{ padding: 0 0 5em 0; - width: 70%; + width: 75%; margin: 0 auto; } .foldersindex{ @@ -489,7 +496,7 @@ div.theindexpage{ } .foldersindex a{ color: black; - width: 80%; + width: 75%; height: 98%; /*display: inline-block;*/ } @@ -503,7 +510,7 @@ h1.logo a { text-transform: uppercase; } a.li-index span:hover { - background: red; + background: magenta; color: white; } a.li-index:hover { @@ -544,15 +551,11 @@ a.li-index:hover { hyphens: auto; word-break: break-all; } - div.content-block { - padding: 0em 2em 4em 2em; /* The width is 100%, when the viewport is 800px or smaller */ - } + #logobox{ padding: 0em; } - #thewordpath{ - margin: 0.5em; - } + /*home*/ div.home{ padding: 0em; @@ -564,7 +567,6 @@ a.li-index:hover { } div.home a{ color:black; - /*border:none;*/ } /*diverge*/ @@ -572,6 +574,14 @@ a.li-index:hover { padding: 0em; } + div.diverge_list > a:visited { + color: magenta; + } + + div.diverge_list > a:selection { + color: white; + } + /*description*/ div.text{ width: 100%; @@ -623,6 +633,9 @@ div#logobox { width: 100%; } +#logobox h1 { + font-size:1.5em; +} #logobox a, #logobox a:visited{ color: black; }