diff --git a/css/style.css b/css/style.css new file mode 100755 index 0000000..a44a143 --- /dev/null +++ b/css/style.css @@ -0,0 +1,1431 @@ +@charset "UTF-8"; +/* --- 00. PALETTE --- */ +/* + * Les définitions globales des couleurs du theme. + * + * Elle permettent de définir rapidement à la fois les couleurs + * de base qui seront utilisée pour tout le theme, mais + * également celles spécifiques pour certains sujets (liens, texte) + * + */ +@font-face { + font-family: 'Teko'; + src: url("../fonts/teko-light-webfont.woff"); + font-weight: 300; } + +@font-face { + font-family: 'Teko'; + src: url("../fonts/teko-regular-webfont.woff"); + font-weight: 400; } + +@font-face { + font-family: 'Teko'; + src: url("../fonts/teko-medium-webfont.woff"); + font-weight: 500; } + +@font-face { + font-family: 'Teko'; + src: url("../fonts/teko-semibold-webfont.woff"); + font-weight: 600; } + +@font-face { + font-family: 'Teko'; + src: url("../fonts/teko-bold-webfont.woff2") format("woff2"), url("../fonts/teko-bold-webfont.woff") format("woff"); + font-weight: 700; + font-display: swap; } + +/* --- 00. COLORS --- */ +/* + * La gestion des couleurs dans le theme. Cette partie de la stylesheet est + * automatique et n'a pas besoin d'être modifiée + */ +/* 0. CORE +** All the basic functions from the stylesheet +*/ +*, +*::before, +*::after { + box-sizing: inherit; } + +html { + font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + text-align: left; + font-size: 4.75mm; + line-height: 1.6rem; + font-weight: 400; + box-sizing: border-box; + -webkit-text-size-adjust: 100%; } + +body { + margin: 0; + overflow-x: hidden; + text-rendering: optimizeLegibility; + color: var(--text-color); } + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; } + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +:root { + --accent-color: #e03131; + --text-color-contrast: #ffffff; + --accent-color-hover: #cc1f1f; + --accent-color-soft: #ffe3e3; + --text-color:#212529; + --link-color-hover:rgba(33, 37, 41, 0.15); + --link-color:#c11d1d; } + +strong { + font-weight: 600; } + +em { + font-style: italic; + font-weight: 400; } + +mark { + padding: 0.05rem 0.25rem; + border-radius: 0.1rem; } + +a { + color: var(--link-color); + outline-color: #e03131; + padding: 0.05rem; + border-radius: 0.1rem; + text-decoration: underline dashed 1px; + text-underline-offset: 0.1rem; } + a:visited { + color: var(--link-color); } + a:hover, a:active { + background-color: var(--link-color-hover); + text-decoration: none; } + +a:focus-visible, input:focus-visible { + outline-style: dashed; + outline-width: 2px; + outline-offset: 1px; } + +mark { + background-color: white; + color: inherit; } + +p, ul, ol { + padding: 0; + padding-bottom: 1.6rem; + margin: 0; } + p:last-child, ul:last-child, ol:last-child { + padding-bottom: 0; } + +ul, ol { + list-style: disc; } + ul ul, ul ol, ol ul, ol ol { + padding-bottom: 0; + margin: 0; } + ul li, ol li { + margin: 0; + margin-left: 1.6rem; + line-height: 1.6rem; } + ul.nolist, ol.nolist { + display: inline; + list-style: none; + margin: 0; + padding: 0; } + ul.nolist li, ol.nolist li { + display: inline; + margin: 0; + padding: 0; } + +::selection, ::-moz-selection { + background-color: #1971c2; + color: #ffffff; } + +h1, h2, h3, h4, h5, h6, h7 { + font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + text-align: left; + font-size: 1em; + padding: 0; + margin: 0; + font-weight: 400; + padding-bottom: 1.6rem; } + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h7 a { + border: none; } + +sup > a, sub > a { + color: #e03131; + background-color: transparent; } + sup > a:hover, sup > a:focus, sup > a:active, sub > a:hover, sub > a:focus, sub > a:active { + color: #c11d1d; } + +.main-title { + font-family: Teko, sans-serif; + font-size: 3.815rem; + line-height: 4.8rem; + font-weight: 800; } + +h1, .title-1 { + font-family: Teko, sans-serif; + font-size: 2.441rem; + line-height: 3.2rem; + font-weight: 800; + color: #e03131; } + +h2, .title-2 { + font-size: 2.441rem; + line-height: 3.2rem; + font-weight: 300; } + +h3, .title-3 { + font-size: 1.953rem; + line-height: 3.2rem; + font-weight: 600; } + +h4, .title-4 { + font-size: 1.563rem; + line-height: 3.2rem; + font-weight: 800; } + +h5, .title-5 { + font-size: 1.25rem; + line-height: 1.6rem; + font-weight: 600; } + +h6, .title-6 { + font-size: 1rem; + line-height: 1.6rem; + font-weight: 800; } + +hr { + border: 0px solid rgba(1, 1, 1, 0.15); + border-bottom: 1px; + margin: 1.5em; + box-sizing: content-box; + height: 0; + overflow: visible; } + +pre { + font-family: monospace, monospace; + font-size: 1em; } + +.small-text, +small { + font-size: 0.9em; } + +.time { + font-style: italic; + text-align: right; + width: 100%; + display: block; } + +#wrapper { + background-color: #ffffff; } + +.container-big { + padding-left: 1.6rem; + padding-right: 1.6rem; + max-width: 1600px; + margin: auto; } + +.container, .container-onecolumn { + padding-left: 1.6rem; + padding-right: 1.6rem; + max-width: 1200px; + margin: auto; } + +.icon { + display: inline-block; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; + color: currentColor; + position: relative; + top: 0.1em; } + +.icon.icon-newspaper-o { + top: 0.15em; } + +/* --- 04. COMPOSANTS --- */ +/* + * Les différents composants réutilisables de la page. + * + */ +.badge { + border: 0px solid rgba(0, 0, 0, 0.3); + border-radius: 4px 4px 4px 4px; + background-color: transparent; + line-height: 1.5em; + padding-left: 0.4em; + padding-right: 0.4em; + text-decoration: none !important; + background-color: var(--accent-color); + color: var(--text-color-contrast); } + +.btn { + border: 0px solid rgba(0, 0, 0, 0.3); + border-radius: 4px 4px 4px 4px; + background-color: transparent; + text-decoration: none; + padding: 0.5333333333em 1.6em; + margin: 0.5333333333em 0.8em 1.6rem; + line-height: 1.6rem; + height: auto; + transition: background-color .2s, border .2s, box-shadow .2s, color .2s; + outline-color: var(--accent-color); + color: var(--text-color-contrast); + background-color: var(--accent-color); + font-weight: 400; } + .btn:visited { + color: var(--text-color-contrast); } + .btn:hover, .btn:active { + background-color: var(--accent-color-hover); + outline-color: var(--accent-color-hover); + box-shadow: none; } + p .btn:last-child { + margin-bottom: 0; } + .btn .fake { + background-color: transparent !important; + color: var(--text-color); } + +.btn.disabled, +.btn:disabled { + opacity: 0.8; + background-color: var(--accent-color) !important; + outline-color: var(--accent-color) !important; + color: var(--text-color-contrast) !important; } + +.btn-small { + padding: 0.1333333333em 0.2em; + margin: 0.1333333333em 0.2em 1.6rem; } + .btn-small:before { + left: -0.2em; + right: -0.2em; } + +.btn-readmore, +.btn-link { + color: var(--link-color); + background-color: transparent; } + .btn-readmore:visited, + .btn-link:visited { + color: var(--link-color); } + .btn-readmore:hover::before, .btn-readmore:active::before, + .btn-link:hover::before, + .btn-link:active::before { + background-color: var(--link-color-hover); } + +.btn-toolbar { + padding: 0 1.6em; } + +.btn-group > .btn { + border-radius: 4px 4px 4px 4px; + margin: 0 0 0 0 !important; } + +.btn-group:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .btn-group:not(:first-child) > .btn:before { + content: " " !important; + border-left: 1px solid rgba(0, 0, 0, 0.2); } + +.btn-group:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + +ul.breadcrumb, +ol.breadcrumb, +.breadcrumb { + border: 0px solid rgba(0, 0, 0, 0.3); + border-radius: 4px 4px 4px 4px; + background-color: transparent; + background-color: #e9ecef; + padding: 0.8em; + margin: 0 0 1.6rem; + display: flex; + flex-direction: row; + align-items: flex-start; + list-style: none; } + ul.breadcrumb::before, + ol.breadcrumb::before, + .breadcrumb::before { + background-color: #e9ecef; } + ul.breadcrumb li, + ol.breadcrumb li, + .breadcrumb li { + margin: 0; } + +.breadcrumb li:not(:first-child)::before { + content: "/"; + padding: 0.3rem; } + +.breadcrumb .active { + font-weight: 600; } + +nav.pagination { + padding-bottom: 1.6rem; } + nav.pagination .nav-links { + text-align: center; + width: 100%; } + nav.pagination .page-numbers, + nav.pagination .next, + nav.pagination .prev { + border: 0px solid rgba(0, 0, 0, 0.3); + border-radius: 4px 4px 4px 4px; + background-color: transparent; + padding: 0.2em 0.4em; + margin: 0.2em; + text-decoration: none; } + nav.pagination .page-numbers:not(.current):not(.dots), + nav.pagination .next:not(.current):not(.dots), + nav.pagination .prev:not(.current):not(.dots) { + outline-color: var(--accent-color); + color: var(--link-color); } + nav.pagination .page-numbers:not(.current):not(.dots):hover, + nav.pagination .next:not(.current):not(.dots):hover, + nav.pagination .prev:not(.current):not(.dots):hover { + background-color: var(--link-color-hover); } + nav.pagination .page-numbers.current, + nav.pagination .next.current, + nav.pagination .prev.current { + background-color: #e03131; + color: #ffffff; + background-color: #e03131; } + +.card { + border-radius: 8px 8px 8px 8px; + background-color: #e9ecef; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0); + border: none; + margin: 0; + margin-bottom: 1.6rem; + display: flex; + flex-direction: column; + color: #212529; } + .card > * { + margin-left: 1em; + margin-right: 1em; } + .card > *:first-child, .card > *.sr-only:first-child ~ * { + margin-top: 2em; } + .card > *:first-child.card-header, .card > *.sr-only:first-child ~ *.card-header { + margin-top: 0px; } + .card > *:last-child { + margin-bottom: 2em; } + .card > *:last-child.card-header { + margin-bottom: 0px; } + .card-body { + padding: 0 !important; } + .card-header { + font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-size: 1em; + font-weight: 600; + padding: 1em 1.6em; + padding-bottom: 1em !important; + margin: 0.8em 0px; + line-height: 1; + position: relative; + left: 0px; + width: 100%; + border: 0px solid rgba(0, 0, 0, 0.3); + border-radius: 4px 4px 4px 4px; + background-color: transparent; + background-color: var(--accent-color); + border-radius: 0; + font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + color: var(--text-color-contrast); } + .card-header:first-child { + border-top-left-radius: 8px; + border-top-right-radius: 8px; } + .card-header:last-child { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; } + .card-header .icon { + margin-right: 0.25em; } + .card-header::before { + background-color: var(--accent-color); } + +ul.card-list, +.card > ul { + padding: 0; + margin: 0; } + ul.card-list li.list-element, + .card > ul li.list-element { + line-height: 0.8em; + padding: 0.4em, 0.4em, 0.4em, 0.8em; + margin: 0; } + +.menu { + display: flex; + flex-direction: column; } + .menu ul, + .menu li { + list-style: none; + padding: 0; + margin: 0; } + .menu a, + .menu a:visited { + display: flex; + line-height: 1.6em; + padding: 0.4em; + margin: 0; + justify-content: space-between; + align-items: center; + text-decoration: none; + word-wrap: none; + text-overflow: ellipsis; + overflow: hidden; } + .menu a .badge, + .menu a:visited .badge { + margin: 0; } + .menu a { + color: var(--text-color); + outline-color: var(--text-color); } + .menu a:hover, .menu a:active, .menu a.submenu:focus { + background-color: var(--link-color-hover); } + +.submenu .fa-caret-down { + position: relative; + top: 2px; + font-size: 0.8em; } + +.toolbar { + flex-direction: row; + padding: 0.4em; } + .toolbar ul { + display: flex; + flex-direction: row; + flex-grow: 1; } + .toolbar li { + text-align: center; + position: relative; } + .toolbar li a, + .toolbar li span, + .toolbar li em, + .toolbar li strong, .toolbar li.toolbar-element { + display: block; + padding: 0.5333333333em 0.8em; } + .toolbar li ul { + visibility: hidden; + opacity: 0; + position: absolute; + transition: all 0.5s ease; + margin-top: 0rem; + left: 0; + display: none; + padding: 0.33rem; + z-index: 2; + background-color: #e9ecef; } + .toolbar li:hover ul, + .toolbar li ul:hover, .toolbar li:focus-within ul { + visibility: visible; + opacity: 1; + display: flex; + flex-direction: column; + border-radius: 8px; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); + width: max-content; } + .toolbar li:hover ul li, + .toolbar li ul:hover li, .toolbar li:focus-within ul li { + text-align: left; } + +.menu-divider, +.menu ul h1, +ul.menu h1, +.menu h2, +ul.menu h2 { + position: relative; + left: -0.4em; + font-weight: 800; + padding-top: 0.4em; + padding-bottom: 0.4em; + font-size: 1em; + line-height: 1.6em; } + +.menu-label { + transition: background-color .2s, border .2s, box-shadow .2s, color .2s; + padding-left: 0.4em; + padding-right: 0.4em; } + .menu-label:hover, .menu-label:active { + background-color: transparent; } + +blockquote, +.quote, +.well, +pre, +.pre, +.well-pre, +.toast, +.code { + border: 0; + border-radius: 4px; + margin: 0 0 1.6rem 0; + padding: 1.6rem 1rem 1.6rem 1rem; + max-width: 100%; + font-style: italic; + background-color: #e9ecef; + color: #212529; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } + +.toast { + font-size: 0.8rem; + line-height: 1.5em; + padding: 0.8em; } + +code { + font-family: monospace, monospace; } + +table { + border-collapse: collapse; } + +table, th, td { + border: 0; + padding: 0; + margin: 0; } + +th, td { + vertical-align: center; + padding-top: 0.325em; + padding-bottom: 0.325em; } + +th { + font-weight: 800; } + +.sidebar-container { + width: 100%; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + row-gap: 1.6rem; + column-gap: 3.2rem; + grid-template-areas: "side" "main"; } + @media (min-width: 992px) { + .sidebar-container { + grid-template-columns: 360px auto; + grid-template-areas: "side main"; } } + .sidebar-container .sidebar { + padding: 1rem; } + +input, +textarea { + width: 100%; + background-color: #ffffff; + border-radius: 4px; + border: 0px solid rgba(0, 0, 0, 0); + padding: 0.4em; + line-height: 1.6em; } + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: inherit; + margin: 0; } + +button, +select { + text-transform: none; } + +button, +[type="button"], +[type="reset"], +[type="submit"] { + appearance: button; + -webkit-appearance: button; } + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 2px dotted var(--accent-color); } + +fieldset { + padding: 0.35em 0.75em 0.625em; } + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; } + +progress { + vertical-align: baseline; } + +textarea { + overflow: auto; } + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; } + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +[type="search"] { + appearance: textfield; + -webkit-appearance: textfield; + outline-offset: -2px; } + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } + +/* 1. Utils +** All the utilities class of the stylesheet +*/ +/* 1.0 - Accessibility classes + * Some classes to help accessibility +**/ +.sr-only, .screen-reader-text { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; } + +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; } + +.skip { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + +.skip:focus-within { + position: static; + width: auto; + height: auto; } + +/* 1.1 - Alignement classes + * Handle easily alignement and flexboxes +**/ +.flex-that { + display: flex; + justify-content: space-between; } + +.align-center { + text-align: center; + text-indent: 0 !important; } + +.align-left { + text-align: left; } + +.align-right { + text-align: right; } + +.round, .pill { + border-radius: 9999px; } + +.no-borders { + border-width: 0px; + border-style: none; } + +/* 1.2 - Colorization classes + * Colorize some aspect of a class +**/ +.c-primary { + --accent-color: #e03131; + --text-color-contrast: #ffffff; + --accent-color-hover: #cc1f1f; + --accent-color-soft: #ffe3e3; } + +.c-secondary { + --accent-color: #343a40; + --text-color-contrast: #ffffff; + --accent-color-hover: #3d444b; + --accent-color-soft: #ced4da; } + +.c-warning { + --accent-color: #e8590c; + --text-color-contrast: #ffffff; + --accent-color-hover: #c44b0a; + --accent-color-soft: #ffe8cc; } + +.c-danger { + --accent-color: #e03131; + --text-color-contrast: #ffffff; + --accent-color-hover: #cc1f1f; + --accent-color-soft: #ffe3e3; } + +.c-info { + --accent-color: #1971c2; + --text-color-contrast: #ffffff; + --accent-color-hover: #155da0; + --accent-color-soft: #d0ebff; } + +.c-success { + --accent-color: #2f9e44; + --text-color-contrast: #ffffff; + --accent-color-hover: #268137; + --accent-color-soft: #d3f9d8; } + +.c-muted { + --accent-color: #adb5bd; + --text-color-contrast: #ffffff; + --accent-color-hover: #98a2ac; + --accent-color-soft: #f1f3f5; } + +.c-light { + --accent-color: #ffffff; + --text-color-contrast: #212529; + --accent-color-hover: #ececec; + --accent-color-soft: #ffffff; } + +.c-dark { + --accent-color: #343a40; + --text-color-contrast: #ffffff; + --accent-color-hover: #3d444b; + --accent-color-soft: #ced4da; } + +.bg-accent { + background-color: var(--accent-color); } + +.bg-dark { + background-color: #343a40; } + +.bg { + background-color: #ffffff; } + +.bg-alt { + background-color: #e9ecef; } + +.bg-soft { + background-color: var(--accent-color-soft); } + +.fg-light { + --text-color:#ffffff; + --link-color-hover:rgba(255, 255, 255, 0.3); } + +.fg-dark { + color: #212529; + --text-color:#212529; + --link-color-hover:rgba(33, 37, 41, 0.15); } + +/* 1.3 - List classes + * Handle more easily list +**/ +.no-pills { + list-style: none; } + +/* 1.3 - Sizing classes + * Handle sizing and margin +**/ +.m-half { + margin: 0.8rem; } + +.mb-half { + margin-bottom: 0.8rem; } + +.mr-half { + margin-right: 0.8rem; } + +.ml-half { + margin-left: 0.8rem; } + +.mt-half { + margin-top: 0.8rem; } + +.m-0 { + margin: 0rem; } + +.mb-0 { + margin-bottom: 0rem; } + +.mr-0 { + margin-right: 0rem; } + +.ml-0 { + margin-left: 0rem; } + +.mt-0 { + margin-top: 0rem; } + +.m-1 { + margin: 1.6rem; } + +.mb-1 { + margin-bottom: 1.6rem; } + +.mr-1 { + margin-right: 1.6rem; } + +.ml-1 { + margin-left: 1.6rem; } + +.mt-1 { + margin-top: 1.6rem; } + +.m-2 { + margin: 3.2rem; } + +.mb-2 { + margin-bottom: 3.2rem; } + +.mr-2 { + margin-right: 3.2rem; } + +.ml-2 { + margin-left: 3.2rem; } + +.mt-2 { + margin-top: 3.2rem; } + +.m-3 { + margin: 4.8rem; } + +.mb-3 { + margin-bottom: 4.8rem; } + +.mr-3 { + margin-right: 4.8rem; } + +.ml-3 { + margin-left: 4.8rem; } + +.mt-3 { + margin-top: 4.8rem; } + +.m-4 { + margin: 6.4rem; } + +.mb-4 { + margin-bottom: 6.4rem; } + +.mr-4 { + margin-right: 6.4rem; } + +.ml-4 { + margin-left: 6.4rem; } + +.mt-4 { + margin-top: 6.4rem; } + +.p-half { + padding: 0.8rem; } + +.pb-half { + padding-bottom: 0.8rem; } + +.pr-half { + padding-right: 0.8rem; } + +.pl-half { + padding-left: 0.8rem; } + +.pt-half { + padding-top: 0.8rem; } + +.p-0 { + padding: 0rem; } + +.pb-0 { + padding-bottom: 0rem; } + +.pr-0 { + padding-right: 0rem; } + +.pl-0 { + padding-left: 0rem; } + +.pt-0 { + padding-top: 0rem; } + +.p-1 { + padding: 1.6rem; } + +.pb-1 { + padding-bottom: 1.6rem; } + +.pr-1 { + padding-right: 1.6rem; } + +.pl-1 { + padding-left: 1.6rem; } + +.pt-1 { + padding-top: 1.6rem; } + +.p-2 { + padding: 3.2rem; } + +.pb-2 { + padding-bottom: 3.2rem; } + +.pr-2 { + padding-right: 3.2rem; } + +.pl-2 { + padding-left: 3.2rem; } + +.pt-2 { + padding-top: 3.2rem; } + +.p-3 { + padding: 4.8rem; } + +.pb-3 { + padding-bottom: 4.8rem; } + +.pr-3 { + padding-right: 4.8rem; } + +.pl-3 { + padding-left: 4.8rem; } + +.pt-3 { + padding-top: 4.8rem; } + +.p-4 { + padding: 6.4rem; } + +.pb-4 { + padding-bottom: 6.4rem; } + +.pr-4 { + padding-right: 6.4rem; } + +.pl-4 { + padding-left: 6.4rem; } + +.pt-4 { + padding-top: 6.4rem; } + +.f-column { + display: flex; + flex-direction: column; } + .f-column.reverse { + flex-direction: column-reverse; } + +.f-row { + display: flex; + flex-direction: row; } + .f-row.reverse { + flex-direction: row-reverse; } + +.f-start { + justify-content: flex-start; } + +.f-end { + justify-content: flex-end; } + +.f-center { + justify-content: center; } + +.f-around { + justify-content: space-around; } + +.f-between { + justify-content: space-between; } + +.d-none { + display: none !important; } + @media (min-width: 576px) { + .d-none-sm { + display: none !important; } } + @media (min-width: 768px) { + .d-none-md { + display: none !important; } } + @media (min-width: 992px) { + .d-none-lg { + display: none !important; } } + @media (min-width: 1200px) { + .d-none-xl { + display: none !important; } } + @media (min-width: 1600px) { + .d-none-xxl { + display: none !important; } } +.d-block { + display: block !important; } + @media (min-width: 576px) { + .d-block-sm { + display: block !important; } } + @media (min-width: 768px) { + .d-block-md { + display: block !important; } } + @media (min-width: 992px) { + .d-block-lg { + display: block !important; } } + @media (min-width: 1200px) { + .d-block-xl { + display: block !important; } } + @media (min-width: 1600px) { + .d-block-xxl { + display: block !important; } } +.d-flex { + display: flex !important; } + @media (min-width: 576px) { + .d-flex-sm { + display: flex !important; } } + @media (min-width: 768px) { + .d-flex-md { + display: flex !important; } } + @media (min-width: 992px) { + .d-flex-lg { + display: flex !important; } } + @media (min-width: 1200px) { + .d-flex-xl { + display: flex !important; } } + @media (min-width: 1600px) { + .d-flex-xxl { + display: flex !important; } } +/* 4 - Custom styling + * Styles that are custom to this particular theme +**/ +/* --- 03. GLOBAL STYLING --- */ +/* + * Les styles "globaux" touchant toute la page. + * + */ +.no-pills { + list-style: none; } + +.align-center { + text-align: center; } + +.align-left { + text-align: left; } + +.align-right { + text-align: right; } + +/* ------------------ HEADERS ------------------- */ +#page-header { + background: #e03131 url("../img/background.png"); + margin-bottom: 1.5rem; + font-size: 0.8rem; } + #page-header .fa { + font-size: 1rem; } + +header h1 { + border-style: none !important; + font-weight: 800; + font-size: 5.4em; + font-style: oblique; + padding: 1.5rem; + line-height: 1rem; + max-width: 1200px; + margin: auto; + text-align: center; } + header h1 img { + max-width: 800px; + height: auto; + margin-top: 0rem; + width: 100%; } + header h1 a, header h1 a:visited, header h1 a:hover { + background-color: transparent; + outline-color: white; + display: block; } + +.osd { + background-color: rgba(0, 0, 0, 0.3); } + +.navbar { + border-left: 0; + border-right: 0; + padding: 0.75rem; + color: #ffffff; } + .navbar a { + color: #ffffff; } + .navbar li { + margin: 0; } + +.categories { + font-weight: 800; + font-size: 0.8rem; } + +.dropdown-menu { + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); } + +/* ------------------ CONTAINERS ------------------- */ +.container-big { + padding-left: 1.6rem; + padding-right: 1.6rem; + max-width: 1200px; + margin: auto; } + +.container-blog { + padding-left: 1.6rem; + padding-right: 1.6rem; + max-width: 1200px; + margin: auto; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + row-gap: 1.6rem; + column-gap: 1.5rem; + grid-template-areas: "main" "side"; } + @media (min-width: 992px) { + .container-blog { + grid-template-columns: auto 300px; + grid-template-areas: "main side"; } } +.fullwidth { + grid-column: span 2; } + +.sidebar { + grid-area: side; + font-size: 0.8rem; } + +ul.tag-list { + display: flex; + padding-bottom: 0; + overflow: hidden; + height: auto; + flex-wrap: wrap; } + ul.tag-list li { + list-style: none; + margin: 3px; } + +.container-preview { + padding-left: 1.6rem; + padding-right: 1.6rem; + max-width: 1200px; + margin: auto; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + row-gap: 1.6rem; + column-gap: 3rem; + grid-template-areas: "main" "side"; } + @media (min-width: 992px) { + .container-preview { + grid-template-columns: 360px auto; + grid-template-areas: "side main"; } } +.container-onecolumn { + max-width: 1280px; + margin: auto; + padding-bottom: 1.6rem; } + +/* ------------------ PAGE ------------------- */ +#wrapper { + background-color: #ffffff; } + +/* ------------------ FOOTER ------------------- */ +body { + background-color: #343a40; } + +footer { + color: #ffffff; + --link-color: $color-footer-text; + padding-bottom: 1.5rem; } + footer .columns { + font-size: 0.8rem; + margin-top: 1.5rem; } + @media (min-width: 768px) { + footer .columns { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 1.6rem; } } + footer .columns .col { + margin-bottom: 1.6rem; } + +.home-toast { + max-width: 800px; + width: 100%; + margin: auto; } + +#featured-articles, .preview-grid { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + grid-gap: 0.5333333333rem; + margin: -0.5333333333rem; + padding-bottom: 1.6rem; } + @media (min-width: 576px) { + #featured-articles, .preview-grid { + grid-template-columns: 1fr 1fr; } } + @media (min-width: 992px) { + #featured-articles, .preview-grid { + grid-template-columns: 1fr 1fr 1fr; } } +@media (min-width: 1200px) { + .preview-grid { + grid-template-columns: 1fr 1fr 1fr 1fr; } } + +.preview-list .preview { + display: block; } + +@media (min-width: 576px) { + .preview-list .preview-thumbnail { + width: min-content; } + .preview-list .preview-thumbnail img { + width: 240px; + margin-right: 0.8rem; } + .preview-list .preview { + display: flex; + align-items: start; + margin-bottom: 1.6rem; } } + +@media (min-width: 1200px) { + .preview-list .preview-thumbnail img { + width: 320px; } } + +.preview-list .preview-text { + flex-grow: 1; } + +.preview { + font-size: 0.8rem; + text-decoration: none; + padding: 0.5333333333rem; + border-radius: 8px; } + +.preview-thumbnail { + display: block; + width: 100%; + background-color: transparent; + object-fit: cover; + padding: 0; + line-height: 0; } + .preview-thumbnail img { + width: 100%; + object-fit: cover; + height: auto; + aspect-ratio: 16/9; + border-radius: 8px; } + +.preview h2, .preview-featured h2 { + font-size: 1.25rem; + line-height: 1.5rem; + font-family: Teko, sans-serif; + font-weight: 800; + height: 3rem; + color: #212529; } + .preview h2 a, .preview-featured h2 a { + background-color: transparent !important; + color: #212529; } + +.preview-featured h2 { + color: #ffffff; } + +.preview-excerpt { + margin-top: 0.8rem; + font-size: 0.8rem; + line-height: 1.25rem; + color: rgba(33, 37, 41, 0.8); } + +.preview-featured { + font-size: 0.8rem; + padding: 0.5333333333rem; } + .preview-featured .preview-link { + display: block; + padding: 0; + border-radius: 8px; + overflow: hidden; + text-decoration: none; } + .preview-featured .preview-link .preview-item { + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + background-size: 100% auto; + background-position: center center; + transition: background-size .5s; } + .preview-featured .preview-link .preview-item:hover { + background-size: 120% auto; } + .preview-featured .preview-overlay { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + height: 100%; + color: white !important; + background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%); + padding: 0.2rem; } + .preview-featured .preview-overlay h2 { + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); } + +.article img { + max-width: 100%; + height: auto; + margin: auto; } + +.article .thumbnail img { + width: 100%; + aspect-ratio: 16 / 9; + border-radius: 8px; + object-fit: cover; } + +.article-meta .author-area { + display: flex; + align-items: center; + margin-bottom: 0.8rem; } + .article-meta .author-area img { + border-radius: 9999px; + width: 4.8rem; + height: auto; + margin: 0; + margin-right: 0.8rem; } + +.article-meta .article-category .badge { + display: inline-block; + margin-bottom: 0.4rem; } + +#mobile-sidebar { + position: fixed; + top: 0; + left: -100vw; + width: 100vw; + height: 100vh; + transition: left 0.2s; + padding: 1rem; + overflow: scroll; } + #mobile-sidebar.shown { + left: 0; } + @media (min-width: 576px) { + #mobile-sidebar { + display: none; } } +.menu-button { + position: fixed; + bottom: 24px; + right: 24px; + background-color: rgba(0, 0, 0, 0.2); + color: #ffffff; + padding: 0.75em; + border: none; + font-size: 1.2rem; + display: flex; + align-content: center; + justify-content: center; + aspect-ratio: 1; + border-radius: 999px; } + .menu-button:hover { + background-color: #e03131; } + @media (min-width: 576px) { + .menu-button { + display: none; } } diff --git a/fonts/teko-bold-webfont.woff b/fonts/teko-bold-webfont.woff new file mode 100755 index 0000000..592f7cd Binary files /dev/null and b/fonts/teko-bold-webfont.woff differ diff --git a/fonts/teko-bold-webfont.woff2 b/fonts/teko-bold-webfont.woff2 new file mode 100755 index 0000000..3f05c6c Binary files /dev/null and b/fonts/teko-bold-webfont.woff2 differ diff --git a/fonts/teko-light-webfont.woff b/fonts/teko-light-webfont.woff new file mode 100755 index 0000000..3c7030c Binary files /dev/null and b/fonts/teko-light-webfont.woff differ diff --git a/fonts/teko-medium-webfont.woff b/fonts/teko-medium-webfont.woff new file mode 100755 index 0000000..2aa760d Binary files /dev/null and b/fonts/teko-medium-webfont.woff differ diff --git a/fonts/teko-regular-webfont.woff b/fonts/teko-regular-webfont.woff new file mode 100755 index 0000000..91a438d Binary files /dev/null and b/fonts/teko-regular-webfont.woff differ diff --git a/fonts/teko-semibold-webfont.woff b/fonts/teko-semibold-webfont.woff new file mode 100755 index 0000000..b87c0c6 Binary files /dev/null and b/fonts/teko-semibold-webfont.woff differ diff --git a/generate.sh b/generate.sh new file mode 100755 index 0000000..43aa399 --- /dev/null +++ b/generate.sh @@ -0,0 +1 @@ +sassc scss/style.scss > css/style.css diff --git a/img/background.png b/img/background.png new file mode 100755 index 0000000..adc8e32 Binary files /dev/null and b/img/background.png differ diff --git a/img/default-preview.png b/img/default-preview.png new file mode 100755 index 0000000..89b24a7 Binary files /dev/null and b/img/default-preview.png differ diff --git a/img/favicon.png b/img/favicon.png new file mode 100755 index 0000000..f9ee624 Binary files /dev/null and b/img/favicon.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100755 index 0000000..5cec821 Binary files /dev/null and b/img/logo.png differ diff --git a/index.php b/index.php new file mode 100755 index 0000000..e74999e --- /dev/null +++ b/index.php @@ -0,0 +1,46 @@ + + + + + + + + + + +
+ + + +
+ +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/languages/en.json b/languages/en.json new file mode 100755 index 0000000..b91e6f4 --- /dev/null +++ b/languages/en.json @@ -0,0 +1,7 @@ +{ + "theme-data": + { + "name": "Mouette", + "description": "Theme de magazine/blog, créé originellement pour Quarante-Douze." + } +} diff --git a/metadata.json b/metadata.json new file mode 100755 index 0000000..d367577 --- /dev/null +++ b/metadata.json @@ -0,0 +1,10 @@ +{ + "author": "Kazhnuz", + "email": "", + "website": "https://kazhnuz.space", + "version": "0.0.1", + "releaseDate": "2024-03-16", + "license": "MIT", + "compatible": "3.15.0", + "notes": "" +} diff --git a/php/category.php b/php/category.php new file mode 100755 index 0000000..b48d9b9 --- /dev/null +++ b/php/category.php @@ -0,0 +1,74 @@ +
+

+ + slug()); + echo $category->name(); + ?> +

