Browse Source

feat: rewrite styles

main
Inhji Y. 6 months ago
parent
commit
947eb22412
  1. 85
      assets/css/_navigation.scss
  2. 30
      assets/css/_variables.scss
  3. 18
      assets/css/app.scss
  4. 3
      lib/mirage_web/templates/layout/_sidebar.html.eex
  5. 5
      lib/mirage_web/templates/layout/root.html.leex

85
assets/css/_navigation.scss

@ -1,84 +1,16 @@
nav[role=navigation] {
@include color-assign(background-color, navigation);
line-height: 1.5em;
&:before {
content: '';
position: absolute;
width: 100%;
left: 0;
height: 3px;
@include color-assign(background-color, primary);
}
ul {
display: flex;
margin: 0 1rem;
padding: 0;
white-space: nowrap;
overflow-x: auto;
}
li {
display: inline-block;
}
li:first-child {
font-weight: bold;
}
li {
a {
display: block;
padding: 1rem;
text-decoration: none;
transition: all 0.3s;
@include color-assign(color, on-navigation);
&:hover, &.active {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
}
}
}
}
aside.menu {
ul {
li {
padding-left: 2rem;
margin: 0 -2rem 0 -4rem;
a {
@include color-assign(background-color, surface);
display: inline-block;
width: 100%;
padding: 1rem 2rem;
transition: all 0.3s;
text-decoration: none;
&:hover {
@include color-assign(background-color, background);
}
}
}
}
}
aside#sidebar {
nav#sidebar {
left: 0;
top: 0;
position: fixed;
width: $width-sidebar;
width: var(--width-sidebar);
height: 100vh;
box-shadow: 1px 0px 3px 0px rgba(0,0,0,0.75);
@include color-assign(background-color, navigation);
box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.5);
background-color: var(--background-navigation);
ul {
li {
a {
@include color-assign(color, on-navigation);
color: #ccc;
display: inline-block;
padding: 1rem;
text-decoration: none;
@ -86,8 +18,7 @@ aside#sidebar {
transition: all 0.3s;
&:hover, &.active {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
background-color: var(--primary);
}
svg.icon {

30
assets/css/_variables.scss

@ -0,0 +1,30 @@
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-phone: 768px;
--width-main: 100%;
--width-sidebar: 15rem;
--background-navigation: var(--dark);
--color-navigation: var(--white);
}

18
assets/css/app.scss

@ -1,2 +1,20 @@
@import "~@yaireo/tagify/src/tagify";
@import "~bootstrap-icons/font/bootstrap-icons.css";
@import "./variables";
@import "./navigation";
body {
margin-left: calc(var(--width-sidebar) + var(--ok-s-3));
}
@media (max-width: 768px) {
:root {
--width-main: 100%;
--width-sidebar: 3rem;
}
#sidebar {
a > .label { display: none; }
}
}

3
lib/mirage_web/templates/layout/_sidebar.html.eex

@ -3,8 +3,8 @@
<%= active_link(@conn, to: "/", wrap_tag: :li) do %>
<span class="icon">
<i class="bi bi-house"></i>
<span class="label">Home</span>
</span>
<span class="label">Home</span>
<% end %>
<%= active_link(@conn, to: Routes.inbox_index_path(@conn, :index), wrap_tag: :li) do %>
<span class="icon">
@ -12,7 +12,6 @@
</span>
<span class="label">Inbox</span>
<% end %>
<li class="spacer"></li>
<%= active_link(@conn, to: "/notes", wrap_tag: :li) do %>
<span class="icon">
<i class="bi bi-journal-text"></i>

5
lib/mirage_web/templates/layout/root.html.leex

@ -8,10 +8,11 @@
<%= live_title_tag assigns[:page_title] || "Inhji.de", suffix: " · Mirage" %>
<!--
<link rel="icon" href='favicon.ico'>
<link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<script defer src="https://dohliam.github.io/dropin-minimal-css/switcher.js" type="text/javascript"></script>
-->
<script defer src="https://dohliam.github.io/dropin-minimal-css/switcher.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://okcss.netlify.app/ok.min.css" />
<link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>
<body class="<%= body_class(assigns) %>">

Loading…
Cancel
Save