Some more styling

This commit is contained in:
Tuan Cao 2022-04-19 15:15:54 +07:00
parent 4538a5fd1c
commit 936855a136
3 changed files with 24 additions and 24 deletions

View File

@ -54,11 +54,7 @@ function MDContent({content, backLinks, handleOpenNewContent}) {
</div> </div>
<hr/> <hr/>
<footer> <footer>
<p>Made by Tuan Cao using <a href="https://github.com/TuanManhCao/digital-garden">Mind Stone</a>, © 2022</p> <p>Powered by <a href="https://github.com/TuanManhCao/digital-garden">Mind Stone</a>, © 2022</p>
<ul>
<li><a href="https://twitter.com/tuancm">Twitter</a></li>
<li><a href="https://github.com/tuanmanhcao">Github</a></li>
</ul>
</footer> </footer>
</div> </div>
); );

View File

@ -6,7 +6,8 @@ export default function Document() {
<Head> <Head>
<link rel="preconnect" href="https://fonts.googleapis.com"/> <link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true"/> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" <link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet"/> rel="stylesheet"/>
</Head> </Head>
<body> <body>

View File

@ -13,7 +13,6 @@ a:hover {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
flex-direction: row; flex-direction: row;
justify-content: center;
} }
/* Foooter section BEGIN */ /* Foooter section BEGIN */
.note-footer { .note-footer {
@ -28,7 +27,6 @@ a:hover {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
/*background-color: #f8bbbb;*/
flex-direction: row; flex-direction: row;
display: flex; display: flex;
} }
@ -110,12 +108,12 @@ a:hover {
flex-direction: column; flex-direction: column;
} }
:root { :root {
--default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; --default-font: 'Open Sans', sans-serif;
} }
.theme-light { .theme-light {
--background-primary: rgba(222, 222, 222, 0.1); --background-primary: white;
--background-primary-alt: #f5f6f8; --background-primary-alt: #f1f4fa;
--background-secondary: #f2f3f5; --background-secondary: #f2f3f5;
--background-secondary-alt: #e3e5e8; --background-secondary-alt: #e3e5e8;
--background-modifier-border: #ddd; --background-modifier-border: #ddd;
@ -127,10 +125,10 @@ a:hover {
--background-modifier-error-rgb: 230, 135, 135; --background-modifier-error-rgb: 230, 135, 135;
--background-modifier-error-hover: #bb0000; --background-modifier-error-hover: #bb0000;
--background-modifier-cover: rgba(0, 0, 0, 0.8); --background-modifier-cover: rgba(0, 0, 0, 0.8);
--text-accent: #705dcf; --text-accent: rgba(201, 19, 133, 0.77);;
--text-accent-hover: #7a6ae6; --text-accent-hover: #1ea2cc;
--text-normal: #2e3338; --text-normal: #232324;
--text-muted: #888888; --text-muted: #8e8e90;
--text-muted-rgb: 136, 136, 136; --text-muted-rgb: 136, 136, 136;
--text-faint: #999999; --text-faint: #999999;
--text-error: #800000; --text-error: #800000;
@ -168,20 +166,25 @@ a:hover {
margin: 15px 0; margin: 15px 0;
} }
.markdown-rendered h1 { .markdown-rendered h1 {
font-size: 2em; font-size: 2.0em;
font-weight: 800;
} }
.markdown-rendered h2 { .markdown-rendered h2 {
font-size: 1.6em; font-size: 1.6em;
font-weight: 800;
} }
.markdown-rendered h3 { .markdown-rendered h3 {
font-size: 1.37em; font-size: 1.4em;
font-weight: 700;
} }
.markdown-rendered h4 { .markdown-rendered h4 {
font-size: 1.25em; font-size: 1.2em;
font-weight: 600;
} }
.markdown-rendered h5, .markdown-rendered h5,
.markdown-rendered h6 { .markdown-rendered h6 {
font-size: 1.12em; font-size: 1em;
font-weight: 500;
} }
.markdown-rendered h6 { .markdown-rendered h6 {
color: var(--text-muted); color: var(--text-muted);
@ -225,7 +228,7 @@ hr {
background-color: var(--dark); background-color: var(--dark);
} }
@media screen and (max-width: 1400px) { @media screen and (max-width: 1200px) {
.right-bar-container { .right-bar-container {
display: none; display: none;
} }