First commit of the theme
This commit is contained in:
commit
360f7ecd96
24 changed files with 525 additions and 0 deletions
259
static/css/base.css
Normal file
259
static/css/base.css
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
/******************* Constants *******************/
|
||||
:root {
|
||||
--font-color: #000000;
|
||||
--background-color: #FFFFFF;
|
||||
|
||||
--max-width: 800px;
|
||||
--max-width-full: 1000px;
|
||||
--icon-size: 1em;
|
||||
|
||||
--footer-height-inline: 4em;
|
||||
--footer-height-block: 8em;
|
||||
}
|
||||
|
||||
/******************* Base *******************/
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing:inherit
|
||||
}
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
body {
|
||||
padding-top: 4em;
|
||||
font-family: Roboto, Ubuntu, Oxygen, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
line-height: 1.62;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
.page-icon {
|
||||
display: inline-block;
|
||||
max-width: var(--icon-size);
|
||||
max-height: var(--icon-size);
|
||||
}
|
||||
|
||||
/******************* Post *******************/
|
||||
.post {
|
||||
min-height: 100%;
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
margin-bottom: calc(-1 * var(--footer-height-inline));
|
||||
}
|
||||
.post:after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
.post_header {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
max-width: var(--max-width);
|
||||
}
|
||||
.post_header .post_title {
|
||||
font-size: 2em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.post_body {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
max-width: var(--max-width);
|
||||
}
|
||||
.post a {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
.post a:hover {
|
||||
text-decoration: underline solid;
|
||||
}
|
||||
.post:after {
|
||||
height: var(--footer-height-inline);
|
||||
}
|
||||
/******************* Footer *******************/
|
||||
.footer {
|
||||
height: var(--footer-height-inline);
|
||||
}
|
||||
.footer {
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
.footer .footer_link {
|
||||
color: white;
|
||||
}
|
||||
.footer .footer_link:hover {
|
||||
color: black;
|
||||
}
|
||||
.footer address {
|
||||
margin: auto;
|
||||
width: 90%;
|
||||
max-width: var(--max-width-full);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: var(--footer-height-inline);
|
||||
}
|
||||
.footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/******************* Navbar *******************/
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
padding: 0 5vw;
|
||||
line-height: 4em;
|
||||
z-index: 50;
|
||||
background: white;
|
||||
}
|
||||
#navigation {
|
||||
max-width: var(--max-width-full);
|
||||
margin: auto;
|
||||
}
|
||||
.navigation-item a {
|
||||
color: var(--primary-text);
|
||||
padding: 0.5rem 0;
|
||||
position: relative;
|
||||
}
|
||||
.navigation-item a:hover,
|
||||
.navigation-item a:focus {
|
||||
color: var(--primary-text);
|
||||
}
|
||||
.navigation-item a::before {
|
||||
bottom: 0;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
transition: all 0.25s ease-in-out;
|
||||
width: 0%;
|
||||
}
|
||||
.navigation-item a::before {
|
||||
background-color: black;
|
||||
}
|
||||
.navigation-item a:hover::before,
|
||||
.navigation-item a:focus::before {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.navigation-item.active a::before {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.navbar_title_logo {
|
||||
max-width: 7rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/******************* Navbar Toggle *******************/
|
||||
#menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
#navigation .menu-button {
|
||||
float: right;
|
||||
position:relative;
|
||||
display: none;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
#navigation .menu-button-inner {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
position:relative;
|
||||
top: 0.5em;
|
||||
left: 0.5em;
|
||||
text-align:center
|
||||
}
|
||||
#navigation .menu-button .menu-button-image {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 20px;
|
||||
width: 24px;
|
||||
top: 14px;
|
||||
background-image: url(../svg/bars.svg);
|
||||
background-size: contain;
|
||||
margin: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
#menu-toggle:checked + .menu-button .menu-button-image {
|
||||
opacity: 40%;
|
||||
}
|
||||
#navigation-list {
|
||||
position: absolute;
|
||||
top: 6rem;
|
||||
right: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
width: 100%;
|
||||
font-size: 1.5em;
|
||||
background-color: var(--background-color);
|
||||
border-top: solid 2px var(--font-color);
|
||||
border-bottom: solid 2px var(--font-color);
|
||||
transition: opacity .5s, max-height .35s linear;
|
||||
padding: 0;
|
||||
}
|
||||
#navigation-list .navigation-item {
|
||||
float: none !important;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
#navigation-list .navigation-item,
|
||||
#navigation-list .navigation-item span {
|
||||
line-height: 5rem;
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
#menu-toggle:checked + label + ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
max-height: max-content;
|
||||
}
|
||||
#navigation .menu-button {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/******************* Front-screen *******************/
|
||||
.front-screen {
|
||||
height: 90vh;
|
||||
position: relative;
|
||||
padding-left: 3em;
|
||||
margin: auto;
|
||||
max-width: var(--max-width-full);
|
||||
}
|
||||
.front-screen_caption {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.front-screen_caption h1 {
|
||||
font-weight: normal;
|
||||
font-size: 4rem;
|
||||
}
|
||||
.front-screen_caption h2 {
|
||||
font-weight: normal;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
/******************* Main - Sections *******************/
|
||||
.section, .separator {
|
||||
width: 60%;
|
||||
max-width: var(--max-width);
|
||||
margin: auto;
|
||||
}
|
||||
.separator {
|
||||
text-align: center;
|
||||
}
|
||||
.separator img {
|
||||
width: .5em;
|
||||
}
|
||||
.section:last-of-type {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
62
static/css/media-queries.css
Normal file
62
static/css/media-queries.css
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/******************* Main layout *******************/
|
||||
@media screen and (max-width: 768px) {
|
||||
.post {
|
||||
margin-bottom: calc(-1 * var(--footer-height-block));
|
||||
}
|
||||
.post_body {
|
||||
margin: 0 1em;
|
||||
}
|
||||
.post:after {
|
||||
height: var(--footer-height-block);
|
||||
}
|
||||
.footer {
|
||||
height: var(--footer-height-block);
|
||||
padding: 1em 0;
|
||||
}
|
||||
.footer address {
|
||||
display: block;
|
||||
}
|
||||
.footer p {
|
||||
line-height: 2em;
|
||||
}
|
||||
.front-screen {
|
||||
margin-left: 1em;
|
||||
padding-left: 0;
|
||||
}
|
||||
.section {
|
||||
width: 100%;
|
||||
padding: 1em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/******************* Navbar Menu *******************/
|
||||
@media only screen and (min-width: 768px) {
|
||||
#navigation-list {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: 0;
|
||||
max-height: none;
|
||||
visibility: visible;
|
||||
opacity: 100;
|
||||
width: auto;
|
||||
border: none;
|
||||
font-size: 1em;
|
||||
margin-top: 0;
|
||||
}
|
||||
#navigation-list .navigation-item {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 4rem;
|
||||
}
|
||||
#navigation-list .navigation-item a,
|
||||
#navigation-list .navigation-item span {
|
||||
line-height: 1rem;
|
||||
}
|
||||
#menu-toggle:checked + label + ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
#navigation .menu-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
1
static/svg/bars.svg
Normal file
1
static/svg/bars.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13.333"><path d="M16 11.333v1.334a.671.671 0 01-.667.666H.667A.671.671 0 010 12.667v-1.334c0-.364.302-.666.667-.666h14.666c.365 0 .667.302.667.666zM16 6v1.333a.671.671 0 01-.667.667H.667A.671.671 0 010 7.333V6c0-.365.302-.667.667-.667h14.666c.365 0 .667.302.667.667zm0-5.333V2a.671.671 0 01-.667.667H.667A.671.671 0 010 2V.667C0 .302.302 0 .667 0h14.666c.365 0 .667.302.667.667z"/></svg>
|
||||
|
After Width: | Height: | Size: 446 B |
1
static/svg/circle.svg
Normal file
1
static/svg/circle.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M16 8c0 4.417-3.583 8-8 8s-8-3.583-8-8 3.583-8 8-8 8 3.583 8 8z"/></svg>
|
||||
|
After Width: | Height: | Size: 144 B |
1
static/svg/copyright.svg
Normal file
1
static/svg/copyright.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M11.98 9.854v1.136c0 1.468-2.345 2.01-3.813 2.01-2.854 0-5-2.177-5-5.052C3.167 5.125 5.292 3 8.115 3c1.03 0 3.729.365 3.729 2.02v1.136a.164.164 0 01-.167.167h-1.23a.165.165 0 01-.166-.167v-.729c0-.656-1.26-.958-2.114-.958-1.948 0-3.302 1.406-3.302 3.427 0 2.094 1.416 3.625 3.385 3.625.75 0 2.167-.281 2.167-.938v-.729c0-.094.073-.166.156-.166h1.24c.083 0 .166.072.166.166zM8 1.334A6.673 6.673 0 001.333 8 6.673 6.673 0 008 14.667 6.673 6.673 0 0014.667 8 6.673 6.673 0 008 1.333zM16 8c0 4.417-3.583 8-8 8s-8-3.583-8-8 3.583-8 8-8 8 3.583 8 8z"/></svg>
|
||||
|
After Width: | Height: | Size: 624 B |
1
static/svg/envelope.svg
Normal file
1
static/svg/envelope.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12.571"><path d="M16 4.053v7.09c0 .785-.643 1.428-1.429 1.428H1.43A1.433 1.433 0 010 11.143v-7.09c.268.295.571.554.902.777 1.482 1.01 2.982 2.018 4.437 3.08.75.554 1.679 1.233 2.652 1.233h.018c.973 0 1.902-.679 2.652-1.232a171.118 171.118 0 014.446-3.08c.322-.224.625-.483.893-.778zm0-2.625c0 1-.741 1.902-1.527 2.447-1.393.964-2.794 1.928-4.178 2.902C9.715 7.178 8.732 8 8.009 8H7.99c-.723 0-1.705-.822-2.286-1.223-1.384-.974-2.785-1.938-4.17-2.902C.903 3.446 0 2.437 0 1.625 0 .75.473 0 1.429 0H14.57C15.348 0 16 .643 16 1.429z"/></svg>
|
||||
|
After Width: | Height: | Size: 597 B |
1
static/svg/map-marker.svg
Normal file
1
static/svg/map-marker.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="10.667" height="16"><path d="M8 5.333a2.672 2.672 0 00-2.667-2.666 2.672 2.672 0 00-2.666 2.666A2.672 2.672 0 005.333 8 2.672 2.672 0 008 5.333zm2.667 0c0 .636-.073 1.292-.344 1.865L6.53 15.26a1.33 1.33 0 01-1.198.74c-.5 0-.979-.281-1.187-.74L.344 7.198C.073 6.625 0 5.968 0 5.333A5.33 5.33 0 015.333 0a5.33 5.33 0 015.334 5.333z"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
1
static/svg/phone.svg
Normal file
1
static/svg/phone.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M16 12.636c0 .41-.182 1.205-.352 1.58-.239.557-.875.92-1.387 1.205-.67.363-1.352.579-2.113.579-1.057 0-2.012-.432-2.978-.784a10.62 10.62 0 01-1.988-.943C5.25 13.079 2.92 10.75 1.727 8.818A10.622 10.622 0 01.784 6.83C.432 5.864 0 4.91 0 3.852 0 3.091.216 2.41.58 1.74.864 1.227 1.227.59 1.784.352 2.16.182 2.954 0 3.364 0c.08 0 .159 0 .238.034.239.079.489.636.603.864.363.647.715 1.306 1.09 1.943.182.295.523.659.523 1.011 0 .693-2.057 1.705-2.057 2.318 0 .307.284.705.444.978 1.147 2.068 2.58 3.5 4.647 4.647.273.16.67.444.978.444.613 0 1.625-2.057 2.318-2.057.352 0 .716.34 1.011.522.636.375 1.296.728 1.943 1.091.228.114.784.364.864.603.034.08.034.159.034.238z"/></svg>
|
||||
|
After Width: | Height: | Size: 743 B |
Loading…
Add table
Add a link
Reference in a new issue