diff --git a/assets/styles/fonts.css b/assets/styles/fonts.css index 2fc42bc..33c8dfc 100644 --- a/assets/styles/fonts.css +++ b/assets/styles/fonts.css @@ -1,3 +1,9 @@ +/* +---------- +@font-face +---------- +*/ + @font-face { font-display: swap; font-family: Roboto; diff --git a/assets/styles/global.css b/assets/styles/global.css index e82b1e3..c8de85e 100644 --- a/assets/styles/global.css +++ b/assets/styles/global.css @@ -24,7 +24,11 @@ color-scheme: dark; } -/* Resets */ +/* +------ +Resets +------ +*/ *, *::before, @@ -87,7 +91,11 @@ ul { list-style: none; } } } -/* Utility and Helper */ +/* +------------------ +Utility and Helper +------------------ +*/ @supports (display: flex) { .-flex { display: flex; } diff --git a/assets/styles/no-js.css b/assets/styles/no-js.css index cf5cbeb..54c6153 100644 --- a/assets/styles/no-js.css +++ b/assets/styles/no-js.css @@ -1,3 +1,9 @@ +/* +-------------- +No JS Fallback +-------------- +*/ + .noscript__settings { display: block; } .noscript__message { diff --git a/assets/styles/settings.css b/assets/styles/settings.css index 16ae747..b4b41e4 100644 --- a/assets/styles/settings.css +++ b/assets/styles/settings.css @@ -1,4 +1,8 @@ -/* Settings */ +/* +-------- +Settings +-------- +*/ :root[data-theme="light"] .settings__svg--theme-sun { display: none; } :root[data-theme="dark"] .settings__svg--theme-sun { display: block; } @@ -12,13 +16,20 @@ --settings-interact: var(--color-1); color: hsl(var(--settings-color)); - max-height: 16.25rem; /* Height of .settings__buttons. Set it so people can interact with stuff directly below it. */ + /* + Height of .settings__buttons. + Set it so people can interact with stuff directly below it. + */ + max-height: 16.25rem; transition: left cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.25s; position: fixed; top: 1.125rem; bottom: 1.125rem; - left: -2.625rem; /* Width of .settings__buttons */ + /* + Width of .settings__buttons. + */ + left: -2.625rem; z-index: 99; } @@ -82,7 +93,11 @@ /* Settings > SVG */ .settings__svg--toggle-settings { - padding: 13.67%; /* Use padding on svg to make it smaller (Remember to set the padding below 50%). */ + /* + Use padding on svg to make it smaller. + Remember to set the padding below 50%. + */ + padding: 13.67%; transition: transform cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.25s; } diff --git a/assets/styles/simple-note.css b/assets/styles/simple-note.css index 31eb56a..3fb9a51 100644 --- a/assets/styles/simple-note.css +++ b/assets/styles/simple-note.css @@ -1,3 +1,9 @@ +/* +----------- +Simple Note +----------- +*/ + body { color: hsla(var(--color-1)); background-color: hsl(var(--color-2)); diff --git a/index.html b/index.html index 831bfb3..27ac372 100644 --- a/index.html +++ b/index.html @@ -120,7 +120,11 @@ -