+
+ + type() != "sticky") : ?> + +
+ coverImage()) : ?> + + + + +
+
+

title(); ?>

+ +
+
+ category(); ?> +
+
+ +
+
+
description(); ?>
+
+ + + +
+ + 1) : ?> + + +
+ + diff --git a/php/footer.php b/php/footer.php new file mode 100755 index 0000000..fc24bc6 --- /dev/null +++ b/php/footer.php @@ -0,0 +1,40 @@ + \ No newline at end of file diff --git a/php/head.php b/php/head.php new file mode 100755 index 0000000..de4ca86 --- /dev/null +++ b/php/head.php @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/php/header.php b/php/header.php new file mode 100755 index 0000000..dd18bea --- /dev/null +++ b/php/header.php @@ -0,0 +1,81 @@ + +
+
+
+ + +
    +
  • +
    + + +
    +
    • + +
+
+
+ +
+

+ + title() ?> + +

+
+ +
diff --git a/php/home.php b/php/home.php new file mode 100755 index 0000000..12ae10e --- /dev/null +++ b/php/home.php @@ -0,0 +1,97 @@ +
+ + +
+

+ + À la une +

+ +
+ +
+

Publications

+ +
+ + type() != "sticky") : ?> + +
+ coverImage()) : ?> + + + + +
+
+

