Skip to content

Commit

Permalink
Add styles less
Browse files Browse the repository at this point in the history
  • Loading branch information
anst-foto committed Oct 14, 2022
1 parent 92a42c3 commit 1871790
Show file tree
Hide file tree
Showing 9 changed files with 149 additions and 3 deletions.
26 changes: 26 additions & 0 deletions .idea/watcherTasks.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Pug demo</title><link rel="stylesheet" href="node_modules/normalize.css/normalize.css"><link rel="stylesheet" href="style.css"></head><body><header><h1>Pug demo</h1></header><hr><main><section class="card online"><header class="card-header"><h4>1</h4></header><div class="card-body"><p>Users User 1</p></div><footer class="card-footer"><p>user1@users.u</p></footer></section><section class="card offline"><header class="card-header"><h4>2</h4></header><div class="card-body"><p>Users User 2</p></div><footer class="card-footer"><p>user2@users.u</p></footer></section><section class="card online"><header class="card-header"><h4>3</h4></header><div class="card-body"><p>Users User 3</p></div><footer class="card-footer"><p>user3@users.u</p></footer></section><section class="card online"><header class="card-header"><h4>4</h4></header><div class="card-body"><p>Users User 4</p></div><footer class="card-footer"><p>user4@users.u</p></footer></section></main></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Pug demo</title><link rel="stylesheet" href="node_modules/normalize.css/normalize.css"><link rel="stylesheet" href="style.css"></head><body><header><h1>Pug demo</h1></header><hr><main><section class="card online"><header class="card-header"><h4>1</h4></header><div class="card-body"><p>Users User 1</p></div><footer class="card-footer"><a href="mailto:user1@users.u">user1@users.u</a></footer></section><section class="card offline"><header class="card-header"><h4>2</h4></header><div class="card-body"><p>Users User 2</p></div><footer class="card-footer"><a href="mailto:user2@users.u">user2@users.u</a></footer></section><section class="card online"><header class="card-header"><h4>3</h4></header><div class="card-body"><p>Users User 3</p></div><footer class="card-footer"><a href="mailto:user3@users.u">user3@users.u</a></footer></section><section class="card online"><header class="card-header"><h4>4</h4></header><div class="card-body"><p>Users User 4</p></div><footer class="card-footer"><a href="mailto:user4@users.u">user4@users.u</a></footer></section></main></body></html>
2 changes: 1 addition & 1 deletion index.pug
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ mixin card(user)
div.card-body
p= `${user.last_name} ${user.first_name}`
footer.card-footer
p= user.email
a(href=`mailto:${user.email}`)= user.email

doctype html
html(lang="en")
Expand Down
50 changes: 49 additions & 1 deletion style.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions style.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

55 changes: 55 additions & 0 deletions style.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
@import "variables";

body {
padding: 2rem;
}

h1 {
margin: 0;
text-align: center;
color: @color-header;
}

.online {
background-color: @color-online;
}
.offline {
background-color: @color-offline;
}

main {
.create_flex(row);
flex-wrap: wrap;
justify-content: space-around;
}

.card {
border: @color-card_border solid 1px;
.padding_margin(0.5rem);
flex: 1 1 auto;

.create_flex(column);

&:hover {
box-shadow: gray 5px 5px 0 0;
}

&-header {
text-align: right;
color: darkblue;
font-size: 1.25rem;

& > h4 {
margin: 0.25rem 0;
}
}
&-body {
text-align: justify;
font-size: 0.75rem;
}
&-footer {
text-align: right;
font-size: 0.5rem;
font-style: italic;
}
}
Empty file added variables.css
Empty file.
Empty file added variables.css.map
Empty file.
16 changes: 16 additions & 0 deletions variables.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@color-header: red;
@color-card_border: darkblue;

@color-offline: rgba(255, 0, 0, 0.25);
@color-online: rgba(0, 255, 0, 0.25);

.padding_margin(@val) {
padding: @val;
margin: @val;
}

.create_flex(@direction)
{
display: flex;
flex-direction: @direction;
}

0 comments on commit 1871790

Please sign in to comment.