ag/strojnadzor
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Port CSS to Tailwind

Browse source
This commit is contained in:
Andrey Golovizin 2020-02-07 20:45:32 +01:00
parent ec098fa934
commit ec175fe0c6
5 changed files with 66 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

94
mysite/static-src/style.css
View file

@ -4,11 +4,32 @@
@tailwind utilities;
/* [ON BIG SCREEN] */
/* Wrapper */
.container {
max-width: 940px;
margin: 3rem auto
html {
font-size: 12pt;
}
p {
@apply leading-normal mt-2 mb-2;
}
h1, h2, h3, h4, h5, h6 {
@apply font-bold;
}
h1 {
@apply text-4xl mt-6;
}
h2 {
@apply text-3xl mt-4;
}
h3 {
@apply text-2xl mt-2;
}
h4 {
@apply text-xl mt-1;
}
.content {
@ -21,42 +42,18 @@
width: 20%;
}
#page-nav {
/* width: 100%; */
background: #276749;
display: block;
/* If you want the navigation bar to stick on top
position: sticky;
top: 0;
*/
padding-left: 0;
margin: 2rem 0;
}
/* Hide Hamburger */
#page-nav label, #hamburger {
display: none;
}
/* Menu Items */
#page-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
@apply m-0 p-0 list-none;
}
#page-nav ul li {
display: inline-block;
padding: 16px;
font-size: 18px;
box-sizing: border-box;
@apply inline-block p-3 text-lg;
}
#page-nav ul li a {
/* color: #fff; */
text-decoration: none;
color: white;
@apply text-white no-underline;
}
#page-nav ul li.selected {
background: #38A169;
@apply bg-green-600;
}
/* [ON SMALL SCREENS] */
@ -88,32 +85,31 @@
}
}
/* [DOES NOT MATTER] */
html, body {
padding: 0;
margin: 0;
font-family: arial, sans-serif;
}
.contact-form fieldset {
border: none;
padding: 1em 0 0 0;
}
.contact-form fieldset p {
display: inline-block;
color: #C53030;
@apply inline-block text-red-700;
}
.contact-form textarea::placeholder, .contact-form input::placeholder {
@apply text-gray-700;
}
.contact-form input, .contact-form textarea {
@apply w-full border border-gray-600 p-2;
}
.contact-form textarea {
width: 100%;
height: 10em;
}
.contact-form input {
width: 100%;
@apply h-64;
}
.contact-form label {
display: none;
@apply hidden;
}
.contact-form button {
@apply p-2 bg-green-800 text-white rounded mt-2;
}

114
mysite/static/style.css
View file

File diff suppressed because one or more lines are too long

6
mysite/tailwind.config.js
View file

@ -11,5 +11,11 @@ module.exports = {
decimal: 'decimal',
circle: 'circle'
},
screens: {
'sm': '640px',
// => @media (min-width: 640px) { ... }
'lg': '900px',
}
}
}

31
mysite/templates/base.html
View file

@ -5,38 +5,15 @@
<title>{% block title %}This is my new project home page{% endblock title %}</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="/static/style.css" rel="stylesheet">
<style type="text/css">
#page-nav {
padding-left: 0;
margin: 2rem 0;
}
#page-nav li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
.container {
max-width: 940px;
margin: 3rem auto
}
.content {
float: left;
width: 80%;
}
.sidebar {
float: left;
width: 20%;
}
</style>
{% render_block "css" %}
</head>
<body>
{% cms_toolbar %}
<div class="container">
<div class="container mx-auto">
<h1>Инженер-строитель В.&#8239Н.&#8239Головизин</h1>
<nav id="page-nav">
<label for="hamburger">&#9776;</label>
<input type="checkbox" id="hamburger"/>
<nav id="page-nav" class="bg-green-800 block mt-6 mb-6">
<label for="hamburger" class="hidden">&#9776;</label>
<input type="checkbox" id="hamburger" class="hidden"/>
<ul class="nav">
{% show_menu 0 100 100 100 %}

11
shell.nix
View file

@ -7,4 +7,13 @@ let
}) {};
python = import ./requirements.nix { inherit pkgs; };
in
python.interpreter
pkgs.mkShell {
name = "strojnadzor-env";
buildInputs = [
pkgs.nodejs
python.interpreter
];
shellHook = ''
'';
preferLocalBuild = true;
}