title(); ?>

+ +
+
+ category(); ?> +
+
+ +
+
+
description(); ?>
+
+ + + +
+ + + 1) : ?> + + +
+
\ No newline at end of file diff --git a/php/icons.php b/php/icons.php new file mode 100755 index 0000000..5a00215 --- /dev/null +++ b/php/icons.php @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/php/page.php b/php/page.php new file mode 100755 index 0000000..921adce --- /dev/null +++ b/php/page.php @@ -0,0 +1,65 @@ +
+ +
+

title(); ?>

+ coverImage()): ?> + + + isStatic() && !$url->notFound()): ?> +

13 minutes

+ + +
+ content(); ?> +
+ isStatic() && !$url->notFound()): ?> + + + +
+
+ + diff --git a/php/search.php b/php/search.php new file mode 100644 index 0000000..fe3a102 --- /dev/null +++ b/php/search.php @@ -0,0 +1,73 @@ +
+

+ slug()); + echo "Recherche pour « " . $title[1] . " »"; + ?> +

+
+ + type() != "sticky") : ?> + +
+ coverImage()) : ?> + + + + +
+
+

title(); ?>

+ +
+
+ category(); ?> +
+
+ +
+
+
description(); ?>
+
+ + + +
+ + 1) : ?> + + +
+ + diff --git a/php/sidebar.php b/php/sidebar.php new file mode 100755 index 0000000..d59ab9f --- /dev/null +++ b/php/sidebar.php @@ -0,0 +1,53 @@ + \ No newline at end of file diff --git a/php/tag.php b/php/tag.php new file mode 100644 index 0000000..5afcfe8 --- /dev/null +++ b/php/tag.php @@ -0,0 +1,74 @@ +
+

