colwellkr/HummingBirdAnimeClient
1
0
Fork 0
forked from timw4mail/HummingBirdAnimeClient
Code Pull Requests Activity

Responsive updates for smaller screen sizes

Browse Source
This commit is contained in:
Timothy Warren 2018-11-05 09:47:05 -05:00
parent 6770c133fb
commit 24edf55f44
6 changed files with 415 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/all.css Normal file
View File

@ -0,0 +1,4 @@
@import "./marx.css";
@import "./general.css";
@import "./components.css";
@import "./responsive.css";

2
public/css/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

264
public/css/components.css Normal file
View File

@ -0,0 +1,264 @@
/* -----------------------------------------------------------------------------
CSS loading icon
------------------------------------------------------------------------------*/
.cssload-loader {
position: relative;
left: calc(50% - 31px);
width: 62px;
height: 62px;
border-radius: 50%;
perspective: 780px;
}
.cssload-inner {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
}
.cssload-inner.cssload-one {
left: 0%;
top: 0%;
animation: cssload-rotate-one 1.15s linear infinite;
border-bottom: 3px solid rgb(0, 0, 0);
}
.cssload-inner.cssload-two {
right: 0%;
top: 0%;
animation: cssload-rotate-two 1.15s linear infinite;
border-right: 3px solid rgb(0, 0, 0);
}
.cssload-inner.cssload-three {
right: 0%;
bottom: 0%;
animation: cssload-rotate-three 1.15s linear infinite;
border-top: 3px solid rgb(0, 0, 0);
}
@keyframes cssload-rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes cssload-rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes cssload-rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
/* ----------------------------------------------------------------------------
Loading overlay
-----------------------------------------------------------------------------*/
#loading-shadow {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 500;
}
#loading-shadow .loading-wrapper {
position: fixed;
z-index: 501;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#loading-shadow .loading-content {
position: relative;
color: #fff
}
.loading-content .cssload-inner.cssload-one,
.loading-content .cssload-inner.cssload-two,
.loading-content .cssload-inner.cssload-three {
border-color: #fff
}
/* ----------------------------------------------------------------------------
CSS Tabs
-----------------------------------------------------------------------------*/
.tabs {
display: inline-block;
display: flex;
flex-wrap: wrap;
background: #efefef;
box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
margin-top: 1.5em;
}
.tabs > label {
border: 1px solid #e5e5e5;
width: 100%;
padding: 20px 30px;
background: #e5e5e5;
cursor: pointer;
font-weight: bold;
font-size: 18px;
color: #7f7f7f;
transition: background 0.1s, color 0.1s;
/* margin-left: 4em; */
}
.tabs > label:hover {
background: #d8d8d8;
}
.tabs > label:active {
background: #ccc;
}
.tabs > [type=radio]:focus + label {
box-shadow: inset 0px 0px 0px 3px #2aa1c0;
z-index: 1;
}
.tabs > [type=radio] {
position: absolute;
opacity: 0;
}
.tabs > [type=radio]:checked + label {
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
.tabs > [type=radio]:checked + label + .content {
border: 1px solid #e5e5e5;
border-top: 0;
display: block;
padding: 15px;
background: #fff;
width: 100%;
margin: 0 auto;
overflow: auto;
/* text-align: center; */
}
.tabs .content {
display: none;
max-height: 950px;
border: 1px solid #e5e5e5;
border-top: 0;
padding: 15px;
background: #fff;
width: 100%;
margin: 0 auto;
overflow: auto;
}
.tabs .content.full-height {
max-height: none;
}
@media (min-width: 800px) {
.tabs > label {
width: auto;
}
.tabs .content {
order: 99;
}
}
/* ---------------------------------------------------------------------------
Vertical Tabs
----------------------------------------------------------------------------*/
.vertical-tabs {
border: 1px solid #e5e5e5;
box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
margin: 0 auto;
position: relative;
width: 100%;
}
.vertical-tabs input[type="radio"] {
position: absolute;
opacity: 0;
}
.vertical-tabs .tab {
align-items: center;
display: inline-block;
display: flex;
flex-wrap: nowrap;
}
.vertical-tabs .tab label {
align-items: center;
background: #e5e5e5;
border: 1px solid #e5e5e5;
color: #7f7f7f;
cursor: pointer;
font-size: 18px;
font-weight: bold;
padding: 0 20px;
width: 28%;
}
.vertical-tabs .tab label:hover {
background: #d8d8d8;
}
.vertical-tabs .tab label:active {
background: #ccc;
}
.vertical-tabs .tab .content {
display: none;
border: 1px solid #e5e5e5;
border-left: 0;
border-right: 0;
max-height: 950px;
overflow: auto;
}
.vertical-tabs .tab .content.full-height {
max-height: none;
}
.vertical-tabs [type=radio]:checked + label {
border: 0;
background: #fff;
color: #000;
width: 38%;
}
.vertical-tabs [type=radio]:focus + label {
box-shadow: inset 0px 0px 0px 3px #2aa1c0;
z-index: 1;
}
.vertical-tabs [type=radio]:checked ~ .content {
display: block;
}

334
public/css/base.css → public/css/general.css
View File

@ -1,5 +1,3 @@
@import "./marx.css";
:root { :root {
--blue-link: rgb(18, 113, 219); --blue-link: rgb(18, 113, 219);
--link-shadow: 1px 1px 1px #000; --link-shadow: 1px 1px 1px #000;
@ -56,6 +54,11 @@ a:hover, a:active {
color: var(--link-hover-color) color: var(--link-hover-color)
} }
iframe {
display: block;
margin: 0 auto;
}
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
Utility classes Utility classes
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
@ -169,7 +172,7 @@ a:hover, a:active {
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-evenly; align-content: space-evenly;
justify-content: space-between; justify-content: space-between;
position:relative; position: relative;
} }
td .media-wrap-flex { td .media-wrap-flex {
@ -227,75 +230,6 @@ td .media-wrap-flex {
font-weight: 500; font-weight: 500;
} }
/* -----------------------------------------------------------------------------
CSS loading icon
------------------------------------------------------------------------------*/
.cssload-loader {
position: relative;
left: calc(50% - 31px);
width: 62px;
height: 62px;
border-radius: 50%;
perspective: 780px;
}
.cssload-inner {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
}
.cssload-inner.cssload-one {
left: 0%;
top: 0%;
animation: cssload-rotate-one 1.15s linear infinite;
border-bottom: 3px solid rgb(0, 0, 0);
}
.cssload-inner.cssload-two {
right: 0%;
top: 0%;
animation: cssload-rotate-two 1.15s linear infinite;
border-right: 3px solid rgb(0, 0, 0);
}
.cssload-inner.cssload-three {
right: 0%;
bottom: 0%;
animation: cssload-rotate-three 1.15s linear infinite;
border-top: 3px solid rgb(0, 0, 0);
}
@keyframes cssload-rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes cssload-rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes cssload-rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
Table sorting and form styles Table sorting and form styles
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
@ -352,8 +286,6 @@ td .media-wrap-flex {
border: 0; border: 0;
} }
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
Message boxes Message boxes
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
@ -430,7 +362,7 @@ td .media-wrap-flex {
height: 311px; height: 311px;
margin: var(--normal-padding); margin: var(--normal-padding);
z-index: 0; z-index: 0;
background: rgba(0,0,0,0.15); background: rgba(0, 0, 0, 0.15);
} }
.details picture.cover, .details picture.cover,
@ -723,13 +655,13 @@ picture.cover {
} }
.fixed { .fixed {
max-width: 100rem; /* max-width: 100rem; */
/* max-width: 80%; */ max-width: 80%;
margin: 0 auto; margin: 0 auto;
} }
.fixed .text { .fixed .text {
max-width: 600px; max-width: 40em;
} }
.details .cover { .details .cover {
@ -839,19 +771,32 @@ picture.cover {
} }
.max-table { .max-table {
min-width:100%; min-width: 100%;
margin: 0; margin: 0;
} }
aside.info { aside.info {
/* max-width: 390px; */
max-width: 33%;
}
.fixed aside.info {
max-width: 390px; max-width: 390px;
} }
/* .fixed aside.info + article {
max-width: inherit;
} */
aside.info picture, aside.info img { aside.info picture, aside.info img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
aside.info + article {
max-width: 66%;
}
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
User page styles User page styles
-----------------------------------------------------------------------------*/ -----------------------------------------------------------------------------*/
@ -876,26 +821,6 @@ aside.info picture, aside.info img {
height: 100%; height: 100%;
} }
/* ----------------------------------------------------------------------------
Viewport-based styles
-----------------------------------------------------------------------------*/
@media screen and (max-width: 40em) {
nav a {
line-height: 4em;
line-height: 4rem;
}
.media {
margin: 2px 0;
}
main {
padding: 0 0, 5em 0.5em;
padding: 0 0.5rem 0.5rem;
}
}
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
Images / Logos Images / Logos
-----------------------------------------------------------------------------*/ -----------------------------------------------------------------------------*/
@ -906,7 +831,7 @@ aside.info picture, aside.info img {
} }
.cover-streaming-link { .cover-streaming-link {
display:none; display: none;
} }
.media:hover .cover-streaming-link { .media:hover .cover-streaming-link {
@ -920,195 +845,6 @@ aside.info picture, aside.info img {
filter: drop-shadow(0 -1px 4px #fff); filter: drop-shadow(0 -1px 4px #fff);
} }
/* ----------------------------------------------------------------------------
Loading overlay
-----------------------------------------------------------------------------*/
#loading-shadow {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 500;
}
#loading-shadow .loading-wrapper {
position: fixed;
z-index: 501;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#loading-shadow .loading-content {
position: relative;
color: #fff
}
.loading-content .cssload-inner.cssload-one,
.loading-content .cssload-inner.cssload-two,
.loading-content .cssload-inner.cssload-three {
border-color: #fff
}
/* ----------------------------------------------------------------------------
CSS Tabs
-----------------------------------------------------------------------------*/
.tabs {
display: inline-block;
display: flex;
flex-wrap: wrap;
background: #efefef;
box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
margin-top: 1.5em;
}
.tabs > label {
border: 1px solid #e5e5e5;
width: 100%;
padding: 20px 30px;
background: #e5e5e5;
cursor: pointer;
font-weight: bold;
font-size: 18px;
color: #7f7f7f;
transition: background 0.1s, color 0.1s;
/* margin-left: 4em; */
}
.tabs > label:hover {
background: #d8d8d8;
}
.tabs > label:active {
background: #ccc;
}
.tabs > [type=radio]:focus + label {
box-shadow: inset 0px 0px 0px 3px #2aa1c0;
z-index: 1;
}
.tabs > [type=radio] {
position: absolute;
opacity: 0;
}
.tabs > [type=radio]:checked + label {
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
.tabs > [type=radio]:checked + label + .content {
border: 1px solid #e5e5e5;
border-top: 0;
display: block;
padding: 15px;
background: #fff;
width: 100%;
margin: 0 auto;
overflow: auto;
/* text-align: center; */
}
.tabs .content {
display: none;
max-height: 950px;
}
.tabs .content.full-height {
max-height: none;
}
@media (min-width: 600px) {
.tabs > label {
width: auto;
}
.tabs .content {
order: 99;
}
}
/* ---------------------------------------------------------------------------
Vertical Tabs
----------------------------------------------------------------------------*/
.vertical-tabs {
border: 1px solid #e5e5e5;
box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
margin: 0 auto;
position: relative;
width: 100%;
}
.vertical-tabs input[type="radio"] {
display: none;
}
.vertical-tabs .tab {
align-items: center;
display: inline-block;
display: flex;
flex-wrap: nowrap;
}
.vertical-tabs .tab label {
align-items: center;
background: #e5e5e5;
border: 1px solid #e5e5e5;
color: #7f7f7f;
cursor: pointer;
font-size: 18px;
font-weight: bold;
padding: 0 20px;
width: 28%;
}
.vertical-tabs .tab label:hover {
background: #d8d8d8;
}
.vertical-tabs .tab label:active {
background: #ccc;
}
.vertical-tabs .tab .content {
display: none;
border: 1px solid #e5e5e5;
border-left: 0;
border-right: 0;
max-height: 950px;
overflow: auto;
}
.vertical-tabs .tab .content.full-height {
max-height: none;
}
.vertical-tabs [type=radio]:checked + label {
border: 0;
background: #fff;
color: #000;
width: 38%;
}
.vertical-tabs [type=radio]:focus + label {
box-shadow: inset 0px 0px 0px 3px #2aa1c0;
z-index: 1;
}
.vertical-tabs [type=radio]:checked ~ .content {
display: block;
}
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
Settings Form Settings Form
-----------------------------------------------------------------------------*/ -----------------------------------------------------------------------------*/
@ -1117,3 +853,23 @@ Settings Form
display: inline-block; display: inline-block;
width: auto; width: auto;
} }
/* ----------------------------------------------------------------------------
iFrame container
-----------------------------------------------------------------------------*/
.responsive-iframe {
margin-top: 1em;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.responsive-iframe iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}

