styled in sass mode with npm

This commit is contained in:
jorge-vitrubio 2024-01-10 17:26:45 +01:00
parent 070d940fa5
commit e96aa46d8e
16 changed files with 6637 additions and 3277 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

6786
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -17,21 +17,21 @@ $color__green: #69ed82;
$color__red: #ff686e;
$color__background-body: $color__white;
$color__background-screen: $color__white;
$color__background-body: none;
$color__background-screen: none;
$color__background-hr: $color__black;
$color__background-button: $color__white;
$color__background-button: none;
$color__background-pre: $color__grey-lighter;
$color__background-ins: $color__white-dark;
$color__background-input: $color__grey-lighter;
$color__text-screen: $color__black-grey;
$color__text-input: $color__black-light;
$color__text-screen: $color__black;
$color__text-input: $color__black-grey;
$color__text-input-focus: $color__black;
$color__link: $color__black-light;
$color__link-visited: #303030;
$color__link-hover: #707070;
$color__text-main: #404040;
$color__link: $color__black;
$color__link-visited: $color__link;
$color__link-hover: $color__black-light;
$color__text-main: $color__black;
$color__border-button: #000;
$color__border-button-hover: #111;

View File

@ -1,11 +1,12 @@
// stylelint-disable value-keyword-case
$font__regular: 'din-regular',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$font__light: 'din-light',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$font__medium: 'din-medium',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$font__bold: 'din-bold',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$font__black: 'din-black',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$font__main: 'Neue Haas Grotesk Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$font__regular: $font__main;
$font__light: $font__main;
$font__medium: $font__main;
$font__bold: $font__main;
$font__black: $font__main;
$font__main: $font__regular;
$font__header: $font__main;
// stylelint-enable value-keyword-case
$font__code: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace, mono;
$font__pre: "Courier 10 Pitch", courier, monospace;

View File

