Port CSS to Tailwind
This commit is contained in:
parent
ec098fa934
commit
ec175fe0c6
5 changed files with 66 additions and 190 deletions
|
|
@ -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
|
|
@ -11,5 +11,11 @@ module.exports = {
|
||||||
decimal: 'decimal',
|
decimal: 'decimal',
|
||||||
circle: 'circle'
|
circle: 'circle'
|
||||||
},
|
},
|
||||||
|
screens: {
|
||||||
|
'sm': '640px',
|
||||||
|
// => @media (min-width: 640px) { ... }
|
||||||
|
|
||||||
|
'lg': '900px',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>Инженер-строитель В. Н. Головизин</h1>
|
<h1>Инженер-строитель В. Н. Головизин</h1>
|
||||||
<nav id="page-nav">
|
<nav id="page-nav" class="bg-green-800 block mt-6 mb-6">
|
||||||
<label for="hamburger">☰</label>
|
<label for="hamburger" class="hidden">☰</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 %}
|
||||||
|
|
|
||||||
11
shell.nix
11
shell.nix
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue