www-bocal/mainsite/static/sass/screen.scss
2017-10-15 21:56:03 +02:00

136 lines
2.5 KiB
SCSS

/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import "compass/reset";
@import "_colors.scss";
@import url('https://fonts.googleapis.com/css?family=Bitter:400,700|Source+Sans+Pro:400,700');
*, *:after, *:before {
box-sizing: border-box;
}
body, html {
background: darken($fond, 10%);
padding: 0;
margin: 0;
height: 100%;
font-family: "Source Sans Pro", sans-serif;
font-size: 18px;
line-height: 1.45;
}
body.plain {
#main {
max-width: 500px;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform:translateY(-50%) translateX(-50%);
background: $cadreclair;
padding: 25px;
}
}
h1, h2, h3, h4 {
font-family: "Bitter", serif;
}
h2 {
font-size: 1.8em;
text-align: center;
}
strong, b {
font-weight: bold;
}
i, em {
font-style: italic;
}
a {
color: $fond;
text-decoration: none;
font-weight: bold;
}
.container, header {
background: #fff;
margin: 0 auto;
max-width: 800px;
}
header {
text-align: center;
border-bottom: 2px solid #000;
position: relative;
padding-bottom: 40px;
&:after {
content: " ";
position: absolute;
width: 100%;
z-index: 1;
left: 0;
bottom: 25px;
border-bottom: 2px solid #000;
}
}
.container {
display: table;
display: flex;
padding: 15px;
width: 100%;
}
.sidebar {
width: 210px;
ul.nav li {
display: block;
font-weight: normal;
margin: 5px 0;
a {
background: $cadreclair;
padding: 10px 0;
display: block;
text-align: center;
background: linear-gradient(to bottom, rgba($cadreclair, 0) 60%, $cadreclair 60%) no-repeat
}
}
}
.main {
flex-grow: 1;
padding: 20px;
width: 100%;
.last-publication {
display: block;
max-width: 300px;
margin: 15px auto;
text-align: center;
font-size: 1.5em;
background: darken($cadreclair, 20%);
padding: 30px;
}
}
.publication-list {
margin: 10px 5px;
margin-left: 30px;
td {
padding: 3px 5px;
}
.publication-date {
text-align: right;
font-weight: light;
font-size: 0.8em;
}
}