@ -3,70 +3,109 @@ Your custom style
Add your custom styles in this file so it is easier to update the theme.
*/
@font-face {
font-family: 'din-regular';
src: url('../fonts/DIN-Regular.eot');
src: url('../fonts/DIN-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/DIN-Regular.woff2') format('woff2'),
url('../fonts/DIN-Regular.woff') format('woff'),
url('../fonts/DIN-Regular.ttf') format('truetype'),
url('../fonts/DIN-Regular.svg#fonts/DIN-Regular') format('svg');
font-weight: 100;
font-family: 'Neue Haas Grotesk Pro';
src: url('assets/fonts/NeueHaasGroteskPro-45Light.eot');
src: url('assets/fonts/NeueHaasGroteskPro-45Light.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/NeueHaasGroteskPro-45Light.woff2') format('woff2'),
url('assets/fonts/NeueHaasGroteskPro-45Light.woff') format('woff'),
url('assets/fonts/NeueHaasGroteskPro-45Light.ttf') format('truetype'),
url('assets/fonts/NeueHaasGroteskPro-45Light.svg#NeueHaasGroteskPro-45Light') format('svg');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'din-medium';
src: url('../fonts/DIN-Medium.eot');
src: url('../fonts/DIN-Medium.eot?#iefix') format('embedded-opentype'),
url('../fonts/DIN-Medium.woff2') format('woff2'),
url('../fonts/DIN-Medium.woff') format('woff'),
url('../fonts/DIN-Medium.ttf') format('truetype'),
url('../fonts/DIN-Medium.svg#DIN-Medium') format('svg');
font-weight: 100;
font-family: 'Neue Haas Grotesk Pro';
src: url('assets/fonts/NeueHaasGroteskPro-55Roman.eot');
src: url('assets/fonts/NeueHaasGroteskPro-55Roman.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/NeueHaasGroteskPro-55Roman.woff2') format('woff2'),
url('assets/fonts/NeueHaasGroteskPro-55Roman.woff') format('woff'),
url('assets/fonts/NeueHaasGroteskPro-55Roman.ttf') format('truetype'),
url('assets/fonts/NeueHaasGroteskPro-55Roman.svg#NeueHaasGroteskPro-55Roman') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'din-bold';
src: url('../fonts/DIN-Bold.eot');
src: url('../fonts/DIN-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/DIN-Bold.woff2') format('woff2'),
url('../fonts/DIN-Bold.woff') format('woff'),
url('../fonts/DIN-Bold.ttf') format('truetype'),
url('../fonts/DIN-Bold.svg#DIN-Bold') format('svg');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'din-light';
src: url('../fonts/DIN-Light.eot');
src: url('../fonts/DIN-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/DIN-Light.woff2') format('woff2'),
url('../fonts/DIN-Light.woff') format('woff'),
url('../fonts/DIN-Light.ttf') format('truetype'),
url('../fonts/DIN-Light.svg#DIN-Light') format('svg');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'din-black';
src: url('../fonts/DIN-Black.eot');
src: url('../fonts/DIN-Black.eot?#iefix') format('embedded-opentype'),
url('../fonts/DIN-Black.woff2') format('woff2'),
url('../fonts/DIN-Black.woff') format('woff'),
url('../fonts/DIN-Black.ttf') format('truetype'),
url('../fonts/DIN-Black.svg#DIN-Black') format('svg');
font-weight: 900;
font-family: 'Neue Haas Grotesk Pro';
src: url('assets/fonts/NeueHaasGroteskPro-75Bold.eot');
src: url('assets/fonts/NeueHaasGroteskPro-75Bold.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/NeueHaasGroteskPro-75Bold.woff2') format('woff2'),
url('assets/fonts/NeueHaasGroteskPro-75Bold.woff') format('woff'),
url('assets/fonts/NeueHaasGroteskPro-75Bold.ttf') format('truetype'),
url('assets/fonts/NeueHaasGroteskPro-75Bold.svg#NeueHaasGroteskPro-75Bold') format('svg');
font-weight: bold;
font-style: normal;
font-display: swap;
}
//@font-face {
// font-family: 'din-regular';
// src: url('../fonts/DIN-Regular.eot');
// src: url('../fonts/DIN-Regular.eot?#iefix') format('embedded-opentype'),
// url('../fonts/DIN-Regular.woff2') format('woff2'),
// url('../fonts/DIN-Regular.woff') format('woff'),
// url('../fonts/DIN-Regular.ttf') format('truetype'),
// url('../fonts/DIN-Regular.svg#fonts/DIN-Regular') format('svg');
// font-weight: 100;
// font-style: normal;
// font-display: swap;
//}
//
//@font-face {
// font-family: 'din-medium';
// src: url('../fonts/DIN-Medium.eot');
// src: url('../fonts/DIN-Medium.eot?#iefix') format('embedded-opentype'),
// url('../fonts/DIN-Medium.woff2') format('woff2'),
// url('../fonts/DIN-Medium.woff') format('woff'),
// url('../fonts/DIN-Medium.ttf') format('truetype'),
// url('../fonts/DIN-Medium.svg#DIN-Medium') format('svg');
// font-weight: 100;
// font-style: normal;
// font-display: swap;
//}
//
//@font-face {
// font-family: 'din-bold';
// src: url('../fonts/DIN-Bold.eot');
// src: url('../fonts/DIN-Bold.eot?#iefix') format('embedded-opentype'),
// url('../fonts/DIN-Bold.woff2') format('woff2'),
// url('../fonts/DIN-Bold.woff') format('woff'),
// url('../fonts/DIN-Bold.ttf') format('truetype'),
// url('../fonts/DIN-Bold.svg#DIN-Bold') format('svg');
// font-weight: 100;
// font-style: normal;
// font-display: swap;
//}
//
//@font-face {
// font-family: 'din-light';
// src: url('../fonts/DIN-Light.eot');
// src: url('../fonts/DIN-Light.eot?#iefix') format('embedded-opentype'),
// url('../fonts/DIN-Light.woff2') format('woff2'),
// url('../fonts/DIN-Light.woff') format('woff'),
// url('../fonts/DIN-Light.ttf') format('truetype'),
// url('../fonts/DIN-Light.svg#DIN-Light') format('svg');
// font-weight: 100;
// font-style: normal;
// font-display: swap;
//}
//
//@font-face {
// font-family: 'din-black';
// src: url('../fonts/DIN-Black.eot');
// src: url('../fonts/DIN-Black.eot?#iefix') format('embedded-opentype'),
// url('../fonts/DIN-Black.woff2') format('woff2'),
// url('../fonts/DIN-Black.woff') format('woff'),
// url('../fonts/DIN-Black.ttf') format('truetype'),
// url('../fonts/DIN-Black.svg#DIN-Black') format('svg');
// font-weight: 900;
// font-style: normal;
// font-display: swap;
//}
//
//

