diff --git a/css/style.css b/css/style.css new file mode 100755 index 0000000..4ce631c --- /dev/null +++ b/css/style.css @@ -0,0 +1,1755 @@ +/* + Theme Name: Kazhnuz Space + Theme URI: https://git.kobold.cafe/quarante-douze/qdouze2-wordpress-theme + Author: Kazhnuz + Author URI: https://kazhnuz.space + Description: The default theme for Kazhnuz Space, my personnal blog. + Version: 0.2 + License: GNU General Public License v3 or later + License URI: http://www.gnu.org/licenses/gpl-2.0.html + Tags: blog, two-columns, right-sidebar + Text Domain: kspace-wordpress-theme + + This theme is licensed under the GPLv3. +*/ +@font-face { + font-family: 'Comic Neue Bold Italic'; + src: local("Comic Neue Bold Italic"), local("ComicNeue-BoldItalic"), url("../fonts/ComicNeue-BoldItalic.woff2") format("woff2"), url("../fonts/ComicNeue-BoldItalic.woff") format("woff"); + font-weight: bold; + font-style: italic; + font-display: swap; } + +*, +*::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.5mm; + line-height: 1.6rem; + font-weight: 400; + box-sizing: border-box; + -webkit-text-size-adjust: 100%; } + @media (max-width: 1366px) and (max-height: 768px) { + html { + font-size: 4.25mm; } } +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: #CB357D; + --text-color-contrast: #FDF7E7; + --accent-color-hover: #ad2d6a; + --text-color:#073642; + --link-color-hover:rgba(7, 54, 66, 0.15); + --link-color:#a32a64; } + +strong { + font-weight: 600; } + +em { + font-style: italic; + font-weight: 400; } + +mark { + padding: 0.05rem 0.25rem; + border-radius: 0.1rem; } + +img { + border-style: none; } + article img { + max-width: 100%; + height: auto; } + +a { + color: var(--link-color); + outline-color: #CB357D; + 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: #ffd44f; + 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: #0f7e84; + color: #FDF7E7; } + +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: #CB357D; + background-color: transparent; } + sup > a:hover, sup > a:focus, sup > a:active, sub > a:hover, sub > a:focus, sub > a:active { + color: #a32a64; } + +h1, .title-1, .main-title, +.page-title { + font-family: "Comic Neue Bold Italic", sans-serif; + font-size: 3rem; + line-height: 3.2rem; + font-weight: 800; + color: #CB357D; + letter-spacing: -3px; + font-style: italic; } + +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: #FDF7E7; } + +.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; } + +.social .icon { + top: 0; } + +.toolbar .icon { + top: 0.2em; } + +.btn { + border: 0px solid rgba(0, 0, 0, 0.3); + border-radius: 3px 3px 3px 3px; + position: relative; + z-index: 1; + overflow: visible; + 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: none !important; + font-weight: 400; } + .btn:before { + content: " "; + position: absolute; + top: 0; + left: -0.8em; + right: -0.8em; + bottom: 0; + z-index: -1; + transform: skewX(-15deg); + transition: background-color 0.3s; + border-radius: 6px; } + .btn::before { + background-color: var(--accent-color); + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); } + .btn:visited { + color: var(--text-color-contrast); } + .btn:hover, .btn:active { + outline-color: var(--accent-color-hover); + box-shadow: none; } + .btn:hover::before, .btn:active::before { + background-color: var(--accent-color-hover); } + p .btn:last-child { + margin-bottom: 0; } + .btn .fake { + background-color: transparent !important; + color: var(--text-color); } + .btn .fake::before { + background-color: transparent !important; } + +.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 !important; } + .btn-readmore:visited, .btn-link:visited { + color: var(--link-color); } + .btn-readmore::before, .btn-link::before { + background-color: transparent; + box-shadow: none; } + .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: 3px 3px 3px 3px; + 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: 3px 3px 3px 3px; + position: relative; + z-index: 1; + overflow: visible; + background-color: transparent; + background-color: #eee8d5; + 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 { + content: " "; + position: absolute; + top: 0; + left: -0.8em; + right: -0.8em; + bottom: 0; + z-index: -1; + transform: skewX(-15deg); + transition: background-color 0.3s; + border-radius: 6px; } + ul.breadcrumb::before, ol.breadcrumb::before, .breadcrumb::before { + background-color: #eee8d5; + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); } + 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; } + +.badge { + 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); } + +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: 3px 3px 3px 3px; + position: relative; + z-index: 1; + overflow: visible; + background-color: transparent; + padding: 0.2em 0.4em; + margin: 0.2em; + text-decoration: none; } + nav.pagination .page-numbers:before, nav.pagination .next:before, nav.pagination .prev:before { + content: " "; + position: absolute; + top: 0; + left: -0.2em; + right: -0.2em; + bottom: 0; + z-index: -1; + transform: skewX(-15deg); + transition: background-color 0.3s; + border-radius: 6px; } + 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::before, nav.pagination .next:not(.current):not(.dots):hover::before, nav.pagination .prev:not(.current):not(.dots):hover::before { + background-color: var(--link-color-hover); } + nav.pagination .page-numbers.current, nav.pagination .next.current, nav.pagination .prev.current { + background-color: #CB357D; + color: #FDF7E7; } + nav.pagination .page-numbers.current::before, nav.pagination .next.current::before, nav.pagination .prev.current::before { + background-color: #CB357D; } + +.card { + border-radius: 6px 6px 6px 6px; + background-color: #eee8d5; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0); + border: none; + margin: 0; + margin-bottom: 1.6rem; + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); + display: flex; + flex-direction: column; + color: #073642; } + .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: 0.8em; + letter-spacing: normal; } + .card > *:last-child { + margin-bottom: 2em; } + .card > *:last-child.card-header { + margin-bottom: 0.8em; } + .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: 85%; + border: 0px solid rgba(0, 0, 0, 0.3); + border-radius: 3px 3px 3px 3px; + position: relative; + z-index: 1; + overflow: visible; + background-color: transparent; + 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:before { + content: " "; + position: absolute; + top: 0; + left: -1em; + right: -1em; + bottom: 0; + z-index: -1; + transform: skewX(-15deg); + transition: background-color 0.3s; + border-radius: 6px; } + .card-header:first-child { + border-top-left-radius: 6px; + border-top-right-radius: 6px; } + .card-header:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } + .card-header .icon { + margin-right: 0.25em; } + .card-header::before { + background-color: var(--accent-color); + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); } + +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.toolbar a, .menu.toolbar a:visited { + margin: 0px 2px; } + .menu a, + .menu a:visited { + display: flex; + line-height: 1.6em; + padding: 0.4em; + margin: 2px 0px; + justify-content: space-between; + align-items: center; + text-decoration: none; + border-radius: 3px; + 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, .menu a.active { + 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: #eee8d5; } + .toolbar li:hover ul, + .toolbar li ul:hover, .toolbar li:focus-within ul { + visibility: visible; + opacity: 1; + display: flex; + flex-direction: column; + border-radius: 6px; + 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: 6px; + margin: 0 0 1.6rem 0; + padding: 1.6rem 1rem 1.6rem 1rem; + max-width: 100%; + font-style: italic; + background-color: #eee8d5; + color: #073642; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } + +.well { + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); } + +.toast { + background-color: var(--accent-color); + color: var(--text-color-contrast); + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); } + +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: #eee8d5; + border-radius: 6px; + border: 0px solid rgba(0, 0, 0, 0); + padding: 0.4em; + line-height: 1.6em; + overflow: auto; } + .card input, .card textarea { + background-color: #FDF7E7; } + +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"] { + -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; } + +.screen-reader-text, .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + opacity: 0; + transition-delay: .8s; + transition-property: opacity; + transition-duration: 0.2s; } + +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; } + +a.sr-hover { + position: relative; + overflow: visible; } + +.sr-hover:hover .sr-only { + position: absolute; + display: block; + width: auto; + height: auto; + clip: auto; + overflow: visible; + background-color: rgba(0, 0, 0, 0.8); + border-radius: 6px; + top: 110%; + left: 50%; + transform: translateX(-50%); + white-space: nowrap; + padding: 3px 9px; + margin: 0px; + font-size: 1rem; + z-index: 10; + border: 1px solid rgba(255, 255, 255, 0.3); + opacity: 1; } + +.article img::before { + content: "alt"; } + +.skip { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + +.skip:focus-within { + position: static; + width: auto; + height: auto; } + +.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; } + +.icon-fw { + width: 1em; + display: inline-block; + text-align: center; } + +.round, .pill { + border-radius: 9999px; } + +.no-borders { + border-width: 0px; + border-style: none; } + +.bg-dark { + background-color: #002b36; + color: #FDF7E7; } + .bg-dark a { + color: currentColor; + outline-color: currentColor; } + +.c-primary, .btn-primary, .head-primary, .text-primary { + --accent-color: #CB357D; + --text-color-contrast: #FDF7E7; + --accent-color-hover: #ad2d6a; } + +.c-secondary, .btn-secondary, .head-secondary, .text-secondary { + --accent-color: #0f7e84; + --text-color-contrast: #FDF7E7; + --accent-color-hover: #0b5d62; } + +.c-warning, .btn-warning, .head-warning, .text-warning { + --accent-color: #cb4b16; + --text-color-contrast: #FDF7E7; + --accent-color-hover: #a83e12; } + +.c-danger, .btn-danger, .head-danger, .text-danger { + --accent-color: #dc322f; + --text-color-contrast: #FDF7E7; + --accent-color-hover: #c42421; } + +.c-info, .btn-info, .head-info, .text-info { + --accent-color: #0f7e84; + --text-color-contrast: #FDF7E7; + --accent-color-hover: #0b5d62; } + +.c-success, .btn-success, .head-success, .text-success { + --accent-color: #859900; + --text-color-contrast: #FDF7E7; + --accent-color-hover: #647300; } + +.c-muted, .btn-muted, .head-muted, .text-muted { + --accent-color: #586e75; + --text-color-contrast: #FDF7E7; + --accent-color-hover: #48595f; } + +.c-light, .btn-light, .head-light, .text-light { + --accent-color: #FDF7E7; + --text-color-contrast: #073642; + --accent-color-hover: #faebc4; } + +.c-dark, .btn-dark, .head-dark, .text-dark { + --accent-color: #002b36; + --text-color-contrast: #FDF7E7; + --accent-color-hover: #003b4a; } + +.fg-light { + --text-color:#FDF7E7; + --link-color-hover:rgba(253, 247, 231, 0.3); } + +.fg-dark { + color: #073642; + --text-color:#073642; + --link-color-hover:rgba(7, 54, 66, 0.15); } + +.no-pills { + list-style: none; } + +.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; } + +.ellipsis { + flex: 1; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: 0; + padding-right: 6px; } + +.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; } } +.no-pills { + list-style: none; } + +.align-center { + text-align: center; } + +.align-left { + text-align: left; } + +.align-right { + text-align: right; } + +#description { + display: grid; + grid-template-columns: 1fr; + grid-template-areas: "title" "illustration" "content"; } + @media (min-width: 1200px) { + #description { + grid-template-columns: 400px auto; + grid-template-areas: "title title" "illustration content"; } } +#desc-title { + grid-area: title; } + +#description-content { + grid-area: content; } + +.illustration { + display: block; + margin: auto; + grid-area: illustration; + max-width: 100%; + height: auto; } + @media (min-width: 1200px) { + .illustration { + padding-bottom: 0; + max-width: 530px; + margin-bottom: 1.5rem; + position: relative; + top: 0px; + right: 64px; } } +.align-centered-block { + text-align: center; + padding: 1rem; } + +#page-header { + background: #0f7e84 url("data:image/svg+xml,%3Csvg width='800' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='420' cy='440' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='700' cy='510' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='-100' cy='510' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='150' cy='380' r='150' fill='%23FDF7E7' /%3E%3C/svg%3E"); + border-top: 6px solid #002b36; + background-position: bottom center; + background-repeat: repeat-x; + margin-bottom: 0; + padding-bottom: 5rem; } + #page-header .fa { + font-size: 1rem; } + @media (min-width: 576px) { + #page-header { + padding-bottom: 0; + margin-bottom: 1.5rem; } } +header h1 { + border-style: none !important; + font-weight: 800; + font-size: 5.4em; + font-style: oblique; + padding: 0rem; + line-height: 1rem; + max-width: 1200px; + margin: auto; + text-align: center; } + @media (min-width: 1200px) { + header h1 { + text-align: left; } } + header h1 img { + max-width: 560px; + height: auto; + margin-top: 0rem; + width: 100%; + z-index: 0; } + @media (min-width: 1200px) { + header h1 img { + position: relative; + left: -4rem; } } + 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: #FDF7E7; } + .navbar a { + color: #FDF7E7; } + .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); } + +.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 320px; + grid-template-areas: "main side"; } } +.grid-2-elements { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + row-gap: 1.6rem; + column-gap: 1.5rem; } + @media (min-width: 992px) { + .grid-2-elements { + grid-template-columns: 1fr 1fr; } } +.fullwidth { + grid-column: span 2; } + +.sidebar { + grid-area: side; } + +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; } + +body { + background-color: #FDF7E7; } + +footer { + padding-bottom: 1.5rem; + padding-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; } + +ul.social { + font-size: 1.5em; + padding-bottom: 1.5em; + margin: auto; + text-align: center; + display: flex; + justify-content: center; } + ul.social li { + margin: 0; + list-style: none; + line-height: 1; } + ul.social li a, + ul.social li a:visited { + color: #FDF7E7; + background-color: var(--accent-color); + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); + padding: 0.3em; + width: 3rem; + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + border-radius: 100%; + line-height: 1; + margin: 0.33rem; } + ul.social li a:hover, + ul.social li a:visited:hover { + background-color: var(--accent-color-hover); } + +iframe { + width: 100%; + height: 428px; + border: none; } + +.preview-grid { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + grid-gap: 1.6rem; + padding-bottom: 1.6rem; } + @media (min-width: 768px) { + .preview-grid { + grid-template-columns: 1fr 1fr; } } +@media (min-width: 1200px) { + .preview-grid-3 { + grid-template-columns: 1fr 1fr 1fr; } } + +.preview-container { + width: 100%; } + +@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: 0px 2px 4px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); + max-width: 360px; } + +.preview-link { + padding: 0; + background-color: transparent; + margin: 0 !important; + text-decoration: none; + position: relative; + height: 12.8rem; } + .preview-link .card-header { + letter-spacing: normal; + padding: 0.4rem 1.6em; + padding-bottom: 0.4rem !important; + position: absolute; + margin: 0; + top: 0.5rem; + z-index: 1; + min-height: 2.8rem; + display: flex; + flex-direction: column; + justify-content: center; } + .preview-link .card-header:before { + left: -0.4rem; + right: -0.4rem; + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); } + +.preview-content { + font-size: 0.9rem; + height: 100%; + width: 100%; + line-height: 1.6rem !important; + text-align: justify; + background-color: rgba(0, 0, 0, 0); + color: rgba(7, 54, 66, 0.7); + position: relative; + overflow: hidden; + border-radius: 6px 6px 6px 6px; + box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); } + .preview-content .preview-overlay { + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; + padding-top: 0.4em; + backdrop-filter: none; + transition: background-color 0.3s, backdrop-filter 0.3s; + overflow: hidden; + border-radius: 6px 6px 6px 6px; } + .preview-content:hover .preview-overlay { + backdrop-filter: blur(2px); + background-color: rgba(0, 0, 0, 0.4); } + .preview-content:hover .preview-overlay .metadata-pills { + opacity: .9; + transition: opacity .5s, height .5s; } + .preview-content:hover .preview-overlay .comment-text { + bottom: 0px; } + +.preview-exerpt { + max-height: 12.8rem; + overflow: hidden; + background-size: cover; + min-height: 100%; + min-width: 100%; + border-radius: 6px 6px 6px 6px; + font-size: 0.85rem; + line-height: 1.25rem; + display: flex; + -ms-flex-align: center !important; + align-items: center !important; + justify-content: center; } + .preview-exerpt h1, .preview-exerpt h2, .preview-exerpt h3, .preview-exerpt h4, .preview-exerpt h5, .preview-exerpt h6 { + margin-bottom: 0px; + max-width: 100%; + display: none; } + .preview-exerpt > p { + width: 100%; + margin: auto; } + .preview-exerpt > p:not(.p-img) { + position: absolute; + top: 3rem; + padding: 0.5rem; } + .preview-exerpt > p > img { + max-width: 100%; + height: auto; + vertical-align: middle; + margin: auto; + text-align: center; } + .preview-exerpt > p.p-img { + text-align: center; + margin: auto; + padding: auto; + display: block; + width: 100%; } + +.preview-metadata { + color: #FDF7E7; + height: 100%; + overflow: hidden; + border-radius: 6px 6px 6px 6px; } + .preview-metadata .metadata-pills { + opacity: 0; + transition: opacity .3s, height .3s; + display: flex; + justify-content: space-between; + padding-left: 0.8rem; + padding-right: 0.8rem; + font-size: 0.9em; + padding-top: 3rem; } + +.card-preview.head-info .comment-text { + position: relative; + background-color: #0f7e84; } + .card-preview.head-info .comment-text::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 16' fill='rgb(15,126,132)' fill-opacity='1'%3E%3Cpolygon points='0,16 100,16 100,0'%3E%3C/polygon%3E%3C/svg%3E"); + background-position: center center; + background-repeat: no-repeat; + background-size: 100% 100%; + content: ''; + height: 16px; + left: 0; + position: absolute; + right: 0; + width: 100%; + z-index: 1; + top: -16px; } + +.card-preview.card-grey .comment-text { + position: relative; + background-color: #586e75; } + .card-preview.card-grey .comment-text::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 16' fill='rgb(88,110,117)' fill-opacity='1'%3E%3Cpolygon points='0,16 100,16 100,0'%3E%3C/polygon%3E%3C/svg%3E"); + background-position: center center; + background-repeat: no-repeat; + background-size: 100% 100%; + content: ''; + height: 16px; + left: 0; + position: absolute; + right: 0; + width: 100%; + z-index: 1; + top: -16px; } + +.comment-text { + color: #FDF7E7; + background-color: #CB357D; + position: relative; + text-align: center; + position: absolute; + bottom: -1.6rem; + width: 100%; + transition: bottom 0.3s; } + .comment-text::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 16' fill='rgb(203,53,125)' fill-opacity='1'%3E%3Cpolygon points='0,16 100,16 100,0'%3E%3C/polygon%3E%3C/svg%3E"); + background-position: center center; + background-repeat: no-repeat; + background-size: 100% 100%; + content: ''; + height: 16px; + left: 0; + position: absolute; + right: 0; + width: 100%; + z-index: 1; + top: -16px; } + +.card-preview time { + margin-bottom: 0.4em; + display: block; } + +.author-area { + display: flex; } + .author-area img.author-avatar, .author-area img.avatar { + display: block; + height: 4.8rem; + width: auto; + border-radius: 100%; + padding: 0; + margin: 0; + margin-right: 1.6rem; } + .author-area .author-metadata { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; } + .author-area .author-date { + font-style: italic; } + .author-area:not(:last-child) { + margin-bottom: 1.6rem; } + +.pigimg { + display: block; + max-width: 100%; + height: auto; + margin: auto; } + +.avatar { + background: transparent; } + +.mwarea { + padding-bottom: 1.6rem; } + .mwarea .avatar { + width: 80%; + height: auto; + display: block; + margin: auto; } + +.cover { + width: 100%; + height: auto; + border-radius: 6px 6px 6px 6px; } + +@media (min-width: 768px) { + .roman { + width: 80%; + position: relative; + top: -240px; + margin: auto; } } + +.preview-featured { + font-size: 0.8rem; } + .preview-featured .preview-link { + display: block; + padding: 0; + border-radius: 6px; + 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: 6px; + 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; } + +.header-anchor { + color: rgba(0, 0, 0, 0.4); + font-weight: 900; + font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + text-decoration: none; + display: inline-block; + font-style: normal; + font-size: 0.75em; } + +.header-anchor { + opacity: 0; } + +:hover > .header-anchor { + opacity: 1; } + +.aligncenter { + text-align: center; } + +.alignright { + text-align: right; } + +#sommaire { + position: sticky; + top: 32px; } + +html { + margin-left: 0; } + @media (min-width: 992px) { + html { + margin-left: 320px; } } +#searchfield { + outline-color: #eee8d5; + border-radius: 6px; + box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4); } + +#mobile-sidebar { + position: fixed; + top: 0; + left: -100vw; + width: 320px; + height: 100vh; + transition: left 0.2s; + padding: 1rem; + overflow: hidden; + z-index: 10; + box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.6); } + #mobile-sidebar.shown { + left: 0; } + @media (min-width: 992px) { + #mobile-sidebar { + left: 0; } } +img.myavatar { + height: 140px; + width: auto; + display: block; + margin: 1rem auto 1.5rem auto; + border: 3px solid #FDF7E7; + box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.5); + border-radius: 8px; } + @media (max-width: 1366px) and (max-height: 768px) { + img.myavatar { + height: 128px; + margin: 0.25rem auto 1rem auto; } } +.menu-button { + position: fixed; + bottom: 24px; + right: 24px; + background-color: rgba(0, 0, 0, 0.2); + color: #FDF7E7; + padding: 0.75em; + border: none; + font-size: 1.2rem; + display: flex; + align-content: center; + justify-content: center; + aspect-ratio: 1; + border-radius: 999px; + z-index: 12; } + .menu-button:hover { + background-color: #CB357D; } + @media (min-width: 992px) { + .menu-button { + display: none; } } diff --git a/fonts/ComicNeue-BoldItalic.woff b/fonts/ComicNeue-BoldItalic.woff new file mode 100644 index 0000000..82e27eb Binary files /dev/null and b/fonts/ComicNeue-BoldItalic.woff differ diff --git a/fonts/ComicNeue-BoldItalic.woff2 b/fonts/ComicNeue-BoldItalic.woff2 new file mode 100644 index 0000000..2fecd41 Binary files /dev/null and b/fonts/ComicNeue-BoldItalic.woff2 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/cc-by-sa.gif b/img/cc-by-sa.gif new file mode 100644 index 0000000..f2a04b1 Binary files /dev/null and b/img/cc-by-sa.gif differ diff --git a/img/default-preview.png b/img/default-preview.png new file mode 100644 index 0000000..fff0530 Binary files /dev/null and b/img/default-preview.png differ diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000..eaab9a3 Binary files /dev/null and b/img/favicon.png differ diff --git a/img/hhghtthrhtr-medium.png b/img/hhghtthrhtr-medium.png new file mode 100644 index 0000000..7b342d7 Binary files /dev/null and b/img/hhghtthrhtr-medium.png differ diff --git a/img/hhghtthrhtr-small.avif b/img/hhghtthrhtr-small.avif new file mode 100644 index 0000000..bd4e6fa Binary files /dev/null and b/img/hhghtthrhtr-small.avif differ diff --git a/img/hhghtthrhtr-small.png b/img/hhghtthrhtr-small.png new file mode 100644 index 0000000..b9519ab Binary files /dev/null and b/img/hhghtthrhtr-small.png differ diff --git a/img/koboldcafe.gif b/img/koboldcafe.gif new file mode 100644 index 0000000..d3bdfbc Binary files /dev/null and b/img/koboldcafe.gif differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..2a2b4b4 Binary files /dev/null and b/img/logo.png differ diff --git a/index.php b/index.php new file mode 100755 index 0000000..2d4b670 --- /dev/null +++ b/index.php @@ -0,0 +1,51 @@ + + + + + + + + + + + + +
+ + + +
+ + +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/languages/en.json b/languages/en.json new file mode 100755 index 0000000..eda146e --- /dev/null +++ b/languages/en.json @@ -0,0 +1,7 @@ +{ + "theme-data": + { + "name": "Kazhnuz Space", + "description": "Theme de mon blog, Kazhnuz Space." + } +} 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..1a54aee --- /dev/null +++ b/php/category.php @@ -0,0 +1,53 @@ +
+

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

