Skip to content

Commit

Permalink
Added fonts and typography
Browse files Browse the repository at this point in the history
  • Loading branch information
@sreeram-venkitesh
sreeram-venkitesh committed Nov 6, 2020
1 parent 05bbf65 commit d0b6099
Show file tree
Hide file tree
Showing 2 changed files with 211 additions and 24 deletions.
46 changes: 30 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ <h1 class="title">Notion.css</h1>
use it to bring in all the elements you use in your Notion page to your HTML
</p>
<div style="display: flex;">
<a href="https://github.com/fillerInk/notion.css" target="_blank"><i class="fa fa-github" id='github' aria-hidden="true" style=" font-size: larger;"> GitHub</i></a>
<a href="https://github.com/fillerInk/notion.css" target="_blank" style="font-size: x-large; padding: auto 0;"><i class="fa fa-github" id='github' aria-hidden="true" style=" font-size: xxx-large; margin-right:5px;"></i>GitHub</a>
</div>
<h2 class="title">Installation</h2>
<p>Import the CSS files by pasting this into the <code>&lt;head&gt;</code> of your HTML</p>
Expand All @@ -29,7 +29,7 @@ <h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h3>Subtitles</h3>
<h3 class="title">Subtitles</h3>
<p>You can add subtitles by adding the subtitle class to your headings like so</p>
<div class="code">
&lt;h1 class="subtitle"&gt;This is a subtitle&lt;/h1&gt;
Expand All @@ -44,7 +44,7 @@ <h4 class="subtitle">Subtitle 4</h4>
<h5 class="subtitle">Subtitle 5</h5>
<h6 class="subtitle">Subtitle 6</h5>

<h3>Typography</h3>
<h3 class="title">Typography</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit,
quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit.
Expand All @@ -55,7 +55,7 @@ <h3>Typography</h3>
per conubia nostra, per inceptos himenaeos. <br> <strong>This is some strong text,</strong> this is
normal, <b>this is bold,</b> <em>and this is in italics!</em> And, <a href="/">here</a>'s a link.
</p>
<h3>Buttons</h3>
<h3 class="title">Buttons</h3>
<p>Here are some buttons</p>

<div class="code">
Expand All @@ -64,11 +64,11 @@ <h3>Buttons</h3>
<button>Click Me!</button>

<div class="code">
&lt;button class="button-primary"&gt;Click Me!&lt;/button&gt;
&lt;button class="primary"&gt;Click Me!&lt;/button&gt;
</div>
<button class="button-primary">Click Me!</button>
<button class="primary">Click Me!</button>

<h3>Form Elements</h3>
<h3 class="title">Form Elements</h3>
<p>Here's a form</p>

<form action="/">
Expand All @@ -94,17 +94,26 @@ <h3>Form Elements</h3>
<label for="status">I understand</label><br>
</form>

<h3>Code</h3>
<h3 class="title">Code</h3>
<p>You can add blocks of code in your page like so</p>
<div class="code">
&lt;div class="code"&gt; </br>
const your_code = here; </br>
&lt;/div&gt;
</div>

<h3>Navigation</h3>
<h3 class="title">Navigation</h3>
<p>You can eaily create a navigation bar</p>

<div class="code">
&lt;div class="topnav"&gt; </br>
&lt;a class="active" href="#home"> Home &lt;/a&gt; <br>
&lt;a href="#news"> News &lt;/a&gt;<br>
&lt;a href="#contact"> Contact &lt;/a&gt;<br>
&lt;a href="#about"> About &lt;/a&gt;<br>
&lt;/div&gt;
</div>

<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
Expand All @@ -114,8 +123,8 @@ <h3>Navigation</h3>



<h3>Others</h3>
Here's a list
<h3 class="title">Others</h3>
<p>Here's a list</p>
<ul>
<li>With</li>
<li>some</li>
Expand Down Expand Up @@ -153,15 +162,20 @@ <h3>Others</h3>
<p>Quotes</p>
<p>You can add blocks of code in your page like so</p>
<div class="code">
&lt;div class="quote"&gt; </br>
&lt;blockquote&gt; </br>
I don't like sand. It's coarse, and rough, and irritating, and it gets everywhere. - Anakin Skywalker <br>
&lt;/div&gt;
&lt;/blockquote&gt;
</div>

