atuleu/flanders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Makes the navbar and layout clicks

Browse Source
This commit is contained in:
Alexandre Tuleu
2023-08-14 21:38:34 +02:00
parent 3cc52e37b2
commit 28e118c5ec
14 changed files with 270 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/app.scss
View File

@@ -12,21 +12,21 @@ body {
background-position: center;
color: var(--text);
transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
}
a {
color: var(--link);
&:hover {
color: var(--link-hover);
}
a {
color: var(--link);
&:hover {
color: var(--link-hover);
}
}
.title {
color: var(--text-title);
}
.title {
color: var(--text-title);
}
.subtitle {
color: var(--text-subtitle);
}
.subtitle {
color: var(--text-subtitle);
}
h1 {
@@ -37,69 +37,50 @@ h2 {
font-size: 1.7rem;
margin-top: 2rem;
margin-bottom: 1rem;
.fas,
.fab,
.far {
margin-right: 10px;
}
span {
font-weight: bold;
color: var(--highlight-secondary);
}
}
header {
color: var(--text-header);
.dashboard-title {
padding-left: 16px;
}
.first-line {
background-color: var(--highlight-primary);
.container {
padding-top: 24px;
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 16px;
}
min-height: 100px;
background-color: var(--highlight-primary);
min-height: 104px;
h1 {
margin-top: -12px;
font-size: 2rem;
}
.headline {
font-size: 0.9rem;
height: min-content;
}
.container {
min-height: 80px;
padding: 10px 0;
}
.logo {
i {
vertical-align: top;
padding: 8px 15px;
font-size: 48px;
width: 48px;
height: 48px;
}
.dashboard-title {
display: flex;
flex-flow: column wrap;
justify-content: space-between;
height: 48px;
h2 {
font-size: 0.9em;
line-height: 1em;
}
img {
max-height: 70px;
max-width: 70px;
h1 {
font-size: 2em;
line-height: 1em;
}
}
}
.navbar {
nav.navbar {
background-color: var(--highlight-secondary);
a {
color: var(--text-header);
padding: 8px 12px;
&:hover,
&:focus {
@@ -108,12 +89,62 @@ header {
}
}
.navbar-item {
.link-label {
margin-left: 8px;
}
padding: 8px 16px;
}
.navbar-item:first-child {
margin-left: -16px;
}
.navbar-item input {
width: 160px;
transition: width cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
}
.navbar-item input:focus {
width: 240px;
}
.navbar-menu {
background-color: inherit;
}
}
}
.navbar-end {
text-align: right;
main {
.layout-column {
display: grid;
grid-template-columns: var(--layout-template);
gap: 32px;
}
.layout-row {
display: flex;
flex-flow: column nowrap;
gap: 32px;
}
.service-group {
background: lime;
}
.service-group.layout-column {
display: flex;
flex-flow: column nowrap;
gap: 16px;
}
.service-group.layout-row {
display: grid;
grid-template-columns: var(--layout-template);
gap: 16px;
}
.service-card {
background: orange;
}
}