+ + + + 1) : ?> + + +
+ + diff --git a/php/footer.php b/php/footer.php new file mode 100755 index 0000000..6badad4 --- /dev/null +++ b/php/footer.php @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/php/head.php b/php/head.php new file mode 100755 index 0000000..845fdd8 --- /dev/null +++ b/php/head.php @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/php/header.php b/php/header.php new file mode 100755 index 0000000..e909992 --- /dev/null +++ b/php/header.php @@ -0,0 +1,9 @@ +
+
+

+ + title() ?> + +

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

+ Bienvenue sur mon blog +

+
+

Bienvenue sur la partie blog de mon site ! Sur cette partie, j'y poste mes pensées, mes textes, bref tout ce que je fais un peu en vrac (heureusement y'a les tags et les catégories pour s'y retrouver).

+
+
+ +
+ + 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/mainmenu.php b/php/mainmenu.php new file mode 100644 index 0000000..86346b6 --- /dev/null +++ b/php/mainmenu.php @@ -0,0 +1,57 @@ + + \ No newline at end of file diff --git a/php/page.php b/php/page.php new file mode 100755 index 0000000..2e2fe5b --- /dev/null +++ b/php/page.php @@ -0,0 +1,59 @@ +
+ +
+

title(); ?>

+ 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..dd27cbc --- /dev/null +++ b/php/search.php @@ -0,0 +1,53 @@ +
+

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

