igor
/
portfoligor
1
1
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases 4 Wiki Activity
portfoligor/assets/scss/_variables.scss

85 lines
2.5 KiB
SCSS
Raw Normal View History

picocss: import pico - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Overrides the font family. - Plays with layouts to discover picocss. - Updates the changelog. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
// Overide pico variables
:root {
// why important is needed?
--pico-font-family: "mylilex" !important;
--font-size: 120% !important;
}
/* ///////////////////
layouts: use details for the post informations * Wraps the post informations inside a details HTML tag. * Reduces the bottom margin of the post main heading. * Reorders the SCSS rules in order to set the post-info class to the details HTML tags. * Add the permalink to the post informations. * Uses the i18n mechanism for the new layout strings, such as "post-infos" or "permalink". * Updates the changelog. * Closes #17. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-06-06 18:09:48 +02:00
// //
theme: simplify the main layout * Simplifies the header and menu layout for all screen width. * Uses only one background color (Darkest Polar). * Change the main text color to Snow Light Grey. * Change the header and footer text color to Snow Lightest Grey. * Add a color for active and focused links (Frost Lighter Green). * Simplifies the figure layout and colors. * Adds a font-family variable and set it to the body. It uses the system default font. * Tries to set all font properties in the _fonts.scss file. * Removes the links decoration on the header and footer. * Harmonizes the footer accordingly to the header. * Uses the hugo regular method to generate the footer menu. * Stops centering the content on large screens. * Adds the content max width and content left margin to the variables. * Sets the font weight to bold for hovered links. * Suppress the main HTML tag of the index template, and set the correct classes on the main HTML tag of the baseof template. * Uses a second level header for the title of the page, as the first level is used for the website title. * Improves the layout of definition lists on the home page, with a better (and simpler) rendering on small screens. * Prevents to use the post information partial on static page. This is done through a test on the layout property `static` of the front header. * Reorders the sections of the home page and adds anchors to the section headers. * Closes #8, #11. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-10-29 22:34:24 +02:00
// WIDTH //
layouts: use details for the post informations * Wraps the post informations inside a details HTML tag. * Reduces the bottom margin of the post main heading. * Reorders the SCSS rules in order to set the post-info class to the details HTML tags. * Add the permalink to the post informations. * Uses the i18n mechanism for the new layout strings, such as "post-infos" or "permalink". * Updates the changelog. * Closes #17. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-06-06 18:09:48 +02:00
// //
shortcodes: adds an audio player with album cover * Adds a shortcodes with an image. * Updates the audio, stream and published shortcodes to group the figcaption under the audio player. * Adds a SCSS partial for grid construction that only contains for now a breakpoint mixin'. * Displays the cover above the player by default, and on the left side for bigger screens. * Fixes the SCSS files according to SCSS linting. Co-Authored-by: iGor milhit <igor@milhit.ch>
2020-12-26 19:59:54 +01:00
///////////////////
theme: simplify the main layout * Simplifies the header and menu layout for all screen width. * Uses only one background color (Darkest Polar). * Change the main text color to Snow Light Grey. * Change the header and footer text color to Snow Lightest Grey. * Add a color for active and focused links (Frost Lighter Green). * Simplifies the figure layout and colors. * Adds a font-family variable and set it to the body. It uses the system default font. * Tries to set all font properties in the _fonts.scss file. * Removes the links decoration on the header and footer. * Harmonizes the footer accordingly to the header. * Uses the hugo regular method to generate the footer menu. * Stops centering the content on large screens. * Adds the content max width and content left margin to the variables. * Sets the font weight to bold for hovered links. * Suppress the main HTML tag of the index template, and set the correct classes on the main HTML tag of the baseof template. * Uses a second level header for the title of the page, as the first level is used for the website title. * Improves the layout of definition lists on the home page, with a better (and simpler) rendering on small screens. * Prevents to use the post information partial on static page. This is done through a test on the layout property `static` of the front header. * Reorders the sections of the home page and adds anchors to the section headers. * Closes #8, #11. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-10-29 22:34:24 +02:00
$content-max-width: 46rem; // 920 px
$content-left-margin: 3vw;
///////////////////
// //
// FONT //
// //
///////////////////
$font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
layout: improve post info in single or list pages * Adds a lists-footer partial. * Uses breakpoints to adapt how the post informations is aligned and separated when the screen gets bigger. * Adds some space between posts in a list or section, to improve readability. * Removes useless article level and renames a section into article in the list template. * Uses breakpoints to adapt the navigation font-size when the screen gets bigger. * Improves the font-size variables, in order to get a font-size-small smaller. * Restores the section template that wasn't right, I don't know what I've done when rebasing and resolving conflicts… Co-Authored-by: Igor Milhit <igor@milhit.ch>
2019-08-25 17:54:11 +02:00
$font-size-base: 1.25rem !default; // 25 px
$font-size-small: .9rem; // 18 px
content: improve verses layout for small screens * Improves the line-height globally. * Adds the verse class to the content block according to the layout key of the front matter. * Styles the verses. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-04-01 21:50:06 +02:00
$line-height-base: 1.4;
$line-height-verse: 1.3;
scss: improve the `verse` text layout - Increase space between paragraph on large screens, except for the last paragraph. - Add a bigger left margin on large screens. Co-Authored-by: iGor milhit <igor@milhit.ch>
2022-09-05 14:42:59 +02:00
$verse-p-bottom-space: 2rem;
$verse-p-bottom-space-larger: 3rem;
layout: improve post info in single or list pages * Adds a lists-footer partial. * Uses breakpoints to adapt how the post informations is aligned and separated when the screen gets bigger. * Adds some space between posts in a list or section, to improve readability. * Removes useless article level and renames a section into article in the list template. * Uses breakpoints to adapt the navigation font-size when the screen gets bigger. * Improves the font-size variables, in order to get a font-size-small smaller. * Restores the section template that wasn't right, I don't know what I've done when rebasing and resolving conflicts… Co-Authored-by: Igor Milhit <igor@milhit.ch>
2019-08-25 17:54:11 +02:00
shortcodes: adds an audio player with album cover * Adds a shortcodes with an image. * Updates the audio, stream and published shortcodes to group the figcaption under the audio player. * Adds a SCSS partial for grid construction that only contains for now a breakpoint mixin'. * Displays the cover above the player by default, and on the left side for bigger screens. * Fixes the SCSS files according to SCSS linting. Co-Authored-by: iGor milhit <igor@milhit.ch>
2020-12-26 19:59:54 +01:00
/////////////////////
// //
// COLORS //
// //
// Based on Nord //
// color scheme //
// //
/////////////////////
style: Implements nord color scheme * Lists available colors in the _variables.scss file. * Adds a _colors.scss file to set the colors. * Sets the colors. * Sets the width of container larger, removes header and footer borders, to improve display when using different colors. * Fixes #7. Co-Authored-by: Igor Milhit <igor@milhit.ch>
2020-05-30 06:44:50 +02:00
$nord0: #2e3440; // Polar night, darkest grey
$nord1: #3b4252; // Polar night, darker grey
$nord2: #434c5e; // Polar night, dark grey
$nord3: #4c566a; // Polar night, lighter grey
$nord4: #d8dee9; // Snow storm, origin, light grey
$nord5: #e5e9f0; // Snow storm, brighter light grey
$nord6: #eceff4; // Snow storm, the brightest one
$nord7: #8fbcbb; // Frost, frozen polar water
$nord8: #88c0d0; // Frost, brighter, pure and clear ice
$nord9: #81a1c1; // Frost, darker, arctic waters
$nord10: #5e81ac; // Frost, darkest, deep arctic ocean
$nord11: #bf616a; // Aurora, red
$nord12: #d08770; // Aurora, orange
$nord13: #ebcb8b; // Aurora, yellow
$nord14: #a3be8c; // Aurora, green
$nord15: #b48ead; // Aurora, purple
// Polar, translated into something easy to remember, hopefully
$darkest-polar: $nord0;
$darker-polar: $nord1;
$dark-polar: $nord2;
$lighter-polar: $nord3;
$the-darkiest-polar: darken($darkest-polar, 4%);
// Snow storm, translated into something easy to remember, hopefully
$snow-storm-light-grey: $nord4;
$snow-storm-lighter-grey: $nord5;
$snow-storm-lightest-grey: $nord6;
//Frost, translated into something easy to remember, hopefully
$frost-green: $nord7;
$frost-lighter-green: $nord8;
$frost-grey-blue: $nord9;
$frost-deep-blue: $nord10;
//Aurora, translated into something easy to remember, hopefully
theme: simplify the main layout * Simplifies the header and menu layout for all screen width. * Uses only one background color (Darkest Polar). * Change the main text color to Snow Light Grey. * Change the header and footer text color to Snow Lightest Grey. * Add a color for active and focused links (Frost Lighter Green). * Simplifies the figure layout and colors. * Adds a font-family variable and set it to the body. It uses the system default font. * Tries to set all font properties in the _fonts.scss file. * Removes the links decoration on the header and footer. * Harmonizes the footer accordingly to the header. * Uses the hugo regular method to generate the footer menu. * Stops centering the content on large screens. * Adds the content max width and content left margin to the variables. * Sets the font weight to bold for hovered links. * Suppress the main HTML tag of the index template, and set the correct classes on the main HTML tag of the baseof template. * Uses a second level header for the title of the page, as the first level is used for the website title. * Improves the layout of definition lists on the home page, with a better (and simpler) rendering on small screens. * Prevents to use the post information partial on static page. This is done through a test on the layout property `static` of the front header. * Reorders the sections of the home page and adds anchors to the section headers. * Closes #8, #11. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-10-29 22:34:24 +02:00
$aurora-red: $nord11;
$aurora-orange: $nord12;
style: Implements nord color scheme * Lists available colors in the _variables.scss file. * Adds a _colors.scss file to set the colors. * Sets the colors. * Sets the width of container larger, removes header and footer borders, to improve display when using different colors. * Fixes #7. Co-Authored-by: Igor Milhit <igor@milhit.ch>
2020-05-30 06:44:50 +02:00
$aurora-yellow: $nord13;
$aurora-green: $nord14;
$aurora-purple: $nord15;
picocss: import pico - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Overrides the font family. - Plays with layouts to discover picocss. - Updates the changelog. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
*/