diff --git a/css/grid.css b/css/grid.css deleted file mode 100644 index c0121da..0000000 --- a/css/grid.css +++ /dev/null @@ -1,208 +0,0 @@ -/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */ -/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */ -/* https://stackoverflow.com/a/45059944 */ -/* Flex grid, done similarly to a float: left. So content needs to be within the grid */ -/* -ms-grid-columns: 1fr (20px 1fr)[3]; */ -/* grid-template-columns: 1fr repeat(3, 20px 1fr); */ -/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */ - -html{ - font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */ -} - -:root { - --sm: 0; - --md: 0; - --lg: 0; -} -:root { - --active-brightness: 0.85; - --border-radius: 8px; - --box-shadow: 0px 2px 8px; - --color-accent: #dae9f6; - --color-bg: #fff; - --color-bg-secondary: #e9e9e9; - --color-link: #118bee; - --color-secondary: #508ce2; - --color-secondary-accent: #dee9fa; - --color-shadow: #f4f4f4; - --color-table: #118bee; - --color-text: #000; - --color-text-secondary: #999; - --color-scrollbar: #cacae8; - --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - --hover-brightness: 1.2; - --justify-important: center; - --justify-normal: left; - --line-height: 1.5; - --width-card: 285px; - --width-card-medium: 460px; - --width-card-wide: 800px; - --width-content: 1080px; -} -@media (prefers-color-scheme: dark) { - :root[color-mode="user"] { - --color-accent: #0097fc; - --color-bg: #333; - --color-bg-secondary: #555; - --color-link: #0097fc; - --color-secondary: #e20de9; - --color-secondary-accent: #e20de9; - --color-shadow: #bbbbbb20; - --color-table: #0097fc; - --color-text: #f7f7f7; - --color-text-secondary: #aaa; - } -} - -.container{ - margin: 0 auto; - max-width: var(--width-content); - padding: 1.4rem 1rem; - /* overflow: auto; */ -} -.container--no-topgap{ - padding-top: 0; -} -.container--no-botgap{ - padding-bottom: 0; -} -.container--no-gap{ - /* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */ - padding-bottom: 0; - padding-top: 0; -} - - -.row { - position: relative; - width: 100%; - - display: flex; - flex-wrap: wrap; - align-items: flex-start; - flex-direction: row; - row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */ -} - -.row+.row{ - margin-top: 1.4rem; -} - -/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */ -/* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */ -/* .col>*{ */ -.col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption, -.col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main, -.col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{ - width: 100%; -} -/* inline elements */ -.col img{ - max-width: 100%; - height: auto; - margin-right: auto; - margin-left: auto; -} - - -/* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */ -/* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */ -.row [class^="col"]{ - padding-right: 0.625rem; /* ~20px gap = 20/16(html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */ - padding-left: 0.625rem; /* In place of gap, so it can be full width rows */ - - /* display: flex; */ - /* flex-wrap: wrap; */ - min-height: 0.125rem; -} - - -.row--scroll{ - flex-wrap: nowrap; - overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */ - justify-content: left; - /* Scrollbar stuff */ - scrollbar-color: #444 transparent; - scrollbar-width: thin; - padding-bottom: .5rem; -} -.row--scroll [class^="col"]{ - -} - -.col{ - flex: 0 0 auto; -} - -.col-1, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-10, -.col-11, -.col-12 { - flex: 0 0 100%; -} - -/* (100/12) * x = the flex % */ -.col-sm-1 { flex: 0 0 8.33%; } -.col-sm-2 { flex: 0 0 16.66%; } -.col-sm-3 { flex: 0 0 25%; } -.col-sm-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */ -.col-sm-4 { flex: 0 0 33.33%; } -.col-sm-5 { flex: 0 0 41.66%; } -.col-sm-6 { flex: 0 0 50%; } -.col-sm-7 { flex: 0 0 58.33%; } -.col-sm-8 { flex: 0 0 66.66%; } -.col-sm-9 { flex: 0 0 75%; } -.col-sm-10 { flex: 0 0 83.33%; } -.col-sm-11 { flex: 0 0 91.66%; } -.col-sm-12 { flex: 0 0 100%; } - -.hidden-sm { - display: none; -} - -@media only screen and (min-width: 33.75rem) { /* ~540px */ -} - -@media only screen and (min-width: 45rem) { /* ~720px */ - .col-1 { flex: 0 0 8.33%; } - .col-2 { flex: 0 0 16.66%; } - .col-3 { flex: 0 0 25%; } - .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */ - .col-4 { flex: 0 0 33.33%; } - .col-5 { flex: 0 0 41.66%; } - .col-6 { flex: 0 0 50%; } - .col-7 { flex: 0 0 58.33%; } - .col-8 { flex: 0 0 66.66%; } - .col-9 { flex: 0 0 75%; } - .col-10 { flex: 0 0 83.33%; } - .col-11 { flex: 0 0 91.66%; } - .col-12 { flex: 0 0 100%; } - - .hidden-sm { display: block; } -} - -@media only screen and (min-width: 60em) { /* ~960px */ -} - -/* Try to avoid !important, have each rule set to keep track of */ -.no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{ - padding: 0; /* In-case elements want to be full-width, touching, etc */ -} - -.row--align-center{ align-items: center;} -.col--align-center{ align-self: center; align-self: anchor-center} - -/* Sort into col/sm areas with media queries */ -.col-grow, .col-grow-sm -,.col-fill, .col-fill-sm{ - flex-grow: 1; -} diff --git a/css/grid/main.css.map b/css/grid/main.css.map new file mode 100644 index 0000000..241a135 --- /dev/null +++ b/css/grid/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"main.css"} \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..4f98310 --- /dev/null +++ b/css/main.css @@ -0,0 +1 @@ +*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul,ol{margin:0}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,h5,h6,button,input,label{line-height:1.35}h1,h2,h3,h4,h5,h6{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}ul,ol{padding:0;list-style-position:inside}html{scroll-behavior:smooth}@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}}html,body{height:100%}body{display:flex;flex-direction:column}main,.main{flex:1 0 auto}body{background:#fff;color:#000;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;line-height:1.5;overflow-x:hidden;margin:0;padding:0}html{font-size:18px}.container{margin:0 auto;max-width:1080px;padding:1.4rem 1rem}.container--no-topgap{padding-top:0}.container--no-botgap{padding-bottom:0}.container--no-gap{padding-bottom:0;padding-top:0}.row{position:relative;width:100%;display:flex;flex-wrap:wrap;align-items:flex-start;flex-direction:row;row-gap:1.25rem}.row+.row{margin-top:1.4rem}.col>address,.col>article,.col>aside,.col>blockquote,.col>canvas,.col>dd,.col>div,.col>dl,.col>dt,.col>fieldset,.col>figcaption,.col>figure,.col>footer,.col>form,.col>h1,.col>h2,.col>h3,.col>h4,.col>h5,.col>h6,.col>header,.col>hr,.col>li,.col>main,.col>main,.col>nav,.col>noscript,.col>ol,.col>p,.col>pre,.col>section,.col>table,.col>tfoot,.col>ul,.col>video{width:100%}.col img{max-width:100%;height:auto;margin-right:auto;margin-left:auto}.row [class^=col]{padding-right:.625rem;padding-left:.625rem;min-height:.125rem}.row--scroll{flex-wrap:nowrap;overflow-x:scroll;justify-content:left;scrollbar-color:#444 rgba(0,0,0,0);scrollbar-width:thin;padding-bottom:.5rem}.col{flex:0 0 auto}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{flex:0 0 100%}.col-sm-1{flex:0 0 8.33%}.col-sm-2{flex:0 0 16.66%}.col-sm-3{flex:0 0 25%}.col-sm-3p5{flex:0 0 29.166%}.col-sm-4{flex:0 0 33.33%}.col-sm-5{flex:0 0 41.66%}.col-sm-6{flex:0 0 50%}.col-sm-7{flex:0 0 58.33%}.col-sm-8{flex:0 0 66.66%}.col-sm-9{flex:0 0 75%}.col-sm-10{flex:0 0 83.33%}.col-sm-11{flex:0 0 91.66%}.col-sm-12{flex:0 0 100%}.hidden-sm{display:none}@media only screen and (min-width: 45rem){.col-1{flex:0 0 8.33%}.col-2{flex:0 0 16.66%}.col-3{flex:0 0 25%}.col-3p5{flex:0 0 29.166%}.col-4{flex:0 0 33.33%}.col-5{flex:0 0 41.66%}.col-6{flex:0 0 50%}.col-7{flex:0 0 58.33%}.col-8{flex:0 0 66.66%}.col-9{flex:0 0 75%}.col-10{flex:0 0 83.33%}.col-11{flex:0 0 91.66%}.col-12{flex:0 0 100%}.hidden-sm{display:block}}.no-padd,.row.no-padd [class^=col],.row [class^=col].no-padd{padding:0}.row--align-center{align-items:center}.col--align-center{align-self:center;align-self:anchor-center}.col-grow,.col-grow-sm,.col-fill,.col-fill-sm{flex-grow:1}p{padding:0;width:100%}p+p,h1+p{margin-top:.75rem}mark,.highlight{padding:.1rem;background:#ff8c00}small{color:#999}hr{background-color:#e9e9e9;border:none;height:1px;width:100%;max-width:1080px;margin:.5rem auto}a{color:#118bee;display:inline-block;font-weight:bold;text-decoration:underline}a:hover{filter:brightness(1.2)}a:active{filter:brightness(0.85)}figure{margin:0;padding:0}figure img{max-width:100%}figure figcaption{color:#999}section img,article img{max-width:100%}.button,button,input[type=submit]{background:#fefefe;border:2px solid #118bee;border-radius:8px;display:inline-block;font-size:.9rem;font-weight:bold;line-height:1.5;margin-top:.5rem;padding:.6rem 1.2rem;text-decoration:none}.button+.button,button+button{margin-left:6px}.button--small,button.button--small,input[type=submit].button--small{padding:.2rem 1.6rem}.button,button,input[type=submit]{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.button:hover,button:hover,input[type=submit]:hover{cursor:pointer;filter:brightness(1.2)}.button:active,button:active,input[type=submit]:active{filter:brightness(0.85)}.button--blue,button.button--blue,input[type=submit].button--blue{background-color:#118bee;color:#fff}.button--disabled,button:disabled,input:disabled{background:#e9e9e9;border-color:#e9e9e9;color:#999;cursor:not-allowed}.button--disabled:hover,button[disabled]:hover,input[type=submit][disabled]:hover{filter:none}.card{border:1px solid #e9e9e9;border-radius:8px;box-shadow:0 2px 8px #f4f4f4;padding:1.25rem;background:#fff;display:block !important}.card:hover{box-shadow:0 2px 8px #e9e9e9}.row--cards{align-items:stretch}.row--cards .card{height:100%}form{border:1px solid #e9e9e9;border-radius:8px;box-shadow:0 2px 8px #f4f4f4;display:block;max-width:800px;min-width:285px;padding:1.5rem;text-align:left;margin:0 auto}form header{margin:1.5rem 0;padding:1.5rem 0}input,label,select,textarea{display:block;font-size:inherit;max-width:800px}label{font-weight:bold;margin-bottom:.2rem}input[type=checkbox],input[type=radio]{display:inline-block}input[type=checkbox]+label,input[type=radio]+label{display:inline-block;font-weight:normal;position:relative;top:1px}input[type=range]{padding:.4rem 0}input,select,textarea{border:1px solid #e9e9e9;border-radius:8px;margin-bottom:1rem;padding:.4rem .8rem}input[type=text],input[type=password] textarea{width:calc(100% - 1.6rem)}input[readonly],textarea[readonly]{background-color:#e9e9e9}.alert{background:#dee9fa;border-left:4px solid #508ce2;border-right:4px solid #508ce2;padding:.1rem .8rem;margin-bottom:.5rem}.alert--error{background:#f05870;border-color:#e90d30}.alert--warning{background:#e8e85b;border-color:#ddde11}.alert--success{background:#60c572;border-color:#18ab34}ol li,ul li{padding:.2rem 0}.no-bullet-point{list-style:none}.inline-list{list-style:none;padding:0;margin-left:-0.5rem}.inline-list li{display:inline-block;margin:0 .5rem;position:relative;text-align:left}.inline-list>li{padding:0}.inline-list li:hover ul{display:block}.inline-list li ul{background:#fff;border:1px solid #e9e9e9;border-top:10px solid rgba(0,0,0,0);border-radius:8px;display:none;height:auto;padding:.5rem 1rem;position:absolute;top:2rem;white-space:nowrap;width:auto;z-index:1;left:0}.inline-list li ul::before{content:"";position:absolute;left:0;right:0;top:-0.5rem;height:.5rem}.inline-list li ul li,.inline-list li ul li a{display:block}.modal{border:1px solid #e9e9e9;border-radius:8px;box-shadow:0 2px 8px #f4f4f4;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:50%;z-index:999}blockquote{display:block;font-size:x-large;line-height:1.5;margin:1rem auto;max-width:460px;padding:1.5rem 1rem;text-align:center}blockquote footer{color:#999;display:block;font-size:small;line-height:1.5;padding:1.5rem 0}.table-container{overflow-x:auto}table{border:1px solid #e9e9e9;border-radius:8px;border-spacing:0;max-width:100%;white-space:nowrap;text-align:left;border-collapse:collapse;overflow-wrap:normal}table td,table th,table tr{padding:.4rem .8rem;text-align:center}table thead tr{background-color:#118bee;color:#fff;margin:0;padding:0}table thead tr{border-top-left-radius:8px}tbody tr:nth-child(even){background-color:#dae9f6}tbody tr:nth-child(odd){background-color:#fff}.tag{background-color:#508ce2;border-radius:8px;color:#fff;font-size:xx-small;font-weight:bold;padding:.2rem 1rem;position:relative;top:-2px;display:inline-block;vertical-align:middle}code,samp{font-family:monospace;background-color:#dae9f6;border-radius:8px;color:#000;display:inline-block;margin:0 .1rem;padding:0 .5rem}pre{margin:.5rem 0;padding:.5rem 2rem;display:block;font-size:.9rem;line-height:1.3rem;background-color:#dae9f6;border-radius:8px;color:#000;overflow-x:auto;white-space:pre-wrap;border:1px solid #c1cfda}section pre{overflow:auto}.banner{width:100%;background:#eee}details{margin:.7rem 0}details summary{margin-bottom:.8rem;font-weight:bold;cursor:pointer}.nav a{text-decoration:none}.nav a{color:#ccc}.tar{text-align:right}.no-padd{padding:0}.hide{display:none} diff --git a/css/mvp.css b/css/mvp.css deleted file mode 100644 index 7c110ab..0000000 --- a/css/mvp.css +++ /dev/null @@ -1,503 +0,0 @@ -/* Based on MVP.css v1.15 - https://github.com/andybrewer/mvp */ -/* Altered to BEM, with other changes, and my own flex-box grid system */ - -*{ - box-sizing: border-box; -} - -html{scroll-behavior: smooth} -@media (prefers-reduced-motion: reduce){ - html{scroll-behavior: auto} -} - -/* Footer fixed to bottom */ -html,body{height: 100%} -body{display: flex;flex-direction: column;} -main, .main{ flex: 1 0 auto } - - -/* Layout */ -body { - background: var(--color-bg); - color: var(--color-text); - font-family: var(--font-family); - line-height: var(--line-height); - margin: 0; - overflow-x: hidden; - padding: 0; -} - - -/* Alerts */ -.alert{ - background: var(--color-secondary-accent); - border-left: 4px solid var(--color-secondary); - border-right: 4px solid var(--color-secondary); - padding: .1rem .8rem; - margin-bottom:.5rem; -} -.alert--error{ - background: #f05870; - border-color: #e90d30; -} -.alert--warning{ - background: #e8e85b; - border-color: #ddde11; -} -.alert--success{ - background: #60c572; - border-color: #18ab34; -} -/* /Alerts */ -hr{ - background-color: var(--color-bg-secondary); - border: none; - height: 1px; - width: 100%; - max-width: var(--width-content); - margin: .5rem auto; -} - -section img, -article img { - max-width: 100%; -} - -section pre { - overflow: auto; -} - -/* Cards is a row */ -/* Best to do this with grid, but there's less browser support... */ -.card{ - /* As not using grid atm, no solution to keep cards the same size when flex-wrapped */ - border: 1px solid var(--color-bg-secondary); - border-radius: var(--border-radius); - box-shadow: var(--box-shadow) var(--color-shadow); - padding: 1.25rem; - /* flex: 0 0 var(--width-card); */ - background: #FFF; - - display: block !important; /* Unset row/col default */ -} -.card:hover { - box-shadow: var(--box-shadow) var(--color-bg-secondary); -} -.row--cards{ - align-items: stretch; /* For cards to be "same height", requires the height 100% on card */ -} -.row--cards .card{ - height: 100%; /* To make multiple cards next to each other 'same' height */ -} - - -/* Nav */ -.nav a{ - text-decoration: none; -} -.nav a{ - color: #CCC; -} - - -/* Lists */ -ol li, -ul li { - padding: 0.2rem 0; -} - -.no-bullet-point{ - list-style: none; -} -/* Inline lists */ -.inline-list { - list-style: none; - padding: 0; - margin-left: -0.5rem; /* To offset the start of li margin. Little jank */ -} - -.inline-list li { - display: inline-block; - margin: 0 0.5rem; - position: relative; - text-align: left; -} -.inline-list>li{ /* Only affects first level li */ - padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */ -} - - -/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */ -/* Nav/inline-list Dropdown */ -.inline-list li:hover ul { - display: block; -} - -/* ?? maybe change */ -.inline-list li ul { - background: var(--color-bg); - border: 1px solid var(--color-bg-secondary); - border-top: 10px solid transparent; - border-radius: var(--border-radius); - display: none; - height: auto; - padding: .5rem 1rem; - position: absolute; - top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */ - white-space: nowrap; - width: auto; - z-index: 1; - - /* Centre */ - /* left: 50%; - transform: translate(-50%, 0); */ - /* Left */ - left: 0; - /* Right */ - /* transform: translate(-50%, 0); */ -} - -.inline-list li ul::before { - /* fill gap above to make mousing over them easier */ - /* background-color: green; */ - content: ""; - position: absolute; - left: 0; - right: 0; - top: -0.5rem; - height: 0.5rem; -} - -.inline-list li ul li, -.inline-list li ul li a { - display: block; -} - - -/* Typography */ -p { - padding: 0; - width: 100%; -} -p+p, h1+p{ /* Para after para should space out */ - margin-top: .75rem; -} - -mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */ - padding: 0.1rem; - background: #ff8c00; -} - -small { - color: var(--color-text-secondary); -} - -code,samp { - font-family: monospace; - background-color: var(--color-accent); - border-radius: var(--border-radius); - color: var(--color-text); - display: inline-block; - margin: 0 0.1rem; - padding: 0 0.5rem; -} -pre { - margin: .5rem 0; - padding: 0.5rem 2rem; - display: block; - font-size: .9rem; - line-height: 1.3rem; - - background-color: var(--color-accent); - border-radius: var(--border-radius); - color: var(--color-text); - overflow-x: auto; - - white-space: pre-wrap; - border: 1px solid #c1cfda; -} - - -details { - margin: .7rem 0; -} -details summary { - margin-bottom: .8rem; - font-weight: bold; - cursor: pointer; -} - - -/* Links */ -a{ - color: var(--color-link); - display: inline-block; - font-weight: bold; - text-decoration: underline; -} - -a:hover { - filter: brightness(var(--hover-brightness)); -} - -a:active { - filter: brightness(var(--active-brightness)); -} - -/* Buttons/Inputs */ -.button, -button, -input[type="submit"] -{ - background: #FEFEFE; - border: 2px solid var(--color-link); - border-radius: var(--border-radius); - display: inline-block; - font-size: .9rem; - font-weight: bold; - line-height: var(--line-height); - margin-top: 0.5rem; - padding: .6rem 1.2rem; - text-decoration: none; -} - -.button + .button, -button + button{ - margin-left: 6px; -} - -.button--small, -button.button--small, -input[type="submit"].button--small{ - padding: .2rem 1.6rem; -} - -.button, -button, -input[type="submit"] -{ - font-family: var(--font-family); -} - -.button:hover, -button:hover, -input[type="submit"]:hover -{ - cursor: pointer; - filter: brightness(var(--hover-brightness)); -} - -.button:active, -button:active, -input[type="submit"]:active -{ - filter: brightness(var(--active-brightness)); -} - -.button--blue, -button.button--blue, -input[type="submit"].button--blue -{ - background-color: var(--color-link); - color: var(--color-bg); -} - - -/* Images */ -figure { - margin: 0; - padding: 0; -} - -figure img { - max-width: 100%; -} - -figure figcaption { - color: var(--color-text-secondary); -} - - -/* Forms */ -button:disabled, -input:disabled { - background: var(--color-bg-secondary); - border-color: var(--color-bg-secondary); - color: var(--color-text-secondary); - cursor: not-allowed; -} - -button[disabled]:hover, -input[type="submit"][disabled]:hover { - filter: none; -} - -form { - border: 1px solid var(--color-bg-secondary); - border-radius: var(--border-radius); - box-shadow: var(--box-shadow) var(--color-shadow); - display: block; - max-width: var(--width-card-wide); - min-width: var(--width-card); - padding: 1.5rem; - text-align: var(--justify-normal); - margin: 0 auto; -} - -form header { - margin: 1.5rem 0; - padding: 1.5rem 0; -} - -input, -label, -select, -textarea { - display: block; - font-size: inherit; - max-width: var(--width-card-wide); -} - -input[type="checkbox"], -input[type="radio"] { - display: inline-block; -} - -input[type="checkbox"]+label, -input[type="radio"]+label { - display: inline-block; - font-weight: normal; - position: relative; - top: 1px; -} - -input[type="range"] { - padding: 0.4rem 0; -} - -input, -select, -textarea { - border: 1px solid var(--color-bg-secondary); - border-radius: var(--border-radius); - margin-bottom: 1rem; - padding: 0.4rem 0.8rem; -} - -input[type="text"], -input[type="password"] -textarea { - width: calc(100% - 1.6rem); -} - -input[readonly], -textarea[readonly] { - background-color: var(--color-bg-secondary); -} - -label { - font-weight: bold; - margin-bottom: 0.2rem; -} - -/* Popups */ -.modal{ - border: 1px solid var(--color-bg-secondary); - border-radius: var(--border-radius); - box-shadow: var(--box-shadow) var(--color-shadow); - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 50%; - z-index: 999; -} - -/* Tables */ -.table-container{ - overflow-x: auto; -} -table { - border: 1px solid var(--color-bg-secondary); - border-radius: var(--border-radius); - border-spacing: 0; - max-width: 100%; - white-space: nowrap; - - text-align: left; - border-collapse: collapse; - overflow-wrap: normal; -} - -table td, -table th, -table tr { - padding: 0.4rem 0.8rem; - text-align: var(--justify-important); -} - -table thead tr { - background-color: var(--color-table); - /* border-radius: var(--border-radius); */ - color: var(--color-bg); - margin: 0; - padding: 0; -} - -table thead tr { - border-top-left-radius: var(--border-radius); -} - -tbody tr:nth-child(even) { - background-color: var(--color-accent); -} -tbody tr:nth-child(odd) { - background-color: #FFF; -} - -/* Quotes */ -blockquote { - display: block; - font-size: x-large; - line-height: var(--line-height); - margin: 1rem auto; - max-width: var(--width-card-medium); - padding: 1.5rem 1rem; - text-align: var(--justify-important); -} - -blockquote footer{ - color: var(--color-text-secondary); - display: block; - font-size: small; - line-height: var(--line-height); - padding: 1.5rem 0; -} - -/* Misc helpers */ -.tar{ text-align: right; } - -.no-padd{ padding: 0; } - -/* Tags */ -.tag{ - background-color: var(--color-secondary); - border-radius: var(--border-radius); - color: var(--color-bg); - font-size: xx-small; - font-weight: bold; - padding: 0.2rem 1rem; - position: relative; - top:-2px; - display: inline-block; - vertical-align: middle; -} - -.banner{ - background: #eee; -} - - -.hide{ - display: none; -} diff --git a/scss/base/_anchor.scss b/scss/base/_anchor.scss new file mode 100644 index 0000000..5d7c948 --- /dev/null +++ b/scss/base/_anchor.scss @@ -0,0 +1,17 @@ +@use '../utilities/main_utilities' as *; + +/* Links */ +a{ + color: $color-link; + display: inline-block; + font-weight: bold; + text-decoration: underline; +} + +a:hover { + filter: brightness($hover-brightness); +} + +a:active { + filter: brightness($active-brightness); +} diff --git a/scss/base/_base.scss b/scss/base/_base.scss new file mode 100644 index 0000000..30b9126 --- /dev/null +++ b/scss/base/_base.scss @@ -0,0 +1,20 @@ +@use '../utilities/main_utilities' as *; + +html{scroll-behavior: smooth} +@media (prefers-reduced-motion: reduce){ + html{scroll-behavior: auto} +} + +/* Footer fixed to bottom */ +html,body{height: 100%} +body{display: flex;flex-direction: column;} +main, .main{ flex: 1 0 auto } + +body { + background: $color-bg; + color: $color-text; + font-family: $font-family; + line-height: $line-height; + overflow-x: hidden; + @include reset; /* Margin 0, padding 0. Testing new @use/@forward as globals aren't allowed... */ +} diff --git a/scss/base/_grid.scss b/scss/base/_grid.scss new file mode 100644 index 0000000..8aacc9b --- /dev/null +++ b/scss/base/_grid.scss @@ -0,0 +1,166 @@ +@use '../utilities/main_utilities' as *; + +/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */ +/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */ +/* https://stackoverflow.com/a/45059944 */ +/* Flex grid, done similarly to a float: left. So content needs to be within the grid */ +/* -ms-grid-columns: 1fr (20px 1fr)[3]; */ +/* grid-template-columns: 1fr repeat(3, 20px 1fr); */ +/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */ + +html{ + font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */ + } + + .container{ + margin: 0 auto; + max-width: $width-content; + padding: 1.4rem 1rem; + /* overflow: auto; */ + } + .container--no-topgap{ + padding-top: 0; + } + .container--no-botgap{ + padding-bottom: 0; + } + .container--no-gap{ + /* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */ + padding-bottom: 0; + padding-top: 0; + } + + + .row { + position: relative; + width: 100%; + + display: flex; + flex-wrap: wrap; + align-items: flex-start; + flex-direction: row; + row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */ + } + + .row+.row{ + margin-top: 1.4rem; + } + + /* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */ + /* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */ + /* .col>*{ */ + .col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption, + .col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main, + .col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{ + width: 100%; + } + /* inline elements */ + .col img{ + max-width: 100%; + height: auto; + margin-right: auto; + margin-left: auto; + } + + + /* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */ + /* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */ + .row [class^="col"]{ + padding-right: 0.625rem; /* ~20px gap = 20/16(html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */ + padding-left: 0.625rem; /* In place of gap, so it can be full width rows */ + + /* display: flex; */ + /* flex-wrap: wrap; */ + min-height: 0.125rem; + } + + + .row--scroll{ + flex-wrap: nowrap; + overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */ + justify-content: left; + /* Scrollbar stuff */ + scrollbar-color: #444 transparent; + scrollbar-width: thin; + padding-bottom: .5rem; + } + .row--scroll [class^="col"]{ + + } + + .col{ + flex: 0 0 auto; + } + + .col-1, + .col-2, + .col-3, + .col-4, + .col-5, + .col-6, + .col-7, + .col-8, + .col-9, + .col-10, + .col-11, + .col-12 { + flex: 0 0 100%; + } + + /* (100/12) * x = the flex % */ + .col-sm-1 { flex: 0 0 8.33%; } + .col-sm-2 { flex: 0 0 16.66%; } + .col-sm-3 { flex: 0 0 25%; } + .col-sm-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */ + .col-sm-4 { flex: 0 0 33.33%; } + .col-sm-5 { flex: 0 0 41.66%; } + .col-sm-6 { flex: 0 0 50%; } + .col-sm-7 { flex: 0 0 58.33%; } + .col-sm-8 { flex: 0 0 66.66%; } + .col-sm-9 { flex: 0 0 75%; } + .col-sm-10 { flex: 0 0 83.33%; } + .col-sm-11 { flex: 0 0 91.66%; } + .col-sm-12 { flex: 0 0 100%; } + + .hidden-sm { + display: none; + } + + @media only screen and (min-width: 33.75rem) { /* ~540px */ + } + + @media only screen and (min-width: 45rem) { /* ~720px */ + .col-1 { flex: 0 0 8.33%; } + .col-2 { flex: 0 0 16.66%; } + .col-3 { flex: 0 0 25%; } + .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */ + .col-4 { flex: 0 0 33.33%; } + .col-5 { flex: 0 0 41.66%; } + .col-6 { flex: 0 0 50%; } + .col-7 { flex: 0 0 58.33%; } + .col-8 { flex: 0 0 66.66%; } + .col-9 { flex: 0 0 75%; } + .col-10 { flex: 0 0 83.33%; } + .col-11 { flex: 0 0 91.66%; } + .col-12 { flex: 0 0 100%; } + + .hidden-sm { display: block; } + } + + @media only screen and (min-width: 60em) { /* ~960px */ + } + + /* Try to avoid !important, have each rule set to keep track of */ + .no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{ + padding: 0; /* In-case elements want to be full-width, touching, etc */ + } + + .row--align-center{ align-items: center;} + .col--align-center{ align-self: center; align-self: anchor-center} + + /* Sort into col/sm areas with media queries */ + .col-grow, .col-grow-sm + ,.col-fill, .col-fill-sm{ + flex-grow: 1; + } + \ No newline at end of file diff --git a/scss/base/_image.scss b/scss/base/_image.scss new file mode 100644 index 0000000..56fa9ac --- /dev/null +++ b/scss/base/_image.scss @@ -0,0 +1,20 @@ +@use '../utilities/main_utilities' as *; + +/* Images */ +figure { + margin: 0; + padding: 0; +} + +figure img { + max-width: 100%; +} + +figure figcaption { + color: $color-text-secondary; +} + +section img, +article img { + max-width: 100%; +} diff --git a/scss/base/_main_base.scss b/scss/base/_main_base.scss new file mode 100644 index 0000000..8ee04e0 --- /dev/null +++ b/scss/base/_main_base.scss @@ -0,0 +1,9 @@ +@use 'thanks'; + +@use 'reset'; +@use 'base'; +@use 'grid'; + +@use 'typography'; +@use 'anchor'; +@use 'image'; diff --git a/css/reset.css b/scss/base/_reset.scss similarity index 85% rename from css/reset.css rename to scss/base/_reset.scss index e73893c..0e110cd 100644 --- a/css/reset.css +++ b/scss/base/_reset.scss @@ -1,3 +1,5 @@ +@use '../utilities/main_utilities' as *; + /* Box sizing rules */ *, *::before, @@ -6,7 +8,7 @@ } /* Prevent font size inflation */ -html { +html{ -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; @@ -14,59 +16,59 @@ html { /* Remove default margin in favour of better control in authored CSS */ body, h1, h2, h3, h4, p, -figure, blockquote, dl, dd { +figure, blockquote, dl, dd{ margin: 0; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul, -ol { +ol{ margin:0; } /* Set core body defaults */ -body { +body{ min-height: 100vh; line-height: 1.5; } /* Set shorter line heights on headings and interactive elements */ h1, h2, h3, h4, h5, h6, -button, input, label { +button, input, label{ line-height: 1.35; } /* Balance text wrapping on headings */ -h1, h2, h3, h4, h5, h6 { +h1, h2, h3, h4, h5, h6{ text-wrap: balance; } /* A elements that don't have a class get default styles */ -a:not([class]) { +a:not([class]){ text-decoration-skip-ink: auto; } /* Make images easier to work with */ img, -picture { +picture{ max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, -textarea, select { +textarea, select{ font-family: inherit; font-size: inherit; } /* Make sure textareas without a rows attribute are not tiny */ -textarea:not([rows]) { +textarea:not([rows]){ min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ -:target { +:target{ scroll-margin-block: 5ex; } diff --git a/scss/base/_thanks.scss b/scss/base/_thanks.scss new file mode 100644 index 0000000..cff47a8 --- /dev/null +++ b/scss/base/_thanks.scss @@ -0,0 +1,3 @@ +// With CSS inspired or taken from: +// https://github.com/andybrewer/mvp +// https://piccalil.li/blog/a-more-modern-css-reset/ diff --git a/scss/base/_typography.scss b/scss/base/_typography.scss new file mode 100644 index 0000000..4c9b77f --- /dev/null +++ b/scss/base/_typography.scss @@ -0,0 +1,27 @@ +@use '../utilities/main_utilities' as *; + +p { + padding: 0; + width: 100%; +} +p+p, h1+p{ /* Para after para should space out */ + margin-top: .75rem; +} + +mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */ + padding: 0.1rem; + background: #ff8c00; +} + +small { + color: $color-text-secondary; +} + +hr{ + background-color: $color-bg-secondary; + border: none; + height: 1px; + width: 100%; + max-width: $width-content; + margin: .5rem auto; +} \ No newline at end of file diff --git a/scss/component/_accordion.scss b/scss/component/_accordion.scss new file mode 100644 index 0000000..650a3b9 --- /dev/null +++ b/scss/component/_accordion.scss @@ -0,0 +1,10 @@ +@use '../utilities/main_utilities' as *; + +details { + margin: .7rem 0; +} +details summary { + margin-bottom: .8rem; + font-weight: bold; + cursor: pointer; +} diff --git a/scss/component/_alert.scss b/scss/component/_alert.scss new file mode 100644 index 0000000..8b4cc44 --- /dev/null +++ b/scss/component/_alert.scss @@ -0,0 +1,22 @@ +@use '../utilities/main_utilities' as *; + +// Alerts +.alert{ + background: $color-secondary-accent; + border-left: 4px solid $color-secondary; + border-right: 4px solid $color-secondary; + padding: .1rem .8rem; + margin-bottom:.5rem; +} +.alert--error{ + background: #f05870; + border-color: #e90d30; +} +.alert--warning{ + background: #e8e85b; + border-color: #ddde11; +} +.alert--success{ + background: #60c572; + border-color: #18ab34; +} diff --git a/scss/component/_banner.scss b/scss/component/_banner.scss new file mode 100644 index 0000000..a17e9c9 --- /dev/null +++ b/scss/component/_banner.scss @@ -0,0 +1,6 @@ +@use '../utilities/main_utilities' as *; + +.banner{ + width: 100%; + background: #eee; +} diff --git a/scss/component/_button.scss b/scss/component/_button.scss new file mode 100644 index 0000000..1776d97 --- /dev/null +++ b/scss/component/_button.scss @@ -0,0 +1,73 @@ +@use '../utilities/main_utilities' as *; + +/* Buttons/Inputs */ +.button, +button, +input[type="submit"] +{ + background: #FEFEFE; + border: 2px solid $color-link; + border-radius: $border-radius; + display: inline-block; + font-size: .9rem; + font-weight: bold; + line-height: $line-height; + margin-top: 0.5rem; + padding: .6rem 1.2rem; + text-decoration: none; +} + +.button + .button, +button + button{ + margin-left: 6px; +} + +.button--small, +button.button--small, +input[type="submit"].button--small{ + padding: .2rem 1.6rem; +} + +.button, +button, +input[type="submit"] +{ + font-family: $font-family; +} + +.button:hover, +button:hover, +input[type="submit"]:hover +{ + cursor: pointer; + filter: brightness($hover-brightness); +} + +.button:active, +button:active, +input[type="submit"]:active +{ + filter: brightness($active-brightness); +} + +.button--blue, +button.button--blue, +input[type="submit"].button--blue +{ + background-color: $color-link; + color: $color-bg; +} + +.button--disabled, +button:disabled, +input:disabled { + background: $color-bg-secondary; + border-color: $color-bg-secondary; + color: $color-text-secondary; + cursor: not-allowed; +} +.button--disabled:hover, +button[disabled]:hover, +input[type="submit"][disabled]:hover { + filter: none; +} \ No newline at end of file diff --git a/scss/component/_card.scss b/scss/component/_card.scss new file mode 100644 index 0000000..010bd0b --- /dev/null +++ b/scss/component/_card.scss @@ -0,0 +1,25 @@ +@use '../utilities/main_utilities' as *; + +/* Cards is a row */ +/* Best to do this with grid, but there's less browser support... */ +.card{ + /* As not using grid atm, no solution to keep cards the same size when flex-wrapped */ + border: 1px solid $color-bg-secondary; + border-radius: $border-radius; + box-shadow: $box-shadow $color-shadow; + padding: 1.25rem; + /* flex: 0 0 $width-card; */ + background: #FFF; + + display: block !important; /* Unset row/col default */ +} +.card:hover { + box-shadow: $box-shadow $color-bg-secondary; +} + +.row--cards{ + align-items: stretch; /* For cards to be "same height", requires the height 100% on card */ +} +.row--cards .card{ + height: 100%; /* To make multiple cards next to each other 'same' height */ +} diff --git a/scss/component/_code.scss b/scss/component/_code.scss new file mode 100644 index 0000000..e10acfb --- /dev/null +++ b/scss/component/_code.scss @@ -0,0 +1,30 @@ +@use '../utilities/main_utilities' as *; + +code,samp { + font-family: monospace; + background-color: $color-accent; + border-radius: $border-radius; + color: $color-text; + display: inline-block; + margin: 0 0.1rem; + padding: 0 0.5rem; +} +pre { + margin: .5rem 0; + padding: 0.5rem 2rem; + display: block; + font-size: .9rem; + line-height: 1.3rem; + + background-color: $color-accent; + border-radius: $border-radius; + color: $color-text; + overflow-x: auto; + + white-space: pre-wrap; + border: 1px solid #c1cfda; +} + +section pre { + overflow: auto; +} diff --git a/scss/component/_form.scss b/scss/component/_form.scss new file mode 100644 index 0000000..c8bccaf --- /dev/null +++ b/scss/component/_form.scss @@ -0,0 +1,68 @@ +@use '../utilities/main_utilities' as *; + +form { + border: 1px solid $color-bg-secondary; + border-radius: $border-radius; + box-shadow: $box-shadow $color-shadow; + display: block; + max-width: $width-card-wide; + min-width: $width-card; + padding: 1.5rem; + text-align: $justify-normal; + margin: 0 auto; +} + +form header { + margin: 1.5rem 0; + padding: 1.5rem 0; +} + +input, +label, +select, +textarea { + display: block; + font-size: inherit; + max-width: $width-card-wide; +} +label { + font-weight: bold; + margin-bottom: 0.2rem; +} + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; +} + +input[type="checkbox"]+label, +input[type="radio"]+label { + display: inline-block; + font-weight: normal; + position: relative; + top: 1px; +} + +input[type="range"] { + padding: 0.4rem 0; +} + +input, +select, +textarea { + border: 1px solid $color-bg-secondary; + border-radius: $border-radius; + margin-bottom: 1rem; + padding: 0.4rem 0.8rem; +} + +input[type="text"], +input[type="password"] +textarea { + width: calc(100% - 1.6rem); +} + +input[readonly], +textarea[readonly] { + background-color: $color-bg-secondary; +} diff --git a/scss/component/_list.scss b/scss/component/_list.scss new file mode 100644 index 0000000..6a04400 --- /dev/null +++ b/scss/component/_list.scss @@ -0,0 +1,75 @@ +@use '../utilities/main_utilities' as *; + +/* Lists */ +ol li, +ul li { + padding: 0.2rem 0; +} + +.no-bullet-point{ + list-style: none; +} + + +/* Inline lists */ +.inline-list { + list-style: none; + padding: 0; + margin-left: -0.5rem; /* To offset the start of li margin. Little jank */ +} + +.inline-list li { + display: inline-block; + margin: 0 0.5rem; + position: relative; + text-align: left; +} +.inline-list>li{ /* Only affects first level li */ + padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */ +} + +/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */ +/* Nav/inline-list Dropdown */ +.inline-list li:hover ul { + display: block; +} + +/* ?? maybe change */ +.inline-list li ul { + background: $color-bg; + border: 1px solid $color-bg-secondary; + border-top: 10px solid transparent; + border-radius: $border-radius; + display: none; + height: auto; + padding: .5rem 1rem; + position: absolute; + top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */ + white-space: nowrap; + width: auto; + z-index: 1; + + /* Centre */ + /* left: 50%; + transform: translate(-50%, 0); */ + /* Left */ + left: 0; + /* Right */ + /* transform: translate(-50%, 0); */ +} + +.inline-list li ul::before { + /* fill gap above to make mousing over them easier */ + /* background-color: green; */ + content: ""; + position: absolute; + left: 0; + right: 0; + top: -0.5rem; + height: 0.5rem; +} + +.inline-list li ul li, +.inline-list li ul li a { + display: block; +} diff --git a/scss/component/_main_component.scss b/scss/component/_main_component.scss new file mode 100644 index 0000000..11ae737 --- /dev/null +++ b/scss/component/_main_component.scss @@ -0,0 +1,12 @@ +@use 'button'; +@use 'card'; +@use 'form'; +@use 'alert'; +@use 'list'; +@use 'modal'; +@use 'quote'; +@use 'table'; +@use 'tag'; +@use 'code'; +@use 'banner'; +@use 'accordion'; diff --git a/scss/component/_modal.scss b/scss/component/_modal.scss new file mode 100644 index 0000000..4b0146a --- /dev/null +++ b/scss/component/_modal.scss @@ -0,0 +1,14 @@ +@use '../utilities/main_utilities' as *; + +/* Popups */ +.modal{ + border: 1px solid $color-bg-secondary; + border-radius: $border-radius; + box-shadow: $box-shadow $color-shadow; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 50%; + z-index: 999; +} diff --git a/scss/component/_quote.scss b/scss/component/_quote.scss new file mode 100644 index 0000000..0197c35 --- /dev/null +++ b/scss/component/_quote.scss @@ -0,0 +1,20 @@ +@use '../utilities/main_utilities' as *; + +/* Quotes */ +blockquote { + display: block; + font-size: x-large; + line-height: $line-height; + margin: 1rem auto; + max-width: $width-card-medium; + padding: 1.5rem 1rem; + text-align: $justify-important; +} + +blockquote footer{ + color: $color-text-secondary; + display: block; + font-size: small; + line-height: $line-height; + padding: 1.5rem 0; +} diff --git a/scss/component/_table.scss b/scss/component/_table.scss new file mode 100644 index 0000000..3beab98 --- /dev/null +++ b/scss/component/_table.scss @@ -0,0 +1,43 @@ +@use '../utilities/main_utilities' as *; + +/* Tables */ +.table-container{ + overflow-x: auto; +} +table { + border: 1px solid $color-bg-secondary; + border-radius: $border-radius; + border-spacing: 0; + max-width: 100%; + white-space: nowrap; + + text-align: left; + border-collapse: collapse; + overflow-wrap: normal; +} + +table td, +table th, +table tr { + padding: 0.4rem 0.8rem; + text-align: $justify-important; +} + +table thead tr { + background-color: $color-table; + /* border-radius: $border-radius; */ + color: $color-bg; + margin: 0; + padding: 0; +} + +table thead tr { + border-top-left-radius: $border-radius; +} + +tbody tr:nth-child(even) { + background-color: $color-accent; +} +tbody tr:nth-child(odd) { + background-color: #FFF; +} diff --git a/scss/component/_tag.scss b/scss/component/_tag.scss new file mode 100644 index 0000000..80d6063 --- /dev/null +++ b/scss/component/_tag.scss @@ -0,0 +1,15 @@ +@use '../utilities/main_utilities' as *; + +/* Tags */ +.tag{ + background-color: $color-secondary; + border-radius: $border-radius; + color: $color-bg; + font-size: xx-small; + font-weight: bold; + padding: 0.2rem 1rem; + position: relative; + top:-2px; + display: inline-block; + vertical-align: middle; +} diff --git a/scss/helpers/_main_helpers.scss b/scss/helpers/_main_helpers.scss new file mode 100644 index 0000000..8542a70 --- /dev/null +++ b/scss/helpers/_main_helpers.scss @@ -0,0 +1,8 @@ +@use '../utilities/main_utilities' as *; + +/* Misc helpers */ +.tar{ text-align: right; } + +.no-padd{ padding: 0; } + +.hide{ display: none; } \ No newline at end of file diff --git a/scss/layout/_footer.scss b/scss/layout/_footer.scss new file mode 100644 index 0000000..b004436 --- /dev/null +++ b/scss/layout/_footer.scss @@ -0,0 +1,2 @@ +@use '../utilities/main_utilities' as *; + diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss new file mode 100644 index 0000000..b004436 --- /dev/null +++ b/scss/layout/_header.scss @@ -0,0 +1,2 @@ +@use '../utilities/main_utilities' as *; + diff --git a/scss/layout/_main_layout.scss b/scss/layout/_main_layout.scss new file mode 100644 index 0000000..e2b6698 --- /dev/null +++ b/scss/layout/_main_layout.scss @@ -0,0 +1,3 @@ +@use 'header'; +@use 'footer'; +@use 'nav'; diff --git a/scss/layout/_nav.scss b/scss/layout/_nav.scss new file mode 100644 index 0000000..8e9baec --- /dev/null +++ b/scss/layout/_nav.scss @@ -0,0 +1,9 @@ +@use '../utilities/main_utilities' as *; + +/* Nav */ +.nav a{ + text-decoration: none; +} +.nav a{ + color: #CCC; +} diff --git a/scss/main.scss b/scss/main.scss new file mode 100644 index 0000000..e7e9fc7 --- /dev/null +++ b/scss/main.scss @@ -0,0 +1,10 @@ +// Variables first 'cause you never know where you'll need 'em +// @use 'utilities/main_utilities'; + +// Get the reset it +@use 'base/main_base'; +@use 'component/main_component'; +@use 'layout/main_layout'; +@use 'page/main_page'; + +@use 'helpers/main_helpers'; diff --git a/scss/page/_main_page.scss b/scss/page/_main_page.scss new file mode 100644 index 0000000..9a6919e --- /dev/null +++ b/scss/page/_main_page.scss @@ -0,0 +1,3 @@ +@use '../utilities/main_utilities' as *; + +// Page specific stuff \ No newline at end of file diff --git a/scss/utilities/_main_utilities.scss b/scss/utilities/_main_utilities.scss new file mode 100644 index 0000000..dc7f1dd --- /dev/null +++ b/scss/utilities/_main_utilities.scss @@ -0,0 +1,2 @@ +@forward 'variables'; +@forward 'mixins'; diff --git a/scss/utilities/_mixins.scss b/scss/utilities/_mixins.scss new file mode 100644 index 0000000..c574273 --- /dev/null +++ b/scss/utilities/_mixins.scss @@ -0,0 +1,4 @@ +@mixin reset { + margin: 0; + padding: 0; +} diff --git a/scss/utilities/_variables.scss b/scss/utilities/_variables.scss new file mode 100644 index 0000000..1b830da --- /dev/null +++ b/scss/utilities/_variables.scss @@ -0,0 +1,43 @@ +// Variables +$media-xs: 0; +$media-sm: 0; +$media-md: 0; +$media-lg: 0; +$media-xl: 0; + +$active-brightness: .85; +$hover-brightness: 1.2; + +$border-radius: 8px; +$box-shadow: 0 2px 8px; +$color-accent: #dae9f6; +$color-accent--dark: #0097fc; +$color-bg: #fff; +$color-bg--dark: #333; +$color-bg-secondary: #e9e9e9; +$color-bg-secondary--dark: #555; +$color-link: #118bee; +$color-link--dark: #0097fc; +$color-secondary: #508ce2; +$color-secondary--dark: #e20de9; +$color-secondary-accent: #dee9fa; +$color-secondary-accent--dark: #e20de9; +$color-shadow: #f4f4f4; +$color-shadow--dark: #bbbbbb20; +$color-table: #118bee; +$color-table--dark: #0097fc; +$color-text: #000; +$color-text--dark: #f7f7f7; +$color-text-secondary: #999; +$color-text-secondary--dark: #aaa; + +$color-scrollbar: #cacae8; +$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + +$justify-important: center; +$justify-normal: left; +$line-height: 1.5; +$width-card: 285px; +$width-card-medium: 460px; +$width-card-wide: 800px; +$width-content: 1080px;