host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit general style

Browse source
This commit is contained in:
Paul Nicoué 2022-07-19 17:28:33 +02:00
parent e5f5b543c6
commit 35351bc709
3 changed files with 35 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

38
public/assets/build/main.css
View file

File diff suppressed because one or more lines are too long

27
public/assets/css/main.scss
View file

@ -12,7 +12,7 @@
body { body {
font-family: var(--text-font-family); font-family: var(--text-font-family);
font-size: var(--text-font-size); font-size: var(--text-font-size);
line-height: normal; line-height: var(--text-line-height);
color: var(--black); color: var(--black);
background-color: var(--white); background-color: var(--white);
} }
@ -20,17 +20,20 @@ body {
h1 { h1 {
font-family: var(--title-font-family); font-family: var(--title-font-family);
font-size: var(--h1-font-size); font-size: var(--h1-font-size);
line-height: var(--h1-line-height);
} }
h2 { h2 {
font-family: var(--text-font-family); font-family: var(--text-font-family);
font-size: var(--h2-font-size); font-size: var(--h2-font-size);
line-height: var(--h2-line-height);
margin: 0 0 4rem 0; margin: 0 0 4rem 0;
} }
h3 { h3 {
font-family: var(--text-font-family); font-family: var(--text-font-family);
font-size: var(--h3-font-size); font-size: var(--h3-font-size);
line-height: var(--h3-line-height);
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
} }
@ -84,46 +87,34 @@ body {
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
max-width: calc(15vw + var(--header-bar-horizontal-padding) * 2);
padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding); padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding);
overflow-y: auto; overflow-y: auto;
background-color: transparent; background-color: transparent;
transition: transition: background-color 400ms ease-in-out;
max-width 400ms ease-in-out,
background-color 400ms ease-in-out;
.header-bar__nav { .header-bar__nav {
.header-bar__nav-item { .header-bar__nav-item {
+ .header-bar__nav-item { + .header-bar__nav-item {
margin-top: 0.5rem; margin: 0.75rem 0 0 0;
} }
} }
a { a {
display: inline-block;
width: 15vw;
overflow-x: hidden;
color: var(--transparent-black); color: var(--transparent-black);
white-space: nowrap; transition: color 400ms ease-in-out;
text-overflow: ellipsis;
transition:
width 400ms ease-in-out,
color 400ms ease-in-out;
} }
} }
.header-bar__social { .header-bar__social {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 2rem; margin: 1rem 0 0 0;
a { a {
width: var(--icon-size); width: var(--icon-size);
height: var(--icon-size); height: var(--icon-size);
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -143,12 +134,10 @@ body {
&:hover { &:hover {
background-color: var(--transparent-white); background-color: var(--transparent-white);
max-width: 100vw;
.header-bar__nav { .header-bar__nav {
a { a {
/*width: 100%;*/
color: var(--black); color: var(--black);
} }
} }

15
public/assets/css/partials/variables.scss
View file

@ -6,28 +6,33 @@
// Fonts // Fonts
--text-font-family: 'Open Sans', Verdana, sans-serif; --text-font-family: Helvetica, sans-serif;
--title-font-family: 'Open Sans', Verdana, sans-serif; --title-font-family: Helvetica, sans-serif;
--regular-font-weight: 400; --regular-font-weight: 400;
--medium-font-weight: 500; --medium-font-weight: 500;
--semi-bold-font-weight: 600; --semi-bold-font-weight: 600;
--bold-font-weight: 700; --bold-font-weight: 700;
--text-font-size: 0.8rem; --text-font-size: 0.8rem;
--text-line-height: calc(var(--text-font-size) * 1.2);
--footnote-font-size: 0.6rem; --footnote-font-size: 0.6rem;
--footnote-line-height: calc(var(--footnote-font-size) * 1.2);
--h1-font-size: 1.6rem; --h1-font-size: 1.6rem;
--h1-line-height: calc(var(--h1-font-size) * 1.2);
--h2-font-size: 1.2rem; --h2-font-size: 1.2rem;
--h2-line-height: calc(var(--h2-font-size) * 1.2);
--h3-font-size: 1rem; --h3-font-size: 1rem;
--h3-line-height: calc(var(--h3-font-size) * 1.2);
// Dimensions // Dimensions
--icon-size: 2rem; --icon-size: 2rem;
--header-bar-vertical-padding: 2rem; --header-bar-vertical-padding: 1rem;
--header-bar-horizontal-padding: 1rem; --header-bar-horizontal-padding: 1rem;
// Colors // Colors
--black: #000; --black: #000;
--transparent-black: rgba(0, 0, 0, 0.6); --transparent-black: rgba(0, 0, 0, 0.4);
--white: #fff; --white: #fff;
--transparent-white: rgba(255, 255, 255, 0.9); --transparent-white: rgba(255, 255, 255, 0.9);
--feldgrau: #4B6259; --feldgrau: #4B6259;
@ -53,7 +58,5 @@ $desktop-media-query: 62rem;
// Dimensions // Dimensions
--icon-size: 2.5rem; --icon-size: 2.5rem;
--header-bar-vertical-padding: 4rem;
--header-bar-horizontal-padding: 2rem;
} }
} }