<div class="quote">
I don't like sand. It's coarse, and rough, and irritating, and it gets everywhere. - Anakin Skywalker
</div>
<blockquote class="quote">
I don't like sand. It's coarse, and rough, and irritating, and it gets everywhere - Anakin Skywalker
</blockquote>

<h3>Projects using Notion.css</h3>

<ul>
<li>Messier Dex, an encyclopedia and viewing guide for the Messier Objects</li>
</ul>

<hr>
<p>Notion.css is made by <a href="https://sreeram.codes" target="_blank">@fillerInk</a>.</p>
Expand Down
189 changes: 181 additions & 8 deletions src/notion.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,178 @@
a {
color: rgba(0, 0, 0, 0.6);
font-size: 20px;
line-height: 150%;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
"Helvetica Neue", sans-serif;
font-style: normal;
font-variant: normal;
font-weight: 400;
text-decoration: underline;
}

body {
font-family: inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
"Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 500;
}

.title {
text-decoration: underline;
width: 100%;
padding-bottom: 10px;
border-bottom: 1px solid #37352f;
}

.subtitle {
color: rgba(0, 0, 0, 0.6);
font-weight: 500;
}



h1 {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
"Helvetica Neue", Arial, sans-serif;
font-size: 52px;
font-style: normal;
font-variant: normal;
font-weight: 700;
line-height: 1.1;
}

h2 {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
"Helvetica Neue", Arial, sans-serif;
font-size: 30px;
font-style: normal;
font-variant: normal;
font-weight: 700;
line-height: 1.1;
}

h3 {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
"Helvetica Neue", Arial, sans-serif;
font-size: 25px;
font-style: normal;
font-variant: normal;
font-weight: 700;
line-height: 1.1;
}

h4 {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
"Helvetica Neue", Arial, sans-serif;
font-size: 20px;
font-style: normal;
font-variant: normal;
font-weight: 700;
line-height: 1.1;
}

h5 {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
"Helvetica Neue", Arial, sans-serif;
font-size: 18px;
font-style: normal;
font-variant: normal;
font-weight: 700;
line-height: 1.1;
}

h6 {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
"Helvetica Neue", Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 700;
line-height: 1;
}

p {
color: rgba(0, 0, 0, 0.6);
font-size: 20px;
line-height: 150%;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
"Helvetica Neue", Arial, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: 400;
}



button {
background-color: #f0f2f4;
color: #404b59;
border: 1px solid #f0f2f4;
box-shadow: rgba(15, 15, 15, 0.1) 0px 1px 2px;
border-radius: 6px;
align-items: center;
height: fit-content;
min-width: 180px;
font-size: large;
font-weight: 500;
padding: 12px;
}

button:hover {
background-color: #66778c;
color: #fff;
}

button.primary {
background-color: #e16259;
color: #fff;
border: 1px solid rgb(190, 86, 67);
border-radius: 3px;
align-items: center;
height: fit-content;
min-width: 180px;
font-size: large;
font-weight: 500;
padding: 12px;
}

button.primary:hover {
background-color: #cf534a;
color: #fff;
}

.code {
background-color: #f1f1f1;
padding: 15px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 5px;
margin-right: 5px;
font-size: 17px;
font-family: monospace;
border-radius: 3px;
}

blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 40px 20px;
quotes: "\201C""\201D""\2018""\2019";
font-size: 20px;
line-height: 150%;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans",
"Helvetica Neue", Arial, sans-serif;
font-style: italic;
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}

.topnav {
Expand All @@ -10,7 +183,7 @@
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #37352F;
color: #37352f;
text-align: center;
padding: 14px 16px;
text-decoration: none;
Expand All @@ -19,13 +192,13 @@

/* Add a color to the active/current link */
.topnav a.active {
background-color: #fff;
color: #37352F;
}
background-color: #fff;
color: #37352f;
}

/* Change the color of links on hover */
.topnav a:hover {
background-size: 1px;
background-color: rgba(55, 53, 47, 0.08);
color: #37352F;
color: #37352f;
}

0 comments on commit d0b6099

Please sign in to comment.