aboutsummaryrefslogtreecommitdiff
path: root/src/css
diff options
context:
space:
mode:
authorLUXEY Adrien <adrien.luxey@inria.fr>2021-01-11 12:00:52 +0100
committerLUXEY Adrien <adrien.luxey@inria.fr>2021-01-11 12:00:52 +0100
commit9493746d138cdc06802c135eaa0653d325280947 (patch)
treea9d7c251f78f8dbe4e60919ba7e5dadb85747f04 /src/css
parent91abf5a20c1cbb995efe18a4cbe16c565297d26e (diff)
downloadsite-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.css195
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