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

41 lines
450 B
SCSS
Raw Permalink 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
///////////////////
// //
picocss: implement the pico css framework - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Adapts my styles to the pico css theme. - Updates the changelog. - Closes #29. - Closes #15. - Closes #16. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
// MAIN HEADER //
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
// //
///////////////////
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: implement the pico css framework - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Adapts my styles to the pico css theme. - Updates the changelog. - Closes #29. - Closes #15. - Closes #16. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
.logo {
height: 3rem;
margin-right: .5em;
}
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: implement the pico css framework - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Adapts my styles to the pico css theme. - Updates the changelog. - Closes #29. - Closes #15. - Closes #16. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
.title {
text-decoration: none;
}
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: implement the pico css framework - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Adapts my styles to the pico css theme. - Updates the changelog. - Closes #29. - Closes #15. - Closes #16. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
.main-header {
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 {
picocss: implement the pico css framework - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Adapts my styles to the pico css theme. - Updates the changelog. - Closes #29. - Closes #15. - Closes #16. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
display: flex;
flex-direction: column;
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 {
picocss: implement the pico css framework - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Adapts my styles to the pico css theme. - Updates the changelog. - Closes #29. - Closes #15. - Closes #16. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
align-self: center;
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
}
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: implement the pico css framework - Updates the picocss dependency. - Imports pico in the sass hugo pipe. - Uses dart-sass as transpiler. - Implements a new logo in SVG, with color adapted to the prefered colorsheme. - Adapts my styles to the pico css theme. - Updates the changelog. - Closes #29. - Closes #15. - Closes #16. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-09-02 19:58:59 +02:00
a {
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
scss: improve spacing of header navigation - Improves the spacing of the header navigation item, in order to ease their use. Co-Authored-by: iGor milhit <igor@milhit.ch>
2024-10-30 17:04:47 +01:00
.header-navigation {
width: 100%;
justify-content: space-evenly;
}
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
}
}