extern/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2024-11-21 23:43:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Convert styles.css to SASS and include it by importing it in main.js.

Browse Source 
Add fonts: Hack and Open Sans.
Change editor font to Hack.
This commit is contained in:
Jonatan Heyman 2023-01-15 19:55:26 +01:00
parent 7aab3874b0
commit 3b905951af
51 changed files with 172 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<title>heynote</title>
<link rel="stylesheet" href="src/editor/styles.css" />
</head>
<body>

BIN
public/font/hack/hack-bold.woff Normal file
View File

Binary file not shown.

BIN
public/font/hack/hack-bold.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/hack/hack-bolditalic.woff Normal file
View File

Binary file not shown.

BIN
public/font/hack/hack-bolditalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/hack/hack-italic.woff Normal file
View File

Binary file not shown.

BIN
public/font/hack/hack-italic.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/hack/hack-regular.woff Normal file
View File

Binary file not shown.

BIN
public/font/hack/hack-regular.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/Bold/OpenSans-Bold.woff Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/Bold/OpenSans-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/BoldItalic/OpenSans-BoldItalic.woff Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/BoldItalic/OpenSans-BoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/ExtraBold/OpenSans-ExtraBold.woff Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/ExtraBold/OpenSans-ExtraBold.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/Italic/OpenSans-Italic.woff Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/Italic/OpenSans-Italic.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/Light/OpenSans-Light.woff Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/Light/OpenSans-Light.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/LightItalic/OpenSans-LightItalic.woff Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/LightItalic/OpenSans-LightItalic.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/Regular/OpenSans-Regular.woff Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/Regular/OpenSans-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/Semibold/OpenSans-Semibold.woff Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/Semibold/OpenSans-Semibold.woff2 Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff Normal file
View File

Binary file not shown.

BIN
public/font/open-sans/fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff2 Normal file
View File

Binary file not shown.

12
public/font/open-sans/open-sans.scss Normal file
View File

@ -0,0 +1,12 @@
@import "sass/variables";
@import "sass/mixins";
@import "sass/Light";
@import "sass/LightItalic";
@import "sass/Regular";
@import "sass/Italic";
@import "sass/Semibold";
@import "sass/SemiboldItalic";
@import "sass/Bold";
@import "sass/BoldItalic";
@import "sass/ExtraBold";
@import "sass/ExtraBoldItalic";

4
public/font/open-sans/sass/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
# Ignore everything in this directory
# *
# Except this file
!.gitignore

8
public/font/open-sans/sass/_Bold.scss Executable file
View File

@ -0,0 +1,8 @@
/* BEGIN Bold */
@font-face {
font-family: 'Open Sans';
@include fontdef($OpenSansPath, $OpenSansVersion, "Bold");
font-weight: bold;
font-style: normal;
}
/* END Bold */

8
public/font/open-sans/sass/_BoldItalic.scss Executable file
View File

@ -0,0 +1,8 @@
/* BEGIN Bold Italic */
@font-face {
font-family: 'Open Sans';
@include fontdef($OpenSansPath, $OpenSansVersion, "BoldItalic");
font-weight: bold;
font-style: italic;
}
/* END Bold Italic */

8
public/font/open-sans/sass/_ExtraBold.scss Executable file
View File

@ -0,0 +1,8 @@
/* BEGIN Extrabold */
@font-face {
font-family: 'Open Sans';
@include fontdef($OpenSansPath, $OpenSansVersion, "ExtraBold");
font-weight: 800;
font-style: normal;
}
/* END Extrabold */

8
public/font/open-sans/sass/_ExtraBoldItalic.scss Executable file
View File

@ -0,0 +1,8 @@
/* BEGIN Extrabold Italic */
@font-face {
font-family: 'Open Sans';
@include fontdef($OpenSansPath, $OpenSansVersion, "ExtraBoldItalic");
font-weight: 800;
font-style: italic;
}
/* END Extrabold Italic */

8
public/font/open-sans/sass/_Italic.scss Executable file
View File

@ -0,0 +1,8 @@
/* BEGIN Italic */
@font-face {
font-family: 'Open Sans';
@include fontdef($OpenSansPath, $OpenSansVersion, "Italic");
font-weight: normal;
font-style: italic;
}
/* END Italic */

8
public/font/open-sans/sass/_Light.scss Executable file
View File

@ -0,0 +1,8 @@
/* BEGIN Light */
@font-face {
font-family: 'Open Sans';
@include fontdef($OpenSansPath, $OpenSansVersion, "Light");
font-weight: 300;
font-style: normal;
}
/* END Light */

8
public/font/open-sans/sass/_LightItalic.scss Executable file
View File

@ -0,0 +1,8 @@
/* BEGIN Light Italic */
@font-face {
font-family: 'Open Sans';
@include fontdef($OpenSansPath, $OpenSansVersion, "LightItalic");
font-weight: 300;
font-style: italic;
}
/* END Light Italic */

8
public/font/open-sans/sass/_Regular.scss Executable file
View File

