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

added vars

master
rdrew 8 months ago
parent
409856c018
commit
d85d6fbe2b
8 changed files with 325 additions and 123 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. 103
      css/base.css
  2. 11
      css/block.css
  3. 26
      css/components.css
  4. 88
      css/fonts.css
  5. 118
      css/header.css
  6. 23
      css/sidebar.css
  7. 78
      css/site-variables.css
  8. 1
      vre2024.libraries.yml

103
css/base.css
Unescape View File

@ -37,18 +37,18 @@ body {
body {
color: var(--color-text);
background-color: var(--body-bg-color);
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Open Sans',
'Helvetica Neue',
sans-serif;
font-family: var(--body-font);
/*system-ui,*/
/*-apple-system,*/
/*BlinkMacSystemFont,*/
/*'Segoe UI',*/
/*Roboto,*/
/*Oxygen,*/
/*Ubuntu,*/
/*Cantarell,*/
/*'Open Sans',*/
/*'Helvetica Neue',*/
/*sans-serif;*/
font-size: 1rem;
font-weight: 400;
min-height: 100vh;
@ -99,6 +99,7 @@ h3,
h4,
h5,
h6 {
font-family: var(--heading-font);
color: var(--color-heading);
font-weight: 700;
font-style: normal;
@ -295,27 +296,29 @@ select {
}
.button,
button,
[type='button'],
[type='reset'],
[type='submit'] {
[type="button"],
[type="reset"],
[type="submit"] {
position: relative;
cursor: pointer;
border: 0;
padding: 8px 10px;
line-height: 1.6;
-webkit-appearance: button;
background: var(--upei-green);
color: #fff;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 0;
}
button[disabled],
@ -340,19 +343,19 @@ input,
textarea {
max-width: 100%;
}
input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
padding: 10px;
}
input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
outline: 0;
}
@ -360,28 +363,28 @@ textarea {
width: 100%;
overflow: auto;
}
[type='checkbox'],
[type='radio'] {
[type="checkbox"],
[type="radio"] {
padding: 0;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type='search'] {
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
[type='search']::-webkit-search-decoration {
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
[type='file'] {
[type="file"] {
cursor: pointer;
}
fieldset {
@ -414,7 +417,7 @@ label[for] {
margin-bottom: 1rem;
}
.form-required:after {
content: '*';
content: "*";
display: inline-block;
padding-left: 4px;
color: red;
@ -439,11 +442,11 @@ label.option {
:-ms-input-placeholder {
color: var(--border);
}
.field--name-body input[type='text'],
.field--name-body input[type='email'],
.field--name-body input[type='url'],
.field--name-body input[type='password'],
.field--name-body input[type='search'],
.field--name-body input[type="text"],
.field--name-body input[type="email"],
.field--name-body input[type="url"],
.field--name-body input[type="password"],
.field--name-body input[type="search"],
.field--name-body textarea {
display: block;
margin-bottom: 0.8rem;
@ -489,8 +492,8 @@ ol {
margin: 0;
padding: 0 0 0.25rem 1rem;
}
[dir='rtl'] ul,
[dir='rtl'] ol {
[dir="rtl"] ul,
[dir="rtl"] ol {
padding: 0 1rem 0.25rem 0;
}
ol ol,
@ -498,8 +501,8 @@ ul ul {
margin: 0;
padding: 0 0 0.25rem 1rem;
}
[dir='rtl'] ol ol,
[dir='rtl'] ul ul {
[dir="rtl"] ol ol,
[dir="rtl"] ul ul {
padding: 0 1rem 0.25rem 0;
}
ul {
@ -509,8 +512,8 @@ li > ul,
li > ol {
margin-bottom: 0;
}
[dir='rtl'] ul,
[dir='rtl'] ol {
[dir="rtl"] ul,
[dir="rtl"] ol {
padding: 0 1rem 0.25rem 0;
}
li {

11
css/block.css
Unescape View File

@ -4,3 +4,14 @@
.block-content {
position: relative;
}
.block-title {
/*font-size: var(--sidebar-block-title-font-size);*/
/*font-family: var(--sidebar-block-title-font-family);*/
/*color: var(--sidebar-block-title-font-color);*/
}
.block-content {
/*font-size: var(--sidebar-block-font-size);*/
/*font-family: var(--sidebar-block-font-family);*/
/*color: var(--sidebar-block-font-color);*/
}

26
css/components.css
Unescape View File

@ -1,4 +1,3 @@
/* Admin Toolbar */
button.toolbar-item,
button.toolbar-icon {
@ -54,11 +53,11 @@ button.toolbar-icon {
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 0;
}
@ -80,6 +79,12 @@ ul.page-tabs {
}
.page-tabs li a {
font-family: var(--tabs-font);
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"wdth" 75;
background-color: var(--page-tab-bg-color);
color: var(--page-tab-text-color);
padding: 0.5rem 1rem;
@ -103,7 +108,8 @@ ul.page-tabs {
flex: 1 1 auto;
}
/* Entity reference */
.node-taxonomy-container, .node-links-container {
.node-taxonomy-container,
.node-links-container {
position: relative;
display: block;
width: 100%;
@ -207,11 +213,11 @@ ul.inline li a {
text-align: center;
padding: 4px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
}
.scrolltop:hover {
background: var(--secondary);

88
css/fonts.css
Unescape View File

@ -0,0 +1,88 @@
/*@format*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.roboto-condensed-normal {
font-family: 'Roboto Condensed', sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.roboto-condensed-thin {
font-family: 'Roboto Condensed', sans-serif;
font-optical-sizing: auto;
font-weight: 200;
font-style: normal;
}
.roboto-thin {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-style: normal;
}
.roboto-light {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-style: normal;
}
.roboto-regular {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-style: normal;
}
.roboto-medium {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-style: normal;
}
.roboto-bold {
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-style: normal;
}
.roboto-black {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-style: normal;
}
.roboto-thin-italic {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-style: italic;
}
.roboto-light-italic {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-style: italic;
}
.roboto-regular-italic {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-style: italic;
}
.roboto-medium-italic {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-style: italic;
}
.roboto-bold-italic {
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-style: italic;
}
.roboto-black-italic {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-style: italic;
}

118
css/header.css
Unescape View File

@ -7,7 +7,17 @@
position: relative;
width: 100%;
margin: 0;
padding: 0.5rem 0;
padding: 0.5rem 0;
}
.header-top,
.header-top a {
font-weight: 300;
font-variation-settings: "wdth" 75;
background: var(--header-top-bg-color);
color: var(--header-top-text-color);
font-size: .8rem;
}
.header {
background: var(--header-bg-color);
color: var(--header-text-color);
}
@ -18,16 +28,16 @@
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.region-header-top-left,
.region-header-top-right {
@ -63,11 +73,11 @@
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
}
/* Header -> Site branding */
@ -77,13 +87,15 @@
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
padding-right: 1rem;
}
.site-logo {
padding-right: 5px;
padding-right: var(--branding-separator-padding);
margin-right: var(--branding-separator-padding);
width: var(--logo-width);
border-right: var(--branding-separator);
}
.site-logo img {
display: block;
@ -94,18 +106,24 @@
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.site-name,
.site-slogan {
line-height: 1.1;
}
.site-slogan {
font-family: var(--site-slogan-font-family);
font-size: var(--site-slogan-font-size);
color: var(--site-slogan-font-color);
}
.site-name {
a {
font-family: var(--heading-font);
font-size: var(--site-name-font-size);
color: var(--site-name-font-color);
}
@ -118,8 +136,8 @@
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
}
.menu-wrap {
@ -135,8 +153,8 @@
box-shadow: none;
z-index: 25;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
@ -163,6 +181,7 @@
display: block;
color: #ffffff;
padding: 0.5rem 0;
font-variation-settings: "wdth" var(--header-menu-font-width);
}
.menu-wrap .menu > li a::after {
content: none;
@ -204,8 +223,8 @@
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: space-between;
width: 36px;
height: 28px;
@ -248,13 +267,13 @@
.active-menu .menu-wrap {
overflow-y: scroll;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
padding: 1rem;
box-shadow: 6px 0 1rem #111111;
box-shadow: 6px 0 1rem #111111;
}
.active-menu .menu {
display: block;
@ -263,24 +282,24 @@
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
}
@keyframes slideUp {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
}
@ -296,11 +315,11 @@
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
width: 34px;
height: 34px;
@ -310,6 +329,7 @@
font-size: 24px;
}
.search-box {
box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333);
position: fixed;
background-color: var(--light);
top: 0;
@ -318,18 +338,20 @@
width: 100%;
z-index: 50;
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
-o-transition: transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
transition:
transform 0.5s,
-webkit-transform 0.5s;
}
.search-box.open {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.search-box-content {
position: relative;
@ -350,11 +372,11 @@
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
color: var(--dark);
border: 3px solid var(--dark);
border-radius: 50%;
@ -403,8 +425,8 @@
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
/* Header -> Page Header-> breadcrumb */
.breadcrumb {

23
css/sidebar.css
Unescape View File

@ -11,8 +11,27 @@
gap: 2rem;
}
.sidebar .block {
background-color: var(--light);
background-color: var(--sidebar-block-background);
padding: 1rem;
border: var(--sidebar-block-border);
}
.sidebar .block-title {
background: var(--sidebar-block-title-background);
font-size: var(--sidebar-block-title-font-size);
font-family: var(--sidebar-block-title-font-family);
color: var(--sidebar-block-title-font-color);
}
.sidebar .block-content {
font-variation-settings: "wdth" 75;
font-size: var(--sidebar-block-font-size);
font-family: var(--sidebar-block-font-family);
color: var(--sidebar-block-font-color);
}
.sidebar .block a {
color: var(--sidebar-block-link-color);
}
.sidebar .block a:hover {
color: var(--sidebar-block-link-color-hover);
}
.sidebar ul,
.sidebar ol {
@ -25,7 +44,7 @@
}
.sidebar li {
padding: 6px 0;
border-bottom: 1px solid var(--border);
border-bottom: var(--sidebar-ul-separator-line);
}
.sidebar .block p:last-of-type {
margin: 0;

78
css/site-variables.css
Unescape View File

@ -4,6 +4,10 @@
/* Variables
---------------------------------------- */
:root {
/*
*colors
*/
--upei-red: #8c2004;
--upei-green: #5c8727;
--upei-yellow: #fbb040;
@ -11,35 +15,83 @@
--primary: #365ab5;
--primary: var(--upei-red);
--secondary: #d05700;
--dark: #232742;
--light: #ccc;
--dark: #333;
--light: #eee;
--border: #a8a6a6;
--color-text: #444444;
--color-heading: #111111;
--body-bg-color: #fff;
--color-heading: #333;
--font-family-serif: 'Noto Serif', sans-serif;
--font-family-sans-serif: 'Noto Sans', sans-serif;
/*
*body
*/
--body-bg-color: #fff;
--page-container-width: 1440px;
--body-font: var(--font-family-sans-serif);
--heading-font: var(--font-family-serif);
/*
*branding
*/
/*--header-bg-color: #333;*/
--header-top-bg-color: var(--dark);
--header-top-text-color: #fff;
--header-bg-color: none;
--header-text-color: var(--color-text);
--logo-width: 160px;
--site-name-font-family: var(--font-family-serif);
--site-name-font-size: 2em;
--site-name-font-color: var(--header-text-color);
--site-slogan-font-family: var(--font-family-sans-serif);
--site-slogan-font-size: inherit;
--site-slogan-font-color: var(--header-text-color);
--branding-separator: 2px solid #333;
--branding-separator-padding: .5rem;
--header-menu-font-width: 75 /*65-100*/;
/*
*tabs
*/
--tabs-font: var(--font-family-sans-serif);
--page-tab-bg-color: var(--light);
--page-tab-text-color: #333;
--page-tab-text-color-active: var(--primary);
--page-tab-border-color: var(--border);
/*
*search button
*/
--search-button-color: var(--upei-green);
--search-button-text-color: #fff;
/*
*headings
*/
--h1-size: 2.2rem;
--h2-size: 1.9rem;
--h3-size: 1.6rem;
--h4-size: 1.3rem;
--h5-size: 1.1rem;
--h6-size: 1.1rem;
/*
*block styles
*/
--sidebar-block-title-font-size: var(--h3-size);
--sidebar-block-title-font-family: var(--font-family-serif);
--sidebar-block-title-font-color: var(--color-text);
--sidebar-block-title-background: inherit;
--sidebar-block-background: var(--light);
--sidebar-block-font-size: inherit;
--sidebar-block-font-family: var(--font-family-sans-serif);
--sidebar-block-font-color: var(--color-text);
--sidebar-block-border: 1px solid var(--light);
--sidebar-block-link-color: var(--color-text);
--sidebar-block-link-color-hover: var(--primary);
--sidebar-ul-separator-line: 2px solid var(--primary);
--page-container-width: 1440px;
--header-bg-color: #333;
--header-text-color: #fff;
--logo-width: 100px;
--site-name-font-size: 2em;
--site-name-font-color: var(--header-text-color);
/*footer*/
/*
*footer
*/
--footer-bg-color: #ccc;
--footer-text-color: initial;
--footer-link-color: var(--upei-red);

1
vre2024.libraries.yml
Unescape View File

@ -2,6 +2,7 @@ global-styling:
version: VERSION
css:
base:
css/fonts.css: {}
css/site-variables.css: {}
css/base.css: {}
layout:

Write Preview
Loading…
Cancel
Save