127 lines
3.5 KiB
SCSS
127 lines
3.5 KiB
SCSS
/**
|
|
* Omegamma - Hugo theme for ad5001.eu and related websites.
|
|
* Copyright (C) 2021 Ad5001
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
// CSS specific to the apps website.
|
|
|
|
#appslist {
|
|
width: Min(108em, 100vw);
|
|
}
|
|
|
|
@media screen and (max-width: 108em) {
|
|
#appslist {
|
|
width: 81em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 81em) {
|
|
#appslist {
|
|
width: 54em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 54em) {
|
|
#appslist {
|
|
width: Min(27em, 100vw);
|
|
}
|
|
}
|
|
|
|
.app-download {
|
|
--border: solid 1px var(--primary-color);
|
|
--border-radius: 1rem;
|
|
border-right: var(--border);
|
|
border-bottom: var(--border);
|
|
|
|
&:first-of-type {
|
|
border-left: var(--border);
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
|
|
.app-download-platform {
|
|
border-top-left-radius: var(--border-radius);
|
|
}
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-top-right-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
|
|
.app-download-platform {
|
|
border-top-right-radius: var(--border-radius);
|
|
}
|
|
}
|
|
|
|
.app-download-platform {
|
|
line-height: 3;
|
|
font-size: x-large;
|
|
}
|
|
|
|
.app-os-sources {
|
|
hr {
|
|
color: var(--primary-color);
|
|
|
|
&:last-of-type {
|
|
opacity: 0;
|
|
height: 0.1em;
|
|
}
|
|
}
|
|
|
|
a img {
|
|
width: Min(300px, calc(100% - 2em));
|
|
box-shadow: 0px 0px 0px 0px #000000;
|
|
transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out;
|
|
border-radius: 0.5em;
|
|
filter: brightness(100%);
|
|
|
|
&:hover {
|
|
box-shadow: 0px 0px 8px 0px #000000;
|
|
filter: brightness(90%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 850px) {
|
|
.app-download {
|
|
border-left: var(--border);
|
|
|
|
&:first-of-type {
|
|
border-top-left-radius: var(--border-radius) !important;
|
|
border-top-right-radius: var(--border-radius) !important;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
|
|
& .app-download-platform {
|
|
border-top-left-radius: var(--border-radius) !important;
|
|
border-top-right-radius: var(--border-radius) !important;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: var(--border-radius) !important;
|
|
border-bottom-right-radius: var(--border-radius) !important;
|
|
|
|
& .app-download-platform {
|
|
border-top-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|