Add some basic styles
This commit is contained in:
13
app/assets/stylesheets/_reset.scss
Normal file
13
app/assets/stylesheets/_reset.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
html, body, h1, h2, h3, h4, h5, h6, p, pre, a, dl, dt, dd, ol, ul, li {
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
12
app/assets/stylesheets/fonts.scss
Normal file
12
app/assets/stylesheets/fonts.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
src: url('/fonts/raleway-light.woff') format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: Raleway, sans-serif;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
112
app/assets/stylesheets/layout.scss
Normal file
112
app/assets/stylesheets/layout.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
$content-width: 800px;
|
||||
$content-max-width: 100%;
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
> header {
|
||||
margin: 0 auto;
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
background: #0d4f99;
|
||||
background: linear-gradient(35deg, #8955a0 0, #0d4f99 100%);
|
||||
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
|
||||
span.project-name {
|
||||
display: none;
|
||||
// font-size: .5em;
|
||||
// text-transform: none;
|
||||
// vertical-align: super;
|
||||
}
|
||||
|
||||
span.beta {
|
||||
font-size: .5em;
|
||||
font-style: italic;
|
||||
text-transform: none;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
span.bolt {
|
||||
color: #ffd000;
|
||||
}
|
||||
}
|
||||
|
||||
p.current-user {
|
||||
margin-top: 2rem;
|
||||
color: rgba(255,255,255,0.6);
|
||||
|
||||
strong {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
// color: #ffd000;
|
||||
// color: #ccff40;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(255,255,255,0.6);
|
||||
transition: color 0.1s linear;
|
||||
|
||||
&:hover, &:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flash-msg {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
|
||||
&.notice {
|
||||
background: #efffc4;
|
||||
}
|
||||
|
||||
&.alert {
|
||||
background: #fff4c2;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
width: $content-width;
|
||||
max-width: $content-max-width;
|
||||
margin: 4rem auto;
|
||||
text-align: left;
|
||||
|
||||
h2, h3 {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&.notice {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
padding-bottom: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
// Place all the styles related to the Welcome controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: https://sass-lang.com/
|
||||
Reference in New Issue
Block a user