Another CSS redesign attempt. Looks better, making progress one thing at a time. :
This commit is contained in:
Gitea
parent
f3ff90085d
commit
2ba794e712
6 changed files with 108 additions and 728 deletions
|
|
@ -1,68 +1,32 @@
|
|||
/* Quartznet main stylesheet */
|
||||
|
||||
/*
|
||||
* Base rules
|
||||
*/
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-display: swap;
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
/*
|
||||
https://stackoverflow.com/questions/36229356/whats-the-equivalent-of-the-container-bootstrap-class-in-purecss-io
|
||||
bootstrap container code
|
||||
*/
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
/* max-width: 80%; */
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Layout starts here!
|
||||
*/
|
||||
|
||||
header {
|
||||
min-height: 50px;
|
||||
/* text-align: center; */
|
||||
border-bottom: 5px solid gray;
|
||||
.overlay {
|
||||
display: flex;
|
||||
background-image: url("/quartznet/assets/images/bluenebula2.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 200px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3em;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
line-height: 80px;
|
||||
font-size: 3rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* flexbox navbar test*/
|
||||
|
|
@ -73,8 +37,9 @@ nav ul {
|
|||
}
|
||||
|
||||
nav ul li {
|
||||
font-size: 1.2em;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
|
|
@ -87,122 +52,67 @@ nav li a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Contains all content */
|
||||
main {
|
||||
padding-top: 20px;
|
||||
/*Extra space to push footer to the bottom when there is not much content*/
|
||||
/* @TODO fix height calculation. No way to get height of window as far as I know. Only the vertical height...*/
|
||||
/* min-height: calc(100vh - 340px); */
|
||||
min-height: 710px;
|
||||
margin-top: 30px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Content types
|
||||
*/
|
||||
|
||||
/* Content types */
|
||||
section {
|
||||
border-radius: 5px;
|
||||
min-height: 380px;
|
||||
margin-bottom: 2em;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
/* Login form styling. Work in progress. */
|
||||
.login-form {
|
||||
margin: 0 auto;
|
||||
width: 50%;
|
||||
/*Simple css to style it like a toggle switch*/
|
||||
.theme-switch-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-control, .btn {
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.form-label-group {
|
||||
.theme-switch {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.form-label-group>input, .form-label-group>label {
|
||||
padding: var(--input-padding-y) var(--input-padding-x);
|
||||
.theme-switch input {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.form-label-group>label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
.slider {
|
||||
background-color: #ccc;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 0; /* Override default `<label>` margin */
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .25rem;
|
||||
transition: all .1s ease-in-out;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.form-label-group input::-webkit-input-placeholder {
|
||||
color: transparent;
|
||||
.slider:before {
|
||||
background-color: #fff;
|
||||
bottom: 4px;
|
||||
content: "";
|
||||
height: 16px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
transition: .2s;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.form-label-group input:-ms-input-placeholder {
|
||||
color: transparent;
|
||||
input:checked + .slider {
|
||||
background-color: #66bb6a;
|
||||
}
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.form-label-group input::-ms-input-placeholder {
|
||||
color: transparent;
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.form-label-group input::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:placeholder-shown) {
|
||||
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
|
||||
padding-bottom: calc(var(--input-padding-y) / 3);
|
||||
}
|
||||
|
||||
.form-label-group input:not(:placeholder-shown)~label {
|
||||
color: #777;
|
||||
font-size: 12px;
|
||||
padding-top: calc(var(--input-padding-y) / 3);
|
||||
padding-bottom: calc(var(--input-padding-y) / 3);
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 18px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* Responsice design(tablet/mobile)
|
||||
*/
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
|
||||
|
|
@ -212,6 +122,10 @@ footer {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
Loading…
Reference in a new issue