Skip to content

Commit

Permalink
Style
Browse files Browse the repository at this point in the history
  • Loading branch information
@danon
danon committed Oct 21, 2024
1 parent 59057da commit 3604626
Show file tree
Hide file tree
Showing 5 changed files with 144 additions and 90 deletions.
2 changes: 1 addition & 1 deletion public/img/logo-dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/img/logo-light.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
227 changes: 141 additions & 86 deletions resources/sass/pages/_homepage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,64 @@
@import "../../feature/theme/theme";
@import "bootstrap/scss/mixins/breakpoints";

header nav.navbar {
.logo {
height: 30px;
}
}

body.lookAndFeelModern {
$primary-color-light: #00a538;
$primary-color-dark: #78de13;

.text-primary {
@include light {
color: $primary-color-light !important;
}
@include dark {
color: $primary-color-dark !important;
}
}

.img-thumbnail {
background: none;
border: none;
padding: 0;
border-radius: 4px;
overflow: hidden;
}

.is-online {
width: 13px;
height: 13px;
border: none;
@include light {
background-color: $primary-color-light;
}
@include dark {
background-color: $primary-color-dark;
}
}

header nav.navbar {
.logo {
width: 15px;
height: 20px;
}

.btn-register {
@include light {
background: $primary-color-light;
border-color: $primary-color-light;

}
@include dark {
background: $primary-color-dark;
border-color: $primary-color-dark;
}
}
}

@mixin size($size) {
@if ($size == 'intermediate') {
@include media-breakpoint-only(sm) {
Expand All @@ -29,126 +86,124 @@ body.lookAndFeelModern {
background: #0f0f0f;
}

.scope-homepage {
h2 {
font-size: 0.9em;
color: inherit;
}
h2 {
font-size: 0.9em;
color: inherit;
}

h4.heading {
font-size: 0.9em;
color: inherit;
@include theme { // this just overrides previous dark theme
border: none;
}
h4.heading {
font-size: 0.9em;
color: inherit;
@include theme { // this just overrides previous dark theme
border: none;
}

i {
display: none;
}
i {
display: none;
}
}

a {
@include light {
color: #005b12;
}
@include dark {
color: #bdd5c3;
}
a {
@include light {
color: #005b12;
}
@include dark {
color: #bdd5c3;
}
}

.nav-pills {
.nav-link {
transition: none;
}
.nav-pills {
.nav-link {
transition: none;
}

.nav-link[href] {
cursor: pointer;
}
.nav-link[href] {
cursor: pointer;
}

@include theme {
.nav-link {
color: #777777;
@include theme {
.nav-link {
color: #777777;

&.active {
color: black;
}
&.active {
color: black;
}
}
}

.nav-link.active {
@include light {
border-bottom-color: #00a538;
}
@include dark {
border-bottom-color: #78de13;
}
.nav-link.active {
@include light {
border-bottom-color: $primary-color-light;
}
@include dark {
border-bottom-color: $primary-color-dark;
}
}
}

.microblog {
.media > .media-body {
.media-heading a {
@include dark {
color: #bdd5c3;
}
}

.microblog-comments .media a.username {
@include dark {
color: #bdd5c3;
}
.microblog {
.media > .media-body {
.media-heading a {
@include dark {
color: #bdd5c3;
}
}

.microblog-actions .btn {
@include light {
color: #777777;
}
.microblog-comments .media a.username {
@include dark {
color: #8f9ba5;
color: #bdd5c3;
}
}
}

.default-avatar {
.microblog-actions .btn {
@include light {
color: #00a538;
background: #e7f7e6;
color: #777777;
}
@include dark {
color: #78de13;
background: #0a1203;
color: #8f9ba5;
}
}
}

.card {
border: none;
box-shadow: none;
border-radius: 8px;
.default-avatar {
@include light {
color: $primary-color-light;
background: #e7f7e6;
}
@include dark {
color: $primary-color-dark;
background: #0a1203;
}
}

.card-tile {
border-radius: 6px;
@include light {
background: #eaecf1;
}
@include dark {
background: transparent;
}
.card {
border: none;
box-shadow: none;
border-radius: 8px;
}

.card-tile {
border-radius: 6px;
@include light {
background: #eaecf1;
}
@include dark {
background: transparent;
}
}

@include theme {
.viewers-online {
.viewer-pill {
border: none;
}
@include theme {
.viewers-online {
.viewer-pill {
border: none;
}

.viewers-users .circle {
border: 2px solid white;
.viewers-users .circle {
border: 2px solid white;

&.circle-number {
line-height: 32px;
}
&.circle-number {
line-height: 32px;
}
}
}
Expand Down Expand Up @@ -188,7 +243,7 @@ body.lookAndFeelModern {
height: 3px;
border-radius: 3px;
@include light {
background: linear-gradient(270deg, #00a538 0%, #ffffff 100%);
background: linear-gradient(270deg, $primary-color-light 0%, #ffffff 100%);
}

@include dark {
Expand Down
2 changes: 1 addition & 1 deletion resources/views/home.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{% block container %}
{{ render_block('homepage_banner') }}

<div class="row scope-homepage">
<div class="row">
<main class="col-md-8">
<section id="box-forum" class="mt-4">
<h2>
Expand Down
1 change: 0 additions & 1 deletion resources/views/layout.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@
<img
class="logo"
alt="4programmers.net"
style="height:30px;"
data-src-light="{{ cdn('img/logo-light.svg') }}"
data-src-dark="{{ cdn('img/logo-dark.svg') }}"
src="{{ __dark_theme ? cdn('img/logo-dark.svg') : cdn('img/logo-light.svg') }}"
Expand Down

0 comments on commit 3604626

Please sign in to comment.