Diff
checker
텍스트
텍스트
이미지
문서
Excel
폴더
Legal
Enterprise
데스크톱
요금제
로그인
데스크톱 앱 다운로드
텍스트 비교
두 텍스트 파일의 차이점을 찾아보세요
도구
기록
실시간 편집
변경 없는 행 숨기기
줄바꿈 비활성화
레이아웃
나란히 보기
합쳐 보기
비교 단위
스마트
단어
글자
구문 강조
언어 선택
제외
텍스트 변환
첫 변경으로
수정
Diffchecker Desktop
가장 안전하게 Diffchecker를 사용하는 방법. 데스크톱 앱을 사용하면 비교 데이터가 외부로 전송되지 않습니다!
데스크톱 앱 받기
Untitled diff
생성일
7년 전
비교 결과 만료 없음
초기화
내보내기
공유
설명
251 삭제
행
총
삭제
글자
총
삭제
이 기능을 계속 사용하려면 업그레이드해 주세요
Diff
checker
Pro
요금제 보기
512 행
복사
129 추가
행
총
추가
글자
총
추가
이 기능을 계속 사용하려면 업그레이드해 주세요
Diff
checker
Pro
요금제 보기
388 행
복사
복사
복사됨
복사
복사됨
/*
--------------------------------------
/*
--------------------------------------
design.css
design.css
Contient les conteneurs de mise en page.
Contient les conteneurs de mise en page.
Le design.css permet de mettre en forme votre site web avec le design de votre choix
Le design.css permet de mettre en forme votre site web avec le design de votre choix
복사
복사됨
복사
복사됨
--------------------------------------
*/
--------------------------------------
*/
/* -- Elements HTML generiques specifique au theme -- */
/* -- Elements HTML generiques specifique au theme -- */
/* -------------------------------------------------- */
/* -------------------------------------------------- */
html {
html {
font-size: 100%;
font-size: 100%;
font-size: 10px;
font-size: 10px;
}
}
body {
body {
position: relative;
position: relative;
height: auto;
height: auto;
min-height: 100%;
min-height: 100%;
복사
복사됨
복사
복사됨
font-size: 1.
3em
;
font-size: 1.
456em
;
font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
복사
복사됨
복사
복사됨
font-weight: 300;
line-height: 1.6;
}
}
복사
복사됨
복사
복사됨
@media (
max
-width: 76
8
px) {
@media (
min
-width: 76
9
px) {
body {
body {
복사
복사됨
복사
복사됨
font-size: 1.
4em
;
font-size: 1.
618em
;
}
}
}
}
복사
복사됨
복사
복사됨
/* -- Gestion de la taille du site -- */
/* -- Gestion de la taille du site -- */
/* ---------------------------------- */
/* ---------------------------------- */
복사
복사됨
복사
복사됨
#header,
#header,
#global,
#global,
#footer {
#footer {
width: 100%;
width: 100%;
복사
복사됨
복사
복사됨
padding: 0.809em;
}
}
복사
복사됨
복사
복사됨
@media (min-width: 76
8
px)
{
@media (min-width: 76
9
px)
{
#header
,
#header
{
padding: 1.618em 0;
}
#top-header,
#sub-header
,
#global,
#global,
#footer {
#footer {
복사
복사됨
복사
복사됨
max-
width:
1024px
;
margin: auto;
padding: 1.618em 0;
}
#top-header,
#sub-header,
#global,
#footer {
width:
768px
;
}
}
}
}
복사
복사됨
복사
복사됨
/* -- Gestion des couleurs principales -- */
@media (min-width: 1025px) { #top-header, #sub-header, #global, #footer { width: 1024px; } }
/* -------------------------------------- */
@media (min-width: 1367px) { #top-header, #sub-header, #global, #footer { width: 1280px; } }
/*
Blue => #021B34; #1E5083; #366493; #517BA6; #81A4C8;
Green => #003524; #168561; #2F9674; #4BAA8B; #7CCAB0;
red => #490011; #B81F43; #CF4162; #EA6886; #F294AA;
Orange => #511B00; #C95A21; #E27B47; #FFA172; #FFBF9C;
Yellow => #513000; #C98621; #E2A447; #FFC672; #FFD79C;
Purple => #080437; #2E278B; #47409D; #645CB1; #8F8ACF;
*/
body { background-color: #F1F1F1; }
#header, #global { background-color: #FAFAFA; }
#sub-header { background-color: #366493; }
#footer { background-color: #81A4C8; }
#top-header, #global { border-color: #E1E1E1; }
#footer { border-color: #366493; }
.footer-infos { border-color: #366493; }
복사
복사됨
복사
복사됨
body { color: #021B34; }
#site-name { color: #366493; }
#site-slogan { color: #81A4C8; }
#sub-header,
#sub-header a { color: #FFFFFF; }
.footer-infos span { color: #366493; }
.footer-infos span a { color: #021B34; }
/* -- En-tete de page - Header -- */
/* -- En-tete de page - Header -- */
/* ------------------------------ */
/* ------------------------------ */
복사
복사됨
복사
복사됨
#header {
#header {
margin: auto;
}
/* --- Partie superieure du header --- */
#top-header {
position: relative;
position: relative;
복사
복사됨
복사
복사됨
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
-ms-flex-direction: row;
-webkit-flex-direction: row;
margin: auto;
min-height: 139px;
border-width: 0 1px 0 1px;
border-style: solid;
}
#top-header-content {
flex: 1 1 auto;
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
}
@media (max-width: 768px) {
#top-header {
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
}
#top-header-content {
align-self: flex-end;
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
}
}
}
/* --- Partie inferieur du header --- */
/* --- Partie inferieur du header --- */
복사
복사됨
복사
복사됨
#sub-header {
min-height: 35px;
}
#sub-header-content{
margin: auto;
}
/* --- Logo et Nom du site web --- */
#site-infos {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
margin: 1.5em 0 0 1.5em;
max-width: 940px;
flex: 1 1 auto;
}
#site-logo {
#site-logo {
복사
복사됨
복사
복사됨
margin: 0 1em 0 0;
width: 60px;
width: 60px;
height: 60px;
height: 60px;
background-image: url(images/logo.png);
background-image: url(images/logo.png);
background-position: center;
background-position: center;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: cover;
background-size: cover;
복사
복사됨
복사
복사됨
flex: 0 0 auto;
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
}
}
#site-name-container {
#site-name-container {
복사
복사됨
복사
복사됨
margin: 0.
4
em 0 0 0
;
margin: 0.
2
em 0 0 0
.809em
;
}
}
#site-name {
#site-name {
복사
복사됨
복사
복사됨
font-size:
3em
;
font-size:
1.618em
;
font-weight:
bold;
display: block;
line-height: 1em;
font-weight:
400
;
letter-spacing: 0.02em
;
text-decoration: none;
text-decoration: none;
}
}
#site-slogan {
#site-slogan {
display: block;
display: block;
복사
복사됨
복사
복사됨
padding: 0.
1em
0 0 0.1
em;
padding: 0.
3236em
0 0 0.1
618
em;
font-size:
1
em;
font-size:
0.8
em;
letter-spacing: 0.1em;
letter-spacing: 0.1em;
}
}
@media (min-width: 769px) {
@media (min-width: 769px) {
#site-logo {
#site-logo {
width: 90px;
width: 90px;
height: 90px;
height: 90px;
}
}
#site-name-container {
#site-name-container {
복사
복사됨
복사
복사됨
margin:
1em
0 0 0
;
margin:
0 0 0
1.618em
;
}
}
#site-name {
#site-name {
복사
복사됨
복사
복사됨
font-size:
4
em;
font-size:
3.236em;
line-height: 1.2
em;
}
}
복사
복사됨
복사
복사됨
#site-slogan {
font-size: 1em;
padding: 0.1em 0 0 0.1618em;
}
}
}
복사
복사됨
복사
복사됨
/* -- Conteneur global du site -- */
/* -- Conteneur global du site -- */
/* ------------------------------ */
/* ------------------------------ */
복사
복사됨
복사
복사됨
#global {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
margin: 0 auto 0 auto;
padding: 0;
border-width: 0 1px 0 1px;
border-style: solid;
}
#main {
#main {
복사
복사됨
복사
복사됨
padding: 0 0 10px 0;
width: 100%;
max-
width: 100%;
order : 1;
-ms-flex-order: 1;
-webkit-flex-order: 1;
}
}
#menu-left,
#menu-left,
#menu-right {
#menu-right {
width: 100%;
width: 100%;
}
}
복사
복사됨
복사
복사됨
#menu-left {
order : 2;
-ms-flex-order: 2;
-webkit-flex-order: 2;
}
#menu-right {
order : 3;
-ms-flex-order: 3;
-webkit-flex-order: 3;
}
@media (min-width: 769px) {
@media (min-width: 769px) {
복사
복사됨
복사
복사됨
#global {
#menu-left { margin-right: 1.618em; }
min-height: 100vh;
#menu-right { margin-left: 1.618em; }
flex-direction: row;
-ms-flex-direction: row;
-webkit-flex-direction: row;
}
#main {
padding: 0 10px;
order : 2;
-ms-flex-order: 2;
-webkit-flex-order: 2;
flex: 1 0 auto;
-ms-flex: 1 0 100%;
}
#menu-left,
#menu-left,
#menu-right {
#menu-right {
복사
복사됨
복사
복사됨
width:
200px
;
width:
calc(100% / 13 * 3.5)
;
}
}
복사
복사됨
복사
복사됨
#menu-left
{
#menu-left
.narrow-menu-left
{
margin-right: 0.809em; }
order : 1;
#menu-right.narrow-menu-right { margin-left: 0.809em; }
-ms-flex-order: 1;
-webkit-flex-order: 1
;
#menu-left.narrow-menu-left,
#menu-right.narrow-menu-right {
width: calc(100% / 13 * 2.5)
;
}
}
복사
복사됨
복사
복사됨
#menu-right {
order : 3;
#main {
-ms-flex-order: 3;
padding: 0 0 1.618em
;
-webkit-flex-order: 3
;
}
}
복사
복사됨
복사
복사됨
#main.main-with-left,
#main.main-with-left,
#main.main-with-right {
#main.main-with-right {
복사
복사됨
복사
복사됨
width: calc(100% -
200px);
width: calc(100% -
((100% / 13 * 5)));
-ms-flex: 1 0 auto; /*Tricks IE*/
}
}
복사
복사됨
복사
복사됨
#main.main-with-left.main-with-right {
#main.main-with-left.main-with-right {
복사
복사됨
복사
복사됨
width: calc(100% -
400px);
width: calc(100% -
((100% / 13 * 8)));
-ms-flex: 1 0 auto; /*Tricks IE*/
}
}
}
}
#top-footer {
#top-footer {
복사
복사됨
복사
복사됨
padding: 0.
5em 0;
padding: 0.
809em;
}
/* -- Contenu de la page -- */
/* ------------------------ */
/* --- Contenu central --- */
#main-content {
padding: 1.5em 0.8em;
}
}
.block-container {
.block-container {
복사
복사됨
복사
복사됨
margin-top:
15px
;
margin-top:
1em
;
}
}
/* --- Emplacement au dessus et en dessous du contenu de la page --- */
/* --- Emplacement au dessus et en dessous du contenu de la page --- */
#top-content {
#top-content {
복사
복사됨
복사
복사됨
margin: 0 0
2% 0;
margin: 0 0
1.618
em 0
;
padding: 0.1
em 0
.8em
;
}
}
/* --- Emplacement au dessus du pied de page --- */
/* --- Emplacement au dessus du pied de page --- */
#bottom-content {
#bottom-content {
복사
복사됨
복사
복사됨
margin:
2% 0
0 0;
margin:
1.618em
0 0;
padding: 0.1em 0.8em;
}
}
/* -- Pied de page - Footer -- */
/* -- Pied de page - Footer -- */
/* --------------------------- */
/* --------------------------- */
#footer {
#footer {
복사
복사됨
복사
복사됨
margin: auto;
clear: both;
clear: both;
border-width: 4px 0 0 0;
border-width: 4px 0 0 0;
border-style: solid;
border-style: solid;
복사
복사됨
복사
복사됨
border-color: transparent;
}
}
.footer-content {
.footer-content {
margin: 0 auto 0 auto;
margin: 0 auto 0 auto;
복사
복사됨
복사
복사됨
padding:
1.5em 0
;
padding:
0.809em
;
}
}
.footer-infos {
.footer-infos {
margin: auto;
margin: auto;
복사
복사됨
복사
복사됨
padding
-top: 10px
;
padding
: 0.809em
;
min-height: 40px;
min-height: 40px;
border-width: 1px 0 0 0;
border-width: 1px 0 0 0;
border-style: solid;
border-style: solid;
복사
복사됨
복사
복사됨
border-color: transparent;
text-align: center;
text-align: center;
}
}
복사
복사됨
복사
복사됨
Text moved with changes to lines 310-315 (82.4% similarity)
@media (min-width: 769px) {
.footer-infos {
width: 400px;
}
}
.footer-infos span {
.footer-infos span {
font-size: 0.8em;
font-size: 0.8em;
복사
복사됨
복사
복사됨
display: block;
}
}
복사
복사됨
복사
복사됨
@media (max-width: 768px) {
.footer-infos span
.footer-infos-separator
{
.footer-infos span
{
display:
none;
display:
block
}
}
복사
복사됨
복사
복사됨
@media (min-width: 769px) {
.footer-infos span,
.footer-infos span.footer-infos-separator {
.footer-infos span.footer-infos-separator {
복사
복사됨
복사
복사됨
display:
none
;
display:
inline-block
;
}
}
.footer-infos {
.footer-infos {
복사
복사됨
복사
복사됨
padding:
10px
;
padding:
0.618em 0 0
;
}
}
}
}
/* -- Elements specifiques PHPboost -- */
/* -- Elements specifiques PHPboost -- */
/* ----------------------------------- */
/* ----------------------------------- */
/* --- Compteur de visites --- */
/* --- Compteur de visites --- */
#visit-counter {
#visit-counter {
position: absolute;
position: absolute;
복사
복사됨
복사
복사됨
right:
0;
right:
1.618em
;
bottom : 1em
;
top : 92.5%
;
margin-right: 10px
;
font-size: 0.9em;
font-size: 0.9em;
text-align: right;
text-align: right;
}
}
/* --- Barre de lien rapide --- */
/* --- Barre de lien rapide --- */
#breadcrumb {
#breadcrumb {
복사
복사됨
복사
복사됨
margin
: 0
0 20px 10px
;
padding
: 0
.618em
;
text-indent: 10px
;
font-size: 0.809em
;
}
}
#breadcrumb ol {
#breadcrumb ol {
margin: 0;
margin: 0;
list-style: none;
list-style: none;
}
}
#breadcrumb li {
#breadcrumb li {
display: inline;
display: inline;
}
}
#breadcrumb li:not(.current):after {
#breadcrumb li:not(.current):after {
content: '/';
content: '/';
복사
복사됨
복사
복사됨
color: #616161;
}
}
/* --- Scroll to Top --- */
/* --- Scroll to Top --- */
.scroll-to {
.scroll-to {
position: fixed;
position: fixed;
z-index: 10;
z-index: 10;
display: none;
display: none;
복사
복사됨
복사
복사됨
background-color: rgba(15, 15, 16, 0.8)
;
cursor: pointer
;
}
}
#scroll-to-top {
#scroll-to-top {
복사
복사됨
복사
복사됨
right:
25px
;
right:
0
;
bottom: 0
;
bottom: 0
.618em
;
padding:
2px 11px 3px 10px;
padding:
0.618em
0.
809em
;
transition:
0.
2s
;
}
}
복사
복사됨
복사
복사됨
#scroll-to-top,
.scroll-to i {
.scroll-to i {
복사
복사됨
복사
복사됨
color: rgba(255, 255, 255, 0.8);
transition: 0.2s;
transition: 0.2s;
}
}
복사
복사됨
복사
복사됨
#scroll-to-top:hover,
.scroll-to:hover i {
.scroll-to:hover i {
복사
복사됨
복사
복사됨
color: rgba(255, 255, 255, 1);
transition: 0.3s;
transition: 0.3s;
}
}
@media (min-width: 769px) {
@media (min-width: 769px) {
#scroll-to-top {
#scroll-to-top {
복사
복사됨
복사
복사됨
bottom: 25px;
right: 0.618em
;
padding: 9px 11px 11px 10px
;
}
}
.scroll-to i {
.scroll-to i {
복사
복사됨
복사
복사됨
font-size:
2em;
font-size:
1.618em;
}
}
@media (max-width: 768px) {
#scroll-to-top:hover {
padding: 9px 11px 11px 10px;
transition: 0.3s;
}
}
}
}
복사
복사됨
복사
복사됨
/* --
Cookie Bar
-- */
/* --
-
Cookie Bar
--- */
/* ----------------
--- */
.cookiebar-container {
.cookiebar-container {
z-index: 100;
z-index: 100;
left: 0;
left: 0;
right: 0;
right: 0;
top: 0;
top: 0;
복사
복사됨
복사
복사됨
padding:
7px 20px;
padding:
0.456em 1.309em
;
background-color: #F2F2F2;
font-size: 0.
80
9em;
border-bottom: 1px solid #E2E2E2
;
font-size: 0.
9em;
text-align: center;
text-align: center;
}
}
복사
복사됨
복사
복사됨
@media (max-width: 768px) {
.cookiebar-container {
position: fixed;
top: auto;
bottom: 0;
padding: 1.309em 1.309em 0.456em 1.309em;
margin: 1em 0.456em;
Text moved with changes from lines 320-325 (82.4% similarity)
border-style: solid;
border-width: 1px;
font-size: 1em;
}
}
.cookiebar-container.fixed {
.cookiebar-container.fixed {
position: fixed;
position: fixed;
}
}
.cookiebar-content {
.cookiebar-content {
text-align: justify;
text-align: justify;
}
}
@media (min-width: 769px) {
@media (min-width: 769px) {
.cookiebar-content {
.cookiebar-content {
display: inline-block;
display: inline-block;
복사
복사됨
복사
복사됨
max-width: calc(100% -
250px
);
max-width: calc(100% -
400px
);
vertical-align:
middle
;
vertical-align:
top
;
}
}
.cookiebar-actions {
.cookiebar-actions {
display: inline-block;
display: inline-block;
복사
복사됨
복사
복사됨
width:
250px
;
width:
400px
;
}
}
}
}
@media (max-width: 768px) {
@media (max-width: 768px) {
.cookiebar-content {
.cookiebar-content {
복사
복사됨
복사
복사됨
margin-bottom:
5px
;
margin-bottom:
0.309em
;
}
}
.cookiebar-actions {
.cookiebar-actions {
복사
복사됨
복사
복사됨
margin:
15px
0
5px
0;
margin:
1em
0
0.309em
0;
}
}
}
}
.cookiebar-button {
.cookiebar-button {
복사
복사됨
복사
복사됨
margin: 0
5px 0 5px;
margin: 0
0.309em
;
border-radius: 4px;
color: #FEFEFE
;
}
}
@media (max-width: 768px) {
@media (max-width: 768px) {
.cookiebar-button {
.cookiebar-button {
복사
복사됨
복사
복사됨
margin: 0
10px 0 10px
;
margin: 0
0.618em
;
}
}
}
}
복사
복사됨
복사
복사됨
.cookiebar-button-understand { background-color: #337AB7; border-color: #2E6DA4; }
.cookiebar-button-understand:hover { background-color: #2E6DA4; }
.cookiebar-button-allowed { background-color: #5CB85C; border-color: #4CAE4C; }
.cookiebar-button-allowed:hover { background-color: #4CAE4C; }
.cookiebar-button-declined { background-color: #E84E40; border-color: #CE271A; }
.cookiebar-button-declined:hover { background-color: #CE271A; }
@media (max-width: 468px) {
@media (max-width: 468px) {
.cookiebar-more {
.cookiebar-more {
display: block;
display: block;
복사
복사됨
복사
복사됨
margin:
10px
0
5px
0;
margin:
0.618em
0
0.309em
0;
}
}
}
}
.aboutcookie-title {
.aboutcookie-title {
font-size: 1.3em;
font-size: 1.3em;
line-height: 1.3em;
line-height: 1.3em;
font-weight: bold
font-weight: bold
}
}
.aboutcookie-title + p {
.aboutcookie-title + p {
복사
복사됨
복사
복사됨
margin:
0px
0
20px 0px
;
margin:
0
0
1.309 0
;
}
}
#cookiebar-change-choice {
#cookiebar-change-choice {
복사
복사됨
복사
복사됨
margin-top:
10px
;
margin-top:
0.618em
;
text-align: center;
text-align: center;
}
}
.cookiebar-change-choice-link {
.cookiebar-change-choice-link {
text-align: center;
text-align: center;
}
}
복사
복사됨
복사
복사됨
/* --- Search engines --- */
.robot {
font-size: 0.9em;
font-weight: bold;
}
저장된 비교 결과
원본
파일 열기
/*-------------------------------------- design.css Contient les conteneurs de mise en page. Le design.css permet de mettre en forme votre site web avec le design de votre choix --------------------------------------*/ /* -- Elements HTML generiques specifique au theme -- */ /* -------------------------------------------------- */ html { font-size: 100%; font-size: 10px; } body { position: relative; height: auto; min-height: 100%; font-size: 1.3em; font-family: 'Open Sans', sans-serif; } @media (max-width: 768px) { body { font-size: 1.4em; } } /* -- Gestion de la taille du site -- */ /* ---------------------------------- */ #header, #global, #footer { width: 100%; } @media (min-width: 768px) { #header, #global, #footer { max-width: 1024px; } } /* -- Gestion des couleurs principales -- */ /* -------------------------------------- */ /* Blue => #021B34; #1E5083; #366493; #517BA6; #81A4C8; Green => #003524; #168561; #2F9674; #4BAA8B; #7CCAB0; red => #490011; #B81F43; #CF4162; #EA6886; #F294AA; Orange => #511B00; #C95A21; #E27B47; #FFA172; #FFBF9C; Yellow => #513000; #C98621; #E2A447; #FFC672; #FFD79C; Purple => #080437; #2E278B; #47409D; #645CB1; #8F8ACF; */ body { background-color: #F1F1F1; } #header, #global { background-color: #FAFAFA; } #sub-header { background-color: #366493; } #footer { background-color: #81A4C8; } #top-header, #global { border-color: #E1E1E1; } #footer { border-color: #366493; } .footer-infos { border-color: #366493; } body { color: #021B34; } #site-name { color: #366493; } #site-slogan { color: #81A4C8; } #sub-header, #sub-header a { color: #FFFFFF; } .footer-infos span { color: #366493; } .footer-infos span a { color: #021B34; } /* -- En-tete de page - Header -- */ /* ------------------------------ */ #header { margin: auto; } /* --- Partie superieure du header --- */ #top-header { position: relative; display: flex; display: -ms-flexbox; display: -webkit-flex; flex-direction: row; -ms-flex-direction: row; -webkit-flex-direction: row; margin: auto; min-height: 139px; border-width: 0 1px 0 1px; border-style: solid; } #top-header-content { flex: 1 1 auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; } @media (max-width: 768px) { #top-header { flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; } #top-header-content { align-self: flex-end; -ms-align-self: flex-end; -webkit-align-self: flex-end; } } /* --- Partie inferieur du header --- */ #sub-header { min-height: 35px; } #sub-header-content{ margin: auto; } /* --- Logo et Nom du site web --- */ #site-infos { display: flex; display: -ms-flexbox; display: -webkit-flex; margin: 1.5em 0 0 1.5em; max-width: 940px; flex: 1 1 auto; } #site-logo { margin: 0 1em 0 0; width: 60px; height: 60px; background-image: url(images/logo.png); background-position: center; background-repeat: no-repeat; background-size: cover; flex: 0 0 auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; } #site-name-container { margin: 0.4em 0 0 0; } #site-name { font-size: 3em; font-weight: bold; line-height: 1em; letter-spacing: 0.02em; text-decoration: none; } #site-slogan { display: block; padding: 0.1em 0 0 0.1em; font-size: 1em; letter-spacing: 0.1em; } @media (min-width: 769px) { #site-logo { width: 90px; height: 90px; } #site-name-container { margin: 1em 0 0 0; } #site-name { font-size: 4em; } } /* -- Conteneur global du site -- */ /* ------------------------------ */ #global { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; margin: 0 auto 0 auto; padding: 0; border-width: 0 1px 0 1px; border-style: solid; } #main { padding: 0 0 10px 0; max-width: 100%; order : 1; -ms-flex-order: 1; -webkit-flex-order: 1; } #menu-left, #menu-right { width: 100%; } #menu-left { order : 2; -ms-flex-order: 2; -webkit-flex-order: 2; } #menu-right { order : 3; -ms-flex-order: 3; -webkit-flex-order: 3; } @media (min-width: 769px) { #global { min-height: 100vh; flex-direction: row; -ms-flex-direction: row; -webkit-flex-direction: row; } #main { padding: 0 10px; order : 2; -ms-flex-order: 2; -webkit-flex-order: 2; flex: 1 0 auto; -ms-flex: 1 0 100%; } #menu-left, #menu-right { width: 200px; } #menu-left { order : 1; -ms-flex-order: 1; -webkit-flex-order: 1; } #menu-right { order : 3; -ms-flex-order: 3; -webkit-flex-order: 3; } #main.main-with-left, #main.main-with-right { width: calc(100% - 200px); -ms-flex: 1 0 auto; /*Tricks IE*/ } #main.main-with-left.main-with-right { width: calc(100% - 400px); -ms-flex: 1 0 auto; /*Tricks IE*/ } } #top-footer { padding: 0.5em 0; } /* -- Contenu de la page -- */ /* ------------------------ */ /* --- Contenu central --- */ #main-content { padding: 1.5em 0.8em; } .block-container { margin-top: 15px; } /* --- Emplacement au dessus et en dessous du contenu de la page --- */ #top-content { margin: 0 0 2% 0; padding: 0.1em 0.8em; } /* --- Emplacement au dessus du pied de page --- */ #bottom-content { margin: 2% 0 0 0; padding: 0.1em 0.8em; } /* -- Pied de page - Footer -- */ /* --------------------------- */ #footer { margin: auto; clear: both; border-width: 4px 0 0 0; border-style: solid; } .footer-content { margin: 0 auto 0 auto; padding: 1.5em 0; } .footer-infos { margin: auto; padding-top: 10px; min-height: 40px; border-width: 1px 0 0 0; border-style: solid; text-align: center; } @media (min-width: 769px) { .footer-infos { width: 400px; } } .footer-infos span { font-size: 0.8em; } @media (max-width: 768px) { .footer-infos span { display: block } .footer-infos span.footer-infos-separator { display: none; } .footer-infos { padding: 10px; } } /* -- Elements specifiques PHPboost -- */ /* ----------------------------------- */ /* --- Compteur de visites --- */ #visit-counter { position: absolute; right: 0; bottom : 1em; margin-right: 10px; font-size: 0.9em; text-align: right; } /* --- Barre de lien rapide --- */ #breadcrumb { margin: 0 0 20px 10px; text-indent: 10px; } #breadcrumb ol { margin: 0; list-style: none; } #breadcrumb li { display: inline; } #breadcrumb li:not(.current):after { content: '/'; color: #616161; } /* --- Scroll to Top --- */ .scroll-to { position: fixed; z-index: 10; display: none; background-color: rgba(15, 15, 16, 0.8); } #scroll-to-top { right: 25px; bottom: 0; padding: 2px 11px 3px 10px; transition: 0.2s; } .scroll-to i { color: rgba(255, 255, 255, 0.8); transition: 0.2s; } .scroll-to:hover i { color: rgba(255, 255, 255, 1); transition: 0.3s; } @media (min-width: 769px) { #scroll-to-top { bottom: 25px; padding: 9px 11px 11px 10px; } .scroll-to i { font-size: 2em; } } @media (max-width: 768px) { #scroll-to-top:hover { padding: 9px 11px 11px 10px; transition: 0.3s; } } /* -- Cookie Bar -- */ /* ------------------- */ .cookiebar-container { z-index: 100; left: 0; right: 0; top: 0; padding: 7px 20px; background-color: #F2F2F2; border-bottom: 1px solid #E2E2E2; font-size: 0.9em; text-align: center; } .cookiebar-container.fixed { position: fixed; } .cookiebar-content { text-align: justify; } @media (min-width: 769px) { .cookiebar-content { display: inline-block; max-width: calc(100% - 250px); vertical-align: middle; } .cookiebar-actions { display: inline-block; width: 250px; } } @media (max-width: 768px) { .cookiebar-content { margin-bottom: 5px; } .cookiebar-actions { margin: 15px 0 5px 0; } } .cookiebar-button { margin: 0 5px 0 5px; border-radius: 4px; color: #FEFEFE; } @media (max-width: 768px) { .cookiebar-button { margin: 0 10px 0 10px; } } .cookiebar-button-understand { background-color: #337AB7; border-color: #2E6DA4; } .cookiebar-button-understand:hover { background-color: #2E6DA4; } .cookiebar-button-allowed { background-color: #5CB85C; border-color: #4CAE4C; } .cookiebar-button-allowed:hover { background-color: #4CAE4C; } .cookiebar-button-declined { background-color: #E84E40; border-color: #CE271A; } .cookiebar-button-declined:hover { background-color: #CE271A; } @media (max-width: 468px) { .cookiebar-more { display: block; margin: 10px 0 5px 0; } } .aboutcookie-title { font-size: 1.3em; line-height: 1.3em; font-weight: bold } .aboutcookie-title + p { margin: 0px 0 20px 0px; } #cookiebar-change-choice { margin-top: 10px; text-align: center; } .cookiebar-change-choice-link { text-align: center; }
수정본
파일 열기
/* -------------------------------------- design.css Contient les conteneurs de mise en page. Le design.css permet de mettre en forme votre site web avec le design de votre choix -------------------------------------- */ /* -- Elements HTML generiques specifique au theme -- */ /* -------------------------------------------------- */ html { font-size: 100%; font-size: 10px; } body { position: relative; height: auto; min-height: 100%; font-size: 1.456em; font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 1.6; } @media (min-width: 769px) { body { font-size: 1.618em; } } /* -- Gestion de la taille du site -- */ /* ---------------------------------- */ #header, #global, #footer { width: 100%; padding: 0.809em; } @media (min-width: 769px) { #header { padding: 1.618em 0; } #top-header, #sub-header, #global, #footer { margin: auto; padding: 1.618em 0; } #top-header, #sub-header, #global, #footer { width: 768px; } } @media (min-width: 1025px) { #top-header, #sub-header, #global, #footer { width: 1024px; } } @media (min-width: 1367px) { #top-header, #sub-header, #global, #footer { width: 1280px; } } /* -- En-tete de page - Header -- */ /* ------------------------------ */ #header { position: relative; } /* --- Partie inferieur du header --- */ #site-logo { width: 60px; height: 60px; background-image: url(images/logo.png); background-position: center; background-repeat: no-repeat; background-size: cover; } #site-name-container { margin: 0.2em 0 0 0.809em; } #site-name { font-size: 1.618em; display: block; font-weight: 400; text-decoration: none; } #site-slogan { display: block; padding: 0.3236em 0 0 0.1618em; font-size: 0.8em; letter-spacing: 0.1em; } @media (min-width: 769px) { #site-logo { width: 90px; height: 90px; } #site-name-container { margin: 0 0 0 1.618em; } #site-name { font-size: 3.236em; line-height: 1.2em; } #site-slogan { font-size: 1em; padding: 0.1em 0 0 0.1618em; } } /* -- Conteneur global du site -- */ /* ------------------------------ */ #main { width: 100%; } #menu-left, #menu-right { width: 100%; } @media (min-width: 769px) { #menu-left { margin-right: 1.618em; } #menu-right { margin-left: 1.618em; } #menu-left, #menu-right { width: calc(100% / 13 * 3.5); } #menu-left.narrow-menu-left { margin-right: 0.809em; } #menu-right.narrow-menu-right { margin-left: 0.809em; } #menu-left.narrow-menu-left, #menu-right.narrow-menu-right { width: calc(100% / 13 * 2.5); } #main { padding: 0 0 1.618em; } #main.main-with-left, #main.main-with-right { width: calc(100% - ((100% / 13 * 5))); } #main.main-with-left.main-with-right { width: calc(100% - ((100% / 13 * 8))); } } #top-footer { padding: 0.809em; } .block-container { margin-top: 1em; } /* --- Emplacement au dessus et en dessous du contenu de la page --- */ #top-content { margin: 0 0 1.618em 0; } /* --- Emplacement au dessus du pied de page --- */ #bottom-content { margin: 1.618em 0 0; } /* -- Pied de page - Footer -- */ /* --------------------------- */ #footer { clear: both; border-width: 4px 0 0 0; border-style: solid; border-color: transparent; } .footer-content { margin: 0 auto 0 auto; padding: 0.809em; } .footer-infos { margin: auto; padding: 0.809em; min-height: 40px; border-width: 1px 0 0 0; border-style: solid; border-color: transparent; text-align: center; } .footer-infos span { font-size: 0.8em; display: block; } .footer-infos span.footer-infos-separator { display: none; } @media (min-width: 769px) { .footer-infos span, .footer-infos span.footer-infos-separator { display: inline-block; } .footer-infos { padding: 0.618em 0 0; } } /* -- Elements specifiques PHPboost -- */ /* ----------------------------------- */ /* --- Compteur de visites --- */ #visit-counter { position: absolute; right: 1.618em; top : 92.5%; font-size: 0.9em; text-align: right; } /* --- Barre de lien rapide --- */ #breadcrumb { padding: 0.618em; font-size: 0.809em; } #breadcrumb ol { margin: 0; list-style: none; } #breadcrumb li { display: inline; } #breadcrumb li:not(.current):after { content: '/'; } /* --- Scroll to Top --- */ .scroll-to { position: fixed; z-index: 10; display: none; cursor: pointer; } #scroll-to-top { right: 0; bottom: 0.618em; padding: 0.618em 0.809em; } #scroll-to-top, .scroll-to i { transition: 0.2s; } #scroll-to-top:hover, .scroll-to:hover i { transition: 0.3s; } @media (min-width: 769px) { #scroll-to-top { right: 0.618em; } .scroll-to i { font-size: 1.618em; } } /* --- Cookie Bar --- */ .cookiebar-container { z-index: 100; left: 0; right: 0; top: 0; padding: 0.456em 1.309em; font-size: 0.809em; text-align: center; } @media (max-width: 768px) { .cookiebar-container { position: fixed; top: auto; bottom: 0; padding: 1.309em 1.309em 0.456em 1.309em; margin: 1em 0.456em; border-style: solid; border-width: 1px; font-size: 1em; } } .cookiebar-container.fixed { position: fixed; } .cookiebar-content { text-align: justify; } @media (min-width: 769px) { .cookiebar-content { display: inline-block; max-width: calc(100% - 400px); vertical-align: top; } .cookiebar-actions { display: inline-block; width: 400px; } } @media (max-width: 768px) { .cookiebar-content { margin-bottom: 0.309em; } .cookiebar-actions { margin: 1em 0 0.309em 0; } } .cookiebar-button { margin: 0 0.309em; } @media (max-width: 768px) { .cookiebar-button { margin: 0 0.618em; } } @media (max-width: 468px) { .cookiebar-more { display: block; margin: 0.618em 0 0.309em 0; } } .aboutcookie-title { font-size: 1.3em; line-height: 1.3em; font-weight: bold } .aboutcookie-title + p { margin: 0 0 1.309 0; } #cookiebar-change-choice { margin-top: 0.618em; text-align: center; } .cookiebar-change-choice-link { text-align: center; } /* --- Search engines --- */ .robot { font-size: 0.9em; font-weight: bold; }
비교하기