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

56 lines
846 B
SCSS
Raw Normal View History

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
////////////////////
// //
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
// Texts //
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
// //
////////////////////
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
@use "@picocss/pico/scss/colors/index" as *;
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
.verse {
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
line-height: var(--line-height-verse);
@media (min-width: 768px) {
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
margin-left: 3rem;
}
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
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
p:not(:last-child) {
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
margin-bottom: var(--verse-p-bottom-space);
@media (min-width: 768px) {
margin-bottom: var(--verse-p-bottom-space-larger);
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
}
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
}
br {
margin-bottom: .5rem;
}
}
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
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
mark {
background-color: $purple-100;
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
}
text: style the new citation block - Styles the citation block. - Clarify some rules for figures, but this is not finished yet. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-11-29 13:27:02 +01:00
.citation {
border: none;
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
margin: initial;
width: initial;
text: style the new citation block - Styles the citation block. - Clarify some rules for figures, but this is not finished yet. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-11-29 13:27:02 +01:00
blockquote {
margin: 0;
margin-left: .5rem;
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
padding: 0 0 0 .5rem;
text: style the new citation block - Styles the citation block. - Clarify some rules for figures, but this is not finished yet. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-11-29 13:27:02 +01:00
p {
text-align: left;
margin: .4rem 0;
}
text: set font style to em nested in blockquote * Sets the em font style to normal when it's nested in a blockquote as the blockquote font style is already italic. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-11-29 21:58:21 +01:00
em {
font-style: normal;
}
text: style the new citation block - Styles the citation block. - Clarify some rules for figures, but this is not finished yet. Co-Authored-by: iGor milhit <igor@milhit.ch>
2021-11-29 13:27:02 +01:00
figcaption {
text-align: right;
margin-top: 1rem;
}
}
}