gestioCOF/gestioncof/cms/static/cofcms/sass/screen.scss
Guillaume Bertholon fe2f8aaa5a Servir les polices de sitecof en local
Le nouveau site du COF réintroduisait des fontes hostées chez Google.
On s'en débarasse en utilisant des webfontes locales.
2020-03-28 13:59:07 +01:00

458 lines
12 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";
*, *:after, *:before {
box-sizing: border-box;
}
body {
background: $fond;
font: 17px $bodyfont;
}
header {
background: $bandeau;
}
h1, h2 {
font-family: $headfont;
color: $titre;
}
h1 {
font-size: 2.3em;
}
h2 {
font-size: 1.6em;
}
a {
color: $lien;
text-decoration: none;
font-weight: bold;
}
h2 a {
font-weight: inherit;
color: inherit;
}
header {
a {
color: $headerlien;
}
section {
display: flex;
width: 100%;
justify-content: space-between;
align-items: stretch;
&.bottom-menu {
justify-content: space-around;
text-align: center;
background: $sousbandeau;
}
}
h1 {
padding: 0 15px;
}
nav {
ul {
display: inline-flex;
li {
display: inline-block;
& > * {
display: block;
padding: 10px 15px;
font-weight: bold;
&:hover {
background: darken($bandeau, 10%);
}
}
}
}
.lang-select {
display: inline-block;
height: 100%;
vertical-align: top;
position: relative;
&:before {
content: "";
color: #fff;
position: absolute;
top: 0;
left: 0;
border-left: 1px solid #fff;
height: calc(100% - 20px);
margin: 10px 0;
padding-left: 10px;
}
a {
padding: 10px 20px;
display: block;
img {
display: block;
width: auto;
max-height: 20px;
vertical-align: middle;
}
}
}
}
}
article {
line-height: 1.4;
p, ul {
margin: 0.4em 0;
}
ul {
padding-left: 20px;
li {
list-style: outside;
}
}
&:last-child {
margin-bottom: 30px;
}
}
.container {
max-width: 1000px;
margin: 0 auto;
position: relative;
.aside-wrap {
position: absolute;
top: 30px;
height: 100%;
width: 25%;
left: 6px;
.aside {
color: #222;
position: fixed;
position: sticky;
top: 5px;
width: 100%;
background: $aside;
padding: 15px;
box-shadow: -4px 4px 1px rgba($ombres, 0.3);
h2 {
color: #fff;
}
.calendar {
margin: 0 auto;
display: block;
}
a {
color: darken($lien, 10%);
}
}
}
.content {
max-width: 900px;
margin-left: auto;
margin-right: 6px;
.intro {
border-bottom: 3px solid darken($fond, 50%);
margin: 20px 0;
margin-top: 5px;
padding: 15px 5px;
}
section {
article {
background: #fff;
padding: 20px 30px;;
box-shadow: -4px 4px 1px rgba($ombres, 0.3);
border: 1px solid rgba($ombres, 0.1);
border-radius: 2px;
a {
color: $lien;
}
}
article + h2 {
margin-top: 15px;
}
article + article {
margin-top: 25px;
}
.image {
margin: 15px 0;
text-align: center;
padding: 20px;
img {
max-width: 100%;
height: auto;
box-shadow: -7px 7px 1px rgba($ombres, 0.2);
}
}
&.directory {
article.entry {
width: 80%;
max-width: 600px;
max-height: 100%;
position: relative;
margin-left: 6%;
.entry-image {
display: block;
float: right;
width: 150px;
background: #fff;
box-shadow: -4px 4px 1px rgba($ombres, 0.2);
border-right: 1px solid rgba($ombres, 0.2);
border-top: 1px solid rgba($ombres, 0.2);
padding: 1px;
overflow: hidden;
margin-left: 10px;
margin-bottom: 10px;
transform: translateX(10px);
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
}
ul.links {
margin-top: 10px;
border-top: 1px solid $sousbandeau;
padding-top: 10px;
}
}
}
&.actuhome {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: top;
article + article {
margin: 0;
}
article.actu {
position: relative;
background: none;
box-shadow: none;
border: none;
max-width: 400px;
min-width: 300px;
flex: 1;
.actu-header {
position: relative;
box-shadow: -4px 5px 1px rgba($ombres, 0.3);
border-right: 1px solid rgba($ombres, 0.2);
border-top: 1px solid rgba($ombres, 0.2);
min-height: 180px;
padding: 0;
margin: 0;
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
h2 {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 5px;
text-shadow: 0 0 5px rgba($ombres, 0.8);
background: linear-gradient(to top, rgba(#000, 0.7), rgba(#000, 0));
a {
color: #fff;
}
}
}
.actu-misc {
background: lighten($fond, 15%);
box-shadow: -2px 2px 1px rgba($ombres, 0.2);
border: 1px solid rgba($ombres, 0.2);
border-radius: 2px;
margin: 0 10px;
padding: 15px;
padding-top: 5px;
.actu-minical {
display: block;
}
.actu-dates {
display: block;
text-align: right;
font-size: 0.9em;
}
}
.actu-overlay {
display: block;
background: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
opacity: 0;
}
}
}
&.actulist {
article.actu {
display:flex;
width: 100%;
padding: 0;
.actu-image {
width: 30%;
max-width: 200px;
background-size: cover;
background-position: center center;
}
.actu-infos {
padding: 15px;
flex: 1;
.actu-dates {
font-weight: bold;
font-size: 0.9em;
}
}
}
}
}
}
.aside-wrap + .content {
max-width: 70%;
}
}
.calendar {
color: rgba(#000, 0.8);
width: 200px;
td, th {
text-align: center;
vertical-align: middle;
border: 2px solid transparent;
padding: 1px;
}
th {
font-weight: bold;
}
td {
font-size: 0.8em;
width: 28px;
height: 28px;
&.out {
opacity: 0.3;
}
&.today {
border-bottom-color: #000;
}
&:nth-child(7), &:nth-child(6) {
background: rgba(#000, 0.2);
}
&.hasevent {
position: relative;
font-weight: bold;
color: $sousbandeau;
font-size: 1em;
& > a {
padding: 3px;
color: $sousbandeau !important;
}
ul.cal-events {
text-align: left;
display: none;
position: absolute;
z-index: 2;
background: #fff;
width: 150px;
left: -30px;
margin-top: 10px;
padding: 5px;
background-color: $sousbandeau;
.datename {
display: none;
}
&:before {
top: -12px;
left: 38px;
content: "";
position: absolute;
border: 6px solid transparent;
border-bottom-color: $sousbandeau;
}
a {
color: #fff;
}
}
& > a:hover {
background-color: $sousbandeau;
color: #fff !important;
& + ul.cal-events {
display: block;
}
}
}
}
}
#calendar-wrap .details {
border-top: 1px solid $sousbandeau;
margin-top: 15px;
padding-top: 10px;
li.datename {
&:after {
content: " :";
}
font-weight: bold;
font-size: 1.1em;
margin-bottom: 5px;
}
}
@import "_responsive";