+ + + + 1) : ?> + + +
+ + diff --git a/php/sidebar.php b/php/sidebar.php new file mode 100755 index 0000000..2e5e026 --- /dev/null +++ b/php/sidebar.php @@ -0,0 +1,61 @@ + \ No newline at end of file diff --git a/php/tag.php b/php/tag.php new file mode 100644 index 0000000..cb850f8 --- /dev/null +++ b/php/tag.php @@ -0,0 +1,53 @@ +
+

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

+ + + + 1) : ?> + + +
+ + diff --git a/scss/_core.scss b/scss/_core.scss new file mode 100644 index 0000000..4c18c87 --- /dev/null +++ b/scss/_core.scss @@ -0,0 +1,6 @@ +//@import 'core/normalize'; +@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 100644 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 100644 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 100644 index 0000000..3b12d1d --- /dev/null +++ b/scss/_drawing.scss @@ -0,0 +1,11 @@ +@import 'components/buttons'; +@import 'components/btn-groups'; +@import 'components/breadcrumb'; +@import 'components/badges'; +@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 100644 index 0000000..12a20ed --- /dev/null +++ b/scss/_global.scss @@ -0,0 +1,5 @@ +@import 'custom/global'; +@import 'components/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 100644 index 0000000..98dea2b --- /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 100644 index 0000000..554d5de --- /dev/null +++ b/scss/_utils.scss @@ -0,0 +1,8 @@ +@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 100644 index 0000000..9360a61 --- /dev/null +++ b/scss/components/_badges.scss @@ -0,0 +1,8 @@ +.badge { + 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); +} diff --git a/scss/components/_breadcrumb.scss b/scss/components/_breadcrumb.scss new file mode 100644 index 0000000..4a564f1 --- /dev/null +++ b/scss/components/_breadcrumb.scss @@ -0,0 +1,22 @@ +ul.breadcrumb, ol.breadcrumb, .breadcrumb { + @include shape-style($button_large); + background-color: $color-background-alt; + &::before { + background-color: $color-background-alt; + box-shadow: $btn-shadow; + } + 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 100644 index 0000000..aa33e1d --- /dev/null +++ b/scss/components/_btn-groups.scss @@ -0,0 +1,26 @@ +// BUTTONS GROUPS + +.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 100644 index 0000000..65d3668 --- /dev/null +++ b/scss/components/_buttons.scss @@ -0,0 +1,141 @@ +@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; +} + + +.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: none!important; + + &::before { + background-color: var(--accent-color); + box-shadow: $btn-shadow; + } + &:visited { + color: var(--text-color-contrast); + } + + &:hover, + &:active { + &::before { + 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; + + &::before { + 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!important; + &::before { + background-color: transparent; + box-shadow: none; + } + + &:hover, + &:active { + &::before { + background-color: var(--link-color-hover); + } + } + +} diff --git a/scss/components/_cards.scss b/scss/components/_cards.scss new file mode 100644 index 0000000..b3d0c5f --- /dev/null +++ b/scss/components/_cards.scss @@ -0,0 +1,55 @@ +$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); + box-shadow: $btn-shadow; + } + } +} + +@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; + } +} diff --git a/scss/components/_input.scss b/scss/components/_input.scss new file mode 100644 index 0000000..bda70b9 --- /dev/null +++ b/scss/components/_input.scss @@ -0,0 +1,99 @@ +input, +textarea { + width: 100%; + background-color: $color-background-alt; + border-radius: $well-radius; + border: 0px solid rgba(0, 0, 0, 0); + padding: $lineheight_rel / 4; + line-height: $lineheight_rel; + overflow: auto; + + .card & { + background-color: $color-background; + } +} + +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"] { + -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 100644 index 0000000..382f7a3 --- /dev/null +++ b/scss/components/_menus.scss @@ -0,0 +1,129 @@ +.menu { + display: flex; + flex-direction: column; + + ul, + li { + list-style: none; + padding: 0; + margin: 0; + } + + + &.toolbar a, + &.toolbar a:visited { + margin: 0px 2px; + } + + a, + a:visited { + display: flex; + line-height: $lineheight_rel; + padding: $lineheight_rel / 4; + margin: 2px 0px; + justify-content: space-between; + align-items: center; + text-decoration: none; + border-radius: $btn-radius; + + 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, + &.active { + 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 100644 index 0000000..8b031aa --- /dev/null +++ b/scss/components/_pagination.scss @@ -0,0 +1,30 @@ +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 { + &::before { + background-color: var(--link-color-hover); + } + } + } + + &.current { + @include background-color($color-primary); + &::before { + background-color: $color-primary; + } + } + } +} diff --git a/scss/components/_previews.scss b/scss/components/_previews.scss new file mode 100644 index 0000000..145d898 --- /dev/null +++ b/scss/components/_previews.scss @@ -0,0 +1,289 @@ +$preview-height: 8*$lineheight; +$preview-content-height:165px; +$comment-peek-height:0px; + +.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; + } +} + +.preview-grid-3 { + @include xl() { + grid-template-columns: 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; + max-width:360px; +} + +.preview-link { + padding:0; + background-color: transparent; + margin:0!important; + text-decoration: none; + position:relative; + height: $preview-height; + + .card-header { + letter-spacing: normal; + padding: $lineheight_half/2 $card-header-padding; + padding-bottom: $lineheight_half/2 !important; + &:before { + left: -$lineheight_half/2; + right: -$lineheight_half/2; + box-shadow: $btn-shadow; + } + + position:absolute; + margin:0; + top:0.5rem; + z-index:1; + min-height:2.8rem; + display:flex; + flex-direction: column; + justify-content: center; + } +} + +.preview-content { + font-size:0.9rem; + height: 100%; + width: 100%; + line-height: $lineheight !important; + text-align:justify; + background-color:rgba(0,0,0,0.00); + color: transparentize($color-font, 0.3); + position: relative; + overflow:hidden; + @include border-radius($card-radius); + box-shadow: $btn-shadow; + + .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, backdrop-filter 0.3s; + overflow: hidden; + @include border-radius($card-radius); + } + + &:hover { + .preview-overlay { + backdrop-filter: blur(2px); + background-color:rgba(0,0,0,0.4); + + .metadata-pills { + opacity: .9; + transition: opacity .5s, height .5s; + } + + .comment-text { + bottom:0px; + } + } + } +} + +.preview-exerpt { + 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; + + display: flex; + -ms-flex-align: center !important; + align-items: center !important; + justify-content: center; + + h1, h2, h3, h4, h5, h6 { + margin-bottom:0px; + max-width:100%; + display:none; + } + + & > p { + width:100%; + margin:auto; + + &:not(.p-img) { + position:absolute; + top:3rem; + padding:0.5rem; + } + + & > 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:100%; + overflow: hidden; + @include border-radius($card-radius); + + .metadata-pills { + 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; + padding-top:3rem; + } +} + +.card-preview.head-info { + .comment-text { + @include angled-edge('outside top', 'upper left', $color-secondary, 16); + background-color:$color-secondary; + } +} + +.card-preview.card-grey { + .comment-text { + @include angled-edge('outside top', 'upper left', $color-muted, 16); + background-color:$color-muted; + } +} + +.comment-text { + color: $color-font-light; + background-color:$color-primary; + @include angled-edge('outside top', 'upper left', $color-primary, 16); + text-align: center; + position:absolute; + bottom:-$lineheight; + width:100%; + transition: bottom 0.3s; +} + +.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 100644 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 100644 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 100644 index 0000000..d25f577 --- /dev/null +++ b/scss/components/_toasts.scss @@ -0,0 +1,30 @@ +@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(); +} + +.well { + box-shadow: $btn-shadow; +} + +.toast { + background-color: var(--accent-color); + color: var(--text-color-contrast); + box-shadow: $btn-shadow; +} + +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 100644 index 0000000..0cd67ca --- /dev/null +++ b/scss/core/_bases.scss @@ -0,0 +1,50 @@ +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + // Text initialization + font-family: $basefont; + text-align: left; + font-size: $fontsize; + @include old() { + font-size: $fontsize-small; + } + 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/_columns.scss b/scss/core/_columns.scss new file mode 100644 index 0000000..6e485d0 --- /dev/null +++ b/scss/core/_columns.scss @@ -0,0 +1,72 @@ +@mixin column($size) { + grid-column: span $size; +} + +[class*=" col-"], +[class^=col-] { + 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 100644 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 100644 index 0000000..696947c --- /dev/null +++ b/scss/core/_icons.scss @@ -0,0 +1,19 @@ +.icon { + display: inline-block; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; + color: currentColor; + position: relative; + top: 0.1em; +} + +.social .icon { + top: 0; +} + +.toolbar .icon { + top: 0.2em; +} \ No newline at end of file diff --git a/scss/core/_normalize.scss b/scss/core/_normalize.scss new file mode 100644 index 0000000..039c093 --- /dev/null +++ b/scss/core/_normalize.scss @@ -0,0 +1,44 @@ +main { + display: block; +} + +/* Forms + ========================================================================== */ + +/* 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 100644 index 0000000..8f8200e --- /dev/null +++ b/scss/core/_typography.scss @@ -0,0 +1,192 @@ +@mixin paragraph() { + padding:0; + padding-bottom: $lineheight; + margin: 0; +} + + :root { + @include accent-color($color-primary); + --text-color:#{$color-font}; + --link-color-hover:#{transparentize($color-font, 0.85)}; + --link-color:#{darken($color-link, 10%)}; + } + +// html, body { +// font-family: $basefont; +// text-align: left; +// font-size: $fontsize; +// line-height: $lineheight; +// color: getFontColor(); +// font-weight: $fontweight_base; +// } + +strong { + font-weight: $fontweight_bold; +} + +em { + font-style: italic; + font-weight: $fontweight_base; +} + +mark { + padding: 0.05rem 0.25rem; + border-radius: 0.1rem; +} + +img { + border-style: none; + article & { + max-width:100%; + height: auto; + } +} + +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%); + } + } +} + +h1, .title-1, .main-title, +.page-title { + font-family: $titlefont; + @include newTitle(3, $fontweight_hyper); + color: $color-primary; + letter-spacing: -3px; + font-style: italic; +} + +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; +} diff --git a/scss/custom/_angled-edges.scss b/scss/custom/_angled-edges.scss new file mode 100644 index 0000000..1093932 --- /dev/null +++ b/scss/custom/_angled-edges.scss @@ -0,0 +1,143 @@ +//------------------------------------------------------------------------------------- +// Angled Edges v2.0.0 (https://github.com/josephfusco/angled-edges) +// Copyright 2017 Joseph Fusco +// Licensed under MIT (https://github.com/josephfusco/angled-edges/blob/master/LICENSE) +//------------------------------------------------------------------------------------- + +/// Replace `$search` with `$replace` in `$string`. +/// +/// @author Hugo Giraudel +/// @link http://www.sassmeister.com/gist/1b4f2da5527830088e4d +/// +/// @param {String} $string - Initial string +/// @param {String} $search - Substring to replace +/// @param {String} $replace ('') - New value +/// @return {String} Updated string +/// +@function ae-str-replace($string, $search, $replace: '') { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + ae-str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} + +/// Encode SVG to use as background. +/// +/// @param {String} $string +/// @return {String} Encoded svg data +/// +@function ae-svg-encode($string){ + $result: ae-str-replace($string, '', '%3E'); + + @return 'data:image/svg+xml,' + $result; +} + +/// Outputs pseudo content for main mixin. +/// +/// @author Joseph Fusco +/// +/// @param {String} $location +/// @param {Number} $height +/// @output psuedo content +/// +@mixin ae-pseudo($wedge, $height, $width) { + background-image: url($wedge); + background-position: center center; + background-repeat: no-repeat; + + // full width wedge - needed as Firefox ignores preserveAspectRatio="none" in this case + @if ($width == null) { + background-size: 100% 100%; + } + + content: ''; + height: $height * 1px; + left: 0; + position: absolute; + right: 0; + width: 100%; + z-index: 1; +} + +/// Attatches an svg wedge shape to an element. +/// +/// @author Joseph Fusco +/// +/// @param {String} $location - 'inside top', 'outside top', 'inside bottom', 'outside bottom' +/// @param {String} $hypotenuse - 'upper left', 'upper right', 'lower left', 'lower right' +/// @param {Color} $fill +/// @param {Number} $height +/// @param {Number} $width +/// @output '::before' and/or '::after' with svg background image +/// +@mixin angled-edge($location, $hypotenuse, $fill, $height: 100, $width: null) { + + position: relative; + + $points: ( + 'upper left': '0,#{$height} #{$width},#{$height} #{$width},0', + 'upper right': '0,#{$height} #{$width},#{$height} 0,0', + 'lower left': '0,0 #{$width},#{$height} #{$width},0', + 'lower right': '0,0 #{$width},0 0,#{$height}' + ); + + // full width wedge + @if ($width == null) { + $points: ( + 'upper left': '0,#{$height} 100,#{$height} 100,0', + 'upper right': '0,#{$height} 100,#{$height} 0,0', + 'lower left': '0,0 100,#{$height} 100,0', + 'lower right': '0,0 100,0 0,#{$height}' + ); + } + + // ensure $fill color is using rgb() + $fill-rgb: 'rgb(' + round(red($fill)) + ',' + round(green($fill)) + ',' + round(blue($fill)) + ')'; + + // capture alpha component of $fill to use with fill-opacity + $fill-alpha: alpha($fill); + + $wedge: ''; + + // full width wedge + @if ($width == null) { + $wedge: ''; + } + + $encoded-wedge: ae-svg-encode($wedge); + + @if ($location == 'inside top') { + &::before { + @include ae-pseudo($encoded-wedge, $height, $width); + top: 0; + } + } @else if ($location == 'outside top') { + &::before { + @include ae-pseudo($encoded-wedge, $height, $width); + top: -$height * 1px; + } + } @else if ($location == 'inside bottom') { + &::after { + @include ae-pseudo($encoded-wedge, $height, $width); + bottom: 0; + } + } @else if ($location == 'outside bottom') { + &::after { + @include ae-pseudo($encoded-wedge, $height, $width); + bottom: -$height * 1px; + } + } @else { + @error 'Invalid argument for $location - must use: `inside top`, `outside top`, `inside bottom`, `outside bottom`'; + } + + @if (map-has-key($points, $hypotenuse) == false) { + @error 'Invalid argument for $hypotenuse - must use: `upper left`, `upper right`, `lower left`, `lower right`'; + } +} diff --git a/scss/custom/_article.scss b/scss/custom/_article.scss new file mode 100644 index 0000000..ee30aaa --- /dev/null +++ b/scss/custom/_article.scss @@ -0,0 +1,68 @@ +.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; + } + } +} + +.header-anchor { + color: rgba(0,0,0,0.4); + font-weight: 900; + font-family: $basefont; + text-decoration: none; + display: inline-block; + font-style: normal; + font-size: 0.75em; +} + +.header-anchor { + opacity: 0; +} + +:hover > .header-anchor { + opacity: 1; +} + +.aligncenter { + text-align: center; +} + +.alignright { + text-align: right; +} + +#sommaire { + position: sticky; + top: 32px; +} \ No newline at end of file diff --git a/scss/custom/_featured.scss b/scss/custom/_featured.scss new file mode 100644 index 0000000..8b67fab --- /dev/null +++ b/scss/custom/_featured.scss @@ -0,0 +1,38 @@ +.preview-featured { + font-size: 0.8rem; + + .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 100644 index 0000000..0fbe9f4 --- /dev/null +++ b/scss/custom/_global.scss @@ -0,0 +1,294 @@ +@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;} +} + +#description { + display:grid; + grid-template-columns: 1fr; + grid-template-areas: + "title" + "illustration" + "content"; + @include xl() { + grid-template-columns: 400px auto; + grid-template-areas: + "title title" + "illustration content"; + } +} + +#desc-title { + grid-area: title; +} + +#description-content { + grid-area:content; +} + +.illustration { + display:block; + margin:auto; + grid-area:illustration; + max-width:100%; + height:auto; + @include xl() { + padding-bottom: 0; + max-width: 530px; + margin-bottom: 1.5rem; + position: relative; + top: 0px; + right: 64px; + } +} + +.align-centered-block { + text-align:center; + padding:1rem; +} + +#page-header { + background: get-color("skyblue") url("data:image/svg+xml,%3Csvg width='800' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='420' cy='440' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='700' cy='510' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='-100' cy='510' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='150' cy='380' r='150' fill='%23FDF7E7' /%3E%3C/svg%3E"); + border-top: 6px solid get-color("dark"); + background-position: bottom center; + background-repeat: repeat-x; + margin-bottom:0; + padding-bottom:5rem; + .fa { + font-size: 1rem; + } + + @include sm() { + padding-bottom: 0; + margin-bottom: 1.5rem; + } +} + +header h1 { + border-style:none !important; + font-weight: $fontweight_hyper; + font-size:5.4em; + font-style:oblique; + padding:0rem; + line-height: 1rem; + max-width: $container-size; + margin: auto; + text-align:center; + + @include xl() { + text-align: left; + } + + img { + max-width: 560px; + height: auto; + margin-top:0rem; + width: 100%; + + @include xl() { + position: relative; + left:-4rem; + } + z-index:0; + } + + 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; +} + +.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 320px; + grid-template-areas: "main side"; + } +} + +.grid-2-elements { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + row-gap: $lineheight; + column-gap: 1.5rem; + @include lg() { + grid-template-columns: 1fr 1fr; + } +} + +.fullwidth { + grid-column: span 2; +} + +.sidebar { + grid-area: side; +} + +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; +} + +$color-footer-back: get-color("dark"); +$color-footer-text: get-color("light"); + +body { + background-color: $color-background; +} + +footer { + padding-bottom:1.5rem; + padding-top: 1.5rem; + .columns { + @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; +} + +ul.social { + font-size: 1.5em; + padding-bottom: 1.5em; + margin: auto; + text-align: center; + display: flex; + justify-content: center; + + li { + margin: 0; + list-style: none; + line-height: 1; + + a, + a:visited { + color: $color-font-light; + background-color: var(--accent-color); + box-shadow: $btn-shadow; + padding: 0.3em; + width: 3rem; + aspect-ratio: 1; + + display:flex; + align-items: center; + justify-content: center; + text-decoration: none; + border-radius: 100%; + line-height: 1; + margin:0.33rem; + + &:hover { + background-color: var(--accent-color-hover); + } + } + } +} + +iframe { + width: 100%; + height: 428px; + border:none; +} \ No newline at end of file diff --git a/scss/custom/_mobile.scss b/scss/custom/_mobile.scss new file mode 100644 index 0000000..4992fa3 --- /dev/null +++ b/scss/custom/_mobile.scss @@ -0,0 +1,73 @@ +html { + margin-left:0; + @include lg() { + margin-left:320px; + } +} + +#searchfield { + outline-color: $color-background-alt; + border-radius: $card-radius; + box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4); + +} + +#mobile-sidebar { + position: fixed; + top:0; + left:-100vw; + width: 320px; + height:100vh; + transition: left 0.2s; + padding: 1rem; + overflow: hidden; + &.shown { + left:0; + } + + @include lg() { + left:0; + } + + z-index:10; + box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.6); +} + +img.myavatar { + height: 140px; + width: auto; + display: block; + margin: 1rem auto 1.5rem auto; + border: 3px solid $color-background; + box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.5); + border-radius: 8px; + @include old() { + height: 128px; + margin: 0.25rem auto 1rem auto; + } +} + +.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; + z-index: 12; + + &:hover { + background-color: $color-primary; + } + + @include lg() { + display: none; + } +} \ No newline at end of file diff --git a/scss/definitions/_borders.scss b/scss/definitions/_borders.scss new file mode 100644 index 0000000..f5fc629 --- /dev/null +++ b/scss/definitions/_borders.scss @@ -0,0 +1,6 @@ +// BORDERS AND BORDER-RADIUSES + +$card-radius: 6px; +$btn-radius: 3px; +$well-radius: $card-radius; +$border-size: 0px; diff --git a/scss/definitions/_fonts.scss b/scss/definitions/_fonts.scss new file mode 100644 index 0000000..3b87a47 --- /dev/null +++ b/scss/definitions/_fonts.scss @@ -0,0 +1,34 @@ +// FONTS +// Define how looks the text + +$fontsize: 4.5mm; +$fontsize-small:4.25mm; + +$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: 'Comic Neue Bold Italic', sans-serif; + +@font-face { + font-family: 'Comic Neue Bold Italic'; + src: local('Comic Neue Bold Italic'), local('ComicNeue-BoldItalic'), + url('../fonts/ComicNeue-BoldItalic.woff2') format('woff2'), + url('../fonts/ComicNeue-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; + font-display: swap; +} \ No newline at end of file diff --git a/scss/definitions/_palette.scss b/scss/definitions/_palette.scss new file mode 100644 index 0000000..fb05255 --- /dev/null +++ b/scss/definitions/_palette.scss @@ -0,0 +1,73 @@ +$whiteness_value: 0.8; + +// Couleurs de base du theme : + +$palette: ( + "blue":#0f7e84, + "violet":#CB357D, + "red":#dc322f, + "orange":#cb4b16, + "green":#859900, + "skyblue":#0f7e84, + "dark": #002b36, + "light":#FDF7E7, + "yellow":#b58900, + "grey":#586e75, + "dark2":#073642, + "light2":#eee8d5); + +$semantics: ( + "primary":"violet", + "secondary":"skyblue", + "warning":"orange", + "danger":"red", + "info":"skyblue", + "success":"green", + "muted":"grey", + "light":"light", + "dark":"dark"); + +$helpers: ( + "font":"dark2", + "font-light":"light", + "background":"light", + "background-alt":"light2", + "link":"violet", + "selection":"skyblue", + "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); + } + } +} + +// **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 100644 index 0000000..332c225 --- /dev/null +++ b/scss/definitions/_shadows.scss @@ -0,0 +1,10 @@ +// 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); + +$btn-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); \ No newline at end of file diff --git a/scss/definitions/_sizing.scss b/scss/definitions/_sizing.scss new file mode 100644 index 0000000..0dfe0e5 --- /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: $lineheight_rel / 2; +$card-header-hmargin: 0px; +$card-header-padding: $lineheight_rel; +$card-header-width: 85%; +$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 100644 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 100644 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 100644 index 0000000..a08ed32 --- /dev/null +++ b/scss/mixins/_colors.scss @@ -0,0 +1,59 @@ + // 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) { + --accent-color: #{$accent-color}; + --text-color-contrast: #{getTextColorFromBackground($accent-color)}; + --accent-color-hover: #{accentuate($accent-color)}; + } \ No newline at end of file diff --git a/scss/mixins/_li.scss b/scss/mixins/_li.scss new file mode 100644 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 100644 index 0000000..46dcbf5 --- /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; + + box-shadow: $btn-shadow; + + & > * { + margin-left: $size / 2; + margin-right: $size / 2; + &:first-child, + &.sr-only:first-child ~ * { + margin-top: $size; + &.card-header { + margin-top:$card-header-vmargin; + letter-spacing: normal; + } + } + &: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); + 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 100644 index 0000000..2a423a8 --- /dev/null +++ b/scss/mixins/_responsive.scss @@ -0,0 +1,91 @@ +// 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; + } +} + +// Old desktop +@mixin old { + @media (max-width: 1366px) and (max-height: 768px) { + @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 100644 index 0000000..253d77b --- /dev/null +++ b/scss/mixins/_shape.scss @@ -0,0 +1,34 @@ +@mixin biseau($size) { + position: relative; + z-index: 1; + overflow: visible; + + &:before { + content: " "; + position: absolute; + top: 0; + left: -$size/2; + right: -$size/2; + bottom: 0; + z-index: -1; + transform: skewX(-15deg); + transition: background-color 0.3s; + border-radius: $card-radius; + } +} + +@mixin shape-style($size) { + @include borders(); + @include border-radius($btn-radius); + @include biseau($size); + + background-color:transparent; +} + +@mixin colorize-shape($background-color) { + background-color: $background-color; + + &:before { + background-color: $background-color; + } +} diff --git a/scss/style.scss b/scss/style.scss new file mode 100644 index 0000000..f565a77 --- /dev/null +++ b/scss/style.scss @@ -0,0 +1,25 @@ +/* + Theme Name: Kazhnuz Space + Theme URI: https://git.kobold.cafe/quarante-douze/qdouze2-wordpress-theme + Author: Kazhnuz + Author URI: https://kazhnuz.space + Description: The default theme for Kazhnuz Space, my personnal blog. + Version: 0.2 + License: GNU General Public License v3 or later + License URI: http://www.gnu.org/licenses/gpl-2.0.html + Tags: blog, two-columns, right-sidebar + Text Domain: kspace-wordpress-theme + + This theme is licensed under the GPLv3. +*/ + +@import 'custom/angled-edges'; + +@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 100644 index 0000000..29b0519 --- /dev/null +++ b/scss/utils/_a11y.scss @@ -0,0 +1,69 @@ +.screen-reader-text, .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + opacity: 0; + transition-delay: .8s; + transition-property: opacity; + transition-duration: 0.2s; +} + +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} + +a.sr-hover { + position: relative; + overflow: visible; +} + +.sr-hover:hover .sr-only { + position: absolute; + display: block; + width: auto; + height: auto; + clip: auto; + overflow: visible; + background-color: rgba(0, 0, 0, 0.8); + border-radius: 6px; + top: 110%; + left: 50%; + transform: translateX(-50%); + white-space: nowrap; + padding: 3px 9px; + margin: 0px; + font-size: 1rem; + z-index: 10; + border: 1px solid rgba(255,255,255,0.3); + opacity: 1; +} + +.article img::before { + content:"alt"; +} + +.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 100644 index 0000000..d543560 --- /dev/null +++ b/scss/utils/_align.scss @@ -0,0 +1,16 @@ +.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;} +} + +.icon-fw { + width: 1em; + display: inline-block; + text-align: center; +} \ No newline at end of file diff --git a/scss/utils/_borders.scss b/scss/utils/_borders.scss new file mode 100644 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 100644 index 0000000..6557249 --- /dev/null +++ b/scss/utils/_colorize.scss @@ -0,0 +1,93 @@ +@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 { + @include bg-color(get-color("dark")); +} + +// .bg { + +// @each $name, +// $color in list-colors() { +// &-#{$name} { +// @include bg-color(get-color($name)); +// &:hover { +// @include bg-color(get-color($name)); +// } +// } +// } +// } + +// .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)); +// } +// } +// } + +.c, .btn, .head, .text { + @each $name, + $color in list-colors() { + &-#{$name} { + @include accent-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 100644 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 100644 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 100644 index 0000000..7d366c7 --- /dev/null +++ b/scss/utils/_lists.scss @@ -0,0 +1,3 @@ +.no-pills { + list-style:none; +} diff --git a/scss/utils/_sizing.scss b/scss/utils/_sizing.scss new file mode 100644 index 0000000..9e2fc13 --- /dev/null +++ b/scss/utils/_sizing.scss @@ -0,0 +1,67 @@ +@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) + } +} + +.ellipsis { + flex: 1; + + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: 0; + padding-right: 6px; +} \ No newline at end of file