rdrew
/
olivescraipe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of https://git.library.upei.ca/rdrew/olivescraipe

master
rdrew 4 days ago
parent
3d6af86c3b 70f6e240e3
commit
94846c8bf3
4 changed files with 121 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      css/base/base.css
  2. 131
      css/base/variables.css
  3. 4
      css/components/block.css
  4. 5
      css/components/header-site-branding.css

4
css/base/base.css
Unescape View File

@ -27,8 +27,8 @@ html {
body {
margin: 0;
color: var(--color-text-neutral-medium);
/*background-color: var(--color--gray-100);*/
background-color: #ece8e3;
background-color: var(--color--gray-100);
/* background-color: #ece8e3; */
/*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");*/
/*background-position: top left; [> LTR <]*/
}

131
css/base/variables.css
Unescape View File

@ -47,8 +47,13 @@
--grid-col-count: 6;
--grid-gap: var(--sp);
--grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
--grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
--grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
--grid-full-width: calc(
100vw - var(--sp2) - var(--scrollbar-width)
); /* Width of the entire grid. */
--grid-col-width: calc(
(var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) /
var(--grid-col-count)
);
/* Layout helpers */
--sp0-25: calc(0.25 * var(--sp));
@ -76,16 +81,56 @@
*/
--color--gray-hue: 201;
--color--gray-saturation: 15%;
--color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */
--color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%);
--color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */
--color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */
--color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */
--color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */
--color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */
--color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */
--color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */
--color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%);
--color--gray-5: hsl(
var(--color--gray-hue),
var(--color--gray-saturation),
5%
); /* Black */
--color--gray-10: hsl(
var(--color--gray-hue),
var(--color--gray-saturation),
11%
);
--color--gray-20: hsl(
var(--color--gray-hue),
var(--color--gray-saturation),
20%
); /* Black 2 */
--color--gray-45: hsl(
var(--color--gray-hue),
var(--color--gray-saturation),
44%
); /* Gray Dark */
--color--gray-60: hsl(
var(--color--gray-hue),
var(--color--gray-saturation),
57%
); /* Gray medium */
--color--gray-65: hsl(
var(--color--gray-hue),
var(--color--gray-saturation),
63%
); /* Black 4 */
--color--gray-70: hsl(
var(--color--gray-hue),
var(--color--gray-saturation),
72%
); /* Gray medium 2 */
--color--gray-90: hsl(
var(--color--gray-hue),
var(--color--gray-saturation),
88%
); /* Gray light */
--color--gray-95: hsl(
var(--color--gray-hue),
var(--color--gray-saturation),
93%
); /* Gray light 1 */
--color--gray-100: hsl(
var(--color--gray-hue),
var(--color--gray-saturation),
97%
);
/**
* Primary colors.
@ -95,11 +140,55 @@
--color--primary-hue: 202;
--color--primary-saturation: 79%;
--color--primary-lightness: 50;
--color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));
--color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */
--color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */
--color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */
--color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness))))));
--color--primary-30: hsl(
var(--color--primary-hue),
var(--color--primary-saturation),
calc(
1% *
(
var(--color--primary-lightness) -
(0.36 * var(--color--primary-lightness))
)
)
);
--color--primary-40: hsl(
var(--color--primary-hue),
var(--color--primary-saturation),
calc(
1% *
(
var(--color--primary-lightness) -
(0.24 * var(--color--primary-lightness))
)
)
); /* Blue dark */
--color--primary-50: hsl(
var(--color--primary-hue),
var(--color--primary-saturation),
calc(1% * var(--color--primary-lightness))
); /* Blue medium */
--color--primary-60: hsl(
var(--color--primary-hue),
var(--color--primary-saturation),
calc(
1% *
(
var(--color--primary-lightness) +
(0.24 * (100 - var(--color--primary-lightness)))
)
)
); /* Blue bright */
--color--primary-80: hsl(
var(--color--primary-hue),
var(--color--primary-saturation),
calc(
1% *
(
var(--color--primary-lightness) +
(0.85 * (100 - var(--color--primary-lightness)))
)
)
);
/**
* Variables specific to text.
@ -119,6 +208,10 @@
--color--red: #e33f1e; /* Red */
--color--gold: #fdca40; /* Gold */
--color--green: #3fa21c;
/* ============ */
--color--blue: #115ca0;
--color--red: #e21c21;
--color--yellow: #ffd703;
/* Header */
--header-height-wide-when-fixed: calc(6 * var(--sp));
@ -159,7 +252,9 @@
@media ((((min-width: 60rem)))) {
:root {
--grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
--grid-full-width: calc(
100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)
);
}
}

4
css/components/block.css
Unescape View File

@ -22,13 +22,11 @@
}
.site-footer .block__title {
color: var(--color--gray-65);
color: var(--color--white);
}
.region--sidebar .block {
/*background: #f6f8f8;*/
background: #ece8e3;
padding: 1rem;
border-radius: 5px;
}

5
css/components/header-site-branding.css
Unescape View File

@ -29,6 +29,10 @@
var(--color--primary-40) 78.66%
);
}
.site-header__initial,
.site-branding {
border-bottom: 6px solid var(--color--yellow);
}
@media (min-width: 31.25rem) {
.site-branding {
@ -139,6 +143,7 @@
}
.site-branding__slogan {
color: #d0bca4;
color: var(--color--yellow);
font-size: 1.125rem;
/*font-size: 1.5rem;*/
}

Write Preview
Loading…
Cancel
Save