diff options
author | LUXEY Adrien <adrien.luxey@inria.fr> | 2021-01-11 12:00:52 +0100 |
---|---|---|
committer | LUXEY Adrien <adrien.luxey@inria.fr> | 2021-01-11 12:00:52 +0100 |
commit | 9493746d138cdc06802c135eaa0653d325280947 (patch) | |
tree | a9d7c251f78f8dbe4e60919ba7e5dadb85747f04 /src/css | |
parent | 91abf5a20c1cbb995efe18a4cbe16c565297d26e (diff) | |
download | site-9493746d138cdc06802c135eaa0653d325280947.tar.gz site-9493746d138cdc06802c135eaa0653d325280947.zip |
ajout message sur la frontpage, et desole, j'ai un linter qui a tout reformate le CSS...
Diffstat (limited to 'src/css')
-rw-r--r-- | src/css/main.css | 195 |
1 files changed, 149 insertions, 46 deletions
diff --git a/src/css/main.css b/src/css/main.css index 481471b..342901a 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -13,12 +13,15 @@ * { font-family: Heroes; - font-size: 1em; /* We use browser's default */ + font-size: 1em; + /* We use browser's default */ margin: 0; padding: 0; } -html { height: 100% } +html { + height: 100% +} body { display: flex; @@ -30,53 +33,82 @@ body { /* * RESPONSIVE */ -.mobile_block, .mobile_inline { display: none } +.mobile_block, +.mobile_inline { + display: none +} @media screen and (max-width: 800px) { - body { flex-direction: column } - .computer_block { display: none } - .mobile_block { display: block } - .mobile_inline { display: inline } -} + body { + flex-direction: column + } + + .computer_block { + display: none + } + + .mobile_block { + display: block + } + + .mobile_inline { + display: inline + } +} /* * CORE TEMPLATE */ /* Header + Menu */ -body > aside > header { +body>aside>header { color: white; - background: rgb(12,144,110); + background: rgb(12, 144, 110); background: linear-gradient(0deg, rgb(21, 65, 73) 0%, rgb(55, 141, 100) 50%, rgb(12, 144, 110) 100%); padding: 1.5rem; margin: 0.8rem; border-radius: 0.5rem; - box-shadow: 0px 0px 30px rgba(31,38,103,0.2); + box-shadow: 0px 0px 30px rgba(31, 38, 103, 0.2); } -body > aside > header > a > svg { - fill: white; +body>aside>header>a>svg { + fill: white; display: inline; vertical-align: sub; margin-right: 1em; } -body > aside > header > h1 { display: inline } -body > aside > header a { +body>aside>header>h1 { + display: inline +} + +body>aside>header a { color: white; text-decoration: none; } -body > aside > header > nav ul { +body>aside>header>nav ul { list-style-type: none; padding-left: 1em; } -body > aside > header > nav > ul { padding-left: 0px } -body > aside > header > nav a:hover { text-decoration: underline } -body > aside > header > nav .selected { font-weight: bold } -body > aside > header > nav .selected::before { content: "» " } -body > main { +body>aside>header>nav>ul { + padding-left: 0px +} + +body>aside>header>nav a:hover { + text-decoration: underline +} + +body>aside>header>nav .selected { + font-weight: bold +} + +body>aside>header>nav .selected::before { + content: "» " +} + +body>main { padding: 1.5rem; max-width: 1200px; } @@ -86,46 +118,99 @@ body > main { * TEXT CORE (think markdown) */ -h1 { font-size: 2.5rem } -h2 { font-size: 2.0rem } -h3 { font-size: 1.75rem } -h4 { font-size: 1.50rem } -h5 { font-size: 1.25rem } -h6 { font-size: 1.10rem } -h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem } -section, p, ul, ol, table, pre { margin-bottom: 1rem } -ul, ol { padding-left: 1.5em } -a { color: rgb(12,144,110)} -table { border-collapse: collapse } -th { background-color: #fafafa } -td, th { +h1 { + font-size: 2.5rem +} + +h2 { + font-size: 2.0rem +} + +h3 { + font-size: 1.75rem +} + +h4 { + font-size: 1.50rem +} + +h5 { + font-size: 1.25rem +} + +h6 { + font-size: 1.10rem +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 1rem +} + +section, +p, +ul, +ol, +table, +pre { + margin-bottom: 1rem +} + +ul, +ol { + padding-left: 1.5em +} + +a { + color: rgb(12, 144, 110) +} + +table { + border-collapse: collapse +} + +th { + background-color: #fafafa +} + +td, +th { border: 1px solid #ddd; padding: 0.3rem 0.5rem; } + pre { background-color: #1e1e1e; padding: 1rem; overflow-x: auto; } + code { font-family: Monospace; background-color: #1e1e1e; color: #fff; padding: 0.25rem 0.4rem; } -img { + +img { border-radius: 0.5rem; - box-shadow: 0px 0px 30px rgba(31,38,103,0.2); + box-shadow: 0px 0px 30px rgba(31, 38, 103, 0.2); margin: 0.5rem; } + img.simple { border-radius: 0px; box-shadow: none; margin: 0px; } + strong { - background-color: rgb(12, 144, 110); - color: #fff; + background-color: rgb(12, 144, 110); + color: #fff; padding: 0.20rem 0.4rem; } @@ -134,18 +219,25 @@ strong { */ /* float */ -.left { float: left } -.right { float: right } -section::after, p::after { +.left { + float: left +} + +.right { + float: right +} + +section::after, +p::after { clear: both; display: block; content: ""; } /* center */ -.center { - margin-left: auto; - margin-right: auto; +.center { + margin-left: auto; + margin-right: auto; text-align: center; } @@ -180,7 +272,7 @@ input { border: 1px solid #ddd; border-radius: 0.5rem; width: 250px; - text-align:center; + text-align: center; margin: 1em 1em 0em 0em; display: block; } @@ -190,7 +282,18 @@ input { color: #fff; } +.callout { + font-size: 1.2rem; + text-align: center; + position: relative; + margin: 2rem 0; + padding: 1rem; + border: 1px solid rgba(10, 10, 10, 0.25); + border-radius: .2rem; + background-color: #cbf0e6; +} + .frame { border-left: 1rem solid #ddd; padding-left: 1rem; -} +}
\ No newline at end of file |