+ + slug()); + echo $tag->name(); + ?> +

+
+ + type() != "sticky") : ?> + +
+ coverImage()) : ?> + + + + +
+
+

title(); ?>

+ +
+
+ category(); ?> +
+
+ +
+
+
description(); ?>
+
+ + + +
+ + 1) : ?> + + +
+ + diff --git a/scss/_core.scss b/scss/_core.scss new file mode 100755 index 0000000..fbd3fe2 --- /dev/null +++ b/scss/_core.scss @@ -0,0 +1,9 @@ +/* 0. CORE +** All the basic functions from the stylesheet +*/ + +@import 'core/bases'; +@import 'core/typography'; +@import 'core/containers'; +@import 'core/icons'; +//@import 'core/columns'; diff --git a/scss/_definitions.scss b/scss/_definitions.scss new file mode 100755 index 0000000..e8af2d9 --- /dev/null +++ b/scss/_definitions.scss @@ -0,0 +1,12 @@ +// DEFINITIONS + +// Global definitions and variables of the stylesheet +// With them, you can customize easily how the style look +// Look at each component inside the definitions subfolder to customize the +// styles + +@import 'definitions/palette'; +@import 'definitions/shadows'; +@import 'definitions/fonts'; +@import 'definitions/borders'; +@import 'definitions/sizing'; diff --git a/scss/_dep.scss b/scss/_dep.scss new file mode 100755 index 0000000..a933bc2 --- /dev/null +++ b/scss/_dep.scss @@ -0,0 +1,2 @@ +// DEPENDECIES +// Other style used as dependencies diff --git a/scss/_drawing.scss b/scss/_drawing.scss new file mode 100755 index 0000000..2e1e535 --- /dev/null +++ b/scss/_drawing.scss @@ -0,0 +1,18 @@ +/* --- 04. COMPOSANTS --- */ + +/* + * Les différents composants réutilisables de la page. + * + */ + +@import 'components/badges'; +@import 'components/buttons'; +@import 'components/btn-groups'; +@import 'components/breadcrumb'; +@import 'components/pagination'; +@import 'components/cards'; +@import 'components/menus'; +@import 'components/toasts'; +@import 'components/tables'; +@import 'components/sidebar'; +@import 'components/input'; diff --git a/scss/_global.scss b/scss/_global.scss new file mode 100755 index 0000000..ce1e818 --- /dev/null +++ b/scss/_global.scss @@ -0,0 +1,9 @@ +/* 4 - Custom styling + * Styles that are custom to this particular theme +**/ + +@import 'custom/global'; +@import 'custom/previews'; +@import 'custom/featured'; +@import 'custom/article'; +@import 'custom/mobile'; \ No newline at end of file diff --git a/scss/_mixins.scss b/scss/_mixins.scss new file mode 100755 index 0000000..d59131c --- /dev/null +++ b/scss/_mixins.scss @@ -0,0 +1,10 @@ +// MIXINS +// Include every mixins files + +@import 'mixins/colors'; +@import 'mixins/responsive'; +@import 'mixins/borders'; +@import 'mixins/shape'; +@import 'mixins/btns'; +@import 'mixins/panels'; +@import 'mixins/li'; diff --git a/scss/_utils.scss b/scss/_utils.scss new file mode 100755 index 0000000..725c49c --- /dev/null +++ b/scss/_utils.scss @@ -0,0 +1,12 @@ +/* 1. Utils +** All the utilities class of the stylesheet +*/ + +@import 'utils/a11y'; +@import 'utils/align'; +@import 'utils/borders'; +@import 'utils/colorize'; +@import 'utils/lists'; +@import 'utils/sizing'; +@import 'utils/flex'; +@import 'utils/display'; \ No newline at end of file diff --git a/scss/components/_badges.scss b/scss/components/_badges.scss new file mode 100755 index 0000000..508ad00 --- /dev/null +++ b/scss/components/_badges.scss @@ -0,0 +1,9 @@ +.badge { + @include shape-style($button_large); + line-height: 1.5em; + padding-left: $button_small; + padding-right: $button_small; + text-decoration: none !important; + background-color: var(--accent-color); + color: var(--text-color-contrast); +} \ No newline at end of file diff --git a/scss/components/_breadcrumb.scss b/scss/components/_breadcrumb.scss new file mode 100755 index 0000000..a075363 --- /dev/null +++ b/scss/components/_breadcrumb.scss @@ -0,0 +1,25 @@ +ul.breadcrumb, +ol.breadcrumb, +.breadcrumb { + @include shape-style($button_large); + background-color: $color-background-alt; + + &::before { + background-color: $color-background-alt; + } + + padding: $button_large/2; + margin: 0 0 $lineheight; + @include li-flex(); +} + +.breadcrumb { + li:not(:first-child)::before { + content: "/"; + padding: 0.3rem; + } + + .active { + font-weight: 600; + } +} diff --git a/scss/components/_btn-groups.scss b/scss/components/_btn-groups.scss new file mode 100755 index 0000000..577b035 --- /dev/null +++ b/scss/components/_btn-groups.scss @@ -0,0 +1,24 @@ +.btn-toolbar { + padding: 0 $button-large; +} + +.btn-group { + & > .btn { + @include border-radius($btn-radius); + margin:0 $button-group-margin 0 $button-group-margin!important; + } + + &:not(:first-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius:0; + &:before { + content: " "!important; + border-left:1px solid rgba(0,0,0,0.2); + } + } + + &:not(:last-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius:0; + } +} diff --git a/scss/components/_buttons.scss b/scss/components/_buttons.scss new file mode 100755 index 0000000..cb3c61f --- /dev/null +++ b/scss/components/_buttons.scss @@ -0,0 +1,72 @@ +.btn { + @include shape-style($button_large); + text-decoration: none; + padding: $button_large/3 $button_large; + margin: $button_large/3 $button_large/2 $lineheight; + line-height: $lineheight; + height: auto; + + transition: background-color .2s, border .2s, box-shadow .2s, color .2s; + outline-color: var(--accent-color); + color: var(--text-color-contrast); + background-color: var(--accent-color); + + &:visited { + color: var(--text-color-contrast); + } + + &:hover, + &:active { + background-color: var(--accent-color-hover); + outline-color: var(--accent-color-hover); + box-shadow: none; + } + + font-weight: $fontweight_base; + + p &:last-child { + margin-bottom: 0; + } + + .fake { + background-color: transparent !important; + color:var(--text-color); + } +} + +.btn.disabled, +.btn:disabled { + opacity: 0.8; + background-color: var(--accent-color) !important; + outline-color: var(--accent-color) !important; + color: var(--text-color-contrast) !important; +} + +.btn-small { + padding: $button_small/3 $button_small/2; + margin: $button_small/3 $button_small/2 $lineheight; + + &:before { + left: -$button_small/2; + right: -$button_small/2; + } +} + + +.btn-readmore, +.btn-link { + color: var(--link-color); + + &:visited { + color: var(--link-color); + } + background-color: transparent; + + &:hover, + &:active { + &::before { + background-color: var(--link-color-hover); + } + } + +} diff --git a/scss/components/_cards.scss b/scss/components/_cards.scss new file mode 100755 index 0000000..3f2ac25 --- /dev/null +++ b/scss/components/_cards.scss @@ -0,0 +1,60 @@ +$card-bigpad: $lineheight_rel * 1.25; +$card-smallpad: $lineheight_rel / 4; + +.card { + @include panel($card-bigpad); + display: flex; + flex-direction: column; + color: $color-font; + + &-body { + padding: 0 !important; + } + + &-header { + @include panel-header($card-bigpad); + + .icon { + margin-right: 0.25em; + } + + font-family: $basefont; + color: var(--text-color-contrast); + + &::before { + background-color: var(--accent-color); + } + } +} + +@mixin list-symbol($symbol) { + li.list-element { + list-style: none; + + &::before { + font-family: "ForkAwesome"; + content: $symbol; + padding-right: $lineheight_rel / 4; + } + } +} + +@mixin list-color($color) { + li.list-element { + &::before { + color: $color; + } + } +} + +ul.card-list, +.card>ul { + padding: 0; + margin: 0; + + li.list-element { + line-height: $lineheight_rel / 2; + padding: $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 2; + margin: 0; + } +} \ No newline at end of file diff --git a/scss/components/_input.scss b/scss/components/_input.scss new file mode 100755 index 0000000..8962fff --- /dev/null +++ b/scss/components/_input.scss @@ -0,0 +1,93 @@ +input, +textarea { + width: 100%; + background-color: $color-background; + border-radius: $btn-radius; + border: 0px solid rgba(0, 0, 0, 0); + padding: $lineheight_rel / 4; + line-height: $lineheight_rel; +}button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: inherit; + margin: 0; +} + +button, +select { + text-transform: none; +} + +button, +[type="button"], +[type="reset"], +[type="submit"] { + appearance: button; + -webkit-appearance: button; +} + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 2px dotted var(--accent-color); +} + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + +progress { + vertical-align: baseline; +} + +textarea { + overflow: auto; +} + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + appearance: textfield; + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} \ No newline at end of file diff --git a/scss/components/_menus.scss b/scss/components/_menus.scss new file mode 100755 index 0000000..d66e05a --- /dev/null +++ b/scss/components/_menus.scss @@ -0,0 +1,122 @@ +.menu { + display: flex; + flex-direction: column; + + ul, + li { + list-style: none; + padding: 0; + margin: 0; + } + + a, + a:visited { + display: flex; + line-height: $lineheight_rel; + padding: $lineheight_rel / 4; + margin: 0; + justify-content: space-between; + align-items: center; + text-decoration: none; + + word-wrap: none; + text-overflow: ellipsis; + overflow: hidden; + + .badge { + margin: 0; + } + } + + a { + color: var(--text-color); + outline-color: var(--text-color); + + &:hover, + &:active, + &.submenu:focus { + background-color: var(--link-color-hover); + } + } +} + +.submenu .fa-caret-down { + position: relative; + top: 2px; + font-size: 0.8em; +} + +.toolbar { + flex-direction: row; + padding: $lineheight_rel/4; + + ul { + display: flex; + flex-direction: row; + + flex-grow: 1; + } + + li { + text-align: center; + position: relative; + + a, + span, + em, + strong, + &.toolbar-element { + display: block; + padding: $lineheight_rel/3 $lineheight_rel/2; + } + + ul { + visibility: hidden; + opacity: 0; + position: absolute; + transition: all 0.5s ease; + margin-top: 0rem; + left: 0; + display: none; + padding: 0.33rem; + z-index: 2; + background-color: $color-background-alt; + } + + &:hover ul, + ul:hover, + &:focus-within ul { + visibility: visible; + opacity: 1; + display: flex; + flex-direction: column; + border-radius: $card-radius; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); + width: max-content; + + li { + text-align: left; + } + } + } +} + +.menu-divider, +.menu ul h1, +ul.menu h1, +.menu h2, +ul.menu h2 { + position: relative; + left: -$lineheight_rel / 4; + font-weight: $fontweight_hyper; + padding-top: $lineheight_rel / 4; + padding-bottom: $lineheight_rel / 4; + font-size: 1em; + line-height: $lineheight_rel; +} + +.menu-label { + @include button-hover(); + padding-left: $button_small; + padding-right: $button_small; +} \ No newline at end of file diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss new file mode 100755 index 0000000..1289935 --- /dev/null +++ b/scss/components/_pagination.scss @@ -0,0 +1,32 @@ +nav.pagination { + padding-bottom: $lineheight; + + .nav-links { + text-align: center; + width: 100%; + } + + .page-numbers, + .next, + .prev { + @include shape-style($button_small); + padding: $button_small/2 $button_small; + margin: $button_small / 2; + text-decoration: none; + + &:not(.current):not(.dots) { + outline-color: var(--accent-color); + color: var(--link-color); + + &:hover { + background-color: var(--link-color-hover); + } + } + + &.current { + @include background-color($color-primary); + + background-color: $color-primary; + } + } +} \ No newline at end of file diff --git a/scss/components/_previews.scss b/scss/components/_previews.scss new file mode 100755 index 0000000..d3ed9fd --- /dev/null +++ b/scss/components/_previews.scss @@ -0,0 +1,263 @@ +$preview-height: 8*$lineheight; +$preview-content-height:165px; +$comment-peek-height:0px; +$comment-height:30px; + +.preview-grid { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + grid-gap: $lineheight; + padding-bottom: $lineheight; + + @include md() { + grid-template-columns: 1fr 1fr; + } + + @include xl() { + grid-template-columns: 1fr 1fr 1fr; + } + + @include xxl() { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} + +.preview-container { + width:100%; +} + +@media(max-width:767px){} +@media(min-width:768px){} +@media(min-width:992px){ + + .prev-col-2 .preview-container { + width:50%; + } + + .prev-col-3 .preview-container { + width:33%; + } + + .prev-col-4 .preview-container { + width:25%; + } + +} + +.card-preview { + padding:0; + width:100%; + margin:auto; + box-shadow: $large-shadow, $inset-shadow; +} + +.preview-link { + padding:0; + background-color: transparent; + margin:0!important; +} + +.preview-item { + height: $preview-height; + font-size:0.9rem; + line-height: $lineheight !important; + text-align:justify; + background-color:rgba(0,0,0,0.00); + color:dim(getFontColor()); + position: relative; + + display: flex; + -ms-flex-align: center !important; + align-items: center !important; + justify-content: center; + + .preview-overlay { + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + padding-top: $card-header-vmargin/2; + backdrop-filter: none; + transition: background-color 0.3s; + @include border-radius($card-radius); + + h1, h2, h3, h4, h5, h6 { + color: $color-font-light; + font-size: 1rem; + line-height: $lineheight; + font-weight:$fontweight_big; + } + + .card-header { + font-family: $basefont; + font-size: 1rem; + @include panel-header($lineheight_half); + @include colorize-shape($color-primary); + color:getTextColorFromBackground($color-primary); + font-weight: $fontweight_big; + margin-top:0px; + } + } + + &:hover { + .preview-overlay { + backdrop-filter: blur(2px); + background-color:rgba(0,0,0,0.4); + + .metadata-pills { + opacity: .9; + transition: opacity .5s, height .5s; + height:$preview-content-height - $comment-height; + } + } + } +} + +.preview-content { + max-height: $preview-height; + overflow:hidden; + background-size: cover; + min-height:100%; + min-width:100%; + @include border-radius($card-radius); + font-size:0.85rem; + line-height:1.25rem; + + h1, h2, h3, h4, h5, h6 { + margin-bottom:0px; + max-width:100%; + display:none; + } + + & > p { + width:100%; + margin:auto; + + & > img { + max-width:100%; + height:auto; + vertical-align:middle; + margin:auto; + text-align:center; + } + + &.p-img { + text-align:center; + margin:auto; + padding:auto; + display: block; + width:100%; + } + } +} + +.preview-metadata { + color: $color-font-light; + height:$preview-content-height; + overflow: hidden; + @include border-radius($card-radius); + + .metadata-pills { + height:$preview-content-height - $comment-peek-height; + opacity: 0; + transition: opacity .3s, height .3s; + display:flex; + justify-content:space-between; + padding-left: $lineheight/2; + padding-right: $lineheight/2; + font-size:0.9em; + } +} + +.card-preview.head-info { + .comment-text { + background-color:$color-secondary; + } +} + +.card-preview.card-grey { + .comment-text { + background-color:$color-muted; + } +} + +.comment-text { + color: $color-font-light; + background-color:$color-primary; + text-align: center; +} + +.card-preview time { + margin-bottom:0.4em; + display:block; +} + +// Author area + +.author-area { + display:flex; + + img.author-avatar, img.avatar { + display:block; + height: $lineheight*3; + width:auto; + border-radius:100%; + padding:0; + margin:0; + margin-right:$lineheight; + } + + .author-metadata { + align-items:center; + display:flex; + flex-direction:column; + justify-content: center; + align-items: flex-start; + } + + .author-date { + font-style:italic; + } + + &:not(:last-child) { + margin-bottom:$lineheight; + } +} + +.pigimg { + display:block; + max-width: 100%; + height:auto; + margin:auto; +} + +.avatar { + background: transparent; +} + +.mwarea { + padding-bottom: $lineheight; + .avatar { + width:80%; + height:auto; + display:block; + margin:auto; + } +} + +.cover { + width:100%; + height:auto; + @include border-radius($card-radius); +} + +.roman { + @include md() { + width:80%; + position:relative; + top:-240px; + margin:auto; + } +} diff --git a/scss/components/_sidebar.scss b/scss/components/_sidebar.scss new file mode 100755 index 0000000..52bb38d --- /dev/null +++ b/scss/components/_sidebar.scss @@ -0,0 +1,21 @@ +.sidebar-container { + width:100%; + + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + row-gap: $lineheight; + column-gap: $lineheight*2; + grid-template-areas: + "side" + "main"; + + @include lg() { + grid-template-columns: 360px auto; + grid-template-areas: "side main"; + } + + .sidebar { + padding:1rem; + } +} diff --git a/scss/components/_tables.scss b/scss/components/_tables.scss new file mode 100755 index 0000000..c6cc8f0 --- /dev/null +++ b/scss/components/_tables.scss @@ -0,0 +1,19 @@ +table { + border-collapse: collapse; +} + +table, th, td { + border:0; + padding:0; + margin:0; +} + +th, td { + vertical-align:center; + padding-top: 0.325em; + padding-bottom: 0.325em; +} + +th { + font-weight: $fontweight_hyper; +} diff --git a/scss/components/_toasts.scss b/scss/components/_toasts.scss new file mode 100755 index 0000000..492e4e3 --- /dev/null +++ b/scss/components/_toasts.scss @@ -0,0 +1,33 @@ +@mixin well() { + border: 0; + border-radius: $well-radius; + + margin: 0 0 $lineheight 0; + padding: $lineheight 1rem $lineheight 1rem; + + max-width: 100%; + font-style: italic; + @include background-color($color-background-alt); + box-shadow: $narrow-shadow; +} + +blockquote, +.quote, +.well, +pre, +.pre, +.well-pre, +.toast, +.code { + @include well(); +} + +.toast { + font-size: 0.8rem; + line-height: 1.5em; + padding: $card-smallpad * 2; +} + +code { + font-family: monospace, monospace; +} \ No newline at end of file diff --git a/scss/core/_bases.scss b/scss/core/_bases.scss new file mode 100755 index 0000000..0c4f1b6 --- /dev/null +++ b/scss/core/_bases.scss @@ -0,0 +1,47 @@ +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + // Text initialization + font-family: $basefont; + text-align: left; + font-size: $fontsize; + line-height: $lineheight; + font-weight: $fontweight_base; + + // Normalization + box-sizing: border-box; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; + overflow-x: hidden; + text-rendering: optimizeLegibility; + color: var(--text-color); +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} \ No newline at end of file diff --git a/scss/core/_box-sizing.scss b/scss/core/_box-sizing.scss new file mode 100755 index 0000000..dbe61eb --- /dev/null +++ b/scss/core/_box-sizing.scss @@ -0,0 +1,18 @@ +/* 0.2 - Box-sizing + * Make sure that everything have its box-sizing to border-box +**/ + +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + box-sizing: border-box; +} + +body { + overflow-x: hidden; + text-rendering: optimizeLegibility; +} diff --git a/scss/core/_columns.scss b/scss/core/_columns.scss new file mode 100755 index 0000000..92a9065 --- /dev/null +++ b/scss/core/_columns.scss @@ -0,0 +1,68 @@ +@mixin column($size) { + grid-column: span $size; + width:100%; + margin:0; + + & > *:last-child { + margin-bottom:0!important; + } +} + +@mixin column-list() { + &-1 {@include column(1);} + &-2 {@include column(2);} + &-3 {@include column(3);} + &-4 {@include column(4);} + &-5 {@include column(5);} + &-6 {@include column(6);} + &-7 {@include column(7);} + &-8 {@include column(8);} + &-9 {@include column(9);} + &-10 {@include column(10);} + &-11 {@include column(11);} + &-12 {@include column(12);} +} + +.columns { + display:grid; + grid-gap:$lineheight; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: auto; + padding:$lineheight; + &-nogap { + grid-gap:0px; + } +} + +.column { + @include column(12); +} + +.col { + @include column-list(); + &-sm { + @include sm() { + @include column-list(); + } + } + &-md { + @include md() { + @include column-list(); + } + } + &-lg { + @include lg() { + @include column-list(); + } + } + &-xl { + @include xl() { + @include column-list(); + } + } + &-xxl { + @include xxl() { + @include column-list(); + } + } +} diff --git a/scss/core/_containers.scss b/scss/core/_containers.scss new file mode 100755 index 0000000..d36380f --- /dev/null +++ b/scss/core/_containers.scss @@ -0,0 +1,11 @@ +#wrapper { + background-color: $color-background; +} + +.container-big { + @include container($container-size-large, $lineheight); +} + +.container, .container-onecolumn { + @include container($container-size, $lineheight); +} diff --git a/scss/core/_icons.scss b/scss/core/_icons.scss new file mode 100755 index 0000000..14d97c5 --- /dev/null +++ b/scss/core/_icons.scss @@ -0,0 +1,15 @@ +.icon { + display: inline-block; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; + color: currentColor; + position: relative; + top: 0.1em; +} + +.icon.icon-newspaper-o { + top: 0.15em; +} \ No newline at end of file diff --git a/scss/core/_normalize.scss b/scss/core/_normalize.scss new file mode 100755 index 0000000..192eb9c --- /dev/null +++ b/scss/core/_normalize.scss @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/scss/core/_typography.scss b/scss/core/_typography.scss new file mode 100755 index 0000000..f9ac450 --- /dev/null +++ b/scss/core/_typography.scss @@ -0,0 +1,179 @@ +@mixin paragraph() { + padding:0; + padding-bottom: $lineheight; + margin: 0; +} + +:root { + @include accent-color($color-primary, get-color-light("primary")); + --text-color:#{$color-font}; + --link-color-hover:#{transparentize($color-font, 0.85)}; + --link-color:#{darken($color-link, 10%)}; +} + +strong { + font-weight: $fontweight_bold; +} + +em { + font-style: italic; + font-weight: $fontweight_base; +} + +mark { + padding: 0.05rem 0.25rem; + border-radius: 0.1rem; +} + +a { + color: var(--link-color); + outline-color: $color-link; + padding: 0.05rem; + border-radius: 0.1rem; + text-decoration: underline dashed 1px; + text-underline-offset: 0.1rem; + + &:visited { + color: var(--link-color); + } + + &:hover, + &:active { + background-color: var(--link-color-hover); + text-decoration: none; + } +} + +a:focus-visible, input:focus-visible { + outline-style: dashed; + outline-width: 2px; + outline-offset: 1px; +} + +mark { + background-color: lighten($color-mark, 30%); + color: inherit; +} + +p, ul, ol { + @include paragraph(); + &:last-child { + padding-bottom:0; + } +} + +ul, ol { + list-style: disc; + ul, ol { + padding-bottom:0; + margin:0; + } + li { + margin:0; + margin-left: $lineheight; + line-height: $lineheight; + } + + &.nolist { + display:inline; + list-style: none; + margin: 0; + padding: 0; + li { + display: inline; + margin: 0; + padding: 0; + } + } +} + +::selection, ::-moz-selection { + @include background-color($color-selection); +} + +@mixin newTitle($size, $weight) { + $lineNumber: ceil($size / 1.5); + font-size: $size * 1rem; + line-height: $lineNumber * $lineheight; + font-weight: $weight; +} + +h1, h2, h3, h4, h5, h6, h7 { + font-family: $basefont; + text-align: left; + font-size: 1em; + padding:0; + margin:0; + font-weight: $fontweight_base; + padding-bottom: $lineheight; + a { + border: none; + } +} + +sup, sub { + & > a { + color: $color-link; + background-color:transparent; + &:hover, &:focus, &:active { + color: darken($color-link, 10%); + } + } +} + +.main-title { + font-family: $titlefont; + @include newTitle(3.815, $fontweight_hyper); +} + +h1, .title-1 { + font-family: $titlefont; + @include newTitle(2.441, $fontweight_hyper); + color: $color-primary; +} + +h2, .title-2 { + @include newTitle(2.441, $fontweight_big); +} + +h3, .title-3 { + @include newTitle(1.953, $fontweight_bold); +} + +h4, .title-4 { + @include newTitle(1.563, $fontweight_hyper); +} + +h5, .title-5 { + @include newTitle(1.25, $fontweight_bold); +} + +h6, .title-6 { + @include newTitle(1, $fontweight_hyper); +} + +hr { + border: 0px solid rgba(1, 1, 1, 0.15); + border-bottom: 1px; + margin: 1.5em; + box-sizing: content-box; + height: 0; + overflow: visible; +} + +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +.small-text, +small { + font-size: 0.9em; +} + +.time { + font-style: italic; + text-align: right; + width: 100%; + display: block; +} \ No newline at end of file diff --git a/scss/custom/_article.scss b/scss/custom/_article.scss new file mode 100755 index 0000000..553e2bc --- /dev/null +++ b/scss/custom/_article.scss @@ -0,0 +1,37 @@ +.article { + img { + max-width:100%; + height:auto; + margin:auto; + } + + .thumbnail img { + width:100%; + aspect-ratio: 16 / 9; + border-radius: $card-radius; + object-fit: cover; + } +} + +.article-meta { + .author-area { + display: flex; + align-items: center; + margin-bottom: $lineheight / 2; + + img { + border-radius: 9999px; + width: $lineheight * 3; + height: auto; + margin: 0; + margin-right: $lineheight / 2; + } + } + + .article-category { + .badge { + display: inline-block; + margin-bottom: $lineheight / 4; + } + } +} \ No newline at end of file diff --git a/scss/custom/_featured.scss b/scss/custom/_featured.scss new file mode 100755 index 0000000..0a7f715 --- /dev/null +++ b/scss/custom/_featured.scss @@ -0,0 +1,39 @@ +.preview-featured { + font-size: 0.8rem; + padding: $lineheight / 3; + + .preview-link { + display: block; + padding:0; + border-radius: $card-radius; + overflow: hidden; + text-decoration: none; + .preview-item { + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + background-size:100% auto; + background-position: center center; + transition: background-size .5s; + + &:hover { + background-size: 120% auto; + } + } + } + + .preview-overlay { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + height:100%; + color: white !important; + background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%); + padding:$lineheight / 8; + + h2 { + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); + } + } +} \ No newline at end of file diff --git a/scss/custom/_global.scss b/scss/custom/_global.scss new file mode 100755 index 0000000..c73256b --- /dev/null +++ b/scss/custom/_global.scss @@ -0,0 +1,200 @@ +/* --- 03. GLOBAL STYLING --- */ + +/* + * Les styles "globaux" touchant toute la page. + * + */ + +@mixin li-no-margin() { + li { + margin: 0; + } +} + +@mixin container-big() { + padding-left: $lineheight; + padding-right: $lineheight; + max-width: $container-size; + margin:auto; +} + +.no-pills { + list-style:none; +} + +.align { + &-center {text-align: center;} + &-left {text-align: left;} + &-right {text-align: right;} +} + + /* ------------------ HEADERS ------------------- */ + +#page-header { + background: $color-primary url('../img/background.png'); + margin-bottom:1.5rem; + font-size: 0.8rem; + .fa { + font-size: 1rem; + } +} + +header h1 { + border-style:none !important; + font-weight: $fontweight_hyper; + font-size:5.4em; + font-style:oblique; + padding:1.5rem; + line-height: 1rem; + max-width: $container-size; + margin: auto; + text-align:center; + + img { + max-width: 800px; + height: auto; + margin-top:0rem; + width: 100%; + } + + a, a:visited, a:hover { + background-color:transparent; + outline-color:white; + display: block; + } +} + +.osd { + background-color:rgba(0,0,0,0.3); +} + +.navbar { + border-left: 0; + border-right: 0; + padding: 0.75rem; + color: $color-font-light; + a { + color: $color-font-light; + } + @include li-no-margin(); +} + +.categories { + font-weight:800; + font-size:0.8rem; +} + +.dropdown-menu { + box-shadow: $narrow-shadow, $inset-shadow; +} +/* ------------------ CONTAINERS ------------------- */ + +.container-big { + @include container-big(); +} + +.container-blog { + @include container-big(); + + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + row-gap: $lineheight; + column-gap: 1.5rem; + grid-template-areas: + "main" + "side"; + + @include lg() { + grid-template-columns: auto 300px; + grid-template-areas: "main side"; + } +} + +.fullwidth { + grid-column: span 2; +} + +.sidebar { + grid-area: side; + font-size: 0.8rem; +} + +ul.tag-list { + display:flex; + padding-bottom:0; + overflow: hidden; + height:auto; + flex-wrap: wrap; + + li { + list-style: none; + margin:3px; + } +} + +.container-preview { + @include container-big(); + + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + row-gap: $lineheight; + column-gap: 3rem; + grid-template-areas: + "main" + "side"; + + @include lg() { + grid-template-columns: 360px auto; + grid-template-areas: "side main"; + } +} + +.container-onecolumn { + max-width:1280px; + margin: auto; + padding-bottom: $lineheight; +} + +/* ------------------ PAGE ------------------- */ + +#wrapper { + background-color: $color-background; +} + + /* ------------------ FOOTER ------------------- */ + +$color-footer-back: get-color("dark"); +$color-footer-text: get-color("light"); + +body { + // On colorise le background de la page complete de la même + // couleur que le fond du footer. + background-color: $color-footer-back; +} + +footer { + color: $color-footer-text; + --link-color: $color-footer-text; + padding-bottom:1.5rem; + .columns { + font-size:0.8rem; + margin-top: 1.5rem; + @include md() { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: $lineheight; + } + + .col { + margin-bottom: $lineheight; + } + } +} + +.home-toast { + max-width:800px; + width:100%; + margin:auto; +} \ No newline at end of file diff --git a/scss/custom/_mobile.scss b/scss/custom/_mobile.scss new file mode 100755 index 0000000..46c92a7 --- /dev/null +++ b/scss/custom/_mobile.scss @@ -0,0 +1,41 @@ +#mobile-sidebar { + position: fixed; + top:0; + left:-100vw; + width:100vw; + height:100vh; + transition: left 0.2s; + padding: 1rem; + overflow: scroll; + &.shown { + left:0; + } + + @include sm() { + display:none; + } +} + +.menu-button { + position:fixed; + bottom: 24px; + right: 24px; + background-color:rgba(0,0,0,0.2); + color:$color-font-light; + padding:0.75em; + border:none; + font-size:1.2rem; + display:flex; + align-content: center; + justify-content: center; + aspect-ratio: 1; + border-radius:999px; + + &:hover { + background-color:$color-primary; + } + + @include sm() { + display: none; + } +} \ No newline at end of file diff --git a/scss/custom/_previews.scss b/scss/custom/_previews.scss new file mode 100755 index 0000000..2f13a2e --- /dev/null +++ b/scss/custom/_previews.scss @@ -0,0 +1,99 @@ +#featured-articles, .preview-grid { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + grid-gap: $lineheight / 3; + margin: -$lineheight / 3; + padding-bottom: $lineheight; + + @include sm() { + grid-template-columns: 1fr 1fr; + } + + @include lg() { + grid-template-columns: 1fr 1fr 1fr; + } +} + +.preview-grid { + @include xl() { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} + +.preview-list { + .preview { + display: block; + } + @include sm() { + .preview-thumbnail { + width: min-content; + img { + width: 240px; + margin-right: $lineheight /2; + } + } + + .preview { + display: flex; + align-items: start; + margin-bottom: $lineheight; + } + } + @include xl() { + .preview-thumbnail img { + width: 320px; + } + } + + .preview-text { + flex-grow:1; + } +} + +.preview { + font-size: 0.8rem; + text-decoration: none; + padding: $lineheight / 3; + border-radius: $card-radius; +} + +.preview-thumbnail { + display:block; + width: 100%; + background-color:transparent; + object-fit: cover; + padding:0; + line-height:0; + img { + width:100%; + object-fit: cover; + height: auto; + aspect-ratio: 16/9; + border-radius: $card-radius; + } +} + +.preview h2, .preview-featured h2 { + font-size:1.25rem; + line-height: 1.5rem; + font-family: $titlefont; + font-weight: 800; + height:3rem; + color: $color-font; + a { + background-color:transparent!important; + color:$color-font; + } +} + +.preview-featured h2 { + color: $color-font-light; +} + +.preview-excerpt { + margin-top: $lineheight / 2; + font-size:0.8rem; + line-height:1.25rem; + color:transparentize($color-font, 0.2); +} \ No newline at end of file diff --git a/scss/definitions/_borders.scss b/scss/definitions/_borders.scss new file mode 100755 index 0000000..258b028 --- /dev/null +++ b/scss/definitions/_borders.scss @@ -0,0 +1,6 @@ +// BORDERS AND BORDER-RADIUSES + +$card-radius: 8px; +$btn-radius: 4px; +$well-radius: $btn-radius; +$border-size: 0px; diff --git a/scss/definitions/_fonts.scss b/scss/definitions/_fonts.scss new file mode 100755 index 0000000..7ece446 --- /dev/null +++ b/scss/definitions/_fonts.scss @@ -0,0 +1,54 @@ +// FONTS +// Define how looks the text + +$fontsize: 4.75mm; + +$fontweight_big: 300; +$fontweight_base: 400; +$fontweight_bold: 600; +$fontweight_hyper: 800; + +$basefont: Inter, +-apple-system, +BlinkMacSystemFont, +'Segoe UI', +Cantarell, +Roboto, +Oxygen, +Ubuntu, +'Fira Sans', +'Droid Sans', +'Helvetica Neue', +sans-serif; +$titlefont: Teko, sans-serif; + +@font-face { + font-family: 'Teko'; + src: url('../fonts/teko-light-webfont.woff'); + font-weight: 300; +} + +@font-face { + font-family: 'Teko'; + src: url('../fonts/teko-regular-webfont.woff'); + font-weight: 400; +} + +@font-face { + font-family: 'Teko'; + src: url('../fonts/teko-medium-webfont.woff'); + font-weight: 500; +} + +@font-face { + font-family: 'Teko'; + src: url('../fonts/teko-semibold-webfont.woff'); + font-weight: 600; +} + +@font-face { + font-family: 'Teko'; + src: url('../fonts/teko-bold-webfont.woff2') format('woff2'), url('../fonts/teko-bold-webfont.woff') format('woff'); + font-weight: 700; + font-display: swap; +} \ No newline at end of file diff --git a/scss/definitions/_palette.scss b/scss/definitions/_palette.scss new file mode 100755 index 0000000..8637202 --- /dev/null +++ b/scss/definitions/_palette.scss @@ -0,0 +1,113 @@ +/* --- 00. PALETTE --- */ + +/* + * Les définitions globales des couleurs du theme. + * + * Elle permettent de définir rapidement à la fois les couleurs + * de base qui seront utilisée pour tout le theme, mais + * également celles spécifiques pour certains sujets (liens, texte) + * + */ + +$whiteness_value: 0.8; + +// Couleurs de base du theme : + +$palette: ( + "blue":#1971c2, + "violet":#6741d9, + "red":#e03131, + "orange":#e8590c, + "green":#2f9e44, + "skyblue":#0c8599, + "dark": #343a40, + "light":#ffffff, + "yellow":#ffe066, + "grey":#adb5bd, + "dark2":#212529, + "light2":#e9ecef); + +$palette-light: ( + "blue": #d0ebff, + "violet":#e5dbff, + "red":#ffe3e3, + "orange":#ffe8cc, + "green":#d3f9d8, + "skyblue":#c5f6fa, + "yellow":#fff3bf, + "light":#ffffff, + "grey":#f1f3f5, + "dark":#ced4da +); + +$semantics: ( + "primary":"red", + "secondary":"dark", + "warning":"orange", + "danger":"red", + "info":"blue", + "success":"green", + "muted":"grey", + "light":"light", + "dark":"dark"); + +$helpers: ( + "font":"dark2", + "font-light":"light", + "background":"light", + "background-alt":"light2", + "link":"red", + "selection":"blue", + "mark":"yellow", +); + +@function get-color($name) { + @if map-has-key($helpers, $name) { + @return map-get($palette, map-get($helpers, $name)); + } @else { + @if map-has-key($semantics, $name) { + @return map-get($palette, map-get($semantics, $name)); + } @else { + @return map-get($palette, $name); + } + } +} + +@function get-color-light($name) { + @if map-has-key($helpers, $name) { + @return map-get($palette-light, map-get($helpers, $name)); + } + + @else { + @if map-has-key($semantics, $name) { + @return map-get($palette-light, map-get($semantics, $name)); + } + + @else { + @return map-get($palette-light, $name); + } + } +} + +// **Couleurs du theme** +// Ne pas retirer ces couleurs, qui +// sont essentielle pour que le framework functionne. +// Pour les modifier, modifier le contenu du tableau $semantics. + +$color-link: get-color("link"); +$color-selection: get-color("selection"); +$color-mark: get-color("mark"); +$color-font: get-color("font"); +$color-font-light: get-color("font-light"); + +$color-primary: get-color("primary"); +$color-secondary: get-color("secondary"); +$color-warning: get-color("warning"); +$color-danger: get-color("danger"); +$color-info: get-color("info"); +$color-success: get-color("success"); + +$color-muted: get-color("muted"); + +$color-background: get-color("background"); +$color-background-alt: get-color("background-alt"); diff --git a/scss/definitions/_shadows.scss b/scss/definitions/_shadows.scss new file mode 100755 index 0000000..625c56f --- /dev/null +++ b/scss/definitions/_shadows.scss @@ -0,0 +1,8 @@ +// SHADOWS +// Define how looks the shadows and the relief effects + +$large-shadow: 0px 2px 4px rgba(0, 0, 0, 0); +$narrow-shadow: 0px 1px 2px rgba(0, 0, 0, 0); +$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0); +$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0); +$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0); diff --git a/scss/definitions/_sizing.scss b/scss/definitions/_sizing.scss new file mode 100755 index 0000000..4682d27 --- /dev/null +++ b/scss/definitions/_sizing.scss @@ -0,0 +1,35 @@ +// SIZING +// All the spacing and sizing variables + +$baseline: 1.6; + +$lineheight: $baseline * 1rem; +$lineheight_half: $lineheight/2; +$lineheight_quarter: $lineheight/4; +$lineheight_rel: $baseline * 1em; + +$card-header-vmargin: 0px; +$card-header-hmargin: 0px; +$card-header-padding: $lineheight_rel; +$card-header-width: 100%; +$card-header-position:0px; +// Buttons +$button_large: $lineheight_rel; +$button_small: $lineheight_rel / 4; +$button-group-margin: 0; + +// Responsives sizes +// - sm : Small tablets and large smartphones (landscape view) +// - md : Small tablets (portrait view) +// - lg : Tablets and small desktops +// - xl : Large tablets and desktops +// - xxl : Very large desktops +$screen-sm-min: 576px; +$screen-md-min: 768px; +$screen-lg-min: 992px; +$screen-xl-min: 1200px; +$screen-xxl-min: 1600px; + +// Containers size +$container-size: $screen-xl-min; +$container-size-large: $screen-xxl-min; diff --git a/scss/mixins/_borders.scss b/scss/mixins/_borders.scss new file mode 100755 index 0000000..d6bb913 --- /dev/null +++ b/scss/mixins/_borders.scss @@ -0,0 +1,15 @@ +// Border, border radius and margin + +@mixin borders() { + border: $border-size solid rgba(0, 0, 0, 0.3) +} + +@mixin prefer-no-borders() { + &:not(:hover) { + border-color:transparent; + } +} + +@mixin border-radius($border-radius) { + border-radius: $border-radius $border-radius $border-radius $border-radius; +} diff --git a/scss/mixins/_btns.scss b/scss/mixins/_btns.scss new file mode 100755 index 0000000..1bc65de --- /dev/null +++ b/scss/mixins/_btns.scss @@ -0,0 +1,48 @@ +@mixin button($size) { + @include button-layout($size); + @include shape-style($size); + @include button-hover(); + font-weight: $fontweight_base; +} + +@mixin button-layout($size) { + padding: $size; + padding-top: $size/3; + padding-bottom: $size/3; + margin:$size/2; + margin-top: $size/3; + margin-bottom: $lineheight; + //font-size: 4.75mm; + line-height:$lineheight; + height:auto; +} + +@mixin button-hover() { + transition: background-color .2s, border .2s, box-shadow .2s, color .2s; + &:hover, &:active { + background-color:transparent; + } +} + +@mixin button-fullcontrol($background-color, $hover-color, $text-color) { + @include colorize-shape($background-color); + outline-color: $background-color; + color:$text-color; + &:visited { + @include colorize-shape($background-color); + color:$text-color; + } + &, &:visited, &:not(.disabled):not(:disabled) { + &:hover, &:active { + @include colorize-shape($hover-color); + color:lighten($text-color, 5%); + outline-color: $hover-color; + box-shadow:none; + } + } +} + +@mixin button-color($background-color) { + @include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color)); + box-shadow: $narrow-shadow; +} diff --git a/scss/mixins/_colors.scss b/scss/mixins/_colors.scss new file mode 100755 index 0000000..48d50ab --- /dev/null +++ b/scss/mixins/_colors.scss @@ -0,0 +1,67 @@ +/* --- 00. COLORS --- */ + +/* + * La gestion des couleurs dans le theme. Cette partie de la stylesheet est + * automatique et n'a pas besoin d'être modifiée + */ + + // FUNCTIONS TO GET MORE EASILY COLORS + @function list-colors() { + @return $semantics; + } + + @function luminance($color) { + $c_red: red($color); + $c_grn: green($color); + $c_blu: blue($color); + + $luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114; + + @return $luminance + } + + @function getFontColor() { + @return getTextColorFromBackground(get-color("background-alt")); + } + + @function getTextColorFromBackground($background-color) { + @if (luminance($background-color) < 255 * $whiteness_value) { + @return $color-font-light; + } @else { + @return $color-font; + } + } + + @function accentuate($color) { + @if (luminance($color) > 64) { + @return darken($color, 7.5%); + } @else { + @return lighten($color, 4%); + } + } + + @function dim($color) { + @if (luminance($color) > 255 * $whiteness_value) { + @return transparentize($color, 0.8); + } @else { + @return transparentize($color, 0.6); + } + } + + // fonction texte et background + + @mixin text-color($text-color) { + color: $text-color; + } + + @mixin background-color($background-color) { + background-color: $background-color; + color: getTextColorFromBackground($background-color); + } + + @mixin accent-color($accent-color, $soft-color) { + --accent-color: #{$accent-color}; + --text-color-contrast: #{getTextColorFromBackground($accent-color)}; + --accent-color-hover: #{accentuate($accent-color)}; + --accent-color-soft: #{$soft-color}; +} \ No newline at end of file diff --git a/scss/mixins/_li.scss b/scss/mixins/_li.scss new file mode 100755 index 0000000..1a78451 --- /dev/null +++ b/scss/mixins/_li.scss @@ -0,0 +1,13 @@ +@mixin li-no-margin() { + li { + margin: 0; + } +} + +@mixin li-flex() { + display:flex; + flex-direction: row; + align-items: flex-start; + @include li-no-margin(); + list-style: none; +} diff --git a/scss/mixins/_panels.scss b/scss/mixins/_panels.scss new file mode 100755 index 0000000..7ee312b --- /dev/null +++ b/scss/mixins/_panels.scss @@ -0,0 +1,58 @@ +@mixin panel($size) { + @include border-radius($card-radius); + background-color: $color-background-alt; + box-shadow: $large-shadow; + border: none; + margin:0; + margin-bottom:$lineheight; + + & > * { + margin-left: $size / 2; + margin-right: $size / 2; + &:first-child, + &.sr-only:first-child ~ * { + margin-top: $size; + &.card-header { + margin-top:$card-header-vmargin; + } + } + &:last-child { + margin-bottom: $size; + &.card-header { + margin-bottom:$card-header-vmargin; + } + } + } +} + +@mixin panel-header($size) { + font-family: $basefont; + font-size: 1em; + font-weight: $fontweight_bold; + + + padding: $size/2 $card-header-padding; + padding-bottom: $size/2 !important; + margin: $lineheight_rel / 2 $card-header-hmargin; + // margin-bottom:$lineheight_rel / 2; + // margin-top:$lineheight_rel / 2; + line-height: 1; + + position: relative; + left: $card-header-position; + width: $card-header-width; + + @include shape-style($size); + background-color: var(--accent-color); + border-radius: 0; + + &:first-child { + border-top-left-radius: $card-radius; + border-top-right-radius: $card-radius; + } + + &:last-child { + border-bottom-left-radius: $card-radius; + border-bottom-right-radius: $card-radius; + } +} diff --git a/scss/mixins/_responsive.scss b/scss/mixins/_responsive.scss new file mode 100755 index 0000000..6a6c98a --- /dev/null +++ b/scss/mixins/_responsive.scss @@ -0,0 +1,84 @@ +// MIXINS RESPONSIVES + +// Small devices +@mixin sm { + @media (min-width: #{$screen-sm-min}) { + @content; + } +} + +// Medium devices +@mixin md { + @media (min-width: #{$screen-md-min}) { + @content; + } +} + +// Large devices +@mixin lg { + @media (min-width: #{$screen-lg-min}) { + @content; + } +} + +// Extra large devices +@mixin xl { + @media (min-width: #{$screen-xl-min}) { + @content; + } +} + +// Extra large desktops +@mixin xxl { + @media (min-width: #{$screen-xxl-min}) { + @content; + } +} + +// Custom devices +@mixin rwd($screen) { + @media (min-width: $screen+'px' ) { + @content; + } +} + +@mixin container($size, $padding) { + padding-left: $padding; + padding-right: $padding; + max-width: $size; + margin:auto; +} + +@mixin responsive() { + @content; + + &-sm { + @include sm() { + @content; + } + } + + &-md { + @include md() { + @content; + } + } + + &-lg { + @include lg() { + @content; + } + } + + &-xl { + @include xl() { + @content; + } + } + + &-xxl { + @include xxl() { + @content; + } + } +} \ No newline at end of file diff --git a/scss/mixins/_shape.scss b/scss/mixins/_shape.scss new file mode 100755 index 0000000..731a8b3 --- /dev/null +++ b/scss/mixins/_shape.scss @@ -0,0 +1,10 @@ +@mixin shape-style($size) { + @include borders(); + @include border-radius($btn-radius); + + background-color:transparent; +} + +@mixin colorize-shape($background-color) { + background-color: $background-color; +} diff --git a/scss/style.scss b/scss/style.scss new file mode 100755 index 0000000..ff0cf00 --- /dev/null +++ b/scss/style.scss @@ -0,0 +1,8 @@ +@import 'dep'; +@import 'definitions'; +@import 'mixins'; + +@import 'core'; +@import 'drawing'; +@import 'utils'; +@import 'global'; diff --git a/scss/utils/_a11y.scss b/scss/utils/_a11y.scss new file mode 100755 index 0000000..7c91b81 --- /dev/null +++ b/scss/utils/_a11y.scss @@ -0,0 +1,39 @@ +/* 1.0 - Accessibility classes + * Some classes to help accessibility +**/ + +.sr-only, .screen-reader-text { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} + +.skip { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} + +.skip:focus-within { + position: static; + width: auto; + height: auto; +} \ No newline at end of file diff --git a/scss/utils/_align.scss b/scss/utils/_align.scss new file mode 100755 index 0000000..2234868 --- /dev/null +++ b/scss/utils/_align.scss @@ -0,0 +1,14 @@ +/* 1.1 - Alignement classes + * Handle easily alignement and flexboxes +**/ + +.flex-that { + display: flex; + justify-content: space-between; +} + +.align { + &-center {text-align: center;text-indent: 0!important;} + &-left {text-align: left;} + &-right {text-align: right;} +} diff --git a/scss/utils/_borders.scss b/scss/utils/_borders.scss new file mode 100755 index 0000000..a8f7b0e --- /dev/null +++ b/scss/utils/_borders.scss @@ -0,0 +1,8 @@ +.round, .pill { + border-radius: 9999px; +} + +.no-borders { + border-width:0px; + border-style:none; +} diff --git a/scss/utils/_colorize.scss b/scss/utils/_colorize.scss new file mode 100755 index 0000000..51915c8 --- /dev/null +++ b/scss/utils/_colorize.scss @@ -0,0 +1,98 @@ +/* 1.2 - Colorization classes + * Colorize some aspect of a class +**/ + +.c { + + @each $name, + $color in list-colors() { + &-#{$name} { + @include accent-color(get-color($name), get-color-light($name)); + } + } +} + + +@mixin heading-color($background-color) { + + & .card-header, + & .menu-header, + &.header-bg th { + @include colorize-shape($background-color); + color: getTextColorFromBackground($background-color); + } + + th { + color: $background-color; + } +} + +@mixin bg-color($background-color) { + @include background-color($background-color); + + a { + color:currentColor; + outline-color: currentColor; + } +} + +.bg-accent { + background-color: var(--accent-color); +} + +.bg-dark { + background-color: get-color("dark"); +} + +.bg { + background-color: $color-background; +} + +.bg-alt { + background-color: $color-background-alt; +} + +.bg-soft { + background-color: var(--accent-color-soft); +} + +// .text { + +// @each $name, +// $color in list-colors() { +// &-#{$name} { +// @include text-color(get-color($name)); +// } +// } +// } + +// .btn { + +// @each $name, +// $color in list-colors() { +// &-#{$name} { +// @include button-color(get-color($name)); +// } +// } +// } + +// .head { + +// @each $name, +// $color in list-colors() { +// &-#{$name} { +// @include heading-color(get-color($name)); +// } +// } +// } + +.fg-light { + --text-color:#{$color-font-light}; + --link-color-hover:#{transparentize($color-font-light, 0.7)}; +} + +.fg-dark { + color: $color-font; + --text-color:#{$color-font}; + --link-color-hover:#{transparentize($color-font, 0.85)}; +} \ No newline at end of file diff --git a/scss/utils/_display.scss b/scss/utils/_display.scss new file mode 100755 index 0000000..90b521d --- /dev/null +++ b/scss/utils/_display.scss @@ -0,0 +1,17 @@ +.d-none { + @include responsive() { + display: none !important; + } +} + +.d-block { + @include responsive() { + display: block!important; + } +} + +.d-flex { + @include responsive() { + display: flex!important; + } +} \ No newline at end of file diff --git a/scss/utils/_flex.scss b/scss/utils/_flex.scss new file mode 100755 index 0000000..203bf6a --- /dev/null +++ b/scss/utils/_flex.scss @@ -0,0 +1,35 @@ +.f-column { + display:flex; + flex-direction: column; + &.reverse { + flex-direction:column-reverse; + } +} + +.f-row { + display:flex; + flex-direction: row; + &.reverse { + flex-direction:row-reverse; + } +} + +.f-start { + justify-content: flex-start; +} + +.f-end { + justify-content: flex-end; +} + +.f-center { + justify-content: center; +} + +.f-around { + justify-content: space-around; +} + +.f-between { + justify-content: space-between; +} diff --git a/scss/utils/_lists.scss b/scss/utils/_lists.scss new file mode 100755 index 0000000..8d593cf --- /dev/null +++ b/scss/utils/_lists.scss @@ -0,0 +1,7 @@ +/* 1.3 - List classes + * Handle more easily list +**/ + +.no-pills { + list-style:none; +} diff --git a/scss/utils/_sizing.scss b/scss/utils/_sizing.scss new file mode 100755 index 0000000..0db0ce6 --- /dev/null +++ b/scss/utils/_sizing.scss @@ -0,0 +1,61 @@ +/* 1.3 - Sizing classes + * Handle sizing and margin +**/ + +@mixin addmargins($name, $size) { + &-#{$name} { + margin:$size; + } + + &b-#{$name} { + margin-bottom:$size; + } + + &r-#{$name} { + margin-right:$size; + } + + &l-#{$name} { + margin-left:$size; + } + + &t-#{$name} { + margin-top:$size; + } +} + +@mixin addpaddings($name, $size) { + &-#{$name} { + padding:$size; + } + + &b-#{$name} { + padding-bottom:$size; + } + + &r-#{$name} { + padding-right:$size; + } + + &l-#{$name} { + padding-left:$size; + } + + &t-#{$name} { + padding-top:$size; + } +} + +.m { + @include addmargins("half", $lineheight * .5); + @for $i from 0 through 4 { + @include addmargins($i, $lineheight*$i) + } +} + +.p { + @include addpaddings("half", $lineheight * .5); + @for $i from 0 through 4 { + @include addpaddings($i, $lineheight*$i) + } +}