View File

@ -1,3 +1,8 @@
body {
background: $color__background-body; // Fallback for when there is no custom background color defined.
background-image: url('./assets/img/background-colors-02.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

View File

@ -11,7 +11,7 @@ input[type="submit"],
color: $color__text-screen;
line-height: 1;
padding: 0.6em 1em 0.4em;
text-transform: uppercase;
//text-transform: uppercase;
&:hover {
border-color: $color__border-button-hover;

View File

@ -39,7 +39,7 @@ dd {
background-color: $color__black;
font-family: $font__black;
font-size: $font__size-body*0.7;
text-transform: uppercase;
//text-transform: uppercase;
}
}
.item-os_fund_target li {

View File

@ -3,70 +3,109 @@ Your custom style
Add your custom styles in this file so it is easier to update the theme.
*/
@font-face {
font-family: 'din-regular';
src: url('assets/fonts/DIN-Regular.eot');
src: url('assets/fonts/DIN-Regular.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/DIN-Regular.woff2') format('woff2'),
url('assets/fonts/DIN-Regular.woff') format('woff'),
url('assets/fonts/DIN-Regular.ttf') format('truetype'),
url('assets/fonts/DIN-Regular.svg#fonts/DIN-Regular') format('svg');
font-weight: 100;
font-family: 'Neue Haas Grotesk Pro';
src: url('assets/fonts/NeueHaasGroteskPro-45Light.eot');
src: url('assets/fonts/NeueHaasGroteskPro-45Light.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/NeueHaasGroteskPro-45Light.woff2') format('woff2'),
url('assets/fonts/NeueHaasGroteskPro-45Light.woff') format('woff'),
url('assets/fonts/NeueHaasGroteskPro-45Light.ttf') format('truetype'),
url('assets/fonts/NeueHaasGroteskPro-45Light.svg#NeueHaasGroteskPro-45Light') format('svg');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'din-medium';
src: url('assets/fonts/DIN-Medium.eot');
src: url('assets/fonts/DIN-Medium.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/DIN-Medium.woff2') format('woff2'),
url('assets/fonts/DIN-Medium.woff') format('woff'),
url('assets/fonts/DIN-Medium.ttf') format('truetype'),
url('assets/fonts/DIN-Medium.svg#DIN-Medium') format('svg');
font-weight: 100;
font-family: 'Neue Haas Grotesk Pro';
src: url('assets/fonts/NeueHaasGroteskPro-55Roman.eot');
src: url('assets/fonts/NeueHaasGroteskPro-55Roman.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/NeueHaasGroteskPro-55Roman.woff2') format('woff2'),
url('assets/fonts/NeueHaasGroteskPro-55Roman.woff') format('woff'),
url('assets/fonts/NeueHaasGroteskPro-55Roman.ttf') format('truetype'),
url('assets/fonts/NeueHaasGroteskPro-55Roman.svg#NeueHaasGroteskPro-55Roman') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'din-bold';
src: url('assets/fonts/DIN-Bold.eot');
src: url('assets/fonts/DIN-Bold.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/DIN-Bold.woff2') format('woff2'),
url('assets/fonts/DIN-Bold.woff') format('woff'),
url('assets/fonts/DIN-Bold.ttf') format('truetype'),
url('assets/fonts/DIN-Bold.svg#DIN-Bold') format('svg');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'din-light';
src: url('assets/fonts/DIN-Light.eot');
src: url('assets/fonts/DIN-Light.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/DIN-Light.woff2') format('woff2'),
url('assets/fonts/DIN-Light.woff') format('woff'),
url('assets/fonts/DIN-Light.ttf') format('truetype'),
url('assets/fonts/DIN-Light.svg#DIN-Light') format('svg');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'din-black';
src: url('assets/fonts/DIN-Black.eot');
src: url('assets/fonts/DIN-Black.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/DIN-Black.woff2') format('woff2'),
url('assets/fonts/DIN-Black.woff') format('woff'),
url('assets/fonts/DIN-Black.ttf') format('truetype'),
url('assets/fonts/DIN-Black.svg#DIN-Black') format('svg');
font-weight: 900;
font-family: 'Neue Haas Grotesk Pro';
src: url('assets/fonts/NeueHaasGroteskPro-75Bold.eot');
src: url('assets/fonts/NeueHaasGroteskPro-75Bold.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/NeueHaasGroteskPro-75Bold.woff2') format('woff2'),
url('assets/fonts/NeueHaasGroteskPro-75Bold.woff') format('woff'),
url('assets/fonts/NeueHaasGroteskPro-75Bold.ttf') format('truetype'),
url('assets/fonts/NeueHaasGroteskPro-75Bold.svg#NeueHaasGroteskPro-75Bold') format('svg');
font-weight: bold;
font-style: normal;
font-display: swap;
}
//@font-face {
// font-family: 'din-regular';
// src: url('assets/fonts/DIN-Regular.eot');
// src: url('assets/fonts/DIN-Regular.eot?#iefix') format('embedded-opentype'),
// url('assets/fonts/DIN-Regular.woff2') format('woff2'),
// url('assets/fonts/DIN-Regular.woff') format('woff'),
// url('assets/fonts/DIN-Regular.ttf') format('truetype'),
// url('assets/fonts/DIN-Regular.svg#fonts/DIN-Regular') format('svg');
// font-weight: 100;
// font-style: normal;
// font-display: swap;
//}
//
//@font-face {
// font-family: 'din-medium';
// src: url('assets/fonts/DIN-Medium.eot');
// src: url('assets/fonts/DIN-Medium.eot?#iefix') format('embedded-opentype'),
// url('assets/fonts/DIN-Medium.woff2') format('woff2'),
// url('assets/fonts/DIN-Medium.woff') format('woff'),
// url('assets/fonts/DIN-Medium.ttf') format('truetype'),
// url('assets/fonts/DIN-Medium.svg#DIN-Medium') format('svg');
// font-weight: 100;
// font-style: normal;
// font-display: swap;
//}
//
//@font-face {
// font-family: 'din-bold';
// src: url('assets/fonts/DIN-Bold.eot');
// src: url('assets/fonts/DIN-Bold.eot?#iefix') format('embedded-opentype'),
// url('assets/fonts/DIN-Bold.woff2') format('woff2'),
// url('assets/fonts/DIN-Bold.woff') format('woff'),
// url('assets/fonts/DIN-Bold.ttf') format('truetype'),
// url('assets/fonts/DIN-Bold.svg#DIN-Bold') format('svg');
// font-weight: 100;
// font-style: normal;
// font-display: swap;
//}
//
//@font-face {
// font-family: 'din-light';
// src: url('assets/fonts/DIN-Light.eot');
// src: url('assets/fonts/DIN-Light.eot?#iefix') format('embedded-opentype'),
// url('assets/fonts/DIN-Light.woff2') format('woff2'),
// url('assets/fonts/DIN-Light.woff') format('woff'),
// url('assets/fonts/DIN-Light.ttf') format('truetype'),
// url('assets/fonts/DIN-Light.svg#DIN-Light') format('svg');
// font-weight: 100;
// font-style: normal;
// font-display: swap;
//}
//
//@font-face {
// font-family: 'din-black';
// src: url('assets/fonts/DIN-Black.eot');
// src: url('assets/fonts/DIN-Black.eot?#iefix') format('embedded-opentype'),
// url('assets/fonts/DIN-Black.woff2') format('woff2'),
// url('assets/fonts/DIN-Black.woff') format('woff'),
// url('assets/fonts/DIN-Black.ttf') format('truetype'),
// url('assets/fonts/DIN-Black.svg#DIN-Black') format('svg');
// font-weight: 900;
// font-style: normal;
// font-display: swap;
//}

View File

@ -3,33 +3,31 @@
h2,
h3,
h4,
h5 {
text-transform: uppercase;
h5,
h6 {
font-family: $font__header;
clear: both;
line-height: $font__line-height-header;
a {
text-decoration: none;
}
}
h1 {
font-family: $font__light;
font-size: $font__size-body*1.8;
}
h2 {
font-family: $font__light;
font-size: $font__size-body*1.5;
}
h3 {
font-family: $font__black;
font-size: $font__size-body*1.3;
}
h4 {
font-family: $font__bold;
font-size: $font__size-body*1.2;
}
h5 {
font-family: $font__medium;
font-size: $font__size-body*1.1;
}
h6 {
font-family: $font__light;
font-size: $font__size-body*1.1;
}
.site-main {

View File

@ -21,6 +21,7 @@
ul {
background-color: $color__white;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
flex-direction: column;
float: left;
position: absolute;
top: 100%;
@ -36,8 +37,9 @@
&:hover > ul,
&.focus > ul {
display: block;
left: auto;
//display: block;
left: 30%;
top: 2.5rem;
}
}
@ -62,6 +64,7 @@
li {
position: relative;
padding: 1rem;
&:hover > a,
&.focus > a {
@ -105,7 +108,7 @@
}
}
a {
text-transform: uppercase;
// text-transform: uppercase;
}
}
@ -120,7 +123,7 @@
//margin: -3em 0 0.5em;
width: 0.3em;
height: 0.3em;
border: 1px solid $color__grey-light;
border: 1px solid $color__black;
border-top: none;
border-left: none;
-moz-transform: rotate(45deg);
@ -160,8 +163,8 @@
width: 1.8em;
height: 1.4em;
margin-right: 0.3em;
border-top: 0.3em solid $color__black;
border-bottom: 0.3em solid $color__black;
//border-top: 0.3em solid $color__black;
//border-bottom: 0.3em solid $color__black;
}
.toogle-show::before {
content: "";
@ -169,7 +172,7 @@
top: 0.3em;
left: 0;
width: 100%;
border-top: 0.3em solid $color__black;
//border-top: 0.3em solid $color__black;
}
.toogle-hide {
display: flex;
@ -235,15 +238,15 @@
a[href^="http://xarxaprod.cat"]::after,
a[href^="https://xarxaprod.cat"]::after,
.current-menu-item a::after {
display: inline-block;
content: "";
position: absolute;
left: 5%;
min-height: 2px;
height: 100%;
width: 90%;
margin-top: 2.3em;
border-bottom: 0.3rem solid $color__black;
//display: inline-block;
//content: "";
//position: absolute;
//left: 5%;
//min-height: 2px;
//height: 100%;
//width: 90%;
//margin-top: 2.3em;
//border-bottom: 0.3rem solid $color__black;
}
}
.secondary-navigation {

View File

@ -29,8 +29,8 @@
z-index: 900;
top: 0;
margin-bottom: 2rem;
background-color: $color__white;
box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.0);
//background-color: $color__white;
//box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.0);
.main {
display: flex;
flex-flow: row;
@ -87,7 +87,7 @@
flex-flow: column;
}
.secondary {
border-top: 1px solid $color__grey-lighter;
//border-top: 1px solid $color__grey-lighter;
}
}
.site-main {
@ -100,7 +100,7 @@
}
&.single {
.site-main {
width: 45rem;
//width: 45rem;
margin: 0 auto;
}
}
@ -122,7 +122,7 @@
}
.site-header {
.main {
width: 80em;
//width: 80em;
margin: auto;
flex-flow: row;
}

499
style.css

File diff suppressed because it is too large Load Diff

1716
style.css.bkp Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long