friendship ended with social-app. php is my new best friend
veryroundbird.house
1#page {
2 display: grid;
3 max-width: 900px;
4 border-right: 1px var(--border-color) solid;
5 min-height: 100vh;
6 grid-template-areas: "header header"
7 "nav nav"
8 "main aside"
9 "main footer";
10 grid-template-columns: 1fr 240px;
11 grid-template-rows: auto auto auto 1fr;
12
13 @media only screen and (max-width: 768px) {
14 grid-template-areas: "header"
15 "nav"
16 "main"
17 "aside"
18 "footer";
19 grid-template-columns: 1fr;
20 grid-template-rows: auto;
21 border-right: none;
22 }
23}
24
25header {
26 padding: 10px;
27
28 h1 {
29 margin: 0;
30
31 svg {
32 max-width: 42px;
33 max-height: 42px;
34 vertical-align: middle;
35
36 path {
37 fill: var(--text-color);
38 }
39 }
40
41 a {
42 color: inherit;
43 text-decoration: none;
44 display: flex;
45 align-items: center;
46 gap: 10px;
47 }
48 }
49}
50
51nav {
52 padding: 10px;
53 border-bottom: 1px var(--border-color) solid;
54 grid-area: nav;
55
56 ul {
57 margin: 0;
58 padding: 0;
59 list-style: none;
60 display: flex;
61 gap: 10px;
62 }
63}
64
65main {
66 border-right: 1px var(--border-color) solid;
67 grid-area: main;
68 max-width: 660px;
69 width: 100%;
70
71 h2 {
72 font-size: 1.5em;
73 margin: 0.5em 0;
74 }
75
76 &.page,
77 &.form,
78 &.settings {
79 padding: 10px;
80 }
81
82 @media only screen and (max-width: 768px) {
83 border-right: none;
84 }
85}
86
87aside {
88 padding: 10px;
89 border-bottom: 1px var(--border-color) solid;
90 grid-area: aside;
91}
92
93#homefeeds {
94 list-style: none;
95 margin: 0;
96 padding: 0;
97
98 li {
99 a {
100 display: block;
101 padding: 8px 0;
102 }
103 }
104}
105
106footer {
107 padding: 10px;
108 grid-area: footer;
109 font-size: .8em;
110 text-align: center;
111}
112
113#themes {
114 margin-bottom: 1em;
115
116 ul {
117 list-style: none;
118 margin: 0;
119 padding: 0;
120 text-align: center;
121 display: flex;
122 justify-content: center;
123 align-items: center;
124 gap: 5px;
125 }
126}
127
128#fonts {
129 margin-bottom: 1em;
130
131 ul {
132 list-style: none;
133 margin: 0;
134 padding: 0;
135 text-align: center;
136 display: flex;
137 justify-content: center;
138 align-items: center;
139 gap: 5px;
140 }
141}
142
143#font-heading,
144#theme-heading {
145 margin: 5px auto;
146}
147
148button[data-theme] {
149 display: block;
150 width: 24px;
151 height: 24px;
152 border: 1px var(--border-color) solid;
153 text-indent: -99px;
154 overflow: hidden;
155}
156
157button[data-font] {
158 display: flex;
159 text-indent: -500px;
160 overflow: hidden;
161 color: inherit;
162 text-decoration: none;
163 font-size: 1.5em;
164
165 &:before {
166 content: "Aa";
167 text-indent: 0px;
168 }
169}
170
171#links,
172#pages {
173 text-transform: lowercase;
174 margin: 1em auto;
175
176 a:after {
177 margin: 0 10px;
178 }
179}