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

74 lines
857 B
SCSS
Raw Normal View History

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
///////////////////
// //
// HEADER //
// //
///////////////////
section: improve sections, lists and navigation * Splits styles into partials. * Adds a category entry to the navigation menu. * Adds a flex to the header to get the menu on the right. * Adds a flex to the sections and lists to diplay information evenly. Co-Authored-by: Igor Milhit <igor@milhit@.ch>
2020-01-15 17:42:04 +01:00
picocss: import pico - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Overrides the font family. - Loads the Lilex font. - Centers de site title and the main menu. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Updates the changelog. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
.logo {
height: 3rem;
margin-right: 1em;
}
section: improve sections, lists and navigation * Splits styles into partials. * Adds a category entry to the navigation menu. * Adds a flex to the header to get the menu on the right. * Adds a flex to the sections and lists to diplay information evenly. Co-Authored-by: Igor Milhit <igor@milhit@.ch>
2020-01-15 17:42:04 +01:00
.main-header {
picocss: import pico - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Overrides the font family. - Loads the Lilex font. - Centers de site title and the main menu. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Updates the changelog. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
nav {
display: flex;
flex-direction: column;
ul {
align-self: center;
}
a {
display: flex;
align-items: center;
h1 {
margin: 0;
}
}
}
}
/* .main-header {
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
display: flex;
flex-direction: column;
margin: 1.25rem 0;
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
header: restore and adapt the avatar image Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-11-03 11:16:28 +01:00
.avatar {
height: 3rem;
margin: auto 0;
border-radius: 35%;
}
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
h1 {
margin: 0;
menu: improve the menu * Uses a regular method to generate the menu (`config.toml`). * Improves the test to provide the good atom link according to the homepage, a section or a post. * Provides a title to improve identification of the atom link. * Adapts the menu style to mobile or wider screens. * Adds and uses a mixin for inline lists. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-10-24 14:24:43 +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
article {
section: improve sections, lists and navigation * Splits styles into partials. * Adds a category entry to the navigation menu. * Adds a flex to the header to get the menu on the right. * Adds a flex to the sections and lists to diplay information evenly. Co-Authored-by: Igor Milhit <igor@milhit@.ch>
2020-01-15 17:42:04 +01:00
flex-grow: 1;
}
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
.title {
display: flex;
menu: improve the menu * Uses a regular method to generate the menu (`config.toml`). * Improves the test to provide the good atom link according to the homepage, a section or a post. * Provides a title to improve identification of the atom link. * Adapts the menu style to mobile or wider screens. * Adds and uses a mixin for inline lists. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-10-24 14:24:43 +02:00
justify-content: center;
header: restore and adapt the avatar image Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-11-03 11:16:28 +01:00
gap: .5rem;
margin-bottom: .5rem;
menu: improve the menu * Uses a regular method to generate the menu (`config.toml`). * Improves the test to provide the good atom link according to the homepage, a section or a post. * Provides a title to improve identification of the atom link. * Adapts the menu style to mobile or wider screens. * Adds and uses a mixin for inline lists. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-10-24 14:24:43 +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
nav {
menu: improve the menu * Uses a regular method to generate the menu (`config.toml`). * Improves the test to provide the good atom link according to the homepage, a section or a post. * Provides a title to improve identification of the atom link. * Adapts the menu style to mobile or wider screens. * Adds and uses a mixin for inline lists. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-10-24 14:24:43 +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
ul {
display: flex;
justify-content: space-evenly;
margin: 0;
padding: 0;
}
menu: improve the menu * Uses a regular method to generate the menu (`config.toml`). * Improves the test to provide the good atom link according to the homepage, a section or a post. * Provides a title to improve identification of the atom link. * Adapts the menu style to mobile or wider screens. * Adds and uses a mixin for inline lists. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-10-24 14:24:43 +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
@include inline-list;
menu: improve the menu * Uses a regular method to generate the menu (`config.toml`). * Improves the test to provide the good atom link according to the homepage, a section or a post. * Provides a title to improve identification of the atom link. * Adapts the menu style to mobile or wider screens. * Adds and uses a mixin for inline lists. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-10-24 14:24:43 +02:00
}
picocss: import pico - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Overrides the font family. - Loads the Lilex font. - Centers de site title and the main menu. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Updates the changelog. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
} */