diff options
Diffstat (limited to 'sass')
| -rw-r--r-- | sass/_colors.scss | 67 | ||||
| -rw-r--r-- | sass/_reset.scss | 43 | ||||
| -rw-r--r-- | sass/_typography.scss | 87 | ||||
| -rw-r--r-- | sass/theme.scss | 63 |
4 files changed, 260 insertions, 0 deletions
diff --git a/sass/_colors.scss b/sass/_colors.scss new file mode 100644 index 0000000..9729c0c --- /dev/null +++ b/sass/_colors.scss @@ -0,0 +1,67 @@ +:root {
+ --color-primary: #356a22;
+ --color-on-primary: #ffffff;
+ --color-primary-container: #b5f399;
+ --color-on-primary-container: #052100;
+ --color-secondary: #55624c;
+ --color-on-secondary: #ffffff;
+ --color-secondary-container: #d8e7cb;
+ --color-on-secondary-container: #131f0d;
+ --color-tertiary: #386667;
+ --color-on-tertiary: #ffffff;
+ --color-tertiary-container: #bbebed;
+ --color-on-tertiary-container: #002021;
+ --color-error: #ba1a1a;
+ --color-error-container: #ffdad6;
+ --color-on-error: #ffffff;
+ --color-on-error-container: #410002;
+ --color-background: #fdfdf6;
+ --color-on-background: #1a1c18;
+ --color-surface: #fdfdf6;
+ --color-on-surface: #1a1c18;
+ --color-surface-variant: #dfe4d7;
+ --color-on-surface-variant: #43483f;
+ --color-outline: #73796e;
+ --color-inverse-on-surface: #f1f1ea;
+ --color-inverse-surface: #2f312d;
+ --color-inverse-primary: #9ad680;
+ --color-shadow: #000000;
+ --color-surface-tint: #356a22;
+ --color-outline-variant: #c3c8bb;
+ --color-scrim: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+:root {
+ --color-primary: #9ad680;
+ --color-on-primary: #0c3900;
+ --color-primary-container: #1d5209;
+ --color-on-primary-container: #b5f399;
+ --color-secondary: #bccbb0;
+ --color-on-secondary: #273421;
+ --color-secondary-container: #3d4b36;
+ --color-on-secondary-container: #d8e7cb;
+ --color-tertiary: #a0cfd0;
+ --color-on-tertiary: #003738;
+ --color-tertiary-container: #1e4e4f;
+ --color-on-tertiary-container: #bbebed;
+ --color-error: #ffb4ab;
+ --color-error-container: #93000a;
+ --color-on-error: #690005;
+ --color-on-error-container: #ffdad6;
+ --color-background: #1a1c18;
+ --color-on-background: #e3e3dc;
+ --color-surface: #1a1c18;
+ --color-on-surface: #e3e3dc;
+ --color-surface-variant: #43483f;
+ --color-on-surface-variant: #c3c8bb;
+ --color-outline: #8d9387;
+ --color-inverse-on-surface: #1a1c18;
+ --color-inverse-surface: #e3e3dc;
+ --color-inverse-primary: #356a22;
+ --color-shadow: #000000;
+ --color-surface-tint: #9ad680;
+ --color-outline-variant: #43483f;
+ --color-scrim: #000000;
+}}
+
diff --git a/sass/_reset.scss b/sass/_reset.scss new file mode 100644 index 0000000..c556136 --- /dev/null +++ b/sass/_reset.scss @@ -0,0 +1,43 @@ +html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/sass/_typography.scss b/sass/_typography.scss new file mode 100644 index 0000000..9f67009 --- /dev/null +++ b/sass/_typography.scss @@ -0,0 +1,87 @@ +.typography {
+ font-size: 16px;
+ line-height: 24px;
+ color: var(--color-on-background);
+
+ h1, h2, h3, h4, h5, h6 {
+ font-family: "PT Serif Caption", serif;
+ }
+
+ & > h1, & > h2, & > h3, & > h4, & > h5, & > h6, & > p, & > ul, & > ol, & > table {
+ margin: 24px 0px;
+ }
+
+ h1 {
+ font-size: 32px;
+ margin-top: 64px;
+ }
+
+ h2 {
+ font-size: 24px;
+ margin-top: 48px;
+ color: var(--color-on-surface-variant);
+ }
+
+ h3 {
+ font-size: 16px;
+ margin-top: 32px;
+ color: var(--color-secondary);
+ }
+
+ p {
+ text-align: justify;
+ }
+
+
+ a {
+ color: var(--color-primary);
+ text-decoration: underline;
+
+ &:hover {
+ opacity: 80%;
+ }
+ }
+
+ pre, code {
+ font-family: "Roboto Mono", monospace;
+ }
+
+ :not(pre) code {
+ background-color: var(--color-surface-variant);
+ color: var(--color-on-surface-variant);
+ padding: 0px 5px;
+ border-radius: 3px;
+ }
+
+ pre {
+ font-size: 14px;
+ line-height: 20px;
+ padding: 16px;
+ overflow-x: auto;
+ border-radius: 8px;
+ }
+
+ ul {
+ list-style: square;
+ }
+
+ ol {
+ list-style: decimal;
+ }
+
+ ul, ol {
+ list-style-position: outside;
+ margin-left: 32px;
+ }
+
+ li {
+ margin-top: 12px;
+ }
+
+ img {
+ max-width: 100%;
+ height: auto;
+ background-color: white;
+ text-align: center;
+ }
+}
diff --git a/sass/theme.scss b/sass/theme.scss new file mode 100644 index 0000000..c24d30b --- /dev/null +++ b/sass/theme.scss @@ -0,0 +1,63 @@ +@import "_colors.scss";
+@import "_reset.scss";
+@import "_typography.scss";
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "PT Serif", serif;
+ background-color: var(--color-background);
+
+ width: 800px;
+ margin: auto;
+}
+
+hr {
+ border: none;
+ border-top: 1px solid var(--color-outline-variant);
+}
+
+.article-header {
+ margin-top: 16px;
+ margin-bottom: 32px;
+
+ h1 {
+ color: var(--color-on-background);
+ font-size: 32px;
+ font-family: "PT Serif Caption", serif;
+ }
+
+ .info {
+ margin-top: 12px;
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ align-items: center;
+
+ .date {
+ color: var(--color-secondary);
+ }
+
+ .tags {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+
+ a {
+ display: block;
+ background-color: var(--color-primary-container);
+ color: var(--color-on-primary-container);
+ padding: 4px 12px;
+ border-radius: 999px;
+ text-decoration: none;
+
+ &:hover {
+ opacity: 80%;
+ }
+ }
+ }
+ }
+}
+
|