Port CSS to Tailwind

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

View file

@ -4,11 +4,32 @@
@tailwind utilities; @tailwind utilities;
/* [ON BIG SCREEN] */ html {
/* Wrapper */ font-size: 12pt;
.container { }
max-width: 940px;
margin: 3rem auto 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 { .content {
@ -21,42 +42,18 @@
width: 20%; 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 */ /* Menu Items */
#page-nav ul { #page-nav ul {
list-style-type: none; @apply m-0 p-0 list-none;
margin: 0;
padding: 0;
} }
#page-nav ul li { #page-nav ul li {
display: inline-block; @apply inline-block p-3 text-lg;
padding: 16px;
font-size: 18px;
box-sizing: border-box;
} }
#page-nav ul li a { #page-nav ul li a {
/* color: #fff; */ @apply text-white no-underline;
text-decoration: none;
color: white;
} }
#page-nav ul li.selected { #page-nav ul li.selected {
background: #38A169; @apply bg-green-600;
} }
/* [ON SMALL SCREENS] */ /* [ON SMALL SCREENS] */
@ -88,32 +85,31 @@
} }
} }
/* [DOES NOT MATTER] */
html, body {
padding: 0;
margin: 0;
font-family: arial, sans-serif;
}
.contact-form fieldset { .contact-form fieldset {
border: none; border: none;
padding: 1em 0 0 0; padding: 1em 0 0 0;
} }
.contact-form fieldset p { .contact-form fieldset p {
display: inline-block; @apply inline-block text-red-700;
color: #C53030; }
.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 { .contact-form textarea {
width: 100%; @apply h-64;
height: 10em;
}
.contact-form input {
width: 100%;
} }
.contact-form label { .contact-form label {
display: none; @apply hidden;
}
.contact-form button {
@apply p-2 bg-green-800 text-white rounded mt-2;
} }

File diff suppressed because one or more lines are too long

View file

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

View file

@ -5,38 +5,15 @@
<title>{% block title %}This is my new project home page{% endblock title %}</title> <title>{% block title %}This is my new project home page{% endblock title %}</title>
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<link href="/static/style.css" rel="stylesheet"> <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" %} {% render_block "css" %}
</head> </head>
<body> <body>
{% cms_toolbar %} {% cms_toolbar %}
<div class="container"> <div class="container mx-auto">
<h1>Инженер-строитель В.&#8239Н.&#8239Головизин</h1> <h1>Инженер-строитель В.&#8239Н.&#8239Головизин</h1>
<nav id="page-nav"> <nav id="page-nav" class="bg-green-800 block mt-6 mb-6">
<label for="hamburger">&#9776;</label> <label for="hamburger" class="hidden">&#9776;</label>
<input type="checkbox" id="hamburger"/> <input type="checkbox" id="hamburger" class="hidden"/>
<ul class="nav"> <ul class="nav">
{% show_menu 0 100 100 100 %} {% show_menu 0 100 100 100 %}

View file

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