📂 moved styles to includes folder
This commit is contained in:
parent
2aee369518
commit
92f67761f7
20 changed files with 841 additions and 1 deletions
418
src/assets/styles/main.css
Normal file
418
src/assets/styles/main.css
Normal file
|
|
@ -0,0 +1,418 @@
|
|||
@charset "UTF-8";
|
||||
:root {
|
||||
--test-var: #909090;
|
||||
--background-color: #ffffff;
|
||||
--background-color-secondary: #301e4e;
|
||||
--background-color-tertiary: #ff6e6c;
|
||||
--primary: #1f1135;
|
||||
--secondary: #ff6e6c;
|
||||
--text-primary: #1f1135;
|
||||
--text-secondary: #ffffff;
|
||||
--text-tertiary: #301e4e;
|
||||
--link-color: #301e4e;
|
||||
--tag-color: #301e4e;
|
||||
--button-color: #ff636c;
|
||||
--ratio: 1.2;
|
||||
--s-5: calc(var(--s-4) / var(--ratio));
|
||||
--s-4: calc(var(--s-3) / var(--ratio));
|
||||
--s-3: calc(var(--s-2) / var(--ratio));
|
||||
--s-2: calc(var(--s-1) / var(--ratio));
|
||||
--s-1: calc(var(--s0) / var(--ratio));
|
||||
--s0: 1rem;
|
||||
--s1: calc(var(--s0) * var(--ratio));
|
||||
--s2: calc(var(--s1) * var(--ratio));
|
||||
--s3: calc(var(--s2) * var(--ratio));
|
||||
--s4: calc(var(--s3) * var(--ratio));
|
||||
--s5: calc(var(--s4) * var(--ratio));
|
||||
--max-width: 1000px;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul[role=list], ol[role=list] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
img, picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
code, kbd, samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button, input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
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: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
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] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[type=search]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(310deg, var(--background-color-tertiary), var(--background-color-tertiary) 20%, var(--background-color) 20%);
|
||||
}
|
||||
|
||||
#main-container {
|
||||
width: 90%;
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding-bottom: var(--s1);
|
||||
flex: 1 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#main-container main {
|
||||
max-width: 65ch;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(var(--s3), 3vw, var(--s4));
|
||||
margin: 0 0 var(--s0);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(var(--s2), 3vw, var(--s3));
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(var(--s1), 3vw, var(--s2));
|
||||
margin: 0 0 var(--s-1);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: var(--s-2) 0;
|
||||
font-size: clamp(var(--s-0), 3vw, var(--s1));
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--s1);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: var(--s0);
|
||||
margin-bottom: var(--s0);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Bitter", "Bookman Old Style", serif;
|
||||
}
|
||||
|
||||
header {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
#header--container {
|
||||
width: 90%;
|
||||
max-width: var(--max-width);
|
||||
padding: var(--s1) 0;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: left;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
#header--title a {
|
||||
font-size: clamp(var(--s3), 3vw, var(--s4));
|
||||
font-weight: 200;
|
||||
background: linear-gradient(to right, var(--primary), var(--primary) 63%, var(--secondary) 63%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: rgba(0, 0, 0, 0);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
#header--container {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
background: var(--background-color-secondary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#footer--container {
|
||||
width: 90%;
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--s2) 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
padding: 0;
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
gap: var(--s0) var(--s2);
|
||||
font-size: var(--s0);
|
||||
}
|
||||
|
||||
nav ul li::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.nav--active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
nav ul {
|
||||
font-size: var(--s1);
|
||||
}
|
||||
}
|
||||
#posts--list article {
|
||||
margin-bottom: var(--s2);
|
||||
}
|
||||
|
||||
.post--time {
|
||||
font-size: clamp(var(--s-1), 3vw, var(--s0));
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.tags--container {
|
||||
padding: var(--s-1) 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--s0);
|
||||
}
|
||||
|
||||
.tag a {
|
||||
padding: var(--s-2) var(--s-1);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
background: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--text-secondary);
|
||||
width: var(--s2);
|
||||
height: var(--s2);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
1
src/assets/styles/main.css.map
Normal file
1
src/assets/styles/main.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["scss/main.css"],"names":[],"mappings":";AAAC;EAAM;EAAoB;EAA4B;EAAsC;EAAqC;EAAmB;EAAqB;EAAwB;EAA0B;EAAyB;EAAsB;EAAqB;EAAwB;EAAa;EAAuC;EAAuC;EAAuC;EAAuC;EAAsC;EAAW;EAAqC;EAAqC;EAAqC;EAAqC;EAAqC;;;AAAoB;EAAqB;;;AAAsB;EAA2C;;;AAAS;EAA4B;;;AAAgB;EAAK;;;AAAuB;EAAK;EAAiB;EAA6B;;;AAAgB;EAAe;;;AAA8B;EAAY;EAAe;;;AAAc;EAA6B;;;AAAa;EAAuC;IAAqB;IAAoC;IAAuC;IAAqC;;EAAiC;AAA4E;EAAK;EAAiB;;;AAA8B;EAAK;;;AAAS;EAAK;;;AAAc;EAAG;EAAc;;;AAAe;EAAG;EAAuB;EAAS;;;AAAiB;EAAI;EAAgC;;;AAAc;EAAE;;;AAA+B;EAAY;EAAmB;EAA0B;;;AAAiC;EAAS;;;AAAmB;EAAc;EAAgC;;;AAAc;EAAM;;;AAAc;EAAQ;EAAc;EAAc;EAAkB;;;AAAwB;EAAI;;;AAAe;EAAI;;;AAAW;EAAI;;;AAAkB;EAAsC;EAAoB;EAAe;EAAiB;;;AAAS;EAAa;;;AAAiB;EAAc;;;AAAoB;EAAgD;;;AAA0B;EAAwH;EAAkB;;;AAAU;EAA4G;;;AAA8B;EAAS;;;AAA2B;EAAO;EAAsB;EAAc;EAAc;EAAe;EAAU;;;AAAmB;EAAS;;;AAAwB;EAAS;;;AAAc;EAA6B;EAAsB;;;AAAU;EAAkF;;;AAAY;EAAc;EAA6B;;;AAAoB;EAAyC;;;AAAwB;EAA6B;EAA0B;;;AAAa;EAAQ;;;AAAc;EAAQ;;;AAAkB;EAAS;;;AAAa;EAAS;;;AAAa;EAAQ;EAAa;EAAsB;EAAiB;EAAgB;;;AAAwI;EAAgB;EAAU;EAA2B;EAAc;EAAyB;EAAc;;;AAAgB;EAAqB;;;AAAe;EAAG;EAAyC;;;AAAqB;EAAG;;;AAAyC;EAAG;EAAyC;EAAsB;;;AAAkB;EAAG;EAAoB;EAA0C;;;AAAyB;EAAE;;;AAAwB;EAAG;EAAqB;;;AAAwB;EAAE;;;AAAwB;EAAE;;;AAA+H;EAAkB;;;AAA+C;EAAO;;;AAAe;EAAmB;EAAU;EAA2B;EAAoB;EAAc;EAAa;EAAsB;EAAe;EAAiB;;;AAA0B;EAAiB;EAAyC;EAAgB;EAA+F;EAAqB;EAA6B;EAAsC;;;AAAqB;EAAqC;IAAmB;IAAmB;IAA8B;;;AAAoB;EAAO;EAAW;EAAgB;EAA6C;;;AAA4B;EAAS;EAA4B;;;AAAqB;EAAe;;;AAA0B;EAAmB;EAAU;EAA2B;EAAc;EAAoB;EAAa;EAAmB;EAAe;EAA8B;;;AAAmB;EAAO;EAAU;EAAc;EAAa;EAAmB;EAAe;EAAqB;EAAwB;;;AAAoB;EAAkB;;;AAAY;EAAY;EAA0B;;;AAAqB;EAAkB;;;AAA0B;EAAa;;;AAA0B;EAAqC;IAAO;;;AAAqB;EAAqB;;;AAAwB;EAAY;EAA0C;;;AAAgB;EAAiB;EAAqB;EAAa;EAAe;;;AAAc;EAAO;EAA8B;EAA4B;EAAqB;;;AAA6C;EAAM;EAA2B;EAAgB","file":"main.css"}
|
||||
1
src/assets/styles/scss/main.css
Normal file
1
src/assets/styles/scss/main.css
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,5 @@
|
|||
:root {
|
||||
--test-var: #909090;
|
||||
// COLORS
|
||||
--background-color: #ffffff;
|
||||
--background-color-secondary: #301e4e;
|
||||
418
src/includes/styles/main.css
Normal file
418
src/includes/styles/main.css
Normal file
|
|
@ -0,0 +1,418 @@
|
|||
@charset "UTF-8";
|
||||
:root {
|
||||
--test-var: #909090;
|
||||
--background-color: #ffffff;
|
||||
--background-color-secondary: #301e4e;
|
||||
--background-color-tertiary: #ff6e6c;
|
||||
--primary: #1f1135;
|
||||
--secondary: #ff6e6c;
|
||||
--text-primary: #1f1135;
|
||||
--text-secondary: #ffffff;
|
||||
--text-tertiary: #301e4e;
|
||||
--link-color: #301e4e;
|
||||
--tag-color: #301e4e;
|
||||
--button-color: #ff636c;
|
||||
--ratio: 1.2;
|
||||
--s-5: calc(var(--s-4) / var(--ratio));
|
||||
--s-4: calc(var(--s-3) / var(--ratio));
|
||||
--s-3: calc(var(--s-2) / var(--ratio));
|
||||
--s-2: calc(var(--s-1) / var(--ratio));
|
||||
--s-1: calc(var(--s0) / var(--ratio));
|
||||
--s0: 1rem;
|
||||
--s1: calc(var(--s0) * var(--ratio));
|
||||
--s2: calc(var(--s1) * var(--ratio));
|
||||
--s3: calc(var(--s2) * var(--ratio));
|
||||
--s4: calc(var(--s3) * var(--ratio));
|
||||
--s5: calc(var(--s4) * var(--ratio));
|
||||
--max-width: 1000px;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul[role=list], ol[role=list] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
img, picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
code, kbd, samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button, input, optgroup, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button, input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
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: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
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] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[type=search]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(310deg, var(--background-color-tertiary), var(--background-color-tertiary) 20%, var(--background-color) 20%);
|
||||
}
|
||||
|
||||
#main-container {
|
||||
width: 90%;
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding-bottom: var(--s1);
|
||||
flex: 1 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#main-container main {
|
||||
max-width: 65ch;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(var(--s3), 3vw, var(--s4));
|
||||
margin: 0 0 var(--s0);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(var(--s2), 3vw, var(--s3));
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(var(--s1), 3vw, var(--s2));
|
||||
margin: 0 0 var(--s-1);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: var(--s-2) 0;
|
||||
font-size: clamp(var(--s-0), 3vw, var(--s1));
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--s1);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: var(--s0);
|
||||
margin-bottom: var(--s0);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Bitter", "Bookman Old Style", serif;
|
||||
}
|
||||
|
||||
header {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
#header--container {
|
||||
width: 90%;
|
||||
max-width: var(--max-width);
|
||||
padding: var(--s1) 0;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: left;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
#header--title a {
|
||||
font-size: clamp(var(--s3), 3vw, var(--s4));
|
||||
font-weight: 200;
|
||||
background: linear-gradient(to right, var(--primary), var(--primary) 63%, var(--secondary) 63%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: rgba(0, 0, 0, 0);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
#header--container {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
background: var(--background-color-secondary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#footer--container {
|
||||
width: 90%;
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--s2) 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
padding: 0;
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
gap: var(--s0) var(--s2);
|
||||
font-size: var(--s0);
|
||||
}
|
||||
|
||||
nav ul li::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.nav--active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
nav ul {
|
||||
font-size: var(--s1);
|
||||
}
|
||||
}
|
||||
#posts--list article {
|
||||
margin-bottom: var(--s2);
|
||||
}
|
||||
|
||||
.post--time {
|
||||
font-size: clamp(var(--s-1), 3vw, var(--s0));
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.tags--container {
|
||||
padding: var(--s-1) 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--s0);
|
||||
}
|
||||
|
||||
.tag a {
|
||||
padding: var(--s-2) var(--s-1);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
background: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--text-secondary);
|
||||
width: var(--s2);
|
||||
height: var(--s2);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
1
src/includes/styles/main.css.map
Normal file
1
src/includes/styles/main.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../assets/styles/scss/main.css"],"names":[],"mappings":";AAAC;EAAM;EAAoB;EAA4B;EAAsC;EAAqC;EAAmB;EAAqB;EAAwB;EAA0B;EAAyB;EAAsB;EAAqB;EAAwB;EAAa;EAAuC;EAAuC;EAAuC;EAAuC;EAAsC;EAAW;EAAqC;EAAqC;EAAqC;EAAqC;EAAqC;;;AAAoB;EAAqB;;;AAAsB;EAA2C;;;AAAS;EAA4B;;;AAAgB;EAAK;;;AAAuB;EAAK;EAAiB;EAA6B;;;AAAgB;EAAe;;;AAA8B;EAAY;EAAe;;;AAAc;EAA6B;;;AAAa;EAAuC;IAAqB;IAAoC;IAAuC;IAAqC;;EAAiC;AAA4E;EAAK;EAAiB;;;AAA8B;EAAK;;;AAAS;EAAK;;;AAAc;EAAG;EAAc;;;AAAe;EAAG;EAAuB;EAAS;;;AAAiB;EAAI;EAAgC;;;AAAc;EAAE;;;AAA+B;EAAY;EAAmB;EAA0B;;;AAAiC;EAAS;;;AAAmB;EAAc;EAAgC;;;AAAc;EAAM;;;AAAc;EAAQ;EAAc;EAAc;EAAkB;;;AAAwB;EAAI;;;AAAe;EAAI;;;AAAW;EAAI;;;AAAkB;EAAsC;EAAoB;EAAe;EAAiB;;;AAAS;EAAa;;;AAAiB;EAAc;;;AAAoB;EAAgD;;;AAA0B;EAAwH;EAAkB;;;AAAU;EAA4G;;;AAA8B;EAAS;;;AAA2B;EAAO;EAAsB;EAAc;EAAc;EAAe;EAAU;;;AAAmB;EAAS;;;AAAwB;EAAS;;;AAAc;EAA6B;EAAsB;;;AAAU;EAAkF;;;AAAY;EAAc;EAA6B;;;AAAoB;EAAyC;;;AAAwB;EAA6B;EAA0B;;;AAAa;EAAQ;;;AAAc;EAAQ;;;AAAkB;EAAS;;;AAAa;EAAS;;;AAAa;EAAQ;EAAa;EAAsB;EAAiB;EAAgB;;;AAAwI;EAAgB;EAAU;EAA2B;EAAc;EAAyB;EAAc;;;AAAgB;EAAqB;;;AAAe;EAAG;EAAyC;;;AAAqB;EAAG;;;AAAyC;EAAG;EAAyC;EAAsB;;;AAAkB;EAAG;EAAoB;EAA0C;;;AAAyB;EAAE;;;AAAwB;EAAG;EAAqB;;;AAAwB;EAAE;;;AAAwB;EAAE;;;AAA+H;EAAkB;;;AAA+C;EAAO;;;AAAe;EAAmB;EAAU;EAA2B;EAAoB;EAAc;EAAa;EAAsB;EAAe;EAAiB;;;AAA0B;EAAiB;EAAyC;EAAgB;EAA+F;EAAqB;EAA6B;EAAsC;;;AAAqB;EAAqC;IAAmB;IAAmB;IAA8B;;;AAAoB;EAAO;EAAW;EAAgB;EAA6C;;;AAA4B;EAAS;EAA4B;;;AAAqB;EAAe;;;AAA0B;EAAmB;EAAU;EAA2B;EAAc;EAAoB;EAAa;EAAmB;EAAe;EAA8B;;;AAAmB;EAAO;EAAU;EAAc;EAAa;EAAmB;EAAe;EAAqB;EAAwB;;;AAAoB;EAAkB;;;AAAY;EAAY;EAA0B;;;AAAqB;EAAkB;;;AAA0B;EAAa;;;AAA0B;EAAqC;IAAO;;;AAAqB;EAAqB;;;AAAwB;EAAY;EAA0C;;;AAAgB;EAAiB;EAAqB;EAAa;EAAe;;;AAAc;EAAO;EAA8B;EAA4B;EAAqB;;;AAA6C;EAAM;EAA2B;EAAgB","file":"main.css"}
|
||||
Loading…
Reference in a new issue