Starting aboue me page!
This commit is contained in:
parent
fe12ef9a9f
commit
85d8e9ab6e
30 changed files with 950 additions and 255 deletions
|
@ -18,28 +18,6 @@
|
|||
|
||||
// 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;
|
||||
|
|
|
@ -68,6 +68,11 @@ hr {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.reduced-vertical-margin {
|
||||
margin-bottom: 0.2em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
@ -82,6 +87,10 @@ hr {
|
|||
display: inline !important;
|
||||
}
|
||||
|
||||
.ruby {
|
||||
display: ruby !important;
|
||||
}
|
||||
|
||||
.flex-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
|
@ -49,4 +49,21 @@
|
|||
&.purple {
|
||||
background: linear-gradient(var(--angle, 0deg), rgba(229,181,255,1) 0%, rgba(210,114,255,1) 100%);
|
||||
}
|
||||
&.tea {
|
||||
background: linear-gradient(var(--angle, 0deg), rgba(44,181,107,0.3) 0%, rgba(44,181,107,0.8) 100%);
|
||||
}
|
||||
&.ebon {
|
||||
background: linear-gradient(var(--angle, 0deg), #032B67 0%, #040D21 100%);
|
||||
}
|
||||
|
||||
// For dark background cards
|
||||
&.text-white :not([role=button]) > a {
|
||||
/* unvisited link */
|
||||
&:link, &:visited {
|
||||
color: #00c8d7;
|
||||
}
|
||||
&:hover {
|
||||
color: #00c8d7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -28,38 +28,42 @@
|
|||
.label-link {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.label, &.label {
|
||||
transition: max-height 0.15s ease-in;
|
||||
overflow: hidden;
|
||||
bottom: 0;
|
||||
max-height: 20%;
|
||||
background-color: #FFFFFFDD;
|
||||
padding: 0.5em;
|
||||
|
||||
.label {
|
||||
transition: max-height 0.15s ease-in;
|
||||
max-height: 20%;
|
||||
overflow: hidden;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFFDD;
|
||||
padding: 0.5em;
|
||||
bottom: 0;
|
||||
|
||||
.app-name {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
float: right;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
// Hide this information by default
|
||||
.show-on-hover {
|
||||
display: none;
|
||||
transition: opacity 0.15s;
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
p[role=button] {
|
||||
line-height: 1em;
|
||||
width: max-content;
|
||||
}
|
||||
&.expand {
|
||||
max-height: 100%;
|
||||
height: calc(100% - 1em);
|
||||
}
|
||||
|
||||
.app-name {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
float: right;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
// Hide this information by default
|
||||
.show-on-hover {
|
||||
display: none;
|
||||
transition: opacity 0.15s;
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
p[role=button] {
|
||||
line-height: 1em;
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -25,14 +25,34 @@
|
|||
height: -moz-fit-content;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out;
|
||||
|
||||
&.tag {
|
||||
border: solid 1px #AEAEAE;
|
||||
border-radius: 1.5em;
|
||||
background-color: var(--theme-color, var(--secondary-color));
|
||||
margin-right: 0.2em;
|
||||
padding-top: 0.3em;
|
||||
padding-bottom: 0.3em;
|
||||
padding-left: 0.7em;
|
||||
padding-right: 0.7em;
|
||||
|
||||
&.primary, &.secondary {
|
||||
&:active {
|
||||
filter: brightness(80%);
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(90%);
|
||||
z-index: 2
|
||||
}
|
||||
}
|
||||
|
||||
&.primary:not(.tag), &.secondary:not(.tag) {
|
||||
margin: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-size: larger;
|
||||
box-shadow: 0px 0px 2px 0px #000000;
|
||||
transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out;
|
||||
filter: brightness(100%);
|
||||
|
||||
&:active {
|
||||
|
@ -52,10 +72,13 @@
|
|||
display: inline-block;
|
||||
color: black;
|
||||
padding: 0.5em;
|
||||
background-color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-white [role=button]:not(.primary):not(.secondary) a, [role=button]:not(.primary):not(.secondary).text-white a, nav.text-white [role=button]:not(.primary):not(.secondary) {
|
||||
.text-white [role=button]:not(.primary):not(.secondary) a,
|
||||
[role=button]:not(.primary):not(.secondary).text-white a,
|
||||
nav.text-white [role=button]:not(.primary):not(.secondary) {
|
||||
color: white;
|
||||
}
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
width: 1em;
|
||||
height: 1em;
|
||||
margin-top: -0.05em;
|
||||
margin-right: 0.5em;
|
||||
margin-right: 0.2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
@ -51,6 +51,10 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-in-text {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.shadowed {
|
||||
filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6));
|
||||
}
|
||||
|
@ -88,6 +92,7 @@
|
|||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
|
||||
|
||||
.icon-windows:before { content: '\e800'; } /* '' */
|
||||
.icon-web:before { content: '\e801'; } /* '' */
|
||||
.icon-universal:before { content: '\e802'; } /* '' */
|
||||
|
@ -119,3 +124,5 @@
|
|||
.icon-mail:before { content: '\e81c'; } /* '' */
|
||||
.icon-github:before { content: '\e81d'; } /* '' */
|
||||
.icon-git:before { content: '\e81e'; } /* '' */
|
||||
.icon-transparent:before { content: '\e81f'; } /* '' */
|
||||
|
||||
|
|
39
assets/scss/components/sections/section-max-108.scss
Normal file
39
assets/scss/components/sections/section-max-108.scss
Normal file
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
* 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/>.
|
||||
*/
|
||||
|
||||
.section-max-108 {
|
||||
width: Min(108em, 100vw);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 108em) {
|
||||
.section-max-108 {
|
||||
width: 81em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 81em) {
|
||||
.section-max-108 {
|
||||
width: 54em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 54em) {
|
||||
.section-max-108 {
|
||||
width: Min(27em, 100vw);
|
||||
}
|
||||
}
|
|
@ -42,12 +42,12 @@
|
|||
// Omegicons font
|
||||
@font-face {
|
||||
font-family: 'omegicons';
|
||||
src: url('../fonts/omegicons/omegicons.eot?54316140');
|
||||
src: url('../fonts/omegicons/omegicons.eot?54316140#iefix') format('embedded-opentype'),
|
||||
url('../fonts/omegicons/omegicons.woff2?54316140') format('woff2'),
|
||||
url('../fonts/omegicons/omegicons.woff?54316140') format('woff'),
|
||||
url('../fonts/omegicons/omegicons.ttf?54316140') format('truetype'),
|
||||
url('../fonts/omegicons/omegicons.svg?54316140#omegicons') format('svg');
|
||||
src: url('../fonts/omegicons/omegicons.eot?51725251');
|
||||
src: url('../fonts/omegicons/omegicons.eot?51725251#iefix') format('embedded-opentype'),
|
||||
url('../fonts/omegicons/omegicons.woff2?51725251') format('woff2'),
|
||||
url('../fonts/omegicons/omegicons.woff?51725251') format('woff'),
|
||||
url('../fonts/omegicons/omegicons.ttf?51725251') format('truetype'),
|
||||
url('../fonts/omegicons/omegicons.svg?51725251#omegicons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue