elf
/
elf-notes
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Start the CSS design 

Gonna go for the liquid scaling, but I think I'm gonna need a spreadsheet for
all the calculations I want to do. Given I have a min 360 and a max 960
width (is that even reasonable?) and I want a maximum text width of 30 ems, I
think I could write a spreadsheet that could calculate all of the margins and
clamp them.

It's annoying that I have to calc(clamp()) to keep Sass from fucking with me,
but at least it's do-able.  Maybe as a separate CSS file?
This commit is contained in:
Elf M. Sternberg 2022-04-24 21:38:29 -07:00
parent 99ecd8e26d
commit 171ae2214a
5 changed files with 105 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
*#
.#*
*~
public/

2
config.toml
View File

@ -1,5 +1,5 @@
# The URL the site will be built for
base_url = "https://elfsternberg.com/notes"
base_url = "http://192.168.1.143:1025"
# Whether to automatically compile all Sass files in the sass directory
compile_sass = true

8
sass/design/_definitions.scss Normal file
View File

@ -0,0 +1,8 @@
:root {
--primary-color: #520022;
--secondary-color: #dbff98;
--background-color: #ffffff;
--background-secondary-color: #dcdcdc;
--text-color: #1f000d;
}

61
sass/design/_fonts.scss Normal file
View File

@ -0,0 +1,61 @@
/* Nunito-Regular - latin */
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 400;
src:
url("fonts/nunito/Nunito-Regular.ttf") format("ttf"),
url("fonts/nunito/Nunito-Regular.woff2") format("woff2"),
url("fonts/nunito/Nunito-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-500 - latin */
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 500;
src:
url("fonts/nunito/Nunito-SemiBold.woff2") format("woff2"),
url("fonts/nunito/Nunito-SemiBold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-700 - latin */
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 700;
src:
url("fonts/nunito/Nunito-Bold.woff2") format("woff2"),
url("fonts/nunito/Nunito-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-italic - latin */
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 400;
src:
url("fonts/nunito/Nunito-Italic.woff2") format("woff2"),
url("fonts/nunito/Nunito-Italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-500italic - latin */
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 500;
src:
url("fonts/nunito/Nunito-SemiBoldItalic.woff2") format("woff2"),
url("fonts/nunito/Nunito-SemiBoldItalic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-BoldItalic - latin */
@font-face {
font-family: "Nunito";
font-style: italic;
font-weight: 700;
src:
url("fonts/nunito/Nunito-BoldItalic.woff2") format("woff2"),
url("fonts/nunito/Nunito-BoldItalic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

31
sass/main.scss Normal file
View File

@ -0,0 +1,31 @@
@import "design/definitions";
@import "design/fonts";
:root {
font-size: calc(clamp(0.875rem, .725rem + 0.6666vw, 1.125rem));
font-family: "Nunito", sans-serif;
}
body {
font-size: calc(clamp(0.875rem, .725rem + 0.6666vw, 1.125rem));
font-family: "Nunito", sans-serif;
font-weight: 400;
}
header.header {
position: fixed;
background-color: var(--background-color, #ffffff);
}
.container {
width: 100%;
padding-right: 1.5rem;
padding-left: 1.5rem;
margin-right: auto;
margin-left: auto;
}
.navbar .container {
display: flex;
align-items: flex-start;
}