Skip to content

R
red_brick_board
Commit e49381f9 authored by rachbit's avatar rachbit
Browse files
Options

fixed bug and interface in navbar

parent a175570d
Hide whitespace changes
Inline Side-by-side
Showing with 202 additions and 39 deletions
redbrickboard/static/css/custom.css
View file @ e49381f9
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
:root { :root {
--theme-prusian-blue: #003049; --theme-prusian-blue: #003049;
...@@ -6,6 +7,7 @@ ...@@ -6,6 +7,7 @@
--theme-orange: #F77F00; --theme-orange: #F77F00;
--theme-yellow-red: #FCBF49; --theme-yellow-red: #FCBF49;
--theme-dutch-white: #EAE2B7; --theme-dutch-white: #EAE2B7;
--theme-white: ##F8F9FA;
} }
* { * {
...@@ -14,13 +16,104 @@ ...@@ -14,13 +16,104 @@
} }
body { body {
font-family: "Inter";
background-color: var(--theme-dutch-white); background-color: var(--theme-dutch-white);
background-image: url("/static/images/Continuous Background.png"); background-image: url("/static/images/Continuous Background.png");
background-position: left top; background-position: left top;
background-repeat: repeat-y; background-repeat: repeat-y;
background-size: 80%; background-size: 80%;
} }
.navbar-brand {
display: contents;
}
.nav-item {
#nav-signup {
width: 120%;
font-size: 1vw;
margin-top: 0.45rem;
color: #fff;
background-color: var(--theme-bright-red);
border-color: var(--theme-bright-red);
&:hover {
transition: all 0.3s ease-in;
font-size: 1.0vw;
color: #fff;
background-color: var(--theme-prusian-blue);
border-color: var(--theme-prusian-blue);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
}
}
#nav-event {
font-size: 1vw;
margin-top: 0.45rem;
color: #fff;
background-color: var(--theme-prusian-blue);
border-color: var(--theme-prusian-blue);
&:hover {
transition: all 0.3s ease-in;
font-size: 1.0vw;
color: #fff;
background-color: var(--theme-bright-red);
border-color: var(--theme-bright-red);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
}
}
#login-register{
width: 100%;
color: #fff;
background-color: var(--theme-bright-red);
border-color: var(--theme-bright-red);
}
.nav-link {
transition: all 0.3s ease-in;
color: var(--theme-bright-red) !important;
font-size: 1.2vw;
white-space: nowrap;
&:hover{
transition: all 0.3s ease-in;
font-size: 1.3vw;
color: var(--theme-prusian-blue) !important;
text-decoration: underline;
}
}
}
.btn {
transition: all 0.3s ease-in;
font-size: 1vw;
color: #000;
background-color: var(--theme-white);
border-color: var(--theme-white);
border-radius: 0.3125rem;
white-space: nowrap;
}
@media (max-width: 576px) {
.logo {
width:100px;
height:auto;
}
}
@media (min-width: 577px) {
.logo {
width:20%;
max-width:200px;
height:auto;
}
}
/*
.btn-red { .btn-red {
transition: all 0.3s ease-in; transition: all 0.3s ease-in;
font-size: 1.5vw; font-size: 1.5vw;
...@@ -38,28 +131,30 @@ body { ...@@ -38,28 +131,30 @@ body {
border-color: var(--theme-prusian-blue); border-color: var(--theme-prusian-blue);
} }
---
@media (max-width: 950px) { @media (max-width: 950px) {
.navbar-brand { .navbar-brand {
width: 90%; width: 90%;
} }
} }
@media (max-width: 780px) { @media (max-width: 780px) {
.navbar-brand { .navbar-brand {
width: 85%; width: 85%;
} }
} }
@media (max-width: 560px) { @media (max-width: 560px) {
.navbar-brand { .navbar-brand {
width: 75%; width: 75%;
} }
} }
@media (max-width: 425px) { @media (max-width: 425px) {
.navbar-brand { .navbar-brand {
width: 70%; width: 70%;
} }
} }
.nav-link { .nav-link {
...@@ -109,6 +204,7 @@ body { ...@@ -109,6 +204,7 @@ body {
border: 1px solid #000 !important; border: 1px solid #000 !important;
background: #FFF !important; background: #FFF !important;
} }
*/
.login-btn { .login-btn {
margin-top: 1.62rem; margin-top: 1.62rem;
...@@ -116,4 +212,38 @@ body { ...@@ -116,4 +212,38 @@ body {
border-radius: 0.3125rem; border-radius: 0.3125rem;
background: #DF4E4E; background: #DF4E4E;
border-color: #DF4E4E; border-color: #DF4E4E;
} }
\ No newline at end of file
#trial {
align-items: center;
background-color: white;
}
#featured-events-div {
margin-top: 7.5rem;
height: 100vh;
}
#login-container {
align-items: center;
justify-content: center;
}
#login-form {
border-radius: 0.625rem;
border: 1px solid #000;
background: #FFF;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.form-group > label {
margin-top: 1.19rem;
}
.form-group > input:not([type="submit"]) {
border-radius: 0.625rem !important;
border: 1px solid #000 !important;
background: #FFF !important;
}
redbrickboard/templates/base.html
View file @ e49381f9
...@@ -14,39 +14,72 @@ ...@@ -14,39 +14,72 @@
<link rel="stylesheet" type="text/css" href="{% static '/css/custom.css' %}"> <link rel="stylesheet" type="text/css" href="{% static '/css/custom.css' %}">
<link rel="icon" type="image/x-icon" href="static/images/Logo.png"> <link rel="icon" type="image/x-icon" href="static/images/Logo.png">
<title>{% block title %}Red Brick Board{% endblock %}</title> <title>{% block title %}Red Brick Board{% endblock %}</title>
</head> </head>
<body> <body>
<nav class="px-5 navbar navbar-expand-lg navbar-light bg-light"> <nav class="navbar navbar-expand-md navbar-light bg-light px-5">
<div class="container-fluid justify-content-end"> <div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="{% static '/images/Logo with Name.png' %}" alt="Red Brick Board" style="width:30%; height:auto;"> <a class="navbar-brand" href="/#">
<img src="{% static '/images/Logo with Name.png' %}" alt="Red Brick Board" class="logo">
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<ul class="navbar-nav d-flex"> <div class="nav-item me-4">
<li class="nav-item"> </div>
<a class="nav-link" href="/eventcatalog" style="margin-right: 2.94rem;">Event Catalog</a>
</li> <div class="collapse navbar-collapse justify-content align-items-right" id="nav">
<li class="nav-item"> <ul class="navbar-nav">
{% if user.is_authenticated %}
<form role="Log Out" action="{% url 'accounts:logout' %}" method="post"> <li class="nav-item">
{% csrf_token %} <a href="/eventcatalog" class="nav-link mt-1">Events</a>
<button class="btn btn-red" type="submit">Log Out</button> </li>
</form> <li class="nav-item">
{% else %} <a href="/#" class="nav-link mt-1">Featured</a>
<form role="Log In" action="{% url 'accounts:login' %}" method="post"> </li>
{% csrf_token %} <li class="nav-item">
<button class="btn btn-red" type="submit">Log In</button> <a href="/#" class="nav-link mt-1">Create</a>
</form> </li>
{% endif %} <li class="nav-item">
</li> <a href="/#" class="nav-link mt-1">Bump</a>
</li>
</ul> </ul>
</div>
<div class="collapse navbar-collapse justify-content-end align-items-center" id="nav">
<ul class="navbar-nav">
<li class="nav-item">
{% if user.is_authenticated %}
<form role="Log Out" action="{% url 'accounts:logout' %}" method="post">
{% csrf_token %}
<button class="btn me-3 mt-2" type="submit">Log Out</button>
</form>
<li class="nav-item">
<!--<a class="nav-link" href="/eventcatalog" style="margin-right: 2.94rem;">Event Catalog</a>-->
<a href="/#" class="btn me-3" id="nav-signup">My Profile</a>
</li>
{% else %}
<form role="Log In" action="{% url 'accounts:login' %}" method="post">
{% csrf_token %}
<button class="btn me-3 mt-2" type="submit">Log In</button>
</form>
<li class="nav-item">
<!--<a class="nav-link" href="/eventcatalog" style="margin-right: 2.94rem;">Event Catalog</a>-->
<a href="/accounts/register" class="btn me-3" id="nav-signup">Sign Up</a>
</li>
{% endif %}
</li>
</ul>
</div>
</div> </div>
</nav> </nav>
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment