From 913652c1ff0bf6dbf372d5e35378d67bb50c8136 Mon Sep 17 00:00:00 2001 From: Mythrann Date: Thu, 4 Feb 2021 19:15:32 +0100 Subject: [PATCH] update css --- Y/Ada-S2/Programmes/exos-preparatoires/css | 0 .../exos-preparatoires/mission2.html | 135 ++ Y/ystyle.css | 1280 +---------------- main.css | 257 ---- 4 files changed, 201 insertions(+), 1471 deletions(-) create mode 100644 Y/Ada-S2/Programmes/exos-preparatoires/css create mode 100644 Y/Ada-S2/Programmes/exos-preparatoires/mission2.html delete mode 100644 main.css diff --git a/Y/Ada-S2/Programmes/exos-preparatoires/css b/Y/Ada-S2/Programmes/exos-preparatoires/css new file mode 100644 index 0000000..e69de29 diff --git a/Y/Ada-S2/Programmes/exos-preparatoires/mission2.html b/Y/Ada-S2/Programmes/exos-preparatoires/mission2.html new file mode 100644 index 0000000..d179533 --- /dev/null +++ b/Y/Ada-S2/Programmes/exos-preparatoires/mission2.html @@ -0,0 +1,135 @@ + + + + + + mission2.adb + + + + + + + +
+ with Gada.Text_IO ; + + procedure Mission2 is + + package Txt renames Gada.Text_IO ; + + type T_Intervalle is record + Inf : Float ; + Sup : Float ; + end record ; + + function Intervalle_Image(A : T_Intervalle) return String is + begin + return "[" & Integer'Image(Integer(A.Inf)) & "," & Integer'Image(Integer(A.Sup)) & "]" ; + end Intervalle_Image ; + + -- A est inclus dans B <=> les bornes de A sont comprises entre les bornes de B. + function Est_Inclus (A : T_Intervalle ; B : T_Intervalle) return Boolean is + begin + return A.Inf >= B.Inf and A.Sup <= B.Sup ; + end Est_Inclus ; + + -- A et B disjoints <=> A est situé avant B ou A est situé après B. + function Disjoints (A : T_Intervalle ; B : T_Intervalle) return Boolean is + begin + return A.Sup < B.Inf or A.Inf > B.Sup ; + end Disjoints ; + + procedure Afficher_Relation (A : T_Intervalle ; B : T_Intervalle) is + begin + if Est_Inclus(A, B) then + Txt.Put_Line(Intervalle_Image(A) & " est inclus dans " & Intervalle_Image(B)) ; + elsif Est_Inclus(B,A) then + Txt.Put_Line(Intervalle_Image(B) & " est inclus dans " & Intervalle_Image(A)) ; + elsif Disjoints(A,B) then + Txt.Put_Line(Intervalle_Image(A) & " et " & Intervalle_Image(B) + & " sont disjoints.") ; + else + Txt.Put_Line(Intervalle_Image(A) & " et " & Intervalle_Image(B) + & " ne sont pas disjoints.") ; + end if ; + end Afficher_Relation ; + + type T_Prod is record + Gauche : T_Intervalle ; + Droite : T_Intervalle ; + end record ; + + function Prod_Image(A : T_Prod) return String is + begin + return Intervalle_Image(A.Gauche) & " x " & Intervalle_Image(A.Droite) ; + end Prod_Image ; + + + -- A1xA2 est inclus dans B1xB2 <=> A1 inclus dans B1 et A2 inclus dans B2 + function Prod_Est_Inclus (A : T_Prod ; B : T_Prod) return Boolean is + begin + return Est_Inclus (A.Gauche, B.Gauche) and Est_Inclus(A.Droite, B.Droite) ; + end Prod_Est_Inclus ; + + -- A1xA2 disjoint de B1xB2 <=> A1 disjoint de B1 ou A2 disjoint de B2 + function Prod_Disjoints (A : T_Prod ; B : T_Prod) return Boolean is + begin + return Disjoints(A.Gauche, B.Gauche) or Disjoints(A.Droite, + B.Droite) ; + end Prod_Disjoints ; + + procedure Prod_Afficher_Relation (A : T_Prod ; B : T_Prod) is + begin + if Prod_Est_Inclus(A, B) then + Txt.Put_Line(Prod_Image(A) & " est inclus dans " & Prod_Image(B)) ; + elsif Prod_Est_Inclus(B,A) then + Txt.Put_Line(Prod_Image(B) & " est inclus dans " & Prod_Image(A)) ; + elsif Prod_Disjoints(A,B) then + Txt.Put_Line(Prod_Image(A) & " et " & Prod_Image(B) & " sont disjoints.") ; + else + Txt.Put_Line(Prod_Image(A) & " et " & Prod_Image(B) & " ne sont pas disjoints.") ; + end if ; + end Prod_Afficher_Relation ; + + C : constant T_Intervalle := (5.0, 10.0) ; + D : constant T_Intervalle := (7.0, 8.0) ; + E : constant T_Intervalle := (4.0, 6.0) ; + + begin + Afficher_Relation(C,D) ; + Afficher_Relation(D,C) ; + Afficher_Relation(C,E) ; + Afficher_Relation(D,E) ; + + Prod_Afficher_Relation((C, C), (D, D)) ; + Prod_Afficher_Relation((C, D), (D, C)) ; + Prod_Afficher_Relation((D, C), (E, C)) ; + end Mission2 ; + +
+ + + + diff --git a/Y/ystyle.css b/Y/ystyle.css index c8ea311..20c28d8 100644 --- a/Y/ystyle.css +++ b/Y/ystyle.css @@ -1,14 +1,18 @@ +/* POLICES */ + @font-face { font-family: 'Poppins'; src: url('https://fontlibrary.org//assets/fonts/poppins/fed70e8826194d3ab847c777f43c10ea/3352653dedd571bbc490c8be132b38cd/PoppinsLight.ttf') format('truetype'); } +/* règles generéales */ * { margin: 0px; padding: 0px; box-sizing: border-box; } +/* styles sur html et body pour faire un fond 'polygon' changeant */ html { background: #051937; overflow-x: hidden; @@ -35,9 +39,9 @@ body:after { background: linear-gradient(120deg, #113e9e, #b30082, #d31835); background-size: 200% 300%; opacity: 0.6; - -webkit-animation: AnimationName 15s ease infinite; - -moz-animation: AnimationName 15s ease infinite; - animation: AnimationName 15s ease infinite; + -webkit-animation: bgMove 15s ease infinite; + -moz-animation: bgMove 15s ease infinite; + animation: bgMove 15s ease infinite; } body:before { @@ -63,6 +67,7 @@ body:before { display: inline; } +/* La taille est au minimum 100%, auxquels on retire la hauteur du footer */ main { min-height: calc(100vh - 420px); margin-bottom: 100px; @@ -79,6 +84,7 @@ main { width: clamp(10px, 94vw, 900px); } +/* couleurs modulo 3 */ .yfold:not(.card):nth-of-type(3n) { background: rgba(250, 100, 100, 0.2); } @@ -101,6 +107,7 @@ main { margin-right: 10px } +/* le fond d'écran d'opacité 0.8 permet d'attraper un peu de la couleur de l'élément parent */ .yfold-content { background: rgba(240, 240, 240, 0.8); position: relative; @@ -115,6 +122,7 @@ h1, h2, h3 { font-weight: lighter; } +/* Elements qui s'animent, se plient et se déplient */ .anim-hide { padding-top: 0; padding-bottom: 0; @@ -140,6 +148,20 @@ h1, h2, h3 { transition: padding 0.75s ease .1s; } +/* style des éléments a l'intérieur des cartes */ + +.card { + +} + +.steps { + list-style: none; +} + + + + + .advice { margin: 3vw; max-width: 600px; @@ -152,1214 +174,6 @@ a { text-decoration: none; } -/* - -h1, h2, h3, h4, h5, h6 { - font-family: "Julius Sans One", serif; - margin: 0; -} - -html, body { - font-family: "Libre Baskerville", serif; - padding: 0; - margin: 0; - color: #222240; - background: #fff; - height: 100%; -} - -h1 { - text-align: center; - font-weight: bold; - background: #40E0D0; - color: black; - padding: 1ex 2ex 1ex 2ex; -} - -section:not(.yfold)>h2 { - padding: 0.5ex 2ex 0.5ex 4ex; - background: #40D0E0; -} - -p { - margin: 1ex 1ex 1ex 1ex; -} - -a { - text-decoration: none; - color: inherit; - border-bottom: thin dotted blue; -} - -a.emph { - font-weight: bold; - color: blue; - padding: 0 0.6ex 0 0.6ex; - border-bottom: none; -} - -a.url { - font-family: "sans"; - font-style: italic; - color: #4b097a; -} - -a:hover { - color: red; - border-bottom: thin solid blue; -} - -*:not(.exercise)>*:not(.example)>h5 { - margin: 1ex 0ex 1ex 1ex; - font-size: 100%; -} - -h1+nav>a:before { - content: url("Images/home.png"); -} - -h1+nav>a, h1+nav>a:link, h1+nav>a:visited, h1+nav>a:active { - text-decoration: none; - border: none; - padding: 0; - margin: 0; -} - -h1+nav>a:hover { - text-decoration: none; - border: none; -} - -h1+nav { - position: absolute; - top: 30px; - left: 4px; - padding: 0; -} - -footer { - margin: 6em 0 0 0; - display: flex; - justify-content: flex-end; - align-items: center; - flex-wrap: wrap; - padding: 1ex 1ex 1ex 1ex; -} - -footer>a { - margin: 0.25ex 2ex 0.25ex 0; - text-decoration: none; - border: none; -} - -footer>small { - flex-basis: 100%; - text-align: right; - margin: 0.25ex 2ex 0.25ex 0; -} - -footer.colophon { - font-size: 80%; - margin: 1em 0 0 0; -} - -section.card { - border-radius: 6px; - padding: 0 1ex 0 1ex; - margin: 0 3ex 2ex 3ex; - box-shadow: 4px 3px 2px #CCC; -} - -main>section.card { - margin: 4ex 2ex 4ex 2ex; - padding: 0 0 1ex 0; - background: rgba(245, 245, 255, 0.7); - border: thin solid #DDE; -} - -main>section.card>h2 { - border-radius: 6px; - margin: 0 0 0 0; -} - -div.flex { - display: flex; - justify-content: center; - flex-wrap: wrap; - align-items: flex-start; -} - -section.smooth { - box-shadow: none !important; -} - -section.notice { - border: thin dotted #44D; - padding: 1ex 2ex 1ex 2ex; - margin: 2ex 1ex 6ex 1ex; - box-shadow: 1px 1px #CCC; -} - -h3 { - border-radius: 6px; - margin: 0 0px 8px -10px; - padding: 0 10px 0 10px; -} - -h4 { - text-shadow: 1px 1px 0 #AAA; -} - -h4.yfold-title { - text-shadow: 1px 1px 0 #000; -} - -div.theory { - margin: 1ex 0.2ex 1ex 0.2ex; - padding: 0.5ex 1ex 0.5ex 1ex; - border: thin dotted #44D; - background: #ffffb3; -} - -div.mission, section.mission { - margin: 1ex 0.2ex 2ex 0.2ex; - padding: 0.5ex 1ex 0.5ex 1ex; - border: thin dotted #44D; - background: #ffb3ff; -} - -section.yfold { - margin: 0; -} - -.yfold-title { - text-align: left; - padding: 0.2ex 2ex 0.2ex 2ex; -} - -li>section>.yfold-title { - padding-left: 1ex; -} - -section.yfold.card { - border-radius: 6px; - padding: 0 1ex 0 1ex; - margin: 0 3ex 2ex 3ex; - box-shadow: 4px 3px 2px #CCC; - border: none; -} - -section.yfold.card>.yfold-title { - padding-left: 0; -} - -section.yfold.sober { - border: none !important; - margin-left: 1.5ex; -} - -li>section.yfold.sober { - margin-left: 0; -} - -section.yfold.sober>h3 { - font-size: 100%; -} - -section.yfold.sober>div.yfold-content { - border: none !important; -} - -.yfold-title:hover { - cursor: pointer; - text-shadow: 2px 1px 2px white, 4px 1px 6px white; -} - -.yfold-content { - padding: 0 1ex 0 6ex; - overflow: hidden; -} - -section.yfold.card>.yfold-content { - padding: 0; -} - -section.yfold.card>.yfold-content>h6 { - border: none; - background: rgba(255, 255, 255, 0.5); - font-size: 82%; - margin: 0.5ex 0ex 0.8ex 0ex; - padding: 0.5ex 1ex 0.5ex 2ex; - border-radius: 6px; -} - -span.hole { - border: thin dotted blue; - padding: 0.2ex 1.4ex 0.2ex 1.4ex; - margin: 0 0.5ex 0 0; - display: inline; -} - -span.fak { - font-size: 82%; - font-style: normal; - margin: 0 1ex 0 1ex; -} - -span.arrow { - vertical-align: middle; - color: white; - padding: 0px 4px 0px 4px; - margin: 0px 0.5ex 0px 0px; - border-radius: 5px; - box-shadow: 1px 1px #CCC; - text-shadow: none !important; -} - -span.big { - font-size: 220%; - vertical-align: middle; -} - -ul.lessons>li { - margin: 0.5ex 0 0.6ex 0; - list-style-type: none; - list-style-image: none; -} - -ul.exo-list { - list-style-type: "· "; -} - -ul.exo-list>li { - margin: 1ex 0 1.5ex 3ex; - color: #3c75d1; - font-weight: bold; -} - -.lbutton { - vertical-align: top; - color: black; - border-radius: 6px; - box-shadow: 3px 2px 2px gray; - padding: 0.1ex 0.5ex 0.1ex 0.5ex; - margin-right: 1.5ex; - font-size: 85%; -} - -ol.highl { - list-style: none; - counter-reset: item; -} - -ol.highl>li { - counter-increment: item; - margin-bottom: 5px; -} - -ol.highl>li:before { - vertical-align: top; - color: black; - border-radius: 6px; - box-shadow: 3px 2px 2px gray; - padding: 0.1ex 0.5ex 0.1ex 0.5ex; - margin-right: 1.5ex; - font-size: 85%; - margin-right: 10px; - content: counter(item); - background: purple; - color: white; - border-radius: 100%; - width: 1.4em; - text-align: center; - display: inline-block; -} - -.mml { - align-self: center; - page-break-before: always; - page-break-after: always; - margin: 1ex 1ex 2ex 1ex; -} - -a:hover>.lbutton { - box-shadow: none; -} - -ul.lessons>li>a>span.lbutton { - font-variant: small-caps; -} - -.menu { - margin: 0.25ex 1ex 0.25ex 1ex; - padding: 0.1ex 0.75ex 0.1ex 0.75ex; - background: rgba(130, 170, 250, 0.5); - border: thin solid #37F; - border-radius: 4px; - box-shadow: 3px 3px 2px #844; - font-family: sans; - font-variant: small-caps; - font-size: 88%; - display: inline-block; -} - -ul { - margin: 0.4ex 0 1ex 1ex; - padding-left: 2ex; - list-style-type: "✧ "; -} - -li { - margin-bottom: 0.2ex; -} - -ul ul { - list-style-type: "⋆ "; - font-size: 96%; -} - -ul ul ul { - list-style-type: "∘ "; - font-size: 94%; -} - -ul.space>li { - margin-top: 0.75ex; - margin-bottom: 1.5ex; -} - -ul.smallspace>li { - margin-top: 0.25ex; - margin-bottom: 0.5ex; -} - -ul.steps>li { - margin: 0 0 2ex 0; -} - -ul.steps { - margin: 0; - padding: 0 0 0 3ex; - list-style-type: "☞ "; -} - -ul.requires { - list-style-type: "➪ "; -} - -ul.success { - list-style-type: "✔ "; -} - -ul.goals { - list-style-type: "✧ "; -} - -ul.none { - list-style-type: none; -} - -ul.resources { - list-style-type: "➤ "; -} - -ul.resources>li { - margin-bottom: 0.5ex; -} - -div.warning { - background: #FFFF00; - padding: 0.4ex 1ex 0.4ex 1ex; - margin: 2ex 1ex 2.6ex 1ex; - border: thin solid red; - box-shadow: 3px 3px 2px #844; -} - -div.warning:before { - content: url("Images/important.png"); - float: left; - margin: -10px 1.5ex 0 -2ex; -} - -h3.warning { - padding: 0.4ex 1ex 0.4ex 1ex; - color: red; - font-weight: bold; -} - -code { - background: rgba(255, 255, 255, 0.2); - padding: 0.4ex 0.5ex 0.4ex 0.5ex; -} - -code.highlight { - font-weight: bold; - color: #0000BB; -} - -code.block { - display: inline-block; - border: thin dotted #44F; - padding: 0.4ex 1.5ex 0.5ex 1.5ex; - margin: 0.2ex 1ex 0.2ex 1ex; - box-shadow: 1px 1px 1px #CCC; - background: rgba(255, 255, 255, 0.5); - white-space: pre; - vertical-align: middle; -} - -code.page { - margin-left: 8%; - box-shadow: 3px 3px 3px #DBD; - font-size: 11pt; - background: #F0FFFF; -} - -span.comment { - color: rgba(0, 110, 0, 0.7); - font-style: italic; - font-family: sans; - font-size: 105%; - white-space: pre; -} - -span.semi { - font-weight: bold; - color: rgba(196, 0, 128, 0.6); -} - -span.operator { - color: #840; - font-weight: bold; -} - -span.highcomment { - font-style: italic; - font-family: sans; - font-size: 105%; - white-space: pre; - font-size: 110%; - font-weight: bold; - color: rgba(0, 110, 0, 0.9); - margin: 0.25ex 0ex 0.25ex 0ex; -} - -span.highercomment { - font-style: italic; - font-family: sans; - font-size: 105%; - white-space: pre; - font-size: 105%; - font-weight: bold; - color: #000; - background: #DDD; - padding: 0ex 4.5ex 0ex 4.5ex; - margin: 0.25ex 0ex 2.5ex -4ex; - border: thin solid black; -} - -span.label { - font-style: italic; - color: #44F; -} - -span.letvar { - color: #0000A0; - font-style: italic; -} - -span.uident { - font-weight: bold; - font-size: 110%; - color: #080; -} - -span.string, span.char { - color: #E22; - white-space: pre; - font-family: serif; - font-size: 92%; -} - -span.kw, code.kw { - display: inline; - font-weight: bold; - color: #600080; -} - -span.type { - font-weight: bold; - color: #069; -} - -span.fname { - font-variant: small-caps; - font-weight: bold; - font-size: 110%; - color: #050; -} - -span.directive { - font-weight: bold; - color: #e67300; -} - -samp { - display: inline-block; - white-space: pre; - margin: 0 2ex 0.2ex 2ex; - padding: 0.2ex 1.5ex 0.2ex 1.5ex; - background: rgba(180, 255, 180, 0.6); - color: #336600; -} - -code.command { - border: thin dotted #999; - margin: 0.2ex 2ex 0.2ex 1ex; - font-weight: bold; - box-shadow: 1px 1px 0px #666; -} - -var { - display: inline-block; - padding: 0.1ex 0.7ex 0.1ex 0.7ex; - background: rgba(0, 0, 0, 0.1); - border-radius: 4px; - font-size: 90%; - font-family: mono; - font-style: normal; -} - -var.type { - font-style: italic; -} - -ul.file-list { - list-style-type: none; -} - -span.file, ul.file-list li a.file { - font-family: sans; - font-size: 96%; - color: #660033; -} - -ul.file-list li a.file:before { - content: "👁"; - padding: 0 0.5ex 0 0; - border-bottom: thin solid white; -} - -ul.file-list li a.dir:before { - content: "📂"; - padding: 0 0.5ex 0 0; - border-bottom: thin solid white; -} - -span.hfile { - font-family: sans; - color: #660033; - font-weight: bold; -} - -div.examples { - display: flex; - flex-direction: row; - justify-content: space-around; - flex-wrap: wrap; -} - -div.example { - border: thin outset #97E; - margin: 1ex 0 1ex 0; - padding: 0; - background: rgba(255, 255, 255, 0.35); - border-radius: 8px; -} - -div.example.lone { - display: table; -} - -div.example:not(.lone) { - display: flex; - flex-direction: column; - align-items: flex-start; -} - -div.download-link { - margin: 1ex; - font-size: 82%; - font-variant: small-caps; - font-weight: bold; - background: #229922; - color: #FFF; - padding: 0.8ex 1.5ex 0.8ex 1.5ex; - border-radius: 8px; - display: inline-block; - float: right; -} - -div.download-link a { - border: none; -} - -a.downl { - margin: 1ex; - font-size: 82%; - font-variant: small-caps; - font-weight: bold; - background: #229922; - color: #FFF; - padding: 0.8ex 1.5ex 0.8ex 1.5ex; - border-radius: 8px; - display: inline-block; -} - -a.downl:hover { - color: red; - box-shadow: 2px 2px 2px #6D6; -} - -.flex1 { - flex: 1; - margin-right: 2ex !important; -} - -.flex2 { - flex: 2; - margin-right: 2ex !important; -} - -.flex3 { - flex: 3; - margin-right: 2ex !important; -} - -div.example>h5 { - background: rgba(0, 0, 0, 0.2); - width: 100%; - text-align: center; - padding: 0.1ex 1ex 0.1ex 1ex; - border-radius: 8px; -} - -div.example>pre { - margin: 0; - padding: 0; -} - -div.example>code.block, div.example>pre>code.block { - margin-bottom: 0; - box-shadow: none; - border: none; - background: transparent; -} - -div.example>samp { - align-self: stretch; - border-top: thin dashed #999; - padding: 0.8ex 0.8ex 0.8ex 0.4ex; -} - -div.comm { - font-size: 85%; - color: #333; - padding: 0 1.5ex 0 1.5ex; - margin: 0 2ex 0 2ex; - text-align: center; - align-self: stretch; - font-style: italic; -} - -div.comm:before { - content: "✍ "; - font-size: 130%; -} - -pre.output, div.samp { - display: table; - background: rgba(120, 255, 120, 0.7); - padding: 1ex 2ex 1ex 2ex; - border: thin dotted #777; -} - -pre.ascii, pre.inv-ascii { - font-size: 65%; - float: right; - box-sizing: content-box; - display: inline-block; -} - -pre.inv-ascii { - background: rgb(45, 45, 45); - color: white; -} - -.pcom { - color: #555; - font-size: 80%; -} - -mark { - color: red; - font-weight: bold; - background: transparent; -} - -q { - font-style: italic; -} - -blockquote { - font-style: italic; - color: #444; -} - -.errmsg { - color: red; -} - -.green { - color: green; -} - -br.bbr { - margin-bottom: 0.5ex; -} - -br.vskip { - margin-bottom: 2ex; -} - -ul.bib { - background: rgba(255, 255, 255, 0.3); - list-style-type: none; - padding: 1ex 0.5ex 0.5ex 1.5ex; - margin: 0; -} - -span.bib { - background: rgba(255, 255, 255, 0.3); - padding: 0.2ex 2ex 0.2ex 2ex; - font-size: 90%; -} - -span.bib:before, ul.bib>li:before { - content: url("Images/article.png"); - margin: 0 8px 0 0; - padding: 0; - vertical-align: top; -} - -span.author { - font-family: sans; - font-size: 90%; -} - -span.email { - color: #4b097a; - padding: 0.2ex 1ex 0.2ex 1ex; - font-family: "sans"; -} - -span.email:before { - content: "🖂"; - padding: 0; - margin: 0 4px 0 0; -} - -span.email:after { - content: "🖂"; - padding: 0; - margin: 0 0 0 4px; -} - -section.advice, section.help, section.demotiv, section.forbid { - display: flex; - margin-top: 1ex; -} - -section.advice:before { - content: url("Images/wazow1.png"); - margin: -18px -18px 0 0; - padding: 0; -} - -section.forbid:before { - content: url("Images/att.png"); - margin: -10px -10px 0 0; - padding: 0; - z-index: 10; -} - -section.demotiv:before { - content: url("Images/wazow0.png"); - margin: -18px -18px 0 0; - padding: 0; -} - -section.help:before { - content: url("Images/wazow2.png"); - margin: 0px -10px 0 0; - padding: 0; -} - -section.advice>div.content { - background: rgba(100, 255, 100, 0.6); - border-radius: 6px; - margin: 1ex 0 2ex 0; - padding: 0 1ex 1ex 1ex; - box-shadow: 2px 2px 2px #6D6; -} - -section.forbid>div.content { - border: 2.5pt dotted red; - padding: 0.5ex 1ex 1ex 1ex; - background: rgba(255, 235, 60, 0.8); - font-weight: bold; -} - -section.help>div.content, section.demotiv>div.content { - background: rgba(255, 207, 116, 0.8); - border-radius: 6px; - margin: 1ex 0 2ex 0; - padding: 0 1ex 1ex 1ex; - box-shadow: 2px 2px 2px #666; -} - -section.help>div.content>h6, section.demotiv>div.content>h6 { - border-bottom: thin solid white; - background: #cd4d00; - font-size: 82%; - color: white; - margin: 0 -1ex 0.8ex -1ex; - padding: 0.5ex 1ex 0.5ex 1ex; - border-radius: 6px; -} - -section.exercise { - display: flex; - margin-top: 1.5ex; -} - -section.exercise:not(.athome):before { - content: url("Images/shifu.png"); - margin: 0 -16px 0 0; - padding: 0; -} - -section.exercise.athome:before { - content: url("Images/monkey.png"); - margin: -14px -18px 0 0; - padding: 0; -} - -section.exercise>div.content { - background: rgba(200, 255, 200, 0.6); - border-radius: 6px; - margin: 1ex 0 2ex 0; - padding: 0 1ex 1ex 1ex; - box-shadow: 2px 2px 2px #999; -} - -section.exercise>div.content>h6 { - border-bottom: thin solid white; - background: #64FF64; - font-size: 82%; - margin: 0 -1ex 0.8ex -1ex; - padding: 0.5ex 1ex 0.5ex 1ex; - border-radius: 6px; -} - -section.exercise>div.content>h5 { - background: #316c1e; - color: white; - margin: 0 -1ex 0.8ex -1ex; - padding: 0.5ex 1ex 0.5ex 1ex; - border-radius: 6px; -} - -section.exercise>div.content>ul { - list-style-type: "❯ "; -} - -section.exercise>div.content>ul>li { - margin-bottom: 0.8ex; -} - -span.difficulty { - padding: 0 1ex 0 0.5ex; - vertical-align: sub; -} - -span.math { - font-style: italic; - font-family: sans; - display: inline-block; -} - -section.aside, aside { - float: right; - max-width: 55%; - margin: 4ex 0ex 4ex 6ex; -} - -section.aside { - font-size: 95%; -} - -aside.answers { - font-size: 80%; - max-width: 18%; -} - -aside.fold { - display: flex; -} - -aside:before { - content: url("Images/panda.png"); - margin: -12px -12px 0 0; - padding: 0; -} - -aside>div.content>.yfold-content { - background: rgba(160, 160, 220, 0.8); - border: none !important; - padding: 0 1ex 0 1ex; - border-radius: 12px; - box-shadow: 2px 2px 2px #CCC; -} - -aside>div.content>.yfold-title { - padding: 0.2ex 0.5ex 0.2ex 0ex; -} - -aside>div.content>.yfold-title:hover { - background: rgba(255, 255, 255, 0) !important; -} - -aside .yfold-content>h5 { - margin: 0 -1ex 0 -1ex; - padding: 0.4ex 1ex 0.4ex 1ex; - background: rgb(120, 120, 180); -} - -caption { - border: thin solid #99F; - padding: 0.5ex 1ex 1ex 1ex; - margin: 0 0 1ex 0; - text-align: center; - font-family: "Julius Sans One", serif; - font-size: 110%; -} - -table { - border-collapse: collapse; - margin: 2ex 2ex 2ex 2ex; - padding: 0; - border: thin solid #99F; -} - -table th { - margin: 0; - padding: 0.2ex 3ex 0.2ex 3ex; - font-variant: small-caps; - font-weight: bold; - font-size: larger; - background: #DDF; - border: thin solid #99F; - text-align: center; -} - -table tr td { - margin: 0; - padding: 0.2ex 1.4ex 0.2ex 1.4ex; - text-align: center; -} - -table tr { - border: thin dashed #99F; -} - -table.code_test { - border-collapse: collapse; -} - -table.code_test>tbody>tr>td, table.code_test>tr>td { - margin: 0; - padding: 0; -} - -table.code_test>tbody>tr>td.col2, table.code_test>tr>td.col2 { - display: inline-block; - white-space: pre; - margin: 0 2ex 0.2ex 2ex; - padding: 0.2ex 1.5ex 0.2ex 1.5ex; - background: rgba(180, 255, 180, 0.6); - color: #336600; - vertical-align: middle; - display: table-cell; -} - -table.code_test>tbody>tr>td.col3, table.code_test>tr>td.col3 { - color: #555; - font-size: 80%; - vertical-align: middle; - display: table-cell; - padding: 0.2ex 1ex 0.2ex 1ex; -} - -table.code_test>tbody>tr>td.col2:before, table.code_test>tr>td.col2:before { - content: " → "; - margin-left: -2.1ex; -} - -table#aeroports td.col1, table.contact td.col1, table#cours td.col1 { - font-weight: bold; - font-variant: small-caps; - font-family: sans-serif; -} - -table#aeroports td.col4 { - font-variant: small-caps; - font-family: sans-serif; -} - -table.contact td.col2 { - border-left: thin dotted blue; - border-right: thin dotted blue; -} - -table.contact tr { - border: none; -} - -table.contact { - display: inline-block; - vertical-align: top; -} - -table#cours td { - padding: 0 2ex 1.4ex 2ex; - text-align: left; -} - -img { - box-sizing: content-box; -} - -img.hspace { - margin: 1ex 4ex 1ex 4ex; -} - -img.space { - margin-left: auto; - margin-right: auto; - display: block; - margin-top: 1.5ex; - margin-bottom: 1.5ex; -} - -img.inline { - vertical-align: bottom; - margin: 0; -} - -img.nice-inline { - vertical-align: top; - margin: 0 1ex 0 1ex; -} - -.inline-block { - display: inline-block; -} - -img.float { - float: right; -} - -div.schema { - margin: 1.5ex 2ex 1.5ex 2ex; - padding: 1em 1em 1em 1em; - background: white; - border: thin dotted #888; - text-align: center; - display: block; -} - -section.stupid-flex-separator>h5 { - display: none !important; -} - -main.barebone { - padding: 1ex 2ex 0ex 4ex; -} - -main.barebone h2 { - margin: 1ex -2ex 0.75ex -4ex; - padding: 1ex 0ex 1ex 3ex; - background: #C0FDF7; -} - -main.barebone>ul>li { - margin: 0.5ex 1ex 1ex 1ex; -} - -main.barebone section.yfold { - border: none !important; -} - -html.ada1>body { - background-image: url("Images/ada1back.jpg"); - background-position: center top; - background-repeat: no-repeat; - background-color: white; -} - -section.capsule { - overflow: hidden; - border: 2px solid #BBF; - border-radius: 30px; - box-shadow: 10px 10px 5px #999; - background: #DDF; - color: #282828; - margin: 2ex 2ex 4ex 4ex; - padding: 1ex 4ex 1ex 4ex; -} - -section.capsule>h3 { - text-align: center; - font-variant: small-caps; - margin: -2ex -4ex 0ex -4ex; - padding: 2ex 3ex 1ex 3ex; - border-radius: 0px; - font-size: 115%; - background: #99F; - color: black; - text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 9px #CCF, 0 0 11px #CCF, 0 0 13px #CCF; -} - -div.capsule_titre span.pcom { - font-variant: normal; - font-size: small; - color: #383838; -} - -div.aflex { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: stretch; -} - -div.graphe { - background: white url("Images/Carte1b.png") right no-repeat; -} - -*/ footer { bottom: 0px; width: 100%; @@ -1393,6 +207,42 @@ footer .pcom a { font-size: 150%; } + +/* PAGE DE CODE */ +code { + background: #1b1b1b; + max-width: 900px; + width: auto; + border-radius: 12px; + margin-left: 3vw; + font-family: monospace; + display: block; + color: #f5d67b; + + tab-size: 2px; + white-space: pre; + + overflow-x: scroll; + padding: 15px 20px 12px 22px; + line-height: 1.75; +} + +span.comment { + font-style: italic; + color: rgb(128, 139, 150); +} + +span.kw { + color: rgb(203, 67, 53); + font-weight: bold; +} + + + + + +/* MEDIA */ + @media (min-width: 1400px) { footer { flex-direction: column; @@ -1405,7 +255,9 @@ footer .pcom a { } } -@-webkit-keyframes AnimationName { +/* ANIMATION */ + +@-webkit-keyframes bgMove { 0% { background-position: 0% 50% } @@ -1419,7 +271,7 @@ footer .pcom a { } } -@-moz-keyframes AnimationName { +@-moz-keyframes bgMove { 0% { background-position: 0% 50% } @@ -1433,7 +285,7 @@ footer .pcom a { } } -@keyframes AnimationName { +@keyframes bgMove { 0% { background-position: 0% 50% } diff --git a/main.css b/main.css deleted file mode 100644 index c10104c..0000000 --- a/main.css +++ /dev/null @@ -1,257 +0,0 @@ -* { - margin: 0px; - padding: 0px; - box-sizing: border-box; -} - -html { - background: #051937; - overflow-x: hidden; -} - -body { - min-height: 100vh; - position: relative; -} - -.header:before { - z-index: 0; - content: "CSS"; - font-size: 200%; - color: white; - position: absolute; - display: flex; - justify-content: center; - align-items: center; - top: 0; - left: 0; - height: 100vh; - width: 100vw; - background: #000; - transform: translateX(100%); - animation-name: translate; - animation-duration: 2s; -} - -body:after, body:before { - -webkit-clip-path: polygon(100% 0, 0 0, 0 77.5%, 1% 77.4%, 2% 77.1%, 3% 76.6%, 4% 75.9%, 5% 75.05%, 6% 74.05%, 7% 72.95%, 8% 71.75%, 9% 70.55%, 10% 69.3%, 11% 68.05%, 12% 66.9%, 13% 65.8%, 14% 64.8%, 15% 64%, 16% 63.35%, 17% 62.85%, 18% 62.6%, 19% 62.5%, 20% 62.65%, 21% 63%, 22% 63.5%, 23% 64.2%, 24% 65.1%, 25% 66.1%, 26% 67.2%, 27% 68.4%, 28% 69.65%, 29% 70.9%, 30% 72.15%, 31% 73.3%, 32% 74.35%, 33% 75.3%, 34% 76.1%, 35% 76.75%, 36% 77.2%, 37% 77.45%, 38% 77.5%, 39% 77.3%, 40% 76.95%, 41% 76.4%, 42% 75.65%, 43% 74.75%, 44% 73.75%, 45% 72.6%, 46% 71.4%, 47% 70.15%, 48% 68.9%, 49% 67.7%, 50% 66.55%, 51% 65.5%, 52% 64.55%, 53% 63.75%, 54% 63.15%, 55% 62.75%, 56% 62.55%, 57% 62.5%, 58% 62.7%, 59% 63.1%, 60% 63.7%, 61% 64.45%, 62% 65.4%, 63% 66.45%, 64% 67.6%, 65% 68.8%, 66% 70.05%, 67% 71.3%, 68% 72.5%, 69% 73.6%, 70% 74.65%, 71% 75.55%, 72% 76.35%, 73% 76.9%, 74% 77.3%, 75% 77.5%, 76% 77.45%, 77% 77.25%, 78% 76.8%, 79% 76.2%, 80% 75.4%, 81% 74.45%, 82% 73.4%, 83% 72.25%, 84% 71.05%, 85% 69.8%, 86% 68.55%, 87% 67.35%, 88% 66.2%, 89% 65.2%, 90% 64.3%, 91% 63.55%, 92% 63%, 93% 62.65%, 94% 62.5%, 95% 62.55%, 96% 62.8%, 97% 63.3%, 98% 63.9%, 99% 64.75%, 100% 65.7%); - clip-path: polygon(100% 0, 0 0, 0 77.5%, 1% 77.4%, 2% 77.1%, 3% 76.6%, 4% 75.9%, 5% 75.05%, 6% 74.05%, 7% 72.95%, 8% 71.75%, 9% 70.55%, 10% 69.3%, 11% 68.05%, 12% 66.9%, 13% 65.8%, 14% 64.8%, 15% 64%, 16% 63.35%, 17% 62.85%, 18% 62.6%, 19% 62.5%, 20% 62.65%, 21% 63%, 22% 63.5%, 23% 64.2%, 24% 65.1%, 25% 66.1%, 26% 67.2%, 27% 68.4%, 28% 69.65%, 29% 70.9%, 30% 72.15%, 31% 73.3%, 32% 74.35%, 33% 75.3%, 34% 76.1%, 35% 76.75%, 36% 77.2%, 37% 77.45%, 38% 77.5%, 39% 77.3%, 40% 76.95%, 41% 76.4%, 42% 75.65%, 43% 74.75%, 44% 73.75%, 45% 72.6%, 46% 71.4%, 47% 70.15%, 48% 68.9%, 49% 67.7%, 50% 66.55%, 51% 65.5%, 52% 64.55%, 53% 63.75%, 54% 63.15%, 55% 62.75%, 56% 62.55%, 57% 62.5%, 58% 62.7%, 59% 63.1%, 60% 63.7%, 61% 64.45%, 62% 65.4%, 63% 66.45%, 64% 67.6%, 65% 68.8%, 66% 70.05%, 67% 71.3%, 68% 72.5%, 69% 73.6%, 70% 74.65%, 71% 75.55%, 72% 76.35%, 73% 76.9%, 74% 77.3%, 75% 77.5%, 76% 77.45%, 77% 77.25%, 78% 76.8%, 79% 76.2%, 80% 75.4%, 81% 74.45%, 82% 73.4%, 83% 72.25%, 84% 71.05%, 85% 69.8%, 86% 68.55%, 87% 67.35%, 88% 66.2%, 89% 65.2%, 90% 64.3%, 91% 63.55%, 92% 63%, 93% 62.65%, 94% 62.5%, 95% 62.55%, 96% 62.8%, 97% 63.3%, 98% 63.9%, 99% 64.75%, 100% 65.7%); - display: block; - height: 200px; - position: absolute; - top: 0; - left: 0; - width: 100%; -} - -body:after { - content: ""; - background: linear-gradient(120deg, #113e9e, #b30082, #d31835); - background-size: 200% 300%; - opacity: 0.6; - -webkit-animation: AnimationName 15s ease infinite; - -moz-animation: AnimationName 15s ease infinite; - animation: AnimationName 15s ease infinite; -} - -body:before { - height: 650px; - margin-top: -250px; - background: rgba(189, 189, 189, 0.1); - content: ""; -} - -.header { - position: relative; - z-index: 2; - padding: 40px 40px 60px 3vw; - height: 150px; -} - -.header h1 { - color: white; - margin-left: 10px; - padding-bottom: 10px; - font-weight: lighter; - border-bottom: 8px solid #eee; - display: inline; -} - -main { - min-height: calc(100vh - 320px); -} - -.yfold { - background: rgba(189, 189, 189, 0.2); - position: relative; - z-index: 1; - margin: 20px; - margin-left: 3vw; - margin-right: 3vw; - border-radius: 12px; - width: clamp(10px, 94vw, 900px); -} - -.yfold-title { - color: white; - padding: 10px 12px 5px 15px; - cursor: pointer; -} - -.arrow { - margin-right: 10px -} - -.yfold-content { - background: #edd; - position: relative; - z-index: 2; - border-radius: 12px; - padding: 40px; - overflow: hidden; -} - -h1, h2, h3 { - font-family: "Poppins", sans-serif; - font-weight: lighter; -} - -.anim-hide { - padding-top: 0; - padding-bottom: 0; - animation-name: disappear; - animation-duration: 0.75s; - max-height: 0; - margin: 0; - transition: padding 0.75s ease .3s; -} - -.anim-show { - animation-name: appear; - animation-duration: 0.75s; - max-height: initial; - margin: 0 0 3ex 0; - transition: padding 0.75s ease .1s; -} - - - - - - -footer { - bottom: 0px; - width: 100%; - min-height: 150px; - background: #002; - opacity: 0.6; - padding: 30px 50px; - - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; - flex-wrap: wrap; -} - -footer * { - margin: 5px 0; -} - -@media (min-width: 1500px) { - footer { - height: 150px; - position: absolute; - top: calc(20px + 150px); - right: 3vw; - width: calc(91vw - 900px); - border-radius: 12px; - } -} - -@-webkit-keyframes AnimationName { - 0% { - background-position: 0% 50% - } - - 50% { - background-position: 100% 50% - } - - 100% { - background-position: 0% 50% - } -} - -@-moz-keyframes AnimationName { - 0% { - background-position: 0% 50% - } - - 50% { - background-position: 100% 50% - } - - 100% { - background-position: 0% 50% - } -} - -@keyframes AnimationName { - 0% { - background-position: 0% 50% - } - - 50% { - background-position: 100% 50% - } - - 100% { - background-position: 0% 50% - } -} - -@keyframes appear { - 0% { - max-height: 0; - margin-bottom: 0; - } - - 100% { - max-height: 500px; - margin-bottom: 3ex; - } -} - -@keyframes disappear { - 0% { - max-height: 500px; - margin-bottom: 3ex; - } - - 100% { - max-height: 0; - margin-bottom: 0; - } -} - -@keyframes translate { - 0% { - transform: translateX(0%); - background: #000; - } - - 30% { - background: #000; - color: white; - } - - 75% { - transform: scale(2); - background: #002; - } - - 100% { - transform: translateX(100%); - } -}