simpleWordsCloud/css/style.css

101 lines
1.7 KiB
CSS
Raw Normal View History

2020-11-15 21:51:28 +01:00
/******************* Constants *******************/
:root {
--font-color: #EFEFEF;
--font-color-em: #8C8C8C;
--background-color-main: #404040;
--background-color-secondary: #505050;
--avatar-background: #B6B6B6;
--color01: #99CCFF;
--color01_bright: #58af58;
--color02: #ab7026;
--color02_bright: #ea9a36;
--nav-maxwidth: 900px;
--nav-height: 5em;
--body-maxwidth: 900px;
--footer-maxwidth: 900px;
--footer-height: 3em;
2020-11-15 21:51:28 +01:00
--padding-border: 1em;
}
/******************* Page *******************/
* {
box-sizing: border-box;
}
html {
background-color: var(--background-color-main);
font-family: Lato, Helvetica, sans-serif;
font-size: large;
color: var(--font-color);
min-height: 100vh
}
body {
margin: 0;
position: relative;
height: 100%;
}
html, body {
height: 100%;
2020-11-15 21:51:28 +01:00
}
a {
color: var(--font-color);
}
#page-wrap {
min-height: 100%;
margin-bottom: calc(0em - var(--footer-height));
}
#page-wrap:after {
content: "";
display: block;
}
footer, #page-wrap:after {
/* .push must be the same height as footer */
height: var(--footer-height);
}
2020-11-15 21:51:28 +01:00
/******************* Header *******************/
#navbar {
font-size: 2em;
padding: 2rem 1rem;
2020-11-15 21:51:28 +01:00
}
2020-11-16 21:31:59 +01:00
/******************* Footer *******************/
#footer {
width: 100%;
height: var(--footer-height);
vertical-align: bottom;
position: relative;
}
#footer_text {
position: absolute;
bottom: 0.1em;
left: 50%;
transform: translateX(-50%);
2020-11-16 21:31:59 +01:00
}
/******************* Container *******************/
.container {
margin: 0 1em;
}
/******************* Others *******************/
2020-11-15 21:51:28 +01:00
#my_canvas {
height: 400px;
}
2020-11-16 21:31:59 +01:00
2020-11-16 22:13:13 +01:00
.cloud_words_input {
margin: 1em;
}
#cloud_words_submit {
display: block;
margin-top: 1em;
2020-11-16 21:31:59 +01:00
}
.cloud_link {
margin-bottom: 1em;
}