femmefaytale/cotech-website
0
0
Fork 0
forked from autonomic-cooperative/cotech-website
Code Issues Pull Requests Projects Releases Wiki Activity

Extract spacing variables

Browse Source 
A scale taken from https://medium.com/codyhouse/create-your-design-system-part-4-spacing-895c9213e2b9
This commit is contained in:
Chris Lowis
2025-06-20 14:51:49 +01:00
parent b4faded4b3
commit 78f236203c
1 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
assets/css/app.css
View File

@ -12,6 +12,17 @@
font-style: normal; font-style: normal;
} }
:root {
--space-unit: 1em;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
--space-xxl: calc(5.25 * var(--space-unit));
}
p, li, a { p, li, a {
font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
color: #1e2637; color: #1e2637;
@ -23,7 +34,7 @@ h1, h2, h3, h4, h5, h6 {
.header { .header {
display: flex; display: flex;
padding: 1.4rem; padding: var(--space-md);
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
@ -40,27 +51,27 @@ h1, h2, h3, h4, h5, h6 {
.header_logo-link { .header_logo-link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.7rem; gap: var(--space-sm);
} }
.header_menu-list { .header_menu-list {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
gap: 0.7rem; gap: var(--space-sm);
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.hero { .hero {
width: 100%; width: 100%;
padding: 8rem; padding: var(--space-xxl);
background-image: url(/assets/img/banner-collage.jpg); background-image: url(/assets/img/banner-collage.jpg);
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--space-md);
align-items: center; align-items: center;
text-align: center; text-align: center;
@ -80,7 +91,7 @@ h1, h2, h3, h4, h5, h6 {
.hero_button { .hero_button {
cursor: pointer; cursor: pointer;
padding: 1rem; padding: var(--space-sm);
border: 1px solid white; border: 1px solid white;
border-radius: 4px; border-radius: 4px;
} }