adding basic styles

SymfonyCasts · Jan 12, 2021 · 3e2c19a · 3e2c19a
1 parent 102689e
commit 3e2c19a
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 1 deletion.
diff --git a/public/images/mvp-logo-light.png b/public/images/mvp-logo-light.png
diff --git a/public/styles/app.css b/public/styles/app.css
@@ -0,0 +1,58 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
+
+body {
+    font-family: 'Montserrat', sans-serif;
+}
+
+a, a:hover  {
+    color: #000;
+}
+
+.header {
+    background-color: #343a40;
+    margin-bottom: 30px;
+    border-bottom: 2px solid #efefee;
+    padding: 0;
+}
+
+.header .logo {
+    width: 50px;
+    height: auto;
+}
+
+.footer {
+    background-color: #343a40;
+    padding: 30px;
+
+    border-top: 2px solid #BA1414;
+    color: #fff;
+    margin-top: 30px;
+}
+
+.footer span {
+    color: #ff0000;
+}
+
+.footer a {
+    color: #fff;
+    text-decoration: underline;
+}
+
+.footer a:hover {
+    color: #efefee;
+}
+
+.component-light {
+    border: 1px solid #efefee;
+    box-shadow: 0 0 7px 4px #efefee;
+    border-radius: 5px;
+    margin-top: 25px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.aside-collapsed {
+    padding: 0 15px;
+}
+
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -4,13 +4,16 @@
         <meta charset="UTF-8">
         <title>{% block title %}MVP Office Supplies{% endblock %}</title>
         {% block stylesheets %}
+            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+
+            <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
         {% endblock %}
     </head>
     <body>
         <header class="header">
             <nav class="navbar navbar-expand-lg navbar-dark justify-content-between">
                 <a class="navbar-brand" href="/">
-                    <img src="{{ asset('build/images/mvp-logo-light.png' ) }}"
+                    <img src="{{ asset('images/mvp-logo-light.png' ) }}"
                             width="50"
                             height="50"
                             alt="MVP Office Supplies Logo"