@ -0,0 +1,8 @@
/* BEGIN Regular */
@font-face {
font-family: 'Open Sans';
@include fontdef($OpenSansPath, $OpenSansVersion, "Regular");
font-weight: normal;
font-style: normal;
}
/* END Regular */

8
public/font/open-sans/sass/_Semibold.scss Executable file
View File

@ -0,0 +1,8 @@
/* BEGIN Semibold */
@font-face {
font-family: 'Open Sans';
@include fontdef($OpenSansPath, $OpenSansVersion, "Semibold");
font-weight: 600;
font-style: normal;
}
/* END Semibold */

8
public/font/open-sans/sass/_SemiboldItalic.scss Executable file
View File

@ -0,0 +1,8 @@
/* BEGIN Semibold Italic */
@font-face {
font-family: 'Open Sans';
@include fontdef($OpenSansPath, $OpenSansVersion, "SemiboldItalic");
font-weight: 600;
font-style: italic;
}
/* END Semibold Italic */

4
public/font/open-sans/sass/_mixins.scss Normal file
View File

@ -0,0 +1,4 @@
@mixin fontdef($OpenSansPath, $OpenSansVersion, $FontType:"Regular") {
src: url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.woff2?v=#{$OpenSansVersion}') format('woff2'),
url('#{$OpenSansPath}/#{$FontType}/OpenSans-#{$FontType}.woff?v=#{$OpenSansVersion}') format('woff');
}

2
public/font/open-sans/sass/_variables.scss Executable file
View File

@ -0,0 +1,2 @@
$OpenSansPath: "/font/open-sans/fonts" !default;
$OpenSansVersion: "1.1.0" !default;

12
public/font/open-sans/sass/open-sans.scss Executable file
View File

@ -0,0 +1,12 @@
@import "variables";
@import "mixins";
@import "Light";
@import "LightItalic";
@import "Regular";
@import "Italic";
@import "Semibold";
@import "SemiboldItalic";
@import "Bold";
@import "BoldItalic";
@import "ExtraBold";
@import "ExtraBoldItalic";

6
src/components/StatusBar.vue
View File

@ -116,10 +116,10 @@
+dark-mode
opacity: 0.9
&.dark
background-image: url("/icons/dark-mode.png")
background-image: url("icons/dark-mode.png")
&.light
background-image: url("/icons/light-mode.png")
background-image: url("icons/light-mode.png")
&.system
background-image: url("/icons/both-mode.png")
background-image: url("icons/both-mode.png")
</style>

2
src/css/application.sass Normal file
View File

@ -0,0 +1,2 @@
@import "font"
@import "base"

23
src/css/base.sass Normal file
View File

@ -0,0 +1,23 @@
html, body
margin: 0
padding: 0
background: #fff
color: #444
font-family: 'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif
height: 100%
font-size: 12px
overscroll-behavior-y: none
#app
height: 100%
width: 100%
.editor
height: 100%
.cm-editor
height: 100%
#syntaxTree
height: 20%
overflow-y: auto

27
src/css/font.sass Normal file
View File

@ -0,0 +1,27 @@
@font-face
font-family: 'Hack'
src: url('/font/hack/hack-regular.woff2') format('woff2'), url('/font/hack/hack-regular.woff') format('woff')
font-weight: 400
font-style: normal
@font-face
font-family: 'Hack'
src: url('/font/hack/hack-bold.woff2') format('woff2'), url('/font/hack/hack-bold.woff') format('woff')
font-weight: 700
font-style: normal
@font-face
font-family: 'Hack'
src: url('/font/hack/hack-italic.woff2') format('woff2'), url('/font/hack/hack-italic.woff') format('woff')
font-weight: 400
font-style: italic
@font-face
font-family: 'Hack'
src: url('/font/hack/hack-bolditalic.woff2') format('woff2'), url('/font/hack/hack-bolditalic.woff') format('woff')
font-weight: 700
font-style: italic
@import "~/../public/font/open-sans/open-sans"

28
src/editor/styles.css
View File

@ -1,28 +0,0 @@
html,
body {
margin: 0;
padding: 0;
background: #fff;
color: #444;
font-family: 'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
height: 100%;
font-size: 12px;
overscroll-behavior-y: none;
}
#app {
height: 100%;
width: 100%;
}
.editor {
height: 100%;
}
.editor .cm-editor {
height: 100%;
}
#syntaxTree {
height: 20%;
overflow-y: auto;
}

2
src/editor/theme/base.js
View File

@ -9,7 +9,7 @@ export const heynoteBase = EditorView.theme({
paddingTop: 4,
},
'.cm-scroller': {
fontFamily: "Menlo, Monaco, 'Courier New', monospace",
fontFamily: "Hack, Menlo, Monaco, 'Courier New', monospace",
},
'.cm-gutters': {
padding: '0 2px 0 4px',

2
src/main.js
View File

@ -1,3 +1,5 @@
import './css/application.sass'
import { createApp } from 'vue'
import App from './App.vue'