mirror of
https://git.coop/cotech/website.git
synced 2025-12-24 23:17:32 +00:00
940b138b46
I think it's probably easier to start from a cleaner slate for this redesign, rather than try to incrementally refactor towards the new design. Some of the base styles are fine and I've retained some of the CSS variables. I've also kept the header as it probably will be useful to refactor rather than completely re-do this.
151 lines
3.1 KiB
CSS
151 lines
3.1 KiB
CSS
@font-face {
|
|
font-family: 'open_sansregular';
|
|
src: url("/assets/fonts/OpenSans-Regular-webfont.ttf");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'open_sansbold';
|
|
src: url("/assets/fonts/OpenSans-Bold-webfont.ttf");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'source_serif_regular';
|
|
src: url("/assets/fonts/SourceSerif4-Regular.ttf");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'source_serif_bold';
|
|
src: url("/assets/fonts/SourceSerif4-Bold.ttf");
|
|
font-weight: 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));
|
|
|
|
--cotech-white: white;
|
|
--cotech-black: #000000;
|
|
--cotech-light-grey: #646464;
|
|
}
|
|
|
|
p, li, a {
|
|
font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
|
color: var(--cotech-white);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: "source_serif_regular", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
|
|
color: var(--cotech-white);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--cotech-black);
|
|
}
|
|
|
|
img.greyscale {
|
|
filter: grayscale(100);
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
padding: var(--space-lg) var(--space-md);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.header a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.header_logo-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.header_menu-list {
|
|
font-family: 'open_sansbold';
|
|
list-style-type: none;
|
|
display: flex;
|
|
gap: var(--space-md);
|
|
font-size: 1rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.header_menu-list a {
|
|
font-family: 'open_sansbold';
|
|
}
|
|
|
|
.header_burger-btn {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: var(--space-xs);
|
|
color: var(--cotech-white);
|
|
}
|
|
|
|
.header_close-icon {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (width < 480px) {
|
|
.header {
|
|
position: relative;
|
|
}
|
|
|
|
.header_burger-btn {
|
|
display: block;
|
|
}
|
|
|
|
.header_menu-list {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: var(--cotech-black);
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--space-lg);
|
|
font-size: 1.5rem;
|
|
z-index: 1000;
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.header_menu-list.active {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.header_burger-btn.active .header_burger-icon {
|
|
display: none;
|
|
}
|
|
|
|
.header_burger-btn.active .header_close-icon {
|
|
display: block;
|
|
}
|
|
|
|
.header_burger-btn {
|
|
position: relative;
|
|
z-index: 1001;
|
|
}
|
|
}
|