Modernize a bit

Drop bootstrap
Remove fabfile in favor of bin/deploy
This commit is contained in:
Nikolai R Kristiansen
2022-02-22 00:26:48 +01:00
parent e204229519
commit 4e6924d055
14 changed files with 629 additions and 1296 deletions

View File

@@ -1,39 +1,76 @@
@import "../node_modules/bootstrap/scss/bootstrap.scss";
:root {
--container-width: 1140px;
--primary-color: #007bff;
--primary-color-light: hsl(211, 100%, 60%);
}
body {
font-family: monospace;
text-align: center;
@include media-breakpoint-up(sm) {
font-size: 110%;
margin: 1rem;
@media screen and (min-width: 540px) {
text-align: left;
}
}
.page-header {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
h1, h2, h3, h4, h5 {
margin-bottom: 0.5em;
}
ul {
margin: 0;
}
li {
line-height: 1.5;
}
section {
margin-bottom: 2rem;
}
a {
&:link {
color: var(--primary-color);
text-decoration: none;
}
&:hover {
text-decoration: underline;
}
&:active,
&:focus {
color: var(--primary-color-light);
}
&:visited {
color: var(--primary-color);
}
}
.brand {
line-height: 1;
font-size: 1.2;
img {
position: relative;
top: -4px;
top: 8px;
}
}
section {
margin-bottom: 1.5rem;
}
.cta {
display: block;
@include media-breakpoint-up(sm) {
display:none;
@media screen and (min-width: 540px) {
display: none;
}
}
.edb-brick {
height: 40px;
width: auto;
height: 40px;
width: auto;
}
.contact-info {
@@ -47,37 +84,28 @@ section {
display: flex;
flex-wrap: wrap;
padding: 0;
justify-content: space-evenly;
max-width: var(--container-width);
@include media-breakpoint-up(sm) {
justify-content: flex-start;
@media screen and (min-width: 540px) {
display: grid;
gap: 2rem;
grid-template-columns: repeat(2, 1fr);
}
}
.tool-item {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 0;
margin-bottom: 20px;
max-width: 196px;
img {
max-width: 92%;
@media screen and (min-width: 992px) {
grid-template-columns: repeat(3, 1fr);
}
@include media-breakpoint-up(sm) {
max-width: 230px;
}
> li {
align-items: center;
justify-content: center;
padding-bottom: 0;
margin-bottom: 20px;
@include media-breakpoint-up(lg) {
max-width: 310px;
img {
max-width: 100%;
}
}
@include media-breakpoint-up(xl) {
max-width: none;
}
}
.form-wrap {
@@ -85,25 +113,17 @@ section {
padding-bottom: 75%;
height: 0;
overflow: hidden;
iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
max-width: var(--container-width);
}
#contact_form {
#contact-form {
border: 0;
margin: 0;
}
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.love {
@@ -116,4 +136,5 @@ section {
text-align: center;
color: #666;
font-size: 12px;
max-width: var(--container-width);
}