Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
135 lines (120 sloc) 2.6 KB
@import (css)
'https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600&display=swap';
@import '../variables.less';
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
background-color: var(--secondary-white);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family: 'Nunito Sans', sans-serif, -apple-system, BlinkMacSystemFont,
'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html,
body,
#root {
height: 100%;
}
.theme-toggle {
background-color: transparent !important;
color: black !important;
}
.app {
display: grid;
grid-template-rows: minmax(75px, 80px) 75% minmax(10%, auto);
grid-template-areas:
'header'
'content'
'footer';
height: 100%;
&__btn {
padding: 0.5em;
height: 40px;
min-width: 40px;
background-color: var(--default-white);
color: var(--default-white);
font-size: 1em;
font-weight: bolder;
border-style: none;
border-radius: 5px;
transition: background-color 200ms;
cursor: pointer;
}
&__header {
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0.5em 1em;
background-color: var(--default-white);
&__h1 {
color: var(--text-color);
text-transform: lowercase;
text-align: center;
height: fit-content;
margin: 0;
}
}
&__content {
grid-area: content;
justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
max-width: 600px;
overflow-y: scroll;
padding: 0.5em 0;
&__no-idea {
font-size: 2em;
color: #999;
align-self: center;
margin: auto;
}
}
&__footer {
grid-area: footer;
justify-self: center;
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
background-color: var(--default-dark);
width: 100%;
&__input {
padding: 1em;
margin-right: 0.5em;
width: 50%;
max-width: 500px;
border-radius: 8px;
border-style: none;
font-size: 1em;
}
&__submit-btn {
color: var(--constant-white);
background-color: var(--success-green);
&:hover {
color: var(--success-green);
background-color: var(--constant-white);
}
}
}
}
@media only screen and (max-width: 768px) {
.app {
&__content {
width: 80%;
}
&__footer {
&__input {
width: 75%;
}
}
}
}
You can’t perform that action at this time.