99
public/css/responsive.css Normal file
View File

@ -0,0 +1,99 @@
/* ----------------------------------------------------------------------------
Viewport-based styles
-----------------------------------------------------------------------------*/
@media screen and (max-width: 1100px) {
.flex {
flex-wrap: wrap;
}
aside.info,
aside.info + article,
.fixed aside.info,
.fixed aside.info + article {
max-width: none;
width: 100%;
}
/* aside.info {
order: 1;
} */
}
@media screen and (max-width: 800px) {
* {
max-width: none !important;
}
table {
box-shadow: none;
}
body,
.details .flex > * {
margin: 0;
}
}
@media screen and (max-width: 40em) {
nav a {
line-height: 4em;
line-height: 4rem;
}
img,
picture {
width: 100%;
}
main {
padding: 0 0, 5em 0.5em;
padding: 0 0.5rem 0.5rem;
}
table {
display: block;
}
.media {
margin: 2px 0;
}
.details {
padding: 0.5em;
padding: 0.5rem;
}
/* Expand tabs */
.tabs > [type="radio"]:checked + label {
background: #fff;
}
/* Expand vertical tabs */
.vertical-tabs .tab {
flex-wrap: wrap;
}
.tabs .content,
.tabs > [type="radio"]:checked + label + .content,
.vertical-tabs .tab .content {
display: block;
border: 0;
max-height: none;
}
.tabs > label,
.tabs > label:active,
.tabs > label:hover,
.tabs > [type="radio"]:checked + label,
.vertical-tabs .tab label,
.vertical-tabs .tab label:active,
.vertical-tabs .tab label:hover,
.vertical-tabs [type=radio]:focus + label,
.vertical-tabs [type=radio]:checked + label {
background: #fff;
border: 0;
width: 100%;
cursor: default;
color: #000;
}
}

4
public/tools/css.js
View File

@ -7,7 +7,7 @@ const atImport = require('postcss-import');
const cssNext = require('postcss-cssnext'); const cssNext = require('postcss-cssnext');
const cssNano = require('cssnano'); const cssNano = require('cssnano');
const css = fs.readFileSync('css/base.css', 'utf-8'); const css = fs.readFileSync('css/all.css', 'utf-8');
postcss() postcss()
.use(atImport()) .use(atImport())
@ -21,7 +21,7 @@ postcss()
} }
})) }))
.process(css, { .process(css, {
from: 'css/base.css', from: 'css/all.css',
to: 'css/app.min.css' to: 'css/app.min.css'
}).then(result => { }).then(result => {
fs.writeFileSync('css/app.min.css', result.css); fs.writeFileSync('css/app.min.css', result.css);