flask adds about page and css beautification
D:\workspace\Python\blog\flaskr\blog.py
Add to
@bp.route("/about")
def about():
return render_template("blog/about.html")
pass
D:\workspace\Python\blog\flaskr\templates\blog\about.html
{<!-- -->% extends 'base.html' %}
{<!-- -->% block header %}
<h1>{<!-- -->% block title %} about my web {<!-- -->% endblock %}</h2>
<link rel="stylesheet" href="{<!-- -->{ url_for('static', filename='dropDown.css') }}">
{<!-- -->% endblock %}
{<!-- -->% block content %}
<p> This is about page</p>
<div class="dropdown">
<a href="#" style="color: #333;">TensorFlow</a>
<div class="dropdown-content">
<a href="#">Start Learning TensorFlow</a>
<a href="#">API Documentation</a>
<a href="#">GitHub repository</a>
</div>
</div>
{<!-- -->% endblock %}
D:\workspace\Python\blog\flaskr\static\dropDown.css
/* drop down menu */
.dropdown {<!-- -->
position: relative;
display: inline-block;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
border-radius: 5px;
padding: 10px;
}
/* dropdown menu content */
.dropdown-content {<!-- -->
display: none;
position: absolute;
z-index: 1;
background-color: #f2f2f2;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 5px;
}
/* Show the dropdown list when the mouse hovers over it */
.dropdown:hover .dropdown-content {<!-- -->
display: block;
}
/* dropdown list link style */
.dropdown-content a {<!-- -->
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* The background color of the dropdown list link when the mouse hovers over it */
.dropdown-content a:hover {<!-- -->
background-color: #ddd;
}
D:\workspace\Python\blog\flaskr\templates\base.html
<!doctype html>
<title>{<!-- -->% block title %}{<!-- -->% endblock %} - wmx web</title>
<link rel="stylesheet" href="{<!-- -->{ url_for('static', filename='dropDown.css') }}">
<link rel="stylesheet" href="{<!-- -->{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="{<!-- -->{ url_for('static',filename='editormd/css/editormd.css') }}" />
<link rel="stylesheet" href="{<!-- -->{ url_for('static',filename='editormd/css/editormd.preview.css') }}" />
<!----------------------------------- Navigation bar ----------- ------------------------>
<nav>
<ul>
<div class="dropdown">
<div style="color: #333;">Home</div>
<div class="dropdown-content">
<a href="{<!-- -->{ url_for('index') }}">main</a>
</div>
</div>
<div class="dropdown">
<div style="color: #333;">auth</div>
<div class="dropdown-content">
<a href="{<!-- -->{ url_for('auth.register') }}">Register</a>
<a href="{<!-- -->{ url_for('auth.login') }}">Log In</a>
{<!-- -->% if g.user %}
<a href="{<!-- -->{ url_for('auth.logout') }}">Log Out {<!-- -->{<!-- --> g. user['username'] }}</a>
{<!-- -->% endif %}
</div>
</div>
<div class="dropdown">
<div style="color: #333;">about</div>
<div class="dropdown-content">
<a href="{<!-- -->{ url_for('blog.about') }}">us</a>
</div>
</div>
</ul>
</nav>
<section class="content">
<!---------------------------------- block header ----------- ------------------------>
<header>
{<!-- -->% block header %}{<!-- -->% endblock %}
</header>
<!------------------------------------- messages ------------ ----------------------->
{<!-- -->% for message in get_flashed_messages() %}
<div class="flash">{<!-- -->{<!-- --> message }}</div>
{<!-- -->% endfor %}
<!---------------------------------- block content ----------- ------------------------>
{<!-- -->% block content %}{<!-- -->% endblock %}
</section>
D:\workspace\Python\blog\flaskr\static\style.css
/*global variables*/
:root{<!-- -->
--background: #a795644b;
--font-color: black;
--font-family: sans-serif;
--link-color:#377ba8;
--nav-bg-color: rgb(22, 22, 22);
--body-bg-color:white;
--primary-color: #007bff;
--dark-color: #343a40;
--light-color: #f8f9fa;
--selected-color: #28a745;
}
/* This selector targets the entire HTML document and sets the page's default font, background color, and padding. */
html {<!-- -->
font-family: var(--font-family);
color: var(--font-color);
background: var(--background);
padding: 1rem;
}
/* It sets the maximum width of the page body to 100% and removes its margins so that it takes up the full screen width. */
body {<!-- -->
max-width: 100%;
margin: 0;
background:var(--body-bg-color)
}
/* These selectors target different heading levels in HTML and set their font family, color and margin. As heading levels increase, the font size gradually decreases, with each level being 20% smaller than the previous level. */
h1, h2, h3, h4, h5, h6 {<!-- -->
font-family: var(--font-family);
color: var(--font-color);
margin: 1rem 0;
}
/* The font size of h1 is 2em */
h1 {<!-- -->
font-size: 2em;
}
/* h2 is 20% smaller than h1 font size, ie 1.6em */
h2 {<!-- -->
font-size: 1.6em;
}
/* h3 font size is 20% smaller than h2, ie 1.28em */
h3 {<!-- -->
font-size: 1.28em;
}
/* h4 is 20% smaller than h3, ie 1.024em */
h4 {<!-- -->
font-size: 1.024em;
}
/* h5 is 20% smaller than h4, ie 0.8192em */
h5 {<!-- -->
font-size: 0.8192em;
}
/* h6 is 20% smaller than h5, ie 0.6553em */
h6 {<!-- -->
font-size: 0.6553em;
}
/* This selector sets the color of the links on the page */
a {<!-- -->
color: var(--link-color);
}
/* This selector styles horizontal rules (i.e. lines) that can be used to visually separate content on a page. */
hr {<!-- -->
border: none;
border-top: 1px solid lightgray;
}
/* This selector styles the navigation bar at the top of the page, setting its max-width, background-color, and display properties. */
nav {<!-- -->
background: var(--nav-bg-color);
}
/* These selectors target the links and buttons in the navbar and set their display and padding properties. */
nav ul {<!-- -->
max-width: auto;
display: flex;
align-items: left;
justify-content: center; /* Add this line to center align the nav buttons */
background: var(--nav-bg-color);
}
/* button style */
button {<!-- -->
border: 2px solid rgb(22, 22, 22);
border-radius: 5px;
padding: 5px 5px;
background-color: white;
color: rgb(22, 22, 22);
font-weight: bold;
transition: all 0.3s ease;
}
button:hover {<!-- -->
background-color: #a795644b;
color: rgb(22, 22, 22);
cursor: pointer;
}
/* This selector styles the main content area of the page, adding padding and adjusting the position of various elements within it. */
.content {<!-- -->
padding: 5% 10%;;
}
/* This is a CSS selector that selects any <header> element that is a direct child of the element with class "content". The > symbol is a child element combinator, which selects only the immediate children of the parent element. */
.content > header {<!-- -->
border-bottom: 1px solid lightgray; /*set the bottom border, its thickness is 1px, the color is light gray*/
display: flex; /*Enable the flexible layout of its child elements*/
align-items: flex-end; /*Align the child elements of the header to the bottom of the container*/
}
/* Select any <h1> element in the header of all direct child elements under the element with the class name .content */
.content > header h1 {<!-- -->
flex: auto;
margin: 1rem 0 0.25rem 0; /*The outer margin of the selected <h1> element is 1rem above, 0 on the right, 0.25rem below, and 0 on the left */
}
/* Select the last child of .content and set its margin-bottom property to 0. */
.content:last-child {<!-- -->
margin-bottom: 0;
}
/* This is a CSS selector that selects any <form> element under the element with the class name content */
.content form {<!-- -->
margin: 1em 0; /* This attribute sets the top and bottom margins to 1em for the selected form element, and the left and right margins to 0, that is, leave a blank space in the up and down direction*/
display: flex; /* This makes the selected form element display in a flex layout */
flex-direction: column; /* This attribute specifies that the main axis direction of the flex container is vertical, so that its internal elements are arranged in order from top to bottom*/
}
.content label {<!-- -->
font-weight: bold;
margin: 0.5em;
}
/*Input box*/
.content input, .content textarea {<!-- -->
min-width: 10em;
margin: 0.5em;
}
/*id=username input box*/
#username {<!-- -->
max-width: 10em;
}
/*id=password input box*/
#password {<!-- -->
max-width: 10em;
}
/*Submit button submit */
input[type="submit"] {<!-- -->
/* Your styles here */
max-width: 10em;
}
.content textarea {<!-- -->
min-height: 0em;
resize: vertical;
}
/* This selector styles the element used to display a tooltip message or alert, adding margin, padding and background color. */
.flash {<!-- -->
margin: 1em 0;
padding: 1em;
background: #cae6f6;
border: 1px solid #377ba8;
}
/* .create-bar {
display: flex;
align-items: flex-end;
font-size: 0.85em;
}
.create-bar > div {
flex: 1;
} */
/* This selector styles individual blog posts in the main content area of the page, setting font size, alignment and margin properties for their title and body content. */
.post > header {<!-- -->
display: flex;
align-items: flex-end;
font-size: 0.75em;
}
.post > header > div:first-of-type {<!-- -->
flex: auto;
}
.post > header h1 {<!-- -->
font-size: 1.5em;
margin-bottom: 0;
}
.post .about {<!-- -->
color: slategray;
font-style: italic;
}
/* Select the element with the class name post and the element with the class name body */
.post .body {<!-- -->
/* This attribute is used to define how to deal with whitespace characters inside the element. Its value pre-line specifies that newline characters (\\
) should be preserved, but multiple space characters will be folded into one. In other words, this property will preserve the original newline character at the end of the line in the text, and combine multiple consecutive space characters into one space. */
white-space: pre-line;
}