From c7e16c6ace226e70a578821997e04d0cba7aa4a3 Mon Sep 17 00:00:00 2001 From: zeroth Date: Tue, 24 Dec 2019 21:49:05 +0000 Subject: [PATCH] and css --- static/css/style.css | 198 +++++++++++++++++++++++++------------------ 1 file changed, 115 insertions(+), 83 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 243bbb0..7676cbe 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,7 +1,6 @@ -*, *:after, *:before { - box-sizing: border-box; - -moz-box-sizing: border-box; -} +/********************************************************/ +/* FONTS */ +/********************************************************/ @font-face { font-family: 'Compagnon Bold'; @@ -49,14 +48,18 @@ font-weight: normal; font-style: roman; } - - @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); +/********************************************************/ +/* ALL PAGES - LAYOUT */ +/********************************************************/ +*, *:after, *:before { + box-sizing: border-box; + -moz-box-sizing: border-box; +} body{ - /* background: #ffffff; */ color:black; font-family: 'Montserrat', sans-serif; top:0; @@ -64,34 +67,20 @@ body{ 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; @@ -103,6 +92,9 @@ div#bottom{ width: 100%; } +div.content-block{ + padding: 0 5em 0 10em; +} /********************************************************/ /* SELECTION */ @@ -115,21 +107,45 @@ div#bottom{ background: magenta; /* Gecko Browsers */ } +/********************************************************/ +/* WORDPATH */ +/********************************************************/ + +#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; + +} /********************************************************/ -/* FIRST PAGE */ +/* HOMEPAGE */ /********************************************************/ -div.homecontent{ +div.homepage{ /* padding-top: 4em; */ } +div.home > a{ + border-bottom: 1px dashed black; + padding: 0.1em; + margin: 0.5em; + line-height: 1.5em; +} + div.home{ - /* padding: 1em 5em 1em 7.5em; */ - padding-left: 15em; - padding-top: 2em; - padding-bottom: 3em; - padding-right: 5em; + padding: 5em 5em 1em 7.5em; text-align: justify; font-size: 0.8em; } @@ -139,7 +155,6 @@ div.home a:hover{ color: white; } - div.explanation{ font-size: 0.75em; float: right; @@ -152,10 +167,11 @@ div.explanation{ /********************************************************/ /* NAVIGATION */ /********************************************************/ + header{ margin-top: 7em; margin-right: 10em; - position: fixed; + position: absolute; top:17em; -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; @@ -173,20 +189,14 @@ header{ display: inline-block; background: none; padding-top: 0.5em; + padding-left: 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-size: 5vw; font-family: 'Steps Thin Mono'; margin-top: 0; } @@ -207,10 +217,11 @@ nav ul.menu { margin-top: 0.6em; } +/********************************************************/ +/* BUTTONS */ +/********************************************************/ - -/* here we are testing the button*/ - +/*generate the score*/ div.generate-button { position: fixed; @@ -222,6 +233,7 @@ div.generate-button { border-radius: 50%; animation: giro 24s infinite linear; background:red; + position: fixed; } div.generate-button > span:first-child { @@ -245,6 +257,7 @@ div.generate-button span { } /*index*/ + div.generate-button-index { position: fixed; width: 5rem; @@ -255,6 +268,7 @@ div.generate-button-index { border-radius: 50%; animation: giro 7.5s infinite linear; background: magenta; + position: fixed; } div.generate-button-index > span:first-child { @@ -276,7 +290,6 @@ div.generate-button-index span { text-transform: uppercase; } - /*about*/ div.generate-button-about { @@ -289,6 +302,7 @@ div.generate-button-about { border-radius: 50%; animation: girominus 10s infinite linear; background:yellow; + position: fixed; } div.generate-button-about > span:first-child { @@ -314,21 +328,13 @@ div.generate-button-about span { 100% {transform: rotate(-1turn)} } - - - - - @keyframes giro { 100% {transform: rotate(1turn)} } - - - /********************************************************/ -/* TEXT */ +/* DESCRIPTION PAGE */ /********************************************************/ a{ @@ -342,6 +348,7 @@ a:visited { ul{ list-style: none; } + li a{ text-decoration: none; color: #0000FF @@ -364,39 +371,13 @@ li:hover { img{ max-width: 90%; + height: auto; 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%; } @@ -404,6 +385,15 @@ video{ float: right; width: 50%; } + +.text a:visited{ + color: red; +} +.text a:hover{ + background: : red; + color: white; +} + .item{ float: left; width: 50%; @@ -441,7 +431,7 @@ nav.nav_bottom { height: auto; bottom: 0px; text-transform: uppercase; - font-size: 15px; + /*font-size: 15vw;*/ line-height: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -501,6 +491,7 @@ span.folder-corner { font-style: italic; } + /********************************************************/ /* ABOUT PAGE */ /********************************************************/ @@ -513,9 +504,9 @@ div.about { /********************************************************/ -/* INDEX OF FOLDERS */ +/* THE INDEX */ /********************************************************/ -div.allcontentindex{ +div.theindexpage{ padding: 0 0 5em 0; width: 70%; margin: 0 auto; @@ -549,3 +540,44 @@ a.li-index:hover { background: transparent; color: black; } + + +/********************************************************/ +/* OTHER DISPLAYS */ +/********************************************************/ +/* Use a media query to add a breakpoint at 800px: */ +@media screen and (max-width: 600px) { + /*all pages*/ + div.content-block { + padding: 0em 2em 0em 2.5em; /* The width is 100%, when the viewport is 800px or smaller */ + } + #logobox{ + padding: 0em; + } + /*home*/ + div.home{ + padding: 0em; + } + /*diverge*/ + div.diverge_all{ + padding: 0em; + } + /*description*/ + div.text{ + width: 100%; + } + div.item{ + width: 100%; + } + div.about{ + width: 100%; + } + div.descriptionpage{ + display: flex; + flex-direction: column-reverse; + } + /*index*/ + div.theindexpage{ + width: 100%; + } +} \ No newline at end of file